#character-select{--lobby-cyan:#76e5d3;box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;isolation:isolate;background:#06151a;color:#d0e6e4;text-align:left}
#character-select::backdrop{background:#041013}#character-select:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(#021012bb,#061a1bdc),url('/arena/assets/maps/doca-tide-v1/background.png') center/cover;opacity:.9}#character-select:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 63%,#21ba9f22,transparent 42%),radial-gradient(ellipse at 12% 65%,#2ce5b219,transparent 23%),radial-gradient(ellipse at 89% 65%,#2ce5b219,transparent 23%);pointer-events:none}
.select-shell{max-width:1550px;height:100%;padding:0 30px;margin:auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;box-sizing:border-box;position:relative}
#character-select .select-topbar{position:static;inset:auto;z-index:auto;pointer-events:auto;background:none;display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;border-bottom:1px solid #4c8d8938;gap:20px}.select-topbar .dock-back{padding:5px 0;font-size:10px;color:#8dc3bf}.select-title{text-align:center}.select-title>small{font:800 8px system-ui;letter-spacing:.25em;color:#72c6bc}.select-title h1{margin:4px 0 0;color:#c6e9e3;font:800 16px system-ui;letter-spacing:.1em;text-transform:uppercase}.select-context{min-width:130px;text-align:right;display:flex;flex-direction:column;gap:4px}.select-context span{font-size:9px;color:#abd5cf}.select-context small{font-size:7px;letter-spacing:.1em;color:#659c96}
.select-roster{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;min-height:110px;position:relative;border:0;padding:8px 0 3px;z-index:3}.roster-tools{position:relative;justify-self:start}.roster-tools>summary{cursor:pointer;color:#8fb8b3;font:700 9px system-ui;letter-spacing:.05em;padding:9px 0;list-style:none}.roster-tools>summary:after{content:'⌄';margin-left:12px;color:#70cdbd}.roster-tools[open]>summary{color:#b4eee2}.roster-tool-panel{position:absolute;top:35px;left:0;width:300px;padding:15px;background:#0a2529f5;border:1px solid #4c8e87;box-shadow:0 15px 50px #000a;z-index:10}.champion-search{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #3d706f;background:#061c22;color:#7fc1b8}.champion-search svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}.champion-search input{width:100%;min-width:0;background:transparent;color:#def9f0;border:0;outline:none;font:11px system-ui}.champion-search input::placeholder{color:#77a9a2}.roster-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 5px}.roster-filters button{cursor:pointer;border:1px solid #3f7370;background:#0a2228;color:#8dbdb4;padding:7px 8px;font:700 8px system-ui}.roster-filters button[aria-pressed=true]{border-color:#9cdacf;background:#22544b;color:#d4fff0}.roster-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 0}.roster-heading h2{font:600 10px system-ui;color:#a5c6be;margin:0}.roster-heading span{font-size:8px;color:#739e96}.roster-note{text-align:right;font-size:8px;line-height:1.6;color:#78a79f;margin:0;max-width:175px;justify-self:end}.champion-list{display:flex;justify-content:center;gap:13px;align-items:start;min-height:90px;max-width:100%;overflow:visible;padding:3px 7px}.champion-list>button{position:relative;width:76px;min-width:76px;height:94px;border:0;background:transparent;padding:0;cursor:pointer;isolation:isolate;color:#add3cb;transition:transform .18s}.champion-list>button:before{content:'';position:absolute;top:0;left:3px;width:70px;height:72px;background:#428b83;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);z-index:-1}.champion-list>button img{display:block;position:relative;width:64px;height:66px;margin:3px auto 0;object-fit:cover;object-position:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:saturate(.8) brightness(.85);transition:filter .18s}.champion-list>button>span{display:block;position:relative;padding:6px 0 0;text-align:center;border:0;background:none;line-height:1.2}.champion-list strong{font:800 8px system-ui;letter-spacing:.035em}.champion-list small,.champion-list>button>b,#character-select .champion-mastery{display:none}.champion-list>button:hover,.champion-list>button.is-previewing{transform:translateY(-3px)}.champion-list>button:hover:before,.champion-list>button.is-previewing:before{background:#94e5d6}.champion-list>button.is-selected:before{background:#f8d27e}.champion-list>button.is-selected strong{color:#ffdf9b}.champion-list>button.is-selected img,.champion-list>button.is-previewing img{filter:brightness(1.1) saturate(1.05)}.champion-list>button:focus-visible{outline:2px solid #a7eddb;outline-offset:4px}.champion-list>button[hidden]{display:none}.roster-empty{position:absolute;left:50%;transform:translateX(-50%);top:45%;width:280px;text-align:center;margin:0;color:#a9c7bc;font-size:10px}.roster-empty[hidden]{display:none}
.champion-picker{min-height:0;display:block;position:relative}.champion-picker:before,.champion-picker:after{content:'';position:absolute;top:60%;width:180px;height:34px;border:2px solid #3f8e7944;border-radius:50%;box-shadow:0 17px 0 7px #06161c,0 23px 0 10px #2b5e5940,0 -25px 55px #4ce0b411;z-index:-1;pointer-events:none}.champion-picker:before{left:0}.champion-picker:after{right:0}
#champion-preview{--preview-color:#ffd179;display:grid;grid-template-columns:minmax(155px,220px) minmax(0,1fr) minmax(155px,220px);grid-template-rows:auto minmax(0,1fr);column-gap:20px;min-height:0;height:100%;border:0;background:none;overflow:visible;position:relative}#champion-preview[data-preview=itan]{--preview-color:#ffae89}#champion-preview[data-preview=polato]{--preview-color:#c5aff2}#champion-preview[data-preview=kuro]{--preview-color:#f3d477}.preview-heading{grid-column:2;grid-row:1;text-align:center;padding:0 0 2px;position:relative;z-index:2;pointer-events:none}.preview-heading h2{margin:0;color:#f0f8ee;font:900 clamp(22px,3vw,39px)/1.1 system-ui;letter-spacing:.065em;text-transform:uppercase;text-shadow:0 3px 12px #00120f}.preview-heading small{display:block;margin-top:8px;color:#7ccab9;font:700 9px system-ui;letter-spacing:.1em}.preview-stage{grid-column:2;grid-row:2;min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}#champion-preview-canvas{display:block;position:relative;width:100%;height:100%;min-height:0;object-fit:contain;background:transparent;image-rendering:auto;z-index:1}
.champion-dossier{grid-column:1;grid-row:1/3;align-self:center;padding:17px 0 40px;position:relative;z-index:2}.dossier-label{font-size:8px;color:#5eb39f;letter-spacing:.18em;font-weight:800;margin:0 0 10px}.preview-flavor{font:800 clamp(17px,1.7vw,23px)/1.25 system-ui;margin:0 0 12px;color:#b2efdb}.preview-summary{font:11px/1.8 system-ui;color:#8bb7aa;margin:0 0 20px;max-width:208px}.preview-stats{display:flex;flex-direction:column;gap:10px;padding-top:13px;border-top:1px solid #4b887755;max-width:180px;color:#70a696;font:700 8px system-ui;letter-spacing:.08em}.preview-stats b{display:inline-block;min-width:46px;font:800 18px system-ui;color:#c0eadb;margin-right:5px}.preview-live{display:inline-block;margin-top:20px;border:1px solid #347461;color:#80b4a2;background:#0c29253d;padding:6px 8px;font:700 7px system-ui;letter-spacing:.1em}.preview-live:before{content:'';display:inline-block;width:4px;height:4px;background:#7debc7;box-shadow:0 0 10px #78f1cc;margin-right:6px}
.preview-skill{grid-column:3;grid-row:1/3;align-self:center;position:relative;margin-top:-30px;padding:16px;border:1px solid #508c6f;background:linear-gradient(130deg,#10362dc7,#071c22e8);box-shadow:0 8px 35px #00191455;z-index:2}.preview-skill>img{width:51px;height:51px;object-fit:cover;border:1px solid #99b877;image-rendering:pixelated;margin-bottom:12px}.preview-skill small{display:block;color:#7fbaa3;font:700 7px/1.5 system-ui;letter-spacing:.1em}.preview-skill h3{margin:7px 0 10px;color:var(--preview-color);font:800 17px/1.15 system-ui}.preview-skill p{color:#95c9b3;font:10px/1.7 system-ui;margin:0}.preview-replay{display:block;width:100%;border:1px solid #52977c;background:#17483999;color:#a4e6c4;font:800 8px system-ui;letter-spacing:.07em;padding:9px;margin:17px 0 0;cursor:pointer}.preview-replay:hover{background:#24634d;border-color:#88dcaf}.preview-replay:focus-visible{outline:2px solid #b9f3dc;outline-offset:3px}
.select-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;position:relative;padding:10px 0 20px;border-top:1px solid #3e7b6340;min-height:80px}.selection-lock{display:flex;align-items:center;gap:10px;min-width:0}.selection-lock>img{width:36px;height:36px;object-fit:cover;border:1px solid #4e9f80}.selection-lock small{display:block;color:#538b78;font-size:6px;letter-spacing:.13em;margin-bottom:4px}.selection-lock strong{color:#a9d4b9;font:800 11px system-ui}.selection-lock span{display:block;color:#699c83;font-size:8px;margin-top:4px}#selected-champion-mastery{font:400 7px system-ui;color:#82a185;margin-left:7px}.selection-guide{justify-self:end;text-align:right;font-size:8px;line-height:1.7;color:#6f9e80;margin:0;max-width:180px}.select-bottom #confirm-champion{grid-column:2;grid-row:1;min-width:230px;padding:16px 35px;border:1px solid #ffe092;background:linear-gradient(#ffe98c,#eab342 55%,#99702c);color:#26331d;box-shadow:0 0 0 4px #5b572144,0 0 34px #e7ca5855,inset 0 0 0 2px #ffedaa55;font:900 14px system-ui;letter-spacing:.1em;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);cursor:pointer;text-shadow:0 1px #f7edaa}.select-bottom #confirm-champion:hover{filter:brightness(1.15)}.select-bottom #confirm-champion:focus-visible{filter:brightness(1.25);outline:3px solid #c1ffe7;outline-offset:3px}#combat-hud #skills button[hidden]{display:none}
@media(max-width:980px){.select-shell{padding:0 18px}#champion-preview{grid-template-columns:160px minmax(0,1fr) 170px;column-gap:8px}.preview-summary{font-size:10px}.preview-skill{padding:12px}.preview-skill h3{font-size:15px}.preview-skill p{font-size:9px}.champion-list{gap:5px}.champion-list>button{width:68px;min-width:68px}.champion-list>button:before{left:1px;width:66px;height:68px}.champion-list>button img{width:60px;height:62px}.roster-note{font-size:7px}.preview-heading h2{font-size:26px}.select-title h1{font-size:13px}}
@media(max-height:620px) and (min-width:721px){.select-topbar{padding:8px 0}.select-roster{min-height:92px;padding-top:4px}.champion-list>button{height:80px}.champion-list>button:before{width:60px;height:61px;left:8px}.champion-list>button img{width:54px;height:55px}.champion-list>button>span{padding-top:5px}.preview-heading h2{font-size:25px}.select-bottom{min-height:67px;padding:8px 0 12px}.select-bottom #confirm-champion{padding:12px 28px}.preview-summary{font-size:9px;margin-bottom:10px}.champion-dossier{padding-bottom:15px}.preview-stats{gap:6px}.preview-skill{margin-top:0;padding:10px}.preview-skill>img{width:37px;height:37px;margin-bottom:7px}.preview-replay{margin-top:10px}}
@media(max-width:720px){.select-shell{padding:0 13px;grid-template-rows:auto auto minmax(0,1fr) auto}.select-topbar{gap:7px;padding:11px 0}.select-title h1{font-size:11px;letter-spacing:.04em}.select-title>small{font-size:6px}.select-topbar .dock-back{font-size:8px}.select-context{display:none}.select-roster{grid-template-columns:1fr;min-height:90px;padding:5px 0;gap:0}.champion-list{grid-column:1;grid-row:1;padding:0 2px;gap:7px}.champion-list>button{width:65px;min-width:65px;height:82px}.champion-list>button:before{left:2px;width:61px;height:64px}.champion-list>button img{width:55px;height:58px}.champion-list strong{font-size:7px}.roster-tools{grid-column:1;grid-row:1;position:absolute;right:0;top:1px}.roster-tools>summary{font-size:0;width:20px;height:25px;padding:0}.roster-tools>summary:before{content:'⌕';font-size:20px;display:block}.roster-tools>summary:after{display:none}.roster-tool-panel{left:auto;right:0;top:29px;max-width:calc(100vw - 35px)}.roster-note{display:none}.champion-picker{overflow-y:auto}#champion-preview{grid-template-columns:minmax(0,1fr) minmax(140px,.75fr);grid-template-rows:auto minmax(220px,1fr) auto;height:auto;min-height:100%;gap:0 10px}.preview-heading{grid-column:1/3;grid-row:1;padding:2px 0 5px}.preview-heading h2{font-size:25px}.preview-heading small{font-size:7px}.preview-stage{grid-column:1/3;grid-row:2;min-height:220px;height:min(37vh,300px)}.champion-dossier{grid-column:1;grid-row:3;align-self:start;padding:10px 4px 15px}.preview-flavor{font-size:14px}.preview-summary{font-size:9px;line-height:1.6;margin-bottom:10px}.preview-stats{font-size:7px;gap:7px;padding-top:9px}.preview-stats b{font-size:13px;min-width:35px}.preview-live{display:none}.dossier-label{font-size:6px}.preview-skill{grid-column:2;grid-row:3;margin:8px 0 15px;padding:10px;align-self:start}.preview-skill>img{width:35px;height:35px;margin-bottom:7px}.preview-skill h3{font-size:13px}.preview-skill p{font-size:9px}.preview-skill small{font-size:6px}.preview-replay{font-size:7px;padding:8px;margin-top:12px}.champion-picker:before,.champion-picker:after{display:none}.select-bottom{grid-template-columns:1fr auto;gap:6px;padding:10px 0 13px;min-height:69px}.selection-lock{gap:7px}.selection-lock>img{width:29px;height:29px}.selection-lock strong{font-size:10px}.selection-lock small{font-size:6px}.selection-lock span{font-size:7px}.selection-guide,#selected-champion-mastery{display:none}.select-bottom #confirm-champion{min-width:0;padding:13px 17px;font-size:11px;grid-column:2}}
@media(prefers-reduced-motion:reduce){.champion-list>button,.champion-list>button img{transition:none}}
.champion-list strong{white-space:nowrap}
.lobby-status[hidden]{display:none}.lobby-status{text-align:center;align-self:center;padding:14px 0 10px;min-height:110px}.lobby-status>small{font:800 7px system-ui;letter-spacing:.22em;color:#e5c985}.lobby-status h2{font:800 17px system-ui;letter-spacing:.03em;color:#d6eee4;margin:7px 0 5px}.lobby-status p{font-size:10px;color:#8fcab7;margin:0 0 5px}.lobby-status>span{font-size:8px;color:#628e7d}.lobby-seat{display:none;grid-row:1/3;align-self:center;text-align:center;padding:15px 0 35px;position:relative;z-index:1}.lobby-seat-left{grid-column:1}.lobby-seat-right{grid-column:3}.lobby-seat>small{display:block;font:800 8px system-ui;letter-spacing:.2em;color:#56bfa6;margin-bottom:7px}.lobby-seat>strong{display:block;font:800 10px system-ui;letter-spacing:.04em;color:#8bd7bf}.seat-hologram{margin:16px auto 0;width:116px;height:151px;position:relative;background:radial-gradient(ellipse,#2dd4a922,transparent 70%);filter:drop-shadow(0 0 13px #38e2b83a)}.seat-hologram svg{width:100%;height:100%;fill:#4ad9b510;stroke:#59d8b25c;stroke-width:1.5;stroke-dasharray:3 4}.seat-hologram:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 5px,#7bffca10 5px 6px);mask-image:linear-gradient(transparent,#000,transparent)}.seat-pedestal{height:27px;width:min(170px,90%);margin:-3px auto 0;border-radius:50%;border:2px solid #3cba9077;background:#0b39322e;box-shadow:0 12px 0 6px #03161b,0 16px 0 8px #27544a66,0 -12px 35px #3be3ac18}.lobby-seat>p{margin:30px 0 0;font-size:8px;color:#528f79}#character-select[data-phase=waiting] .select-roster,#character-select[data-phase=waiting] .champion-dossier,#character-select[data-phase=waiting] .preview-skill{display:none}#character-select[data-phase=waiting] .lobby-seat{display:block}#character-select[data-phase=waiting] .champion-picker:before,#character-select[data-phase=waiting] .champion-picker:after{display:none}#character-select[data-phase=waiting] .preview-heading h2{color:#fff0c5;text-shadow:0 0 25px #e8b55a1f}#character-select[data-phase=waiting] .selection-lock small{color:#d2bb7a}#character-select[data-phase=waiting] .selection-lock>img{border-color:#d5b46d}
@media(max-width:720px){.lobby-status{min-height:90px;padding:10px 0}.lobby-status h2{font-size:15px}.lobby-status p{font-size:9px}.lobby-status>span{font-size:7px}#character-select[data-phase=waiting] #champion-preview{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(220px,1fr) auto}.lobby-seat{grid-row:3;padding:8px 0 25px}.lobby-seat-left{grid-column:1}.lobby-seat-right{grid-column:2}.seat-hologram{width:70px;height:91px;margin-top:10px}.seat-pedestal{width:110px;height:18px}.lobby-seat>strong{font-size:8px}.lobby-seat>small{font-size:7px}.lobby-seat>p{font-size:7px;margin-top:23px}}
@media(max-height:620px) and (min-width:721px){.lobby-status{min-height:92px;padding:9px 0}.lobby-status h2{font-size:15px}.seat-hologram{height:116px;width:90px;margin-top:10px}.lobby-seat{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.seat-hologram{filter:none}}