/* =========================================================
   MYSTERY BOX — Luxury Fantasy  |  style.css
   AAA mobile-game UI. Pure CSS art + animation.
   ========================================================= */

:root{
  /* palette */
  --bg-0:#140B2D; --bg-1:#1E1248; --bg-2:#2D1662;
  --pp-0:#7E3BFF; --pp-1:#9A52FF; --pp-2:#B975FF;
  --gold-0:#FFD84A; --gold-1:#FFB100; --gold-2:#FFE873;
  --neon-blue:#3fd0ff; --neon-pink:#ff5bb0; --orange:#ff8a1e;
  --glass:rgba(38,22,80,.55);
  --glass-brd:rgba(158,120,255,.35);
  --txt:#efe8ff; --txt-dim:#b7a7e0;
  --r-legendary:#ffbf3f; --r-epic:#b06bff; --r-rare:#42b7ff;
  --r-uncommon:#57e08a; --r-common:#c9d3e6;
  --shadow-soft:0 18px 45px rgba(0,0,0,.55);
  --app-w:480px;   /* the game is a centred phone-width frame on every screen */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Poppins','Kanit',system-ui,sans-serif;
  color:var(--txt);
  background:var(--bg-0);
  overflow-x:hidden;
  min-height:100vh;min-height:100svh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  /* centred app frame */
  display:flex;flex-direction:column;align-items:center;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block}
canvas{display:block}
[hidden]{display:none!important}

/* ================= LIVING BACKGROUND ================= */
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden}
.bg-gradient{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 90% at 50% -10%, #3a1f7a 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 20%, rgba(126,59,255,.35) 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 15%, rgba(63,208,255,.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 45%, #0d0722 100%);
  animation:bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift{from{transform:translate3d(-1.2%, -1%,0) scale(1.03)}to{transform:translate3d(1.2%,1%,0) scale(1.06)}}

.bg-fog{position:absolute;inset:-20%;filter:blur(46px);opacity:.5;mix-blend-mode:screen}
.fog-a{background:radial-gradient(40% 40% at 30% 60%, rgba(154,82,255,.5), transparent 70%);animation:fogA 26s ease-in-out infinite alternate}
.fog-b{background:radial-gradient(45% 45% at 70% 40%, rgba(63,208,255,.28), transparent 70%);animation:fogB 32s ease-in-out infinite alternate}
@keyframes fogA{from{transform:translate(-6%,4%)}to{transform:translate(8%,-6%)}}
@keyframes fogB{from{transform:translate(6%,-4%)}to{transform:translate(-8%,6%)}}

.light-rays{
  position:absolute;left:50%;top:-30%;width:140vmax;height:120vmax;transform:translateX(-50%);
  background:conic-gradient(from 0deg at 50% 0%,
    transparent 0deg, rgba(255,216,74,.10) 6deg, transparent 12deg,
    transparent 20deg, rgba(185,117,255,.08) 26deg, transparent 32deg,
    transparent 46deg, rgba(255,216,74,.08) 52deg, transparent 58deg,
    transparent 72deg, rgba(63,208,255,.06) 78deg, transparent 84deg);
  opacity:.6;animation:rays 40s linear infinite;pointer-events:none;
}
@keyframes rays{to{transform:translateX(-50%) rotate(360deg)}}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(6,3,18,.8) 100%)}
.starfield,.particles-layer{position:absolute;inset:0;width:100%;height:100%}
.particles-layer{z-index:-1}

/* ================= HUD ================= */
.glass{
  background:linear-gradient(160deg, rgba(70,44,140,.55), rgba(30,18,72,.62));
  border:1px solid var(--glass-brd);
  border-radius:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-soft);
}
.hud{
  position:relative;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:12px clamp(12px,3vw,18px);
  width:100%;max-width:var(--app-w);margin:0 auto;
}
.keys-panel{
  display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:16px;
  animation:idleGlowKeys 3.2s ease-in-out infinite;
}
@keyframes idleGlowKeys{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 rgba(255,177,0,0),var(--shadow-soft)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px rgba(255,177,0,.45),var(--shadow-soft)}}
.key-ico{display:grid;place-items:center;filter:drop-shadow(0 0 6px rgba(255,177,0,.6))}
.key-count{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:20px;color:var(--gold-2);text-shadow:0 2px 6px rgba(0,0,0,.5)}
.add-btn{
  width:30px;height:30px;border-radius:50%;font-size:20px;font-weight:700;line-height:1;
  color:#093d16;background:radial-gradient(circle at 35% 30%, #8effb0, #17c95a 70%);
  box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.7), 0 0 14px rgba(46,230,120,.5);
  display:grid;place-items:center;transition:transform .15s;
}
.add-btn:hover{transform:scale(1.12)}
.add-btn:active{transform:scale(.94)}

.coin-panel{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:16px}
.coin-count{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:19px;color:var(--gold-2);min-width:26px;text-align:left}
.coin-ico{filter:drop-shadow(0 0 6px rgba(255,216,74,.6))}

.refresh-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:14px;
  font-family:'Baloo 2','Kanit',cursive;font-weight:700;font-size:14px;color:#dff4ff;transition:transform .12s,filter .15s}
.refresh-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.refresh-btn:active{transform:scale(.94)}
.refresh-btn:active .rf-ico{transform:rotate(180deg)}
.refresh-btn .rf-ico{display:inline-block;transition:transform .3s}
@media(max-width:520px){.refresh-btn .rf-txt{display:none}}
.mute-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;transition:transform .15s}
.mute-btn:hover{transform:scale(1.08)}
.mute-btn:active{transform:scale(.94)}

/* ================= TITLE ================= */
.title-wrap{position:relative;text-align:center;padding:4px 12px 4px;z-index:5;width:100%;max-width:var(--app-w);margin:2px auto 0}
.ribbon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);
  width:min(440px,94%);height:96px;z-index:-1;
  background:linear-gradient(180deg,#7e3bff,#4a1fa8);
  border-radius:14px;filter:blur(2px);opacity:.55;
  box-shadow:0 0 50px rgba(126,59,255,.6);
  clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);
}
.game-title{
  position:relative;display:inline-block;
  font-family:'Baloo 2','Kanit',cursive;font-weight:800;letter-spacing:2px;
  font-size:clamp(30px,10.5vw,48px);line-height:.98;
  background:linear-gradient(180deg,#FFF6C0 0%,#FFE05A 55%,#FFCE2E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;
  animation:titleFloat 4.5s ease-in-out infinite;
}
.game-title::before{
  content:attr(data-text);position:absolute;inset:0;z-index:-1;
  -webkit-text-stroke:3px #4a2600;text-stroke:3px #4a2600;color:transparent;
  background:none;-webkit-background-clip:initial;
}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.subtitle-ribbon{
  margin:8px auto 0;display:inline-block;padding:6px 22px;border-radius:30px;
  background:linear-gradient(180deg,#8a46ff,#5a25c0);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(90,37,192,.6), inset 0 1px 0 rgba(255,255,255,.3);
  font-weight:600;font-size:clamp(12px,2.4vw,16px);color:#fff;
}

/* ================= LADDER HUD (levels / pot) ================= */
.ladder-hud{max-width:max-content;margin:0 auto 12px;padding:9px 22px;border-radius:40px;
  font-family:'Baloo 2','Kanit',cursive;font-weight:700;font-size:clamp(13px,2.4vw,16px);color:#fff;
  background:linear-gradient(180deg, rgba(255,177,0,.28), rgba(126,59,255,.32));
  border:1px solid rgba(255,216,74,.5);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 0 22px rgba(255,177,0,.35);
  animation:ladderPop .4s cubic-bezier(.2,1.3,.4,1), floatY 3s ease-in-out infinite}
.ladder-hud b{color:var(--gold-2);font-family:'Chakra Petch',sans-serif;font-size:1.15em;margin:0 2px}
.ladder-hud .lh-hint{color:var(--txt-dim);font-weight:600;font-size:.86em}
@keyframes ladderPop{from{transform:translateY(-10px) scale(.9);opacity:0}to{opacity:1}}
@media(max-width:520px){.ladder-hud .lh-hint{display:none}}

/* ================= STAGE / GRID ================= */
.stage{position:relative;z-index:3;padding:6px 10px 12px;width:100%;max-width:var(--app-w);margin:0 auto;
  flex:1;display:flex;flex-direction:column}
.box-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:clamp(8px,2.4vw,12px);flex:1;min-height:0;
  perspective:1200px;
}
.stage.dimmed .mbox:not(.selected){filter:brightness(.32) saturate(.6);transform:scale(.94);opacity:.7}
/* whole board locked after the run ends (rights used up) */
.box-grid.locked .mbox{filter:grayscale(1) brightness(.4);pointer-events:none;animation:none;transform:none;cursor:default}
.box-grid.locked .mbox .glow,.box-grid.locked .mbox .spark{opacity:0!important}
.box-grid.locked .mbox::after{display:none!important}
.info-banner.used{opacity:1!important;filter:none!important;color:#ffd0da;border-color:rgba(255,110,150,.55)}

/* ---------- Single Mystery Box ---------- */
.mbox{
  position:relative;height:100%;min-height:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:filter .4s, transform .4s, opacity .4s;
  animation:boxFloat var(--fd,4s) ease-in-out infinite;
  animation-delay:var(--dl,0s);
}
@keyframes boxFloat{
  0%,100%{transform:translateY(0) rotateZ(var(--rz,-1deg))}
  50%{transform:translateY(-9px) rotateZ(calc(var(--rz,-1deg) * -1))}
}
.mbox .glow{
  position:absolute;left:50%;top:44%;width:82%;height:82%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle, var(--c1) 0%, transparent 66%);
  filter:blur(10px);opacity:.55;z-index:0;animation:glowBreath 3.4s ease-in-out infinite;
}
@keyframes glowBreath{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.08)}}

/* the cube — built from 3 faces */
.cube{position:relative;height:calc(100% - 34px);aspect-ratio:1;width:auto;max-width:82%;margin:0 auto 4px;
  transform-style:preserve-3d;z-index:2;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cube::before{ /* base contact shadow */
  content:"";position:absolute;left:50%;bottom:-10px;width:78%;height:16px;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.6), transparent 72%);filter:blur(3px);z-index:-1;
}
.face{position:absolute;border:2px solid var(--frame,#ffcf5a)}
.cube .front{
  position:relative;width:100%;height:100%;border-radius:12px;
  background:
    linear-gradient(145deg, var(--f-lt) 0%, var(--f-mid) 48%, var(--f-dk) 100%);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5), inset 0 3px 6px rgba(255,255,255,.18), 0 0 22px var(--c1);
  overflow:hidden;
}
.cube .front::after{ /* gloss sweep */
  content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, transparent 60%);
  transform:translateX(-120%);transition:transform .5s;
}
.mbox:hover .cube .front::after{transform:translateX(120%)}

/* gold frame corners */
.corner{position:absolute;width:22%;height:22%;border:3px solid var(--frame,#ffcf5a);border-radius:5px;
  box-shadow:0 0 8px var(--frame,#ffcf5a);pointer-events:none;z-index:3}
.corner.tl{top:6%;left:6%;border-right:none;border-bottom:none}
.corner.tr{top:6%;right:6%;border-left:none;border-bottom:none}
.corner.bl{bottom:6%;left:6%;border-right:none;border-top:none}
.corner.br{bottom:6%;right:6%;border-left:none;border-top:none}
/* rivets */
.rivet{position:absolute;width:7%;height:7%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff2c0, var(--frame,#e0a020));
  box-shadow:0 0 5px var(--frame,#ffcf5a);z-index:4}
.rivet.a{top:9%;left:9%}.rivet.b{top:9%;right:9%}.rivet.c{bottom:9%;left:9%}.rivet.d{bottom:9%;right:9%}

/* question mark */
.qmark{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:2.6em;color:var(--q,#ffe27a);
  text-shadow:0 0 14px var(--c1),0 2px 3px rgba(0,0,0,.6);animation:qPulse 2.6s ease-in-out infinite}
@keyframes qPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.09);opacity:1}}

/* per-box sparkles */
.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 2px var(--c1);opacity:0;z-index:5;pointer-events:none;animation:sparkle 3s linear infinite}
@keyframes sparkle{0%{opacity:0;transform:scale(0)}15%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(.2)}100%{opacity:0}}

/* number badge */
.badge{
  position:relative;z-index:6;margin-top:2px;
  min-width:30px;height:30px;padding:0 6px;border-radius:50px;display:grid;place-items:center;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;color:#3a1a00;
  background:linear-gradient(180deg,#FFE873,#FFB100);
  border:2px solid #a86b00;box-shadow:0 4px 8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.6);
}

/* HOVER */
.mbox:hover{z-index:20}
.mbox:hover .cube{transform:scale(1.08) translateZ(30px)}
.mbox:hover .glow{opacity:.95;filter:blur(14px)}
.mbox:hover .front{box-shadow:inset 0 0 22px rgba(0,0,0,.4), inset 0 3px 8px rgba(255,255,255,.28), 0 0 40px var(--c1)}

/* SELECTED */
.mbox.selected{z-index:30}
.mbox.selected .cube{animation:selShake .5s ease-in-out}
.mbox.selected .glow{opacity:1;filter:blur(18px);transform:translate(-50%,-50%) scale(1.2)}
@keyframes selShake{0%,100%{transform:scale(1.14)}20%{transform:scale(1.14) rotate(-4deg)}40%{transform:scale(1.14) rotate(4deg)}60%{transform:scale(1.14) rotate(-3deg)}80%{transform:scale(1.14) rotate(2deg)}}
/* magic circle under selected */
.mbox.selected::after{
  content:"";position:absolute;left:50%;bottom:2px;width:120%;height:40px;transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--c1), transparent 72%);border-radius:50%;
  box-shadow:0 0 30px var(--c1);animation:mcSpin 4s linear infinite;z-index:0;opacity:.9;
}
@keyframes mcSpin{to{transform:translateX(-50%) rotate(360deg)}}

/* ================= FREE DAILY ================= */
.free-daily{
  margin:6px auto 8px;width:max-content;max-width:92%;
  display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:40px;
  background:linear-gradient(180deg, rgba(255,177,0,.22), rgba(126,59,255,.22));
  border:1px solid rgba(255,216,74,.4);
  box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2), 0 0 24px rgba(255,177,0,.25);
  font-weight:700;font-size:clamp(13px,2.6vw,17px);color:var(--gold-2);cursor:pointer;
  animation:floatY 3s ease-in-out infinite;
}
.free-daily .gift-ico{font-size:1.3em;filter:drop-shadow(0 0 6px rgba(255,177,0,.7))}
.free-daily.used{opacity:.55;filter:grayscale(.4);cursor:default}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ================= MENU BUTTONS ================= */
.menu-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:18px auto 6px;padding:0 12px}
.menu-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:40px;
  font-family:'Baloo 2','Kanit',cursive;font-weight:700;font-size:clamp(14px,2.4vw,17px);color:#fff2c9;letter-spacing:.3px;
  background:linear-gradient(180deg, rgba(126,59,255,.55), rgba(58,31,122,.68));
  border:1px solid rgba(255,216,74,.42);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(126,59,255,.3);
  transition:transform .12s, box-shadow .2s, filter .2s}
.menu-btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 9px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25), 0 0 26px rgba(255,177,0,.4)}
.menu-btn:active{transform:translateY(1px) scale(.97)}
.menu-btn .mb-ico{font-size:1.15em;filter:drop-shadow(0 0 6px rgba(255,177,0,.6))}

/* ================= INFO SHEET POPUPS ================= */
.sheet-modal{position:fixed;inset:0;z-index:85;display:none;place-items:center;padding:18px}
.sheet-modal.show{display:grid}
.sheet-dim{position:absolute;inset:0;background:rgba(6,3,18,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .25s}
.sheet-card{position:relative;width:min(560px,94vw);max-height:88vh;overflow:auto;padding:24px 22px 20px;border-radius:24px;
  animation:rmIn .4s cubic-bezier(.2,1.2,.4,1)}
.sheet-card .card-title{margin-bottom:18px;font-size:22px}
.sheet-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;font-size:15px;color:#e9dcff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;
  transition:transform .15s, background .2s;z-index:2}
.sheet-x:hover{background:rgba(255,90,140,.45);transform:rotate(90deg)}
.sheet-note{text-align:center;color:var(--txt-dim);font-size:12px;margin-top:14px}

/* ================= LOWER PANELS ================= */
.panels{max-width:1180px;margin:14px auto;padding:0 clamp(10px,3vw,34px);
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;align-items:stretch}
.info-card{padding:16px 18px}
.card-title{font-family:'Baloo 2','Kanit',cursive;font-size:19px;text-align:center;color:var(--gold-2);
  text-shadow:0 2px 6px rgba(0,0,0,.5);margin-bottom:14px;letter-spacing:.5px}
.card-title .arrow{color:var(--pp-2)}.card-title .flip{}

/* how to play */
.steps{display:flex;align-items:center;justify-content:space-between;gap:4px}
.step{flex:1;text-align:center;animation:floatY 4s ease-in-out infinite}
.step:nth-child(3){animation-delay:.3s}.step:nth-child(5){animation-delay:.6s}.step:nth-child(7){animation-delay:.9s}
.step-art{width:clamp(40px,7vw,58px);height:clamp(40px,7vw,58px);margin:0 auto 6px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden;
  box-shadow:inset 0 0 14px rgba(0,0,0,.4),0 0 14px rgba(126,59,255,.4)}
.art-choose{background:radial-gradient(circle at 40% 30%,#9a52ff,#3a1f7a)}
.art-choose::after{content:"👆";position:absolute;inset:0;display:grid;place-items:center;font-size:1.4em}
.art-shake{background:radial-gradient(circle at 40% 30%,#ff5bb0,#5a1f7a);animation:tinyShake .6s ease-in-out infinite}
.art-shake::after{content:"❓";position:absolute;inset:0;display:grid;place-items:center;font-size:1.3em}
.art-open{background:radial-gradient(circle at 40% 30%,#ffb100,#7a3d00)}
.art-open::after{content:"✨";position:absolute;inset:0;display:grid;place-items:center;font-size:1.3em}
.art-reward{background:radial-gradient(circle at 40% 30%,#b975ff,#3a1f7a)}
.art-reward::after{content:"💎";position:absolute;inset:0;display:grid;place-items:center;font-size:1.3em}
@keyframes tinyShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.step-num{width:20px;height:20px;margin:0 auto 4px;border-radius:50%;background:var(--gold-1);color:#3a1a00;
  font-weight:700;font-size:12px;display:grid;place-items:center}
.step p{font-size:12px;color:var(--txt-dim);font-weight:600}
.step-arrow{color:var(--pp-2);font-size:20px;font-weight:700;opacity:.7}

/* reward table */
.rt-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.rt-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.rt-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rc);box-shadow:0 0 12px var(--rc)}
.rt-row .rt-ico{font-size:18px;filter:drop-shadow(0 0 4px var(--rc))}
.rt-row .rt-name{font-weight:700;color:var(--rc);font-size:14px;flex:1}
.rt-row .rt-chance{font-weight:700;font-size:13px;color:var(--txt);opacity:.85;min-width:38px;text-align:right}
.rt-row .rt-val{display:flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--gold-2);min-width:74px;justify-content:flex-end}
.rt-row.glowpulse{animation:rowGlow 3s ease-in-out infinite}
@keyframes rowGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 16px var(--rc)}}

/* extra chances */
.ec-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.ec-list li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  background:linear-gradient(90deg, rgba(126,59,255,.12), rgba(255,255,255,.02));
  border:1px solid rgba(158,120,255,.18)}
.ec-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(160deg,#7e3bff,#3a1f7a);box-shadow:0 0 14px rgba(126,59,255,.5), inset 0 1px 0 rgba(255,255,255,.2);
  animation:floatY 3.5s ease-in-out infinite}
.ec-list b{display:block;font-size:14px}.ec-list small{color:var(--txt-dim);font-size:12px}

.foot{text-align:center;color:#6f5fa0;font-size:12px;padding:14px 12px 26px}

/* ================= OPENING OVERLAY (cinematic) ================= */
.opening-overlay{position:fixed;inset:0;z-index:60;display:none;place-items:center;overflow:hidden}
.opening-overlay.show{display:grid}
/* opening cinematic: strip background compositing so all GPU budget goes to
   the burst FX (the fog/rays are fully hidden behind the overlay anyway) */
body.fx-mode .bg-fog,body.fx-mode .light-rays,body.fx-mode .starfield,body.fx-mode .particles-layer{display:none}
body.fx-mode .bg-gradient{animation:none}
/* deep, near-opaque dim so gold pops */
.ov-dim{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(46,22,98,.55) 0%, rgba(10,5,26,.93) 45%, rgba(4,2,14,.98) 100%);
  animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ov-stage{position:relative;width:min(460px,90vw);height:min(460px,90vw);display:grid;place-items:center}

/* radiant halo behind the box that charges up */
.ov-stage::before{content:"";position:absolute;width:70%;height:70%;border-radius:50%;
  background:radial-gradient(circle, var(--c1,#ffd84a) 0%, transparent 62%);
  filter:blur(24px);opacity:.15;transition:opacity .4s, transform .4s;z-index:0}
.opening-overlay.charging .ov-stage::before{opacity:.55;transform:scale(1.15);animation:haloPulse .35s ease-in-out infinite}
.opening-overlay.bursting .ov-stage::before{opacity:1;transform:scale(1.8);filter:blur(30px)}
@keyframes haloPulse{0%,100%{transform:scale(1.1)}50%{transform:scale(1.28)}}

/* two rotating magic rings */
.magic-circle{position:absolute;width:104%;height:104%;border-radius:50%;opacity:0;z-index:1;
  background:
    conic-gradient(from 0deg, transparent, var(--c1,#b975ff) 8%, transparent 22%, #ffd84a 42%, transparent 58%, var(--c1,#b975ff) 74%, transparent 90%);
  -webkit-mask:radial-gradient(circle, transparent 40%, #000 43%, #000 49%, transparent 52%);
          mask:radial-gradient(circle, transparent 40%, #000 43%, #000 49%, transparent 52%);
  filter:blur(1px);animation:mcSpin 4s linear infinite}
.magic-circle.on{opacity:.95;transition:opacity .5s}
/* (second counter-rotating ring removed for performance) */

/* golden light rays spraying outward on burst */
.burst-rays{position:absolute;width:150%;height:150%;opacity:0;z-index:1;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,224,120,.85) 2deg, transparent 5deg,
    transparent 11deg, rgba(255,216,74,.6) 13deg, transparent 16deg,
    transparent 24deg, rgba(255,240,180,.7) 26deg, transparent 29deg,
    transparent 40deg, rgba(255,216,74,.55) 42deg, transparent 45deg);
  -webkit-mask:radial-gradient(circle, #000 6%, rgba(0,0,0,.6) 30%, transparent 60%);
          mask:radial-gradient(circle, #000 6%, rgba(0,0,0,.6) 30%, transparent 60%);
  animation:rays 12s linear infinite}
.burst-rays.on{opacity:1;transition:opacity .35s}

/* vertical light column that shoots up from the chest */
.light-column{position:absolute;left:50%;bottom:44%;width:34%;height:0;transform:translateX(-50%);
  z-index:2;pointer-events:none;
  background:linear-gradient(to top, rgba(255,240,180,.95), rgba(255,216,74,.5) 40%, transparent);
  filter:blur(6px);border-radius:50% 50% 0 0/60% 60% 0 0;opacity:0}
.opening-overlay.bursting .light-column{animation:columnUp .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes columnUp{0%{height:0;opacity:0}20%{opacity:1}100%{height:150%;opacity:.85}}

.fx-canvas{position:absolute;inset:-40%;width:180%;height:180%;pointer-events:none;z-index:3}

/* ---- the opening chest ---- */
.opening-box{position:relative;width:46%;height:46%;transform-style:preserve-3d;z-index:4;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.opening-box .ob-base,.opening-box .ob-lid{position:absolute;left:0;width:100%;overflow:hidden}
/* rich dark chest body with gold bands */
.opening-box .ob-base{bottom:0;height:60%;border-radius:8px 8px 12px 12px;
  border:3px solid var(--frame,#ffcf5a);border-top:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(145deg, var(--f-mid,#6a2fc0) 0%, var(--f-dk,#2a0f5a) 75%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.75), inset 0 2px 4px rgba(255,255,255,.15), 0 0 45px var(--c1,#9a52ff)}
/* vertical gold bands + keyhole */
.opening-box .ob-base::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:16%;transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,.25), var(--frame,#ffcf5a) 20%, #fff6c4 50%, var(--frame,#ffcf5a) 80%, rgba(0,0,0,.25));
  box-shadow:0 0 10px var(--c1)}
.opening-box .ob-base::after{content:"";position:absolute;left:50%;top:26%;width:18%;height:18%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle at 40% 35%, #fff7cc, #ffb100 65%, #7a4d00);
  box-shadow:0 0 16px 3px #ffd84a, inset 0 -2px 3px rgba(0,0,0,.4);z-index:3}
/* gold-topped lid */
.opening-box .ob-lid{top:0;height:44%;transform-origin:bottom center;border-radius:12px 12px 4px 4px;
  border:3px solid var(--frame,#ffcf5a);border-bottom:none;
  background:
    linear-gradient(180deg, #fff2c0 0%, var(--frame,#ffcf5a) 22%, var(--f-lt,#9a52ff) 55%, var(--f-mid,#5a1fa8) 100%);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.4), 0 0 26px var(--c1,#9a52ff);z-index:4}
.opening-box .ob-lid::before{content:"";position:absolute;left:50%;top:22%;width:14%;height:14%;transform:translateX(-50%) rotate(45deg);
  background:radial-gradient(circle,#fff6c4,#ffb100);box-shadow:0 0 10px #ffd84a}
/* inner glow revealed as lid opens */
.opening-box .ob-glow{position:absolute;left:50%;top:40%;width:70%;height:40%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle, #fff6c4, var(--c1,#ffd84a) 45%, transparent 70%);
  filter:blur(6px);opacity:0;z-index:2}

/* anticipation: fast shudder + brightening */
.opening-box.charge{animation:obCharge .5s ease-in-out}
@keyframes obCharge{0%,100%{transform:translateX(0) scale(1)}
  20%{transform:translateX(-3px) scale(1.02)}40%{transform:translateX(3px) scale(1.03)}
  60%{transform:translateX(-2px) scale(1.04)}80%{transform:translateX(2px) scale(1.05)}}
.opening-box.shake{animation:obShake .09s linear 8}
@keyframes obShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-7px) rotate(-4deg)}75%{transform:translateX(7px) rotate(4deg)}}
/* pop: lid flies open, inner light blooms, whole chest recoils */
.opening-box.pop .ob-lid{animation:lidOpen .55s cubic-bezier(.5,-0.5,.25,1.5) forwards}
@keyframes lidOpen{0%{transform:rotateX(0) translateY(0)}100%{transform:rotateX(-135deg) translateY(-42%)}}
.opening-box.pop .ob-glow{animation:innerGlow 1s ease-out forwards}
@keyframes innerGlow{0%{opacity:0;transform:translateX(-50%) scale(.4)}30%{opacity:1}100%{opacity:.9;transform:translateX(-50%) scale(1.6)}}
.opening-box.pop .ob-base{animation:baseKick .5s ease-out}
@keyframes baseKick{0%{transform:translateY(0)}30%{transform:translateY(6px) scaleY(.94)}100%{transform:translateY(0)}}

/* screen flash + shake */
.flash-layer{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%, #fff 0%, #fff6d8 40%, rgba(255,240,180,.6) 70%, transparent)}
.flash-layer.flash{animation:flashAnim .55s ease-out}
@keyframes flashAnim{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.shakescreen{animation:screenShake .45s ease-in-out}
@keyframes screenShake{0%,100%{transform:translate(0,0)}15%{transform:translate(-10px,5px) rotate(-.4deg)}35%{transform:translate(9px,-6px) rotate(.4deg)}55%{transform:translate(-6px,-4px)}75%{transform:translate(5px,5px) rotate(.2deg)}}

/* ================= REWARD MODAL ================= */
.reward-modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:16px}
.reward-modal.show{display:grid}
.rm-dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%, rgba(22,12,52,.95), rgba(5,2,15,.985));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s}
.rm-rays{position:absolute;left:50%;top:42%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,216,74,.16) 4deg,transparent 8deg,transparent 16deg,rgba(185,117,255,.14) 20deg,transparent 24deg);
  animation:rays 26s linear infinite;pointer-events:none}
.confetti-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.rm-card{position:relative;z-index:3;width:min(420px,92vw);padding:26px 24px 24px;text-align:center;
  border-radius:26px;animation:rmIn .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes rmIn{from{transform:translateY(40px) scale(.85);opacity:0}to{transform:none;opacity:1}}
.rm-banner{margin:-46px auto 6px;width:max-content;padding:10px 34px;border-radius:14px;
  background:linear-gradient(180deg,#8a46ff,#5a25c0);border:2px solid rgba(255,255,255,.3);
  box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 30px rgba(138,70,255,.6);
  clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
.rm-banner span{font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:24px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.rm-sub{color:var(--txt-dim);font-size:13px;margin-bottom:8px}
.rm-chest{position:relative;width:180px;height:132px;margin:8px auto 2px;display:grid;place-items:center}
.rm-lightbeam{position:absolute;left:50%;top:-30%;width:130%;height:150%;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 60%, rgba(255,216,74,.85),transparent 65%);
  filter:blur(6px);animation:beamPulse 2s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.rm-reward-float{font-size:82px;z-index:3;line-height:1;
  filter:drop-shadow(0 0 22px var(--c1,#ffd84a));animation:rewardFloat 2.4s ease-in-out infinite}
@keyframes rewardFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.rm-rarity{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:2px;font-size:15px;margin-top:6px;
  color:var(--c1,#b06bff);text-shadow:0 0 12px var(--c1)}
.rm-amount{font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:44px;line-height:1;margin:2px 0 16px;
  background:linear-gradient(180deg,#FFF6C4,#FFD84A,#FFB100);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.claim-btn{width:100%;padding:15px;border-radius:16px;font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:20px;color:#4a2600;
  background:linear-gradient(180deg,#FFE873,#FFB100);border:2px solid #a86b00;
  box-shadow:0 8px 0 #a86b00,0 12px 20px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.6);
  animation:claimPulse 1.4s ease-in-out infinite;transition:transform .1s}
.claim-btn:hover{filter:brightness(1.06)}
.claim-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #a86b00,0 4px 10px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.6)}
@keyframes claimPulse{0%,100%{box-shadow:0 8px 0 #a86b00,0 12px 20px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.6),0 0 0 rgba(255,216,74,0)}50%{box-shadow:0 8px 0 #a86b00,0 12px 26px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.6),0 0 30px rgba(255,216,74,.7)}}

/* pot line + collect/continue choice */
.rm-pot{font-family:'Baloo 2','Kanit',cursive;font-weight:700;font-size:15px;color:var(--txt-dim);margin:-6px 0 14px}
.rm-pot b{color:var(--gold-2);font-family:'Chakra Petch',sans-serif;font-size:1.15em;margin:0 2px}
.rm-actions2{display:flex;gap:10px;width:100%}
.collect-btn,.continue-btn{flex:1;padding:14px 8px;border-radius:15px;font-family:'Baloo 2','Kanit',cursive;
  font-weight:800;font-size:clamp(15px,3.6vw,18px);transition:transform .1s,filter .15s;line-height:1.1}
.collect-btn:active,.continue-btn:active{transform:translateY(4px)}
.collect-btn{color:#4a2600;background:linear-gradient(180deg,#FFE873,#FFB100);border:2px solid #a86b00;
  box-shadow:0 6px 0 #a86b00,0 10px 16px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.6)}
.collect-btn:active{box-shadow:0 2px 0 #a86b00,0 4px 8px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.6)}
.continue-btn{color:#fff;background:linear-gradient(180deg,#9a52ff,#6a2fc0);border:2px solid #3a1078;
  box-shadow:0 6px 0 #3a1078,0 10px 16px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.25);
  animation:continuePulse 1.4s ease-in-out infinite}
.continue-btn:active{box-shadow:0 2px 0 #3a1078,0 4px 8px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.25)}
@keyframes continuePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.restart-btn{background:linear-gradient(180deg,#ff7a9c,#e0365f)!important;color:#fff!important;border-color:#8a1130!important;font-size:clamp(15px,4vw,18px);
  box-shadow:0 8px 0 #8a1130,0 12px 20px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.3)!important;animation:none!important}

/* ================= SUMMARY POPUP (after Collect) ================= */
.info-banner{cursor:default}
.summary-modal{position:fixed;inset:0;z-index:88;display:none;place-items:center;padding:18px}
.summary-modal.show{display:grid}
.sm-dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%, rgba(22,12,52,.9), rgba(5,2,15,.97));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s}
.sm-card{position:relative;z-index:3;width:min(380px,92vw);padding:26px 24px 22px;text-align:center;border-radius:26px;animation:rmIn .5s cubic-bezier(.2,1.3,.4,1)}
.sm-title{font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:22px;color:var(--gold-2);margin-bottom:6px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.sm-ico{font-size:68px;line-height:1;margin:6px 0;filter:drop-shadow(0 0 22px var(--c1,#ffd84a));animation:rewardFloat 2.4s ease-in-out infinite}
.sm-amount{font-family:'Baloo 2','Kanit',cursive;font-weight:800;font-size:42px;line-height:1;margin:6px 0 2px;
  background:linear-gradient(180deg,#FFF6C4,#FFD84A,#FFB100);-webkit-background-clip:text;background-clip:text;color:transparent}
.sm-amount .sm-unit{font-size:18px;-webkit-text-fill-color:var(--gold-2);color:var(--gold-2)}
.sm-note{color:var(--txt-dim);font-size:13px;margin:4px 0 18px}
.sm-card .claim-btn{width:100%}

/* ================= MINI MODAL (no keys) ================= */
.mini-modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:16px}
.mini-modal.show{display:grid}
.mm-dim{position:absolute;inset:0;background:rgba(6,3,18,.8);backdrop-filter:blur(3px);animation:fadeIn .25s}
.mm-card{position:relative;width:min(340px,90vw);padding:26px 22px;text-align:center;border-radius:22px;animation:rmIn .4s ease}
.mm-ico{font-size:44px;filter:drop-shadow(0 0 12px rgba(255,177,0,.7));margin-bottom:6px}
.mm-card h3{font-family:'Baloo 2','Kanit',cursive;font-size:22px;color:var(--gold-2);margin-bottom:6px}
.mm-card p{color:var(--txt-dim);font-size:14px;margin-bottom:18px}
.mm-actions{display:flex;gap:10px}
.mm-btn{flex:1;padding:12px;border-radius:13px;font-weight:700;font-size:15px;transition:transform .1s}
.mm-btn:active{transform:scale(.95)}
.mm-btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--txt)}
.mm-btn.gold{background:linear-gradient(180deg,#FFE873,#FFB100);color:#4a2600;box-shadow:0 4px 12px rgba(255,177,0,.4)}

/* ================= TOAST ================= */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:95;
  padding:12px 22px;border-radius:40px;background:linear-gradient(180deg,rgba(70,44,140,.95),rgba(30,18,72,.95));
  border:1px solid var(--glass-brd);color:var(--txt);font-weight:600;font-size:14px;
  box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= RESPONSIVE ================= */
/* ---- small phones: minor tightening (base layout already the app frame) ---- */
@media(max-width:760px){
  .hud{gap:8px;padding:8px 12px}
  .coin-panel{padding:6px 12px 6px 8px}
  .coin-count{font-size:17px}
  .mute-btn{width:38px;height:38px}
  .title-wrap{padding:2px 8px 0}
  .game-title{font-size:clamp(30px,9.2vw,46px)}
  .subtitle-ribbon{font-size:12px;padding:4px 16px;margin-top:4px}
  .stage{padding:6px 8px 12px}
  .badge{min-width:26px;height:26px;font-size:13px;border-width:2px}
  .ladder-hud{margin:0 auto 8px;padding:6px 16px;font-size:12px}
  .free-daily{padding:8px 18px;font-size:13px}
  .menu-row{gap:10px}
  .menu-btn{padding:11px 22px;font-size:15px}
  .step-arrow{display:none}
}
@media(max-width:400px){
  .game-title{font-size:clamp(26px,9vw,40px)}
  .subtitle-ribbon{font-size:11px}
  .menu-btn{padding:10px 18px;font-size:14px}
}
/* how-to steps still wrap nicely inside the popup on small screens */
@media(max-width:460px){
  .steps{flex-wrap:wrap;gap:10px}
  .step{flex:0 0 40%}
}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}