/* Swish Night — hand-drawn night-court basketball (navy / ice blue / white) */
@font-face{font-family:"Marker";src:url("fonts/marker.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url("fonts/kalam.woff") format("woff");font-weight:700;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0a1633;--deep:#0f2148;--court:#1b3a73;--ice:#cfe6ff;--paper:#f6f9ff;--ink:#0a1633;--muted:#4a5f8c;
  --blue:#2f6fe0;--blue-d:#1b4aa8;--cyan:#7fd3ff;--gold:#ffd45a;--gold-d:#c99a1c;--ball:#ff8a3d;--red:#ff5d6c;
  --hand:"Marker","Comic Sans MS",cursive;--body:"Kalam","Segoe Print","Comic Sans MS",system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --sketch:255px 18px 225px 18px/18px 225px 18px 255px;
}
html,body{height:100%;overflow:hidden;background:var(--navy);color:var(--ink);font-family:var(--body);font-weight:700;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
#game{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
button{font-family:inherit}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(14px + var(--safe-top)) 12px calc(14px + var(--safe-bottom));
  background:rgba(5,12,32,.58);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:10;overflow-y:auto}
.screen.active{opacity:1;pointer-events:auto}
.panel{width:min(390px,100%);margin:auto;padding:18px 18px 14px;text-align:center;background:var(--paper);
  border:3px solid var(--ink);border-radius:var(--sketch);
  box-shadow:3px 4px 0 var(--ink),0 0 0 7px rgba(207,230,255,.18),0 18px 40px rgba(0,0,0,.45);
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(47,111,224,.08) 27px 28px)}
.panel.small{width:min(300px,100%)}
.panel.wide{width:min(460px,100%)}
.lang-picker{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.lang-btn{min-width:48px;min-height:34px;border:2px solid var(--ink);border-radius:14px 4px 12px 5px/5px 12px 4px 14px;background:#fff;color:var(--muted);
  font-family:var(--hand);font-size:15px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.lang-btn.active{background:var(--blue);color:#fff}
.badge{font-family:var(--hand);font-size:13px;letter-spacing:.12em;color:var(--blue-d);margin-bottom:2px}
h1{font-family:var(--hand);font-weight:400;font-size:52px;line-height:.95;color:var(--navy);margin:4px 0 6px;transform:rotate(-2deg);
  text-shadow:3px 3px 0 var(--cyan)}
h1 span{color:var(--blue)}
h2{font-family:var(--hand);font-weight:400;font-size:30px;color:var(--navy);margin-bottom:6px;text-shadow:2px 2px 0 var(--cyan)}
.tagline{color:var(--muted);font-size:16px;margin-bottom:4px;line-height:1.25}
.ver{display:inline-block;font-size:12px;color:var(--blue-d);border:2px solid var(--blue-d);border-radius:10px 3px 9px 4px;padding:0 7px;margin-bottom:8px}
.howto{text-align:left;margin:0 auto 6px;padding-left:22px;color:var(--ink);font-size:14.5px;line-height:1.3;max-width:330px}
.howto li{margin-bottom:4px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:8px;
  border:2.5px solid var(--ink);border-radius:var(--sketch);font-family:var(--hand);font-weight:400;font-size:20px;cursor:pointer;text-decoration:none;color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);background:#fff;position:relative;top:0;transition:transform .08s}
.btn:hover{transform:rotate(-.6deg) scale(1.01)}
.btn:active{top:2px;box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible,.lang-btn:focus-visible,.stg:focus-visible,.icon-btn:focus-visible{outline:3px dashed var(--gold);outline-offset:2px}
.btn-play{background:var(--ball);color:#fff;text-shadow:2px 2px 0 rgba(10,22,51,.55);font-size:24px}
.btn-alt{background:var(--blue);color:#fff;text-shadow:1px 1px 0 var(--ink);font-size:17px}
.btn-pair{display:flex;gap:8px}
.btn-pair .btn{flex:1}
.btn-ghost{background:#fff;color:var(--muted);font-size:16px;min-height:40px}
.btn-tip{background:#fff6d6;color:var(--gold-d);font-size:15px;min-height:36px}
.hint{margin-top:8px;color:var(--muted);font-size:14px}
.studio{margin-top:6px;font-family:var(--hand);font-size:12px;letter-spacing:.16em;color:#8aa0c8;text-transform:uppercase}
.result{font-family:var(--hand);font-size:38px;margin:2px 0;color:var(--blue);text-shadow:2px 2px 0 var(--cyan)}
.result-sub{color:var(--muted);margin:2px 0;font-size:17px}
.result-sub.small{font-size:14px}
.stars-big{font-size:46px;letter-spacing:6px;color:var(--gold);text-shadow:2px 2px 0 var(--ink);line-height:1.1;min-height:52px}
.stars-big .off{color:#d4ddef;text-shadow:2px 2px 0 rgba(10,22,51,.3)}
.stars-big span{display:inline-block;animation:starpop .45s ease-out both}
.stars-big span:nth-child(2){animation-delay:.25s}.stars-big span:nth-child(3){animation-delay:.5s}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
.new-record{color:var(--blue-d);font-family:var(--hand);font-size:19px;margin:4px 0}
.hidden{display:none!important}
/* stage grid */
.stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.stg{min-height:62px;border:2.5px solid var(--ink);border-radius:16px 5px 14px 6px/6px 14px 5px 16px;background:#fff;cursor:pointer;
  font-family:var(--hand);font-size:22px;color:var(--navy);box-shadow:2px 3px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.stg small{font-family:var(--body);font-size:13px;color:var(--gold-d);letter-spacing:1px;margin-top:3px}
.stg.locked{background:#e3e9f5;color:#9aa8c4;cursor:not-allowed;box-shadow:none}
.stg.cur{background:#e6f2ff}
/* HUD */
.hud{position:absolute;top:0;left:0;right:0;padding:calc(6px + var(--safe-top)) 8px 0;z-index:5;pointer-events:none}
.hud-row{display:flex;justify-content:center;align-items:stretch;gap:6px;max-width:620px;margin:0 auto}
.hud-block{background:rgba(246,249,255,.94);border:2px solid var(--ink);border-radius:12px 4px 11px 5px/5px 11px 4px 12px;padding:2px 8px 3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;box-shadow:2px 2px 0 rgba(10,22,51,.7)}
.hud-label{font-size:10.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;line-height:1.1}
.hud-block span:last-child{font-family:var(--hand);font-size:19px;color:var(--navy);line-height:1.15}
.hud-block.score{min-width:78px}
.hud-block.mult span:last-child{color:var(--blue)}
.hud-block.mult.hot{background:#fff1c9;animation:hot .6s ease-in-out infinite alternate}
.hud-block.mult.hot span:last-child{color:#e05a10}
@keyframes hot{from{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.06)}}
.rack-dots{display:flex;gap:3px;align-items:center;height:22px}
.rack-dots i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:#fff}
.rack-dots i.made{background:var(--ball)}
.rack-dots i.miss{background:#c3cde2;position:relative}
.rack-dots i.miss::after{content:"";position:absolute;left:-2px;right:-2px;top:3px;height:1.5px;background:var(--ink);transform:rotate(-35deg)}
.rack-dots i.cur{box-shadow:0 0 0 2px var(--cyan);transform:scale(1.2)}
.rack-dots i.money{border-color:var(--gold-d);background:#fff3c4}
.rack-dots i.money.made{background:var(--gold)}
.rack-dots i.life{background:var(--ball)}
.rack-dots i.life.lost{background:#c3cde2}
.icon-btn{pointer-events:auto;width:40px;min-height:40px;border:2px solid var(--ink);border-radius:50% 45% 50% 42%;background:rgba(246,249,255,.94);
  font-size:17px;font-weight:700;color:var(--navy);cursor:pointer;box-shadow:2px 2px 0 rgba(10,22,51,.7)}
.icon-btn.off{color:#9aa8c4;text-decoration:line-through}
.coach{position:absolute;left:50%;top:calc(66px + var(--safe-top));transform:translateX(-50%) rotate(-1deg);z-index:6;max-width:min(92vw,520px);
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--sketch);padding:7px 14px;font-size:15.5px;color:var(--navy);text-align:center;
  box-shadow:3px 3px 0 var(--ink);pointer-events:none;animation:coachin .3s ease-out}
@keyframes coachin{from{opacity:0;transform:translateX(-50%) translateY(-8px) rotate(-1deg)}to{opacity:1;transform:translateX(-50%) rotate(-1deg)}}
@media (max-width:420px){
  .hud-row{gap:4px}.hud-block{padding:2px 5px 3px;min-width:44px}.hud-block span:last-child{font-size:17px}
  .rack-dots i{width:7px;height:7px}.rack-dots{gap:2px}.hud-block.score{min-width:62px}
  .icon-btn{width:34px;min-height:36px;font-size:15px}
  h1{font-size:46px}.howto{font-size:13.5px}
}
@media (max-height:560px){.panel{padding:10px 14px}.howto{display:none}h1{font-size:40px}.btn{min-height:40px;margin-top:6px}}