*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#14121f;color:#f4f1e8;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas#game{position:fixed;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated}
.hidden{display:none!important}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10;padding:16px;overflow-y:auto}
.overlay.show{display:flex}
.overlay.dim{background:rgba(10,8,20,.72);backdrop-filter:blur(2px)}
#title{background:radial-gradient(ellipse at center,rgba(20,18,31,.35) 0%,rgba(20,18,31,.88) 75%);flex-direction:column}
.title-wrap{text-align:center;max-width:920px;width:100%;margin:auto}
.domain{font-size:13px;letter-spacing:.25em;color:#a59fc4;margin-bottom:10px;text-transform:lowercase}
.logo{font-size:clamp(40px,9vw,92px);line-height:.95;font-weight:900;letter-spacing:.02em;
  text-shadow:0 4px 0 #000,0 0 30px rgba(255,204,51,.25)}
.logo .l1{color:#ffcc33}.logo .l2{color:#f4f1e8}
.subtitle{margin-top:10px;display:inline-block;padding:4px 14px;font-size:clamp(13px,2.2vw,18px);font-weight:700;color:#14121f;
  background:repeating-linear-gradient(-45deg,#ffcc33 0 14px,#f2b600 14px 28px);border:2px solid #000;letter-spacing:.08em}
.pitch{margin:16px auto 18px;max-width:560px;color:#cfc9e6;font-size:14px;line-height:1.5}
.heroes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.hero{width:200px;background:#211d33;border:3px solid #3a3456;border-radius:10px;padding:12px 10px;cursor:pointer;color:inherit;font:inherit;text-align:center;transition:transform .12s,border-color .12s}
.hero:hover{transform:translateY(-3px)}
.hero.sel{border-color:#ffcc33;box-shadow:0 0 0 2px #000,0 0 22px rgba(255,204,51,.35)}
.hero canvas{width:72px;height:72px;image-rendering:pixelated;display:block;margin:0 auto 6px}
.hero .hn{font-weight:800;font-size:15px;color:#ffcc33}
.hero .ht{font-size:11px;color:#a59fc4;margin:2px 0 6px;text-transform:uppercase;letter-spacing:.08em}
.hero .hd{font-size:12px;line-height:1.4;color:#ddd8f0}
.big-btn{display:inline-block;font:inherit;font-weight:900;font-size:20px;letter-spacing:.08em;color:#14121f;background:#ffcc33;border:3px solid #000;
  border-radius:8px;padding:12px 34px;cursor:pointer;box-shadow:0 5px 0 #8a6a00;transition:transform .08s}
.big-btn:hover{background:#ffd95c}.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a6a00}
.link-btn{display:block;margin:14px auto 0;background:none;border:0;color:#a59fc4;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.best{margin-top:12px;font-size:13px;color:#8be9a8;min-height:1em}
.controls{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:12px;color:#a59fc4}
kbd{display:inline-block;padding:1px 5px;border:1px solid #5a537a;border-bottom-width:2px;border-radius:4px;background:#211d33;color:#f4f1e8;font:inherit;font-size:11px}
.touch-hint{display:none}
@media (hover:none) and (pointer:coarse){.touch-hint{display:inline}}
.site-footer{margin-top:18px;padding-bottom:6px;font-size:12px;color:#7d7699;text-align:center}
.panel{background:#1b1729;border:3px solid #000;outline:3px solid #ffcc33;border-radius:10px;padding:22px;max-width:860px;width:100%;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.panel.small{max-width:420px}
.panel h2{font-size:clamp(28px,5vw,40px);font-weight:900;color:#ffcc33;text-shadow:0 3px 0 #000;letter-spacing:.04em}
.panel .hint{color:#a59fc4;font-size:13px;margin:6px 0 16px}
.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.card{flex:1 1 220px;max-width:260px;background:#262040;border:3px solid #3a3456;border-radius:10px;padding:14px 12px;cursor:pointer;color:inherit;font:inherit;
  text-align:center;transition:transform .1s,border-color .1s;animation:pop .25s ease-out both}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:#ffcc33;outline:none}
.card canvas{width:56px;height:56px;display:block;margin:0 auto 8px}
.card .cn{font-weight:800;font-size:16px}
.card .cl{font-size:11px;margin:4px 0 8px;letter-spacing:.1em;color:#a59fc4}
.card .cl.new{color:#8be9a8}
.card .cd{font-size:13px;line-height:1.45;color:#ddd8f0}
.card .ck{margin-top:8px;font-size:11px;color:#6f6890}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:16px auto 20px;max-width:300px;text-align:left;font-size:15px}
.stats .v{text-align:right;font-weight:800;color:#ffcc33}
.newbest{margin-top:8px;color:#8be9a8;font-weight:800;letter-spacing:.1em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.build{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 18px;font-size:12px;color:#cfc9e6}
.build span{background:#262040;border:1px solid #3a3456;border-radius:5px;padding:3px 7px}
.icon-btn{width:40px;height:40px;border-radius:8px;border:2px solid #000;background:rgba(33,29,51,.85);color:#f4f1e8;font:inherit;font-weight:900;font-size:16px;cursor:pointer}
.icon-btn:hover{background:#3a3456}
#hud-buttons{position:fixed;top:max(18px,env(safe-area-inset-top));right:62px;z-index:5}
#btn-mute{position:fixed;top:max(18px,env(safe-area-inset-top));right:14px;z-index:20}
#btn-mute.off{color:#6f6890;text-decoration:line-through}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:18px;background:#14121f}
@media (max-width:640px){
  .hero{width:30%;min-width:100px;padding:8px 6px}.hero .hd{display:none}.hero canvas{width:52px;height:52px}
  .pitch{font-size:13px;margin:12px auto}.card{flex-basis:100%;max-width:none;display:grid;grid-template-columns:56px 1fr;gap:0 12px;text-align:left;padding:10px}
  .card canvas{grid-row:span 3;margin:0;align-self:center}.card .cl{margin:2px 0}.card .ck{display:none}.panel{padding:16px}
}
.home-link{color:#a59fc4;text-decoration:none;border-bottom:1px dotted #5a537a}.home-link:hover{color:#ffcc33;border-color:#ffcc33}
.noscript a{color:#ffcc33}