:root{color-scheme:dark;--bg:#111514;--surface:#191e1c;--line:#2c332e;--text:#edf0e9;--muted:#8e9990;--green:#b6f36a;--purple:#bc9bff;--font:Inter,"Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--green)}button{transition:background .15s,color .15s,border-color .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}a{color:inherit}svg{display:block}.app{max-width:1536px;padding:0 48px;margin:auto}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;font-size:21px;letter-spacing:1.7px}.brand>svg{width:34px;height:34px;color:var(--green)}.edition{font:11px var(--mono);letter-spacing:1px;color:var(--muted-foreground, var(--muted));border-left:1px solid var(--line);padding-left:20px;margin-left:12px}.top-actions{display:flex;align-items:center;gap:10px}.connection{font:12px var(--mono);color:var(--muted-foreground, var(--muted));display:flex;align-items:center;gap:8px;margin-right:15px;letter-spacing:.5px}.connection i,.arena-bottom i,.stage-info i,.players-status i{width:6px;height:6px;border-radius:50%;background:#616b63;display:inline-block;flex-shrink:0}.connection i.online,.players-status i.connected{background:var(--green);box-shadow:0 0 8px #b6f36a33}.connection #ping{border-left:1px solid var(--line);margin-left:3px;padding-left:12px;color:var(--green)}.icon-button{display:grid;place-items:center;width:36px;height:36px;background:transparent;color:var(--muted-foreground, var(--muted));border:1px solid var(--line);border-radius:4px}.icon-button:hover{background:var(--surface);color:var(--text)}.icon-button svg{width:19px;height:19px}.icon-button[aria-pressed=true]{color:var(--green)}.arena-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 0 20px}.eyebrow{font:11px var(--mono);letter-spacing:1.4px;color:var(--muted-foreground, var(--muted))}h1{font-size:31px;font-weight:550;letter-spacing:-1px;margin:8px 0 0;display:flex;align-items:center;gap:13px}.arena-number{font:13px var(--mono);letter-spacing:0;color:#68766b;align-self:flex-start;margin-top:6px}.arena-meta{display:flex;align-items:center;gap:19px;font:11px var(--mono);letter-spacing:.6px;color:var(--muted-foreground, var(--muted));padding-bottom:4px}.arena-meta b{font-weight:400;margin:0 6px;color:#576359}.tag{border:1px solid #435432;border-radius:3px;padding:7px 10px;color:var(--green);font-size:10px;letter-spacing:1px}.game-shell{border:1px solid #343d35;background:#111914;border-radius:6px;overflow:hidden}.hud{height:93px;display:flex;align-items:center;padding:18px 26px;background:#181f1b;border-bottom:1px solid #2c392f;gap:29px}.fighter-hud{flex:1;min-width:0}.fighter-label{display:flex;align-items:center;gap:10px;font:12px var(--mono);height:20px;letter-spacing:.8px}.fighter-label strong{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;color:#e5ece0}.player-label{color:var(--green);font-size:11px}.fighter-two .player-label{color:var(--purple)}.you-label{font-size:9px;background:#304029;color:var(--green);padding:2px 5px;border-radius:2px}.fighter-two .you-label{color:var(--purple);background:#342c46}.wins{display:flex;gap:7px;margin-left:auto}.wins i{width:7px;height:7px;border:1px solid #5a665b;transform:rotate(45deg)}.wins i.won{background:var(--green);border-color:var(--green)}.fighter-two .wins i.won{background:var(--purple);border-color:var(--purple)}.fighter-two .fighter-label{justify-content:flex-end}.fighter-two .wins{margin-left:0;margin-right:auto}.health-track{height:10px;margin:10px 0 9px;background:#2c362e;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}.health-fill,.health-ghost{width:100%;height:100%;background:var(--green);position:absolute;left:0;transition:width .08s linear}.health-ghost{background:#8ba968;transition:width .6s ease .2s}.fighter-two .health-track{clip-path:polygon(0 0,100% 0,100% 100%,5px 100%)}.fighter-two .health-fill,.fighter-two .health-ghost{background:var(--purple);left:auto;right:0}.fighter-two .health-ghost{background:#78628f}.stamina-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.stamina-line>span{font:9px var(--mono);letter-spacing:.6px;color:#849383}.stamina-track{width:38%;height:3px;background:#30392f}.stamina-track>div{height:3px;background:#748a5d;width:100%;transition:width .1s}.fighter-two .stamina-track>div{margin-left:auto;background:#75608a}.round-hud{width:105px;flex-shrink:0;text-align:center;display:flex;align-items:center;flex-direction:column;gap:3px}.round-hud>span{font:9px var(--mono);color:var(--muted-foreground, var(--muted));letter-spacing:1.1px}.round-hud>strong{font:38px/40px var(--mono);letter-spacing:-2px;color:#edf4e5;font-weight:500}.round-hud #timer-caption{font-size:8px;letter-spacing:.6px;color:#607361}.arena-viewport{position:relative;aspect-ratio:2.55/1;isolation:isolate;background:linear-gradient(#14202c,#1e2c35);overflow:hidden}.arena-viewport canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}.stage-info{position:absolute;top:20px;left:23px;color:#81939c;font:10px var(--mono);letter-spacing:1px;display:flex;gap:8px;align-items:center;pointer-events:none}.stage-info i{background:#698992;width:4px;height:4px}.stage-info span{color:#667a84;border-left:1px solid #4a5e6755;margin-left:6px;padding-left:14px}.game-overlay{position:absolute;left:50%;top:31%;width:90%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 2px 20px #081318}.game-overlay>span{font:10px var(--mono);letter-spacing:3px;color:var(--green)}.game-overlay h2{font-size:49px;font-weight:550;letter-spacing:-2px;margin:12px 0 12px;line-height:1.05}.game-overlay p{font-size:13px;color:#a2b4b5;margin:0;line-height:1.6}.game-overlay.countdown h2{font:90px/1 var(--mono);font-weight:600;color:var(--green)}.game-overlay.fight-flash h2{font-size:68px;color:var(--green);font-style:italic;letter-spacing:3px}.arena-bottom{position:absolute;bottom:18px;left:23px;right:23px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1px;color:#94a396;pointer-events:none}.arena-bottom>span{display:flex;align-items:center;gap:8px}.arena-bottom i{background:var(--green);width:4px;height:4px}.arena-bottom b{color:#526858;font-weight:400;margin:0 4px}.arena-bottom #round-message{color:#7d8e7e}.focus-note{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);background:#121912ee;padding:11px 16px;color:var(--green);font:11px var(--mono);letter-spacing:.8px;text-align:center;border:1px solid #5b7642;border-radius:3px;white-space:nowrap}.lobby-panel{display:flex;align-items:center;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}.identity{width:260px}.identity>.eyebrow{font-size:9px;letter-spacing:1.3px;display:block;margin-bottom:8px}.name-field{display:flex;align-items:center;gap:10px}.name-field>span{color:var(--green);font:14px var(--mono);padding-right:10px;border-right:1px solid var(--line)}.name-field>input{border:0;background:transparent;color:var(--text);font-size:16px;font-weight:500;width:190px;padding:2px 0;min-width:0}.name-field>input::placeholder{color:var(--muted-foreground, var(--muted))}.name-field>svg{width:14px;height:14px;color:#727e73;flex-shrink:0}.players-status{display:flex;flex-direction:column;gap:9px;color:var(--muted-foreground, var(--muted));font:12px var(--mono);letter-spacing:.2px;margin-right:auto}.players-status>div{display:flex;align-items:center;gap:9px}.players-status i.ready{background:var(--green);box-shadow:0 0 8px #b6f36a33}.players-status i.connected{background:#6c8861;box-shadow:none}.lobby-actions{display:flex;gap:10px}.secondary-button,.primary-button{height:45px;padding:0 19px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:550;background:transparent;color:var(--text);white-space:nowrap}.secondary-button svg{width:17px;height:17px;color:#889780}.secondary-button:hover{background:#20261f;border-color:#546246}.primary-button{background:var(--green);border-color:var(--green);color:#23321b;min-width:164px;gap:27px}.primary-button:hover:not(:disabled){background:#c8ff85;border-color:#c8ff85}.primary-button svg{width:18px;height:18px}.primary-button.is-ready{background:#22351b;color:var(--green);border-color:#486237}.invite-panel{padding:15px 0;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:.7px}.invite-panel>span{display:flex;gap:8px;align-items:center;color:#879485}.invite-panel svg{width:17px;height:17px}.invite-panel code{font:12px var(--mono);color:#bdc9ba;letter-spacing:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invite-panel button{margin-left:auto;padding:6px 0;background:none;border:0;color:var(--green);font:11px var(--mono)}.invite-panel button span{margin-left:12px}.controls-panel{display:flex;gap:25px;align-items:center;padding:27px 0 28px}.controls-title{margin-right:auto;width:220px}.controls-title .eyebrow{font-size:9px}.controls-title strong{display:block;font-size:15px;line-height:1.45;font-weight:500;margin-top:8px;color:#c0c8bb;letter-spacing:-.1px}.control-group{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:55px}.key-row{display:flex;gap:5px}.key-row kbd{display:grid;place-items:center;min-width:29px;height:28px;padding:0 6px;border:1px solid #3d473d;border-bottom:2px solid #4b5848;border-radius:3px;background:#1b211b;color:#c1ccb9;font:11px var(--mono)}.key-row kbd.wide{padding:0 10px}.control-group>span{font-size:12px;color:#8f9a89;white-space:nowrap}.text-button{border:0;background:none;color:#b2c6a0;font:12px var(--mono);white-space:nowrap;margin-left:auto;padding:5px 0}.text-button span{margin-left:9px;font-size:16px;vertical-align:middle;color:var(--green)}.combat-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:23px 0;border-top:1px solid var(--line)}.combat-guide>div>span{font:11px var(--mono);letter-spacing:1px;color:var(--green)}.combat-guide p{font-size:14px;color:var(--muted-foreground, var(--muted));line-height:1.7;margin:12px 0 0}.combat-guide .alternate-controls{grid-column:1/-1;border-top:1px solid var(--line);padding-top:15px;font-size:12px;margin-top:0}footer{padding:18px 0 26px;border-top:1px solid var(--line);color:#61715f;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:1px}footer b{font-weight:400;margin:0 7px}footer a{color:#8b9c80;text-decoration:none}footer a:hover{color:var(--green)}footer a span{margin-left:7px}.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#26351f;color:#dcf7c6;border:1px solid #4e683b;border-radius:5px;padding:12px 20px;font-size:13px;box-shadow:0 10px 30px #0005;z-index:5}.error-banner{padding:12px 16px;background:#352421;color:#f1bcb0;border:1px solid #724035;border-radius:4px;margin:0 0 16px;font-size:14px;line-height:1.5}[hidden]{display:none!important}.game-shell.in-fight{border-color:#465b3b}.is-practice .arena-meta .tag{color:var(--purple);border-color:#5a436f}.is-practice .connection #ping{color:var(--purple)}body:fullscreen .app{max-width:1600px}.arena-viewport:fullscreen{aspect-ratio:2/1;width:100vw;height:100vh}.arena-viewport:fullscreen canvas{object-fit:contain}.arena-viewport:fullscreen .stage-info{top:25px}
@media(min-width:1600px){.app{padding:0 65px}.arena-viewport{max-height:640px}.controls-panel{gap:35px}.control-group{min-width:75px}}@media(max-width:1100px){.app{padding:0 26px}.edition{display:none}.controls-panel{gap:15px}.controls-title{width:170px}.text-button{font-size:10px}.lobby-panel{gap:18px}.identity{width:230px}.name-field>input{width:160px}.arena-meta{font-size:10px;gap:12px}.hud{gap:18px;padding:18px 20px}.arena-heading{padding-top:25px}.game-overlay h2{font-size:42px}}@media(max-width:800px){.app{padding:0 17px}.topbar{height:73px}.brand{font-size:17px;letter-spacing:1px;gap:7px}.brand>svg{width:28px;height:28px}.top-actions{gap:7px}.connection{font-size:9px;margin-right:3px}.connection #ping{display:none}.icon-button{width:32px;height:32px}.arena-heading{padding:23px 0 19px}.arena-viewport{aspect-ratio:2/1}.arena-meta{flex-direction:column;align-items:flex-end;gap:9px}.arena-meta>span:last-child{font-size:8px}.eyebrow{font-size:9px}h1{font-size:27px}.hud{height:85px;gap:15px;padding:14px 15px}.fighter-label{font-size:9px;gap:5px}.fighter-label strong{font-size:10px;max-width:70%}.player-label{font-size:9px}.wins{gap:5px}.wins i{width:5px;height:5px}.you-label{display:none!important}.round-hud{width:65px}.round-hud>strong{font-size:30px;line-height:32px}.round-hud>span{font-size:8px}.round-hud #timer-caption{font-size:6px}.health-track{height:7px;margin:8px 0}.stamina-line>span{font-size:7px}.stamina-track{width:30%}.game-overlay h2{font-size:33px}.game-overlay>span{font-size:8px}.game-overlay p{font-size:10px}.stage-info{left:15px;top:14px;font-size:8px}.stage-info span{display:none}.arena-bottom{left:15px;right:15px;bottom:12px;font-size:8px}.arena-bottom #round-message{font-size:7px}.lobby-panel{flex-wrap:wrap;gap:20px;padding:19px 0}.identity{width:210px}.players-status{font-size:10px}.lobby-actions{width:100%}.lobby-actions>button{flex:1}.invite-panel{gap:10px;font-size:8px;flex-wrap:wrap}.invite-panel>span{width:auto}.invite-panel code{font-size:10px;max-width:60%}.invite-panel button{font-size:10px}.controls-panel{gap:18px;flex-wrap:wrap}.controls-title{width:100%;display:flex;align-items:center;gap:20px}.controls-title strong{margin:0;font-size:13px}.controls-title strong br{display:none}.control-group{flex:1;min-width:50px}.control-group>span{font-size:9px}.text-button{width:100%;text-align:left;margin:3px 0 0}.combat-guide{grid-template-columns:1fr;gap:16px}.combat-guide .alternate-controls{grid-column:auto}footer{font-size:8px;letter-spacing:.5px}footer>span:nth-child(2){display:none}.focus-note{font-size:9px;bottom:32px;padding:8px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.training-panel{display:flex;align-items:center;gap:24px;padding:22px;border:1px solid #3c4b3b;background:#1b241e;border-radius:6px;margin-bottom:20px}.training-panel[hidden]{display:none}.training-panel label{font:10px var(--mono);color:var(--green);display:grid;gap:9px;min-width:220px}.training-panel select{min-height:44px;background:#111914;color:#ecf0e3;border:1px solid #54644c;border-radius:4px;padding:8px;font:13px var(--font);max-width:100%}.training-panel div{flex:1;min-width:0}.training-panel strong{font-size:15px;font-weight:600}.training-panel p{margin:8px 0 0;color:#b4c0ae;font-size:13px;line-height:1.5}.training-panel>span{font:11px var(--mono);color:var(--green)}@media(max-width:650px){.training-panel{align-items:stretch;flex-direction:column;gap:16px;padding:17px}.training-panel label{min-width:0}.training-panel select{width:100%}.training-panel>span{font-size:11px}}
@media(max-width:650px){.lobby-actions{min-width:0;gap:8px}.lobby-actions>button{flex:1 1 0;min-width:0;min-height:48px;height:auto;padding:10px 11px;gap:9px;white-space:normal;font-size:12px;line-height:1.35}.lobby-actions>button svg{flex-shrink:0}.lobby-actions>button span{min-width:0}}
@media(max-width:430px){
  .topbar{gap:8px}.brand{font-size:14px;gap:5px;letter-spacing:.7px}
  .brand>svg{width:23px;height:23px}.top-actions{gap:5px;flex-shrink:0}
  .connection{font-size:8px;letter-spacing:.2px;gap:5px;margin-right:0}
  .icon-button{width:30px;height:30px}
}


/* Keep the play field in view; room setup and instructions live in the drawer. */
.app { max-width: 1920px; padding: 0 20px 8px; }
.app .topbar { height: 48px; min-height: 48px; padding: 0; gap: 16px; flex-wrap: nowrap; }
.brand { font-size: 15px; gap: 8px; letter-spacing: 1.1px; }
.brand > svg { width: 25px; height: 25px; }
.edition { font-size: 9px; margin-left: 3px; padding-left: 12px; }
.app .topbar .top-actions { width: auto; gap: 8px; flex-wrap: nowrap; }
.connection { font-size: 10px; margin-right: 6px; }
.connection #ping { padding-left: 8px; }
.icon-button { width: 32px; height: 32px; flex-shrink: 0; }
.room-controls-button { height: 32px; padding: 0 12px; border: 1px solid #43513e; border-radius: 4px; background: #1c251d; color: #d3dfc9; font: 11px var(--mono); white-space: nowrap; }
.room-controls-button:hover { background: #293523; border-color: #667f52; }
.room-controls-short { display: none; }
.arena-heading { min-height: 38px; padding: 6px 0; align-items: center; gap: 16px; }
.arena-heading > div:first-child { display: flex; align-items: center; gap: 14px; min-width: 0; }
.arena-heading .eyebrow { font-size: 8px; letter-spacing: .8px; }
.arena-heading h1 { font-size: 17px; margin: 0; gap: 7px; letter-spacing: -.4px; order: -1; white-space: nowrap; }
.arena-number { font-size: 9px; margin-top: 2px; }
.arena-meta { padding: 0; gap: 12px; font-size: 9px; }
.tag { padding: 4px 7px; font-size: 8px; }
.game-shell { width: min(100%, calc((100dvh - 208px) * 2.4)); margin: 0 auto; }
.hud { height: 58px; padding: 8px 16px; gap: 24px; }
.fighter-label { height: 15px; gap: 7px; letter-spacing: .35px; }
.fighter-label strong { font-size: 10px; }
.player-label { font-size: 9px; }
.you-label { font-size: 8px; padding: 1px 4px; }
.wins { gap: 6px; }
.wins i { width: 6px; height: 6px; }
.health-track { height: 7px; margin: 5px 0; }
.stamina-track, .stamina-track > div { height: 2px; }
.stamina-line > span { font-size: 7px; }
.round-hud { width: 76px; gap: 0; }
.round-hud > strong { font-size: 27px; line-height: 28px; letter-spacing: -1px; }
.round-hud > span { font-size: 7px; }
.round-hud #timer-caption { font-size: 6px; }
.arena-viewport { aspect-ratio: 2.4 / 1; max-height: none; }
.stage-info { top: 14px; left: 17px; font-size: 9px; }
.arena-bottom { bottom: 13px; left: 17px; right: 17px; font-size: 9px; }
.game-overlay h2 { font-size: 44px; }
.lobby-panel { min-height: 52px; padding: 8px 0; gap: 16px; border-bottom: 0; }
.players-status { font-size: 10px; gap: 5px; }
.players-status > div { gap: 7px; }
.lobby-actions { width: auto; gap: 8px; }
.lobby-actions > button { height: 36px; min-height: 36px; padding: 0 13px; font-size: 12px; gap: 10px; flex: initial; }
.lobby-actions .primary-button { min-width: 140px; }
.training-shortcut { padding: 7px 0; border: 0; background: transparent; color: var(--purple); font: 10px var(--mono); }
.training-shortcut span { margin-left: 5px; }
.error-banner { margin: 0 0 8px; font-size: 12px; padding: 8px 12px; }
.room-controls { color: var(--text); background: #191f1b; border: 1px solid #4b5b43; border-radius: 9px; padding: 0; width: min(670px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); box-shadow: 0 24px 100px #0009; }
.room-controls::backdrop { background: #07100bcc; backdrop-filter: blur(5px); }
.drawer-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 21px; border-bottom: 1px solid var(--line); background: #1c251d; }
.drawer-heading .eyebrow { font-size: 8px; letter-spacing: 1px; }
.drawer-heading h2 { font-size: 20px; font-weight: 550; letter-spacing: -.4px; margin: 6px 0 0; }
.drawer-heading .icon-button { width: 36px; height: 36px; font: 26px/1 var(--font); }
.drawer-content { padding: 0 21px 8px; }
.controls-session-note { font-size: 11px; color: #a5b79c; line-height: 1.5; margin: 14px 0 18px; }
.room-controls .identity { width: 100%; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.room-controls .name-field > input { flex: 1; width: 100%; min-height: 32px; font-size: 16px; }
.room-controls .identity > .eyebrow { margin-bottom: 5px; }
.layout-setting { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.layout-setting > span { font-size: 12px; color: #c0ceba; }
.room-controls .keyboard-layout-label { display: none; }
.room-controls .keyboard-layout-select { min-height: 36px; max-width: 160px; }
.room-controls .training-panel { margin: 16px 0; padding: 15px; gap: 14px; flex-wrap: wrap; }
.room-controls .training-panel label { min-width: 180px; max-width: 100%; }
.room-controls .training-panel select { min-height: 38px; }
.room-controls .training-panel p { font-size: 12px; }
.room-controls .training-panel > span { width: 100%; }
.room-controls .invite-panel { padding: 17px 0; flex-wrap: wrap; gap: 10px; }
.room-controls .invite-panel > span { width: 100%; font-size: 9px; }
.room-controls .invite-panel code { max-width: calc(100% - 102px); font-size: 11px; }
.room-controls .invite-panel button { padding: 7px 0; font-size: 10px; flex-shrink: 0; }
.room-controls .controls-panel { padding: 20px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.room-controls .controls-title { grid-column: 1 / -1; width: 100%; display: block; }
.room-controls .controls-title strong { font-size: 15px; margin-top: 5px; }
.room-controls .control-group { min-width: 0; gap: 7px; }
.room-controls .control-group > span { font-size: 11px; }
.room-controls .text-button { grid-column: 1 / -1; text-align: left; margin: 0; width: 100%; font-size: 11px; }
.room-controls .combat-guide { grid-template-columns: 1fr; padding: 18px 0; gap: 14px; }
.room-controls .combat-guide > div > span { font-size: 10px; }
.room-controls .combat-guide p { font-size: 12px; line-height: 1.6; margin-top: 7px; }
.room-controls .combat-guide .alternate-controls { grid-column: 1; font-size: 11px; }
.room-controls footer { padding: 15px 0 12px; font-size: 8px; gap: 12px; flex-wrap: wrap; }
.room-controls footer > span:nth-child(2) { display: none; }
.app:fullscreen { max-width: none; width: 100%; height: 100%; overflow: auto; padding: 0 12px 5px; background: var(--bg); }
.app:fullscreen .arena-heading { display: none; }
.app:fullscreen .topbar { height: 42px; min-height: 42px; }
.app:fullscreen .game-shell { width: min(100%, calc((100dvh - 140px) * 2.1)); }
.app:fullscreen .arena-viewport { aspect-ratio: 2.1 / 1; }
.app:fullscreen .hud { height: 48px; padding-top: 5px; padding-bottom: 5px; }
.app:fullscreen .lobby-panel { min-height: 44px; padding: 5px 0; }
@media (max-width: 1100px) {
  .edition { display: none; }
  .arena-heading .eyebrow { display: none; }
  .app .topbar .top-actions { gap: 6px; }
}
@media (max-width: 800px) {
  .app { padding: 0 10px 8px; }
  .app .topbar { height: 48px; min-height: 48px; gap: 8px; }
  .brand { font-size: 13px; gap: 5px; letter-spacing: .7px; }
  .brand > svg { width: 23px; height: 23px; }
  .connection { display: none; }
  .room-controls-long { display: none; }
  .room-controls-short { display: inline; }
  .room-controls-button { padding: 0 9px; font-size: 10px; }
  .arena-heading { min-height: 34px; padding: 5px 0; gap: 8px; }
  .arena-heading h1 { font-size: 16px; }
  .arena-meta { flex-direction: row; gap: 0; }
  .arena-meta > span:last-child { display: none; }
  .game-shell { width: 100%; }
  .arena-viewport { aspect-ratio: 2 / 1; }
  .hud { height: 55px; padding: 8px 10px; gap: 10px; }
  .fighter-label strong { font-size: 8px; max-width: 80%; }
  .player-label { font-size: 8px; }
  .wins { gap: 4px; }
  .wins i { width: 4px; height: 4px; }
  .round-hud { width: 49px; }
  .round-hud > strong { font-size: 25px; line-height: 25px; }
  .round-hud > span { font-size: 6px; }
  .round-hud #timer-caption, .stamina-line > span { display: none; }
  .stamina-track { width: 100%; }
  .stage-info { font-size: 7px; top: 10px; left: 10px; }
  .arena-bottom { font-size: 6px; left: 10px; right: 10px; bottom: 9px; }
  .arena-bottom #round-message { display: none; }
  .game-overlay { top: 34%; }
  .game-overlay h2 { font-size: 27px; margin: 8px 0; letter-spacing: -1px; }
  .game-overlay p { font-size: 9px; }
  .game-overlay > span { font-size: 7px; letter-spacing: 1.5px; }
  .game-overlay.countdown h2 { font-size: 48px; }
  .game-overlay.fight-flash h2 { font-size: 40px; }
  .lobby-panel { flex-wrap: wrap; padding: 9px 0 0; gap: 9px; }
  .players-status { width: 100%; font-size: 9px; gap: 5px; }
  .lobby-actions { width: 100%; }
  .lobby-actions > button { min-height: 40px; height: auto; flex: 1 1 0; padding: 9px 8px; font-size: 11px; gap: 7px; line-height: 1.3; }
  .lobby-actions .primary-button { min-width: 0; }
  .training-shortcut { order: 1; width: 100%; text-align: left; padding: 5px 0; }
  .focus-note { max-width: calc(100% - 20px); white-space: normal; width: max-content; bottom: 27px; font-size: 8px; padding: 6px 9px; }
  .app:fullscreen .game-shell { width: min(100%, calc((100dvh - 205px) * 2)); }
  .app:fullscreen .arena-viewport { aspect-ratio: 2 / 1; }
  .app:fullscreen .hud { height: 55px; }
  .app:fullscreen .lobby-panel { gap: 8px; padding: 8px 0 0; }
}
@media (max-width: 430px) {
  .app .topbar .top-actions { gap: 5px; }
  .brand { font-size: 12px; letter-spacing: .55px; gap: 4px; }
  .brand > svg { width: 21px; height: 21px; }
  .icon-button { width: 30px; height: 32px; }
  .room-controls-button { padding: 0 7px; }
  .fighter-label { gap: 4px; }
  .room-controls { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 7px; }
  .drawer-heading { padding: 14px; }
  .drawer-heading h2 { font-size: 18px; }
  .drawer-content { padding: 0 14px 5px; }
  .layout-setting > span { font-size: 11px; }
  .room-controls .keyboard-layout-select { font-size: 10px; max-width: 147px; }
  .room-controls .controls-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .room-controls .training-panel { flex-direction: column; align-items: stretch; padding: 12px; }
  .room-controls .training-panel label { min-width: 0; }
  .room-controls .invite-panel code { max-width: 100%; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .room-controls .invite-panel button { margin-left: 0; }
}