/* ============================================================
   GEM CATCHER — style.css
   Mobile-first Thai casual-game UI (9:16, fills any phone screen)
   ------------------------------------------------------------
   THEME TOKENS live in :root — change those to re-skin everything.
   ============================================================ */

:root{
  /* --- Brand palette (edit to re-skin) --- */
  --c-gold:        #ffd23f;
  --c-gold-lite:   #fff3a8;
  --c-gold-deep:   #ff9c1a;
  --c-gold-dark:   #a85500;
  --c-blue:        #3fb6ff;
  --c-blue-deep:   #1f5fd6;
  --c-navy:        #14286b;
  --c-navy-deep:   #081231;
  --c-plank:       #8a5225;
  --c-plank-dark:  #5d3312;
  --c-mint:        #7dffb0;
  --c-pink:        #ff4fb0;
  --c-danger:      #ff4d5e;
  --c-ink:         #eaf3ff;
  --c-ink-soft:    #a6c6ee;

  /* --- Typography --- */
  /* Kanit is the display face; the rest of the stack renders Thai
     correctly on every device if the webfont fails to load. */
  --font-ui: "Kanit","Noto Sans Thai","Sarabun","Leelawadee UI","Thonburi",
             -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET / PAGE LOCK
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  overflow:hidden;
  position:fixed;
  top:0; left:0;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  background:#060c20;
  font-family:var(--font-ui);
  font-weight:600;
}

button{ font-family:inherit; font-weight:700; border:0; cursor:pointer;
        touch-action:manipulation; -webkit-tap-highlight-color:transparent; color:inherit; }

.hidden{ display:none !important; }

/* Thai needs a touch more line-height than Latin to avoid clipped tone marks */
body{ line-height:1.45; }

/* ---- SVG icon system (replaces emoji everywhere) ---- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex:none; }

/* ============================================================
   STAGE
   ============================================================ */
/* inset:0 + margin:auto centres the stage once JS gives it an explicit
   width/height (see View.resize). On a phone that size is the whole viewport,
   so this is a no-op there. */
#stage{ position:absolute; inset:0; margin:auto; overflow:hidden; background:#081231; }

/* ---- Desktop / landscape: a phone-shaped panel on a backdrop ----
   Added by View.resize when the window is wider than CONFIG.MAX_STAGE_RATIO. */
body.framed{
  background:
    radial-gradient(120% 90% at 50% 0%, #16306e 0%, #0a1740 45%, #050b20 100%);
}
body.framed #stage{
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(140,190,255,.16);
}
/* The canvas is square-cornered; clip it to the rounded frame. */
body.framed #game,
body.framed #confetti{ border-radius:22px; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#confetti{ position:absolute; inset:0; width:100%; height:100%; display:block;
           pointer-events:none; z-index:35; }

/* ============================================================
   HUD
   ============================================================ */
#hud{
  position:absolute;
  top:calc(var(--safe-t) + 2.2%);
  left:0; right:0;
  padding:0 3%;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:6px;
  pointer-events:none;
  z-index:20;
}

.hud-pod{
  flex:1 1 0; min-width:0;
  background:linear-gradient(180deg,rgba(26,50,124,.94),rgba(8,18,55,.96));
  border:2px solid rgba(150,200,255,.34);
  border-radius:15px;
  padding:5px 6px 7px;
  text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.26);
  backdrop-filter:blur(3px);
}

.hud-label{
  display:block; font-size:9.5px; font-weight:600;
  letter-spacing:.2px; color:var(--c-ink-soft);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.hud-value{
  display:block; font-size:20px; font-weight:800; line-height:1.1;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums;
}

.hud-time{ flex:1.25 1 0; }
.hud-time .hud-value{ color:var(--c-gold); }

.time-bar{ margin-top:4px; height:5px; border-radius:99px; background:rgba(0,0,0,.5); overflow:hidden; }
.time-bar i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c-gold-lite),var(--c-gold-deep));
  transform-origin:left center;
}

.hud-time.warn .hud-value{ color:#ff9a9a; animation:tick .5s ease-in-out infinite; }
.hud-time.warn .time-bar i{ background:linear-gradient(90deg,#ff8f8f,#e01e37); }
@keyframes tick{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} }


/* Mute + pause at the BOTTOM corner — clear of the falling-object lane,
   so a bomb can never sit under the player's thumb target. */
.hud-btns{
  /* absolute, not fixed: fixed anchors to the viewport, which throws these
     buttons outside the stage as soon as the game is framed on desktop. */
  position:absolute; right:4%;
  bottom:calc(var(--safe-b) + 14px);
  display:flex; gap:8px;
  pointer-events:auto; z-index:21;
}

.icon-btn{
  width:36px; height:36px; border-radius:12px;
  font-size:17px; color:#dceaff;
  background:linear-gradient(180deg,rgba(34,62,142,.92),rgba(10,22,62,.94));
  border:2px solid rgba(150,200,255,.32);
  box-shadow:0 3px 0 rgba(0,0,0,.34);
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s;
}
.icon-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.34); }
.icon-btn.small{ width:32px; height:32px; font-size:15px; }
.icon-btn.off{ opacity:.55; }

/* ============================================================
   FX LAYER — score popups + combo banners
   ============================================================ */
#fx{ position:absolute; inset:0; pointer-events:none; z-index:18; overflow:hidden; }

.pop{
  position:absolute; transform:translate(-50%,-50%);
  font-size:21px; font-weight:800; color:var(--c-gold);
  text-shadow:0 2px 0 rgba(0,0,0,.65), 0 0 14px rgba(255,210,63,.9);
  animation:popUp .78s ease-out forwards; white-space:nowrap;
}
@keyframes popUp{
  0%{ opacity:0; transform:translate(-50%,-40%) scale(.5); }
  22%{ opacity:1; transform:translate(-50%,-62%) scale(1.18); }
  100%{ opacity:0; transform:translate(-50%,-135%) scale(.95); }
}


#stage.flash::after{
  content:""; position:absolute; inset:0; background:#fff;
  z-index:30; pointer-events:none; animation:flashOut .38s ease-out forwards;
}
@keyframes flashOut{ from{opacity:.92} to{opacity:0} }

/* ============================================================
   SCREENS
   ============================================================ */
.screen{
  position:absolute; inset:0; z-index:25;
  display:none; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 12px) 5.5% calc(var(--safe-b) + 12px);
  text-align:center;
}
.screen.show{ display:flex; animation:fadeIn .3s ease-out; }
.screen.dim.show{ background:rgba(4,10,30,.78); backdrop-filter:blur(5px); }
.screen.bare.show{ background:transparent; pointer-events:none; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------------- LOADING ---------------- */
#screenLoading.show{ background:linear-gradient(180deg,#0d2470,#1b56c0 60%,#3f92db); }

.load-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }

.load-gem{
  width:62px; height:62px;
  background:linear-gradient(180deg,#ff9ede,#ff4fb0 45%,#b3126e);
  clip-path:polygon(27% 7%, 73% 7%, 97% 39%, 50% 100%, 3% 39%);
  filter:drop-shadow(0 0 18px rgba(255,120,200,.85));
  animation:loadSpin 1.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes loadSpin{
  0%,100%{ transform:scaleX(1) }
  50%    { transform:scaleX(-.42) }
}

.load-title{
  font-size:24px; font-weight:800; letter-spacing:2px; color:var(--c-gold);
  text-shadow:0 3px 0 #7a3b00;
}
.load-bar{
  width:190px; height:9px; border-radius:99px;
  background:rgba(0,0,0,.4);
  border:1.5px solid rgba(255,255,255,.28);
  overflow:hidden;
}
.load-bar i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--c-gold-lite),var(--c-gold-deep));
  transition:transform .22s ease-out;
}
.load-text{ font-size:12px; font-weight:600; color:#bcd8ff; letter-spacing:.5px; }

/* ---------------- HOME ---------------- */
/* Home is laid out as: badge / logo / ฿188 / PLAY  ...pushed apart from...
   a compact footer, so the middle of the screen stays open for the canvas
   gem pile and the basket, the way the key art does it. */
.home-inner{
  width:100%; max-width:430px; height:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:2vh;
  /* Reserve the bottom band for the canvas treasure pile + basket, so the
     footer links never end up buried under gems. */
  padding-bottom:12.5vh;
}
.home-bottom{
  margin-top:auto;                 /* footer sinks; art breathes above it */
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding-top:1.4vh;
}

.badge-10s{
  width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#57b4ff,#1447a8 62%,#082566);
  border:4px solid #fff;
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 36px rgba(80,180,255,.75);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:bob 2.6s ease-in-out infinite;
}
.badge-10s .b10{ font-size:36px; font-weight:800; color:var(--c-gold); line-height:.92;
                 text-shadow:0 2px 0 #7a3b00; }
.badge-10s .bsec{ font-size:13px; font-weight:700; color:#fff; margin-top:1px; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ---- Painted art from the sheet ----
   The CSS text logo/badge stay in the markup as a fallback and are hidden
   unless <body class="no-art"> says an image failed to load. */
.fallback-art{ display:none !important; }
body.no-art .fallback-art{ display:block !important; }
body.no-art .logo-img,
body.no-art .badge-img{ display:none; }

.logo-img{
  display:block;
  width:min(370px, 96%);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.badge-img{
  display:block;
  width:112px; height:auto;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.45));
  animation:bob 2.6s ease-in-out infinite;
}

.game-title{ line-height:.88; }
.game-title span{ display:block; font-weight:800; letter-spacing:1px; }
.t-gem{
  font-size:clamp(42px,14vw,70px); color:var(--c-gold);
  -webkit-text-stroke:3px #7a3b00; paint-order:stroke fill;
  text-shadow:0 6px 0 #7a3b00, 0 10px 18px rgba(0,0,0,.55);
}
.t-catcher{
  font-size:clamp(36px,11.8vw,58px); color:#eaf6ff; margin-top:1px;
  -webkit-text-stroke:3px #143a86; paint-order:stroke fill;
  text-shadow:0 6px 0 #143a86, 0 10px 18px rgba(0,0,0,.55);
}


/* --- Jackpot teaser: the ฿188 hook --- */
.jackpot-teaser{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  width:min(270px, 76%);
  padding:9px 22px 11px; border-radius:20px;
  background:linear-gradient(180deg,rgba(23,72,163,.5),rgba(12,38,102,.42));
  border:2.5px solid rgba(255,214,80,.75);
  box-shadow:0 0 26px rgba(255,190,60,.35), inset 0 1px 0 rgba(255,255,255,.22);
  animation:teaseGlow 2.2s ease-in-out infinite;
  backdrop-filter:blur(2px);
}
@keyframes teaseGlow{
  0%,100%{ box-shadow:0 0 20px rgba(255,190,60,.28), inset 0 1px 0 rgba(255,255,255,.22); }
  50%    { box-shadow:0 0 42px rgba(255,200,70,.62), inset 0 1px 0 rgba(255,255,255,.34); }
}
.jt-label{
  font-size:14px; font-weight:600; color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.55);
}
.jt-row{ display:flex; align-items:center; justify-content:center; gap:11px; }
.jt-crown{ width:27px; height:27px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.jt-row b{
  font-size:38px; font-weight:800; line-height:1; color:var(--c-gold);
  -webkit-text-stroke:1.5px #8a4400; paint-order:stroke fill;
  text-shadow:0 3px 0 #a85500, 0 0 22px rgba(255,210,63,.85);
}
.baht{ font-size:.72em; margin-right:.05em; }


.home-links{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }

.link-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px; border-radius:99px;
  font-size:12px; font-weight:600; color:#dceaff;
  background:rgba(6,16,44,.62);
  border:1.5px solid rgba(160,205,255,.32);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
.link-btn .ic{ width:14px; height:14px; }
.link-btn:active{ transform:translateY(1px); background:rgba(255,255,255,.18); }
.link-btn.icon-only{ padding:7px 9px; }
.link-btn.icon-only .ic{ width:15px; height:15px; }
.link-btn.off{ opacity:.55; }

/* ---------------- BIG CTA ---------------- */
.big-btn{
  position:relative; width:min(300px,88%);
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px 16px; border-radius:99px;
  font-size:21px; font-weight:800; letter-spacing:.3px;
  color:#1b2350;
  background:linear-gradient(180deg,#ffef9c 0%,var(--c-gold) 42%,var(--c-gold-deep) 100%);
  border:3px solid #fff8d2;
  box-shadow:0 7px 0 var(--c-gold-dark), 0 12px 24px rgba(0,0,0,.5),
             inset 0 2px 0 rgba(255,255,255,.85);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  overflow:hidden;
  animation:btnPulse 1.9s ease-in-out infinite;
}
.big-btn .ic{ width:22px; height:22px; }
.big-btn::after{
  content:""; position:absolute; top:0; left:-60%;
  width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  animation:sweep 2.6s ease-in-out infinite;
}
@keyframes sweep{ 0%{left:-60%} 55%{left:120%} 100%{left:120%} }
@keyframes btnPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
.big-btn:active{
  transform:translateY(4px) scale(.99); animation:none;
  box-shadow:0 3px 0 var(--c-gold-dark), 0 5px 12px rgba(0,0,0,.4),
             inset 0 2px 0 rgba(255,255,255,.7);
}

/* The home CTA is the loudest thing on the screen, per the key art. */
.play-cta{
  width:min(330px, 92%);
  padding:17px 26px 19px;
  font-size:27px;
  gap:14px;
  border-width:4px;
  box-shadow:0 9px 0 var(--c-gold-dark), 0 15px 30px rgba(0,0,0,.55),
             inset 0 3px 0 rgba(255,255,255,.9);
}
.play-cta .play-tri{
  width:26px; height:26px;
  color:#1b2350;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5));
}
.play-cta:active{
  box-shadow:0 4px 0 var(--c-gold-dark), 0 6px 14px rgba(0,0,0,.45),
             inset 0 3px 0 rgba(255,255,255,.75);
}

.ghost-btn{
  margin-top:10px; padding:10px 26px; border-radius:99px;
  font-size:14px; font-weight:700; color:#cfe4ff;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(160,205,255,.34);
}
.ghost-btn:active{ transform:translateY(2px); background:rgba(255,255,255,.17); }

/* ---------------- CARDS ---------------- */
.card{
  width:100%; max-width:358px;
  padding:22px 19px 20px; border-radius:26px;
  background:linear-gradient(180deg,rgba(34,66,148,.97),rgba(10,22,62,.98));
  border:3px solid rgba(150,200,255,.34);
  box-shadow:0 12px 0 rgba(0,0,0,.4), 0 22px 46px rgba(0,0,0,.6),
             inset 0 2px 0 rgba(255,255,255,.2);
  animation:cardIn .42s cubic-bezier(.2,1.4,.4,1);
}
@keyframes cardIn{ 0%{opacity:0; transform:translateY(26px) scale(.9)} 100%{opacity:1; transform:none} }
.card.compact{ padding:24px 19px; }

.card-h{ font-size:24px; font-weight:800; color:#fff; margin-bottom:14px;
         text-shadow:0 3px 0 rgba(0,0,0,.5); }

.tut-row{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 12px; margin-bottom:8px; border-radius:15px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
}
.tut-ico{
  width:40px; height:40px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(0,0,0,.3);
}
.tut-ico .ic{ width:24px; height:24px; }
.tut-ico.blue{ background:linear-gradient(180deg,#3f8fe0,#1a4a9c); }
.tut-ico.pink{ background:linear-gradient(180deg,#ff6cc0,#b3126e); }
.tut-ico.gold{ background:linear-gradient(180deg,#ffd85f,#c07800); }
.tut-ico.green{ background:linear-gradient(180deg,#3fd07a,#0a7736); color:#eafff2; }
.tut-ico.dark{ background:linear-gradient(180deg,#4a5260,#12161f); }
.tut-row b{ display:block; color:#fff; font-size:14.5px; font-weight:700; }
.tut-row small{ display:block; color:var(--c-ink-soft); font-size:11.5px; font-weight:500;
                margin-top:1px; line-height:1.4; }
.card .big-btn{ margin-top:14px; }

/* ---------------- COUNTDOWN ---------------- */
.count-num{
  font-size:clamp(90px,29vw,148px); font-weight:800; color:var(--c-gold);
  -webkit-text-stroke:5px #6d3400; paint-order:stroke fill;
  text-shadow:0 0 60px rgba(255,200,60,.95);
}
.count-num.go{ color:var(--c-mint); -webkit-text-stroke:5px #0a5c34;
               font-size:clamp(62px,20vw,105px); }
.count-num.anim{ animation:countIn .82s cubic-bezier(.2,1.3,.4,1); }
@keyframes countIn{
  0%{ opacity:0; transform:scale(2.4); }
  28%{ opacity:1; transform:scale(1); }
  74%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.62); }
}

/* ============================================================
   REVEAL  —  the prize draw
   ============================================================ */
.reveal-wrap{
  width:100%; max-width:360px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

.reveal-head{ display:flex; flex-direction:column; gap:3px; }
.rv-kicker{
  font-size:19px; font-weight:800; color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.5);
  letter-spacing:.3px;
}
.rv-kicker.dots::after{ content:""; animation:dots 1.1s steps(4,end) infinite; }
@keyframes dots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }
.rv-score{ font-size:12.5px; font-weight:600; color:var(--c-ink-soft); }
.rv-score b{ color:var(--c-gold); font-weight:800; font-variant-numeric:tabular-nums; }

/* --- The reel --- */
.reel{
  position:relative; width:min(272px,84%); height:228px;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,rgba(8,18,52,.96),rgba(16,34,86,.96));
  border:3px solid rgba(150,200,255,.36);
  box-shadow:0 10px 0 rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.6),
             inset 0 2px 0 rgba(255,255,255,.16);
}
.reel.landed{ animation:reelLand .5s cubic-bezier(.2,1.7,.4,1); }
@keyframes reelLand{ 0%{transform:scale(1)} 35%{transform:scale(1.07)} 100%{transform:scale(1)} }

.reel-track{
  position:absolute; left:0; right:0; top:0;
  will-change:transform;
}

/* Each prize cell: 76px tall, so the centre row sits at 76px offset */
.reel-cell{
  height:76px;
  display:flex; align-items:center; justify-content:center; gap:3px;
  font-size:32px; font-weight:800; color:#eaf3ff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  opacity:.82;
}
.reel-cell .baht{ font-size:.62em; opacity:.85; }
/* Prizes this run cannot draw are dimmed — the player still sees what a
   better score would have unlocked, which is the point of showing them. */
.reel-cell.locked{ opacity:.26; }
.reel-cell.zero{ font-size:19px; color:#b9cbe8; }
.reel-cell.top{ color:var(--c-gold-lite); text-shadow:0 0 20px rgba(255,210,63,.9), 0 2px 4px rgba(0,0,0,.5); }

/* The highlight window across the centre row */
.reel-window{
  position:absolute; left:0; right:0; top:76px; height:76px;
  z-index:3; pointer-events:none;
  border-top:2px solid rgba(255,210,63,.85);
  border-bottom:2px solid rgba(255,210,63,.85);
  background:linear-gradient(90deg,rgba(255,210,63,.16),rgba(255,210,63,.05),rgba(255,210,63,.16));
  box-shadow:0 0 26px rgba(255,190,60,.4) inset;
}
.reel-window.hot{
  border-color:#fff3a8;
  background:linear-gradient(90deg,rgba(255,230,120,.4),rgba(255,210,63,.16),rgba(255,230,120,.4));
  animation:hotWin .55s ease-out;
}
@keyframes hotWin{ 0%{ box-shadow:0 0 0 rgba(255,220,90,0) inset } 40%{ box-shadow:0 0 60px rgba(255,230,120,.95) inset } }

.reel-ptr{
  position:absolute; top:104px; z-index:4;
  width:0; height:0;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.reel-ptr.left{ left:-2px; border-left:14px solid var(--c-gold); }
.reel-ptr.right{ right:-2px; border-right:14px solid var(--c-gold); }

.reel-fade{ position:absolute; left:0; right:0; height:64px; z-index:2; pointer-events:none; }
.reel-fade.top{ top:0; background:linear-gradient(180deg,rgba(8,18,52,.98),rgba(8,18,52,0)); }
.reel-fade.bottom{ bottom:0; background:linear-gradient(0deg,rgba(8,18,52,.98),rgba(8,18,52,0)); }

/* --- The landed prize card --- */
.prize-card{
  position:relative; width:100%;
  padding:16px 18px; border-radius:22px;
  background:linear-gradient(180deg,rgba(34,66,148,.96),rgba(10,22,62,.97));
  border:3px solid rgba(150,200,255,.34);
  box-shadow:0 8px 0 rgba(0,0,0,.4), 0 16px 34px rgba(0,0,0,.55);
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.92);
  transition:opacity .35s ease-out, transform .45s cubic-bezier(.2,1.5,.4,1);
}
.prize-card.show{ opacity:1; transform:none; }

/* Jackpot skin */
.prize-card.jackpot{
  background:linear-gradient(180deg,#ffdf6b,#ff9c1a 55%,#d96b00);
  border-color:#fff8d2;
  box-shadow:0 8px 0 #8a4400, 0 0 60px rgba(255,200,70,.85);
}
.prize-card.jackpot .prize-banner{ color:#5c2a00; text-shadow:0 2px 0 rgba(255,255,255,.5); }
.prize-card.jackpot .prize-amount{ color:#fff; text-shadow:0 4px 0 #a8500a, 0 0 30px rgba(255,255,255,.9); }
.prize-card.jackpot .prize-sub{ color:#6b3200; }
.prize-card.jackpot .prize-inner{ animation:jackShake .6s ease-out; }
@keyframes jackShake{
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px) rotate(-1.5deg)}
  35%{transform:translateX(6px) rotate(1.5deg)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

/* No-prize skin — gentle, never punishing */
.prize-card.none{ background:linear-gradient(180deg,rgba(46,60,100,.96),rgba(14,22,50,.97)); }
.prize-card.none .prize-amount{ font-size:34px; color:var(--c-ink-soft); }

.prize-inner{ position:relative; z-index:2; }
.prize-banner{ font-size:16px; font-weight:800; color:var(--c-gold); letter-spacing:.3px; }
.prize-amount{
  font-size:56px; font-weight:800; line-height:1.06; color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 30px rgba(120,190,255,.6);
  font-variant-numeric:tabular-nums;
}
.prize-sub{ font-size:11.5px; font-weight:500; color:var(--c-ink-soft); margin-top:3px; line-height:1.4; }

/* Rotating light rays behind a big win */
.rays{
  position:absolute; left:50%; top:50%;
  width:640px; height:640px; margin:-320px 0 0 -320px;
  z-index:1; opacity:0; transition:opacity .45s;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.30) 0deg 9deg, rgba(255,255,255,0) 9deg 24deg);
  animation:spinRays 9s linear infinite;
}
.rays.on{ opacity:1; }
@keyframes spinRays{ to{ transform:rotate(360deg) } }

.reveal-btns{
  width:100%; display:flex; flex-direction:column; align-items:center;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.reveal-btns.show{ opacity:1; pointer-events:auto; }

/* ---------------- RESULT ---------------- */
.result-banner{
  font-size:28px; font-weight:800; color:var(--c-gold);
  -webkit-text-stroke:2px #6d3400; paint-order:stroke fill;
  text-shadow:0 4px 0 #6d3400; margin-bottom:4px;
}
.result-banner.boom{ color:#ff9b7b; -webkit-text-stroke:2px #7a1500; text-shadow:0 4px 0 #7a1500; }


/* The prize is the headline of the result card */
.prize-block{
  margin:12px 0 13px; padding:12px 16px 14px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,214,80,.22),rgba(255,150,20,.14));
  border:2px solid rgba(255,214,80,.6);
  box-shadow:0 0 26px rgba(255,190,60,.3), inset 0 1px 0 rgba(255,255,255,.24);
}
.pb-label{ display:block; font-size:12px; font-weight:600; color:#ffe9b0; }
.pb-value{
  display:block; font-size:50px; font-weight:800; line-height:1.06;
  color:var(--c-gold-lite);
  text-shadow:0 4px 0 #a85500, 0 0 28px rgba(255,210,63,.75);
  font-variant-numeric:tabular-nums;
}
/* Nothing won: same slot, dialled right down — never a hole in the layout */
.prize-block.none{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.prize-block.none .pb-label{ color:var(--c-ink-soft); }
.prize-block.none .pb-value{
  font-size:26px; color:var(--c-ink-soft); text-shadow:none;
}

/* Score demoted to a supporting line under the prize */
.score-strip{
  display:flex; align-items:baseline; justify-content:center; gap:9px;
  margin-bottom:16px; padding:8px 14px; border-radius:13px;
  font-size:12.5px; font-weight:600; color:var(--c-ink-soft);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
}
.score-strip b{
  font-size:22px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums;
}

.gems-line{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:16px; padding:9px 14px; border-radius:14px;
  font-size:14px; font-weight:600; color:var(--c-ink);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
}
.gems-line .ic{ width:19px; height:19px; }
.gems-line b{ font-size:20px; font-weight:800; color:var(--c-gold);
              font-variant-numeric:tabular-nums; }

.result-links{ display:flex; gap:7px; justify-content:center; margin-top:11px; }

/* ============================================================
   MODALS  (ตารางรางวัล / วิธีเล่น / เงื่อนไข)
   ============================================================ */
.modal{
  position:absolute; inset:0; z-index:32;
  display:none; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 16px) 5% calc(var(--safe-b) + 16px);
  background:rgba(3,8,24,.82); backdrop-filter:blur(6px);
}
.modal.show{ display:flex; animation:fadeIn .24s ease-out; }

.modal-card{
  width:100%; max-width:372px; max-height:100%;
  display:flex; flex-direction:column;
  border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg,rgba(30,60,138,.99),rgba(9,20,56,.99));
  border:3px solid rgba(150,200,255,.34);
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  animation:cardIn .34s cubic-bezier(.2,1.3,.4,1);
}

.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 12px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.14);
}
.modal-head h2{ display:flex; align-items:center; gap:8px;
                font-size:17px; font-weight:800; color:#fff; }
.modal-head .ic{ width:20px; height:20px; color:var(--c-gold); }
.modal-x{
  width:32px; height:32px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#cfe4ff; background:rgba(255,255,255,.1);
  border:1.5px solid rgba(160,205,255,.3);
}
.modal-x .ic{ width:15px; height:15px; color:inherit; }
.modal-x:active{ transform:translateY(1px); }

.modal-body{
  padding:14px 16px 18px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-y;                    /* the one place scrolling is allowed */
  text-align:left;
}
.modal-note{ font-size:12px; font-weight:500; color:var(--c-ink-soft);
             line-height:1.55; margin-bottom:12px; }

/* Conditions shown above the reward ladder */
.modal-rules{
  list-style:none; display:flex; flex-direction:column; gap:6px;
  margin-bottom:14px;
}
.modal-rules li{
  position:relative; padding-left:16px;
  font-size:12px; font-weight:500; color:var(--c-ink-soft); line-height:1.5;
}
.modal-rules li::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:6px; height:6px; border-radius:50%;
  background:var(--c-gold); opacity:.85;
}
.modal-rules li b{ color:#fff; font-weight:700; }

/* --- Reward ladder --- */
/* คะแนนขั้นต่ำ → รางวัล, as a two-column table */
.rt-head{
  display:flex; justify-content:space-between;
  padding:0 14px 6px; margin-bottom:2px;
  font-size:11px; font-weight:700; color:var(--c-ink-soft);
  letter-spacing:.3px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.reward-table{ list-style:none; display:flex; flex-direction:column; gap:5px; margin-top:6px; }
.reward-table li{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.13);
}
.rt-need{
  flex:1; text-align:left;
  font-size:17px; font-weight:700; color:#cfe4ff;
  font-variant-numeric:tabular-nums;
}
.rt-arrow{ font-size:14px; color:var(--c-ink-soft); opacity:.7; }
.rt-amt{
  min-width:64px; text-align:right;
  font-size:21px; font-weight:800; color:var(--c-gold);
  font-variant-numeric:tabular-nums;
}
.rt-amt .baht{ font-size:.66em; opacity:.85; }

/* The ฿188 row is the star of the table */
.reward-table li.top{
  background:linear-gradient(180deg,rgba(255,214,80,.26),rgba(255,150,20,.16));
  border-color:rgba(255,214,80,.66);
  box-shadow:0 0 22px rgba(255,190,60,.3);
  padding:12px;
}
.reward-table li.top .rt-amt{ font-size:27px; color:var(--c-gold-lite);
                              text-shadow:0 2px 0 #a85500, 0 0 16px rgba(255,210,63,.8); }
.reward-table li.top .rt-need{ color:#ffe9b0; font-size:19px; }
.rt-crown{ width:24px; height:24px; flex:none; }

/* The bomb rule reads as part of the ladder, but clearly not a prize */
.reward-table li.bomb{
  margin-top:4px;
  background:linear-gradient(180deg,rgba(255,77,94,.16),rgba(140,20,30,.14));
  border-color:rgba(255,120,120,.42);
}
.reward-table li.bomb .rt-need{ color:#ffc4c4; font-size:15px; }
.reward-table li.bomb .rt-amt{ color:#ffb0b0; font-size:19px; }
.rt-bomb{ width:22px; height:22px; flex:none; }

/* ============================================================
   SMALL DEVICES (360×640 and similar)
   ============================================================ */
/* The painted logo is 610x415, so its height grows fast with width — these
   steps keep the home column inside short screens without cropping it. */
@media (max-height:900px){
  .home-inner{ gap:1.6vh; }
  .logo-img{ width:min(320px, 92%); }
  .badge-img{ width:96px; }
  .play-cta{ padding:15px 24px 17px; font-size:24px; }
}

@media (max-height:680px){
  .home-inner{ gap:1.1vh; }
  .logo-img{ width:min(250px, 86%); }
  .badge-img{ width:68px; }
  .jackpot-teaser{ padding:6px 18px 8px; }
  .jt-label{ font-size:12px; }
  .jt-row b{ font-size:30px; }
  .jt-crown{ width:22px; height:22px; }
  .play-cta{ padding:12px 20px 14px; font-size:21px; }
  .play-cta .play-tri{ width:21px; height:21px; }
  .link-btn{ padding:6px 10px; font-size:11px; }
  .badge-10s{ width:66px; height:66px; border-width:3px; }
  .badge-10s .b10{ font-size:25px; }
  .badge-10s .bsec{ font-size:10px; }
  .jackpot-teaser{ padding:6px 16px; gap:9px; }
  .jt-text b{ font-size:25px; }
  .jt-crown{ width:22px; height:22px; }
  .big-btn{ padding:12px 20px 14px; font-size:19px; }
  .tut-row{ padding:8px 10px; margin-bottom:6px; }
  .tut-ico{ width:34px; height:34px; }
  .tut-ico .ic{ width:20px; height:20px; }
  .pb-value{ font-size:40px; }
  .card{ padding:18px 16px; }
  .reel{ height:186px; }
  .reel-cell{ height:62px; font-size:25px; }
  .reel-window{ top:62px; height:62px; }
  .reel-ptr{ top:84px; }
  .prize-amount{ font-size:46px; }
}

@media (prefers-reduced-motion:reduce){
  .big-btn,.big-btn::after,.badge-10s,.jackpot-teaser,.rays{ animation:none; }
}