:root{color-scheme:dark;--ink:#eff5eb;--muted:#adbab4;--mint:#cafa9d;--line:#3a4745;--panel:#151e22}
*{box-sizing:border-box}body{margin:0;font:15px/1.4 system-ui,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 50% 0,#20332d,#0d1418 57%)}a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px max(18px,calc((100vw - 1140px)/2));border-bottom:1px solid #35443e;background:#111a1d}
.top>a{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:19px;font-weight:850}.top img{width:32px}.top nav{display:flex;gap:15px;font-size:13px;align-items:center}.top nav a{color:#bbc9bf}.top nav b{color:var(--mint)}
main{max-width:1180px;margin:auto;padding:22px 16px}.intro{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}.intro>p{color:#bbc9bf;text-align:right;margin:0}.eyebrow,legend,kbd,.hud small{font:750 11px ui-monospace,monospace;letter-spacing:.11em;color:var(--mint)}.eyebrow{margin:0 0 4px}h1{font-size:clamp(36px,6vw,70px);line-height:.98;letter-spacing:-.065em;margin:0}h1 span{color:var(--mint)}
.cabinet{border:1px solid #53665b;border-radius:12px;overflow:hidden;background:#121a1e;box-shadow:0 18px 54px #060a0c99}.field{position:relative;background:#273226}.field>canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated}.overlay{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:12px;background:#0a1415a6}.overlay[hidden],.hud[hidden],.touch[hidden],.boss[hidden]{display:none}
.panel{width:min(100%,760px);padding:14px 18px;border:1px solid #697a68;background:linear-gradient(135deg,#202c2af7,#121d24fb 69%);border-radius:10px;box-shadow:0 18px 40px #040708b0}.panel h2{font-size:clamp(20px,3vw,34px);line-height:1.05;margin:2px 0 10px;letter-spacing:-.045em}
fieldset{padding:0;margin:8px 0 0;border:0;min-width:0}legend{margin-bottom:5px;text-transform:uppercase}.heroes,.maps,.levels,.upgrades{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.heroes{grid-template-columns:repeat(4,minmax(0,1fr))}
button{color:inherit;font:inherit;font-weight:700;border-radius:6px;background:#263633;border:1px solid #50635b;padding:6px 10px;cursor:pointer}button:hover:not(:disabled){background:#344840}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}button[aria-pressed=true]{border-color:var(--mint);box-shadow:inset 0 -2px var(--mint);background:#365044}
.hero,.map{display:grid;justify-items:center;gap:1px;line-height:1.18;padding:4px 2px;font-size:13px;overflow:hidden}.hero canvas{height:45px;width:45px;image-rendering:pixelated}.hero small,.map small{font-size:10px;color:#c2d1c7}.map canvas{display:block;width:100%;height:45px;object-fit:cover;image-rendering:pixelated}.map strong{padding:3px 0}.levels button{font-size:12px}.tip{min-height:1em;font-size:12px;color:#c4cec9;margin:5px 0}.primary{width:100%;margin-top:5px;color:#18251d;background:var(--mint);border-color:var(--mint);text-align:left}.primary:hover:not(:disabled){background:#e1ffc7}.primary span{float:right}
.controls,.touch,footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;color:var(--muted);font-size:12px}.controls{flex-wrap:wrap}.controls button{margin-left:auto}kbd{font-size:9px;color:#e9efeb;border:1px solid #53635c;border-radius:3px;padding:2px 4px}.touch{touch-action:none;user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,42px);gap:4px}.dpad button,.actions button{min-height:42px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.actions{display:flex;gap:5px}footer{padding-inline:0}
.hud{position:absolute;inset:0;pointer-events:none;padding:12px;display:grid;grid-template-columns:1fr 1fr 1fr;align-content:start;align-items:start;text-shadow:0 2px #10151d;gap:5px}.vitals,.timer,.kills,.tray,.boss{background:#10191cdb;border:1px solid #cde4b44d;border-radius:6px;padding:6px 8px}.vitals{width:min(100%,220px)}.vitals div{display:flex;justify-content:space-between;gap:4px}.hud small{display:block;color:#d9e8d6;font-size:9px}.timer{text-align:center;justify-self:center}.timer b{font-size:24px;line-height:1}.kills{justify-self:end;text-align:center}.tray{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);display:flex;gap:9px;font-size:11px;white-space:nowrap}.tray span+span{border-left:1px solid #6b827277;padding-left:8px}.boss{grid-column:2;text-align:center}.hud progress{display:block;width:100%;height:6px;margin-top:4px;accent-color:#76d5a0}.hud #xp{accent-color:#6bd9f4}.hud #boss-hp{accent-color:#ff8b88}
.upgrades{margin:10px 0}.upgrade{text-align:left;min-height:128px;padding:11px;display:flex;flex-direction:column;gap:5px;align-items:start}.upgrade small{color:#c7d3d1;font-weight:500}.upgrade i{font:800 12px ui-monospace,monospace;color:#baf59e}.upgrade strong{font-size:15px}.dialog-actions{display:flex;gap:6px;flex-wrap:wrap}.dialog-actions button{flex:1}.summary{color:#d6e2d8}
@media(max-width:720px){main{padding:14px 8px}.intro{display:block}.intro>p{text-align:left;font-size:12px;margin-top:7px}.intro br{display:none}.field:has(.overlay:not([hidden])){min-height:440px}.field:has(.overlay:not([hidden]))>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.panel{padding:10px}.hero,.map{font-size:11px}.hero small{font-size:8px}.controls span{font-size:10px}.controls span:nth-child(2){display:none}.hud{padding:4px}.hud small{font-size:7px}.hud .timer b{font-size:16px}.hud .vitals b,.hud .kills b{font-size:11px}.vitals,.timer,.kills,.tray,.boss{padding:3px 4px}.tray{bottom:4px;font-size:9px;gap:4px}.tray span+span{padding-left:4px}.upgrades{grid-template-columns:1fr}.upgrade{min-height:0;padding:6px 8px}.top nav{gap:7px;font-size:11px}}
/* Illustrated map and hero cards use the same art as the battle. */
.hero{position:relative;background:radial-gradient(ellipse at 50% 30%,#3f5247 0%,#253732 54%,#1f2b2c 94%)}
.hero[data-hero=mage]{background:radial-gradient(ellipse at 50% 30%,#534665,#292d3d 62%,#22282f)}
.hero[data-hero=ahri]{background:radial-gradient(ellipse at 50% 30%,#644856,#382e3b 62%,#25272f)}
.hero[aria-pressed=true]{border-color:#c8ed9d;box-shadow:inset 0 -2px #c8ed9d,inset 0 0 18px #c8ed9d21}
.hero canvas{width:58px;height:54px}
.map{position:relative;display:block;padding:0;overflow:hidden;background:#182922;text-align:left}
.map img{width:100%;height:66px;display:block;object-fit:cover;image-rendering:auto}
.map strong{position:absolute;inset:auto 0 0;padding:14px 8px 5px;background:linear-gradient(transparent,#111a19e8 75%);color:#fff;text-shadow:0 1px 3px #0d1612}
.map[aria-pressed=true]{outline:1px solid #c8ed9d;outline-offset:-2px}
.overlay{background:#08100c70}.panel{background:linear-gradient(135deg,#202f29f7,#111e24f8 76%);border-color:#708478}
@media(max-width:720px){.hero canvas{width:45px;height:43px}.map img{height:56px}.map strong{padding-inline:4px}.field:has(.overlay:not([hidden])){min-height:452px}}
.controls .control-buttons{display:flex;gap:6px;margin-left:auto}.controls .control-buttons button{margin-left:0}
.map canvas{display:block;width:100%;height:66px;image-rendering:pixelated}
.survival-ranking{margin-top:18px;padding:18px;background:#15211f;border:1px solid #43554d;border-radius:10px}.survival-ranking p:not(.eyebrow){color:#b8c6bb;font-size:13px;margin:8px 0}.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.ranking-heading h2{margin:0;font-size:clamp(20px,3vw,30px);letter-spacing:-.04em}.ranking-table{overflow-x:auto}.ranking-table table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;font-variant-numeric:tabular-nums}.ranking-table th,.ranking-table td{padding:8px 10px;border-bottom:1px solid #364641}.ranking-table th{color:#cafa9d}.ranking-table td:nth-child(3){font-weight:750;color:#e8f2b7}.ranking-table td:last-child{min-width:140px}.survival-ranking button{white-space:nowrap}
@media(max-width:720px){.map canvas{height:56px}.survival-ranking{padding:12px}.ranking-table th,.ranking-table td{padding:6px}}
.hero-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:7px}
.hero-games button{font-size:12px;line-height:1.15;padding:7px 2px}
.heroes{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero[data-hero=phoenix],.hero[data-hero=juggernaut]{background:radial-gradient(ellipse at 50% 30%,#6a5040,#392f30 63%,#27282d)}
.hero[data-hero=omen],.hero[data-hero=lux]{background:radial-gradient(ellipse at 50% 30%,#4e5277,#2c3046 63%,#242733)}
.hero[data-hero=crystal],.hero[data-hero=yasuo]{background:radial-gradient(ellipse at 50% 30%,#3c6274,#263b49 63%,#222a31)}
@media(max-width:900px){
 .field:has(.overlay:not([hidden]) .hero-games){min-height:490px}
 .field:has(.overlay:not([hidden]) .hero-games)>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media(max-width:720px){.hero-games button{font-size:11px}}
.boost{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);padding:4px 8px;border:1px solid #ffcf7a;border-radius:5px;background:#332519ef;color:#ffe3a4;font:800 10px ui-monospace,monospace;letter-spacing:.055em;white-space:nowrap}
.supply-note{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:6px 12px 9px;border-top:1px solid #3a4745;color:var(--muted);font-size:11px}
.supply-note b{color:#ffceb9}.supply-note span:nth-child(2) b{color:#ffe1a3}
@media(max-width:720px){.boost{bottom:30px}}
.how-to{margin:14px 0;padding:14px 16px;border:1px solid #43554d;border-radius:10px;background:#15211f}
.how-to h2{margin:0 0 4px;font-size:18px}.how-to p{margin:0;color:#b8c6bb;font-size:13px}