:root {
  --pink: #ff6fa5;
  --yellow: #ffd97a;
  --mint: #52e0c4;
  --cyan: #6ee7ff;
  --panel: #171a24;
  --panel-light: #20242f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, #2a2f3d 0%, #14161f 55%, #0a0b10 100%);
  padding: 4vh 3vw;
}

/* ---------- restaurant scene ---------- */
.restaurant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1300px;
}

.sign {
  position: relative;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--pink),
    0 0 28px var(--pink),
    0 0 46px var(--pink);
  margin-bottom: 2.4vh;
  animation: flicker 5s ease-in-out infinite;
  text-align: center;
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.75; }
  94% { opacity: 1; }
  95.5% { opacity: 0.6; }
  96% { opacity: 1; }
}

.screen {
  position: relative;
  width: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--panel-light) 0%, var(--panel) 100%);
  border: 3px solid #2c313f;
  box-shadow:
    0 0 0 6px #0d0f15,
    0 0 40px rgba(110, 231, 255, 0.15),
    0 0 80px rgba(255, 111, 165, 0.12),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  padding: 3.5vh 3vw 4vh;
  overflow: hidden;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 10;
}

.subtitle {
  text-align: center;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  font-weight: 700;
  opacity: 0.75;
  margin: 0 0 3.5vh;
}

/* ---------- squad layout (menu items) ---------- */
.squad {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4vw 2.4vw;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  width: min(36vw, 220px);
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.6rem 0.8rem 1rem;
}

.label {
  margin-top: 1rem;
  font-weight: 800;
  color: #fff;
  display: block;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
}

.price {
  display: block;
  margin-top: 0.3rem;
  color: var(--mint);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-shadow: 0 0 8px rgba(82, 224, 196, 0.5);
}

.hint {
  position: relative;
  margin-top: 3.5vh;
  color: #cfd3e0;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.6;
  z-index: 5;
  text-align: center;
}

.counter {
  width: min(100%, 1100px);
  height: 3.5vh;
  margin-top: -6px;
  background: linear-gradient(180deg, #3a2c22 0%, #241a14 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- shared character mechanics ---------- */
.character {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  animation: float 3s ease-in-out infinite;
  cursor: pointer;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.12));
}

.character:nth-of-type(odd) { animation-duration: 3.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

.character.squish {
  animation: squish 0.5s cubic-bezier(.36, 1.9, .55, .95);
}

@keyframes squish {
  0% { transform: scale(1, 1) rotate(0deg); }
  30% { transform: scale(1.18, 0.78) rotate(-2deg); }
  55% { transform: scale(0.9, 1.12) rotate(2deg); }
  75% { transform: scale(1.05, 0.95) rotate(-1deg); }
  100% { transform: scale(1, 1) rotate(0deg); }
}

/* cute ears — sit behind the body shape, colored per character */
.character::before,
.character::after {
  content: "";
  position: absolute;
  top: 2%;
  width: 17%;
  aspect-ratio: 1 / 1.05;
  background: radial-gradient(ellipse at 50% 65%, #ffb8dd 22%, var(--ear-color, #f2ead6) 24%);
  border-radius: 60% 60% 50% 50%;
  z-index: 0;
}

.character::before { left: 12%; transform: rotate(-25deg); }
.character::after { right: 12%; transform: rotate(25deg); }

/* face (shared, position tuned per character below) */
.face {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 15%;
  z-index: 5;
}

.eye {
  width: 10%;
  aspect-ratio: 1 / 1.15;
  background: #2b2320;
  border-radius: 50%;
  position: relative;
  animation: blink 4.5s ease-in-out infinite;
  transform-origin: center;
}

.eye::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 55%;
  width: 32%;
  height: 32%;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}

.cheek {
  position: absolute;
  top: 130%;
  width: 20%;
  aspect-ratio: 1.4 / 1;
  background: radial-gradient(circle, rgba(255, 150, 175, 0.8), rgba(255, 150, 175, 0));
  border-radius: 50%;
}

.cheek.left { left: -18%; }
.cheek.right { right: -18%; }

.mouth {
  position: absolute;
  top: 118%;
  left: 50%;
  width: 20%;
  aspect-ratio: 1.8 / 1;
  border-bottom: 3px solid #8a5a4a;
  border-left: 3px solid #8a5a4a;
  border-right: 3px solid #8a5a4a;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%);
  opacity: 0.85;
}

.eye.happy {
  background: transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 4px solid #2b2320;
  height: 45%;
  align-self: flex-end;
  animation: none;
}

.eye.happy::after { display: none; }

/* sparkles */
.sparkle {
  position: absolute;
  width: 20px;
  height: 20px;
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  background: #fffaf0;
  filter: drop-shadow(0 0 6px var(--cyan));
  animation: twinkle 2.2s ease-in-out infinite;
  z-index: 4;
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.1) rotate(25deg); opacity: 1; }
}

.sp1 { top: 2%; left: 4%; animation-delay: 0s; }
.sp2 { top: 10%; right: 0%; animation-delay: 0.7s; width: 14px; height: 14px; }
.sp3 { bottom: 20%; left: -4%; animation-delay: 1.4s; width: 12px; height: 12px; }
.sp4 { top: 45%; right: -6%; animation-delay: 0.4s; }

/* click burst sparkles (added by script.js) */
.burst {
  position: absolute;
  width: 16px;
  height: 16px;
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  background: var(--pink);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

.burst.go {
  animation: burst-out 0.7s ease-out forwards;
}

@keyframes burst-out {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(180deg); }
}

/* =====================================================
   ONIGIRI
   ===================================================== */
.onigiri { --ear-color: #f2ead6; }

.onigiri .rice {
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 30% 22%, #ffffff 0%, #fdfaf3 55%, #f2ead6 100%);
  clip-path: polygon(50% 2%, 63% 14%, 96% 88%, 84% 98%, 16% 98%, 4% 88%, 37% 14%);
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.25)) drop-shadow(0 18px 12px rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.onigiri .rice::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 2%, 63% 14%, 96% 88%, 84% 98%, 16% 98%, 4% 88%, 37% 14%);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 3px, transparent 4px);
  background-size: 18px 18px;
  opacity: 0.5;
}

.onigiri .nori {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 34%;
  clip-path: polygon(18% 0%, 82% 0%, 96% 78%, 84% 100%, 16% 100%, 4% 78%);
  background: linear-gradient(160deg, #1c2b1e 0%, #0c1710 55%, #16241a 100%);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.08), inset 0 -8px 14px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.onigiri .nori::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 15%;
  width: 70%;
  height: 14%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: rotate(-6deg);
}

.onigiri .face { top: 32%; }

/* =====================================================
   BOBA TEA
   ===================================================== */
.boba { --ear-color: #ecd8b8; }

.boba .cup {
  position: absolute;
  inset: 20% 15% 4% 15%;
  clip-path: polygon(10% 0%, 90% 0%, 78% 100%, 22% 100%);
  background: linear-gradient(180deg, #f2e0c4 0%, #f2e0c4 16%, #c98a4b 18%, #a06e3a 100%);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2), 0 18px 14px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1;
}

.boba .cup::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 10%;
  width: 18%;
  height: 55%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-8deg);
}

.boba .pearls {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
}

.boba .pearls span {
  position: absolute;
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a4030, #2a1c14 70%);
}

.boba .pearls span:nth-child(1) { left: 8%; bottom: 4%; }
.boba .pearls span:nth-child(2) { left: 26%; bottom: 20%; }
.boba .pearls span:nth-child(3) { left: 44%; bottom: 2%; }
.boba .pearls span:nth-child(4) { left: 60%; bottom: 22%; }
.boba .pearls span:nth-child(5) { left: 76%; bottom: 6%; }
.boba .pearls span:nth-child(6) { left: 36%; bottom: 32%; }

.boba .lid {
  position: absolute;
  top: 12%;
  left: 10%;
  right: 10%;
  height: 12%;
  border-radius: 50% 50% 10% 10% / 70% 70% 10% 10%;
  background: linear-gradient(180deg, #fffaf2 0%, #ece3d6 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.boba .straw {
  position: absolute;
  top: -18%;
  left: 46%;
  width: 9%;
  height: 40%;
  background: repeating-linear-gradient(180deg, var(--pink) 0 8px, #fff 8px 16px);
  border-radius: 3px;
  transform: rotate(8deg);
  z-index: 1;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.25);
}

.boba .face { top: 56%; z-index: 5; }

/* =====================================================
   GYOZA
   ===================================================== */
.gyoza { --ear-color: #f7ecd2; }

.gyoza .dumpling {
  position: absolute;
  inset: 26% 4% 18% 4%;
  border-radius: 50% 50% 42% 42% / 68% 68% 42% 42%;
  background:
    radial-gradient(circle at 30% 78%, rgba(178, 122, 60, 0.5), transparent 40%),
    radial-gradient(circle at 70% 82%, rgba(178, 122, 60, 0.4), transparent 35%),
    linear-gradient(180deg, #f7ecd2 0%, #f7ecd2 58%, #dda05a 60%, #b97a3e 100%);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 14px 12px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.gyoza .dumpling::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 8%;
  right: 8%;
  height: 20%;
  background-image: radial-gradient(circle, #f7ecd2 44%, transparent 46%);
  background-size: 15% 100%;
  background-repeat: repeat-x;
  background-position: center top;
}

.gyoza .face { top: 32%; }

/* =====================================================
   HOT POT
   ===================================================== */
.hotpot { --ear-color: #eee6da; }

.hotpot .steam-wrap {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60%;
  height: 40%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

.hotpot .steam {
  position: absolute;
  bottom: 0;
  width: 14%;
  height: 70%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  filter: blur(2px);
  animation: rise 3.2s ease-in-out infinite;
  opacity: 0;
}

.hotpot .steam.s1 { left: 15%; animation-delay: 0s; }
.hotpot .steam.s2 { left: 43%; height: 85%; animation-delay: 0.9s; }
.hotpot .steam.s3 { left: 68%; animation-delay: 1.8s; }

@keyframes rise {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  20% { opacity: 0.8; }
  50% { transform: translateY(-40%) scaleX(1.3); opacity: 0.5; }
  100% { transform: translateY(-90%) scaleX(1.7); opacity: 0; }
}

.hotpot .pot {
  position: absolute;
  inset: 28% 10% 38% 10%;
  border-radius: 50% 50% 15% 15% / 100% 100% 15% 15%;
  overflow: hidden;
  background: linear-gradient(90deg, #d97a6b 0% 47%, #c56a5c 47% 50%, #f6efe4 50% 100%);
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hotpot .veggie {
  position: absolute;
  border-radius: 50%;
}

.hotpot .veggie.mushroom {
  width: 20%;
  height: 14%;
  left: 18%;
  top: 20%;
  background: linear-gradient(180deg, #eee0c8, #d8c39d);
  border-radius: 50% 50% 40% 40%;
}

.hotpot .veggie.leaf {
  width: 16%;
  height: 22%;
  right: 20%;
  top: 12%;
  background: linear-gradient(160deg, #8fcf7a, #5fa350);
  border-radius: 0 60% 0 60%;
  transform: rotate(-15deg);
}

.hotpot .veggie.meat {
  width: 22%;
  height: 12%;
  right: 24%;
  bottom: 16%;
  background: linear-gradient(180deg, #f6bfc2, #e0949a);
  border-radius: 50%;
}

.hotpot .handle {
  position: absolute;
  top: 58%;
  width: 14%;
  height: 14%;
  border: 6px solid #b9ada0;
  border-radius: 50%;
  background: transparent;
  z-index: 1;
}

.hotpot .handle-left { left: -6%; border-right-color: transparent; }
.hotpot .handle-right { right: -6%; border-left-color: transparent; }

.hotpot .band {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8%;
  height: 34%;
  background: linear-gradient(180deg, #eee6da 0%, #cfc3b2 60%, #b9ada0 100%);
  border-radius: 0 0 22% 22% / 0 0 45% 45%;
  box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hotpot .band::after {
  content: "";
  position: absolute;
  inset: 20% 10%;
  background-image: radial-gradient(circle, #9c8f80 22%, transparent 24%);
  background-size: 22% 100%;
  background-repeat: repeat-x;
}

.hotpot .face { top: 78%; z-index: 6; }

/* =====================================================
   TOUCHSCREEN ORDER KIOSK
   ===================================================== */
.kiosk {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 820px;
  margin: 3.5vh auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2rem 1.5rem 1.6rem;
  background: linear-gradient(180deg, #12141c 0%, #0a0b11 100%);
  border: 1px solid rgba(110, 231, 255, 0.18);
  border-radius: 20px;
  box-shadow:
    0 0 30px rgba(110, 231, 255, 0.1),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.kiosk-heading {
  margin: 0;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  font-weight: 700;
  opacity: 0.85;
}

.kiosk-line {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

.kiosk-line .typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.3rem);
  border-right: 3px solid var(--mint);
  animation:
    kiosk-typing 1.8s steps(22, end) forwards,
    cursor-blink 0.8s step-end infinite;
}

@keyframes kiosk-typing {
  from { width: 0; }
  to { width: 22ch; }
}

@keyframes cursor-blink {
  0%, 50% { border-color: var(--mint); }
  50.01%, 100% { border-color: transparent; }
}

.kiosk-button {
  position: relative;
  padding: 0.9em 2.4em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), #ff9ecb);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  box-shadow: 0 0 0 0 rgba(255, 111, 165, 0.5), 0 10px 24px rgba(255, 111, 165, 0.25);
  overflow: hidden;
  animation: button-pulse 2.4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes button-pulse {
  0%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 111, 165, 0.5), 0 10px 24px rgba(255, 111, 165, 0.25); }
  75% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(255, 111, 165, 0), 0 10px 24px rgba(255, 111, 165, 0.25); }
}

.kiosk-button .ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 60%);
  opacity: 0;
  animation: ripple-tap 2.4s ease-out infinite;
  animation-delay: 2s;
}

@keyframes ripple-tap {
  0%, 60% { opacity: 0; transform: scale(0.6); }
  72% { opacity: 0.6; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(1.3); }
}

.kiosk-ticket {
  position: relative;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.9rem 1.6rem 1.1rem;
  background: #fdfaf3;
  color: #2b2320;
  border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, monospace;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  transform: rotate(-1deg);
  opacity: 0;
  animation: ticket-print 0.6s ease-out forwards;
  animation-delay: 3.9s;
}

@keyframes ticket-print {
  from { opacity: 0; transform: translateY(-14px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

.ticket-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a7f6d;
}

.ticket-number {
  display: flex;
  gap: 0.15em;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ticket-number .digit {
  display: inline-block;
  opacity: 0;
  animation: digit-in 0.25s ease-out forwards;
}

.ticket-number .d1 { animation-delay: 4.2s; }
.ticket-number .d2 { animation-delay: 4.4s; }
.ticket-number .d3 { animation-delay: 4.6s; }

@keyframes digit-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ticket-jag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  background:
    linear-gradient(135deg, #fdfaf3 50%, transparent 50%) 0 0,
    linear-gradient(-135deg, #fdfaf3 50%, transparent 50%) 0 0;
  background-size: 12px 12px;
  background-repeat: repeat-x;
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .card { width: min(60vw, 200px); }
}