@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111522;--panel:#191e2d;--line:#30374a;--muted:#aab4cc;--lime:#d5ff67;--orange:#ff845c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 10%,#2a3046 0,transparent 42%),var(--bg);color:#f4f6fc;font-family:'DM Sans',system-ui,sans-serif}header{max-width:1440px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}header a{font-weight:800;color:#fff;text-decoration:none;letter-spacing:.12em}header a span{font-weight:400;color:var(--muted);letter-spacing:.06em}.badge{font-size:10px;letter-spacing:.14em;border:1px solid var(--line);padding:8px 12px;border-radius:20px;color:var(--lime)}main{max-width:1440px;margin:auto;padding:48px 5% 30px}.intro{max-width:800px}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--lime);font-weight:700}h1{font:800 clamp(72px,11vw,146px)/.82 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.035em;margin:24px 0}h1 span{color:var(--lime)}.lede{font-size:18px;line-height:1.7;color:var(--muted);max-width:600px}#notice{margin:32px 0 24px;border-left:3px solid var(--lime);padding:12px 18px;font-size:13px;line-height:1.6;background:#ffffff06}#notice.error{border-color:var(--orange);color:#ffc6b3}.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px}.entry-form{min-width:280px;display:grid;gap:16px}#entry{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:60px}h2{font:700 34px/1.1 'Barlow Condensed',sans-serif;margin:4px 0 16px}h3{font-size:15px;margin:0 0 18px}p{line-height:1.7;color:var(--muted)}label{display:grid;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}input,select{font:inherit;font-size:14px;color:#fff;background:#101522;border:1px solid var(--line);padding:12px;border-radius:8px;width:100%;min-height:44px}button{font:700 13px 'DM Sans',sans-serif;min-height:44px;border:1px solid transparent;border-radius:8px;padding:12px 18px;background:var(--lime);color:#111522;cursor:pointer}button:disabled{opacity:.4;cursor:wait}button:hover:enabled{filter:brightness(1.1)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button.secondary{background:#293145;color:#fff;border-color:#424d64}button.subtle{background:transparent;color:var(--muted);border-color:var(--line)}.buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.room-heading{display:flex;justify-content:space-between;align-items:center;margin:36px 0 22px;gap:20px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}.screen{overflow:hidden}#screen-wrap{position:relative;aspect-ratio:4/3;background:#090c14}video{display:block;width:100%;height:100%;object-fit:contain;outline:none}#cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(ellipse at center,#303b52,#101521)}#cover p{max-width:360px;font-size:13px}#cover .arena-mark{font-size:100px;color:var(--lime);line-height:1.3;transform:rotate(-15deg)}.screen-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;font-size:11px;color:var(--muted);flex-wrap:wrap}.screen-toolbar button{font-size:11px;min-height:36px;padding:8px 10px}.volume{display:flex;align-items:center;gap:6px;font-size:10px}.volume input{width:70px;padding:0;min-height:28px;accent-color:var(--lime)}.lobby{padding:24px}.lobby>label{margin:22px 0}.member{display:flex;align-items:center;gap:10px;margin:14px 0}.member .number{width:32px;height:32px;border-radius:50%;background:#30394c;display:grid;place-items:center;font-size:12px;color:var(--lime)}.member .details{flex:1}.member strong{font-size:13px;display:block}.member small{font-size:10px;color:var(--muted)}.dot{width:6px;height:6px;border-radius:50%;background:#687389}.dot.online{background:var(--lime)}.rules{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.rules select{padding:10px 6px}.small{font-size:11px}.lobby button{width:100%;margin-top:8px}#scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.score{background:#151b29;padding:12px;border-top:3px solid var(--player-color)}.score strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score .damage{font:700 29px 'Barlow Condensed',sans-serif;margin-right:8px}.score small{font-size:10px;color:var(--muted)}.score.out{opacity:.45}.controls{padding:24px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.controls p{font-size:12px;max-width:650px;margin:8px 0}kbd{font:inherit;color:#fff;background:#313a4c;border:1px solid #4b566e;border-radius:4px;padding:2px 5px}#touch{display:none;gap:16px;align-items:center;user-select:none;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,42px);gap:4px}.dpad button{padding:4px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.actions button{padding:10px;background:#303b50;color:#fff}footer{padding:34px 0 0;color:#7e8ba6;font-size:11px;line-height:1.9}[hidden]{display:none!important}.screen:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#090c14;border:none;border-radius:0}.screen:fullscreen #screen-wrap{height:calc(100vh - 150px);width:100%;aspect-ratio:auto}.screen:fullscreen #scoreboard{flex-shrink:0}.screen:fullscreen .screen-toolbar{flex-shrink:0}@media(pointer:coarse){#touch{display:flex}}@media(max-width:950px){.layout{grid-template-columns:minmax(0,1fr) 250px}.lobby{padding:18px}.controls{flex-direction:column;align-items:start}main{padding-top:30px}}@media(max-width:720px){header{padding:20px 5%;align-items:start}header a span{display:none}.badge{font-size:8px}.layout{grid-template-columns:1fr}.intro h1{font-size:90px}.lede{font-size:15px}#entry{grid-template-columns:1fr;gap:20px;padding:22px}.room-heading{align-items:start;flex-direction:column}.room-heading h2{font-size:30px}.lobby{order:-1}.rules{max-width:300px}#members{display:grid;grid-template-columns:1fr 1fr}.member{margin:8px 0}.lobby>label{margin:12px 0}.lobby #host-controls{border-top:1px solid var(--line);padding-top:15px}.score{padding:8px}.score strong{font-size:10px}.score .damage{font-size:25px}.score small{font-size:9px}#touch{flex-wrap:wrap;gap:22px}.controls{padding:18px}.screen-toolbar .buttons{gap:5px}}

/* Keep room entry and match start easy to find. */
.entry-form .buttons button{flex:1;font-size:16px;min-height:52px}.room-heading #start{font-size:15px;min-width:190px;min-height:50px}.room-heading .buttons{justify-content:flex-end}@media(max-width:720px){.room-heading .buttons{width:100%;justify-content:flex-start}.room-heading #start{width:100%}main{padding-top:22px}.intro h1{font-size:76px;margin:18px 0}.lede{margin-bottom:12px}#notice{margin:20px 0 18px}#entry{gap:12px}#entry h2{margin-bottom:8px}#entry p{margin:6px 0}}

/* Touch controls remain reachable in fullscreen and can be enabled on any device. */
#touch{display:flex;padding:14px 16px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line)}.screen:fullscreen #screen-wrap{height:auto;min-height:0;flex:1}.screen:fullscreen #touch{flex-shrink:0;padding:8px 12px;gap:12px}.screen:fullscreen{height:100dvh;overflow:auto}.screen:fullscreen .screen-toolbar{justify-content:center}.screen:fullscreen #scoreboard{max-height:120px;overflow:auto}

@media(max-width:720px){.entry-form{min-width:0}.intro h1{font-size:clamp(48px,14vw,76px)}}#cover #play-again{margin-top:12px}

@media(max-width:720px){main{display:flex;flex-direction:column}.intro{order:0}#entry{order:1}#notice{order:2}#room{order:3}footer{order:4}#entry h2{font-size:28px}#entry p{font-size:13px;line-height:1.5}}

/* Fighter cards: damage is cumulative, while stock markers show remaining lives. */
.volume output{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums;color:#eff4ff}
.screen{display:grid;min-width:0;grid-template-areas:"video" "scores" "tools" "touch";grid-template-columns:minmax(0,1fr)}
#screen-wrap{grid-area:video}.screen-toolbar{grid-area:tools}#touch{grid-area:touch}
#scoreboard{grid-area:scores;display:block;background:#0b101b;border-top:1px solid #364056;padding:12px}
#scoreboard:empty{display:none}
.scoreboard-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 10px}
.scoreboard-title{font-size:10px;font-weight:800;letter-spacing:.16em;color:#e3eaf7}
.scoreboard-help{font-size:10px;color:#aab9d0;text-align:right}
.score-grid{display:grid;grid-template-columns:repeat(var(--score-columns,4),minmax(0,1fr));gap:8px}
.score{--damage-color:#fff;position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;background:linear-gradient(155deg,#222b3b,#151c2b 65%);border:1px solid #364159;border-top:3px solid var(--player-color);border-radius:9px;color:#fff;box-shadow:0 3px 10px #0002}
.score.you{background:linear-gradient(145deg,#29392f,#18222d 75%);border-color:#d5ff6770;border-top-color:var(--player-color);box-shadow:inset 0 0 0 1px #d5ff6726}
.score-heading{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:9px;min-height:47px}
.score-player{display:grid;place-items:center;min-width:32px;height:34px;font:800 16px 'Barlow Condensed',Impact,sans-serif;color:#0b111c;background:var(--player-color);border-radius:5px;box-shadow:0 2px 9px #0003}
.score-identity{min-width:0}
.score .score-name{font-size:clamp(16px,1.4vw,21px);line-height:1.12;min-height:1.12em;margin:0 0 5px;color:#fff;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
.score-detail{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0}
.score-fighter{font-size:12px;line-height:1.2;color:#bdcbe2;overflow-wrap:anywhere}
.score-badge{font-size:8px;font-weight:800;letter-spacing:.05em;color:#c7d4ea;border:1px solid #65738b70;border-radius:3px;padding:2px 4px;line-height:1}
.score.you .score-badge{background:var(--lime);color:#162214;border-color:var(--lime)}
.score-metrics{display:flex;align-items:end;justify-content:space-between;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid #c0d3ef15}
.damage-metric{min-width:0;display:grid;gap:3px}.metric-label{font-size:9px;line-height:1.2;font-weight:800;letter-spacing:.14em;color:#aebdd4}
.score .damage{display:block;font:800 clamp(42px,4vw,60px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em;color:var(--damage-color);margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.score .damage-unit{font-size:.5em;margin-left:2px;letter-spacing:0}
.score[data-damage="warm"]{--damage-color:#ffe19a}.score[data-damage="high"]{--damage-color:#ffac73}.score[data-damage="critical"]{--damage-color:#ff7979}
.score .lives{display:grid;justify-items:end;gap:7px;min-width:0;padding:0 0 3px;background:none;border:0;border-radius:0;white-space:normal;color:#e1e9f8}
.lives-count{font:800 14px/1 'DM Sans',system-ui,sans-serif;white-space:nowrap;letter-spacing:.02em}
.stock-dots{display:flex;justify-content:end;flex-wrap:wrap;gap:3px;max-width:57px}
.stock-dot{display:block;width:10px;height:10px;border-radius:50%;border:1px solid #718099;background:#0b111c}
.stock-dot.active{background:var(--player-color);border-color:var(--player-color);box-shadow:0 0 6px color-mix(in srgb,var(--player-color) 30%,transparent)}
.score.out{opacity:1;background:linear-gradient(155deg,#232732,#171c28);border-top-color:#7b879f}.score.out .damage{color:#aebbd1}.score.out .score-player{color:#d4ddeb;background:#465067}.score.out .metric-label{color:#aebbd4}
.score.winner .metric-label{color:var(--lime)}
.score.status-card .damage{font-size:clamp(24px,2.2vw,34px);line-height:1;color:#e8edf7;letter-spacing:0}
#scoreboard[data-state="selecting"] .score-metrics,#scoreboard[data-state="stage"] .score-metrics{min-height:49px}.scoreboard-heading:only-child{padding-bottom:0}
.screen:fullscreen{display:grid;grid-template-areas:"video" "scores" "tools" "touch";grid-template-rows:minmax(120px,1fr) auto auto auto;grid-template-columns:minmax(0,1fr);width:100vw;height:100dvh;min-height:0;justify-content:stretch;overflow:auto}
.screen:fullscreen #screen-wrap{height:100%;width:100%;min-height:0;min-width:0;aspect-ratio:auto;flex:initial}
.screen:fullscreen #scoreboard{max-height:none;overflow:visible;flex:initial}
.screen:fullscreen .screen-toolbar{padding:8px 12px}.screen:fullscreen #touch{padding:8px 12px}
.member .details{min-width:0;overflow-wrap:anywhere}
.stage-rule{margin-bottom:16px}.room-heading #stage-current{margin:0;color:#c8d6ee}
.lobby .kick-player{width:auto;flex-shrink:0;margin:0;padding:6px 9px;min-height:34px;font-size:11px;background:#452b34;border:1px solid #9a586d;color:#ffd5de}
#kick-dialog{width:min(440px,calc(100vw - 32px));padding:26px;border:1px solid #59647c;border-radius:16px;background:#191f2d;color:#f4f6fc;box-shadow:0 20px 80px #0009}
#kick-dialog::backdrop{background:#030711bd}#kick-dialog h2{font-size:30px;overflow-wrap:anywhere}#kick-detail{font-size:14px;line-height:1.6}#kick-dialog .buttons{justify-content:end;margin-top:22px}#kick-confirm{background:#ff9aab;color:#2e0b15}
@media(max-width:720px){.lobby:has(.kick-player) #members{grid-template-columns:1fr}}
@media(min-width:1600px){.screen:fullscreen .score-grid{grid-template-columns:repeat(var(--score-wide-columns,8),minmax(0,1fr))}}
@media(max-width:720px){.layout{grid-template-columns:minmax(0,1fr)}#scoreboard{padding:10px}.score-grid{grid-template-columns:repeat(var(--score-mobile-columns,2),minmax(0,1fr));gap:7px}.score{padding:10px;gap:9px}.score-heading{gap:7px}.score-player{min-width:27px;height:30px;font-size:14px}.score .score-name{font-size:16px}.score .damage{font-size:clamp(36px,12vw,46px)}.score-metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.score .lives{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0}.scoreboard-heading{align-items:start;flex-direction:column;gap:4px}.scoreboard-help{text-align:left}.lives-count{font-size:12px}.stock-dot{width:8px;height:8px}.stock-dots{max-width:52px}.score.status-card .damage{font-size:25px}}
@media(max-height:760px) and (min-width:721px){.screen:fullscreen #scoreboard{padding:7px 10px}.screen:fullscreen .scoreboard-heading{padding-bottom:6px}.screen:fullscreen .score{padding:7px 10px;gap:6px}.screen:fullscreen .score-heading{min-height:35px}.screen:fullscreen .score-name{font-size:16px;white-space:nowrap;display:block;text-overflow:ellipsis}.screen:fullscreen .score-metrics{padding-top:6px}.screen:fullscreen .damage{font-size:40px}.screen:fullscreen .status-card .damage{font-size:26px}.screen:fullscreen .screen-toolbar{padding:5px 8px}}
@media(prefers-reduced-motion:no-preference){.score .damage{transition:color .2s}}

#relay-video{display:block;width:100%;height:100%;object-fit:contain;outline:none}