/* ============================================================
   PUNCH MASTER - UI
   Look: an arcade cabinet. Dark brushed metal, neon tubes, amber
   LCD score displays, a control deck with a big START button, bolts
   in the panel corners. Fonts: Bungee (signs, numbers, Latin) and
   Rubik (text, Latin + Cyrillic) - both SIL OFL, see fonts/FONTS.txt.
   ============================================================ */

@font-face{
  font-family:'Rubik';
  src:url('../fonts/rubik-latin-cyrillic.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Bungee';
  src:url('../fonts/bungee-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --u:min(4.1vmin,25px);
  --bg:#0b0e17;
  --metal:#1a2132;
  --metal2:#252e45;
  --edge:#3a4560;
  --text:#e8f0ff;
  --dim:#8fa0c0;
  --cyan:#39e6ff;
  --pink:#ff3d7a;
  --amber:#ffb02e;
  --green:#39ff88;
  --purple:#8a66d8;
  --red:#ff3b5c;
  --glass:#05080f;
  --disp:'Bungee','Rubik','Segoe UI',system-ui,sans-serif;
  --body:'Rubik','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --hud-extra:0px;
}

html,body{
  width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:var(--body);font-weight:700;color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;}
button:disabled{cursor:default;}
.hide{display:none !important;}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle;}

/* the game fills the screen on mobile and is capped to 2:1 on wide desktops (Playgama rule) */
#app{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;max-width:200vh;overflow:hidden;background:#101828;font-size:var(--u);
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(5,8,18,.55) 100%);}
#scanlines{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;}

.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:50;}
.screen.show{display:flex;}
.modal-screen{background:rgba(5,8,18,.78);z-index:100;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);}

/* ============================ LCD PLATES ============================ */
.lcd{
  position:relative;display:flex;align-items:center;gap:calc(var(--u)*.4);
  background:linear-gradient(180deg,#02040a,#0a1020);
  border:2px solid var(--edge);border-radius:calc(var(--u)*.4);
  padding:calc(var(--u)*.25) calc(var(--u)*.6);
  box-shadow:inset 0 0 calc(var(--u)*.8) rgba(57,230,255,.12),0 2px 0 #000,0 0 0 2px #0a0e18;
}
.lcd b{font-family:var(--disp);font-weight:400;color:var(--amber);font-size:calc(var(--u)*1.1);
  text-shadow:0 0 calc(var(--u)*.5) rgba(255,176,46,.65);letter-spacing:.04em;line-height:1;}
.lcd small{font-size:calc(var(--u)*.42);color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-weight:800;}
.lcd .ic{font-size:calc(var(--u)*1.1);}
.coin-plate.bump{animation:bump .3s;}
@keyframes bump{40%{transform:scale(1.14);}}

/* ============================ LOADER / MARQUEE ============================ */
#loader{background:radial-gradient(ellipse at 50% 40%,#1a2240,#05070f 75%);z-index:300;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.1);width:min(86vw,calc(var(--u)*20));}
.loader-glove{font-size:calc(var(--u)*3.4);animation:jab 1s infinite;filter:drop-shadow(0 0 calc(var(--u)*.6) var(--cyan));}
@keyframes jab{0%,100%{transform:translateX(-8px) rotate(-6deg);}45%{transform:translateX(14px) rotate(4deg) scale(1.12);}}
.bar{width:100%;height:calc(var(--u)*.9);background:var(--glass);border:2px solid var(--edge);border-radius:99px;padding:3px;}
.bar-fill{height:100%;width:0;border-radius:99px;transition:width .25s;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 10px,transparent 10px 13px);box-shadow:0 0 12px var(--cyan);}
.loader-text{font-size:calc(var(--u)*.62);color:var(--dim);letter-spacing:.06em;text-align:center;min-height:1.2em;}

.marquee{display:flex;flex-direction:column;align-items:center;font-family:var(--disp);line-height:.95;text-align:center;}
.mq-top{font-size:calc(var(--u)*2.9);color:#e8fbff;text-shadow:0 0 6px var(--cyan),0 0 16px var(--cyan),0 0 34px var(--cyan);letter-spacing:.05em;animation:flick 6s infinite;}
.mq-bot{font-size:calc(var(--u)*1.75);color:#ffe6f3;letter-spacing:.34em;margin-top:calc(var(--u)*.2);padding:calc(var(--u)*.12) calc(var(--u)*.35) calc(var(--u)*.12) calc(var(--u)*.7);
  border:calc(var(--u)*.16) solid var(--pink);border-radius:calc(var(--u)*.4);
  text-shadow:0 0 6px var(--pink),0 0 16px var(--pink);box-shadow:0 0 14px var(--pink),inset 0 0 12px rgba(255,61,122,.5);}
.marquee.big .mq-top{font-size:calc(var(--u)*3.6);}
.marquee.big .mq-bot{font-size:calc(var(--u)*2.1);}
@keyframes flick{0%,18%,22%,62%,64%,100%{opacity:1;}20%,63%{opacity:.55;}}

/* ============================ BUTTONS ============================ */
.btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.4);
  width:100%;min-height:calc(var(--u)*2.3);padding:calc(var(--u)*.45) calc(var(--u)*.9);
  font-family:var(--body);font-weight:900;font-size:calc(var(--u)*.85);letter-spacing:.07em;text-transform:uppercase;
  color:#04110a;background:linear-gradient(180deg,#7dffb3,var(--green) 45%,#16b863);
  border:2px solid #0b0e17;border-bottom-width:calc(var(--u)*.3);border-radius:calc(var(--u)*.55);
  box-shadow:0 0 calc(var(--u)*.7) rgba(57,255,136,.4),inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform .08s,filter .15s;
}
.btn:active:not(:disabled){transform:translateY(calc(var(--u)*.18));border-bottom-width:calc(var(--u)*.12);}
.btn:disabled{filter:grayscale(.85) brightness(.6);}
.btn .ic{font-size:calc(var(--u)*1.2);}
.btn-blue{color:#001419;background:linear-gradient(180deg,#a6f4ff,var(--cyan) 45%,#13a9c4);box-shadow:0 0 calc(var(--u)*.7) rgba(57,230,255,.4),inset 0 2px 0 rgba(255,255,255,.55);}
.btn-ad{color:#1c1000;flex-wrap:wrap;gap:0 calc(var(--u)*.5);background:linear-gradient(180deg,#ffd98a,var(--amber) 45%,#d17d00);box-shadow:0 0 calc(var(--u)*.7) rgba(255,176,46,.4),inset 0 2px 0 rgba(255,255,255,.55);}
.btn-ad .ad-main{font-size:calc(var(--u)*.85);}
.btn-ad .ad-sub{font-size:calc(var(--u)*.5);font-weight:800;opacity:.75;flex-basis:100%;text-align:center;letter-spacing:.1em;}
.btn-ghost,.btn-toggle{color:var(--text);background:linear-gradient(180deg,#2d3750,#1c2335);border-color:#0b0e17;box-shadow:inset 0 2px 0 rgba(255,255,255,.12);}
.btn-toggle{min-width:0;}
.btn-toggle.on,.btn-ghost.on{color:#001419;background:linear-gradient(180deg,#a6f4ff,var(--cyan));box-shadow:0 0 calc(var(--u)*.6) rgba(57,230,255,.5);}
.btn-ghost.off{color:var(--dim);}
.btn-mini{width:auto;min-height:calc(var(--u)*1.7);padding:calc(var(--u)*.2) calc(var(--u)*.7);font-size:calc(var(--u)*.7);}
.btn-skip{margin-top:calc(var(--u)*.2);}
.round-btn{
  width:calc(var(--u)*2.1);height:calc(var(--u)*2.1);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#3a4666,#171d2c);border:2px solid #0b0e17;
  box-shadow:0 0 0 2px var(--edge),0 3px 0 #000;font-size:calc(var(--u)*1.1);
}
.round-btn:active{transform:translateY(2px);}
.x-btn{
  width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#ff6f8f,#b01838);border:2px solid #0b0e17;font-size:calc(var(--u)*1);flex:none;
  box-shadow:0 3px 0 #000;
}
.x-btn.corner{position:absolute;top:calc(var(--u)*.5);right:calc(var(--u)*.5);z-index:3;}
.x-btn:disabled{filter:grayscale(1);opacity:.5;}

/* ============================ PANELS ============================ */
.panel{
  position:relative;width:min(92vw,calc(var(--u)*19));max-height:94%;overflow:auto;
  display:flex;flex-direction:column;gap:calc(var(--u)*.6);align-items:stretch;
  padding:calc(var(--u)*3) calc(var(--u)*1) calc(var(--u)*1);
  background:
    radial-gradient(circle at 12px 12px,#7b86a3 0 3px,#222a3f 4px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 12px) 12px,#7b86a3 0 3px,#222a3f 4px 5px,transparent 6px),
    radial-gradient(circle at 12px calc(100% - 12px),#7b86a3 0 3px,#222a3f 4px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#7b86a3 0 3px,#222a3f 4px 5px,transparent 6px),
    linear-gradient(180deg,#252e45,#161c2c);
  border:3px solid var(--edge);border-radius:calc(var(--u)*.8);
  box-shadow:0 0 0 3px #05070d,0 10px 40px rgba(0,0,0,.7),0 0 calc(var(--u)*1.5) rgba(57,230,255,.12);
  animation:slam .28s cubic-bezier(.2,1.4,.5,1);
}
.panel.wide{width:min(94vw,calc(var(--u)*30));}
@keyframes slam{0%{transform:scale(.8) translateY(20px);opacity:0;}100%{transform:none;opacity:1;}}
.marquee-bar{
  position:absolute;top:calc(var(--u)*.7);left:50%;transform:translateX(-50%);max-width:calc(100% - var(--u)*4.4);
  font-family:var(--disp);font-size:calc(var(--u)*1.15);letter-spacing:.08em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#e8fbff;background:var(--glass);border:2px solid var(--cyan);border-radius:calc(var(--u)*.4);padding:calc(var(--u)*.3) calc(var(--u)*.9);
  text-shadow:0 0 8px var(--cyan);box-shadow:0 0 14px rgba(57,230,255,.55),inset 0 0 10px rgba(57,230,255,.25);
}
.marquee-bar.neon-green{border-color:var(--green);color:#eafff2;text-shadow:0 0 8px var(--green);box-shadow:0 0 14px rgba(57,255,136,.55),inset 0 0 10px rgba(57,255,136,.25);}
.marquee-bar.neon-red{border-color:var(--red);color:#fff0f3;text-shadow:0 0 8px var(--red);box-shadow:0 0 14px rgba(255,59,92,.55),inset 0 0 10px rgba(255,59,92,.25);}
.panel-text{text-align:center;font-size:calc(var(--u)*.8);line-height:1.35;color:var(--text);font-weight:600;}
.panel-note{text-align:center;font-size:calc(var(--u)*.55);color:var(--dim);font-weight:600;min-height:1.1em;}
.panel-note.credits{font-size:calc(var(--u)*.46);opacity:.8;}
.big-ic{font-size:calc(var(--u)*4);align-self:center;filter:drop-shadow(0 0 10px rgba(57,255,136,.6));}
.row2{display:flex;gap:calc(var(--u)*.5);}
.row2 .btn{flex:1;font-size:calc(var(--u)*.7);}
.set-cap{font-size:calc(var(--u)*.55);color:var(--dim);letter-spacing:.14em;text-transform:uppercase;}
.toggle-row{display:flex;gap:calc(var(--u)*.4);}
.toggle-row .btn{font-size:calc(var(--u)*.65);padding-inline:calc(var(--u)*.3);}
.lose-reason{text-align:center;font-size:calc(var(--u)*.95);color:#fff;font-weight:800;padding:calc(var(--u)*.2) 0;}
.lose-hint{text-align:center;font-size:calc(var(--u)*.55);color:var(--dim);}

/* ============================ HUD ============================ */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;}
#hud button{pointer-events:auto;}
.hud-top{
  position:absolute;left:0;right:0;top:calc(var(--safe-t) + var(--hud-extra) + 6px);
  display:flex;align-items:stretch;gap:calc(var(--u)*.4);padding:0 calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px);pointer-events:none;
}
.lvl-plate{flex-direction:column;justify-content:center;gap:2px;padding-inline:calc(var(--u)*.8);}
.lvl-plate b{font-size:calc(var(--u)*1.35);}
.goal-plate{flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:calc(var(--u)*.2);padding:calc(var(--u)*.3) calc(var(--u)*.7);}
.goal-line{font-size:calc(var(--u)*.78);color:var(--cyan);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px rgba(57,230,255,.6);}
.seg-bar{height:calc(var(--u)*.5);background:#0b1426;border-radius:3px;overflow:hidden;}
.seg-fill{height:100%;width:0;transition:width .35s;background:var(--green);box-shadow:0 0 10px var(--green);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 13px);mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 13px);}
.loc-line{font-size:calc(var(--u)*.42);color:var(--dim);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hud-top .coin-plate{align-self:center;}
.hud-bottom{
  position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 8px);
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*.5);padding:0 calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px);pointer-events:none;
}
.stat-pill b{font-size:calc(var(--u)*1.3);}
.stat-pill.warn b{color:var(--red);text-shadow:0 0 10px var(--red);animation:pulseWarn .6s infinite;}
.stat-pill.lit{box-shadow:0 0 0 3px var(--green),0 0 18px var(--green);}
@keyframes pulseWarn{50%{transform:scale(1.12);}}
.charge-hint{display:flex;align-items:center;gap:calc(var(--u)*.3);font-size:calc(var(--u)*.55);color:var(--dim);letter-spacing:.12em;opacity:.85;pointer-events:none;margin-inline:auto;}
.charge-hint .ic{font-size:calc(var(--u)*.9);}
.hint-bubble{
  position:absolute;left:50%;top:calc(var(--safe-t) + var(--hud-extra) + 6px + var(--u)*4.4);transform:translateX(-50%);
  max-width:min(88%,calc(var(--u)*22));text-align:center;font-size:calc(var(--u)*.7);font-weight:800;color:#fff;
  background:rgba(5,8,18,.9);border:2px solid var(--amber);border-radius:calc(var(--u)*.5);padding:calc(var(--u)*.4) calc(var(--u)*.8);
  box-shadow:0 0 14px rgba(255,176,46,.45);animation:hintIn .3s ease-out;pointer-events:none !important;
}
@keyframes hintIn{0%{transform:translateX(-50%) scale(.5);opacity:0;}100%{transform:translateX(-50%) scale(1);opacity:1;}}

/* combo plate: a vertical LCD under the goal display */
.combo-plate{
  position:absolute;right:calc(var(--safe-r) + 8px);top:calc(var(--safe-t) + var(--hud-extra) + 6px + var(--u)*3.6);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:calc(var(--u)*4.4);pointer-events:none !important;
  background:linear-gradient(180deg,#02040a,#150a1e);border:2px solid var(--pink);border-radius:calc(var(--u)*.45);padding:calc(var(--u)*.3) calc(var(--u)*.7) calc(var(--u)*.4);
  box-shadow:0 0 16px rgba(255,61,122,.6),inset 0 0 12px rgba(255,61,122,.25);animation:comboIn .25s cubic-bezier(.2,1.6,.5,1);
}
.combo-plate small{font-size:calc(var(--u)*.45);letter-spacing:.2em;color:#ffb3cc;font-weight:800;}
.combo-plate b{font-family:var(--disp);font-weight:400;font-size:calc(var(--u)*2.1);line-height:1;color:#fff;text-shadow:0 0 10px var(--pink),0 0 24px var(--pink);}
.combo-plate.pop b{animation:bump .3s;}
.combo-bar{width:100%;height:calc(var(--u)*.3);background:#2a0f1c;border-radius:9px;overflow:hidden;}
.combo-bar i{display:block;height:100%;width:100%;background:var(--pink);box-shadow:0 0 8px var(--pink);}
@keyframes comboIn{0%{transform:scale(.4);opacity:0;}100%{transform:none;opacity:1;}}

/* charge gauge at the pointer */
#chargeRing{position:fixed;z-index:20;pointer-events:none;width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(var(--cyan) var(--v,0deg),rgba(5,8,18,.55) 0);
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 57%);mask:radial-gradient(circle,transparent 55%,#000 57%);
  filter:drop-shadow(0 0 8px var(--cyan));}
#chargeRing i{display:none;}
#chargeRing.full{background:conic-gradient(var(--amber) 360deg,var(--amber) 0);filter:drop-shadow(0 0 14px var(--amber));animation:ringPulse .28s infinite;}
@keyframes pulseS{50%{transform:scale(1.08);}}
@keyframes ringPulse{50%{transform:translate(-50%,-50%) scale(1.14);}}

/* ============================ POPUPS ============================ */
#popups{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden;}
.pop{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--disp);color:#fff;font-size:calc(var(--u)*1);white-space:nowrap;letter-spacing:.03em;
  text-shadow:0 0 6px currentColor,0 2px 0 #000,0 0 16px rgba(0,0,0,.8);
  animation:popUp 1.05s ease-out forwards;
}
.pop.gold{color:var(--amber);}
.pop.big{font-size:calc(var(--u)*1.5);color:var(--cyan);}
.pop.bad{color:var(--red);}
.pop.toast{font-size:calc(var(--u)*.9);}
@keyframes popUp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  25%{opacity:1;transform:translate(-50%,-60%) scale(1.2);}
  60%{transform:translate(-50%,-95%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-150%) scale(.86);}
}
#flash{position:absolute;inset:0;z-index:14;pointer-events:none;background:#cfefff;opacity:0;transition:opacity .18s;}
#flash.on{opacity:.34;transition:opacity 0s;}

/* ============================ TUTORIAL ============================ */
#tutorial{position:absolute;inset:0;z-index:60;pointer-events:none;}
.tut-hand{position:absolute;font-size:calc(var(--u)*2.6);transform:translate(-30%,10%);animation:tap 1s infinite;filter:drop-shadow(0 0 8px var(--cyan));}
.tut-hand.hold{animation:hold 1.3s infinite;}
@keyframes tap{0%,100%{margin-top:0;}50%{margin-top:calc(var(--u)*-.7);}}
@keyframes hold{0%{margin-top:0;transform:translate(-30%,10%) scale(1);}60%,100%{margin-top:calc(var(--u)*.3);transform:translate(-30%,10%) scale(.82);}}
.tut-ring{position:absolute;width:calc(var(--u)*5);height:calc(var(--u)*5);border:3px solid var(--cyan);border-radius:50%;transform:translate(-50%,-50%);animation:ringPulse 1s infinite;}
.tut-card{
  position:absolute;left:50%;bottom:calc(var(--safe-b) + var(--u)*3.6);transform:translateX(-50%);pointer-events:auto;
  width:min(94vw,calc(var(--u)*26));display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*.3) calc(var(--u)*.7);align-items:center;
  background:linear-gradient(180deg,#252e45,#161c2c);border:3px solid var(--cyan);border-radius:calc(var(--u)*.7);padding:calc(var(--u)*.6) calc(var(--u)*.8);
  box-shadow:0 0 22px rgba(57,230,255,.4),0 8px 20px rgba(0,0,0,.6);
}
.tut-head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;}
.tut-title{font-family:var(--disp);font-size:calc(var(--u)*.7);color:var(--cyan);letter-spacing:.1em;}
.tut-dots{display:flex;gap:6px;}
.tut-dots i{width:calc(var(--u)*.6);height:calc(var(--u)*.6);border-radius:50%;background:#0b1426;border:2px solid var(--edge);}
.tut-dots i.on{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green);}
.tut-text{font-size:calc(var(--u)*.78);line-height:1.3;color:#fff;font-weight:700;}
.tut-text.warn{color:var(--red);}
.btn-skip.btn{width:auto;min-height:calc(var(--u)*1.8);font-size:calc(var(--u)*.7);}
.tut-card .btn-skip{margin:0;}

/* ============================ MENU ============================ */
#menu{flex-direction:column;justify-content:space-between;align-items:stretch;}
.menu-bg{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,18,.82) 0,rgba(5,8,18,.15) 24%,rgba(5,8,18,0) 52%,rgba(5,8,18,.7) 80%,rgba(5,8,18,.95) 100%);}
.menu-top{position:relative;display:flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--safe-t) + var(--hud-extra) + 8px) calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px);}
.hi-plate{flex-direction:column;align-items:flex-start;gap:2px;}
.menu-top-right{margin-left:auto;display:flex;gap:calc(var(--u)*.5);}
.menu-sign{position:absolute;left:0;right:0;top:calc(var(--safe-t) + var(--hud-extra) + var(--u)*3.8);display:flex;justify-content:center;pointer-events:none;}
.deck{
  position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:calc(var(--u)*.8);
  padding:calc(var(--u)*2.2) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);
  background:linear-gradient(180deg,#2a3452,#141a2a 40%,#0b0e17);border-top:4px solid #4a5780;
  box-shadow:0 -6px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12);
}
.deck::before{content:'';position:absolute;left:0;right:0;top:calc(var(--u)*.55);height:3px;background:repeating-linear-gradient(90deg,var(--cyan) 0 14px,transparent 14px 20px);opacity:.55;filter:drop-shadow(0 0 6px var(--cyan));}
.deck-side{display:flex;gap:calc(var(--u)*.5);justify-content:center;flex-wrap:wrap;}
.key{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.2);
  width:calc(var(--u)*4.6);height:calc(var(--u)*4.4);font-size:calc(var(--u)*.52);font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  background:linear-gradient(180deg,#3a4666,#1c2335);border:2px solid #05070d;border-bottom-width:calc(var(--u)*.3);border-radius:calc(var(--u)*.5);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 0 0 2px #2c3652;
}
.key .ic{font-size:calc(var(--u)*1.8);}
.key:active{transform:translateY(calc(var(--u)*.18));border-bottom-width:calc(var(--u)*.12);}
.key span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}
.badge{position:absolute;top:-8px;right:-8px;width:calc(var(--u)*1.3);height:calc(var(--u)*1.3);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--disp);font-size:calc(var(--u)*.8);color:#fff;background:var(--pink);border:2px solid #05070d;box-shadow:0 0 10px var(--pink);animation:pulseS 1s infinite;}
.btn-play{
  position:relative;width:calc(var(--u)*8.4);height:calc(var(--u)*8.4);margin-top:calc(var(--u)*-4.4);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 35% 28%,#8dffb6,#22d070 45%,#0c7a3a 100%);
  border:4px solid #05070d;box-shadow:0 0 0 6px #2c3652,0 0 0 9px #05070d,0 8px 0 9px #0a0e18,0 0 40px rgba(57,255,136,.55),inset 0 -8px 16px rgba(0,60,20,.5),inset 0 6px 10px rgba(255,255,255,.5);
  animation:breathe 1.8s infinite;
}
.btn-play:active{transform:translateY(5px) scale(.97);}
.play-ring{position:absolute;inset:-18px;border-radius:50%;border:3px dashed rgba(57,255,136,.55);animation:spin 14s linear infinite;pointer-events:none;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes breathe{0%,100%{filter:brightness(1);}50%{filter:brightness(1.18);}}
.play-txt{font-family:var(--disp);font-size:calc(var(--u)*1.7);color:#032410;text-shadow:0 2px 0 rgba(255,255,255,.4);letter-spacing:.03em;}
.play-ticket{font-size:calc(var(--u)*.55);color:#032410;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.35);padding:2px calc(var(--u)*.6);border-radius:99px;}
.play-ticket b{font-family:var(--disp);font-weight:400;}

/* ============================ WIN / LOSE ============================ */
.stars{display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u)*.3);margin-top:calc(var(--u)*.3);}
.star{font-size:calc(var(--u)*2.6);filter:grayscale(1) brightness(.35);transition:filter .2s;}
.star.big{font-size:calc(var(--u)*3.4);}
.star.on{filter:drop-shadow(0 0 10px #ffd23f);animation:starIn .4s cubic-bezier(.2,1.8,.5,1) both;}
@keyframes starIn{0%{transform:scale(0) rotate(-60deg);}100%{transform:scale(1) rotate(0);}}
.tickets{display:flex;gap:calc(var(--u)*.5);justify-content:center;flex-wrap:wrap;}
.ticket{
  flex:1;min-width:calc(var(--u)*4.6);display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(var(--u)*.4) calc(var(--u)*.4);
  background:linear-gradient(180deg,#02040a,#0a1020);border:2px solid var(--edge);border-radius:calc(var(--u)*.4);box-shadow:inset 0 0 12px rgba(57,230,255,.12);
}
.ticket .ic{font-size:calc(var(--u)*1.1);}
.ticket b{font-family:var(--disp);font-weight:400;font-size:calc(var(--u)*1.2);color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.6);}
.ticket.combo b{color:var(--pink);text-shadow:0 0 8px rgba(255,61,122,.7);}
.ticket small{font-size:calc(var(--u)*.42);color:var(--dim);letter-spacing:.12em;text-transform:uppercase;}

/* ============================ SHOP ============================ */
.sheet-screen{z-index:100;background:rgba(5,8,18,.9);padding:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px);}
.sheet{
  width:min(100%,calc(var(--u)*46));height:100%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#252e45,#131827);border:3px solid var(--edge);border-radius:calc(var(--u)*.8);overflow:hidden;
  box-shadow:0 0 0 3px #05070d,0 0 calc(var(--u)*2) rgba(57,230,255,.15);
}
.sheet-head{display:flex;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.5) calc(var(--u)*.7);background:#0b0e17;border-bottom:3px solid var(--edge);}
.sheet-title{font-family:var(--disp);font-size:calc(var(--u)*1.3);color:#e8fbff;text-shadow:0 0 10px var(--cyan);margin-right:auto;letter-spacing:.06em;}
.shop-tabs{display:flex;gap:calc(var(--u)*.35);padding:calc(var(--u)*.45) calc(var(--u)*.6) 0;overflow-x:auto;background:#10151f;scrollbar-width:none;}
.shop-tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:calc(var(--u)*4.4);padding:calc(var(--u)*.3) calc(var(--u)*.5) calc(var(--u)*.35);
  font-size:calc(var(--u)*.55);font-weight:800;color:var(--dim);background:#1a2132;border:2px solid #2a3350;border-bottom:0;border-radius:calc(var(--u)*.5) calc(var(--u)*.5) 0 0;
}
.tab.on{color:#fff;background:linear-gradient(180deg,#34415f,#252e45);border-color:var(--cyan);box-shadow:0 -2px 12px rgba(57,230,255,.4);}
.tab-ico{width:calc(var(--u)*2);height:calc(var(--u)*2);object-fit:contain;}
.tab-n{font-size:calc(var(--u)*.45);color:var(--amber);font-family:var(--disp);}
.shop-body{flex:1;min-height:0;display:flex;gap:calc(var(--u)*.6);padding:calc(var(--u)*.6);border-top:3px solid var(--cyan);}
.shop-preview{flex:0 0 36%;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#0a1020,#05080f);border:2px solid var(--edge);border-radius:calc(var(--u)*.6);overflow:hidden;
  box-shadow:inset 0 0 20px rgba(57,230,255,.12);}
#previewCanvas{flex:1;min-height:0;width:100%;display:block;}
.pv-info{display:flex;flex-direction:column;gap:calc(var(--u)*.35);padding:calc(var(--u)*.5);border-top:2px solid var(--edge);background:#0e1422;}
.pv-rar{align-self:flex-start;font-size:calc(var(--u)*.45);color:#05070d;font-weight:900;padding:1px calc(var(--u)*.6);border-radius:99px;text-transform:uppercase;letter-spacing:.1em;background:var(--dim);}
.pv-name{font-family:var(--disp);font-size:calc(var(--u)*.95);color:#fff;line-height:1.1;}
.pv-note{font-size:calc(var(--u)*.5);color:var(--dim);min-height:1em;font-weight:600;}
.pv-info .btn{min-height:calc(var(--u)*2);font-size:calc(var(--u)*.75);}
.shop-grid{flex:1;min-width:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*5.6),1fr));gap:calc(var(--u)*.5);align-content:start;grid-auto-rows:max-content;padding:2px;touch-action:pan-y;}
.card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(var(--u)*.4) calc(var(--u)*.3) 0;overflow:hidden;
  background:linear-gradient(180deg,#2a3350,#1a2132);border:2px solid #05070d;border-top:calc(var(--u)*.3) solid var(--rar,#8fa3bf);border-radius:calc(var(--u)*.5);
}
.card.sel{box-shadow:0 0 0 2px var(--cyan),0 0 16px rgba(57,230,255,.55);}
.card img{width:78%;aspect-ratio:1;object-fit:contain;}
.c-name{font-size:calc(var(--u)*.5);font-weight:800;text-align:center;line-height:1.1;min-height:2.2em;display:flex;align-items:center;color:var(--text);}
.c-foot{align-self:stretch;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:3px;font-family:var(--disp);font-size:calc(var(--u)*.5);padding:calc(var(--u)*.2) 0;background:#05080f;color:var(--amber);min-height:calc(var(--u)*1.3);}
.c-foot .ic{font-size:calc(var(--u)*.8);}
.c-foot.on{color:#04110a;background:var(--green);}
.c-foot.own{color:var(--cyan);}
.c-foot.ad{color:#ffd98a;}
.c-excl{position:absolute;top:calc(var(--u)*.4);right:2px;font-size:calc(var(--u)*.9);}

/* ============================ DAILY / WHEEL / LEVELS / BOARD ============================ */
.daily-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*.45);}
.day{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:calc(var(--u)*.4) 2px;text-align:center;min-height:calc(var(--u)*4.6);
  background:linear-gradient(180deg,#02040a,#0a1020);border:2px solid var(--edge);border-radius:calc(var(--u)*.45);font-size:calc(var(--u)*.6);position:relative;}
.day small{font-size:calc(var(--u)*.45);color:var(--dim);letter-spacing:.1em;text-transform:uppercase;}
.day .ic{font-size:calc(var(--u)*1.5);}
.day b{font-family:var(--disp);font-weight:400;color:var(--amber);font-size:calc(var(--u)*.7);flex-wrap:wrap;justify-content:center;display:flex;align-items:center;gap:2px;}
.day img{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);object-fit:contain;}
.day.big{grid-column:span 2;border-color:var(--pink);box-shadow:inset 0 0 14px rgba(255,61,122,.3);}
.day.done{opacity:.45;}
.day.done::after{content:'OK';position:absolute;top:2px;right:4px;font-family:var(--disp);font-size:calc(var(--u)*.5);color:var(--green);}
.day.today{border-color:var(--green);box-shadow:0 0 16px rgba(57,255,136,.6),inset 0 0 12px rgba(57,255,136,.25);animation:pulseS 1.1s infinite;}
.day-tag{font-size:calc(var(--u)*.45);color:var(--pink);font-weight:800;}
.daily-actions{display:flex;gap:calc(var(--u)*.5);}
.daily-actions .btn{flex:1;}
.wheel-panel{align-items:center;}
.wheel-wrap{position:relative;width:min(64vw,calc(var(--u)*15),48vh);aspect-ratio:1;align-self:center;}
#wheelCanvas{width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 0 0 5px #05070d,0 0 0 8px var(--edge),0 0 30px rgba(255,61,122,.35);}
.wheel-pin{position:absolute;top:-8px;left:50%;width:calc(var(--u)*1.5);height:calc(var(--u)*1.9);transform:translateX(-50%);background:var(--green);border:2px solid #05070d;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 0 8px var(--green));}
.wheel-result{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#10162a,#05080f);border:3px solid var(--amber);box-shadow:0 0 24px rgba(255,176,46,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font-size:calc(var(--u)*.7);animation:slam .35s cubic-bezier(.2,1.6,.5,1);padding:8px;}
.wheel-result img{width:45%;aspect-ratio:1;object-fit:contain;}
.wheel-result b{font-family:var(--disp);font-weight:400;color:var(--amber);font-size:calc(var(--u)*1.2);}
.wheel-result small{font-size:calc(var(--u)*.5);color:var(--dim);}
.wheel-side{display:flex;flex-direction:column;gap:calc(var(--u)*.5);width:100%;}
.levels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*.45);overflow-y:auto;max-height:68vh;padding:4px;touch-action:pan-y;}
.lv{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:calc(var(--u)*.95);color:var(--text);
  background:linear-gradient(180deg,#3a4666,#1c2335);border:2px solid #05070d;border-bottom-width:calc(var(--u)*.28);border-radius:calc(var(--u)*.45);}
.lv.locked{opacity:.45;}
.lv.locked .ic{font-size:calc(var(--u)*1.2);}
.lv.done{color:#04110a;background:linear-gradient(180deg,#7dffb3,#16b863);}
.lv.skipped{background:linear-gradient(180deg,#5a6580,#2c3652);}
.lv.boss{color:#fff;background:linear-gradient(180deg,#ff6f8f,#b01838);}
.lv.cur{color:#001419;background:linear-gradient(180deg,#a6f4ff,var(--cyan));box-shadow:0 0 14px var(--cyan);}
.lv-st{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-family:var(--body);font-size:calc(var(--u)*.4);color:#ffd23f;line-height:1;}
.board-list{display:flex;flex-direction:column;gap:calc(var(--u)*.35);max-height:56vh;overflow-y:auto;}
.board-row{display:flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.3) calc(var(--u)*.6);background:#05080f;border:2px solid var(--edge);border-radius:calc(var(--u)*.4);}
.board-row.me{border-color:var(--green);box-shadow:0 0 12px rgba(57,255,136,.4);}
.br-rank{font-family:var(--disp);color:var(--amber);min-width:2ch;}
.br-av{width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%;overflow:hidden;background:#1c2335;display:flex;align-items:center;justify-content:center;flex:none;}
.br-av img{width:100%;height:100%;object-fit:cover;}
.br-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(var(--u)*.7);}
.br-score{font-family:var(--disp);color:var(--amber);font-size:calc(var(--u)*.8);}

/* ============================ OVERLAYS ============================ */
#adWait{background:rgba(5,8,18,.94);z-index:200;}
#blurPause{background:rgba(5,8,18,.95);z-index:400;}
#loadError{z-index:130;}
.overlay-inner{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);color:#fff;font-size:calc(var(--u)*.8);text-align:center;}
.pause-ic{font-size:calc(var(--u)*3);animation:breathe 1.6s infinite;}
.pause-title{font-family:var(--disp);font-size:calc(var(--u)*1.6);color:var(--cyan);text-shadow:0 0 14px var(--cyan);}
.pause-hint{font-size:calc(var(--u)*.62);opacity:.8;}
#app.locked > *:not(#blurPause){pointer-events:none !important;}
.mock-ad{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font:900 22px/1 monospace;}

/* ============================ RESPONSIVE ============================ */
/* wide screens: bigger deck keys, shop wider, daily in one row */
@media (min-aspect-ratio:5/4){
  .daily-grid{grid-template-columns:repeat(8,minmax(0,1fr));}
  .day.big{grid-column:span 2;}
  .levels-grid{grid-template-columns:repeat(10,1fr);}
  .wheel-panel{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-top:calc(var(--u)*3.2);}
  .wheel-panel .wheel-side{width:auto;flex:1;min-width:calc(var(--u)*9);max-width:calc(var(--u)*12);}
  .menu-sign{top:calc(var(--safe-t) + var(--hud-extra) + 6px);}
  .menu-sign .marquee,.menu-sign .marquee.big{flex-direction:row;gap:calc(var(--u)*.8);align-items:center;}
  .menu-sign .mq-top{font-size:calc(var(--u)*2.3);}
  .menu-sign .mq-bot{font-size:calc(var(--u)*1.3);margin-top:0;}
}
/* portrait: preview over the list; the deck keys are a 3-row stack */
@media (max-aspect-ratio:1/1){
  .shop-body{flex-direction:column;}
  .shop-preview{flex:0 0 auto;height:36%;flex-direction:row;}
  #previewCanvas{flex:1;height:100%;width:auto;min-width:0;}
  .pv-info{border-top:none;border-left:2px solid var(--edge);width:46%;justify-content:center;}
  .deck{grid-template-columns:repeat(5,1fr);row-gap:calc(var(--u)*.7);align-items:center;}
  .deck .btn-play{grid-column:1 / -1;justify-self:center;}
  .deck-side{display:contents;}
  .key{width:100%;max-width:calc(var(--u)*4.8);height:calc(var(--u)*4.2);justify-self:center;}
  .levels-grid{grid-template-columns:repeat(5,1fr);}
}
/* low landscape phones */
@media (orientation:landscape) and (max-height:500px){
  :root{--u:min(6.4vmin,23px);}
  .panel{padding:calc(var(--u)*2.6) calc(var(--u)*.8) calc(var(--u)*.6);gap:calc(var(--u)*.35);}
  .menu-sign .mq-top{font-size:calc(var(--u)*1.5);}
  .menu-sign .mq-bot{font-size:calc(var(--u)*.9);border-width:2px;}
  .btn-play{width:calc(var(--u)*6.4);height:calc(var(--u)*6.4);margin-top:calc(var(--u)*-3);}
  .deck{padding-top:calc(var(--u)*1.4);}
  .key{width:calc(var(--u)*3.6);height:calc(var(--u)*3.4);}
  .key .ic{font-size:calc(var(--u)*1.4);}
  .tut-card{width:min(70vw,calc(var(--u)*26));}
}
@media (max-aspect-ratio:9/19){
  .key{width:calc(var(--u)*3.8);}
}