/* =========================================================
   Trump's Beijing Visit · Interactive H5
   Color palette extracted from infographics
   ========================================================= */
:root {
  --bg:        #f3ede0;
  --bg-2:      #f8f5ee;
  --paper:     #efe6d3;
  --ink:       #14253b;
  --ink-2:     #1a2b3c;
  --muted:     #5b6878;
  --line:      #d8cdb6;
  --gold:      #b8924a;
  --gold-2:    #d9b97a;
  --red:       #a02418;
  --red-2:     #c63a2d;
  --good:      #1d7a4d;
  --shadow:    0 10px 30px rgba(20, 37, 59, 0.18);
  --shadow-sm: 0 4px 12px rgba(20, 37, 59, 0.12);
  --serif:     'Playfair Display', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --sans:      -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { user-select: none; -webkit-user-drag: none; }

/* =========================================================
   SPLASH SCREEN
   ========================================================= */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, #fbf5e6 0%, var(--bg) 60%),
    var(--bg);
  text-align: center;
  padding: 0 28px;
  transition: opacity .6s ease, transform .6s ease;
}
.splash.hide { opacity: 0; transform: translateY(-3%); pointer-events: none; }

.splash-inner {
  position: relative;
  z-index: 2;
  animation: rise .9s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-flags {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 22px;
}
.flag {
  width: 46px; height: 30px; border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  position: relative; overflow: hidden;
}
.flag.cn { background: #de2910; }
.flag.cn::before {
  content: '★'; color: #ffde00; font-size: 14px;
  position: absolute; left: 5px; top: 4px;
}
.flag.cn::after {
  content: '★ ★ ★ ★'; color: #ffde00; font-size: 6px; letter-spacing: 1px;
  position: absolute; left: 16px; top: 8px;
  transform: rotate(20deg);
}
.flag.us {
  background:
    linear-gradient(to bottom,
      #b22234 0, #b22234 14.28%,
      #fff 14.28%, #fff 28.56%,
      #b22234 28.56%, #b22234 42.85%,
      #fff 42.85%, #fff 57.14%,
      #b22234 57.14%, #b22234 71.42%,
      #fff 71.42%, #fff 85.71%,
      #b22234 85.71%, #b22234 100%);
}
.flag.us::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 50%; height: 56%; background: #3c3b6e;
}
.splash-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(184,146,74,.18);
}

.splash-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 9vw, 52px);
  letter-spacing: 1px;
  line-height: 1.05;
  color: var(--ink);
}
.splash-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  margin-top: 10px;
}
.splash-line {
  width: 140px; height: 2px; margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--red) 50%, transparent);
}
.splash-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 4px; font-weight: 700;
  color: var(--red);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.splash-meta {
  font-family: var(--serif);
  font-size: 12px; letter-spacing: 3px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.splash-cta {
  margin-top: 38px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: var(--ink);
  color: #fffbef;
  border-radius: 50px;
  font-size: 15px; font-weight: 600; letter-spacing: 2px;
  box-shadow: var(--shadow);
  transition: transform .2s, background .2s;
}
.splash-cta:active { transform: scale(.96); background: var(--red); }
.splash-hint {
  margin-top: 18px; color: var(--muted); font-size: 12px; letter-spacing: 3px;
  opacity: .8;
}

.splash-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 90px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'><g fill='%23d8cdb6' opacity='.55'><path d='M0 90 V70 L20 60 L25 70 L40 65 L50 50 L60 60 L75 55 L80 70 L100 65 L110 45 L120 60 L130 55 L150 60 L160 40 L175 55 L185 50 L200 60 L215 55 L220 35 L230 50 L250 55 L260 45 L275 55 L285 50 L300 60 L320 55 L325 35 L340 55 L360 50 L375 60 L385 55 L400 65 V90 Z'/><path d='M165 70 l8-25 l8 25 z M260 65 l6-20 l6 20 z'/></g></svg>") center bottom / cover no-repeat;
  pointer-events: none;
}

/* =========================================================
   DECK / PAGES (1, 2, 3)
   ========================================================= */
.deck {
  width: 100%; height: 100vh; height: 100dvh;
  overflow-y: scroll;
  scrollbar-width: none;
  touch-action: none;
  cursor: pointer;
}
.deck::-webkit-scrollbar { display: none; }

.page {
  position: relative;
  width: 100%; height: 100vh; height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,.5), transparent 60%),
    var(--bg);
  overflow: hidden;
}

/* The image is 1152x2048 = 9:16. We let it fill height. */
.image-wrap {
  position: relative;
  height: 100%;
  aspect-ratio: 1152 / 2048;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.page-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 28px rgba(20,37,59,.10));
}

.page-badge {
  position: absolute; top: max(env(safe-area-inset-top), 14px); left: 16px;
  font-family: var(--serif);
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  color: var(--ink-2);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(20,37,59,.12);
  padding: 6px 12px;
  border-radius: 30px;
  z-index: 3;
}

/* End CTA on page 3 */
.end-cta {
  position: absolute; bottom: max(env(safe-area-inset-bottom), 24px);
  left: 0; right: 0; display: flex; justify-content: center;
  z-index: 4;
}
.ghost-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--gold);
  color: var(--ink-2);
  border-radius: 50px;
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  transition: transform .15s;
}
.ghost-btn:active { transform: scale(.96); background: var(--paper); }

/* =========================================================
   PAGER (dots)
   ========================================================= */
.pager {
  position: fixed; right: 14px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 20;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20,37,59,.25);
  border: 0; padding: 0;
  transition: all .25s;
}
.dot.active {
  background: var(--red);
  height: 22px;
  border-radius: 5px;
}

/* =========================================================
   NUMBERED HOTSPOTS (pages 1, 2, 3)
   Invisible buttons with a subtle gold ripple on tap.
   No persistent frame — discoverability via a small,
   one-time hint that fades out automatically.
   ========================================================= */
.num-spot {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 5;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s;
}
/* Soft gold wash on hover (desktop) */
@media (hover: hover) {
  .num-spot:hover {
    background: radial-gradient(ellipse at center,
                  rgba(184,146,74,.10) 0%, transparent 70%);
  }
}
.num-spot:active { transform: scale(.985); }

/* Tap ripple from the center */
.num-spot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(184,146,74,.55);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.num-spot:active::after { animation: ripple .55s ease-out; }
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(20);  opacity: 0;  }
}

/* One-time discoverability — a single gentle breath then quiet */
.page .num-spot {
  animation: hint-breath 3s ease-in-out 2;
}
@keyframes hint-breath {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(184,146,74,0); }
  50%      { box-shadow: inset 0 0 0 2px rgba(184,146,74,.25); }
}

/* =========================================================
   INFO MODAL  (cream paper card for itinerary items)
   ========================================================= */
.info-modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.info-modal.active { visibility: visible; opacity: 1; }
.info-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 37, 59, .45);
  backdrop-filter: blur(4px);
}
.info-card {
  position: relative;
  background: #fbf5e6;
  border: 1px solid rgba(184,146,74,.45);
  border-radius: 6px;
  padding: 34px 28px 26px;
  max-width: 360px;
  width: 100%;
  box-shadow:
    0 30px 60px rgba(20,37,59,.45),
    inset 0 0 0 1px rgba(255,255,255,.55);
  text-align: center;
  transform: translateY(20px) scale(.97);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.info-modal.active .info-card { transform: translateY(0) scale(1); }

/* Editorial corner ornaments — replaces the old full inner frame */
.info-card::before,
.info-card::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
  pointer-events: none;
  opacity: .6;
}
.info-card::before {
  top: 10px; left: 10px;
  border-right: 0; border-bottom: 0;
}
.info-card::after {
  bottom: 10px; right: 10px;
  border-left: 0; border-top: 0;
}

.info-badge {
  width: 40px; height: 40px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--ink);
  color: #fffbef;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 16px; font-weight: 700;
  border: 2px solid #fbf5e6;
  box-shadow:
    0 4px 12px rgba(20,37,59,.25),
    0 0 0 1px rgba(184,146,74,.4);
  position: relative;
  z-index: 1;
}
.info-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: transparent;
  color: var(--muted);
  opacity: .6;
  transition: opacity .15s, color .15s;
  z-index: 3;
}
.info-close:hover { opacity: 1; color: var(--ink); }

.info-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 3.5px; font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  position: relative; z-index: 1;
}
.info-title {
  font-family: var(--serif);
  font-size: 25px; font-weight: 700; letter-spacing: .3px;
  color: var(--ink);
  margin: 8px 0 0;
  line-height: 1.22;
  position: relative; z-index: 1;
}
.info-rule {
  width: 34px; height: 0; margin: 16px auto 14px;
  border-top: 1px solid var(--gold);
  position: relative;
}
.info-rule::before,
.info-rule::after {
  content: '';
  position: absolute;
  top: -2.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.info-rule::before { left: -10px; }
.info-rule::after  { right: -10px; }

.info-body {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px; line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: .1px;
  position: relative; z-index: 1;
}
.info-actions {
  display: flex; gap: 10px; justify-content: center;
  position: relative; z-index: 1;
}
.info-actions:not(:empty) {
  margin-top: 22px;
}
.info-actions .cta {
  padding: 13px 28px;
  background: var(--red);
  color: #fffbef;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  box-shadow: 0 8px 20px rgba(160,36,24,.35);
  transition: transform .15s;
}
.info-actions .cta:active { transform: scale(.96); }

/* =========================================================
   OVERLAY (menu + game)
   ========================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  visibility: hidden;
}
.overlay.active { transform: translateY(0); visibility: visible; }

.overlay-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(env(safe-area-inset-top), 14px) 16px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.overlay-bar.dark {
  background: var(--bg-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.overlay-bar.dark .bar-title em { color: var(--muted); }

.bar-title { display: flex; flex-direction: column; line-height: 1.1; }
.bar-title strong {
  font-family: var(--serif);
  font-size: 16px; letter-spacing: 1.5px;
}
.bar-title em {
  font-style: normal;
  font-size: 11px; letter-spacing: 1px;
  color: var(--muted);
  margin-top: 2px;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20,37,59,.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background .15s, transform .15s;
}
.overlay-bar.dark .icon-btn {
  background: rgba(20,37,59,.08);
  color: var(--ink);
}
.icon-btn:active { transform: scale(.92); }

/* ---------- MENU OVERLAY ---------- */
.menu-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.menu-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1152 / 2048;
}
.menu-img { width: 100%; display: block; }

/* Invisible click targets — no visible frame */
.dish-spot {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Brief gold ripple on tap — no persistent border */
.dish-spot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(184,146,74,.55);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.dish-spot:active::after {
  animation: ripple .5s ease-out;
}
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(14);  opacity: 0;  }
}

.menu-tip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: 1px;
}

/* =========================================================
   GAME OVERLAY  (cream editorial theme — matches 2.png / 3.png)
   ========================================================= */
.game-overlay {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #fbf5e6 0%, var(--bg) 60%),
    var(--bg);
  color: var(--ink);
}

/* Did You Know panel — paper card with red label + gold rule */
.dyk {
  margin: 14px 18px 4px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  background: linear-gradient(180deg, #fbf5e6 0%, #f3ede0 100%);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 6px 16px rgba(20,37,59,.06);
  animation: fadeUp .5s ease both;
  position: relative;
}
.dyk::after {
  content: '※';
  position: absolute;
  top: 10px; right: 12px;
  font-size: 12px;
  color: var(--red);
  opacity: .5;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dyk-label {
  font-family: 'Playfair Display', serif;
  font-size: 10px; letter-spacing: 3.5px; font-weight: 700;
  color: var(--red);
}
.dyk-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}

.game-stage {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 18px 8px;
  overflow: hidden;
}
.game-footer {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  padding: 14px 18px max(env(safe-area-inset-bottom), 18px);
  background: linear-gradient(180deg, transparent 0, rgba(20,37,59,.04) 100%);
  border-top: 1px solid var(--line);
}
.hint {
  font-size: 13px; color: var(--muted); text-align: center; min-height: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}
.primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 30px;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  box-shadow: 0 8px 22px rgba(160,36,24,.5);
  transition: transform .15s;
}
.primary-btn:active { transform: scale(.96); }

/* ---------- Generic game widgets (cream paper theme) ---------- */
.game-card {
  width: 100%; max-width: 380px;
  background: #fbf5e6;          /* matches DYK panel + page tone */
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  box-shadow: 0 6px 18px rgba(20,37,59,.06);
  position: relative;
}
.game-card::before {
  content: '';
  position: absolute; top: 7px; left: 7px; right: 7px; bottom: 7px;
  border: 1px solid rgba(184,146,74,.28);
  border-radius: 8px;
  pointer-events: none;
}
.game-title {
  font-family: var(--serif);
  font-size: 21px; letter-spacing: 1px;
  text-align: center;
  color: var(--ink);
  font-weight: 700;
  position: relative; z-index: 1;
}
.game-sub {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: -8px;
  text-align: center;
  position: relative; z-index: 1;
}

.progress {
  width: 100%; height: 8px; background: rgba(20,37,59,.08); border-radius: 50px; overflow: hidden;
  position: relative; z-index: 1;
}
.progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-2), var(--red));
  border-radius: inherit;
  transition: width .25s;
}

.big-num {
  font-family: var(--serif); font-size: 28px; line-height: 1;
  color: var(--ink);
  font-weight: 700;
  position: relative; z-index: 1;
}
.big-num small {
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
.score-row {
  display: flex; gap: 16px; justify-content: center; align-items: baseline;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.score-row > span {
  color: var(--muted); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Game-specific elements ---------- */
/* Tap-cook: real dish photo with warm cooking glow */
.cook-target {
  width: 240px; height: 240px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(255,180,90,.30) 0%, rgba(184,146,74,.10) 55%, transparent 75%);
  transition: transform .12s;
  user-select: none;
}
.cook-target::after {
  content: '';
  position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px dashed rgba(184,146,74,.55);
  pointer-events: none;
  animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cook-target .dish-img {
  width: 88%; height: 88%; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(20,37,59,.25)) brightness(0.78) saturate(0.65);
  transition: filter .2s, transform .12s;
  pointer-events: none;
}
.cook-target.tapped { transform: scale(.97); }
.cook-target.tapped .dish-img { transform: scale(1.02); }
.heat-blob {
  position: absolute; pointer-events: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,80,.85), rgba(255,90,40,.0) 70%);
  animation: blob .6s ease-out forwards;
  mix-blend-mode: multiply;
}
@keyframes blob {
  from { transform: scale(.5); opacity: 1; }
  to   { transform: scale(2.4); opacity: 0; }
}

.heat-ring {
  width: 240px; height: 240px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--red) 0deg, var(--gold-2) 0deg, rgba(255,255,255,.08) 0deg);
  transition: background .25s;
}
.heat-ring::before {
  content: '';
  position: absolute; inset: 14px; border-radius: 50%;
  background: #0f1a2a;
}

/* Timing bar */
.timing-bar {
  width: 100%; max-width: 320px;
  height: 30px;
  background: rgba(20,37,59,.06);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  z-index: 1;
}
.timing-bar .zone {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(29,122,77,.6), rgba(29,122,77,.9));
  border-left: 1px solid rgba(255,255,255,.5);
  border-right: 1px solid rgba(255,255,255,.5);
}
.timing-bar .needle {
  position: absolute; top: -4px; bottom: -4px;
  width: 4px; background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 10px rgba(20,37,59,.4);
}

/* Drag target */
.drag-stage {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.drag-plate {
  position: relative;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbef 0%, #efe6d3 65%, #c9a96e 100%);
  box-shadow: inset 0 0 0 4px rgba(184,146,74,.35), 0 8px 22px rgba(20,37,59,.15);
}
.slot {
  position: absolute;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px dashed rgba(20,37,59,.28);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.45);
  font-size: 28px;
  transition: all .2s;
}
.slot.filled {
  border-style: solid;
  border-color: var(--good);
  background: rgba(29,122,77,.14);
}
.bench {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 6px;
}
.token {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(20,37,59,.10);
  touch-action: none;
  user-select: none;
  transition: transform .12s, opacity .2s;
}
.token.dragging { transform: scale(1.15); z-index: 50; box-shadow: 0 10px 24px rgba(20,37,59,.3); }
.token.used { opacity: .2; pointer-events: none; filter: grayscale(.6); }

/* Pour game */
.pour-stage {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.bottle {
  width: 140px; height: 220px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transform-origin: bottom right;
  transition: transform .25s cubic-bezier(.3,.7,.3,1);
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 10px 20px rgba(20,37,59,.20));
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fbf5e6;
}
.bottle img {
  width: 130%; height: 130%; object-fit: cover; object-position: center;
  pointer-events: none;
}
.bottle.tilt { transform: rotate(-65deg) translate(46px, 14px); }
.bottle.tilt::after {
  content: '';
  position: absolute;
  width: 6px; height: 60px;
  left: 50%; bottom: -56px;
  background: linear-gradient(180deg, var(--red-2), rgba(160,36,24,.0));
  border-radius: 4px;
  transform: translateX(-50%) rotate(65deg);
  transform-origin: top;
  animation: stream .3s ease-in;
}
@keyframes stream { from { opacity: 0; height: 0; } }
.glass {
  width: 86px; height: 130px;
  border: 2.5px solid rgba(20,37,59,.55);
  border-top: 0;
  border-radius: 0 0 50px 50px;
  background: linear-gradient(180deg, transparent 0%, transparent var(--empty,80%), rgba(160,36,24,.85) var(--empty,80%));
  position: relative;
  transition: background .15s;
}
.glass.full { box-shadow: 0 0 18px rgba(160,36,24,.45); }
.fill-line {
  position: absolute; left: -8px; right: -8px;
  border-top: 1.5px dashed var(--good);
  height: 1px;
}
.target-label {
  position: absolute; right: -54px; top: -8px;
  font-size: 10px; color: var(--good); letter-spacing: 1.5px;
  font-weight: 700;
}

/* =========================================================
   Stir game — press &amp; drag in a circle.
   The bowl is transparent so the cream card shows through;
   chopsticks pivot at the soup surface and follow the finger.
   ========================================================= */
.stir-stage {
  width: 290px; height: 290px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: transparent;
}
.stir-stage.stirring { cursor: grabbing; }

.stir-warmth {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,170,60,.45) 0%, rgba(255,170,60,0) 60%);
  opacity: .22;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.stir-bowl {
  width: 96%; height: auto;
  position: relative;
  z-index: 1;
  transition: filter .35s ease, transform .12s ease;
  pointer-events: none;
}
.stir-stage.stirring .stir-bowl { transform: scale(.992); }

.stir-chops {
  position: absolute;
  width: 38%;
  left: 50%; top: 50%;
  transform-origin: 50% 100%;         /* pivot at the tip (soup surface) */
  transform: translate(-50%, -100%) rotate(-110deg);
  transition: transform .15s cubic-bezier(.4, 1.4, .5, 1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  pointer-events: none;
  z-index: 4;
}
.stir-stage.stirring .stir-chops {
  /* While actively stirring we follow the finger with no easing — feels direct */
  transition: transform .05s linear;
}

/* Onboarding hint — fading circular arrow */
.stir-onboard {
  position: absolute; inset: 8%;
  border-radius: 50%;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  z-index: 3;
  opacity: .9;
  transition: opacity .6s ease;
  animation: ob-spin 6s linear infinite;
}
.stir-onboard svg {
  position: absolute; inset: 0;
  animation: ob-pulse 1.8s ease-in-out infinite;
}
.stir-onboard span {
  position: absolute; bottom: -28px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .5px;
}
.stir-onboard.fade {
  opacity: 0;
  animation: none;
}
@keyframes ob-spin {
  to { transform: rotate(360deg); }
}
@keyframes ob-pulse {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}

.stir-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.stir-particle {
  position: absolute; top: 30%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle,
                rgba(255,255,255,.80) 0%,
                rgba(255,255,255,0)  70%);
  animation: steam-rise 1.7s ease-out forwards;
  filter: blur(1.2px);
}
@keyframes steam-rise {
  0%   { transform: translateY(0)     scale(.7); opacity: 0; }
  18%  { opacity: .85; }
  100% { transform: translateY(-110px) scale(1.9); opacity: 0; }
}

.stir-ripple {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(184,146,74,.7);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-out .85s ease-out forwards;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}
@keyframes ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: .85; border-width: 2px; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0;   border-width: 1px; }
}

.stir-trail {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
}

/* =========================================================
   RECIPE WALKTHROUGH (multi-stage cooking lesson)
   ========================================================= */
.recipe-card {
  max-width: 380px; width: 100%;
  gap: 10px;
  padding: 18px 22px 22px;
}

/* Header — numbered chips + step label, separated by a hairline rule */
.recipe-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  position: relative; z-index: 1;
}
.recipe-pips { display: flex; gap: 8px; align-items: center; }
.pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 11px; font-weight: 700;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.pip::before {
  counter-increment: pip;
  content: counter(pip);
}
.recipe-pips { counter-reset: pip; }
.pip.complete {
  background: var(--gold);
  border-color: var(--gold);
  color: #fffbef;
}
.pip.complete::before { content: '✓'; }
.pip.active {
  background: var(--red);
  border-color: var(--red);
  color: #fffbef;
  box-shadow: 0 0 0 4px rgba(160,36,24,.12);
  transform: scale(1.08);
}

.recipe-step-label {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 2.5px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

/* Hairline divider beneath the header */
.recipe-header::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

.recipe-step-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px; letter-spacing: .8px;
  color: var(--ink);
  text-align: center;
  margin: 12px 0 0;
  position: relative; z-index: 1;
  line-height: 1.15;
}
.recipe-instr {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: -2px;
  position: relative; z-index: 1;
  line-height: 1.45;
}

.recipe-stage {
  width: 100%;
  min-height: 240px;
  margin: 14px 0 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* Fact — paper card with a small "fact" mark */
.recipe-fact {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px; line-height: 1.58;
  color: var(--ink-2);
  background: linear-gradient(180deg, rgba(184,146,74,.10), rgba(184,146,74,.04));
  border-left: 3px solid var(--gold);
  padding: 12px 14px 12px 16px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  max-height: 0; overflow: hidden;
  transition: opacity .45s ease, max-height .55s ease, padding .4s ease;
  position: relative; z-index: 1;
  width: 100%;
  padding-top: 0; padding-bottom: 0;
}
.recipe-fact.revealed {
  opacity: 1;
  max-height: 220px;
  padding-top: 12px; padding-bottom: 12px;
}
.recipe-fact::before {
  content: '✦';
  position: absolute;
  top: 12px; right: 12px;
  font-size: 13px;
  color: var(--gold);
  opacity: .55;
}

.recipe-next {
  margin-top: 6px;
  padding: 12px 36px;
  font-size: 13px;
  letter-spacing: 2.5px;
  position: relative; z-index: 1;
}
.recipe-next[hidden] { display: none !important; }

/* ---------- Stage 1 : Soak ---------- */
.soak-zone {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
}
.ingredient-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ingr-img {
  width: 88px; height: 88px;
  object-fit: contain;
  display: block;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform .15s, opacity .25s;
  filter: drop-shadow(0 4px 8px rgba(20,37,59,.25));
  animation: ingrInvite 2.4s ease-in-out infinite;
}
.ingr-img.ingr-small {
  width: 60px; height: 60px;
  animation: ingrInvite 2.4s ease-in-out infinite;
}
.ingr-img.used { animation: none; }
.ingr-img:active { cursor: grabbing; transform: scale(1.08); animation: none; }
@keyframes ingrInvite {
  0%, 100% { transform: translateY(0)    scale(1);   }
  50%      { transform: translateY(-4px) scale(1.04); }
}
.ingr-label {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 2px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.arrow-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-family: var(--serif);
  font-size: 18px; font-weight: 400;
  color: var(--gold);
  opacity: .8;
  animation: arrowBob 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes arrowBob {
  0%, 100% { transform: translateX(0);   opacity: .55; }
  50%      { transform: translateX(6px); opacity: 1;   }
}

.dropzone {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: transparent;
  border: 2px dashed rgba(184,146,74,.4);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, background .25s, transform .15s;
  overflow: visible;
}
.dropzone.hover {
  border-color: var(--gold);
  background: radial-gradient(circle, rgba(184,146,74,.10), transparent 70%);
  transform: scale(1.04);
}
.dropzone.filled {
  border-style: solid;
  border-color: rgba(184,146,74,.35);
}
.zone-label, .zone-label-low {
  position: absolute;
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 2px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.zone-label { bottom: -22px; left: 0; right: 0; text-align: center; }
.zone-label-low { bottom: -20px; left: 0; right: 0; text-align: center; }

/* Water bowl using the generated PNG */
.water-bowl-img {
  width: 150px; height: 150px;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 10px 18px rgba(76,126,156,.22));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), filter .25s;
}
.water-bowl-img.hover {
  transform: scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(76,126,156,.42));
}
.water-bowl-img.filled {
  filter: drop-shadow(0 10px 18px rgba(184,146,74,.32));
}
.water-bowl-art {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Legacy CSS bowl — used when no PNG is available */
.water-bowl {
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 35% 35%, #e6f0f6 0%, #b9d6e6 35%, #6e9bb8 88%, #486f8a 100%);
  border-color: rgba(76,126,156,.5);
  box-shadow:
    inset 0 8px 18px rgba(20,37,59,.22),
    inset 0 -6px 12px rgba(255,255,255,.4),
    0 8px 18px rgba(20,37,59,.12);
}
.water-bowl::before {
  content: '';
  position: absolute;
  inset: 10% 22% 56% 22%;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  filter: blur(3px);
}
.water-surface {
  position: absolute;
  left: 14%; right: 14%; top: 16%;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  filter: blur(1.5px);
  animation: waterRipple 3.6s ease-in-out infinite;
}
@keyframes waterRipple {
  0%, 100% { transform: scaleX(1)   translateX(0); opacity: .8; }
  50%      { transform: scaleX(.9)  translateX(3px); opacity: 1; }
}

.nest-soaking {
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  object-fit: contain;
  transform: translate(-50%, -120%) scale(.5);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.25, 1.4, .3, 1), opacity 1.2s ease, filter 1.2s ease;
  filter: brightness(.85) saturate(.8);
  pointer-events: none;
}
.nest-soaking.bloomed {
  transform: translate(-50%, -50%) scale(1);
  opacity: .9;
  filter: brightness(1) saturate(1) blur(.5px);
}

/* ---------- Stage 2 : Pick ---------- */
.pick-zone {
  position: relative;
  width: 240px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.pick-nest {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(20,37,59,.18));
  pointer-events: none;
}
.feathers {
  position: absolute; inset: 0;
  pointer-events: none;
}
.feather {
  position: absolute;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
  transition: transform .3s ease, opacity .3s ease;
}
.feather svg { width: 100%; height: 100%; display: block; }
.feather:active { transform: translate(-50%, -50%) scale(1.3); }
.feather.plucked {
  transform: translate(-50%, -50%) translateY(-30px) rotate(40deg) scale(.6);
  opacity: 0;
}

/* ---------- Stage 3 : Stew ---------- */
.stew-zone {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: 100%;
}
.stew-pot {
  position: relative;
  width: 180px; height: 140px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.stew-pot.hover {
  transform: scale(1.06);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.pot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(20,37,59,.22));
  transition: filter .35s;
}
.stew-pot.hover .pot-img {
  filter: drop-shadow(0 8px 16px rgba(184,146,74,.35)) brightness(1.05);
}
.stew-pot.simmer .pot-img {
  animation: potJiggle 0.45s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(184,146,74,.45)) brightness(1.05) saturate(1.2);
}
@keyframes potJiggle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
.pot-chip {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: chipDrop .4s cubic-bezier(.3, 1.3, .3, 1);
}
.pot-chip.sugar { background: radial-gradient(circle at 30% 30%, #fff3cb, #d9b97a); box-shadow: inset 0 -3px 6px rgba(0,0,0,.15); }
.pot-chip.goji  { background: radial-gradient(circle at 30% 30%, #ff8266, #a02418); box-shadow: inset 0 -3px 6px rgba(0,0,0,.20); }
@keyframes chipDrop {
  from { transform: translateY(-30px) scale(.5); opacity: 0; }
  to   { transform: translateY(0)     scale(1);  opacity: 1; }
}

.steam-layer {
  position: absolute; left: 0; right: 0; top: -40px;
  height: 60px;
  pointer-events: none;
}
.steam-wisp {
  position: absolute;
  bottom: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  filter: blur(2px);
  animation: steam-rise 1.7s ease-out forwards;
}

.ingredients-tray {
  display: flex; gap: 14px; justify-content: center;
}
.swatch-sugar {
  background: radial-gradient(circle at 30% 30%, #fff3cb 0%, #d9b97a 70%, #b8924a 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.20),
    inset 0 4px 8px rgba(255,255,255,.4),
    0 4px 8px rgba(20,37,59,.18);
}
.swatch-goji {
  background:
    radial-gradient(circle at 30% 30%, #ff8266, #a02418 65%, #6a1009 100%);
  border-radius: 50% 50% 50% 30%;
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,.30),
    inset 3px 3px 5px rgba(255,255,255,.3),
    0 4px 8px rgba(160,36,24,.30);
}

/* Tap-target spawns */
.tap-field {
  width: 100%; max-width: 360px; height: 340px;
  position: relative;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(184,146,74,.04) 0 8px, transparent 8px 16px),
    rgba(20,37,59,.03);
  border: 1px solid var(--line);
  overflow: hidden;
}
.spawn {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a73, var(--red) 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(160,36,24,.35);
  animation: spawnIn .2s ease;
}
@keyframes spawnIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.spawn.pop {
  animation: pop .25s ease forwards;
}
@keyframes pop {
  to { transform: scale(1.6); opacity: 0; }
}

/* Decorate game (desserts) */
.decorate-stage {
  position: relative;
  width: 280px; height: 280px;
  border-radius: 18px;
  background: radial-gradient(circle, #fffbef 0%, #efe6d3 80%);
  box-shadow: inset 0 0 0 2px var(--gold-2), 0 8px 22px rgba(20,37,59,.18);
  overflow: hidden;
}
.decor-placed {
  position: absolute;
  font-size: 26px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  pointer-events: none;
  animation: drop .3s ease;
}
@keyframes drop { from { transform: translate(-50%, -120%) scale(1.5); opacity: 0; } }

/* Confetti / sparkle */
.confetti {
  position: absolute; top: -10px; width: 8px; height: 14px;
  pointer-events: none;
  animation: fall 1.4s ease-out forwards;
}
@keyframes fall {
  to { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 14%; transform: translateX(-50%) translateY(20px);
  background: rgba(20,37,59,.95);
  color: #fffbef;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 13px; letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Win overlay */
.win-card {
  background: linear-gradient(180deg, #fffbef, #f3ede0);
  color: var(--ink);
  padding: 22px 22px 22px;
  border-radius: 16px;
  width: 100%; max-width: 360px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  text-align: center;
  position: relative;
  animation: rise .45s cubic-bezier(.2,1.2,.3,1) both;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(20,37,59,.40);
}
.win-card::before {
  content: '';
  position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(184,146,74,.4);
  border-radius: 12px;
  pointer-events: none;
}

/* Hero image inside win card */
.win-hero {
  position: relative;
  width: 220px; height: 220px;
  margin: -10px auto 6px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.win-hero::before {
  content: '';
  position: absolute;
  inset: 30% 12% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(184,146,74,.30), rgba(184,146,74,0) 70%);
  filter: blur(8px);
  z-index: -1;
}
.win-hero-img {
  width: 100%; height: 100%;
  object-fit: contain;
  animation: heroIn .9s cubic-bezier(.2,1.3,.3,1) both;
  filter: drop-shadow(0 12px 26px rgba(184,146,74,.55));
}
@keyframes heroIn {
  0%   { transform: scale(.4) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.win-steam {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 50px;
  pointer-events: none;
}
.win-steam span {
  position: absolute;
  bottom: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  filter: blur(2px);
  animation: steam-rise 2.2s ease-out infinite;
}
.win-steam span:nth-child(1) { left: 10%; animation-delay: 0s;   }
.win-steam span:nth-child(2) { left: 42%; animation-delay: .6s;  }
.win-steam span:nth-child(3) { left: 70%; animation-delay: 1.1s; }
.win-card h3 {
  font-family: var(--serif);
  font-size: 21px; letter-spacing: 1.5px;
  color: var(--red);
  line-height: 1.2;
}
.win-card .stars {
  font-size: 22px; color: var(--gold); letter-spacing: 6px; margin-bottom: 8px;
}
.win-card .win-tag {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink-2);
  margin: 8px 0 14px;
}
.win-fact {
  background: rgba(20,37,59,.05);
  border-left: 3px solid var(--gold);
  text-align: left;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}
.win-fact-label {
  font-size: 9px; letter-spacing: 2.5px; font-weight: 700;
  color: var(--gold);
}
.win-fact p {
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
  margin-top: 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}
.win-card .actions {
  display: flex; gap: 10px; justify-content: center;
}
.win-card button {
  padding: 11px 18px; border-radius: 50px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
}
.win-card .primary {
  background: var(--ink); color: #fffbef;
}
.win-card .secondary {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
}

/* iPhone notch safe areas */
@supports (padding: max(0px)) {
  .splash-inner { padding-top: env(safe-area-inset-top); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}