.mode-tabs{display:flex;gap:8px;margin:16px auto;max-width:624px}.mode-tabs button{padding:10px 18px;background:var(--panel);border:1px solid var(--border);border-radius:7px;font-size:12px}.mode-tabs button[aria-pressed=true]{background:#23453d;color:var(--accent);border-color:#4c8875}.lobby{max-width:624px;margin:0 auto 18px;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:10px}.lobby button{min-height:42px;padding:10px 14px;border-radius:6px;background:#2c3c50;font-size:12px}.lobby button:disabled{opacity:.5}.room-actions{display:flex;gap:10px;flex-wrap:wrap}.room-actions form{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}.room-actions label{font-size:11px;color:var(--muted)}.room-actions input{width:94px;min-height:42px;background:#0c1019;color:var(--text);border:1px solid #46576f;border-radius:6px;padding:8px;text-transform:uppercase;font:700 16px monospace;letter-spacing:2px}.room-details{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.room-details strong{font-size:25px;letter-spacing:5px;color:var(--accent)}.room-details span{font-size:12px;color:var(--muted)}#network-message{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}.opponent-panel{padding:8px;margin-bottom:10px}.opponent-panel h2{font-size:8px;letter-spacing:.3px;overflow-wrap:anywhere}#opponent{width:100%;height:auto;background:#0c1019;border:1px solid var(--border);border-radius:3px;margin-top:8px}.opponent-info{display:grid;gap:6px;margin-top:8px;font-size:8px;color:var(--muted)}.garbage{color:#ffa589!important;font-weight:700}.self-pending{display:none;margin-top:10px;padding:9px 4px;text-align:center;border:1px solid #754d46;border-radius:7px;font-size:9px;color:#ffb4a0}body[data-network-mode=online] .self-pending{display:block}body[data-network-mode=online] .next-panel{padding-top:8px;padding-bottom:6px}body[data-network-mode=online] #next{max-height:140px;width:auto}body[data-network-mode=online] .help>span:last-child{display:none}body[data-network-mode=online] #pause{display:none}
@media(min-width:600px){.opponent-panel{padding:12px}.opponent-panel h2{font-size:10px}.opponent-info{font-size:10px}.self-pending{font-size:11px}.room-actions{align-items:center}body[data-network-mode=online] #next{max-height:145px}}
@media(max-width:599px){body[data-network-mode=online] .intro{display:none}body[data-network-mode=online] .app{padding-top:12px}body[data-network-mode=online] .header{padding-bottom:12px}body[data-network-mode=online] .mode-tabs{margin:10px 0}body[data-network-mode=online] .lobby{padding:10px;margin-bottom:12px}body[data-network-mode=online] .room-details{gap:8px}body[data-network-mode=online] .room-details strong{font-size:22px;letter-spacing:3px}body[data-network-mode=online] .room-details>span:last-of-type{font-size:10px}}

.lobby .find-match{background:var(--accent);color:#10281f;font-weight:700;flex-basis:100%}.room-actions form{min-width:0}

.mode-tabs{flex-wrap:wrap}
.arena-panel{max-width:624px;margin:18px auto;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:10px}
.arena-panel h2{font-size:13px;margin:0 0 12px}.arena-players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.arena-players article{min-width:0}.arena-players h3,.arena-players p{font-size:10px;overflow-wrap:anywhere;margin:6px 0}
.arena-players canvas{display:block;width:100%;max-width:120px;height:auto;border:1px solid var(--border)}
.arena-players .eliminated{opacity:.45}
@media(min-width:600px){.arena-players{grid-template-columns:repeat(5,minmax(0,1fr))}}