/* Ink, flat process colours and printed-paper panels. */
:root{color-scheme:light;--bg:#e8dab3;--line:#171923;--lime:#ffcf38;--muted:#5a5350}
body{color:#191c26;background-color:#d5c69d;background-image:radial-gradient(#17192325 .8px,transparent 1px);background-size:5px 5px}
main{background:#f6edce;border-left:3px solid #171923;border-right:3px solid #171923;box-shadow:14px 0 #17192320;max-width:1300px}
header{border-bottom:4px solid #171923}.brand{color:#cf2833;filter:none}.brand b{color:#132e53}.brand b span{color:#ce2833}.edition{color:#554b43;font-weight:800;letter-spacing:1.5px}
h1{color:#174b86;text-shadow:3px 3px 0 #171923,5px 5px 0 #f6edce;-webkit-text-stroke:1px #171923;transform:skew(-4deg)}h1 em{color:#cf2833}
.intro{position:relative;gap:20px}.intro>p{background:#ffdf60;color:#191c26;border:3px solid #171923;box-shadow:4px 4px #171923;padding:14px 18px;transform:rotate(-1deg)}
.eyebrow{color:#84242e}.cabinet{border:4px solid #171923;border-radius:0;box-shadow:8px 8px #171923;background:#171923}
.scoreboard{background:#f7edcb;border-bottom:4px solid #171923;padding:15px 25px}.team{padding:10px 16px;background:#174b86;border:3px solid #171923;box-shadow:3px 3px #171923;transform:skew(-5deg)}.team.red{background:#bd2637;transform:skew(5deg)}.team b,.blue b,.red b{color:#fff3d4;text-shadow:2px 2px #171923}.team small{color:#ffdf71}.score>strong{color:#172b45;text-shadow:2px 2px #fff3d4}.score small{color:#8b2631;font-weight:800}.score b{color:#171923;font-weight:900}
.gamebar{background:#ffdf60;border-top:4px solid #171923}.gamebar>span{color:#171923;font-weight:800}.gamebar i{background:#bd2637;border:1px solid #171923}.gamebar button{color:#171923;background:#fff3d4}
button{background:#f6edce;color:#171923;border:2px solid #171923;border-radius:0;font-weight:750;box-shadow:2px 2px #171923;transition:transform .1s,background .1s}button:hover{background:#ffe07a;color:#171923;transform:translate(-1px,-1px)}button:active{transform:translate(2px,2px);box-shadow:none}button:disabled{transform:none}
select,input{background:#fff9e7;color:#171923;border:2px solid #171923;border-radius:0}label{color:#3b3c43;font-weight:800}.primary{background:#cf2833;color:#fff3d4;border:3px solid #171923;box-shadow:3px 3px #171923}.primary:hover{background:#a8192b;color:#fff3d4}.mode .selected{color:#fff3d4;background:#174b86;border-color:#171923}
.overlay{background:#17192366;backdrop-filter:none}.menu,#bindings-dialog{background-color:#f6edce;background-image:radial-gradient(#82664716 .7px,transparent 1px);background-size:5px 5px;color:#171923;border:4px solid #171923;border-radius:0;box-shadow:8px 8px #171923}.menu h2,#bindings-dialog h2{color:#bd2637;text-shadow:1px 1px #171923;-webkit-text-stroke:.4px #171923}.menu .eyebrow{color:#174b86}.menu>p,.menu .note,#bindings-dialog p{color:#524a40}.menu .note{font-size:11px}#message{color:#9c2130}.room-label{color:#171923}.room-label b{color:#bd2637}.slot{background:#fff9e7;border:2px solid #171923;border-left:5px solid #174b86;border-radius:0}.slot.red-slot{border-left-color:#bd2637}.slot small{color:#53504b}#bindings-message{color:#8b2631!important}#bindings-dialog::backdrop{background:#17192399;backdrop-filter:none}
.controls{gap:16px}.controls>div,.controls>aside{background:#fff5d8;border:3px solid #171923;padding:18px;box-shadow:3px 3px #171923}.controls .eyebrow{background:#ffdf60;color:#171923;border:2px solid #171923;letter-spacing:1px}.controls h3{color:#174b86;text-shadow:none}.controls p,.controls aside p{color:#423e39}.controls aside{transform:rotate(.5deg)}kbd{background:#fff9e7;color:#171923;border:2px solid #171923;border-radius:0;box-shadow:1px 2px #171923;font-weight:700}
#banner{color:#ffdf60;-webkit-text-stroke:2px #171923;text-shadow:4px 4px #171923,7px 7px #bd2637}#banner.goal.blue,#banner.goal.red{color:#ffdf60;text-shadow:4px 4px #171923,8px 8px var(--goal-glow)}#banner.goal.blue{--goal-glow:#174b86}#banner.goal.red{--goal-glow:#bd2637}
footer{color:#544d43;border-top:4px solid #171923}.cabinet:fullscreen{background:#171923}
@media(max-width:800px){.team{padding:7px 10px}.scoreboard{padding:10px}.controls{gap:12px}.controls>div,.controls>aside{padding:14px}.intro>p{padding:10px}.controls aside{border-top:3px solid #171923}}
@media(max-width:520px){main{padding:0 10px}.team{padding:6px}.team b{font-size:12px}.score{gap:7px}.score>strong{font-size:30px}.gamebar>div{gap:4px}.gamebar button{padding:6px 4px;font-size:10px}.menu{max-height:96%;padding:12px}.controls aside{transform:none}.intro>p{display:inline-block}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Fullscreen uses measured scoreboard and toolbar heights, not a fixed allowance. */
.cabinet:fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;gap:0;align-items:center}
.cabinet:fullscreen>.scoreboard,.cabinet:fullscreen>.gamebar{width:100%;flex:0 0 auto;min-width:0}
.cabinet:fullscreen>.arena{flex:0 0 auto;min-width:0;min-height:0;width:var(--fullscreen-arena-width,0px);height:var(--fullscreen-arena-height,0px);aspect-ratio:1100/640}
.cabinet:fullscreen #game:focus-visible{outline-offset:-3px}

.player-progress{position:absolute;bottom:0;left:0;right:0;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#171923de;padding:5px 8px;pointer-events:none}.progress-player{display:flex;flex-direction:column;gap:2px;text-align:left;color:#fff3d4;font-size:10px}.progress-player progress{width:100%;height:7px;accent-color:#238aff}.progress-player.red progress{accent-color:#e52c45}.arcade-phase-panel{position:absolute;z-index:4;left:50%;top:45%;transform:translate(-50%,-50%);width:min(480px,88%);padding:20px;background:#f6edcedb;border:4px solid #171923;box-shadow:6px 6px #171923;color:#171923;text-align:center}.arcade-phase-panel h2{margin:0 0 8px;font-size:28px}.arcade-phase-panel p{font-size:13px;line-height:1.5}.arcade-phase-panel.fight-panel{top:6%;transform:translateX(-50%);padding:6px 14px;background:#f6edcef2}.fight-panel h2{font-size:22px}.fight-panel p{margin:4px}.fight-panel>div{display:flex;justify-content:space-around;gap:14px;font-weight:bold}

.appearance-dialog{width:min(620px,92vw);max-height:92vh;overflow:auto;background:#fff0ca;border:4px solid #171020;box-shadow:8px 8px 0 #171020;color:#171020}.appearance-dialog::backdrop{background:#111b}.appearance-dialog select{width:100%}.appearance-dialog canvas{display:block;width:240px;height:270px;float:left}.appearance-colors{display:grid;gap:12px;padding:18px}.appearance-colors label{display:flex;justify-content:space-between;align-items:center;gap:12px}.appearance-colors input{width:65px;height:38px;padding:0;border:2px solid #171020}.appearance-dialog>div:last-child{clear:both;display:flex;gap:12px;padding-top:15px}#configure-appearance{margin:8px 0}@media(max-width:520px){.appearance-dialog canvas{float:none;margin:auto;width:190px;height:214px}.appearance-colors{padding:8px}}

.mode{flex-wrap:wrap}.mode button{flex:1;white-space:nowrap}#spectator-controls:not([hidden]){display:inline-flex;gap:6px;align-items:center}#spectator-controls select{padding:4px;font-size:12px}.gamebar>div{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}#spectator-options .note{margin:5px 0}#watch-seed{width:100%;box-sizing:border-box}
.gamebar{flex-wrap:wrap}#sound-status{display:block;color:#171923;font-size:12px;line-height:1.4;margin-top:10px}
#debug-menu{width:min(620px,94vw);max-height:90vh;overflow:auto;background:#f6edce;color:#171923;border:4px solid #171923;box-shadow:8px 8px #171923;padding:18px}#debug-menu::backdrop{background:#17192377}.debug-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.debug-heading h2{margin:0;font-size:30px}#debug-menu section{border-top:2px solid #171923;margin-top:16px;padding-top:10px}#debug-menu h3{font-size:23px;margin:0 0 12px}#debug-tools{display:flex;flex-wrap:wrap;gap:8px}#debug-menu output{overflow-wrap:anywhere}#debug-audio{display:block;font:11px/1.5 monospace;margin-top:10px}#debug-menu #spectator-controls{margin-top:14px;flex-wrap:wrap}#debug-menu #watch-speed{width:auto;margin:0}#debug-menu #animation-check{border:0!important}#debug-menu #animation-check button{margin:3px}#animation-check-state{font:11px/1.4 monospace;max-height:160px;overflow:auto}#debug-menu p{font-size:12px;line-height:1.5}
.account{display:grid;gap:6px;margin:4px 0 10px}.account #account-guest{display:grid;gap:6px}.account-actions{display:flex;gap:8px}.account-actions button{flex:1}#account-user{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#account-user span{flex:1}#acc-message{min-height:1.2em;margin:0;font-weight:700}
.profile-stats{width:100%;border-collapse:collapse;margin:8px 0 14px}.profile-stats td{padding:5px 8px;border-bottom:2px solid #17102022}.profile-stats td:last-child{text-align:right;font-weight:800}.profile-recent h3{margin:6px 0}.profile-recent p{margin:3px 0;padding:4px 8px;border-left:6px solid #888}.profile-recent .result-win{border-color:#2f9e44}.profile-recent .result-loss{border-color:#c92a2a}.profile-recent .result-draw{border-color:#e0a100}
.league-dialog{width:min(850px,95vw);max-height:90vh;overflow:auto;background:#fff3d4;color:#171923;border:4px solid #171923;padding:20px}.league-dialog::backdrop{background:#17192388}.league-dialog h2{margin:0;font-size:32px}.league-dialog p{font-size:13px;line-height:1.5}.league-search,.league-pages{display:flex;gap:10px;align-items:center;margin:15px 0}.league-search input{margin:0}.league-results{overflow-x:auto}.league-table{width:100%;border-collapse:collapse;font-size:13px}.league-table th,.league-table td{text-align:left;padding:10px 8px;border-bottom:2px solid #17192333}.league-table th{background:#ffdf60}.league-table tbody tr:nth-child(even){background:#17192308}.league-pages span{flex:1;text-align:center}.league-table button{white-space:nowrap}#gamepad-status{overflow-wrap:anywhere}#bindings-dialog h3{margin:14px 0 8px}