*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#c9a24a;--gold2:#e8c46a;--cream:#f2ead8;--ink:#0c1214;--teal:#13201f;--muted:#9fb0aa}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--cream);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas#gl,canvas#hud{position:fixed;inset:0;width:100%;height:100%;display:block}
canvas#hud{pointer-events:none;z-index:2}
.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(6,9,10,.74);backdrop-filter:blur(3px)}
#title{flex-direction:column;background:radial-gradient(ellipse at 50% 45%,rgba(12,18,20,.15) 0%,rgba(12,18,20,.55) 55%,rgba(8,10,12,.92) 100%)}
.title-wrap{text-align:center;max-width:960px;width:100%;margin:auto}
.domain{font-size:12px;letter-spacing:.32em;color:var(--muted);margin-bottom:12px}
.logo{display:flex;flex-direction:column;align-items:center;font-family:Georgia,"Times New Roman",serif;font-weight:900;line-height:.92;letter-spacing:.06em}
.logo .l1{font-size:clamp(26px,5vw,46px);color:var(--gold2);letter-spacing:.5em;margin-right:-.5em}
.logo .l2{font-size:clamp(44px,10vw,104px);background:linear-gradient(180deg,#fff6dc 0%,#e8c46a 45%,#9a7220 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(232,196,106,.25))}
.subtitle{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;color:var(--gold2);font-family:Georgia,serif;font-style:italic;font-size:clamp(15px,2.4vw,22px);letter-spacing:.08em}
.subtitle::before,.subtitle::after{content:"";width:clamp(30px,8vw,90px);height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.subtitle::after{transform:scaleX(-1)}
.pitch{margin:14px auto 18px;max-width:580px;color:#cfd8d4;font-size:14px;line-height:1.55;text-shadow:0 1px 3px #000}
.heroes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.hero{position:relative;width:210px;background:linear-gradient(180deg,rgba(25,38,38,.92),rgba(12,18,20,.95));border:2px solid #34463f;border-radius:4px;padding:10px 10px 12px;cursor:pointer;color:inherit;font:inherit;text-align:center;transition:transform .12s,border-color .12s}
.hero::before{content:"";position:absolute;inset:4px;border:1px solid rgba(201,162,74,.25);pointer-events:none}
.hero:hover{transform:translateY(-3px)}
.hero.sel{border-color:var(--gold);box-shadow:0 0 0 1px #000,0 0 26px rgba(232,196,106,.3)}
.hero img{width:120px;height:120px;display:block;margin:0 auto 4px}
.hero .hn{font-family:Georgia,serif;font-weight:900;font-size:17px;color:var(--gold2)}
.hero .hr{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px}
.hero .hd{font-size:12px;line-height:1.4;color:#d9e0dc}
.big-btn{display:inline-block;font-family:Georgia,serif;font-weight:900;font-size:20px;letter-spacing:.18em;color:#1a1306;background:linear-gradient(180deg,#f5d98a,#c9a24a);
  border:2px solid #000;outline:1px solid var(--gold);outline-offset:3px;border-radius:2px;padding:12px 38px;cursor:pointer;transition:transform .08s,filter .1s}
.big-btn:hover{filter:brightness(1.08)}.big-btn:active{transform:translateY(2px)}
.big-btn:disabled{filter:grayscale(.6) brightness(.7);cursor:wait}
.link-btn{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.best{margin-top:14px;font-size:13px;color:#8be9a8;min-height:1em}
.controls{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:12px;color:var(--muted)}
#controls-touch{display:none}
body.touch #controls-touch{display:flex} body.touch #controls-desktop{display:none}
kbd{display:inline-block;padding:1px 5px;border:1px solid #4a5a52;border-bottom-width:2px;border-radius:3px;background:#13201f;color:var(--cream);font:inherit;font-size:11px}
.site-footer{margin-top:14px;padding-bottom:4px;font-size:13px;text-align:center}
.home-link{color:var(--muted);text-decoration:none;border-bottom:1px dotted #4a5a52}.home-link:hover{color:var(--gold2);border-color:var(--gold2)}
.panel{position:relative;background:linear-gradient(180deg,#14201f,#0b1112);border:2px solid var(--gold);border-radius:3px;padding:24px;max-width:900px;width:100%;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.7)}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,74,.35);pointer-events:none}
.panel.small{max-width:440px}
.panel h2{font-family:Georgia,serif;font-size:clamp(28px,5vw,42px);font-weight:900;letter-spacing:.14em;color:var(--gold2);text-shadow:0 3px 0 #000}
.panel .hint{color:var(--muted);font-size:13px;margin:6px 0 16px}
.panel p{color:#d9e0dc;margin-top:10px;line-height:1.5}
.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.card{position:relative;flex:1 1 230px;max-width:270px;background:linear-gradient(180deg,#1c2b2a,#111a1a);border:2px solid #34463f;border-radius:3px;padding:16px 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:var(--gold);outline:none}
.card canvas{width:64px;height:64px;display:block;margin:0 auto 8px}
.card .cn{font-family:Georgia,serif;font-weight:900;font-size:17px}
.card .cl{font-size:11px;margin:4px 0 8px;letter-spacing:.14em;color:var(--muted)}
.card .cl.new{color:#8be9a8}.card .cl.ult{color:#ffb347}
.card .cd{font-size:13px;line-height:1.45;color:#d9e0dc}
.card .ck{margin-top:8px;font-size:11px;color:#5f716a}
@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:var(--gold2)}
.newbest{margin-top:8px;color:#8be9a8;font-weight:800;letter-spacing:.12em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}
.build{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 14px;font-size:12px;color:#cfd8d4}
.build span{background:#13201f;border:1px solid #34463f;border-radius:3px;padding:3px 7px}
.qrow{margin:4px 0 18px;font-size:13px;color:var(--muted);display:flex;gap:8px;justify-content:center;align-items:center}
.chip{background:#13201f;border:1px solid #34463f;color:var(--cream);font:inherit;font-size:13px;padding:4px 12px;border-radius:3px;cursor:pointer}
.chip.on{border-color:var(--gold);color:var(--gold2)}
#topbtns{position:fixed;top:max(14px,env(safe-area-inset-top));right:12px;z-index:20;display:flex;gap:8px}
.icon-btn{min-width:40px;height:40px;border-radius:3px;border:1px solid var(--gold);background:rgba(12,18,20,.85);color:var(--cream);font:inherit;font-weight:800;font-size:15px;cursor:pointer;padding:0 8px}
.icon-btn.wide{font-size:11px;letter-spacing:.12em}
.icon-btn:hover{background:#1c2b2a}
#btn-mute.off{color:#5f716a;text-decoration:line-through}
#btn-ult{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));z-index:6;width:76px;height:76px;border-radius:50%;
  border:2px solid var(--gold);background:rgba(12,18,20,.75);color:var(--gold2);font-family:Georgia,serif;font-weight:900;letter-spacing:.08em;font-size:15px}
#btn-ult.ready{background:radial-gradient(circle,#ffcf6a,#b8801f);color:#1a1306;box-shadow:0 0 22px rgba(255,190,90,.7)}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:30;background:rgba(12,18,20,.9);border:1px solid var(--gold);padding:8px 14px;font-size:13px;border-radius:3px}
#fallback{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;background:var(--ink);padding:20px}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:18px;background:var(--ink);z-index:50}
.noscript a{color:var(--gold2)}
@media (max-width:640px){
  .hero{width:31%;min-width:100px;padding:6px 4px}.hero .hd{display:none}.hero img{width:80px;height:80px}.hero .hn{font-size:14px}.hero .hr{font-size:9px}
  .pitch{font-size:13px;margin:10px auto 14px}
  .card{flex-basis:100%;max-width:none;display:grid;grid-template-columns:64px 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}
}
body.touch .keys{display:none}