:root{color-scheme:dark}
html,body{min-width:0!important;width:100%;max-width:100%;overflow:hidden;overscroll-behavior:none}
body{overflow:hidden}
button,input,select,textarea{font-size:16px;touch-action:manipulation}
.app-shell{height:100dvh;width:100%;max-width:100%;min-width:0;border:0;overflow:hidden;grid-template-rows:28px minmax(0,1fr)}
.titlebar{display:none!important}
.menubar{height:28px;min-height:28px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:0 2px;gap:0;-webkit-overflow-scrolling:touch}
.menubar>button,.menu-item>button{padding:4px 8px;font-size:13px!important;white-space:nowrap;flex:0 0 auto}
.menubar .mini{height:22px;min-width:22px;font-size:11px!important}
.server-label{display:none}
.menu-dropdown{position:fixed;top:28px;left:4px;right:4px;max-height:70dvh;overflow:auto;z-index:100}
.menu-dropdown button{font-size:15px!important;padding:10px 12px}
.workspace{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
.chat-panel{border:0;grid-template-rows:28px minmax(0,1fr) 36px}
.chat-panel:has(>.irc-profile-tabs:not([hidden])){grid-template-rows:28px 24px minmax(0,1fr) 36px}
.session-tabs .tab{height:28px;max-width:210px;font-size:12px!important}
.session-tabs .tab .tab-close{height:22px;width:22px}
.session-tabs .add-tab{width:28px;flex-basis:28px}
.irc-profile-tabs,.irc-profile-tabs .irc-profile-tab{height:24px}
.console-host .console{font:14px/1.4 'Segoe UI',Arial,sans-serif;padding:6px}
.composer{align-items:stretch;padding:4px;gap:5px}
.composer input{height:28px;min-width:0;font-size:16px}
.composer button{height:28px;min-width:52px;font-size:12px!important;background:#1b1b1b!important;color:#eee!important;border:1px solid #999!important;border-radius:0!important}
.roster-panel{display:none}
body.mobile-roster .roster-panel{display:grid;position:fixed;top:28px;right:0;bottom:36px;left:36px;z-index:50;grid-template-rows:30px 1fr;box-shadow:0 0 0 100vmax #0009}
.roster-item{min-height:32px;align-items:center;font-size:15px}
.modal{width:calc(100% - 12px)!important;min-width:0!important;max-width:650px!important;max-height:calc(100dvh - 16px)!important;padding:0;overflow:auto}
.modal form{padding:12px}
.modal input:not([type=checkbox]),.modal select{min-height:36px}
.modal header{position:sticky;top:0;background:#111;z-index:2;padding:5px 0}
.modal footer{flex-wrap:wrap}
.modal footer button{background:#1c1c1c!important;color:#eee!important;border:1px solid #999!important}
.form-grid,.home-row.has-character,.checkbox-grid,.user-profile-grid{grid-template-columns:1fr!important}
.character-manager-main{grid-template-columns:minmax(0,1fr) 66px}
.character-create-bar{grid-template-columns:1fr}
.profile-card{min-width:0}
.scr-races{gap:4px}
#mobile-connection{position:fixed;inset:0;z-index:10000;background:#000;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px;line-height:1.45}
#mobile-connection h2{color:#e6e6e6;margin:0;font-weight:400}
#mobile-connection p{color:#9a9a9a}
#mobile-connection button,#mobile-connection input{padding:12px;border:1px solid #555;border-radius:0;background:#1b1b1b;color:#eee;font:16px 'Segoe UI',Arial,sans-serif}
#mobile-connection input{width:100%;background:#050505}
body:has(>.body){grid-template-rows:36px 32px minmax(0,1fr) auto;height:100dvh}
.body{grid-template-columns:minmax(0,1fr)!important}
.body>aside{display:none}
body.mobile-details .body>aside{display:flex;position:fixed;inset:72px 8px 8px;z-index:30;background:#101010;overflow:auto}
.lobby-panel{padding:6px}
.lobby-browse,.lobby-create{padding:10px;max-width:100%;overflow:auto}
.lobby-toolbar,.game-toolbar,.footer{flex-wrap:wrap}
.toolbar{flex-wrap:wrap;padding:6px!important;gap:4px!important}
.toolbar button{padding:6px;font-size:13px!important}
.game-panel{max-width:calc(100% - 16px)!important;left:8px;right:8px;bottom:12px;padding:10px!important}
.party-panel{transform:none!important}
.sc-play{grid-template-columns:minmax(0,1fr)!important;overflow:auto}
.sc-players-pane{max-height:35dvh;overflow:auto}
#map{touch-action:none}
.lobby-table{min-width:480px}
.lobby-table-wrap{overflow:auto}
@media(min-width:760px){.workspace{grid-template-columns:minmax(0,1fr) 230px}.roster-panel{display:grid}.body{grid-template-columns:minmax(0,1fr) 260px!important}.body>aside{display:flex}.form-grid,.user-profile-grid{grid-template-columns:1fr 1fr!important}}
/* Game pages keep four visible rows. Hiding the title bar shifted the map into a 32px row. */
body.mobile-game{height:100dvh;grid-template-rows:40px 38px minmax(0,1fr) auto;font-size:14px}
body.mobile-game>.titlebar{display:flex!important;gap:6px;padding:4px 8px;overflow-x:auto;white-space:nowrap}
body.mobile-game>.titlebar .title{display:none}
body.mobile-game>.titlebar button{padding:5px 9px;flex-shrink:0}
body.mobile-game>.statusbar{min-height:0;overflow-x:auto;white-space:nowrap;gap:12px;padding:0 8px;font-size:12px}
body.mobile-game>.statusbar>*{flex-shrink:0}
body.mobile-game>.body{min-height:0;min-width:0}
body.mobile-game .map-wrap{min-height:0}
body.mobile-game .toolbar{max-height:112px;overflow-y:auto;min-height:40px}
body.mobile-game .sc-play{grid-template-rows:minmax(0,1fr);overflow:hidden}
body.mobile-game .sc-players-pane{display:none}
body.mobile-game.mobile-details .sc-players-pane{display:flex;position:fixed;inset:78px 8px 8px;z-index:40;max-height:none;background:#000;border:1px solid #555;overflow:auto}
body.mobile-game .sc-chat-pane{min-height:0}
body.mobile-game .sc-log{font-size:14px}
body.mobile-game .lobby-table-wrap table{min-width:550px}
body.mobile-game .original-hud{height:auto;aspect-ratio:800/120;max-height:120px}
body.mobile-game .hud-mini-panel{width:264px;height:36px;bottom:100%}
body.mobile-game .inventory-panel,body.mobile-game .character-panel{padding:0!important;right:auto;left:0;bottom:auto;max-width:100%!important;--panel-scale:var(--mobile-panel-scale,1)!important;width:calc(320px * var(--panel-scale));height:calc(432px * var(--panel-scale));overflow:visible}
@media(min-width:760px){body.mobile-game .sc-play{grid-template-columns:minmax(0,1fr) 260px!important}body.mobile-game .sc-players-pane{display:flex;max-height:none}}
