/* Character-select presentation follows the supplied Dimension Fighters board. */
:root{--ice:#bdc9fa;--line:#66739f;--indigo:#080a1c}
body.selecting{background:#060716;color:#eaf0ff}
body.selecting header{height:48px;min-height:48px;padding:.5rem 2.2vw;border:0;background:#080917}
body.selecting header strong{font-size:.78rem;color:#8f9bce;letter-spacing:.2em}
body.selecting header span{display:none}
body.selecting #net-status{font-size:.8rem;color:#a9b4d9}
body.selecting header button{font-size:.8rem;padding:.28rem .8rem}
body.selecting footer{display:none}
body.selecting #viewport{height:calc(100dvh - 48px);min-height:450px}
#lobby{background:#070916;display:block;padding:0;isolation:isolate;overflow:auto}
#lobby::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 10%,#32309555,transparent 35%),radial-gradient(ellipse at 86% 90%,#492abe55,transparent 32%),radial-gradient(ellipse at 50% 55%,transparent 35%,#30216835 55%,transparent 67%),radial-gradient(ellipse at 50% 43%,transparent 47%,#3f30c455 49%,#19105866 50%,transparent 53%,#35268844 54%,transparent 60%),linear-gradient(130deg,#070913,#0d0921 55%,#040812)}
#lobby::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,#b4a9ff 1px,transparent 1.5px),radial-gradient(circle,#535cba 1px,transparent 1.4px);background-size:217px 163px,127px 257px;background-position:24px 47px,68px 84px}
.select-screen{width:min(1550px,96%);min-height:100%;margin:auto;padding:1.2rem 0 .65rem;display:flex;flex-direction:column;gap:clamp(.6rem,1.5vh,1rem)}
.select-title{position:relative;display:flex;justify-content:center;align-items:center;gap:1.6rem;min-height:clamp(65px,10vh,110px);isolation:isolate}
.select-title:before,.select-title:after{content:"";height:1px;width:11%;background:linear-gradient(90deg,transparent,#a6aeff)}
.select-title:after{transform:rotate(180deg)}
.select-title h1{font-size:clamp(1.2rem,2.35vw,2.6rem);font-weight:500;letter-spacing:.3em;line-height:1.3;text-align:center;margin:0;text-shadow:0 0 18px #727dff8a;padding-left:.3em}
.dimension-mark{position:absolute;z-index:-1;width:105px;height:105px;left:calc(50% - 52px);top:calc(50% - 52px);border:1px solid #6462e65e;border-radius:50%;box-shadow:0 0 12px #5044dc19,inset 0 0 17px #413e9819}
.dimension-mark:before,.dimension-mark:after{content:"";position:absolute;left:50%;width:2px;height:26px;background:#d8f1ff;box-shadow:0 0 9px 3px #554aff;top:-13px}
.dimension-mark:after{top:auto;bottom:-13px}
.roster-heading{display:flex;align-items:center;justify-content:space-between;width:91%;margin:auto;color:#a1afd8;gap:.6rem}
.roster-heading h2{font-size:.8rem;letter-spacing:.18em;font-weight:600;margin:0}
#select-hint{font-size:.8rem}
.roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,.75vw,12px);width:91%;margin:0 auto;flex:1;align-content:center}
.roster-tile{position:relative;aspect-ratio:1.24;min-width:0;max-height:155px;overflow:hidden;padding:0;border:2px solid #59648b;border-radius:2px;background:linear-gradient(130deg,#161925,#0c101b);box-shadow:inset 0 0 16px #0008;color:#69718f;transition:border-color .13s,box-shadow .13s,transform .13s}
.roster-tile.unavailable{display:grid;place-items:center;font-weight:750;font-size:clamp(1.7rem,4vw,4.5rem);color:#68708d;text-shadow:0 2px 3px #000;opacity:.8;user-select:none}
.roster-tile.unavailable:after{content:"";position:absolute;inset:9% 18%;border:1px solid #2b345442;border-radius:50%}
.roster-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.roster-tile.saffron img{object-position:50% 33%;transform:scale(1.1)}
.roster-tile.elro img{object-position:54% 23%;transform:scale(1.16)}
.roster-tile.creston img{object-position:50% 25%;transform:scale(1.12)}
.roster-tile.creston .fighter-name{font-size:clamp(.63rem,.92vw,.85rem);letter-spacing:.02em}
.roster-tile.selected{border-color:var(--player);box-shadow:0 0 17px color-mix(in srgb,var(--player) 55%,transparent),inset 0 0 0 1px var(--player)}
.roster-tile:not(.unavailable):hover{border-color:#e8edff;transform:translateY(-2px)}
.roster-tile[aria-disabled=true]{cursor:default}
.fighter-name{position:absolute;inset:auto 0 0;padding:.6rem .5rem .22rem;background:linear-gradient(transparent,#090914ed);color:#fff;text-transform:uppercase;font-size:clamp(.75rem,1.1vw,1rem);font-weight:750;letter-spacing:.07em;text-align:left}
.tile-tokens{position:absolute;top:5px;left:5px;right:5px;display:flex;gap:3px;flex-wrap:wrap}
.player-token{display:grid;place-items:center;min-width:29px;height:29px;padding:0 4px;background:var(--player);color:#111526;border:2px solid #ffffffbb;border-radius:50%;box-shadow:0 2px 5px #0009;font-weight:900;font-size:12px;line-height:1}
.player-token.confirmed{border-color:#fff;box-shadow:0 0 8px var(--player)}
.player-panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin-top:.35rem}
.select-player{position:relative;overflow:hidden;min-width:0;aspect-ratio:1.76;max-height:222px;border:2px solid #5d6892;border-radius:2px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:linear-gradient(130deg,#151a2a,#0c0f19)}
.select-player.occupied{border-color:var(--player);box-shadow:inset 0 0 30px color-mix(in srgb,var(--player) 20%,transparent)}
.panel-number{position:absolute;left:0;top:0;z-index:3;font-size:clamp(1rem,1.65vw,1.5rem);font-weight:800;letter-spacing:.07em;line-height:1;padding:.4rem 1.7rem .5rem .8rem;background:#414b70;color:#c1cbf9;clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.occupied .panel-number{background:var(--player);color:#131826}
.select-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 23%;filter:saturate(.85);transition:opacity .15s}
.elro .select-art{object-position:50% 6%}
.creston .select-art{object-position:50% 12%}
.creston .panel-fighter{font-size:clamp(.95rem,1.8vw,1.6rem)}
.select-player.occupied:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#090912f5,transparent 66%),linear-gradient(90deg,#100e1280,transparent 45%);pointer-events:none}
.panel-state{position:absolute;right:8px;top:8px;z-index:3;background:#090d18e8;color:var(--player);font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:.15rem .4rem;border-radius:2px}
.is-ready .panel-state{background:var(--player);color:#111526}
.panel-identity{position:absolute;bottom:10px;left:14px;right:12px;z-index:2;display:flex;flex-direction:column}
.panel-fighter{font-size:clamp(1.2rem,2.25vw,2rem);text-transform:uppercase;line-height:1.05;letter-spacing:.035em;text-shadow:0 2px 8px #000}
.panel-name{color:#d7ddef;font-size:.8rem;margin-top:.3rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.35rem;color:#9caad4}
.controller-icon{width:clamp(40px,5vw,78px);margin-top:.5rem;opacity:.85}
.controller-icon svg{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;width:100%;filter:drop-shadow(0 0 4px #687dd94f)}
.empty-label{font-size:clamp(.65rem,.95vw,.9rem);letter-spacing:.13em;text-align:center}
.add-cpu,.cpu-controls button{position:relative;z-index:4;padding:.25rem .6rem;border:1px solid #97a6d6;background:#161e36ee;border-radius:3px;color:#e9edff;font-size:.78rem;min-height:30px;cursor:pointer}
.add-cpu:hover,.cpu-controls button:hover{background:#344367;border-color:var(--player)}
.add-cpu:disabled,.cpu-controls button:disabled{opacity:.4;cursor:default}
.cpu-token{border-style:dashed}
.cpu-controls{position:absolute;bottom:7px;left:10px;right:10px;z-index:4;display:flex;justify-content:space-between;gap:4px}
.cpu-player .panel-identity{bottom:44px}
.cpu-player .panel-name{display:none}
.cpu-controls .cpu-choice{border-color:var(--player)}
.select-controls{display:flex;align-items:end;justify-content:center;gap:.65rem;margin:.15rem 0 0}
.select-controls label{font-size:.75rem;color:#a4b1d8;gap:.2rem}
.name-field{width:min(210px,21%)}
.select-controls input{background:#0c1020e6;border:1px solid #495779;border-radius:2px;padding:.47rem .65rem;font-size:.9rem;color:#e6edff}
.select-controls button{border-radius:2px;border-color:#7581ae;color:#dce5ff;background:#202842;padding:.48rem 1rem;font-size:.9rem;white-space:nowrap;min-height:38px}
.select-controls .primary{background:#d8def7;color:#11162b;border-color:#e6ecff;box-shadow:0 0 14px #788bc32e;font-weight:750}
.select-controls button:disabled{opacity:.4}
#room-controls{margin:0;display:flex;align-items:end;gap:.6rem;min-width:0}
.invite-field{max-width:240px;min-width:100px}
#copy{margin:0}
.select-status{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.25rem 1.5rem;color:#c0cbed}
#room-status{font-size:.85rem;margin:0;text-align:center}
.menu-help{font-size:.75rem;color:#8592bb}
#error{margin:.1rem;text-align:center;font-size:.9rem}
.connection-note{font-size:.75rem;text-align:center;color:#8490b2}
.connection-note summary{cursor:pointer}.connection-note p{max-width:800px;margin:.5rem auto;line-height:1.5}
@media(min-width:1500px){.select-screen{padding-top:1.8rem;gap:1.1rem}.roster-tile{max-height:180px}}
@media(max-height:750px) and (min-width:900px){.select-screen{gap:.45rem;padding-top:.25rem}.select-title{min-height:58px}.dimension-mark{width:66px;height:66px;left:calc(50% - 33px);top:calc(50% - 33px)}.roster-tile{aspect-ratio:1.6;max-height:110px}.select-player{max-height:160px;aspect-ratio:2.1}.roster-heading{margin-bottom:.15rem}}
@media(max-width:800px){.select-title{gap:.7rem;min-height:70px}.select-title h1{letter-spacing:.17em;font-size:1.2rem}.select-title:before,.select-title:after{width:5%}.roster{width:100%;grid-template-columns:repeat(6,minmax(0,1fr))}.roster-heading{width:100%;align-items:start}.roster-heading h2{font-size:.7rem}#select-hint{font-size:.75rem;text-align:right}.roster-tile.unavailable{font-size:2rem}.player-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.select-player{aspect-ratio:2.1;max-height:160px}.select-controls{flex-wrap:wrap}.name-field{width:40%}#room-controls{flex-wrap:wrap;justify-content:center;width:100%}.invite-field{flex:1}.select-screen{gap:.7rem}.empty-label{font-size:.75rem}.panel-fighter{font-size:1.4rem}.panel-state{font-size:.7rem}.player-token{min-width:24px;height:24px;font-size:11px}.tile-tokens{top:3px;left:3px;gap:1px}.menu-help{display:none}body.selecting header{padding:.5rem .75rem}body.selecting header strong{font-size:.7rem}body.selecting #net-status{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.roster-tile,.select-art{transition:none}}

body.results header{min-height:48px;height:48px;border:0;padding:.5rem 2.2vw;background:#080917}
#sound-controls{position:relative;z-index:30;font-size:.8rem;flex-shrink:0}
#ko-effects{position:absolute;inset:0;pointer-events:none;z-index:4}
body.selecting #ko-effects,body.results #ko-effects{visibility:hidden}
#sound-summary{cursor:pointer;padding:.3rem .5rem;color:#d4daf3;white-space:nowrap}
.sound-panel{position:absolute;right:0;top:calc(100% + 8px);width:260px;max-width:80vw;padding:16px;background:#101527f5;border:1px solid #7e8bb3;border-radius:5px;box-shadow:0 10px 35px #0009}
.sound-panel button{width:100%;font-size:.85rem;margin-bottom:12px}
.sound-panel label{display:flex;justify-content:space-between;font-size:.85rem;color:#e1e7fa}
.sound-panel input{width:100%;padding:0;margin:6px 0 14px;accent-color:#b9a8ff}
#audio-status{font-size:.75rem;color:#b7c4e2;line-height:1.5;margin:0}
body.results header strong{font-size:.78rem;color:#8f9bce}
body.results header span,body.results footer{display:none}
body.results #viewport{height:calc(100dvh - 48px);min-height:500px}
body.results #hud,body.results #player-tags{visibility:hidden}
.victory-screen{position:absolute;inset:0;z-index:10;overflow:auto;outline:none;background:radial-gradient(ellipse at 28% 50%,#5c3a714f,transparent 60%),radial-gradient(ellipse at 100% 0,#382c624f,transparent 45%),#080a18}
.victory-screen:before{content:"";position:absolute;inset:7% 7% 7% 1%;pointer-events:none;border:1px solid #b4a3f01c;border-radius:50%}
.victory-layout{position:relative;min-height:100%;max-width:1320px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:24px 5vw}
.victory-portrait{height:clamp(360px,80dvh,1000px);display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
#victory-art{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 24px #0009);animation:victory-enter .65s ease-out both}
#victory-art[hidden]{display:none}
.victory-copy{padding:24px 0;animation:victory-enter .7s ease-out both}
.victory-eyebrow{color:#acb5d5;font-size:.73rem;letter-spacing:.18em;line-height:1.8;margin:0 0 22px}
#victory-heading{font-weight:400;line-height:1.1;margin:0;color:#f5efdf;font-size:clamp(1.7rem,3.3vw,3rem)}
#victory-heading strong{display:block;text-transform:uppercase;color:var(--winner);font-size:clamp(3.4rem,6.9vw,7rem);letter-spacing:-.03em;margin-top:8px;text-shadow:0 0 40px color-mix(in srgb,var(--winner) 25%,transparent)}
.victory-player{font-size:1rem;color:#d9ddef;margin:24px 0 34px;overflow-wrap:anywhere}
#return-room{background:var(--winner);border-color:var(--winner);color:#101325;min-width:220px;padding:.85rem 1.3rem;border-radius:3px;font-weight:750;display:inline-flex;justify-content:space-between;gap:30px}
#return-room:hover{filter:brightness(1.1)}
.victory-home{color:#95a1c1;max-width:300px;line-height:1.6;font-size:.8rem;margin-top:18px}
#victory-note{font-size:.85rem;color:#d2bbeb;min-height:2.5em;max-width:360px}
.draw-emblem{display:none;color:var(--winner);font-size:clamp(120px,25vw,280px);text-shadow:0 0 90px #9980ef}
.is-draw .draw-emblem{display:block}
@keyframes victory-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.victory-layout{grid-template-columns:1fr;gap:0;text-align:center;padding:18px 22px}.victory-portrait{height:49dvh;min-height:280px}.victory-copy{padding:18px 0 0}.victory-eyebrow{margin-bottom:12px;font-size:.64rem}#victory-heading{font-size:1.7rem}#victory-heading strong{font-size:3.7rem}.victory-player{margin:14px 0 18px}.victory-home,#victory-note{margin-left:auto;margin-right:auto}body.results #net-status{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){#victory-art,.victory-copy{animation:none}}