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

/* ── Theme variables ─────────────────────────────────────────────────────── */
:root {
  --bg:         #000000;
  --hdr-bg:     #111111;
  --hdr-fg:     #aaaaaa;
  --btn-bg:     #222222;
  --btn-border: #555555;
  --sb-thumb:   rgba(180, 180, 180, 0.4);
  --box-border: rgba(255, 176, 0, 0.35);
  --cmd-fg:     #ffb000;
}
:root.day {
  --bg:         #f5f2ed;
  --hdr-bg:     #dddad4;
  --hdr-fg:     #333333;
  --btn-bg:     #ccc8c0;
  --btn-border: #999690;
  --sb-thumb:   rgba(80, 80, 80, 0.35);
  --box-border: rgba(0, 0, 0, 0.2);
  --cmd-fg:     #333333;
}

html { height: 100%; }

body {
  height: 100%;
  background: var(--bg);
  font-family: monospace;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
#hdr {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  font-size: 14px;
  user-select: none;
}
#theme-btn {
  padding: 3px 10px;
  background: var(--btn-bg);
  color: var(--hdr-fg);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-family: monospace;
}
#theme-btn:hover { filter: brightness(1.2); }

/* ── Main area: left pane | terminal column | right pane ──────────────────── */
#main {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  background: var(--bg);
}

/* Side panes share whatever width the fixed-width terminal leaves over. */
.side {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Scale the artwork to fit the pane, never cropping or stretching it. */
.side img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Too narrow for artwork (phones): give the terminal all the room. */
@media (max-width: 900px) {
  .side { display: none; }
}

/* Column wrapper — auto-sized to xterm content width, fills full height */
#terminal-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Scrollable output area — grows to fill all space above the prompt */
#terminal-wrap {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--box-border);
  border-bottom: none;
  /* Flex column so #terminal stretches to the full height; FitAddon sizes the
     rows from #terminal's height, so without this it stays at xterm's
     default 24 rows. */
  display: flex;
  flex-direction: column;
}

#terminal {
  flex: 1;
  min-height: 0;
}

/* ── In-game prompt pane: prompt line + command box ───────────────────────── */
[hidden] { display: none !important; }

#prompt-wrap {
  flex-shrink: 0;
  padding: 2px 4px;
  border: 1px solid var(--box-border);
  font-family: monospace;
  font-size: 16px;
  line-height: 1.35;
  color: var(--hdr-fg);
  background: var(--bg);
}

#prompt-line {
  white-space: pre;
  overflow: hidden;
  user-select: none;
}

#cmd {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--cmd-fg);
  caret-color: var(--cmd-fg);
  font: inherit;            /* 16px keeps iOS from zooming on focus */
}

/* ── xterm scrollbar ─────────────────────────────────────────────────────── */
.xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
.xterm-viewport::-webkit-scrollbar       { width: 8px; }
.xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 4px;
}

/* ── Mobile landscape: compact header ───────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  #hdr         { height: 28px; font-size: 12px; padding: 0 8px; }
  #theme-btn   { font-size: 13px; padding: 2px 7px; }
}