:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#ecf7ff;background:#071423;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 3%,#14375c 0,#071423 38%,#030b14 100%)}
button,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #7fe8ff;outline-offset:3px}
.shell{max-width:1320px;padding:18px clamp(12px,3vw,38px) 48px;margin:auto}
.topbar{display:flex;align-items:center;gap:16px;min-height:50px;border-bottom:1px solid #83c8ef33;padding-bottom:16px}
.brand{color:#e6f6ff;text-decoration:none;font-weight:800;letter-spacing:.02em;font-size:17px}
.brand span{color:#7fe8ff;margin-right:8px}
.game-tag{margin-left:auto;color:#97bdd3;font-size:11px;font-weight:900;letter-spacing:.18em}
#pause{border:1px solid #70dfff80;background:#102f49;color:#effbff;border-radius:9px;min-height:38px;padding:7px 15px;font-weight:750}
#pause:disabled{opacity:.48;cursor:default}
.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:22px 0 20px}
.eyebrow{color:#79e6fe;font-weight:900;font-size:11px;letter-spacing:.2em;margin:0 0 8px}
h1{font-size:clamp(37px,5vw,66px);line-height:1.03;margin:0;letter-spacing:-.045em}
.intro p:not(.eyebrow){color:#bad0df;line-height:1.5;margin:10px 0 0;max-width:560px}
.scoreboard{display:grid;grid-template-columns:repeat(4,minmax(93px,1fr));gap:7px;min-width:min(485px,100%)}
.scoreboard div{border:1px solid #6baccf55;border-radius:10px;padding:10px 12px;background:#0d253a}
.scoreboard span{display:block;color:#9ebbd0;font-size:11px;line-height:1.35}
.scoreboard strong{display:block;font-size:23px;font-variant-numeric:tabular-nums;margin-top:3px}
.layout{display:grid;grid-template-columns:minmax(0,680px) minmax(245px,1fr);align-items:start;gap:22px}
.arena{min-width:0}
.stage{position:relative;width:100%;aspect-ratio:3/4;border:2px solid #6196ba;border-radius:17px;overflow:hidden;background:#07182d;box-shadow:0 22px 70px #0009,0 0 0 5px #78d2ff11}
canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#05111cc4,#07131bea 72%)}
.overlay-card{width:min(440px,100%);border:1px solid #7fe8ff80;border-radius:16px;padding:clamp(20px,4vw,34px);background:#092238e8;box-shadow:0 24px 60px #000a;text-align:center}
.overlay-card h2{font-size:clamp(26px,5vw,40px);line-height:1.08;margin:0 0 12px;letter-spacing:-.04em}
.overlay-card p:not(.eyebrow){color:#c4dbe8;line-height:1.55;margin:0 0 24px}
#start{border:0;background:#7fe8ff;color:#052238;border-radius:10px;font-weight:900;min-height:48px;padding:11px 27px}
#start:hover{background:#b2f4ff}
.banner{position:absolute;top:14%;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;border:1px solid #a2f0ff80;border-radius:30px;background:#061d32db;color:#effcff;padding:9px 18px;font-size:clamp(13px,2.3vw,20px);font-weight:900;letter-spacing:.03em;pointer-events:none;box-shadow:0 4px 28px #0009}
.sidebar{display:grid;gap:15px;min-width:0}
.sidebar [data-earnport-wallet]{min-width:0}
.info-card{border:1px solid #6baccf55;border-radius:14px;background:#0b2235;padding:19px 21px}
.info-card h2{margin:0 0 14px;font-size:18px}
.info-card p{color:#c4d5e0;font-size:13px;line-height:1.6;margin:0 0 11px}
.info-card p:last-child{margin-bottom:0}
.info-card strong{display:inline-block;color:#ecf7ff;min-width:48px}
.fine-print{background:#0b1d2c}
.touch-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 4px;max-width:680px}
.direction-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,46px);gap:4px}
.direction-pad .up{grid-column:2;grid-row:1}
.direction-pad .left{grid-column:1;grid-row:2}
.direction-pad .down{grid-column:2;grid-row:2}
.direction-pad .right{grid-column:3;grid-row:2}
.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #81b9d8;background:#113b57;color:#e8f8ff;border-radius:10px;font-weight:900;font-size:17px}
.touch-controls button:active,.touch-controls button.pressed{background:#67dff6;color:#06243b}
.fire-button{width:92px;height:92px;border-radius:50%!important;background:#ae3b52!important;border-color:#ff8b9f!important;color:white!important;box-shadow:0 0 30px #db455a44}
.fire-button:active,.fire-button.pressed{background:#f56a79!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.touch-controls{display:none}}
@media(max-width:1020px){.intro{align-items:stretch;flex-direction:column}.layout{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:760px){
  main{display:flex;flex-direction:column}
  .intro,.layout{display:contents}
  .scoreboard{order:1;min-width:0;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0 10px}
  .scoreboard div{padding:7px 8px}
  .scoreboard span{font-size:10px}
  .scoreboard strong{font-size:18px}
  .arena{order:2}
  .stage,.touch-controls{width:min(100%,max(240px,calc((100dvh - 264px)*.75)));max-width:610px;margin-inline:auto}
  .touch-controls{padding:8px 4px}
  .intro>div:first-child{order:3;margin:18px 0 8px}
  .sidebar{order:4}
  .game-tag{display:none}
}
@media(max-width:440px){
  .shell{padding:10px 10px 48px}
  .topbar{min-height:44px;padding-bottom:8px}
  .direction-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,42px)}
  .fire-button{width:80px;height:80px}
  .overlay{padding:14px}
  .overlay-card{padding:19px}
  .info-card{padding:16px}
}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .shell{padding:4px 10px 32px}
  .topbar{min-height:38px;padding-bottom:4px}
  main{display:flex;flex-direction:column}
  .intro,.layout{display:contents}
  .scoreboard{order:1;min-width:0;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:4px 0 6px}
  .scoreboard div{padding:3px 7px}
  .scoreboard span{font-size:10px}
  .scoreboard strong{font-size:15px;margin-top:0}
  .arena{order:2;display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
  .stage{width:min(36vw,calc((100dvh - 130px)*.75));max-width:none;margin:0}
  .touch-controls{width:min(52vw,330px);max-width:none;margin:0;padding:0}
  .intro>div:first-child{order:3;margin:12px 0}
  .sidebar{order:4}
  .game-tag{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}