* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{
  --bg:#0b1020;
  --glass: rgba(18,24,48,.62);
  --glass-strong: rgba(14,18,38,.86);
  --stroke: rgba(255,255,255,.14);
  --txt:#f2f5ff; --muted:#9aa6c8;
  --c1:#21f3ff;
  --c2:#b06bff;
  --c3:#ff4d8d;
  --gold:#ffd23a;
  --good:#3ddc84; --bad:#ff5470;
  --grad: linear-gradient(135deg,var(--c1),var(--c2) 60%,var(--c3));
  --shadow: 0 10px 34px rgba(0,0,0,.45);
  --r: 18px;
}
html,body{height:100%;overflow:hidden;background:var(--bg);}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--txt);
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none;}
#ui > *{pointer-events:auto;}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));}
.screen.center{gap:14px;}
.overlay{background:radial-gradient(120% 100% at 50% 0%, rgba(10,14,30,.55), rgba(6,8,18,.86));backdrop-filter:blur(7px);}
.hidden{display:none !important;}
.muted{color:var(--muted);}

.logo{font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(26px,11.5vw,60px);line-height:1;letter-spacing:.5px;
  text-align:center;white-space:nowrap;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));}

.tagline{color:var(--muted);font-size:15px;margin-top:-2px;}
.tagline b{color:var(--c1);}
.loader-title{font-family:'Baloo 2';font-weight:800;font-size:clamp(24px,9vw,42px);margin-top:16px;text-align:center;white-space:nowrap;}

.loader-sub{color:var(--muted);margin-top:6px;}
.loader-marble{width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #cfe0ff 30%, #6aa9ff 62%, #2a5bd0);
  box-shadow:0 10px 30px rgba(40,90,255,.5), inset -8px -10px 18px rgba(0,0,40,.4);
  animation:bob 1.1s ease-in-out infinite;}
.loader-marble.small{width:34px;height:34px;}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.04)}}

.btn{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;color:#fff;cursor:pointer;
  border:none;border-radius:16px;padding:14px 20px;background:rgba(255,255,255,.10);
  border:1px solid var(--stroke);backdrop-filter:blur(6px);transition:transform .08s, filter .15s, background .15s;
  box-shadow:var(--shadow);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn:active{transform:translateY(2px) scale(.98);filter:brightness(.95);}
.btn.primary{background:var(--grad);border:none;color:#0a0d1a;text-shadow:none;
  box-shadow:0 8px 0 rgba(0,0,0,.22), 0 14px 30px rgba(80,120,255,.4);}
.btn.primary:active{box-shadow:0 3px 0 rgba(0,0,0,.22), 0 8px 18px rgba(80,120,255,.4);}
.btn.ghost{background:rgba(255,255,255,.06);}
.btn.big{font-size:20px;padding:16px 26px;}
.btn.huge{font-size:30px;padding:20px 64px;border-radius:22px;letter-spacing:1px;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* A pulsing button moves under the finger, so a tap that starts on it can end off it
   and the browser never fires the click. This pad keeps the touch target still. */
.btn.huge::after,.chest-cta::after{content:'';position:absolute;inset:-6%;}
.btn.danger{color:var(--bad);}
.btn.reward-ad{background:linear-gradient(135deg,#ffb02e,#ff7a2e);color:#2a1500;}
.btn.reward-ad small{font-size:12px;opacity:.8;}
.btn small{font-weight:600;}
.menu-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.icon-btn{font-family:'Baloo 2';font-weight:700;width:46px;height:46px;border-radius:14px;border:1px solid var(--stroke);
  background:var(--glass);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;}
.icon-btn:active{transform:scale(.94);}

.menu-coins{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  display:flex;align-items:center;gap:7px;font-family:'Baloo 2';font-weight:800;font-size:17px;
  background:var(--glass);border:1px solid var(--stroke);padding:7px 13px;border-radius:999px;backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);}
#menu .menu-panel{margin-top:0;}
.menu-foot{color:var(--muted);font-size:13px;margin-top:8px;text-align:center;}
.menu-foot b{color:var(--gold);}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;}
.dot.gold{background:radial-gradient(circle at 32% 30%,#fff6c4,var(--gold) 55%,#c98e00);box-shadow:0 0 10px rgba(255,210,58,.6);}
.badge{position:absolute;top:6px;right:8px;width:11px;height:11px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg);}

#hud{position:fixed;inset:0;pointer-events:none;}
#hud .icon-btn,#hud .boost-btn{pointer-events:auto;}
.hud-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:0;right:0;display:flex;gap:6px;align-items:center;
  justify-content:space-between;flex-wrap:nowrap;
  padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));}
.hud-stats{display:flex;gap:6px;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;}
.hud-pill{display:flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--stroke);
  padding:9px 15px;border-radius:999px;font-family:'Baloo 2';font-weight:700;font-size:16px;backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);}
.hud-pill .unit{color:var(--muted);font-size:12px;margin-left:1px;}
.hud-pill.coin{color:var(--gold);}
#pauseBtn{flex:0 0 auto;}
.speed-wrap{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 56px);left:50%;transform:translateX(-50%);
  width:min(240px,60vw);height:6px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;}
#speedBar{height:100%;width:0%;background:linear-gradient(90deg,var(--c1),var(--c3));transition:width .08s;}
#boostFlare{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);}
#boostFlare.on{animation:flare .5s linear infinite;opacity:1;}
@keyframes flare{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

#powerupChips{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 70px);
  display:flex;flex-direction:column;gap:6px;}
.pu-chip{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--stroke);
  border-radius:12px;padding:6px 10px;font-size:13px;font-weight:600;backdrop-filter:blur(8px);overflow:hidden;position:relative;}
.pu-chip .ico{font-size:15px;}
.pu-chip .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--c1);}
.control-hint{position:absolute;bottom:calc(150px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:13px;background:var(--glass);padding:7px 14px;border-radius:999px;border:1px solid var(--stroke);
  backdrop-filter:blur(6px);max-width:min(80vw,420px);text-align:center;transition:opacity .4s;opacity:0;
  pointer-events:none;z-index:30;}
.boost-btn{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));
  width:96px;height:96px;border-radius:50%;background:var(--grad);color:#0a0d1a;font-family:'Baloo 2';font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.22),0 14px 28px rgba(80,120,255,.4);
  border:none;}
.boost-btn:active{transform:scale(.93);}

.panel{width:min(420px,92vw);background:var(--glass-strong);border:1px solid var(--stroke);border-radius:24px;
  padding:24px;display:flex;flex-direction:column;gap:12px;align-items:stretch;backdrop-filter:blur(16px);box-shadow:var(--shadow);
  animation:pop .28s cubic-bezier(.2,1.3,.5,1);
  min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;}
.panel > *{flex-shrink:0;}
@keyframes pop{from{transform:scale(.86) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.panel h2{font-family:'Baloo 2';font-weight:800;font-size:30px;text-align:center;}
.panel p{text-align:center;color:var(--muted);font-size:14px;}

.win-panel .stars{display:flex;justify-content:center;gap:10px;font-size:54px;color:#3a4060;}
.win-panel .stars span{transform:scale(.4);opacity:.2;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .35s,color .35s;}
.win-panel .stars span.on{color:var(--gold);opacity:1;transform:scale(1);text-shadow:0 0 22px rgba(255,210,58,.7);}
.reward-row{display:flex;gap:12px;justify-content:center;}
.reward{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:16px;padding:12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;}
.reward b{font-family:'Baloo 2';font-size:26px;}
.reward small{color:var(--muted);font-size:12px;}
.lose-sub{text-align:center;color:var(--muted);margin-top:-4px;}

#shop{justify-content:flex-start;background:radial-gradient(120% 100% at 50% 0%, rgba(10,14,30,.84), rgba(6,8,18,.96));backdrop-filter:blur(9px);}
.shop-head{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:max(12px,env(safe-area-inset-top)) 14px 12px;background:linear-gradient(180deg,rgba(8,11,24,.9),transparent);z-index:2;}
.shop-tabs{display:flex;gap:6px;background:var(--glass);border-radius:14px;padding:5px;border:1px solid var(--stroke);}
.tab{font-family:'Baloo 2';font-weight:700;border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:10px;cursor:pointer;font-size:15px;}
.tab.active{background:var(--grad);color:#0a0d1a;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:min(720px,94vw);
  margin-top:78px;padding-bottom:30px;overflow-y:auto;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);
  overscroll-behavior:contain;touch-action:pan-y;}
.card{background:var(--glass);border:1px solid var(--stroke);border-radius:18px;padding:14px;display:flex;flex-direction:column;
  align-items:center;gap:8px;position:relative;overflow:hidden;backdrop-filter:blur(8px);}
.card .swatch{width:72px;height:72px;border-radius:50%;box-shadow:inset -8px -10px 16px rgba(0,0,30,.4),0 8px 18px rgba(0,0,0,.4);}
.card .cname{font-family:'Baloo 2';font-weight:700;font-size:16px;}
.card .rarity{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:2px 8px;border-radius:99px;}
.card .price{display:flex;align-items:center;gap:5px;font-family:'Baloo 2';font-weight:700;color:var(--gold);}
.card .cbtn{width:100%;padding:9px;border-radius:12px;border:none;font-family:'Baloo 2';font-weight:700;cursor:pointer;font-size:14px;}
.cbtn.buy{background:var(--grad);color:#0a0d1a;}
.cbtn.equip{background:rgba(255,255,255,.1);color:#fff;border:1px solid var(--stroke);}
.cbtn.equipped{background:var(--good);color:#06210f;}
.cbtn.locked{background:rgba(255,255,255,.06);color:var(--muted);}
.card.owned-glow{border-color:rgba(255,255,255,.3);}
.card .ribbon{position:absolute;top:10px;right:-26px;transform:rotate(38deg);background:var(--c3);color:#fff;font-size:10px;font-weight:800;padding:2px 28px;}

.daily-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.daily-cell{background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:14px;padding:10px 4px;text-align:center;font-size:12px;color:var(--muted);}
.daily-cell b{display:block;font-family:'Baloo 2';font-size:16px;color:var(--gold);}
.daily-cell.claimed{opacity:.5;}
.daily-cell.today{border-color:var(--c1);background:rgba(33,243,255,.12);color:#fff;box-shadow:0 0 0 2px rgba(33,243,255,.25);}
.daily-cell.chest b{color:var(--c2);}
.daily-streak{text-align:center;color:var(--muted);font-size:14px;}
.daily-streak b{color:var(--c1);font-family:'Baloo 2';font-size:18px;}

.settings-panel .row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:15px;}
.settings-panel .row.col{flex-direction:column;align-items:stretch;gap:8px;}
.settings-panel input[type=range]{width:100%;}
.seg{display:flex;gap:4px;background:rgba(255,255,255,.06);border-radius:12px;padding:4px;border:1px solid var(--stroke);}
.seg button{flex:1;border:none;background:transparent;color:var(--muted);padding:9px;border-radius:9px;font-weight:700;cursor:pointer;font-family:'Baloo 2';}
.seg button.active{background:var(--grad);color:#0a0d1a;}
input[type=checkbox]{width:46px;height:26px;appearance:none;background:rgba(255,255,255,.15);border-radius:99px;position:relative;cursor:pointer;transition:background .2s;}
input[type=checkbox]:checked{background:var(--good);}
input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;}
input[type=checkbox]:checked::after{transform:translateX(20px);}

.ad-box{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:'Baloo 2';font-weight:700;font-size:18px;color:var(--muted);}

.toast{position:fixed;bottom:calc(150px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--glass-strong);border:1px solid var(--stroke);padding:12px 20px;border-radius:14px;font-weight:600;
  backdrop-filter:blur(10px);opacity:0;transition:opacity .25s, transform .25s;z-index:30;text-align:center;
  max-width:min(80vw,420px);pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.banner{position:fixed;top:24%;left:50%;transform:translate(-50%,-50%) scale(.8);text-align:center;z-index:30;opacity:0;
  pointer-events:none;max-width:90vw;
  transition:opacity .3s, transform .3s;pointer-events:none;}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.banner .b-new{font-family:'Baloo 2';font-weight:800;font-size:14px;letter-spacing:3px;color:var(--c1);}
.banner .b-title{font-family:'Baloo 2';font-weight:800;font-size:clamp(19px,6vw,46px);white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 30px rgba(80,120,255,.4);}
.combo-pop{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 102px);left:50%;
  transform:translate(-50%,-50%);z-index:25;pointer-events:none;white-space:nowrap;
  font-family:'Baloo 2';font-weight:800;color:var(--gold);text-shadow:0 3px 12px rgba(0,0,0,.6);opacity:0;}
.combo-pop.show{animation:combo .7s ease-out;}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-10%) scale(.6)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:0;transform:translate(-50%,-95%) scale(.95)}}

/* No plate behind it: a tight dark halo keeps the mark readable over a white world
   without putting a box on top of the maze. */
.game-logo{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));
  font-family:'Baloo 2';font-weight:800;font-size:15px;letter-spacing:.5px;opacity:.78;line-height:1;pointer-events:none;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 .5px 1px #000) drop-shadow(0 0 7px rgba(0,0,0,.55));}


#goalArrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:999px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:0;transition:opacity .2s;pointer-events:none;}
#goalArrow.show{opacity:1;}
.ga-arrow{font-size:20px;line-height:1;color:#2bff9e;transition:transform .12s linear;
  filter:drop-shadow(0 0 5px rgba(43,255,158,.9));}

.hud-pill.time.overtime{color:#fff;background:rgba(225,40,40,.9);border-color:rgba(255,120,120,.8);animation:otp .8s ease-in-out infinite;}
@keyframes otp{50%{background:rgba(255,30,30,1);box-shadow:0 0 18px rgba(255,40,40,.7);}}

body.goldrush #ui::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 200px 50px rgba(255,200,40,.5);animation:goldpulse 1s ease-in-out infinite;}
@keyframes goldpulse{0%,100%{opacity:.55}50%{opacity:1}}

.screen-exit{animation:screenOut .34s ease forwards;pointer-events:none;}
@keyframes screenOut{to{opacity:0;transform:scale(1.07);filter:blur(7px);}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid var(--stroke);
  border-top:3px solid var(--rc,#888);border-radius:16px;padding:10px 12px 14px;display:flex;flex-direction:column;
  align-items:center;gap:8px;position:relative;overflow:hidden;backdrop-filter:blur(8px);}
.card-rarity{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--rc);align-self:flex-start;}
.card-disc{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.16),rgba(0,0,0,.3));box-shadow:inset 0 0 18px rgba(0,0,0,.45);}
.swatch-canvas{width:92px;height:92px;border-radius:50%;}
.card .swatch{width:84px;height:84px;border-radius:50%;}
.card .cname{font-family:'Baloo 2';font-weight:700;font-size:15px;text-align:center;line-height:1.1;}
.card .cbtn{width:100%;padding:10px;border-radius:11px;border:none;font-family:'Baloo 2';font-weight:700;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;}
.card.equipped-card{border-color:var(--good);box-shadow:0 0 0 1px var(--good),0 10px 24px rgba(0,0,0,.4);}
.card.rar-legendary{box-shadow:0 0 22px rgba(255,176,46,.25);}
.cbtn.buy{background:var(--grad);color:#0a0d1a;}
.cbtn.equip{background:rgba(255,255,255,.12);color:#fff;border:1px solid var(--stroke);}
.cbtn.equipped{background:var(--good);color:#06210f;}
.cbtn.locked{background:rgba(255,255,255,.06);color:var(--muted);}
.cbtn .dot{width:13px;height:13px;}

@media (max-width:520px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
  .btn.huge{padding:18px 48px;font-size:26px;}
  .card-disc{width:84px;height:84px;} .swatch-canvas{width:78px;height:78px;}
}
@media (min-width:760px){ .control-hint{font-size:14px;} }

.menu-panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(440px,92vw);
  background:var(--glass-strong);border:1px solid var(--stroke);border-radius:28px;padding:26px 22px 18px;
  backdrop-filter:blur(18px);box-shadow:var(--shadow);animation:pop .36s cubic-bezier(.2,1.3,.5,1);
  min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;}
.menu-panel > *{flex-shrink:0;}
.menu-panel .menu-row{width:100%;}
.menu-panel .menu-row .btn{flex:1;padding:13px 8px;}
.menu-panel .tagline{margin-top:-4px;}

.game-logo{opacity:.88;}

/* Keep the top bar on one line however narrow or oddly shaped the window is. */
#hudLevelPill{min-width:0;}
#hudLevelPill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

@media (max-width:560px){
  .hud-pill{padding:7px 11px;font-size:14px;gap:5px;}
  .hud-pill .unit{font-size:11px;}
  .icon-btn{width:40px;height:40px;border-radius:12px;font-size:16px;}
  #goalArrow{width:38px;height:38px;}
  .ga-arrow{font-size:17px;}
}
@media (max-width:420px){
  .hud-top{gap:4px;}
  .hud-stats{gap:4px;}
  .hud-pill{padding:6px 9px;font-size:13px;gap:4px;}
  .hud-pill .dot{width:11px;height:11px;}
  .icon-btn{width:36px;height:36px;border-radius:11px;font-size:15px;}
  #goalArrow{width:34px;height:34px;}
  .ga-arrow{font-size:15px;}
  .boost-btn{width:80px;height:80px;font-size:14px;}
  .game-logo{font-size:17px;}
}

.card-perk{font-size:11px;font-weight:700;color:#ffd23a;background:rgba(255,210,58,.12);border:1px solid rgba(255,210,58,.3);
  padding:3px 9px;border-radius:8px;display:flex;gap:4px;align-items:center;}

.reward.mission{flex-direction:row;gap:8px;color:var(--good);font-weight:700;align-items:center;}
.reward.mission b{font-family:'Baloo 2';font-size:15px;color:#bafadd;}
.chest-cta{background:linear-gradient(135deg,#ffd23a,#ff8a3d);color:#2a1500;font-size:18px;animation:pulse 1.5s ease-in-out infinite;}

.chest-panel{align-items:stretch;}
.chest-info{text-align:center;font-size:16px;color:var(--muted);}
.chest-info b{color:var(--gold);font-family:'Baloo 2';font-size:20px;}
.chest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.chest-cell{aspect-ratio:1;border:none;border-radius:16px;background:linear-gradient(180deg,#3a2a66,#241a44);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.3),inset 0 2px 6px rgba(255,255,255,.1);transition:transform .1s;}
.chest-cell:active{transform:translateY(2px);}
.chest-cell .chest-emoji{font-size:clamp(28px,9vw,38px);}
.chest-cell .chest-emoji.pop{animation:chestpop .45s cubic-bezier(.2,1.7,.4,1);}
@keyframes chestpop{0%{transform:scale(.3) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
.chest-cell b{font-family:'Baloo 2';color:var(--gold);font-size:16px;}
.chest-cell.opened{background:linear-gradient(180deg,#e7c45f,#a9842f);box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 22px rgba(255,210,58,.5);}
.chest-cell.revealed{opacity:.45;}
.chest-cell.revealed small{color:var(--muted);font-size:11px;}

#shop{justify-content:flex-start;background:radial-gradient(120% 100% at 50% 0%, rgba(10,14,30,.84), rgba(6,8,18,.96));backdrop-filter:blur(9px);}
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(166px,1fr));width:min(920px,96vw);gap:14px;
  margin-top:74px;padding:0 4px 30px;overflow-y:auto;max-height:calc(100dvh - 86px);align-content:start;
  overscroll-behavior:contain;touch-action:pan-y;}
.card{overflow:visible;padding:12px 12px 14px;gap:9px;min-width:0;}
.card-disc{width:84px;height:84px;}
.swatch-canvas{width:80px;height:80px;}
.card .cname{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.card-perk{font-size:10.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card .cbtn{margin-top:auto;}

@media (max-width:520px){ .shop-grid{grid-template-columns:repeat(auto-fill,minmax(46vw,1fr));width:96vw;} .card-disc{width:78px;height:78px;} .swatch-canvas{width:74px;height:74px;} }

.game-logo{font-size:20px;opacity:.92;letter-spacing:.6px;
  filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 1px 1.5px #000) drop-shadow(0 0 9px rgba(0,0,0,.55));}
.panel-brand{font-family:'Baloo 2';font-weight:800;font-size:22px;text-align:center;letter-spacing:.5px;line-height:1;margin-bottom:2px;}


.perk-chip{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 70px);
  display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(255,210,58,.24),rgba(255,138,61,.18));
  border:1px solid rgba(255,210,58,.55);border-radius:12px;padding:6px 11px;font-size:12.5px;font-weight:700;
  color:#ffe6a6;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.35);z-index:8;white-space:nowrap;}
.perk-chip .pk-ico{font-size:15px;}
#powerupChips{top:calc(max(12px,env(safe-area-inset-top)) + 112px);}

.tut-hint{position:fixed;left:50%;bottom:max(26%,150px);transform:translateX(-50%);background:var(--glass-strong);
  border:1px solid var(--stroke);padding:14px 26px;border-radius:16px;font-family:'Baloo 2';font-weight:700;
  font-size:clamp(17px,4.6vw,26px);backdrop-filter:blur(10px);box-shadow:var(--shadow);opacity:0;
  transition:opacity .3s;z-index:12;pointer-events:none;text-align:center;}
.tut-hint.show{opacity:1;animation:tutpulse 1.3s ease-in-out infinite;}
@keyframes tutpulse{0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.45)}50%{box-shadow:0 0 26px rgba(33,243,255,.55)}}

.legal-panel{width:min(560px,94vw);max-height:88dvh;}
.legal-body{overflow-y:auto;text-align:left;font-size:13px;line-height:1.55;color:var(--muted);
  padding:4px 10px 4px 2px;display:flex;flex-direction:column;gap:8px;min-height:0;
  flex:1 1 auto;overscroll-behavior:contain;touch-action:pan-y;}
.legal-body h3{font-family:'Baloo 2';font-weight:700;font-size:17px;color:var(--txt);margin-top:6px;}
.legal-body p b{color:var(--txt);font-weight:600;}
.legal-date{font-size:11px;opacity:.7;margin-top:4px;}

@media (max-height:700px){
  .screen{padding:10px 12px;}
  .panel{padding:16px 18px;gap:9px;border-radius:20px;}
  .panel h2{font-size:24px;}
  .btn{font-size:16px;padding:11px 16px;}
  .btn.big{font-size:17px;padding:12px 20px;}
  .btn.huge{font-size:24px;padding:14px 46px;}
  .win-panel .stars{font-size:40px;}
  .reward{padding:9px;}
  .reward b{font-size:22px;}
  .menu-panel{gap:10px;padding:18px 20px 14px;border-radius:22px;}
  .settings-panel .row{font-size:14px;}
  .seg button{padding:7px;}
  .legal-panel{max-height:100%;}
}

@media (max-height:540px){
  .panel{padding:12px 14px;gap:7px;border-radius:16px;}
  .panel h2{font-size:20px;}
  .btn{font-size:15px;padding:9px 13px;border-radius:13px;}
  .btn.big{font-size:16px;padding:10px 16px;}
  .btn.huge{font-size:20px;padding:11px 34px;}
  .win-panel .stars{font-size:30px;}
  .reward b{font-size:19px;}
  .menu-panel{gap:8px;padding:14px 16px 12px;}
  .logo{font-size:clamp(28px,7vh,46px);}
  .tagline{font-size:13px;}
  .settings-panel .row{font-size:13px;}
  .daily-grid{gap:6px;}
  .chest-grid{gap:8px;}
}

@media (max-width:560px){
  .shop-head{padding:max(8px,env(safe-area-inset-top)) 10px 8px;gap:6px;}
  .shop-tabs{flex:0 1 auto;min-width:0;padding:3px;border-radius:11px;}
  .tab{font-size:12px;padding:6px 9px;}
  .shop-head .hud-pill{padding:6px 10px;font-size:13px;}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;width:96vw;
    margin-top:60px;max-height:calc(100dvh - 68px);}
  .card{padding:8px 8px 10px;gap:6px;border-radius:14px;}
  .card-rarity{font-size:8.5px;letter-spacing:.4px;}
  .card-disc{width:62px;height:62px;}
  .swatch-canvas{width:58px;height:58px;}
  .card .cname{font-size:12px;}
  .card-perk{font-size:9px;padding:2px 6px;border-radius:6px;}
  .cbtn{font-size:12px;padding:7px 8px;border-radius:10px;}
  .cbtn .dot{width:10px;height:10px;}
  .tab{font-size:13px;padding:6px 11px;}
  .shop-tabs{padding:4px;border-radius:12px;}
  .combo-pop{font-size:20px !important;}
}
@media (max-width:380px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;}
  .card-disc{width:54px;height:54px;}
  .swatch-canvas{width:50px;height:50px;}
  .card .cname{font-size:11px;}
  .cbtn{font-size:11px;padding:6px 6px;}
}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-7px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#dfe7f7 45%,#9fb0d0);
  border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.5);transition:transform .1s;}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#dfe7f7 45%,#9fb0d0);
  border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.5);}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);}

/* ---- wordmark ------------------------------------------------------------
   A marble rolls across the mark and each letter it reaches springs up into
   place behind it, then one highlight sweeps the finished word. The in-game
   mark plays it once on the first level and afterwards only repeats the same
   letter wave, small and slow, so it never competes with the maze.
   Letters carry the gradient themselves, offset to their own slice of the
   word (--cx / --ww), because a transformed letter is dropped by a gradient
   that is clipped on its parent. --t is where the letter sits along the
   mark, which is also when the marble gets to it.                          */
.wm{white-space:nowrap;}
/* the rolling marble anchors to the mark, so the static ones need a position of
   their own — .game-logo already has one and must keep it */
.logo.wm,.loader-title.wm,.panel-brand.wm{position:relative;}
.wm .w{display:inline-block;position:relative;}
.wm .c{display:inline-block;font-style:normal;position:relative;will-change:transform,opacity;}
.wm .grad .c{background:var(--grad);background-size:var(--ww,100%) 100%;
  background-position:calc(-1 * var(--cx,0px)) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.wm .c::after{content:attr(data-t);position:absolute;left:0;top:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);
  background-size:340% 100%;background-position:190% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;}

/* the marble that leads the letters in */
.wm::before{content:'';position:absolute;left:0;bottom:-.06em;width:.3em;height:.3em;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff,#d6e6ff 34%,#6aa9ff 68%,#2a5bd0);
  box-shadow:0 .04em .14em rgba(20,50,140,.55);opacity:0;pointer-events:none;}

@keyframes wmSheen{0%{opacity:0;background-position:190% 0}
  14%{opacity:1}86%{opacity:1}100%{opacity:0;background-position:-120% 0}}
@keyframes wmPop{
  0%  {opacity:0;transform:translateY(.7em) scale(.72) rotate(-7deg)}
  50% {opacity:1;transform:translateY(-.11em) scale(1.08) rotate(2deg)}
  74% {opacity:1;transform:translateY(.035em) scale(.985) rotate(-.6deg)}
  100%{opacity:1;transform:none}}
@keyframes wmWave{
  0%  {transform:none}
  38% {transform:translateY(-.11em)}
  100%{transform:none}}
@keyframes wmCross{
  0%  {opacity:0;transform:translateX(-1.3em) rotate(0deg)}
  9%  {opacity:1}
  84% {opacity:1}
  100%{opacity:0;transform:translateX(calc(var(--wmw,10em) + .5em)) rotate(760deg)}}

.wm.play .c{animation:wmPop .5s cubic-bezier(.16,1.45,.38,1) both;
  animation-delay:calc(var(--t,0) * .58s);}
.wm.play .c::after{animation:wmSheen .8s ease-in-out both;
  animation-delay:calc(.62s + var(--t,0) * .34s);}
.wm.play::before{animation:wmCross .78s cubic-bezier(.32,.04,.36,1) both;}

/* the quiet repeat: the same wave, no marble, no scale, barely there */
.wm.idle .c{animation:wmWave .52s ease-in-out both;animation-delay:calc(var(--t,0) * .42s);}
.wm.idle .c::after{animation:wmSheen .9s ease-in-out both;
  animation-delay:calc(var(--t,0) * .42s);opacity:0;}
.wm.idle .c::after{animation-name:wmSheenSoft;}
@keyframes wmSheenSoft{0%{opacity:0;background-position:190% 0}
  20%{opacity:.5}80%{opacity:.5}100%{opacity:0;background-position:-120% 0}}

.loader-title.wm .c{animation:wmPop .52s cubic-bezier(.16,1.45,.38,1) both;
  animation-delay:calc(.15s + var(--t,0) * .6s);}
.loader-title.wm .c::after{animation:wmSheen 1.4s ease-in-out infinite;
  animation-delay:calc(.9s + var(--t,0) * .3s);}
.loader-title.wm::before{animation:wmCross .8s cubic-bezier(.32,.04,.36,1) .15s both;}

@media (prefers-reduced-motion:reduce){
  .wm .c,.wm .c::after,.wm::before{animation:none !important;opacity:1 !important;transform:none !important;}
  .wm .c::after,.wm::before{opacity:0 !important;}
}