*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#071a2f;overflow:hidden;overscroll-behavior:none;touch-action:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}
body{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#173c66,#071a2f)}
#stage{position:relative;--u:1px;background:#0e2a4a url(/assets/banner.jpg) 72% center/cover;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.5);border-radius:calc(var(--u)*6)}
canvas{position:absolute;inset:0;display:block;touch-action:none}
.panel{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*9);
  padding:calc(var(--u)*16);text-align:center;background:linear-gradient(180deg,rgba(7,26,47,.78),rgba(7,26,47,.9))}
.panel.on{display:flex}
.logo{width:calc(var(--u)*92);height:calc(var(--u)*92);border-radius:calc(var(--u)*21);box-shadow:0 8px 28px rgba(0,0,0,.5)}
h1{margin:0;font-size:calc(var(--u)*40);letter-spacing:-.02em;line-height:1}
h2{margin:0;font-size:calc(var(--u)*30)}
.tag{margin:0;font-size:calc(var(--u)*15);opacity:.92}
button{font:inherit;color:#fff;border:0;cursor:pointer;font-weight:700}
.big{background:linear-gradient(#ffc933,#f2a516);color:#1b2a3a;font-size:calc(var(--u)*20);padding:calc(var(--u)*11) calc(var(--u)*42);border-radius:999px;box-shadow:0 5px 0 #b87a00,0 10px 22px rgba(0,0,0,.4);margin:calc(var(--u)*4) 0}
.big:active{transform:translateY(2px);box-shadow:0 3px 0 #b87a00}
.sm{background:rgba(255,255,255,.14);font-size:calc(var(--u)*12);padding:calc(var(--u)*7) calc(var(--u)*14);border-radius:999px}
.row{display:flex;gap:calc(var(--u)*8)}
.how{font-size:calc(var(--u)*11.5);line-height:1.35;opacity:.93;max-width:calc(var(--u)*300);text-align:left;background:rgba(255,255,255,.08);border-radius:calc(var(--u)*12);padding:calc(var(--u)*8) calc(var(--u)*12)}
.how p{margin:calc(var(--u)*3) 0}.how b{font-size:calc(var(--u)*12.5);color:#ffd23f}
.best{margin:0;min-height:calc(var(--u)*16);font-size:calc(var(--u)*13);color:#ffd23f;font-weight:700}
.foot{margin:0;font-size:calc(var(--u)*10.5);opacity:.75}.foot a{color:#ffd23f}
#btnPause{position:absolute;top:calc(var(--u)*10);right:calc(var(--u)*10);width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:rgba(10,20,30,.62);display:none;padding:0;gap:calc(var(--u)*4);align-items:center;justify-content:center}
#btnPause i{display:block;width:calc(var(--u)*4);height:calc(var(--u)*13);background:#fff;border-radius:2px}
.stats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*8);width:calc(var(--u)*300)}
.stats div{background:rgba(255,255,255,.1);border-radius:calc(var(--u)*12);padding:calc(var(--u)*8)}
.stats dt{font-size:calc(var(--u)*11);opacity:.8}.stats dd{margin:calc(var(--u)*2) 0 0;font-size:calc(var(--u)*17);font-weight:800;color:#ffe066}
.newbest{margin:0;color:#ffd23f;font-weight:800;font-size:calc(var(--u)*17)}
button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px}