[hidden]{display:none!important}.mode-nav{display:flex;gap:8px}.mode-nav .btn-back{padding:8px 12px;font-size:13px;letter-spacing:1px}#onlineLobby{position:relative;z-index:2;max-width:1124px;margin:24px auto 0;padding:24px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px}.lobby-heading{display:flex;align-items:center;gap:16px;margin-bottom:22px}.lobby-heading h2{font-family:var(--brush);font-size:32px;font-weight:400;letter-spacing:4px}.lobby-heading p,.lobby-card p,.online-note{font-size:13px;color:var(--ink-soft);line-height:1.8}.lobby-heading #connectionStatus{margin-left:auto;font-size:13px;color:var(--cinnabar)}.lobby-forms{display:grid;grid-template-columns:1fr 1fr;gap:16px}.name-field{grid-column:1/-1;display:flex;align-items:center;gap:16px;font-size:14px}.lobby-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}.lobby-card h3{font-size:20px;letter-spacing:2px}.lobby-card label{font-size:13px;color:var(--ink-soft)}.lobby-card .btn{margin-top:auto}#onlineLobby input{font:inherit;font-size:16px;color:var(--ink);background:#fffaf0;border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-width:0}#onlineLobby input:focus{outline:2px solid var(--cinnabar);outline-offset:2px}.name-field input{max-width:260px}.room-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.room-heading strong{font-size:28px;letter-spacing:5px;color:var(--cinnabar);margin:0 12px}#roomPlayers{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0;font-size:14px}#roomPlayers span{padding:10px 16px;border:1px solid var(--line);border-radius:5px}#roomStatus{font-size:16px;margin-bottom:14px}.room-actions{display:flex;gap:12px}#onlineError{color:var(--cinnabar);font-size:14px;min-height:22px;margin-top:12px}.online-note{border-top:1px solid var(--line);padding-top:12px}body.online-mode #setup{display:none!important}body.online-mode:not(.in-room) main{display:none}body.online-mode #btnNew,body.online-mode #btnUndo{display:none}body.online-mode .panel{max-height:640px}@media(max-width:920px){#onlineLobby{margin:16px 14px 0;padding:18px}.lobby-forms{grid-template-columns:1fr}.lobby-heading{flex-wrap:wrap;gap:10px}.lobby-heading #connectionStatus{margin-left:0;width:100%}.name-field{flex-wrap:wrap;gap:8px}.name-field input{flex:1}.room-heading strong{font-size:24px}.mode-nav{flex-wrap:wrap;justify-content:flex-end}header{gap:10px}.brand .tagline{display:none}.brand{gap:8px}.brand h1{font-size:26px}.brand .divider{display:none}body.online-mode .panel{max-height:none}}@media(max-width:400px){header{padding:14px}.mode-nav .btn-back{font-size:12px;padding:7px 8px}.brand .seal{display:none}}

.room-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:12px;min-width:0}
#roomSummary{display:flex;align-items:center;gap:16px;flex:1;min-width:0;font-size:14px;white-space:nowrap}
#roomSummary span:first-child{flex:none;font-weight:600;color:var(--cinnabar)}
#roomSummary span{overflow:hidden;text-overflow:ellipsis;min-width:0}
#toggleRoom{flex:none;letter-spacing:0;padding:6px 10px}
#onlineLobby.room-collapsed{padding:10px 16px}
.room-collapsed .lobby-heading,.room-collapsed .online-note,.room-collapsed #onlineError{display:none}
.room-collapsed .room-toolbar{margin-bottom:0}
#undoDialog{margin:auto;width:min(440px,calc(100vw - 32px));padding:26px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);color:var(--ink);box-shadow:0 20px 60px #2d2a2640;font-family:var(--serif)}
#undoDialog::backdrop{background:rgba(30,24,18,.5)}
#undoDialog h3{font-size:21px;margin-bottom:16px}
#undoDialog p{font-size:14px;line-height:1.9;overflow-wrap:anywhere}
.undo-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.undo-dialog-actions .btn{padding:10px 16px;letter-spacing:1px}
@media(max-width:600px){#roomSummary{font-size:12px;gap:7px}#roomSummary span:not(:first-child){flex:1}#onlineLobby.room-collapsed{padding:9px 10px}.room-toolbar{gap:6px}#toggleRoom{font-size:12px;padding:5px 7px}}
.spectator-section{margin:16px 0;padding-top:12px;border-top:1px solid var(--line)}
.spectator-section h3{font-size:14px;margin-bottom:10px;color:var(--ink-soft)}
#spectatorList{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--ink-soft)}
#spectatorList span{padding:6px 10px;background:var(--paper);border-radius:4px;overflow-wrap:anywhere}
#replacementControls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:16px}
#replacementControls label{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}
#replacementControls select{font:inherit;padding:9px;background:var(--paper);border:1px solid var(--line);border-radius:4px;max-width:100%;color:var(--ink)}
.mode-nav{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){header{flex-wrap:wrap}.mode-nav{width:100%;justify-content:flex-start}.mode-nav .btn-back{font-size:12px;padding:7px 9px}#replacementControls label{flex:1;min-width:130px}}
#roomBrowser{position:relative;z-index:1;max-width:1124px;margin:22px auto 36px;padding:24px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px}
.room-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.room-browser-heading h2{font-size:23px;letter-spacing:3px}
#roomBrowserCount,.room-browser-note,#roomBrowserStatus{font-size:13px;color:var(--ink-soft);line-height:1.8}
#roomBrowserStatus:empty{display:none}
#roomBrowserStatus{padding:20px 0}
.room-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:18px}
.room-card{padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.room-card h3{font-size:19px;letter-spacing:2px}
.room-card-status{align-self:flex-start;font-size:12px;color:var(--cinnabar);background:var(--paper-2);padding:4px 10px;border-radius:20px}
.room-card-players{font-size:14px;line-height:1.9;overflow-wrap:anywhere}
.room-card-meta{font-size:12px;color:var(--ink-soft)}
.room-card-actions{display:flex;gap:10px;margin-top:auto}
.room-card-actions .btn{flex:1;letter-spacing:1px;padding:10px 6px}
.room-card-actions .btn:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
@media(max-width:920px){#roomBrowser{margin:18px 14px 30px;padding:18px}}
@media(max-width:600px){.room-cards{grid-template-columns:1fr}.room-card{padding:16px}}
.passport-account{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-width:0}.passport-account .btn-back{font:inherit;font-size:13px;cursor:pointer;padding:8px 12px;letter-spacing:0}.passport-account #passportUser{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;max-width:260px}.passport-avatar{width:32px;height:32px;object-fit:cover;border-radius:50%;flex:none;vertical-align:middle;margin-right:8px}#passportStatus{font-size:12px;color:var(--cinnabar);max-width:240px}#roomPlayers>span,#spectatorList>span{display:flex;align-items:center;overflow-wrap:anywhere;min-width:0}.room-card-players .passport-avatar{width:24px;height:24px}header{flex-wrap:wrap}header .brand{margin-right:auto}@media(max-width:600px){.passport-account{width:100%;justify-content:flex-end}.passport-account #passportUser{max-width:220px}#roomPlayers>span{max-width:100%}}
body{padding-bottom:76px}
@media(max-width:600px){body.online-mode:not(.in-room) #bgmBox{position:relative;right:auto;bottom:auto;width:max-content;margin:16px 14px 16px auto}}
.stage,.panel{min-width:0}
body:has(#setup.show) header{z-index:51;background:var(--paper)}