/* SPDX-License-Identifier: GPL-3.0-or-later */
:root {
  color-scheme: dark;
  /* Android RpgUi palette: dark slate panels, amber accent, ANSI terminal tones. */
  --bg: #0b1013;
  --panel: #161f24;
  --line: #3d5058;
  --stroke: #49606a;
  --ink: #f0f3f5;
  --soft: #a9bcc5;
  --gold: #ffc857;
  --good: #76d7b0;
  --bad: #e46f6f;
  --on: #3f5a2c;
  --ansi-yellow: #ffff55;
  --ansi-green: #55ff55;
  --ansi-red: #ff5555;
  --ansi-cyan: #55ffff;
  --ansi-gray: #808080;
  --touch: 44px;
  /* Readable at native 100% zoom: 19px (1280-1520px wide) rising to 21px (>=1680px). */
  --terminal-base: clamp(19px, 1.25vw, 21px);
  --terminal-scale: 1;
  --terminal-font: calc(var(--terminal-base) * var(--terminal-scale));
  /* Desktop PLAY is a size container: the bottom row (lane + pad) keeps at least --lane-min, the room panel's
     heading/description/padding take --room-chrome, and the 5:3 scene gets the rest (never the pane's scroll). */
  --lane-min: 190px;
  --room-chrome: 92px;
  --cut: 14px;
}
* { box-sizing: border-box; }
body { background:var(--bg); color:var(--ink); margin:0; font:14px/1.35 system-ui,-apple-system,Segoe UI,sans-serif; }
button { font:inherit; cursor:pointer; color:var(--ink); background:#22313a; border:1px solid var(--stroke); border-radius:6px; padding:9px; min-height:var(--touch); }
button:disabled { opacity:.4; cursor:not-allowed; }
button:hover:not(:disabled):not([aria-disabled="true"]) { background:#2f4450; }
button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* Visible but unavailable online: explained on click and in the tooltip, never sent to the server. */
button[aria-disabled="true"] { color:var(--soft); background:#141b1f; border-style:dashed; border-color:#4d5a60; cursor:help; }
[hidden] { display:none !important; }

/* Desktop shell: connection strip over the terminal (left, ~46%); the control deck takes the full height right. */
.shell { width:100%; height:100dvh; padding:8px 10px; display:grid; gap:6px 10px;
  grid-template-columns:minmax(0,1fr) minmax(520px,54%); grid-template-rows:auto minmax(0,1fr); }
.play-layout { display:contents; }
#game-header { grid-column:1; grid-row:1; }
.terminal-panel { grid-column:1; grid-row:2; }
.right-panel { grid-column:2; grid-row:1 / 3; }

.hud-bar { display:flex; align-items:center; gap:8px; min-width:0; min-height:36px; padding:0 2px; }
.brand { flex:none; font-size:12px; letter-spacing:.12em; color:var(--gold); }
#network { flex:1 1 auto; min-width:0; font-size:12px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
#reconnect { flex:none; padding:4px 10px; font-size:12px; min-height:34px; }

/* Persistent terminal (Android TerminalViewport): black, ANSI colours, read-only statline pinned below. */
.terminal-panel { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:#000; border:1px solid #2b3a40; border-radius:8px; }
#terminal, .log-history {
  overflow-y:auto; background:#000; padding:10px 14px;
  white-space:pre-wrap; overflow-wrap:anywhere; color:#d9d9d9;
  font:var(--terminal-font)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
}
#terminal { flex:1 1 auto; min-height:0; }
.log-history { border:1px solid #23392b; border-radius:4px; min-height:240px; }
.prompt-line { flex:none; padding:6px 14px 8px; border-top:1px solid #333; background:#000; color:var(--ansi-yellow);
  font:var(--terminal-font)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:break-word; user-select:text; }
/* Resolved on each text element, so its own data-size scale applies (a :root calc would be fixed at 1). */
#terminal, .log-history, .prompt-line { --terminal-font: calc(var(--terminal-base) * var(--terminal-scale)); }
/* Room chat under the terminal, MUD style: speech only, never a command line. */
#mobile-chat-toggle { display:none; }
.terminal-panel .room-chat { flex:none; padding:6px 10px 8px; border-top:1px solid #2b3a40; background:#05090a; }
[data-size="small"] { --terminal-scale:.8; }
[data-size="large"] { --terminal-scale:1.2; }

/* Control deck: status, automation, the selected destination, then the five-tab bar. */
.right-panel { display:flex; flex-direction:column; gap:6px; min-width:0; min-height:0; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:5px; }
.panel-head h1,.panel-head h2 { font-size:14px; margin:0; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-head span { font-size:12px; color:var(--soft); flex:none; }

/* Android ControlStatus: name • LV, currency, lives, menu; HP/MP/ST gauges; full-width LEV bar. */
.meters { flex:none; padding:0 10px 6px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.hud-identity { display:flex; align-items:center; gap:10px; min-width:0; }
#level { flex:0 1 auto; min-width:0; color:var(--ansi-yellow); font-size:14px; font-weight:800; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-mode { flex:1 1 auto; min-width:0; font-size:12px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-stat { flex:none; display:flex; align-items:center; gap:3px; color:var(--ansi-green); font-size:13px; font-variant-numeric:tabular-nums; }
.hud-stat svg { width:14px; height:14px; }
.hud-money svg { fill:var(--ansi-yellow); }
.hud-lives svg { fill:var(--ansi-red); }
#hud-menu { flex:none; width:44px; padding:0; margin-right:-8px; font-size:20px; color:var(--ansi-cyan); background:transparent; border-color:transparent; }
.vitals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 12px; }
.vitals label { display:flex; justify-content:space-between; gap:4px; color:var(--soft); font-size:12px; line-height:1.2; margin-bottom:1px; white-space:nowrap; }
.hp-mark { color:var(--ansi-red); } .mp-mark { color:#5599ff; } .st-mark { color:#ccaa44; }
progress { width:100%; height:8px; appearance:none; border-radius:6px; overflow:hidden; border:1px solid #26353a; background:#000; }
progress::-webkit-progress-bar { background:#000; }
progress::-webkit-progress-value { background:#d0494d; }
#mp::-webkit-progress-value { background:#5599ff; }
#st::-webkit-progress-value { background:#ccaa44; }
#xp-progress::-webkit-progress-value { background:#e7d34a; }
#action-progress::-webkit-progress-value { background:#c9b06a; }
progress::-moz-progress-bar { background:#d0494d; }
#mp::-moz-progress-bar { background:#5599ff; }
#st::-moz-progress-bar { background:#ccaa44; }
#xp-progress::-moz-progress-bar { background:#e7d34a; }
#action-progress::-moz-progress-bar { background:#c9b06a; }
.level { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:3px; font-size:12px; line-height:1.2; }
.level b { color:var(--ansi-yellow); font-size:11px; }
.level progress { height:6px; }
.level small { font-size:12px; color:var(--gold); font-variant-numeric:tabular-nums; }

/* Android AutomationBar: ATK / REST / ROAM / SETUP, then one truthful activity strip. */
.automation-bar { flex:none; padding:5px; }
.automation { display:grid; grid-template-columns:1fr 1.15fr 1fr .95fr; gap:5px; }
.strip-button { padding:4px 6px; font-size:12.5px; font-weight:800; letter-spacing:.05em; white-space:nowrap; color:var(--gold);
  background:linear-gradient(#262a24,#1a1d1a); border-color:#ffc857a8; }
.strip-button b { color:var(--bad); }
.toggle[aria-pressed="true"] { background:linear-gradient(#3e4d26,#2c3a1d); border-color:var(--gold); color:#f3f7d8; }
.toggle[aria-pressed="true"] b { color:#c9f2b8; }
.activity { display:grid; grid-template-columns:minmax(0,1fr) minmax(70px,26%); gap:8px; align-items:center; margin-top:5px; padding:3px 8px; background:#00000048; border:1px solid #3d5058b0; border-radius:6px; }
.activity-text { display:flex; flex-direction:column; min-width:0; }
#combat-status { color:var(--good); font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#automation-note { color:var(--ansi-gray); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#action-progress { height:6px; }

/* Destinations. */
.views { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.view { flex:1 1 auto; min-height:0; }
.page { overflow-y:auto; }
.page-title { margin:4px 0 6px; font-size:17px; color:var(--gold); letter-spacing:.03em; }
.page-subtitle { margin:14px 0 6px; font-size:14px; color:var(--gold); }
.page-note { margin:0 0 10px; color:var(--soft); font-size:13px; line-height:1.45; }
.facts { grid-template-columns:minmax(0,auto) minmax(0,1fr); font-size:14px; margin-bottom:12px; }
.facts dd { font-weight:650; overflow-wrap:anywhere; }
.subnav { display:flex; gap:5px; margin-bottom:10px; }
.subnav button { flex:1; font-weight:700; letter-spacing:.04em; }
.subnav [aria-selected="true"], .tab-strip [aria-selected="true"] { background:#3a3420; border-color:var(--gold); color:var(--gold); }
.choice-row { display:flex; flex-wrap:wrap; gap:6px; }
.choice-row button { flex:1 1 100px; font-weight:650; }
.choice-row [aria-pressed="true"] { background:#3a3420; border-color:var(--gold); color:var(--gold); }
button.wide { width:100%; }
.page .toggle b { margin-left:6px; color:var(--bad); }
.beast { display:flex; flex-direction:column; gap:2px; padding:8px; margin-bottom:6px; border:1px solid var(--line); border-radius:6px; }
.beast span { font-size:12px; color:var(--soft); }
.primary-nav { flex:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding:3px; background:#141d22; border:1px solid var(--stroke); border-radius:12px; }
.primary-nav button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:46px; padding:2px; background:transparent; border-color:transparent; border-radius:8px; font-size:12px; font-weight:650; letter-spacing:.04em; }
.primary-nav svg { width:17px; height:17px; fill:currentColor; }
.primary-nav .more-dots { font-size:15px; line-height:19px; color:var(--soft); }
.primary-nav [aria-selected="true"] { color:var(--gold); background:#ffc8572b; border-color:#ffc857cc; font-weight:900; }
.primary-nav [data-attention="true"]::after { content:""; position:absolute; top:6px; right:calc(50% - 20px); width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* PLAY: room heading; fixed 5:3 octagonal scene beside SESSION STATS; description; actions + pad;
   contextual room details; room chat. PLAY scrolls inside its pane, so short windows never squeeze the scene. */
.play-view { display:flex; flex-direction:column; gap:6px; overflow-y:auto; scrollbar-gutter:stable; }
.play-view > .panel { flex:none; }
#mobile-room-toggle, #mobile-room-close {display:none;}
.room-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 2px 6px; min-width:0; }
.room-head h1 { margin:0; font-size:14px; font-weight:700; color:var(--ansi-cyan); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-head span { flex:none; font-size:11px; letter-spacing:.06em; color:var(--soft); }
/* Desktop: the scene takes what the height allows; SESSION STATS fills the rest, directly beside it. */
.scene-row { display:flex; gap:8px; align-items:stretch; }
/* The side column never sets the row height (contain:size); it scrolls inside if short. */
.scene-side { flex:1 0 clamp(160px,30%,230px); display:flex; flex-direction:column; gap:6px; min-width:0; contain:size; overflow-y:auto; }
.session-stats { flex:1 0 auto; }
/* The scene's size belongs to the viewport, never to room text. */
.scene-frame { position:relative; flex:0 1 max(240px, calc((100cqh - var(--lane-min) - var(--room-chrome)) * 5 / 3)); min-width:0; align-self:start; padding:2px; background:#8a7440;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut)); }
canvas { display:block; width:100%; height:auto; aspect-ratio:5 / 3; object-fit:contain; image-rendering:pixelated; background:#172019;
  clip-path:polygon(calc(var(--cut) - 1px) 0,calc(100% - var(--cut) + 1px) 0,100% calc(var(--cut) - 1px),100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,calc(var(--cut) - 1px) 100%,0 calc(100% - var(--cut) + 1px),0 calc(var(--cut) - 1px)); }
.session-stats { min-width:0; min-height:0; overflow-y:auto; padding:6px 8px; background:#1d2a30c7; border:1px solid #3d5058c0; border-radius:6px; }
.session-stats h2 { margin:0 0 5px; font-size:11px; font-weight:900; letter-spacing:.06em; color:var(--gold); }
.session-stats dl { grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:3px 6px; font-size:12px; }
.session-stats dt { color:var(--ansi-gray); white-space:nowrap; }
.session-stats dd { color:#fff; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-missing { margin:6px 0 0; font-size:10.5px; line-height:1.3; color:var(--ansi-gray); }
/* Real MajorMUD shop rooms only: LIST/SELL entry points beside the scene, then a modal list with a confirmation
   step. The bar sits in the side column, so entering a shop never moves or resizes the 5:3 scene. */
.shop-bar { flex:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:5px; margin:0; padding:5px; border:1px solid #8a7440; border-radius:6px; background:#2a2617; }
.shop-label { display:flex; align-items:baseline; gap:6px; min-width:0; grid-column:1 / -1; }
.shop-label small { flex:none; font-size:10px; letter-spacing:.08em; color:var(--gold); }
.shop-label strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-status { display:block; grid-column:1 / -1; font-size:11px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-bar button { padding:4px 3px; font-size:12px; font-weight:650; white-space:nowrap; min-height:32px; }
.shop-bar .shop-primary { background:#5b4a22; border-color:var(--gold); }
.modal { position:fixed; inset:0; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:center; padding:12px; background:#000b; z-index:5; }
.modal-dialog { display:flex; flex-direction:column; gap:8px; width:min(94vw,640px); max-height:calc(100dvh - 24px); min-height:0; padding:14px; background:var(--panel); border:1px solid var(--gold); border-radius:10px; }
.shop-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.shop-dialog-head h2 { margin:0; font-size:16px; color:var(--gold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-dialog-head button { flex:none; padding:6px 12px; min-height:44px; }
.shop-wallet { margin:0; font-size:12px; color:var(--soft); overflow-wrap:anywhere; }
.shop-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.shop-tabs button { padding:6px; font-weight:650; min-height:44px; }
.shop-tabs [aria-selected="true"] { background:#44543a; border-color:#84936b; color:var(--gold); }
.shop-note { margin:0; min-height:1.3em; font-size:12px; color:var(--gold); overflow-wrap:anywhere; }
.shop-rows { flex:1 1 auto; min-height:80px; overflow-y:auto; color:var(--soft); font-size:13px; }
.shop-row { display:block; width:100%; margin:0 0 5px; padding:7px 8px; text-align:left; min-height:44px; }
.shop-row:disabled { opacity:.7; }
.shop-row .row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; }
.shop-row .name { min-width:0; overflow-wrap:anywhere; }
.shop-row .price { flex:none; color:#9fe0a8; font-variant-numeric:tabular-nums; }
.shop-row .detail, .shop-row .reason { display:block; margin-top:3px; font-size:11px; color:var(--soft); }
.shop-row .reason { color:#efa7a7; }
.shop-row.rarity-rare .name { color:#82b4ff; }
.shop-row.rarity-epic .name { color:#c79cff; }
.shop-row.rarity-legendary .name { color:#f2ab55; }
.shop-more { margin:4px 0; font-size:11px; }
.shop-confirm { flex:none; padding:10px; background:#221f13; border:1px solid var(--gold); border-radius:8px; }
.shop-confirm p { margin:0 0 8px; line-height:1.4; overflow-wrap:anywhere; }
.shop-confirm button { min-height:44px; }
/* The description reserves a fixed height: room text length must never move the scene or controls. */
.room p#description { margin:6px 2px 0; line-height:1.4; color:var(--soft); font-size:13px; height:2.8em; overflow-y:auto; }
/* Android PlayControls: an action lane (GO / ROOM, room lists) beside the movement pad. */
.controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,290px); gap:10px; align-items:start; min-height:0; }
.play-lane { display:flex; flex-direction:column; gap:6px; min-width:0; min-height:0; }
.play-actions { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:4px 10px; min-width:0; flex:none; }
.action-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:3px 5px; min-width:0; }
.action-group[aria-label="Room"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.group-label { grid-column:1; font-size:10px; font-weight:900; letter-spacing:.1em; color:var(--gold); }
.action-group[aria-label="Travel"] .group-label { grid-column:1 / -1; }
.action-group button { padding:4px 6px; font-size:12px; font-weight:800; letter-spacing:.05em; white-space:nowrap; }
.stealth-status { grid-column:2 / -1; font-size:10.5px; color:var(--ansi-gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Movement: compass + vertical column; handedness swaps the sides (Android movementControlOrder). */
.movement { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:5px; }
/* Right-handed (Android default): vertical column left, compass under the right thumb. */
.movement[data-handed="right"] { grid-template-columns:minmax(0,1fr) minmax(0,3fr); }
.movement[data-handed="right"] .vertical { order:-1; }
.dpad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.dpad button { height:var(--touch); font-size:21px; padding:2px; touch-action:manipulation; }
.dpad #rest { font-size:12px; font-weight:800; background:#3d3f2e; border-color:#8a7440; }
.dpad #rest[aria-pressed="true"] { background:#5b5a2e; border-color:var(--gold); }
.vertical { display:grid; grid-template-rows:repeat(2,minmax(var(--touch),1fr)); gap:5px; }
.vertical button { padding:2px; font-size:12px; font-weight:800; touch-action:manipulation; }

/* PLAY contextual room details (not navigation). */
.info-tabs { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.tab-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-bottom:6px; flex:none; }
.tab-strip button { padding:4px 1px; font-size:11.5px; font-weight:650; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:36px; }
.tab-strip button span { color:var(--gold); }
.tab-panel { flex:none; max-height:200px; min-height:0; overflow-y:auto; }
.entries { color:var(--soft); font-size:13px; }
.entries button { display:block; width:100%; text-align:left; margin:0 0 5px; padding:7px 8px; }
.entries button.selected { border-color:var(--gold); background:#4c482c; }
.encounter .row { display:flex; justify-content:space-between; gap:6px; }
.encounter .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.encounter .badge { color:var(--gold); font-size:12px; flex:none; }
.encounter .hpbar { display:block; height:5px; margin-top:5px; border-radius:3px; background:#2b2622; overflow:hidden; }
.encounter .hpbar span { display:block; height:100%; background:#b45458; }
.encounter .act { display:block; margin-top:3px; font-size:12px; color:var(--soft); }
dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; margin:0; font-size:13px; }
dt { color:var(--soft); }
dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.auth { position:fixed; inset:0; display:grid; place-items:center; background:#000c; z-index:5; }
.auth-dialog { background:#1c2c22; border:1px solid #5d7e63; border-radius:12px; padding:25px; width:min(90vw,420px); }
.auth-dialog { max-height:calc(100dvh - 24px); overflow-y:auto; }
.auth-dialog input { width:100%; padding:12px; background:#0b1210; color:#fff; border:1px solid #839881; margin-bottom:10px; }

/* Room presence, chat, and account entry. */
.players .entries { color:var(--gold); overflow-wrap:anywhere; }
.chat-controls { display:flex; gap:7px; }
.chat-controls input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#08140d; color:var(--ink); }
.chat-controls button { flex:none; padding:7px 12px; }
.name-controls { margin-bottom:7px; }
.auth-dialog label { display:block; margin:10px 0 5px; font-size:12px; color:var(--soft); }
.auth-dialog input { width:100%; margin-bottom:5px; }
.auth-dialog p { line-height:1.4; color:var(--soft); }
.auth-dialog #auth-error { color:#efa7a7; min-height:1em; font-size:12px; }
.auth-dialog small { display:block; margin-top:12px; color:var(--soft); }
.auth-buttons { display:flex; gap:8px; }
.auth-buttons button { flex:1; }

/* Gear layout: native ProcRPG slots. Existing audited CC0 hero sprite for the paper-doll background. */
.equipment { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.paper-doll { grid-template-columns:repeat(3,minmax(0,1fr)); background:url('art/mf_knight_green.png') center / 70% auto no-repeat; image-rendering:pixelated; }
.gear-slot,.bag-row { min-width:0; padding:7px; border:1px solid var(--line); border-radius:6px; background:#0b1915eb; overflow-wrap:anywhere; }
.gear-slot { font-size:12px; min-height:64px; }
.slot-label { margin:0 0 5px; color:var(--gold); font-size:11px; text-transform:uppercase; }
.empty-slot { color:var(--soft); }
.item-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--gold); }
.item-detail { font-size:12px; line-height:1.4; margin:5px 0; }
.item-action { width:100%; min-height:44px; margin-top:5px; white-space:normal; overflow-wrap:anywhere; }
.inventory { display:grid; gap:6px; }
.rarity-rare { color:#82b4ff; }
.rarity-epic { color:#c79cff; }
.rarity-legendary { color:#f2ab55; }

/* Wide decks: the automation buttons and the activity line share one row. */
@media (min-width:1250px) {
  .automation-bar { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:6px; align-items:stretch; }
  .activity { margin-top:0; }
}
/* Desktop PLAY never scrolls as a whole: it is a size container split into the room row and the action row. */
@media (min-width:1100px) {
  .play-view { display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; container-type:size; }
  .controls { height:100%; align-items:stretch; }
  .play-lane { overflow-y:auto; }
  .info-tabs { min-height:84px; }
  .tab-panel { flex:1 1 0; max-height:none; }
  #movement { align-self:start; }
  /* The lane's own width decides how its tabs fit (container query below), not the window's. */
  .play-lane { container-type:inline-size; }
}
@container (max-width:340px) {
  .tab-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .play-actions { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1100px) and (max-width:1249px) {
  .scene-side { flex-basis:clamp(200px,36%,230px); }
}
@media (min-width:1100px) and (max-height:820px) {
  :root { --room-chrome:74px; }
  /* Short laptops: tighter stats. */
  .session-stats { padding:4px 7px; }
  .session-stats h2 { margin-bottom:2px; }
  .session-stats dl { row-gap:0; line-height:1.25; }
  .ss-missing { margin-top:3px; }
  .brand { display:none; }
  .room p#description { height:1.45em; }
}
/* Below desktop: the deck is too narrow for scene + stats side by side; stats become a compact strip. */
@media (max-width:1099px) {
  :root { --terminal-base:14px; }
  .scene-row { display:grid; grid-template-columns:minmax(0,1fr); }
  /* Stacked under the scene, the side column sizes to its content again. */
  .scene-side { contain:none; overflow:visible; }
  .scene-frame { width:100%; }
  .session-stats { overflow:visible; }
  .session-stats dl { grid-template-columns:repeat(2,auto minmax(0,1fr)); column-gap:10px; }
  /* Tablet/phone: the lane flattens into the panel; the pad comes before the room lists, as before. */
  .controls { display:flex; flex-direction:column; gap:8px; }
  .play-lane { display:contents; }
  .play-actions { grid-template-columns:minmax(0,1fr); order:0; }
  #movement { order:2; }
  .info-tabs { order:3; }
  .tab-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* TWO_PANE below desktop (Android: >= 600dp): terminal left, a bounded 296-440px control deck right. */
@media (min-width:600px) and (max-width:1099px) {
  .shell { grid-template-columns:minmax(0,1fr) clamp(296px, 45%, 440px); padding:8px; }
  .brand { display:none; }
  .automation { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .strip-button { font-size:12px; letter-spacing:.02em; padding:3px; }
  .hud-identity { gap:6px; }
  .hud-mode { display:none; }
}
/* Android STACKED phone shell: terminal first (~1/3 screen), permanent HUD, scrolling destination, fixed navigation.
   The outer page never scrolls, even when chat or a shop becomes active. */
@media (max-width:599px) {
  :root { --terminal-base:16px; }
  html,body { height:100%; max-height:100%; overflow:hidden; overscroll-behavior:none; }
  .shell { display:flex; flex-direction:column; height:100vh; height:100dvh; max-height:100dvh;
    min-height:0; overflow:hidden; gap:4px;
    padding: max(3px,env(safe-area-inset-top)) 6px max(3px,env(safe-area-inset-bottom)); }
  #game-header { flex:none; min-height:32px; gap:4px; margin:0; padding:0 2px; flex-wrap:nowrap; }
  #network { text-align:left; min-width:0; font-size:11px; }
  #change-world,#reconnect { font-size:11px; padding:2px 6px; min-height:32px; }
  .brand { display:none; }
  .play-layout { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; gap:4px; }
  .right-panel { display:contents; }
  .terminal-panel { order:0; flex:0 0 clamp(164px,33dvh,300px); height:clamp(164px,33dvh,300px);
    max-height:38dvh; min-height:0; }
  #terminal { flex:1 1 auto; min-height:0; height:auto; padding:6px 9px; }
  .prompt-line { padding:4px 9px 5px; }
  #mobile-chat-toggle { display:block; flex:none; width:100%; min-height:44px; padding:3px 8px;
    background:#101a1c; color:var(--gold); border:0; border-top:1px solid var(--stroke);
    border-radius:0; font-size:12px; font-weight:800; }
  .terminal-panel .room-chat { display:none; }
  .terminal-panel #mobile-chat-toggle[aria-expanded="true"] + .room-chat { display:block; padding:4px 6px; }
  .terminal-panel .room-chat input { min-height:44px; font-size:16px; }
  .meters { order:1; flex:none; padding:0 7px 3px; border-radius:7px; }
  .hud-identity { gap:5px; }
  #level { font-size:12px; }
  .hud-mode { display:none; }
  .hud-stat { font-size:12px; gap:2px; }
  #hud-menu { margin-right:-6px; }
  .vitals { gap:2px 5px; }
  .vitals label { font-size:10px; }
  .automation-bar { order:2; flex:none; padding:3px; border-radius:7px; }
  .automation { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  .strip-button { font-size:10.5px; letter-spacing:0; padding:2px; }
  .activity { padding:2px 5px; margin-top:3px; gap:4px; }
  #combat-status { font-size:12px; }
  #automation-note { font-size:10.5px; }
  .views { order:3; flex:1 1 auto; min-height:0; max-height:none; overflow:hidden; }
  .view { min-height:0; height:100%; }
  .page,.play-view { overflow-y:auto; min-height:0; height:100%; overscroll-behavior:contain; scrollbar-gutter:auto; }
  .primary-nav { order:4; position:static; flex:none; margin:0; z-index:3; min-height:60px;
    padding:3px; box-shadow:none; border-radius:10px; }
  .primary-nav button { min-height:48px; font-size:10.5px; }
  .primary-nav svg { width:19px; height:19px; }
  .controls { gap:6px; }
  .info-tabs { flex:0 0 auto; }
  .tab-panel { max-height:170px; }
  .scene-frame { width:100%; }
  .room p#description { height:2.8em; }
  .scene-side { contain:none; overflow:visible; }
  .session-stats { overflow:visible; }
  .session-stats dl { grid-template-columns:repeat(2,auto minmax(0,1fr)); column-gap:8px; }
}

/* Phone-sized Android PLAY parity: side-by-side scene/stats and actions/pad, not a desktop column
   that forces the player to scroll past the graphic before reaching movement. */
@media (max-width:599px) {
  :root { --terminal-base:13px; --touch:38px; }
  .shell { gap:3px; padding:2px 5px max(2px, env(safe-area-inset-bottom)); }
  #game-header { min-height:22px; }
  #network { font-size:10px; }
  #change-world, #reconnect { min-height:24px; font-size:10px; padding:2px 5px; }
  .play-layout { gap:3px; }
  .terminal-panel { position:relative; flex:0 0 clamp(128px,25dvh,205px);
    height:clamp(128px,25dvh,205px); max-height:none; }
  #terminal { font-size:var(--terminal-font); padding:4px 6px; line-height:1.27; }
  .prompt-line { padding:3px 6px; line-height:1.15; }
  #mobile-chat-toggle { position:absolute; display:block; z-index:2; top:2px; right:3px;
    bottom:auto; width:auto; min-height:26px; height:26px; border:1px solid #42514d;
    border-radius:4px; padding:1px 5px; font-size:9.5px; background:#12201dcf; }
  .terminal-panel .room-chat { flex:none; }
  .meters { padding:1px 5px 2px; }
  .hud-identity { height:27px; min-height:27px; gap:4px; }
  #level { font-size:12px; }
  #hud-menu { width:27px; min-height:26px; height:26px; font-size:18px; margin-right:-3px; }
  .hud-stat { font-size:11px; }
  .hud-stat svg { width:12px; height:12px; }
  .vitals { gap:1px 4px; }
  .vitals label { font-size:9.5px; line-height:1.1; margin-bottom:0; }
  .vitals progress { height:5px; vertical-align:top; }
  .level { margin-top:1px; gap:4px; line-height:1; }
  .level b, .level small { font-size:9.5px; }
  .level progress { height:5px; }
  .automation-bar { padding:2px; }
  .automation { gap:3px; }
  .strip-button { font-size:11px; }
  .automation .strip-button { min-height:32px; padding:1px 2px; font-size:10.5px; }
  .activity { margin-top:2px; min-height:19px; padding:1px 4px; }
  .activity-text { flex-direction:row; gap:4px; }
  #combat-status { font-size:11px; flex:none; }
  #automation-note { font-size:9px; white-space:nowrap; text-overflow:ellipsis; flex:1; }
  .views { flex:1 1 auto; min-height:0; }
  .play-view { gap:3px; }
  .play-view > .panel { flex:none; }
  .room { padding:4px 5px; }
  .room-head { gap:4px; min-height:23px; align-items:center; margin:0 1px 2px; }
  .room-head h1 { font-size:12px; flex:1 1 auto; }
  .room-head span { font-size:9px; }
  #mobile-room-toggle { display:block; flex:none; min-height:23px; height:23px;
    padding:1px 5px; border-color:#82703c; font-size:9px; font-weight:800; color:var(--gold); }
  .scene-row { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:start; gap:5px; }
  .scene-frame { width:100%; min-width:0; flex:none; padding:1px; }
  .scene-side { display:flex; flex-direction:column; gap:2px;
    height:calc((100vw - 28px) * .30); max-height:155px; min-height:0; overflow-y:auto; }
  .session-stats { flex:none; overflow:visible; min-height:0; padding:2px 4px; }
  .session-stats h2 { font-size:9.5px; margin:0 0 2px; }
  .session-stats dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 3px; font-size:9.5px; line-height:1.2; }
  .session-stats dt { overflow:hidden; text-overflow:ellipsis; }
  .session-stats dd { font-size:9.5px; }
  .ss-missing { display:none; }
  .room p#description { display:none; }
  .scene-side .shop-bar { padding:2px; gap:2px; border-radius:4px; }
  .scene-side .shop-label small { font-size:8.5px; }
  .scene-side .shop-label strong { font-size:10px; }
  .scene-side .shop-status { font-size:9px; }
  .scene-side .shop-bar[data-accessible="true"] .shop-status { display:none; }
  .scene-side .shop-bar button { font-size:10.5px; min-height:32px; padding:1px 2px; }
  .modal { padding:6px; }
  .modal-dialog { width:100%; max-height:calc(100dvh - 12px); padding:10px; gap:6px; }
  .barrier-lane { padding:2px; gap:2px; }
  .barrier-action, .barrier-chip { font-size:10px; min-height:30px; }
  .controls { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    align-items:start; gap:5px; padding:4px 5px; }
  .play-lane { display:flex; flex-direction:column; gap:5px; min-width:0; }
  .play-actions { display:flex; flex-direction:column; gap:7px; min-width:0; }
  .action-group, .action-group[aria-label="Room"] { display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
  .action-group .group-label { grid-column:1; font-size:9px; align-self:center; }
  .stealth-status { grid-column:2; font-size:9px; }
  .action-group button { min-height:35px; padding:2px; font-size:10.5px; letter-spacing:0; }
  .action-group[aria-label="Room"] #look { grid-column:1; }
  .movement, .movement[data-handed="right"] { display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,3fr); align-self:start; gap:3px; }
  .movement[data-handed="right"] .vertical { order:-1; }
  .dpad { gap:3px; }
  .dpad button { min-height:39px; height:39px; padding:1px; font-size:17px; }
  .dpad #rest { font-size:10px; }
  .vertical { gap:5px; grid-template-rows:repeat(2,52px); }
  .vertical button { min-height:45px; font-size:10px; }
  .info-tabs { display:none; }
  .info-tabs.mobile-room-open { display:flex; flex-direction:column;
    position:fixed; left:6px; right:6px;
    bottom:calc(57px + env(safe-area-inset-bottom)); z-index:4;
    max-height:min(45dvh,320px); min-height:120px;
    overflow:hidden; padding:6px; border:1px solid var(--gold);
    border-radius:8px; background:var(--panel); box-shadow:0 -6px 24px #000d; }
  #mobile-room-close { display:block; min-height:31px; flex:none; margin-bottom:3px;
    color:var(--gold); background:#2a301c; font-size:10px; }
  .info-tabs.mobile-room-open .tab-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .info-tabs.mobile-room-open .tab-strip button { min-height:35px; font-size:10px; }
  .info-tabs.mobile-room-open .tab-panel { flex:1 1 auto; max-height:none; min-height:0; overflow-y:auto; }
  .primary-nav { padding:2px; min-height:53px; }
  .primary-nav button { min-height:47px; }
}
/* Keep the Android-style statline to one row at typical phone widths. */
@media (max-width:599px) {
  .prompt-line { font-size:11px; line-height:1.2; }
}
/* Small phones in landscape-like viewport heights get a compressed native-style control deck.
   Every action remains accessible without forcing the entire PLAY view to scroll. */
@media (max-width:599px) and (max-height:620px) {
  .terminal-panel { flex-basis:clamp(98px,19dvh,112px); height:clamp(98px,19dvh,112px); }
  .hud-identity { height:23px; min-height:23px; }
  .meters { padding-bottom:0; }
  .vitals label { font-size:9px; }
  .automation-bar { padding:1px; }
  .automation .strip-button { min-height:30px; }
  .activity { display:none; }
  .room-head { min-height:20px; }
  .scene-frame { max-width:145px; }
  .scene-side { max-height:88px; }
  .action-group button { min-height:30px; }
  .play-actions { gap:4px; }
  .controls { padding:2px 4px; }
  .dpad button { min-height:35px; height:35px; }
  .vertical { grid-template-rows:repeat(2,44px); }
  .vertical button { min-height:39px; }
  .primary-nav { min-height:47px; }
  .primary-nav button { min-height:42px; }
}
@media (max-width:599px) and (min-height:621px) {
  .terminal-panel { flex-basis:clamp(128px,23.5dvh,205px); height:clamp(128px,23.5dvh,205px); }
}
@media (max-width:599px) {
  .prompt-line { font-size:calc(clamp(9px,2.65vw,11px) * var(--terminal-scale)); }
}
/* Controls on separately scrolling CHAR/ITEMS/SKILLS/MORE pages retain normal touch targets. */
@media (max-width:599px) { .page button { min-height:44px; } }
/* World menu and MajorMUD character creation live in the sign-in style overlays only; PLAY layout is unchanged. */
.world-label { display:block; margin:10px 0 5px; font-size:12px; color:var(--soft); }
.world-choices { margin-bottom:6px; }
.world-choices button { flex:1 1 140px; min-height:44px; }
.world-choices button:disabled { opacity:.45; }
.auth-dialog select { width:100%; padding:10px; background:#0b1210; color:#fff; border:1px solid #839881; margin-bottom:5px; }
#world-error { color:#efa7a7; min-height:1em; font-size:12px; }
#settings-worlds { margin-bottom:6px; }