@font-face{font-family:Bungee;src:url(fonts/bungee-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{--teal:#12b8a6;--teal2:#0b7566;--violet:#7b5cff;--violet2:#4b2fb8;--ink:#0d1b2a;--pad:min(34vh,236px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1b2a;color:#eafffb;font:16px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#app{height:100%;height:100dvh;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr auto;grid-template-areas:"stage stage stage" "l m r";background:radial-gradient(circle at 50% 0,#1b3550,#0d1b2a 70%)}
#stage{grid-area:stage;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{display:block;touch-action:none;border-left:3px solid var(--violet);border-right:3px solid var(--violet);box-shadow:0 0 0 1px #0008,0 0 28px #7b5cff55;background:#2c8a4a}
.pad{display:none;padding:8px 6px calc(8px + env(safe-area-inset-bottom));gap:8px}
#padL{grid-area:l}#padM{grid-area:m;flex-direction:column}#padR{grid-area:r}
body.touch .pad{display:flex}
body.touch #keyHint{display:none}
.pb{flex:1;min-height:48px;border:2px solid #fff3;border-radius:18px;background:linear-gradient(180deg,#1a8f83,#0b5f55);color:#fff;font:700 13px/1.1 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px 0 #063b35,0 6px 12px #0006;padding:0}
.pb b{font-size:26px;line-height:1}
.pb.big{height:calc(var(--pad) - 16px);background:linear-gradient(180deg,#8a6cff,#4b2fb8);box-shadow:0 5px 0 #2c1a73,0 8px 14px #0006}
.pb.big b{font-size:44px}
#padM .pb{min-height:0}
#padM .pb b{font-size:20px}
#padM .pb span i{font-style:normal;background:#fff;color:#0b5f55;border-radius:8px;padding:0 5px;margin-left:2px}
.pb.on{transform:translateY(3px);box-shadow:0 1px 0 #063b35;filter:brightness(1.25)}
.pb.big.on{box-shadow:0 2px 0 #2c1a73}
#keyHint{grid-column:1/-1;text-align:center;font-size:13px;color:#a9d8d2;padding:6px 8px 10px}
@media (orientation:landscape) and (max-height:540px){
  body.touch #app{grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);grid-template-rows:1fr 1fr;grid-template-areas:"l stage r" "m stage r"}
  body.touch #padL,body.touch #padR,body.touch #padM{padding:8px calc(6px + env(safe-area-inset-left))}
  body.touch .pb.big{height:auto}
  body.touch #padM{flex-direction:row;flex-wrap:wrap}
  body.touch #padM .pb{flex:1 1 40%}
}
#hud{position:absolute;inset:0;pointer-events:none;font:700 15px/1 Bungee,system-ui,sans-serif;text-shadow:0 2px 0 #0009}
#hud[hidden]{display:none}
#pauseBtn{pointer-events:auto;position:absolute;left:var(--cl,8px);top:8px;width:40px;height:40px;border-radius:12px;border:2px solid #fff;background:var(--violet2);display:flex;gap:6px;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px #0008}
#pauseBtn span{width:5px;height:16px;background:#fff;border-radius:2px}
#hudScore{position:absolute;left:calc(var(--cl,8px) + 50px);top:10px;font-size:20px;color:#fff}
#hudChain{position:absolute;left:calc(var(--cl,8px) + 52px);top:34px;font-size:13px;color:#ffd84a}
#hudRight{position:absolute;right:calc(var(--cr,8px) + 52px);top:8px;text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
#hudLives,#hudCans{display:flex;gap:3px;font-size:16px}
#hudProg{position:absolute;right:calc(var(--cr,8px) + 4px);top:60px;bottom:16px;width:6px;border-radius:3px;background:#0006;overflow:hidden}
#hudProg i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--teal),var(--violet))}
#toast{position:absolute;left:0;right:0;top:34%;text-align:center;font:700 26px/1.1 Bungee,system-ui,sans-serif;color:#fff;text-shadow:0 3px 0 var(--violet2),0 0 14px #000a;pointer-events:none;opacity:0;transition:opacity .25s}
#toast.show{opacity:1}
.screen{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:58px 14px 14px;background:linear-gradient(180deg,#0d1b2acc,#1b1040bb);overflow:auto}
.screen[hidden]{display:none}
.box{margin:auto;width:min(100%,400px);text-align:center;background:linear-gradient(180deg,#0f2f3a,#1d1650);border:2px solid var(--teal);border-radius:20px;padding:18px 16px;box-shadow:0 0 0 3px #7b5cff66,0 12px 30px #000a}
.logo{font:400 46px/1 Bungee,Impact,system-ui,sans-serif;margin:4px 0 6px;color:#fff;letter-spacing:1px;text-shadow:0 4px 0 var(--violet2),0 0 18px #12b8a688}
.tag{margin:0 0 14px;color:#bff5ee}
h2{font:400 24px/1.1 Bungee,system-ui,sans-serif;margin:2px 0 10px;color:#fff;text-shadow:0 3px 0 var(--violet2)}
.btns{display:flex;flex-direction:column;gap:9px}
.btn{display:block;font:700 16px/1 system-ui,sans-serif;padding:13px 14px;border-radius:14px;border:2px solid #fff3;background:#173c4a;color:#fff;text-decoration:none;cursor:pointer;touch-action:manipulation}
.btn.primary{background:linear-gradient(180deg,var(--teal),var(--teal2));border-color:#fff8;font-size:18px}
.btn.ghost{background:transparent;border-color:var(--violet)}
.btn:hover,.btn:focus-visible{outline:3px solid #ffd84a;outline-offset:2px}
.fine{font-size:12px;color:#9fc9c3;margin:10px 0 0}
.how{text-align:left;width:min(100%,460px)}
.how h2{text-align:center}
.how ul{padding-left:18px;margin:8px 0}
.how li{margin:5px 0;font-size:14.5px}
.how p{margin:6px 0;font-size:14.5px}
.keys{font-size:13px;color:#bfe;background:#0006;border-radius:10px;padding:7px 9px;margin:8px 0}
.how .btn{width:100%;margin-top:6px}
#tally{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:15px}
#tally td{padding:5px 4px;border-bottom:1px solid #fff2}
#tally td:last-child{text-align:right;font-weight:700}
#tally tr.tot td{font:400 19px/1.2 Bungee,system-ui,sans-serif;color:#ffd84a;border:0;padding-top:9px}