:root{color-scheme:dark;--blue:#38bdff;--red:#ff674b;--gold:#ffd174;--muted:#9aa9be}
*{box-sizing:border-box}body{margin:0;background:#0b101b;color:#edf3ff;font:15px 'Segoe UI',sans-serif;min-height:100vh;display:grid;place-items:center;padding:20px;background-image:radial-gradient(ellipse at 50% 20%,#202e47,transparent 70%)}
button,select,input{font:inherit}button{cursor:pointer;border:1px solid #45506a;background:#25334b;color:#fff;border-radius:9px;padding:13px 19px;font-weight:650;transition:background .15s,transform .15s}button:hover{background:#364b6b;transform:translateY(-1px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button.primary{background:var(--gold);color:#1a2130;border-color:var(--gold)}button.primary:hover{background:#ffe3a5}button:disabled{opacity:.45;cursor:default}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,5vw,60px);line-height:1;margin-bottom:16px;letter-spacing:-2px}h2{font-size:28px}h3{font-size:16px;color:var(--gold)}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:700;margin-bottom:18px}.muted{color:var(--muted);line-height:1.6}.small{font-size:12px}.blue{color:var(--blue)}.red{color:var(--red)}
#app{width:min(1060px,100%)}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;letter-spacing:2px;color:var(--muted)}.brand{color:#fff;font-weight:800}#gameWrap{position:relative;width:100%;aspect-ratio:16/9;border:1px solid #42506b;border-radius:15px;overflow:hidden;background:#101724;box-shadow:0 28px 80px #0008}canvas{width:100%;height:100%;display:block;outline:none}.screen{position:absolute;inset:0;display:none;overflow:auto;background:#0e1525ed;z-index:10;padding:32px}.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}.screen.active.settings{display:block}.menu-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:45px;align-items:center;max-width:840px;width:100%}.menu-actions{display:grid;gap:10px}.menu-actions button{text-align:left}.menu-actions button span{float:right;opacity:.65}.mode-info{margin:0 0 18px}.card{border:1px solid #35435b;background:#172238;border-radius:12px;padding:19px}.pills{display:flex;gap:7px;flex-wrap:wrap}.pills span{font-size:11px;border:1px solid #3c4b64;padding:5px 9px;border-radius:20px;color:#b9c9e0}.settings-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}.settings-head h2{margin:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0}.key-btn{padding:5px 10px;min-width:78px;font-size:12px}.key-btn.waiting{background:#795726}.settings select{max-width:170px}select,input[type=text]{padding:9px 12px;border:1px solid #485776;border-radius:7px;background:#1e2c43;color:white}input[type=range]{width:130px}.center-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.center-screen{text-align:center;max-width:540px}.center-screen button{min-width:170px}#lobbyStatus{min-height:35px;margin:15px 0;color:var(--gold)}#hostIdDisplay{display:block;user-select:all;overflow-wrap:anywhere;padding:12px;color:var(--blue);font:14px monospace;min-height:40px}#joinIdInput{width:min(340px,100%);margin:12px 0}
#hud{display:none;position:absolute;top:22px;left:25px;right:25px;grid-template-columns:1fr 88px 1fr;gap:22px;pointer-events:none}.fighter-name{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;margin-bottom:9px;font-weight:750}.health-track{height:16px;border:1px solid #ffffff45;background:#161c2b;border-radius:3px;overflow:hidden}.health-fill{height:100%;transition:width .08s linear;background:var(--blue)}#hp2{background:var(--red)}.guard-track{height:4px;background:#141a28;margin-top:7px}.guard-fill{height:100%;background:#a8c4e8;transition:width .08s}.score{color:var(--gold);font-size:15px;margin-top:7px;letter-spacing:7px}.right{text-align:right}.clock{text-align:center}#timer{font-size:34px;font-weight:800;line-height:1.1}#roundLabel{color:var(--muted);font-size:10px;letter-spacing:1px;margin-top:6px}#pauseButton{position:absolute;right:14px;bottom:14px;display:none;padding:7px 12px;font-size:12px;z-index:5}#banner{position:absolute;top:39%;left:0;right:0;pointer-events:none;text-align:center;font-size:clamp(20px,4vw,43px);font-weight:850;color:var(--gold);text-shadow:0 3px 12px #000;letter-spacing:2px}#bannerSub{font-size:13px;letter-spacing:1px;color:#dce6f7;margin-top:10px}#controlGuide{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;font-size:12px;line-height:1.9;color:var(--muted)}#controlGuide strong{color:white}kbd{font:11px 'Segoe UI',sans-serif;border:1px solid #46526b;background:#202c40;color:#e7edfb;border-radius:4px;padding:2px 5px;white-space:nowrap}#tip{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0}.footer{margin-top:15px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#72819a}
@media(min-width:721px) and (min-height:540px){#app{width:min(1060px,100%,calc((100svh - 180px)*16/9))}}
@media(max-width:720px){body{padding:8px}#gameWrap{aspect-ratio:4/3}.screen{padding:18px}.menu-layout{gap:15px}.menu-actions button{padding:10px;font-size:12px}.menu-layout .muted{font-size:12px}.pills{display:none}.settings-grid{grid-template-columns:1fr}#controlGuide{grid-template-columns:1fr;gap:4px}#hud{top:12px;left:12px;right:12px;gap:8px;grid-template-columns:1fr 50px 1fr}#timer{font-size:25px}.fighter-name{font-size:10px}.footer{display:none}h1{letter-spacing:-1px}.eyebrow{margin-bottom:10px;font-size:9px}}
.move-name{font-size:12px;height:18px;color:var(--gold);margin-top:5px;letter-spacing:.5px}#moveGuide{margin-top:12px;border:1px solid #35435b;border-radius:9px;background:#121d30;padding:10px 14px;color:#b9c9e0;font-size:12px}#moveGuide summary{cursor:pointer;color:var(--gold)}#moveList{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;padding-top:14px;line-height:1.7}#moveList strong{color:#edf3ff}#moveGuide p{margin:10px 0 0}@media(max-width:720px){#moveList{grid-template-columns:1fr}}
/* RETRO DOJO: restrained accent colors, black outlines and paper panels. */
:root{color-scheme:light;--blue:#397aaf;--red:#b3483d;--gold:#34564a;--muted:#647369}body{background:#e3e7df;background-image:none;color:#18232b;font-family:'Segoe UI',sans-serif}.brand{color:#18232b}.topline{color:#5d7066}#gameWrap{border:3px solid #18232b;border-radius:0;background:#f6f5ed;box-shadow:8px 8px 0 #b6c3b5}button{border:2px solid #18232b;border-radius:0;background:#f6f5ed;color:#18232b;box-shadow:3px 3px 0 #c4cdc1}button:hover{background:#e5ebe0}button.primary{background:#243d34;color:#fff;border-color:#18232b}button.primary:hover{background:#36564a}.screen{background:#f3f4ebeF}.card{background:#e5ebe1;border:2px solid #aebdae;border-radius:0}.pills span{color:#456055;border-color:#b8c5b6;border-radius:0}.muted{color:#647369}.key-btn{background:#f9f8ef}.key-btn.waiting{background:#dcc98f}select,input[type=text]{background:#fffdf4;color:#18232b;border:2px solid #7c9381;border-radius:0}#controlGuide strong{color:#18232b}kbd{background:#f4f6ed;color:#18232b;border-color:#9eafa0;border-radius:0}.health-track{border:2px solid #18232b;background:#dce3d7;border-radius:0;height:18px}.guard-track{background:#c8d4c6}.score{color:#273d32}.fighter-name{font-size:11px;letter-spacing:.2px}#timer{color:#18232b}#hud{top:27px;left:28px;right:28px;gap:20px}#banner{color:#20392f;text-shadow:2px 2px 0 #f6f5ed}#bannerSub{color:#476455}#pauseButton{background:#f6f5ed}.move-name{color:#36594b}#moveGuide{background:#edf1e6;border-color:#acbeac;border-radius:0;color:#4c6455}#moveGuide summary{color:#263f32}#moveList strong{color:#1e3329}.skin-options{border-top:1px solid #b6c4b1;margin-top:16px;padding-top:12px}.skin-options h3{margin-bottom:8px}.skin-options select{max-width:190px}.footer{color:#6b806c}.menu-layout h1{font-family:monospace;font-weight:900;font-size:clamp(30px,4.8vw,53px);letter-spacing:-2px}#lobbyStatus{color:#34564a}#hostIdDisplay{color:#2f6555}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}