/* ── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-base:        #0d0d0d;
  --bg-panel:       #111111;
  --bg-panel-alt:   #161616;
  --bg-hover:       #1e1e1e;
  --bg-active:      #252525;

  --text-primary:   #c8c8c0;
  --text-secondary: #7a7a72;
  --text-dim:       #747470;
  --text-accent:    #b8a878;   /* warm amber — item highlights, section labels */
  --text-alert:     #c84040;   /* red — damage, danger */
  --text-good:      #6a9a6a;   /* muted green — success, unlocked */

  --border-color:   #282828;
  --border-accent:  #3a3a32;

  --font-text:      'Georgia', 'Times New Roman', serif;
  --font-ui:        'Courier New', 'Courier', monospace;

  --panel-left-w:   22%;
  --panel-right-w:  26%;
}

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
}

/* ── Title Screen ─────────────────────────────────────────────────────────── */

#title-screen {
  position: fixed;
  inset: 0;
  background: #0b0c09;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}

#title-screen.fade-out {
  animation: title-fade 0.6s ease forwards;
}

@keyframes title-fade {
  to { opacity: 0; pointer-events: none; }
}

#title-inner {
  text-align: center;
  font-family: 'VT323', 'Courier New', monospace;
}

#title-op {
  font-size: 28px;
  letter-spacing: 0.45em;
  color: #a08858;
  margin-bottom: 4px;
}

#title-name {
  font-size: 96px;
  color: #c8b878;
  text-shadow: 0 0 40px rgba(200,184,120,0.5), 0 0 80px rgba(200,184,120,0.2);
  line-height: 1;
  margin-bottom: 32px;
  letter-spacing: 0.08em;
}

#title-credits {
  font-size: 20px;
  color: #b09468;
  letter-spacing: 0.1em;
  margin-bottom: 64px;
}

#title-prompt {
  font-size: 22px;
  color: #c8aa68;
  letter-spacing: 0.15em;
  animation: cursor-blink 1.1s step-end infinite;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

#game-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ── Left Panel — Commands ─────────────────────────────────────────────────── */

#panel-command {
  width: var(--panel-left-w);
  min-width: 180px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 12px;
  flex-shrink: 0;
}

#command-verb-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

#command-groups {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.command-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.group-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 4px;
}

.group-buttons {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#group-movement .group-buttons,
#group-actions .group-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* Verb buttons */
.verb-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  letter-spacing: 0.04em;
}

.verb-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
}

.verb-btn.selected {
  background: var(--bg-active);
  border-color: var(--text-accent);
  color: var(--text-accent);
}

.verb-btn.contextual {
  color: #e0d8a8;
  border-color: #3a3830;
}

.verb-btn.contextual:hover {
  background: var(--bg-hover);
  border-color: #e0d8a8;
}

.verb-btn.aegis {
  color: #c878a0;
  border-color: #3a1a2a;
}

.verb-btn.aegis:hover {
  background: #1e0c16;
  border-color: #c878a0;
}


.noun-shortcut-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.noun-shortcut-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.noun-shortcut-btn.from-inventory {
  color: var(--text-dim);
  border-style: dashed;
}

.noun-shortcut-btn.from-inventory::before {
  content: "▪ ";
  opacity: 0.6;
}

/* Verb state (shows after verb click) */
#verb-state {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#verb-state-label {
  font-size: 11px;
  color: var(--text-accent);
}

#verb-cancel {
  background: none;
  border: 1px solid var(--text-alert);
  color: var(--text-alert);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
}

#verb-cancel:hover {
  background: #1e0808;
}

/* ── Centre Panel — Room ───────────────────────────────────────────────────── */

#panel-room {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
  position: relative;
}

#room-header {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

#zoom-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  transition: color 0.1s, border-color 0.1s;
}

#zoom-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-accent);
}

/* ── Zoom levels ───────────────────────────────────────────────────────────── */

body[data-zoom="compact"] #room-output,
body[data-zoom="compact"] .prompt-line {
  font-size: 15px;
}

body[data-zoom="large"] #room-output,
body[data-zoom="large"] .prompt-line {
  font-size: 26px;
}

#room-level-tag {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #ffffff;
  font-weight: bold;
}

#room-name {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-accent);
}

/* Room canvas wrapper — contains the scrollable text output + CRT overlay */
#room-canvas-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #0b0c09;
}

/* CRT scanlines */
#room-canvas-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 3px
  );
  pointer-events: none;
  z-index: 2;
}

/* CRT vignette */
#room-canvas-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.48) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Scrollable text output */
#room-output {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 26px 30px 64px;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.45;
  background: transparent;
  cursor: default;
  z-index: 1;
}

/* Text blocks */
.text-block {
  margin-bottom: 18px;
}

.text-content {
  white-space: pre-wrap;
}

.text-block.description .text-content { color: #c8b878; text-shadow: 0 0 10px rgba(200,184,120,0.33); }
.text-block.cutscene    .text-content { color: #b0a868; text-shadow: 0 0 10px rgba(176,168,104,0.33); }
.text-block.flashback   .text-content { color: #8a7850; text-shadow: 0 0 10px rgba(138,120, 80,0.33); font-style: italic; }
.text-block.action-result .text-content { color: #ffffff; font-weight: bold; }
.text-block.damage        .text-content { color: #b84040; font-weight: bold; }
.text-block.system        .text-content { color: #ffffff; font-weight: bold; }

/* Flashback prefix label */
.flashback-label {
  font-size: 16px;
  color: #a08858;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

/* Clickable noun underlines */
.noun-link {
  text-decoration: underline;
  text-decoration-color: rgba(200,184,120,0.4);
  cursor: pointer;
}

.noun-link:hover {
  text-decoration-color: currentColor;
}

/* Blinking block cursor */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.text-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.85em;
  background: #e0d090;
  vertical-align: text-bottom;
  margin-left: 2px;
}

/* Idle cursor blinks; typing cursor is solid */
.text-cursor.idle {
  animation: cursor-blink 0.8s step-end infinite;
}

/* "> █" prompt line shown when idle */
.prompt-line {
  color: #b09a60;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.45;
  margin-top: 4px;
}

.prompt-chevron {
  color: #b09a60;
}

/* Typed buffer (what the user has entered so far) */
.prompt-buffer {
  color: #c8b878;
}

/* Ghost hint — first matching suggestion shown in gray after the buffer */
.prompt-hint {
  color: #606058;
}

/* Executed command echo */
.text-block.command .text-content {
  color: #b09a60;
}

/* Room divider (same-level transition) */
.text-block.divider {
  border-top: 1px solid #1e1e18;
  margin: 10px 0 6px;
}
.text-block.divider .text-content { display: none; }

/* Noun tray */
#noun-tray {
  padding: 10px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel-alt);
  flex-shrink: 0;
}

#noun-tray-label {
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

#noun-tray-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.noun-btn {
  background: none;
  border: 1px solid var(--border-accent);
  color: var(--text-accent);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.1s;
}

.noun-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-accent);
}

.noun-btn.from-inventory::before {
  content: "▪ ";
  color: var(--text-secondary);
}

/* Puzzle overlay */
#puzzle-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-accent);
  padding: 20px 24px;
  z-index: 10;
}

#puzzle-prompt {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-family: var(--font-text);
  font-style: italic;
}

#puzzle-input-area {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.puzzle-digit-input {
  background: var(--bg-base);
  border: 1px solid var(--border-accent);
  color: var(--text-accent);
  font-family: var(--font-ui);
  font-size: 18px;
  width: 48px;
  height: 48px;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
}

.puzzle-digit-input:focus {
  border-color: var(--text-accent);
}

.puzzle-text-input {
  background: var(--bg-base);
  border: 1px solid var(--border-accent);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  min-width: 200px;
}

.puzzle-text-input:focus {
  border-color: var(--text-accent);
}

.puzzle-label {
  font-size: 11px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 4px;
}

.puzzle-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.puzzle-submit {
  background: none;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 16px;
  cursor: pointer;
  align-self: flex-end;
}

.puzzle-submit:hover {
  background: var(--bg-hover);
}

#puzzle-feedback {
  font-size: 12px;
  min-height: 18px;
}

#puzzle-feedback.fail {
  color: var(--text-alert);
}

#puzzle-feedback.success {
  color: var(--text-good);
}

#puzzle-cancel {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  margin-top: 8px;
  padding: 0;
}

#puzzle-cancel:hover {
  color: var(--text-secondary);
}

/* Combination dial display */
.combo-dials {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.combo-dial {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Choice overlay */
#choice-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  z-index: 20;
}

#choice-prompt {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 32px;
  max-width: 600px;
}

#choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.choice-btn {
  background: none;
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}

.choice-btn::before {
  content: "[ ";
  color: var(--text-dim);
}

.choice-btn::after {
  content: " ]";
  color: var(--text-dim);
}

.choice-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Self-destruct bar */
#self-destruct-bar {
  padding: 8px 24px;
  background: #1a0808;
  border-top: 1px solid #3a1010;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-alert);
  letter-spacing: 0.1em;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

#sd-count {
  font-size: 16px;
  font-weight: bold;
}

/* ── Right Panel — Inventory & Status ──────────────────────────────────────── */

#panel-inventory {
  width: var(--panel-right-w);
  min-width: 200px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

#status-section {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border-color);
}

#inventory-section {
  padding: 14px;
  flex: 1;
  overflow-y: auto;
}

#group-nouns {
  padding: 14px;
  border-top: 1px solid var(--border-color);
}

#group-nouns #buttons-nouns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#journal-section {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
}

.panel-section-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Health pips */
#health-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.1em;
}

#health-pips {
  display: flex;
  gap: 4px;
}

.hp-pip {
  width: 12px;
  height: 12px;
  border: 1px solid var(--text-alert);
}

.hp-pip.full {
  background: var(--text-alert);
}

.hp-pip.empty {
  background: none;
  border-color: var(--text-dim);
}

/* Status effects */
#status-effects {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.status-tag {
  font-size: 10px;
  color: var(--text-alert);
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1px solid #3a1010;
  background: #1a0808;
  align-self: flex-start;
}

/* Inventory list */
#inventory-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-item {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 5px 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  font-family: var(--font-ui);
}

.inv-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.inv-item.selected-noun {
  border-color: var(--text-accent);
  color: var(--text-accent);
  background: var(--bg-active);
}

.inv-empty {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 8px;
}

/* Journal button */
#btn-journal {
  width: 100%;
  background: none;
  border: 1px solid #87ceeb;
  color: #87ceeb;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 8px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

#btn-journal:hover {
  background: var(--bg-hover);
  color: #b0e0f5;
  border-color: #b0e0f5;
}

/* ── Journal Modal ─────────────────────────────────────────────────────────── */

#journal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#journal-modal-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  width: min(640px, 90vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#journal-modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

#journal-modal-header button {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.1em;
}

#journal-modal-header button:hover {
  color: var(--text-primary);
  border-color: var(--border-accent);
}

#journal-modal-content {
  overflow-y: auto;
  padding: 20px 24px;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.journal-entry {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.journal-entry:last-child {
  border-bottom: none;
}

.journal-entry-key {
  font-size: 10px;
  font-family: var(--font-ui);
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

/* ── Background / Briefing Screen ─────────────────────────────────────────── */

#background-screen {
  position: fixed;
  inset: 0;
  background: #0a0b08;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#background-screen.fade-out {
  animation: title-fade 0.8s ease forwards;
}

/* CRT scanlines */
#background-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 3px
  );
  pointer-events: none;
  z-index: 1;
}

/* CRT vignette */
#background-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

#bg-inner {
  position: relative;
  z-index: 2;
  width: min(680px, 86vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 52px 0 44px;
}

#bg-classification {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #908050;
  margin-bottom: 36px;
  text-align: center;
  flex-shrink: 0;
}

#bg-output {
  flex: 1;
  overflow-y: auto;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.65;
  color: #9a9888;
  white-space: pre-wrap;
  scrollbar-width: none;
  min-height: 0;
}

#bg-output::-webkit-scrollbar {
  display: none;
}

.bg-seg-header {
  color: #c8a848;
  letter-spacing: 0.08em;
}

.bg-seg-accent {
  color: #d0c8a8;
}

.bg-seg-dim {
  color: #a09878;
}

.bg-seg-footer {
  color: #a08840;
  letter-spacing: 0.08em;
}

#bg-proceed {
  display: none;
  text-align: center;
  margin-top: 28px;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 17px;
  color: #c8a840;
  letter-spacing: 0.18em;
  animation: cursor-blink 1.1s step-end infinite;
  flex-shrink: 0;
}

#bg-skip {
  position: fixed;
  top: 28px;
  right: 36px;
  background: none;
  border: 1px solid #87ceeb;
  color: #87ceeb;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 0.18em;
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  z-index: 3;
}

#bg-skip:hover {
  color: #b0e0f5;
  border-color: #b0e0f5;
}

/* ── Mobile / Cellphone — Portrait ────────────────────────────────────────── */
/*   Room panel on top; command + inventory side-by-side below                */

@media (orientation: portrait) and (max-width: 768px) {

  html, body {
    height: 100%;
  }

  #game-container {
    display: grid;
    grid-template-areas:
      "room room"
      "cmd  inv";
    grid-template-rows: 42vh 58vh;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
  }

  #panel-room {
    grid-area: room;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  #panel-command {
    grid-area: cmd;
    width: 100%;
    min-width: unset;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding: 12px 10px;
  }

  #panel-inventory {
    grid-area: inv;
    width: 100%;
    min-width: unset;
    min-height: 0;
    overflow-y: hidden;
    border-left: none;
    padding-bottom: max(64px, env(safe-area-inset-bottom, 64px));
  }

  #status-section {
    flex-shrink: 0;
  }

  #inventory-section {
    min-height: 0;
  }

  #group-nouns {
    flex-shrink: 0;
  }

  #journal-section {
    flex-shrink: 0;
  }

  #room-output {
    font-size: 17px;
    padding: 14px 14px 48px;
  }

  #room-header {
    padding: 10px 14px 8px;
  }

  .verb-btn {
    font-size: 11px;
    padding: 7px 8px;
  }

  #command-verb-label {
    margin-bottom: 10px;
    padding-bottom: 6px;
  }

  #command-groups {
    gap: 14px;
  }

  #title-name {
    font-size: 54px;
    margin-bottom: 20px;
  }

  #title-op {
    font-size: 18px;
  }

  #title-credits {
    font-size: 14px;
    margin-bottom: 36px;
  }

  #title-prompt {
    font-size: 16px;
  }

  body[data-zoom="compact"] #room-output,
  body[data-zoom="compact"] .prompt-line {
    font-size: 13px;
  }

  body[data-zoom="large"] #room-output,
  body[data-zoom="large"] .prompt-line {
    font-size: 22px;
  }

  /* Mobile zoom also adjusts the room/commands row split */
  body[data-zoom="compact"] #game-container {
    grid-template-rows: 35vh 65vh;
  }

  body[data-zoom="large"] #game-container {
    grid-template-rows: 52vh 48vh;
  }
}

/* ── Mobile / Cellphone — Landscape ───────────────────────────────────────── */
/*   Three-column layout retained, panels tightened for narrow height          */

@media (orientation: landscape) and (max-height: 480px) {

  #game-container {
    height: 100vh;
    height: 100dvh;
  }

  #panel-command {
    width: 26%;
    min-width: unset;
    padding: 10px 8px;
  }

  #panel-inventory {
    width: 26%;
    min-width: unset;
  }

  #room-output {
    font-size: 16px;
    padding: 12px 18px 40px;
  }

  #room-header {
    padding: 8px 16px 6px;
  }

  .verb-btn {
    font-size: 11px;
    padding: 5px 8px;
  }

  #command-groups {
    gap: 12px;
  }

  #title-name {
    font-size: 52px;
    margin-bottom: 16px;
  }

  #title-op {
    font-size: 16px;
  }

  #title-credits {
    font-size: 13px;
    margin-bottom: 20px;
  }

  #title-prompt {
    font-size: 15px;
  }
}

/* ── Utility ───────────────────────────────────────────────────────────────── */

.hidden {
  display: none !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-accent);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}