/* =============================================================
   FLIP COIN — style.css
   Premium mobile casual game. Purple + Gold fantasy theme.
   Organised as:
     1. Design tokens (:root)
     2. Reset & layout shell
     3. Background (glow, stars, particles)
     4. Top bar / wallet
     5. Buttons
     6. Coin (shared 3D coin component)
     7. Scene: Start
     8. Scene: Prediction
     9. Scene: Arena (countdown / launch / spin / fall / reveal)
    10. Scene: Result (win / fail) + Coin Meter
    11. Effects: flash, confetti, camera shake
    12. Keyframes
    13. Responsive tweaks
============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Palette */
  --bg-deep:      #170826;
  --bg-mid:       #2a114b;
  --bg-purple:    #3d1a6e;
  --violet:       #7b3fe4;
  --violet-soft:  #a06bff;

  --gold-1:       #ffe483;
  --gold-2:       #ffbf3c;
  --gold-3:       #f59a12;
  --gold-deep:    #b96a06;

  --green-1:      #3ddc84;
  --green-2:      #16a34a;
  --green-deep:   #0f7a37;
  --red-1:        #ff5a6e;
  --red-2:        #c81d3f;

  --text:         #ffffff;
  --text-dim:     #d9c9ff;

  /* Shape */
  --radius-lg:    28px;
  --radius-md:    20px;
  --radius-sm:    14px;

  /* Shadows / glow */
  --glow-gold:    0 0 32px rgba(255,183,60,.65);
  --glow-violet:  0 0 42px rgba(123,63,228,.6);
  --shadow-card:  0 18px 40px rgba(0,0,0,.45);

  /* Fonts — one rounded family per script so every language matches:
     Latin → Baloo 2 / Fredoka, Thai → Baloo Thai 2.
     The browser picks the first font in the stack that has the glyph. */
  --font-head: 'Baloo 2', 'Baloo Thai 2', 'Fredoka', system-ui, sans-serif;
  --font-body: 'Fredoka', 'Baloo Thai 2', system-ui, sans-serif;
}

/* ---------- 2. RESET & LAYOUT SHELL ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: #0c0416;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;            /* lock the page so mobile browsers don't rubber-band */
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* remove 300ms tap delay / double-tap zoom */
}

#app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0c0416;
}

/* MOBILE-FIRST: the stage fills the whole screen edge-to-edge on every phone.
   `dvh` tracks the *dynamic* viewport height so it stays correct while the
   mobile browser's address bar shows/hides. On large screens it becomes a
   centred phone-frame — see the desktop media query near the bottom. */
#stage {
  position: relative;
  width: 100vw;
  width: 100dvw;
  height: 100vh;      /* fallback for old browsers */
  height: 100dvh;     /* modern: fills real visible area on mobile */
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 55%, #0d0418 100%);
  box-shadow: inset 0 0 60px rgba(123,63,228,.15);
  isolation: isolate;
}

/* ---------- 3. BACKGROUND ---------- */
.bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Soft glows use a radial-gradient that already fades to transparent — no
   `filter: blur()` needed. Blur filters were the main GPU cost that froze
   rendering on weaker Android devices. */
.bg__glow {
  position: absolute; border-radius: 50%; opacity: .6;
  animation: drift 16s ease-in-out infinite alternate;
}
.bg__glow--1 { width: 420px; height: 420px; top: -140px; left: -130px;
  background: radial-gradient(circle, #8a3ffb 0%, rgba(138,63,251,.25) 40%, transparent 70%); }
.bg__glow--2 { width: 460px; height: 460px; bottom: -180px; right: -150px;
  background: radial-gradient(circle, #ff9b2f 0%, rgba(255,155,47,.22) 40%, transparent 70%); opacity: .45; animation-delay: -6s; }

.bg__stars, .bg__particles { position: absolute; inset: 0; }
.bg__stars span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: .0;
  animation: twinkle 3s ease-in-out infinite;
  box-shadow: 0 0 6px #fff;
}
.bg__particles span {
  position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-1), var(--gold-3));
  opacity: .0; filter: blur(.3px);
  animation: floatUp linear infinite;
}
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- 4. TOP BAR / WALLET ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  /* Pad away from notches / rounded corners on all sides. */
  padding:
    calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
    14px calc(18px + env(safe-area-inset-left));
}
.wallet {
  display: flex; align-items: center; gap: 8px;
  background: rgba(24,10,46,.82);
  border: 1px solid rgba(255,196,74,.35);
  padding: 7px 14px 7px 9px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.35);
}
.wallet__coin {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-3) 70%, var(--gold-deep));
  box-shadow: inset 0 0 4px rgba(255,255,255,.6), 0 0 10px rgba(255,183,60,.6);
  position: relative;
}
.wallet__coin::after { content: '฿'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; color: var(--gold-deep); font-size: 13px; }
.wallet__amount { font-family: var(--font-head); font-weight: 800; font-size: 18px;
  color: var(--gold-1); text-shadow: 0 1px 2px rgba(0,0,0,.4); min-width: 18px; }

.mute-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(24,10,46,.82); color: #fff;
  font-size: 18px; cursor: pointer; display: grid; place-items: center;
  transition: transform .15s ease;
}
.mute-btn:active { transform: scale(.9); }
.mute-btn__off { display: none; }
body.is-muted .mute-btn__on { display: none; }
body.is-muted .mute-btn__off { display: inline; }

/* Language selector — a small segmented pill of buttons */
.lang-switch {
  display: flex; gap: 3px;
  background: rgba(24,10,46,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.3);
}
.lang-btn {
  border: none; background: transparent; color: var(--text-dim);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; line-height: 1;
  padding: 6px 9px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s, transform .12s;
}
.lang-btn:active { transform: scale(.9); }
.lang-btn.is-active {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #5a3200; box-shadow: 0 2px 8px rgba(255,160,30,.55);
}

/* ---------- 5. BUTTONS ---------- */
.btn {
  position: relative; border: none; cursor: pointer; color: #fff;
  font-family: var(--font-head); font-weight: 800; letter-spacing: .5px;
  border-radius: 999px; overflow: hidden;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn__label { position: relative; z-index: 2; }
.btn::before { /* glossy top highlight */
  content: ''; position: absolute; left: 6%; right: 6%; top: 5px; height: 42%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  opacity: .9; z-index: 1;
}
.btn:active { transform: scale(.94); }
.btn--xl { font-size: 26px; padding: 20px 66px; }
.btn--lg { font-size: 20px; padding: 16px 46px; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  color: #6a3b00; text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 10px 0 var(--gold-deep), 0 18px 30px rgba(255,150,20,.45), var(--glow-gold);
  animation: pulseGlow 2.2s ease-in-out infinite;
}
.btn--green {
  background: linear-gradient(180deg, #6bf0a3 0%, var(--green-1) 45%, var(--green-2) 100%);
  color: #063d1c; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 10px 0 var(--green-deep), 0 18px 30px rgba(22,163,74,.5), 0 0 30px rgba(61,220,132,.55);
}
.btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.btn--gold:hover, .btn--green:hover { filter: brightness(1.05); }

/* "How to play" opener — subtle ghost pill on the start screen */
.how-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 2px; padding: 9px 20px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--text-dim); background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px;
  transition: transform .12s, background .2s, color .2s, border-color .2s;
}
.how-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,196,74,.6); }
.how-btn:active { transform: scale(.94); }
.how-btn__q {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #5a3200;
  font-weight: 800; font-size: 13px; box-shadow: 0 2px 6px rgba(255,160,30,.5);
}

/* ---------- 6b. HOW-TO MODAL ---------- */
.modal {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,3,20,.82); cursor: pointer; }
.modal__card {
  position: relative; width: min(360px, 100%); max-height: 86%; overflow-y: auto;
  padding: 26px 22px 22px; text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #34186a 0%, #24124a 100%);
  border: 1px solid rgba(255,196,74,.3);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), 0 0 40px rgba(123,63,228,.35);
  transform: translateY(16px) scale(.96); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.modal.open .modal__card { transform: translateY(0) scale(1); }
.modal__x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 24px; line-height: 1; color: #fff;
  background: rgba(255,255,255,.1); transition: background .2s, transform .12s;
}
.modal__x:hover { background: rgba(255,255,255,.2); }
.modal__x:active { transform: scale(.9); }
.modal__title {
  font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--gold-1);
  margin-bottom: 16px; text-shadow: 0 2px 10px rgba(255,196,74,.5);
}
.modal__steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; text-align: left; }
.step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.step__icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 26px; background: linear-gradient(180deg, rgba(255,196,74,.25), rgba(123,63,228,.25));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.step__text { display: flex; flex-direction: column; gap: 2px; }
.step__t { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; }
.step__d { font-size: 13.5px; color: var(--text-dim); line-height: 1.4; }

/* ---------- 6. SHARED 3D COIN ---------- */
/* -webkit- prefixes are REQUIRED for 3D to work in Samsung Internet and many
   in-app webviews. Without them the coin flattens (shows as a flat disc or
   vanishes edge-on) instead of spinning. */
.coin3d {
  position: relative; width: 100%; height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.coin3d__face {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 34% 28%, #fff6cf 0%, var(--gold-1) 22%, var(--gold-2) 55%, var(--gold-3) 82%, var(--gold-deep) 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.28), inset 0 0 26px rgba(180,90,0,.5), 0 0 26px rgba(255,180,50,.55);
}
.coin3d__face::before { /* inner rim ring */
  content: ''; position: absolute; inset: 11%; border-radius: 50%;
  border: 3px dashed rgba(122,60,0,.35);
}
.coin3d__face--sun  { background:
    radial-gradient(circle at 34% 28%, #fff7d6 0%, #ffdf7a 24%, #ffbf3c 58%, #f39312 88%, #b96a06 100%); }
.coin3d__face--moon { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background:
    radial-gradient(circle at 34% 28%, #cfd9ff 0%, #9aa8ff 30%, #6b6bff 62%, #3f3fb0 90%, #26246e 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.25), inset 0 0 26px rgba(30,20,90,.6), 0 0 26px rgba(120,110,255,.6); }
.coin3d__face--moon::before { border-color: rgba(255,255,255,.3); }
.coin3d__face--crown { background:
    radial-gradient(circle at 34% 28%, #fff7d6 0%, #ffdf7a 24%, #ffbf3c 58%, #f39312 88%, #b96a06 100%); }

/* Emoji sized in px per coin context (percent font-size would resolve against
   the inherited body size, not the coin, so we set explicit values). */
.coin-emoji { font-size: 66px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.hero-coin .coin-emoji { font-size: 78px; }
.coin3d--lg .coin-emoji { font-size: 70px; }
.coin3d--meter .coin-emoji { font-size: 62px; }
.wallet__coin ~ * .coin-emoji { font-size: 12px; }
.coin3d__edge { /* thin golden edge behind faces */
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-transform: translateZ(-6px); transform: translateZ(-6px);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2), var(--gold-deep));
}

/* ---------- 7. SCENE SYSTEM ---------- */
.camera { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 46%; }
.scene {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2.4vh, 20px); text-align: center;
  /* Fluid padding + safe-area so nothing is clipped by notches / home bar. */
  padding:
    calc(74px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
    calc(34px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transform: scale(.98);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
  pointer-events: none;
}
.scene.is-active { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }

/* ----- START ----- */
.start__logo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo {
  font-family: var(--font-head); font-weight: 800; line-height: .9;
  display: flex; flex-direction: column; align-items: center;
  animation: floatY 3.4s ease-in-out infinite;
}
.logo__flip { font-size: 46px; color: #fff;
  text-shadow: 0 2px 0 #7b3fe4, 0 4px 0 #5a2ba8, 0 10px 20px rgba(0,0,0,.5); letter-spacing: 2px; }
.logo__coin {
  font-size: 62px; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6cf, var(--gold-2) 55%, var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #8a5200) drop-shadow(0 6px 12px rgba(255,160,30,.5));
  display: inline-flex; align-items: center;
}
.logo__o { display: inline-block; width: .62em; height: .62em; margin: 0 .04em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold-2) 60%, var(--gold-3));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.4), 0 0 14px rgba(255,190,60,.8);
  animation: spinFlat 3.5s linear infinite; }
.logo__ribbon {
  font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #fff;
  padding: 6px 18px; border-radius: 999px; letter-spacing: .5px;
  background: linear-gradient(180deg, #8a3ffb, #5a25b0);
  box-shadow: 0 6px 16px rgba(90,37,176,.5), inset 0 1px 0 rgba(255,255,255,.3);
}

.hero-coin { width: 168px; height: 168px; margin: 6px 0; animation: floatY 3.4s ease-in-out infinite .3s; }
.hero-coin .coin3d { animation: heroSpin 6s ease-in-out infinite; }

.start__subtitle { color: var(--text-dim); font-size: 16px; line-height: 1.5; max-width: 300px; }
.start__subtitle b { color: var(--gold-1); }

/* ----- PREDICTION ----- */
.scene__title { font-family: var(--font-head); font-weight: 800; font-size: 30px;
  color: #fff; text-shadow: 0 2px 10px rgba(123,63,228,.7); }
.scene__hint { color: var(--text-dim); font-size: 15px; margin-top: -8px; }

.choices { display: flex; gap: 16px; width: 100%; max-width: 380px; margin-top: 6px; }

/* Premium neon card (gold for Sun, violet for Moon). Glow via box-shadow only
   (no blur filter) so it stays smooth on Android. */
.choice {
  position: relative; flex: 1; aspect-ratio: 5/7; cursor: pointer;
  border-radius: 22px; border: 3px solid var(--card-line, #ffcf5a);
  background:
    radial-gradient(120% 80% at 50% 22%, var(--card-inner, rgba(90,45,10,.55)) 0%, rgba(14,7,28,.96) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 14% 8% 0; color: #fff;
  box-shadow:
    inset 0 0 22px var(--card-glow, rgba(255,190,60,.45)),
    0 0 4px var(--card-line, #ffcf5a),
    0 0 18px var(--card-glow, rgba(255,170,40,.5));
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, opacity .25s;
}
.choice--sun  { --card-line:#ffcf5a; --card-inner:rgba(120,70,10,.5);  --card-glow:rgba(255,180,50,.5); }
.choice--moon { --card-line:#a06bff; --card-inner:rgba(60,40,120,.55); --card-glow:rgba(140,110,255,.55); }

/* Sun / Moon artwork */
.choice__art { display: block; width: 78%; margin: 4% auto 0; }
.choice__art svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.choice.is-selected .choice__art { animation: bob 1.6s ease-in-out infinite; }

/* Ribbon banner at the bottom of the card */
.choice__ribbon {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  min-width: 74%; padding: 8px 10px; text-align: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--rib-1) 0%, var(--rib-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 5px 12px rgba(0,0,0,.45);
  clip-path: polygon(0 22%, 8% 22%, 8% 0, 92% 0, 92% 22%, 100% 22%, 100% 78%, 92% 78%, 92% 100%, 8% 100%, 8% 78%, 0 78%);
}
.choice--sun  { --rib-1:#ffd35a; --rib-2:#f39a12; }
.choice--moon { --rib-1:#9a6bff; --rib-2:#5a2ba8; }
.choice__name {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 6vw, 30px);
  letter-spacing: 1px; line-height: 1.05;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28), 0 0 10px rgba(0,0,0,.25);
}

/* Corner sparkle stars */
.choice__star { position: absolute; width: 16px; height: 16px; top: 50%; transform: translateY(-50%);
  background: var(--card-line, #ffcf5a);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  box-shadow: 0 0 8px var(--card-glow, rgba(255,180,50,.7)); }
.choice__star--l { left: -8px; }
.choice__star--r { right: -8px; }

/* Green check when selected */
.choice__check {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, var(--green-1), var(--green-2)); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
  transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 12px rgba(22,163,74,.6);
}
.choice:hover { transform: translateY(-4px); }
.choice.is-selected { transform: translateY(-6px) scale(1.05);
  box-shadow:
    inset 0 0 26px var(--card-glow), 0 0 0 3px var(--card-line),
    0 0 26px var(--card-glow), 0 14px 34px rgba(0,0,0,.5); }
.choice.is-selected .choice__check { transform: scale(1); }
.choice.is-dimmed { opacity: .4; transform: scale(.94); }

/* Big glossy "เลือกฝั่ง" title (game-art style) */
.scene--predict .scene__title {
  font-size: clamp(34px, 10vw, 48px); letter-spacing: 1px; color: #fff;
  text-shadow:
    2px 2px 0 #4a2299, -2px 2px 0 #4a2299, 2px -2px 0 #4a2299, -2px -2px 0 #4a2299,
    0 6px 0 #35176e, 0 0 22px rgba(160,90,255,.8), 0 0 44px rgba(123,63,228,.6);
}
.scene--predict .scene__hint { color: #d3c2ff; }

.predict__wait { font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--gold-1); opacity: 0; transition: opacity .3s; height: 8px; }
.predict__wait.show { opacity: 1; }

/* ----- ARENA (countdown / coin flight) ----- */
.scene--arena { justify-content: center; }
.countdown {
  position: absolute; z-index: 5; top: 46%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-head); font-weight: 800; font-size: 150px; line-height: 1;
  color: #fff; pointer-events: none;
  text-shadow: 0 0 30px rgba(255,196,74,.9), 0 6px 18px rgba(0,0,0,.6);
}
.countdown span { display: inline-block; }
.countdown .go {
  font-size: 96px; color: var(--gold-1);
  text-shadow: 0 0 26px rgba(255,190,60,.95), 0 0 50px rgba(255,150,20,.7), 0 5px 14px rgba(0,0,0,.5);
}
.countdown .pop { animation: countPop .5s cubic-bezier(.2,1.4,.4,1) both; }

.arena { position: relative; width: 100%; height: 380px; display: grid; place-items: center; }

.beam {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center; width: 130px; height: 300px;
  background: linear-gradient(180deg, rgba(255,224,140,0) 0%, rgba(255,206,90,.4) 40%, rgba(255,183,60,.75) 100%);
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  opacity: 0; transition: opacity .3s;
}
.beam.on { opacity: 1; animation: beamPulse 1s ease-in-out infinite; }

.flip-coin {
  position: relative; width: 150px; height: 150px; z-index: 3;
  transform: translateY(60px) scale(.6); opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* NOTE: no `will-change` here — on some mobile engines it flattens the 3D
     children, which was making the coin render as a flat disc. */
}
.flip-coin .coin3d { width: 100%; height: 100%; }
.coin-shadow {
  position: absolute; bottom: -84px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
  filter: blur(3px); opacity: .5;
}

.platform {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 60px; display: grid; place-items: center;
}
.platform__ring { position: absolute; border-radius: 50%;
  border: 3px solid rgba(255,196,74,.6); box-shadow: 0 0 20px rgba(255,183,60,.6); }
.platform__ring--1 { width: 180px; height: 54px; animation: ringPulse 2.2s ease-in-out infinite; }
.platform__ring--2 { width: 120px; height: 34px; border-color: rgba(255,224,140,.9);
  animation: ringPulse 2.2s ease-in-out infinite .4s; }
.platform__core { width: 90px; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,214,120,.9), rgba(255,150,20,.3) 70%, transparent);
  filter: blur(1px); }

.arena__caption { position: absolute; bottom: 8px; left: 0; right: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--gold-1);
  text-shadow: 0 2px 8px rgba(0,0,0,.5); min-height: 22px; }

/* Coin flight state classes (added by JS) */
.flip-coin.launch  { animation: coinLaunch .9s cubic-bezier(.2,.7,.3,1) forwards; }
/* ===== In-game coin flip: pure 2D (no 3D transforms) =====
   True 3D rotateY was unreliable/heavy on some Android browsers (coin showed
   flat or didn't spin). Instead we fake the flip with a horizontal squash
   (scaleX 1→0) and swap which face is visible at the thin point. This is cheap
   (a composited 2D transform) and looks identical on every device. */
.flip-coin .coin3d { -webkit-transform-style: flat; transform-style: flat; }
.flip-coin .coin3d__edge { display: none; }                 /* no 3D edge needed */
.flip-coin .coin3d__face { -webkit-backface-visibility: visible; backface-visibility: visible; }
.flip-coin .coin3d__face--sun  { opacity: 1; }
.flip-coin .coin3d__face--moon { -webkit-transform: none; transform: none; opacity: 0; }

.flip-coin.spinning .coin3d { animation: flip2d var(--spin-dur, .3s) linear infinite; will-change: transform; }
.flip-coin.spinning .coin3d__face--sun  { animation: faceFront var(--spin-dur, .3s) linear infinite; }
.flip-coin.spinning .coin3d__face--moon { animation: faceBack  var(--spin-dur, .3s) linear infinite; }

/* landed face (set by JS) */
.flip-coin.result-sun  .coin3d__face--sun  { opacity: 1; }
.flip-coin.result-sun  .coin3d__face--moon { opacity: 0; }
.flip-coin.result-moon .coin3d__face--sun  { opacity: 0; }
.flip-coin.result-moon .coin3d__face--moon { opacity: 1; }

/* ----- RESULT (win / fail) + COIN METER ----- */
.scene--result { gap: 14px; }
.scene--win { background:
  radial-gradient(120% 90% at 50% 20%, rgba(28,120,60,.55), transparent 60%),
  linear-gradient(180deg, rgba(10,60,30,.6), rgba(6,32,18,.7)); }
.scene--fail { background:
  radial-gradient(120% 90% at 50% 20%, rgba(150,30,55,.55), transparent 60%),
  linear-gradient(180deg, rgba(70,10,25,.6), rgba(40,6,16,.75)); }

.result__title { font-family: var(--font-head); font-weight: 800; font-size: 38px; line-height: 1;
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
.result__title--win  { color: var(--gold-1); text-shadow: 0 0 24px rgba(255,196,74,.8), 0 4px 8px rgba(0,0,0,.5); }
.result__title--fail { color: #ffd7dc; text-shadow: 0 0 20px rgba(255,90,110,.7), 0 4px 8px rgba(0,0,0,.5); }
.result__sub { color: #fff; opacity: .92; font-size: 17px; }
.result__reveal { font-size: 15px; color: var(--text-dim); }
.result__reveal b { color: #fff; }

/* Coin Meter */
.meter { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 4px; }
.meter__coin { position: relative; width: 130px; height: 130px; display: grid; place-items: center;
  animation: floatY 2.6s ease-in-out infinite; }
.meter__coin .coin3d { width: 100%; height: 100%; animation: spinFlat 5s linear infinite; }
.meter__rays { position: absolute; inset: -34px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,224,140,.5) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%, #000 72%, transparent 82%);
  mask: radial-gradient(circle, transparent 46%, #000 48%, #000 72%, transparent 82%);
  animation: spinFlat 12s linear infinite; opacity: .7; }
.meter__multiplier {
  font-family: var(--font-head); font-weight: 800; font-size: 64px; line-height: 1;
  color: #fff; display: flex; align-items: baseline;
  text-shadow: 0 0 26px rgba(255,196,74,.85), 0 5px 10px rgba(0,0,0,.5);
}
.meter__x { font-size: 40px; color: var(--gold-1); margin-right: 2px; }
.meter__multiplier.bump { animation: numberBump .28s cubic-bezier(.2,1.5,.4,1); }
.meter__multiplier.final { animation: finalPulse 1.4s ease-in-out infinite; }
.meter__label { color: #eafff1; font-size: 16px; }
.meter__label b { color: var(--gold-1); }

/* ----- MASCOT (sad cat) for fail ----- */
.result__mascot { margin-bottom: 4px; animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
.mascot { position: relative; width: 130px; height: 118px; animation: floatY 2.8s ease-in-out infinite; }
.mascot__ears { position: absolute; top: -8px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 14px; }
.mascot__ears span { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent;
  border-bottom: 34px solid #8a7fb0; }
.mascot__ears span:first-child { transform: rotate(-16deg); }
.mascot__ears span:last-child { transform: rotate(16deg); }
.mascot__face { position: absolute; inset: 12px 8px 0; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #b9aee0, #9a8fc7); box-shadow: inset 0 -8px 16px rgba(0,0,0,.15); }
.mascot__eyes { position: absolute; top: 42%; left: 0; right: 0; display: flex; justify-content: center; gap: 26px; }
.mascot__eyes span { width: 16px; height: 20px; border-radius: 50%; background: #2a2140; }
.mascot__eyes span::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; margin:3px 0 0 3px; }
.mascot__tears { position: absolute; top: 52%; left: 0; right: 0; display: flex; justify-content: center; gap: 44px; }
.mascot__tears span { width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #7fd3ff; box-shadow: 0 0 8px rgba(127,211,255,.8); animation: tearDrop 1.6s ease-in infinite; }
.mascot__tears span:last-child { animation-delay: .5s; }
.mascot__mouth { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
  width: 22px; height: 14px; border: 3px solid #2a2140; border-top: none; border-radius: 0 0 20px 20px; }

/* ---------- 11. EFFECTS ---------- */
.flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff 0%, rgba(255,240,190,.6) 30%, transparent 70%); }
.flash.fire { animation: flashHit .6s ease-out; }

.confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: .95;
  animation: confettiFall linear forwards; }

/* Camera shake / zoom (applied to .camera) */
.camera.shake { animation: shake .5s ease-in-out; }
.camera.zoom  { transition: transform 1s ease; transform: scale(1.12); }

/* Burst particles injected into arena */
.burst { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none; background: radial-gradient(circle, var(--gold-1), var(--gold-3));
  box-shadow: 0 0 8px rgba(255,190,60,.9); }

/* Sparkle particles from coin meter increments */
.spark { position: absolute; width: 8px; height: 8px; pointer-events: none;
  background: radial-gradient(circle, #fff, var(--gold-2)); border-radius: 50%; z-index: 5; }

/* ---------- 12. KEYFRAMES ---------- */
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(30px,20px); } }
@keyframes twinkle { 0%,100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .8; }
  90% { opacity: .6; }
  100% { transform: translateY(-720px) translateX(var(--drift, 0px)); opacity: 0; }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 10px 0 var(--gold-deep), 0 18px 30px rgba(255,150,20,.4), 0 0 24px rgba(255,183,60,.5); }
  50%     { box-shadow: 0 10px 0 var(--gold-deep), 0 18px 34px rgba(255,150,20,.6), 0 0 40px rgba(255,183,60,.85); }
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob    { 0%,100% { transform: scale(1.12) translateY(0); } 50% { transform: scale(1.12) translateY(-6px); } }
@keyframes spinFlat { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes heroSpin {
  0%,100% { transform: rotateY(-18deg) rotateX(6deg); }
  50%     { transform: rotateY(18deg)  rotateX(-4deg); }
}
@keyframes countPop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
}
@keyframes coinLaunch {
  0%   { transform: translateY(60px) scale(.6); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-40px) scale(1); opacity: 1; }
}
/* 2D coin flip: squash to a thin sliver twice per cycle; faces swap at each
   thin point (25% / 75%) so the change is hidden. Pure scaleX — runs on any GPU. */
@keyframes flip2d {
  0%   { transform: scaleX(1);   }
  25%  { transform: scaleX(.08); }
  50%  { transform: scaleX(1);   }
  75%  { transform: scaleX(.08); }
  100% { transform: scaleX(1);   }
}
@keyframes faceFront { 0%,24.9% { opacity: 1; } 25%,74.9% { opacity: 0; } 75%,100% { opacity: 1; } }
@keyframes faceBack  { 0%,24.9% { opacity: 0; } 25%,74.9% { opacity: 1; } 75%,100% { opacity: 0; } }
@keyframes landPop   { 0% { transform: scaleX(.15); } 55% { transform: scaleX(1.08); } 100% { transform: scaleX(1); } }
@keyframes beamPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes numberBump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes finalPulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,196,74,.6)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(255,196,74,.95)); } }
@keyframes tearDrop { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes flashHit { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes confettiFall {
  0%   { transform: translateY(-10%) rotateZ(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(112vh) rotateZ(720deg); opacity: 0; }
}
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-6px, 3px) rotate(-.6deg); }
  30% { transform: translate(6px, -3px) rotate(.6deg); }
  45% { transform: translate(-5px, 2px); }
  60% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 1px); }
}

/* ---------- 12b. LITE MODE (phones / weak GPUs) ----------
   Added as body.lite by JS. Strips the effects that overload low-end Android
   webviews (which showed a frozen screen with audio still playing):
   • only the ACTIVE scene is rendered (inactive scenes are display:none, so
     the browser composites 1 full-screen layer instead of 6);
   • no scene cross-fade (instant switch — snappier and paint-cheap);
   • no ambient particles / twinkling stars;
   • no animated box-shadow glow (box-shadow animation repaints every frame);
   • no spinning conic-gradient rays on the win screen. */
body.lite .scene { transition: none !important; transform: none !important; }
body.lite .scene:not(.is-active) { display: none !important; }
body.lite .bg__stars, body.lite .bg__particles { display: none !important; }
body.lite .btn--gold { animation: none !important;
  box-shadow: 0 10px 0 var(--gold-deep), 0 0 26px rgba(255,183,60,.6) !important; }
body.lite .meter__rays { display: none !important; }
body.lite .bg__glow { animation: none !important; }   /* static glow, no drift repaint */

/* ---------- 13. RESPONSIVE ----------
   Strategy for "every phone model":
   • The stage already fills the whole viewport (see #stage above).
   • On phones the biggest elements are sized with min(px, vw, vh) so they
     shrink fluidly on small/short screens and never overflow — no matter the
     exact resolution. `svmin`-style min() keeps them proportional to the
     *smaller* screen dimension.
   • Extra breakpoints handle very short screens and landscape.
   • ≥600px wide + tall enough → centred desktop "phone frame".
------------------------------------------------------------------ */

/* --- Fluid sizing on touch/phone-width screens --- */
@media (max-width: 599px) {
  .logo__flip   { font-size: min(46px, 12vw); }
  .logo__coin   { font-size: min(62px, 16vw); }
  .hero-coin    { width: min(168px, 42vw, 22vh); height: min(168px, 42vw, 22vh); }
  .start__subtitle { font-size: min(16px, 4.1vw); }

  .scene__title { font-size: min(30px, 8vw); }
  .choices      { max-width: min(360px, 90vw); }
  .choice__icon { font-size: min(64px, 15vw); }
  .choice__name { font-size: min(22px, 5.6vw); }

  .countdown    { font-size: min(150px, 40vw, 26vh); }
  .countdown .go{ font-size: min(96px, 26vw, 17vh); }
  .arena        { height: min(380px, 46vh); }
  .flip-coin    { width: min(150px, 38vw, 20vh); height: min(150px, 38vw, 20vh); }

  .result__title    { font-size: min(38px, 10vw); }
  .meter__coin      { width: min(130px, 34vw, 17vh); height: min(130px, 34vw, 17vh); }
  .meter__multiplier{ font-size: min(64px, 17vw, 11vh); }

  .btn--xl { font-size: min(26px, 6.6vw); padding: min(20px, 2.4vh) min(66px, 16vw); }
  .btn--lg { font-size: min(20px, 5.2vw); padding: min(16px, 2vh) min(46px, 12vw); }
}

/* --- Narrow phones: keep the top bar tidy --- */
@media (max-width: 379px) {
  .lang-btn { font-size: 11px; padding: 5px 7px; }
  .lang-switch { gap: 2px; padding: 3px; }
  .wallet { padding: 6px 11px 6px 7px; }
  .wallet__amount { font-size: 16px; }
}

/* --- Very short screens (small phones, split view) --- */
@media (max-height: 620px) {
  .scene { gap: 10px; }
  .logo__ribbon { font-size: 12px; padding: 5px 14px; }
  .start__subtitle { line-height: 1.35; }
}

/* --- Landscape phones: compact everything so a full round still fits --- */
@media (orientation: landscape) and (max-height: 520px) {
  .scene { gap: 8px;
    padding: calc(48px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom)); }
  .start__logo { flex-direction: row; align-items: center; gap: 18px; }
  .logo { flex-direction: row; gap: 10px; align-items: baseline; }
  .logo__flip { font-size: 6vh; } .logo__coin { font-size: 8vh; }
  .logo__ribbon { display: none; }
  .hero-coin { width: 22vh; height: 22vh; margin: 0; }
  .start__subtitle { font-size: 2.6vh; }
  .scene__title { font-size: 5vh; } .scene__hint { font-size: 2.4vh; }
  .choices { max-width: 60vh; }
  .choice { aspect-ratio: 4/3; }
  .choice__icon { font-size: 8vh; } .choice__name { font-size: 3.2vh; }
  .arena { height: 60vh; }
  .flip-coin { width: 26vh; height: 26vh; }
  .countdown { font-size: 34vh; } .countdown .go { font-size: 22vh; }
  .meter__coin { width: 24vh; height: 24vh; }
  .meter__multiplier { font-size: 12vh; } .meter__x { font-size: 8vh; }
  .result__title { font-size: 6vh; } .result__sub { font-size: 2.6vh; }
  .result__mascot .mascot { width: 18vh; height: 16vh; }
}

/* --- Desktop / tablet: show the premium centred phone frame --- */
@media (min-width: 600px) and (min-height: 720px) {
  #app { background: radial-gradient(1200px 800px at 50% -10%, #2a114b 0%, #0c0416 70%); }
  #stage {
    width: min(440px, 96vw);
    height: min(900px, 94dvh);
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(123,63,228,.15);
  }
}

/* --- Reduced motion ---
   IMPORTANT: only calm the *ambient/decorative* motion. The old blanket
   `* { animation: 0 }` rule also killed the coin flip and countdown, so on
   phones with "Reduce animations" ON (common on Samsung/One UI) the game
   looked frozen while sounds still played. The coin flip, countdown, launch
   and result animations are essential content and must keep running. */
@media (prefers-reduced-motion: reduce) {
  .bg__glow, .bg__stars span, .bg__particles span,
  .btn--gold, .logo, .logo__o, .logo__ribbon,
  .hero-coin, .hero-coin .coin3d,
  .platform__ring, .meter__coin, .meter__coin .coin3d, .meter__rays,
  .mascot, .mascot__tears span,
  .choice.is-selected .choice__icon {
    animation: none !important;
  }
}