@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{font-family:'DM Sans',sans-serif;font-synthesis:none;color:#f5f8ff;background:#152845;--muted:#a9bdd8;--line:#7190b64d;--accent:#d8ff63}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #caff61;outline-offset:3px}canvas:focus{outline:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.topbar{height:58px;display:flex;align-items:center;gap:18px;padding:0 24px;background:#192f50;border-bottom:1px solid #527295;position:relative;z-index:4}.brand{font:800 30px 'Barlow Condensed',Impact,sans-serif;display:flex;gap:6px;white-space:nowrap;letter-spacing:.01em}.brand b{font-weight:800}.match-status{display:flex;gap:20px;margin-left:auto;font-size:12px;color:#e4efff}.settings{width:36px;height:36px;display:grid;place-items:center;border:1px solid #6282a9;border-radius:5px;background:#2a4669}.settings svg{width:22px;height:22px}.settings:hover{background:#3b5e87}#roster-btn,#leave-btn{font-size:13px;padding:8px 12px;border:1px solid #6484ac;border-radius:4px}#roster-btn[aria-expanded=true]{background:#42688f}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:calc(100dvh - 58px)}.arena-panel{position:relative;overflow:hidden}.canvas-wrap{height:100%;width:100%;position:relative}.canvas-wrap:before{content:'';position:absolute;inset:0;background:#88c8f5 url('/assets/fortnite-valley.png') center/cover no-repeat;filter:var(--abyss-filter,none);pointer-events:none}#arena{display:block;width:100%;height:100%;position:relative;touch-action:none}.playing .game-layout{grid-template-columns:1fr}
.setup-panel{padding:20px 24px;background:linear-gradient(155deg,#24456d,#152b49);overflow:auto;scrollbar-width:thin;border-left:1px solid #6581a4}.setup-panel h1{font:800 28px 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:0}.character-stage{height:145px;margin:0;background:radial-gradient(ellipse at 50% 65%,#5fa6f455,transparent 65%)}#character-preview{width:100%;height:100%;display:block}.field-label{display:block;color:#d1e1f6;font-size:12px;font-weight:600;margin:0 0 7px}.field-label b{display:inline-block;background:#eff5ff;color:#1d3557;border-radius:3px;padding:2px 5px;margin-right:4px;font-size:10px}input,select{width:100%;height:37px;padding:7px 10px;font-size:13px;background:#122843;border:1px solid #6c8db255;border-radius:5px;color:#fff}select{cursor:pointer}.skin-options{display:grid;grid-template-columns:repeat(4,23px);gap:10px;margin:0 0 15px}.skin{width:23px;height:23px;background:var(--skin);border-radius:5px;border:2px solid transparent;position:relative}.skin.active{outline:2px solid #fff;outline-offset:3px}.skin.active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#10223c}.setup-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0}.setup-row label{font-size:12px;color:#d1e1f6}.setup-row select{width:130px}.section-rule{height:1px;background:var(--line);margin:13px 0}.loadout-detail{font-size:11px;color:#b7cce6;line-height:1.4;margin:5px 0 12px}.primary{display:block;width:100%;border-radius:5px;padding:10px 14px;margin-top:12px;background:var(--accent);color:#203017;font:800 27px 'Barlow Condensed',sans-serif;text-transform:uppercase;box-shadow:0 4px 0 #182d38}.primary:hover{background:#e8ff9a}.room-actions{display:flex;gap:8px;margin-top:12px}.room-actions button,.secondary{font-size:12px;font-weight:600;border:1px solid #7899c077;padding:9px;border-radius:5px;flex:1}.room-actions button:hover,.secondary:hover{background:#5b86b12b}
.match-panel{position:absolute;right:16px;top:74px;z-index:5;width:225px;background:#122742f5;border:1px solid #7698c077;border-radius:7px;padding:16px;max-height:calc(100dvh - 90px);overflow:auto}.panel-heading{display:flex;justify-content:space-between;font-size:12px;padding-bottom:9px}.panel-heading span{color:var(--muted)}.score-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #ffffff12}.score-avatar{height:22px;width:6px;border-radius:2px;background:var(--skin)}.score-name{flex:1;min-width:0}.score-name b{font-size:12px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.score-name small{font-size:8px;color:var(--muted);display:block;margin-top:3px}.you-tag{font-size:8px;background:#fff;color:#203758;border-radius:2px;padding:2px 3px}.build-summary{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.feed-heading{font-size:12px;font-weight:700}.build-summary p,.lobby-actions p,#draft-help{font-size:11px;color:#bfd2e9;line-height:1.5}.lobby-actions .secondary{width:100%;margin-top:8px}.element-pill{display:inline-block;color:var(--element);font-size:10px;margin:4px}
.timer{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:12px;background:#152a45df;border:1px solid #8dafd455;border-radius:5px;padding:8px 13px;pointer-events:none}.timer span{font-size:11px;color:#d9e9fd}.timer b{font:700 25px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}.combat-controls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(530px,calc(100% - 28px));z-index:3}.health-block{margin:0 4px 10px;position:relative}.health-block>span{font-size:13px;font-weight:700;text-shadow:0 2px 4px #142d49}.health-track{height:12px;margin-top:4px;border:2px solid #d3e5ff66;background:#172a43;border-radius:4px;overflow:hidden}.health-track i{display:block;height:100%;background:#a4f35c;transition:width .12s}.health-block small{position:absolute;right:0;top:0;font-size:10px;color:#ffe3b4;text-shadow:0 2px 3px #142d49}.spell-slots{display:flex;gap:6px}.spell-slot{min-width:0;position:relative;flex:1;height:79px;padding:5px 3px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #a5c5ec99;border-bottom:3px solid var(--spell);border-radius:5px;background:linear-gradient(135deg,#294566,#132b49);box-shadow:0 3px 8px #10243b80}.spell-slot.earned-start{margin-left:8px}.spell-slot:hover{background:#365e87}.spell-slot:disabled{opacity:1}.spell-slot.empty{border:1px dashed #a5c5ec66;background:#17324bb8;color:#92abc9}.spell-slot .key{position:absolute;left:5px;top:-6px;z-index:1;min-width:19px;padding:2px 4px;border-radius:3px;background:#f7faff;color:#142946;font-size:11px;font-weight:700;text-align:center}.spell-slot small{font-size:10px;color:#f2f7ff;white-space:nowrap;line-height:1.2}.spell-slot.empty small{color:#b9cce4}.empty-symbol{font-size:28px;font-weight:400;line-height:42px;opacity:.65}.spell-art{display:block;width:45px;height:45px;flex-shrink:0;background-image:url('/assets/fortnite-spell-icons.png');background-size:438.888889% 790%;background-repeat:no-repeat;mix-blend-mode:screen;pointer-events:none}.cooldown{position:absolute;right:4px;bottom:21px;min-width:26px;height:26px;display:grid;place-items:center;border:1px solid #7fa3c8;border-radius:4px;background:#102a48e8;font:700 21px 'Barlow Condensed',sans-serif}.spell-slot.on-cooldown .spell-art{filter:saturate(.6);opacity:.55}
.world-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.unit-label{position:absolute;transform:translate(-50%,-100%);width:75px;text-align:center;font-size:12px;font-weight:700;color:#fff;text-shadow:0 2px 2px #14253a,0 0 4px #14253a}.unit-label span{display:block}.unit-label i{display:block;height:5px;width:50px;background:#14293e;border:1px solid #102138;margin:4px auto 0}.unit-label b{display:block;height:100%}.unit-label.local{z-index:2;width:110px}.unit-label.local span{display:inline-block;padding:4px 7px;border-radius:3px;background:#fff;color:#142a46;font-size:12px;text-shadow:none;box-shadow:0 2px 5px #162b4766}.unit-label.local:after{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;margin:3px auto}.unit-label.local i{width:66px;height:7px}.damage-number{position:absolute;transform:translate(-50%,-100%);font:800 23px 'Barlow Condensed',sans-serif;text-shadow:0 2px 3px #172c4a;pointer-events:none}
.round-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#102a4566;text-align:center;pointer-events:none}.round-overlay .primary,.round-overlay .secondary{pointer-events:auto;flex:0;width:auto;min-width:190px;margin-top:10px}.eyebrow{font-size:11px;color:#bbd7fb;font-weight:700;letter-spacing:.06em}.count{font:800 92px 'Barlow Condensed',sans-serif;text-shadow:0 3px 20px #183857}.round-overlay h2{font:800 44px 'Barlow Condensed',sans-serif;margin:10px}.round-overlay p{font-size:14px;line-height:1.8;color:#e2f0ff}.elimination-credit{color:#ffdbb2}#render-status{position:absolute;inset:45% 0 auto;text-align:center;font-size:14px;color:#fff;pointer-events:none}#render-status.ready{display:none}.reload{position:absolute;top:53%;left:50%;transform:translateX(-50%);z-index:9;background:#254b74}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#f0f6ff;color:#203954;border-radius:5px;box-shadow:0 4px 20px #10263e66;font-size:13px;z-index:30}
dialog{border:1px solid #7298c2;border-radius:10px;background:#1d3a5e;color:#fff;padding:28px;max-width:450px;width:calc(100% - 40px);max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #0a1f3899}dialog::backdrop{background:#0d2344a6;backdrop-filter:blur(5px)}dialog h2{font:800 32px 'Barlow Condensed',sans-serif;margin:0 0 20px}dialog p{font-size:13px;line-height:1.6;color:#c9def6}.close-dialog{position:absolute;right:10px;top:8px;font-size:28px;color:#e7f0ff}.audio-settings{display:grid;gap:8px;margin-top:18px}.audio-settings>label{display:flex;justify-content:space-between;font-size:12px;color:#cbdef4}.audio-settings input[type=range]{height:24px;padding:0;accent-color:#b9f666}.audio-settings #sound-btn{justify-self:start;margin-bottom:8px}.audio-settings output{font-variant-numeric:tabular-nums}
.card-draft{position:fixed;z-index:10;inset:58px 0 0;background:#142c4aef;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:22px;overflow:auto}.card-draft h2{font:800 42px 'Barlow Condensed',sans-serif;margin:8px}.card-draft>p{font-size:12px;color:#c8dff7;margin:4px}.draft-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;max-width:850px;margin:18px 0}.draft-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:270px;padding:22px;border:1px solid #82a3cb66;border-top:4px solid var(--element);border-radius:7px;background:linear-gradient(145deg,color-mix(in srgb,var(--element) 14%,#294b70),#172f4f);transition:transform .15s,border-color .15s}.draft-card:hover,.draft-card:focus-visible{transform:translateY(-4px);border-color:var(--element)}.draft-card small{font-size:10px;color:var(--element);font-weight:700}.draft-card .card-art{width:78px;height:78px;margin:10px 0}.draft-card h3{font:700 29px 'Barlow Condensed',sans-serif;margin:0 0 8px}.draft-card p{font-size:12px;line-height:1.6;color:#d3e5fa;margin:0 0 14px}.card-pick{font-size:11px;font-weight:700;margin-top:auto}.draft-build{display:flex;gap:8px}.build-slot{width:72px;display:flex;align-items:center;flex-direction:column;padding:7px 3px;border:1px solid #799ac266;border-radius:5px;background:#132942}.build-slot.next{border-color:#d8ff63;box-shadow:0 0 0 1px #d8ff63}.build-slot>b{font-size:10px}.build-slot small{font-size:9px;white-space:nowrap}.build-slot .spell-art{width:34px;height:34px}.draft-countdown{font-variant-numeric:tabular-nums;margin-top:12px!important}
#connection-banner{position:absolute;top:65px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#3d2d18;color:#ffe3ae;border:1px solid #c18a39;z-index:15;border-radius:5px;font-size:13px}.canvas-wrap.hurt:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 55px #ef68564a;pointer-events:none;z-index:3}
@media(min-height:900px){.character-stage{height:190px}.setup-panel{padding:26px}.section-rule{margin:18px 0}}
@media(max-height:760px){.topbar{height:48px}.game-layout{height:calc(100dvh - 48px)}.card-draft{top:48px}.character-stage{height:106px}.setup-panel{padding:15px 20px}.setup-panel h1{font-size:24px}.setup-row{margin:8px 0}.field-label{margin-bottom:5px}.loadout-detail{font-size:11px;margin:4px 0 8px}.draft-card{min-height:220px;padding:16px}.draft-card .card-art{width:56px;height:56px;margin:6px 0}.draft-cards{margin:12px 0}.card-draft h2{font-size:34px}.match-panel{top:62px}.skin-options{margin-bottom:10px}}
@media(max-width:800px){body{overflow:auto}.topbar{padding:0 12px;gap:9px}.brand{font-size:24px}.match-status{gap:9px;font-size:10px}.game-layout{grid-template-columns:1fr;height:auto}.canvas-wrap{height:65vw;min-height:320px}.setup-panel{padding:20px;max-width:480px;width:100%;margin:0 auto;border-left:0}.character-stage{height:160px}.skin-options{margin-bottom:15px}.setup-row{margin:0}.playing .canvas-wrap{height:calc(100dvh - 58px)}.match-panel{width:190px;right:10px}.combat-controls{width:calc(100% - 20px);max-width:520px;bottom:12px}.timer{left:12px;top:12px}.timer span{display:none}.draft-card{padding:14px}.draft-card h3{font-size:24px}.draft-card p{font-size:11px}}
@media(max-width:540px){.brand{font-size:20px}.match-status{gap:6px}.match-status #room-label{display:none}#roster-btn{display:none}.spell-slots{gap:4px}.spell-slot{height:68px}.spell-slot.earned-start{margin-left:3px}.spell-art{width:33px;height:33px}.spell-slot small{font-size:8px}.spell-slot .key{font-size:10px}.draft-cards{gap:8px}.card-draft{padding:15px}.draft-card{padding:11px;min-height:240px}.draft-card h3{font-size:21px}.draft-card .card-art{width:44px;height:44px}.draft-build{gap:4px}.build-slot{width:54px}.build-slot small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.canvas-wrap.hurt:after{display:none}.draft-card,.health-track i{transition:none}.draft-card:hover,.draft-card:focus-visible{transform:none}}

/* Keep the match actions reachable while the loadout panel scrolls. */
.setup-actions{position:sticky;bottom:-20px;margin:12px -24px -20px;padding:0 24px 16px;background:#172f50;border-top:1px solid #7190b64d;z-index:2}.setup-actions .primary{margin-top:10px}.setup-actions .room-actions{margin-top:9px}
@media(min-height:900px){.setup-actions{bottom:-26px;margin-left:-26px;margin-right:-26px;margin-bottom:-26px;padding-left:26px;padding-right:26px}}
@media(max-height:760px){.setup-actions{bottom:-15px;margin-left:-20px;margin-right:-20px;margin-bottom:-15px;padding:0 20px 12px}.setup-actions .primary{padding:7px 12px;font-size:25px}.setup-actions .room-actions button{padding:7px}}
@media(max-width:800px){.setup-actions{position:static;grid-column:1/-1;margin:0;padding:0;background:none;border:0}}

.character-customization{display:grid;grid-template-columns:minmax(100px,1fr) 126px;gap:10px;align-items:center;margin:4px 0 10px}.appearance-controls select{height:32px}.match-options{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:12px}.controls-guide{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}.controls-guide summary{cursor:pointer;font-size:13px;font-weight:600}.controls-guide summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.controls-guide dl{margin:14px 0 0;display:grid;gap:10px}.controls-guide dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px}.controls-guide dt{display:flex;gap:4px;align-items:center;font-size:12px}.controls-guide dd{font-size:12px;color:#c9def6;margin:0}.controls-guide kbd{font:600 11px 'DM Sans',sans-serif;display:inline-block;min-width:23px;text-align:center;padding:4px 5px;border:1px solid #7190b6;border-radius:3px;background:#132c4a}#pause-note{margin:-10px 0 14px;font-size:12px}#connection-info{font-size:11px;margin:18px 0 0;color:var(--muted)}
@media(max-height:760px) and (min-width:801px){.character-customization{margin:2px 0 8px}.character-customization .skin-options{gap:8px;margin-bottom:9px}.character-customization .field-label{font-size:11px}.section-rule{margin:10px 0}.setup-actions{margin-top:10px}.setup-actions .primary{margin-top:9px}.setup-actions .room-actions{margin-top:8px}.loadout-detail{min-height:30px}}

/* A readable combat HUD and a score race across twelve rounds. */
.topbar{height:64px;z-index:20}.game-layout{height:calc(100dvh - 64px)}.match-status{font-size:18px;gap:18px}.match-status #my-score{color:var(--accent);white-space:nowrap}#roster-btn,#leave-btn{font-size:17px;padding:9px 14px}.settings{width:42px;height:42px}.timer{padding:10px 16px}.timer span{font-size:18px}.timer b{font-size:32px}
.combat-controls{width:min(790px,calc(100% - 32px));bottom:12px}.health-block>span{font-size:20px}.health-track{height:14px}.health-block small{font-size:16px}.spell-slots{gap:9px}.spell-slot{height:101px;padding-top:10px}.spell-slot .key{font-size:18px;min-width:29px;top:-9px}.spell-slot small{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700}.spell-slot .spell-art{width:56px;height:56px}.spell-slot.empty .empty-symbol{line-height:50px}.cooldown{font-size:28px;min-width:32px;height:32px;bottom:28px}.spell-slot.spell-active{outline:3px solid #ceff68;outline-offset:1px;background:#3f6347}.defense-hint{margin:8px 0 0;text-align:center;font-size:16px;font-weight:600;line-height:1.3;color:#fff;text-shadow:0 2px 4px #10243b,0 0 7px #10243b}.defense-hint.active{color:#d8ff63}
.unit-label{font-size:15px}.unit-label.local span{font-size:16px}.round-overlay h2{font-size:52px}.eyebrow{font-size:18px;letter-spacing:0}.round-overlay p,.toast{font-size:18px}.round-overlay.match-finished{background:#122843ed;overflow:auto;padding:24px;justify-content:center;pointer-events:auto;z-index:6}.final-scoreboard{width:min(1080px,100%);margin:10px 0 20px}.final-actions{display:flex;gap:16px;justify-content:center}.round-overlay .final-actions .primary,.round-overlay .final-actions .secondary{margin:0}.final-actions .secondary{font-size:18px}
.score-dialog{max-width:1120px;padding:28px}.score-dialog h2{font-size:40px;margin:0 0 8px}.score-dialog .score-rules{font-size:20px;margin:0 0 6px;color:#fff}.score-rules b{color:var(--accent)}.score-dialog .score-explainer{font-size:16px;max-width:820px;margin:0 0 22px;line-height:1.5}.score-table-wrap{overflow:auto;overscroll-behavior:contain}.score-table{width:100%;border-collapse:collapse;text-align:right;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}.score-table th,.score-table td{padding:12px 10px;border-bottom:1px solid #7296bf38}.score-table thead th{color:#bcd3ee;font-size:16px;font-weight:600;line-height:1.25}.score-table th:nth-child(2){text-align:left}.score-table tbody th{font-weight:600;max-width:245px;overflow:hidden;text-overflow:ellipsis}.score-table td:first-child{color:#bcd3ee}.score-table .score-total{font-weight:800;color:#d8ff63;font-size:24px}.score-table .own-score{background:#45688d66}.score-avatar{display:inline-block;width:6px;height:22px;vertical-align:middle;margin-right:10px}.you-tag{font-size:11px;vertical-align:middle}.offline-tag{font-size:12px;color:#bcd3ee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.build-summary .feed-heading{font-size:20px}.build-summary p{display:inline-block;font-size:17px;margin:9px 20px 0 0}.match-panel{top:80px;width:300px}.panel-heading{font-size:24px}.score-row{font-size:18px}.score-row small{font-size:14px;color:#bcd3ee;margin-left:auto}.lobby-actions p{font-size:18px}.lobby-actions .secondary{font-size:17px}
.card-draft{inset:64px 0 0;padding:24px}.card-draft h2{font-size:44px;margin:10px 0}.card-draft>p{font-size:18px}.draft-key{display:inline-block;background:#eff7ff;color:#172e49;padding:0 12px;border-radius:5px;margin-left:10px;min-width:44px}.draft-cards{max-width:1040px;gap:20px;margin:20px 0}.draft-card{padding:22px;min-height:290px}.draft-card .card-art{width:78px;height:78px;margin:0 0 12px}.draft-card h3{font-size:34px}.draft-card p{font-size:18px;line-height:1.45}.card-pick{font-size:17px}.draft-score-btn{margin-top:22px;font-size:18px;flex:none;padding:12px 24px}.draft-countdown{font-size:20px!important}
.setup-panel{padding:20px}.game-layout{grid-template-columns:minmax(0,1fr) 360px}.playing .game-layout{grid-template-columns:1fr}.setup-panel h1{font-size:34px}.field-label{font-size:16px}.field-label b{font-size:14px}input,select{height:42px;font-size:17px}.appearance-controls select{height:38px}.loadout-detail{font-size:15px;line-height:1.35;min-height:0}.character-customization{grid-template-columns:minmax(100px,1fr) 136px}.character-stage{height:130px}.skin-options{grid-template-columns:repeat(4,25px)}.skin{height:25px;width:25px}.match-options{grid-template-columns:minmax(0,1fr) 85px}.setup-actions{bottom:-20px;margin:12px -20px -20px;padding:0 20px 16px}.room-actions button,.secondary{font-size:17px}.primary{font-size:30px}.setup-actions .room-actions button{font-size:16px}
dialog h2{font-size:38px}dialog p{font-size:17px}.audio-settings>label{font-size:18px}.audio-settings{gap:12px}.audio-settings input[type=range]{height:30px}.close-dialog{width:40px;height:40px;font-size:32px}.controls-guide summary{font-size:19px}.controls-guide dt,.controls-guide dd{font-size:16px}.controls-guide kbd{font-size:15px}#pause-note{font-size:18px}#connection-info{font-size:16px}
@media(max-height:780px){.card-draft{padding:14px 24px;justify-content:flex-start}.card-draft .eyebrow{margin-top:10px}.card-draft h2{font-size:38px}.draft-cards{margin:12px 0}.draft-card{min-height:260px;padding:18px}.draft-card .card-art{width:62px;height:62px;margin:0 0 8px}.draft-card h3{font-size:30px}.draft-card p{font-size:17px}.draft-countdown{margin-top:4px!important}.round-overlay.match-finished{padding:14px 24px}.round-overlay.match-finished h2{font-size:40px;margin:5px}.final-scoreboard{margin:8px 0 12px}.score-table th,.score-table td{padding:9px 10px}.character-stage{height:100px}.character-customization .field-label{font-size:16px}.setup-panel{padding:16px 20px}.setup-panel h1{font-size:30px}.setup-actions{bottom:-16px;margin-bottom:-16px}.setup-actions .primary{font-size:29px}.loadout-detail{font-size:15px;min-height:0}.section-rule{margin:10px 0}}
@media(max-width:1050px){.brand{font-size:25px}.topbar{gap:10px;padding:0 14px}.match-status{font-size:16px;gap:12px}#roster-btn,#leave-btn{font-size:16px;padding:8px 10px}.match-status #room-label{display:none}.score-table{font-size:17px}.score-table th,.score-table td{padding:10px 8px}.score-table thead th{font-size:14px}}
@media(max-width:800px){.game-layout{grid-template-columns:1fr;height:auto}.playing .canvas-wrap{height:calc(100dvh - 64px)}.setup-panel{width:100%;max-width:500px}.setup-actions{margin:0;padding:0}.topbar{height:64px}.brand{font-size:21px}.match-status{font-size:15px;gap:8px}#leave-btn{display:none}.timer span{display:block;font-size:16px}.combat-controls{max-width:none}.spell-slot small{font-size:18px}.defense-hint{font-size:15px}.draft-cards{gap:10px}.draft-card{padding:14px}.draft-card p{font-size:16px}.draft-card h3{font-size:27px}.score-dialog{width:calc(100% - 20px);padding:22px 14px}.final-scoreboard{max-width:100%}.score-table{min-width:760px}.round-overlay.match-finished{align-items:stretch}.round-overlay.match-finished h2{text-align:center}}
@media(max-width:540px){.topbar{padding:0 8px;gap:7px}.playing .brand{display:none}.match-status{margin-left:0;flex:1;font-size:15px}.match-status #alive-label{display:none}#roster-btn{display:block;font-size:15px}.spell-slots{gap:5px}.spell-slot{height:89px}.spell-slot .key{font-size:16px}.spell-slot small{font-size:15px}.spell-slot .spell-art{width:42px;height:42px}.health-block small{font-size:14px}.defense-hint{font-size:14px}.card-draft{padding:16px;display:block;text-align:center}.card-draft h2{font-size:34px}.draft-cards{grid-template-columns:1fr}.draft-card{min-height:0;display:grid;grid-template-columns:64px 1fr;column-gap:12px}.draft-card .card-art{grid-row:1/4;width:58px;height:58px}.draft-card h3{font-size:28px;margin-bottom:4px}.draft-card p{font-size:16px;margin-bottom:8px}.card-pick{font-size:16px}.score-dialog .score-rules{font-size:18px}.score-dialog .score-explainer{font-size:15px}.round-overlay.match-finished{justify-content:flex-start}.final-actions{flex-wrap:wrap}}

.reward-toast{position:fixed;top:82px;left:50%;transform:translateX(-50%);z-index:25;padding:10px 18px;border-radius:5px;background:#142b48ed;color:#d8ff63;font-size:21px;font-weight:700;text-align:center;max-width:calc(100% - 40px);box-shadow:0 4px 18px #0c213966;pointer-events:none}

.round-overlay.match-finished{background:#1d2c48fa}.round-overlay .shared-result{font-size:18px;line-height:1.2;margin:0 0 5px}.score-table .winning-score td:first-child{color:var(--accent);font-weight:800}
/* Expansion: concise catalogue, remappable six-slot controls, independent audio. */
.spellbook-open{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:14px}.spellbook-open span{font-size:11px;color:#adc1d3;font-weight:400}.spellbook-dialog{width:min(1040px,94vw);max-width:1040px}.spellbook-intro,.spellbook-note{color:#adc1d3;font-size:13px;line-height:1.5}.spellbook-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin:18px 0 10px}.spellbook-filters label{font-size:12px;color:#b9c9d8;display:grid;gap:6px}.spellbook-filters input{width:100%}.spellbook-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.spellbook-card{border:1px solid #3a5063;border-top:2px solid var(--spell);background:#152332;border-radius:9px;padding:16px;display:flex;flex-direction:column;gap:12px}.spellbook-heading{display:flex;align-items:center;gap:10px}.spellbook-heading .spell-art{position:relative;inset:auto;display:block;width:42px;height:42px;flex:0 0 42px}.spellbook-heading h3{font-size:16px;margin:3px 0 0}.spellbook-heading small,.spellbook-cap{font-size:11px;color:#a6bbcc;text-transform:capitalize}.spellbook-card>p{font-size:12px;line-height:1.55;margin:0;color:#d3dfeb}.spell-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}.spell-stats div{display:flex;flex-direction:column;gap:3px}.spell-stats dt{font-size:10px;color:#97adbf}.spell-stats dd{font-size:12px;margin:0;font-variant-numeric:tabular-nums}.spellbook-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}.spellbook-actions button{font-size:11px;flex:1;padding:8px 5px}.display-settings{border:1px solid #344d63;border-radius:8px;margin:20px 0;padding:14px;display:grid;gap:12px}.display-settings legend{font-size:13px;color:#d7e5ef;padding:0 6px}.display-settings label{display:flex;align-items:center;gap:10px;font-size:13px}.display-settings input{width:16px;height:16px;accent-color:#a5f45e}.display-settings p{font-size:11px;color:#9db5c8;margin:0}.key-bindings{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.key-bindings label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.key-bindings button{min-width:54px;padding:7px 10px}.key-bindings .listening{outline:2px solid #a5f45e}.controls-guide>p,#binding-feedback{font-size:12px;line-height:1.5;color:#adc1d3}.card-role{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#bcd0de}.card-delta{display:block;margin:10px 0;color:#bfe99d;font-size:11px}.reduced-flash .canvas-wrap.hurt:after{display:none}
@media(max-width:800px){.spellbook-results{grid-template-columns:repeat(2,minmax(0,1fr))}.spellbook-filters{grid-template-columns:1fr 1fr}.spellbook-filters label:first-child{grid-column:1/-1}}
@media(max-width:520px){.spellbook-results{grid-template-columns:1fr}.key-bindings{grid-template-columns:1fr}}
.spell-art.spell-glyph{background:none;display:grid;place-items:center;font-size:28px;color:var(--spell,#bae2fa);text-shadow:0 0 14px currentColor}

.spellbook-filters{grid-template-columns:2fr 1fr 1fr 1fr}.spellbook-slot{font-size:10px;color:#b7d4e6;text-transform:uppercase;letter-spacing:.7px}
@media(max-width:900px){.spellbook-filters{grid-template-columns:1fr 1fr}.spellbook-filters label:first-child{grid-column:auto}}

.spell-slot.recast-ready{outline:2px solid #ceff68;outline-offset:1px}.spell-slot.recast-ready .cooldown{white-space:pre-line;line-height:1.1;text-align:center;min-height:36px;height:auto;font-size:14px;min-width:50px;padding:0 5px;color:#142946;background:#ceff68;border-color:#e7ffb4}

.defense-hint.cast-denied{color:#ffd49a}

/* Local dummy practice uses the existing arena and a small control panel. */
.training .game-layout{grid-template-columns:minmax(0,1fr) 280px}
.training-panel{padding:22px 18px;background:#142334;overflow:auto;border-left:1px solid #34485b}
.training-panel h2{font-size:27px;margin:0 0 12px}.training-panel p{font-size:13px;line-height:1.5;color:#b8cada}
.training-panel label{display:block;font-size:13px;margin:15px 0 6px}.training-panel select{width:100%;font-size:15px;height:39px}
.training-panel details{margin:20px 0}.training-panel summary{cursor:pointer;font-size:15px}.training-panel details p{font-size:12px}
#training-status{font-size:16px;color:#d5f7bb;margin-top:24px}#training-reset{width:100%;font-size:16px}#training-btn{width:100%;margin-bottom:8px}
@media(max-width:800px){.training .game-layout{grid-template-columns:1fr}.training-panel{max-height:45vh;border-left:0;border-top:1px solid #34485b}.training .canvas-wrap{height:65dvh}}

/* Spell details stay separate from the draft equip button. */
.draft-choice{min-width:0;display:flex;flex-direction:column;gap:8px}.draft-choice>.draft-card{width:100%;flex:1}
.draft-spell-stats{border:1px solid #7395bd66;border-radius:5px;background:#142d49;text-align:left;padding:10px}
.draft-spell-stats summary{font-size:14px;color:#d5ebff;cursor:pointer}.draft-spell-stats summary:focus-visible{outline:3px solid #caff61;outline-offset:3px}
.draft-spell-stats .spell-stats{margin-top:14px}.draft-spell-stats p{font-size:12px;line-height:1.5;color:#bdd0e4;margin:14px 0 0}
.draft-cards{align-items:start}.card-draft:has(.draft-spell-stats[open]){justify-content:flex-start}
.card-draft>.draft-elimination{max-width:760px;text-align:center;color:#ffdbb2;margin:5px 0 10px}.round-overlay>.elimination-credit{max-width:760px;padding:0 12px}