/* ============================================================
   Bashquest - local styles. Pairs with ../iz.css for the ECT
   header. Defines the terminal + HUD layout, dungeon palette,
   and dark / light / auto + high-visibility themes.
   ============================================================ */

/* ── theme tokens: light (default) ─────────────────────────── */
:root {
  --bq-bg:        #eef0e6;
  --bq-surface:   #ffffff;
  --bq-panel:     #faf9f1;
  --bq-ink:       #1c211e;
  --bq-ink-muted: #5c6660;
  --bq-line:      #d9d8cf;
  --bq-line-soft: #ecead8;
  --bq-accent:    #00694e;   /* Cutler Green   */
  --bq-accent-dk: #024230;   /* Under the Elms */
  --bq-err-bg:    #fce6e6;
  --bq-err-fg:    #b81b1b;
  --bq-shadow:    0 4px 14px rgba(0,0,0,0.12);

  /* terminal palette: Ubuntu 24.04 GNOME-Terminal (Tango on aubergine).
     Kept constant across the app's light/dark themes - a terminal is a
     terminal. The 16 SGR colours live in terminal.js (SGR_PAL). */
  --bq-term-bg:   #300A24;   /* Ubuntu aubergine */
  --bq-term-fg:   #ffffff;
  --bq-term-dim:  #b9aeb4;
  --bq-term-dir:  #729FCF;   /* bold blue   */
  --bq-term-exec: #8AE234;   /* bold green  */
  --bq-term-link: #34E2E2;   /* bold cyan   */
  --bq-term-warn: #FCE94F;
  --bq-term-err:  #EF2929;
  --bq-term-cursor: #ffffff;
}

html[data-theme="dark"] {
  --bq-bg:        #12150f;
  --bq-surface:   #1b1f17;
  --bq-panel:     #20241b;
  --bq-ink:       #d8dad2;
  --bq-ink-muted: #a4a89e;
  --bq-line:      #2c3531;
  --bq-line-soft: #2c3531;
  --bq-accent:    #4fc3a1;
  --bq-accent-dk: #024230;
  --bq-err-bg:    #3a1818;
  --bq-err-fg:    #ff7f7f;
  --bq-shadow:    0 4px 18px rgba(0,0,0,0.55);
  --bq-term-bg:   #300A24;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bq-bg:        #12150f;
    --bq-surface:   #1b1f17;
    --bq-panel:     #20241b;
    --bq-ink:       #d8dad2;
    --bq-ink-muted: #a4a89e;
    --bq-line:      #2c3531;
    --bq-line-soft: #2c3531;
    --bq-accent:    #4fc3a1;
    --bq-accent-dk: #024230;
    --bq-err-bg:    #3a1818;
    --bq-err-fg:    #ff7f7f;
    --bq-shadow:    0 4px 18px rgba(0,0,0,0.55);
    --bq-term-bg:   #300A24;
  }
}

/* ── high-visibility: bigger fonts, heavier weight, contrast ── */
html.hr-hivis { font-size: 18px; }
html.hr-hivis body { font-weight: 600; }
html.hr-hivis {
  --bq-ink: #000000;
  --bq-line: #444;
  --bq-term-fg: #f2f6e8;
  --bq-term-dim: #b9c4a4;
}
html.hr-hivis[data-theme="dark"] { --bq-ink: #ffffff; --bq-line: #ddd; }
html.hr-hivis .bq-output { font-size: 1.05rem; line-height: 1.55; }

/* ── shell ─────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
  background: var(--bq-bg);
  color: var(--bq-ink);
  display: flex;
  flex-direction: column;
}

/* ── header tweaks (ducky 36px, dark-mode header) ──────────── */
.ect-header { padding: 8px 16px; gap: 12px; }
.ect-header img { height: 36px; }
.ect-header-divider { height: 36px; }
.ect-header-title .school { font-size: 1.2rem; }

/* Tagline sits on the LEFT next to the title; it shrinks (ellipsis) and then
   hides entirely when width runs short - the menu + code box take precedence. */
.ect-header-title { flex: 0 0 auto; }
.bq-tagline { flex: 1; min-width: 0; text-align: left; }
.bq-tagline .app-description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Adventure Code field (left of the hamburger) with a copy icon */
.bq-code-box { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bq-code-box[hidden] { display: none; }
/* Spell Mastery badge: a compact "SM" header toggle, left of the Adventure
   Code. RED pill = mastery ON, WHITE pill = mastery OFF. */
.bq-mastery-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 22px; padding: 0; border-radius: 11px; cursor: default;
  font: inherit; line-height: 1; user-select: none;
  background: var(--bq-err-fg, #c0392b); border: 1px solid var(--bq-err-fg, #c0392b);
}
.bq-mastery-sm { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #fff; }
.bq-mastery-badge.is-off { background: #fff; border-color: var(--bq-line); }
.bq-mastery-badge.is-off .bq-mastery-sm { color: var(--putnam, #756e65); }
.bq-code-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bq-ink-muted);
}
.bq-code-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--bq-line); border-radius: 6px;
  background: var(--bq-surface);
}
.bq-code-field {
  width: 138px; border: none; background: transparent; color: var(--bq-ink);
  font-family: ui-monospace, monospace; font-size: 0.92rem; letter-spacing: 1px;
  padding: 5px 0 5px 10px;
}
.bq-code-field:focus { outline: none; }
.bq-code-copy {
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  color: var(--bq-accent); display: flex; align-items: center;
}
.bq-code-copy:hover { color: var(--bq-ink); }
.bq-code-copy svg { width: 16px; height: 16px; }

@media (max-width: 1020px) { .bq-code-label { display: none; } }
@media (max-width: 720px)  { .bq-tagline { display: none; } }

html[data-theme="dark"] .ect-header,
html[data-theme="dark"] .ect-header-toggle {
  background: var(--bq-surface);
  border-bottom-color: var(--bq-accent);
}
html[data-theme="dark"] .ect-header-title .school { color: var(--bq-accent); }
html[data-theme="dark"] .ect-header-app-title .app-description { color: var(--bq-ink-muted); }
html[data-theme="dark"] .ect-hamburger-btn { border-color: var(--bq-accent); color: var(--bq-accent); }
html[data-theme="dark"] .ect-hamburger-btn:hover { background: var(--bq-accent); color: var(--bq-surface); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .ect-header { background: var(--bq-surface); border-bottom-color: var(--bq-accent); }
  html[data-theme="auto"] .ect-header-title .school { color: var(--bq-accent); }
  html[data-theme="auto"] .ect-header-app-title .app-description { color: var(--bq-ink-muted); }
  html[data-theme="auto"] .ect-hamburger-btn { border-color: var(--bq-accent); color: var(--bq-accent); }
}

/* ── hamburger menu - ENE-style light surface ──────────────── */
.ect-nav-menu {
  background: var(--bq-surface);
  border: 2px solid var(--bq-accent);
  border-radius: 8px;
  padding: 6px;
  min-width: 240px;
  box-shadow: var(--bq-shadow);
}
.ect-nav-menu a {
  display: block;
  padding: 8px 10px;
  color: var(--bq-accent-dk);
  font-weight: 600;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}
html[data-theme="dark"] .ect-nav-menu a { color: var(--bq-accent); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .ect-nav-menu a { color: var(--bq-accent); } }
.ect-nav-menu a:hover { background: var(--sycamore); color: var(--bq-accent-dk); }

/* Settings flyout (opens to the LEFT of the menu, same surface) */
.bq-menu-sub { position: relative; }
.bq-menu-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bq-sub-arrow { color: var(--bq-ink-muted); }
.bq-submenu {
  display: none; position: absolute; top: -8px; right: 100%; margin-right: 10px;
  background: var(--bq-surface); border: 2px solid var(--bq-accent);
  border-radius: 8px; padding: 6px; min-width: 230px; box-shadow: var(--bq-shadow);
}
.bq-submenu.open { display: block; }

.ect-nav-menu a[data-act="cycle-dark-mode"],
.ect-nav-menu a[data-act="hivis"],
.ect-nav-menu a[data-act="colorblind"],
.ect-nav-menu a[data-act="sound"],
.ect-nav-menu a[data-act="toggle-hud"],
.ect-nav-menu a[data-act="toggle-mastery"] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bq-menu-state {
  font-size: 0.78em; font-weight: 700; padding: 1px 8px; border-radius: 10px;
  background: var(--bq-accent); color: var(--bq-surface); letter-spacing: 0.04em;
}
.bq-menu-state.is-off { background: var(--bq-line); color: var(--bq-ink-muted); }
/* CLI submenu: a label with the underlying command shown as a monospace hint */
.ect-nav-menu a.bq-menu-cli { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bq-menu-cmd { font-family: ui-monospace, monospace; font-size: 0.82em; color: var(--bq-ink-muted); }

.ect-nav-menu a.hr-menu-danger,
html[data-theme="dark"] .ect-nav-menu a.hr-menu-danger { color: var(--bq-err-fg); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .ect-nav-menu a.hr-menu-danger { color: var(--bq-err-fg); } }
.ect-nav-menu a.hr-menu-danger:hover { background: var(--bq-err-bg); color: var(--bq-err-fg); }

/* ── main layout: terminal + HUD ───────────────────────────── */
.bq-app {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  gap: 10px;
  padding: 10px;
}

.bq-terminal-pane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bq-term-bg);
  border: 1px solid var(--bq-line);
  border-radius: 8px;
  box-shadow: var(--bq-shadow);
  overflow: hidden;
}

.bq-output {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  font-family: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bq-term-fg);
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

/* The command line lives at the END of the output flow (last child of
   #bq-output), so the prompt + cursor sit right after the latest output and
   scroll with it - like a real terminal. A transparent <input> captures
   keystrokes while the mirror span draws the text + a block cursor. */
/* inline-flex so the live input flows right after a no-newline prompt
   (e.g. su's "Password: " / an `echo -n` question), not on the next line (F6) */
.bq-cli { display: inline-flex; align-items: baseline; max-width: 100%; vertical-align: baseline; }
.bq-prompt { white-space: pre; flex-shrink: 0; }
.bq-cli-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.bq-mirror {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.5em;
  color: var(--bq-term-fg);
}
.bq-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: transparent; border: none; outline: none;
  color: transparent; caret-color: transparent;   /* real text + caret hidden; mirror shows them */
  font: inherit; padding: 0; margin: 0;
}
.bq-cursor { background: var(--bq-term-fg); color: var(--bq-term-bg); }
.bq-cli.focused .bq-cursor { animation: bq-blink 1.1s steps(1, end) infinite; }
.bq-cli:not(.focused) .bq-cursor { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--bq-term-fg); }
@keyframes bq-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* echoed command line + output classes */
.bq-line { white-space: pre-wrap; }
.bq-echo { color: var(--bq-term-fg); }
.bq-echo .bq-prompt-echo { color: var(--bq-term-dir); }

/* Ubuntu default coloured prompt: user@host bold-green, path bold-blue */
.bq-pr-uh { color: #8AE234; font-weight: 700; }
.bq-pr-wd { color: #729FCF; font-weight: 700; }
.bq-pr-c  { color: #ffffff; }
.bq-pr-smoff { color: #ef2929; font-weight: 700; }   /* Spell Mastery OFF flag */
.bq-stderr { color: var(--bq-term-err); }
.bq-sys { color: var(--bq-term-dim); font-style: italic; }
.bq-banner { color: var(--bq-term-dir); }
.bq-ft-dir  { color: var(--bq-term-dir); font-weight: 600; }
.bq-ft-exec { color: var(--bq-term-exec); font-weight: 600; }
.bq-ft-link { color: var(--bq-term-link); }
.bq-ansi-b { font-weight: 700; }
.bq-ansi-red { color: var(--bq-term-err); }
.bq-ansi-grn { color: var(--bq-term-dir); }
.bq-ansi-ylw { color: var(--bq-term-exec); }

/* ── HUD sidebar ───────────────────────────────────────────── */
.bq-hud[hidden] { display: none; }   /* R3: Settings > Status Panel Off */
.bq-hud {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.bq-hud-panel {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--bq-shadow);
}
.bq-hud-h {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bq-accent);
  margin-bottom: 8px;
}

/* HP bar */
.bq-hp-row { display: flex; align-items: center; gap: 8px; }
.bq-hp-track {
  flex: 1 1 auto; height: 14px; border-radius: 7px;
  background: var(--bq-line-soft); overflow: hidden;
  border: 1px solid var(--bq-line);
}
.bq-hp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2f9e6b, #57c98a);
  transition: width 0.25s ease;
}
.bq-hp-fill.warn { background: linear-gradient(90deg, #c79018, #e0b84a); }
.bq-hp-fill.crit { background: linear-gradient(90deg, #a83224, #e0654f); }
/* HP number: a fixed column to the LEFT of the bar (matches the XP row), so the
   bars line up and the value sits where the other stat values do. Same size as
   the other stat values (e.g. AC). */
.bq-hp-num { flex: 0 0 62px; text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.82rem; }
.bq-hp-flash { animation: bq-flash 0.5s ease; }
/* R70: colorblind-safe HUD bars (Okabe-Ito). Full HP reads bluish-green, crit
   vermilion - distinguishable for red/green CVD - and the XP bar shifts to
   purple so it never reads the same as a healthy HP bar. */
html.bq-cb .bq-hp-fill { background: linear-gradient(90deg, #009E73, #34c9a0); }
html.bq-cb .bq-hp-fill.warn { background: linear-gradient(90deg, #E69F00, #f0bc4a); }
html.bq-cb .bq-hp-fill.crit { background: linear-gradient(90deg, #D55E00, #f07f43); }
html.bq-cb .bq-xp-fill { background: linear-gradient(90deg, #5a3a9a, #8a6fd6); }
@keyframes bq-flash { 0% { background: var(--bq-err-bg); } 100% { background: transparent; } }

/* R37/R38/R39: combat stat lines under the HP bar (Level / XP bar / Attack / AC) */
.bq-stats { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.bq-stat { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; }
.bq-stat.bq-stat-bar { align-items: center; }
.bq-stat-k {
  flex: 0 0 30px; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bq-accent);
}
.bq-stat-v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bq-ink); }
.bq-stat-sub { font-weight: 400; color: var(--bq-ink-muted); }
/* R49: the XP-to-next-level bar (a thinner, blue cousin of the HP bar) */
.bq-xp-track {
  flex: 1 1 auto; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--bq-line-soft); border: 1px solid var(--bq-line);
}
.bq-xp-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #3465a4, #5a8fd6); transition: width 0.25s ease; }
.bq-xp-num { flex: 0 0 62px; text-align: left; font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--bq-ink-muted); }

/* Inventory chips */
.bq-inv { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-inv-empty { color: var(--bq-ink-muted); font-style: italic; font-size: 0.85rem; }
/* R34: gold total rides on the Backpack header line (right-aligned). Its font
   matches the "Backpack" header (inherits 0.72rem from .bq-hud-h). */
.bq-inv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bq-gold {
  display: inline-flex; align-items: center; gap: 5px;
  color: #c8a13a;   /* gold */
}
.bq-gold svg { width: 14px; height: 14px; }
.bq-gold b { color: var(--bq-ink); }
.bq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px; border-radius: 12px;
  background: var(--bq-line-soft); border: 1px solid var(--bq-line);
  font-size: 0.82rem; font-weight: 600; color: var(--bq-ink);
}
.bq-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
/* an EQUIPPED weapon/armor/shield gets a green glow in the backpack */
.bq-chip-equipped { border-color: #57c98a; box-shadow: 0 0 7px 1px rgba(87, 201, 138, 0.7); }
/* R32: the Bestiary leads the backpack as a clickable chip */
.bq-chip-bestiary { cursor: pointer; border-color: var(--bq-accent); }
.bq-chip-bestiary:hover { background: var(--bq-line); box-shadow: 0 0 7px 1px rgba(23, 128, 96, 0.45); }

/* Minimap */
.bq-map { width: 100%; overflow: auto; }
.bq-map-empty { color: var(--bq-ink-muted); font-style: italic; font-size: 0.85rem; }
/* R16: the map is a `tree`-style listing - the dungeon IS a directory tree */
.bq-map-tree { font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: pre; }
.bq-map-row { color: var(--bq-ink-muted); }
.bq-map-row.cur { color: var(--bq-accent); font-weight: 700; }
.bq-map-row.bq-map-unseen { color: var(--bq-line); opacity: 0.6; }   /* R54 fullmap: unvisited rooms */

/* ── modal (Getting Started, etc.) ─────────────────────────── */
.bq-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bq-modal[hidden] { display: none; }
/* ENE-style standalone window: green title bar + close, draggable AND resizable
   (drag the title bar to move, the bottom-right grabber to resize). */
.bq-modal-card {
  background: var(--bq-surface); color: var(--bq-ink);
  border: 2px solid var(--bq-accent-dk); border-radius: 8px;
  width: 640px; max-width: 92vw; max-height: 86vh;
  min-width: 340px; min-height: 220px;
  padding: 0; overflow: hidden; resize: both;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.bq-win-title {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bq-accent-dk); color: #fff;
  cursor: move; user-select: none; flex: 0 0 auto;
}
.bq-win-title span { font-weight: bold; flex: 1; font-size: 13px; }
.bq-win-close {
  background: transparent; color: #fff; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 6px; border-radius: 4px;
  font-family: inherit;
}
.bq-win-close:hover { background: rgba(255, 255, 255, 0.15); }
#bq-modal-body { padding: 14px 24px 18px; overflow-y: auto; flex: 1 1 auto; }
.bq-modal-card code {
  background: var(--bq-line-soft); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, monospace;
  color: #9a6b00; font-weight: 700;   /* R48: modal commands read as TYPEABLE (gold) */
}
html[data-theme="dark"] .bq-modal-card code { color: #e0b84a; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .bq-modal-card code { color: #e0b84a; } }
/* R32: Bestiary table */
.bq-bestiary { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 0.9rem; }
.bq-bestiary th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bq-ink-muted); border-bottom: 1px solid var(--bq-line); padding: 4px 8px; }
.bq-bestiary td { padding: 5px 8px; border-bottom: 1px solid var(--bq-line-soft); }
.bq-bestiary .bq-best-name { font-weight: 700; color: var(--bq-ink); }
.bq-bestiary .bq-best-type { color: var(--bq-ink-muted); font-style: italic; }
.bq-modal-actions { text-align: right; margin-top: 18px; }
.bq-modal-actions-left { text-align: left; margin-top: 10px; }   /* R15: Download CSV / Choose File row */
.bq-modal-actions button {
  background: var(--bq-accent); color: #fff; border: none;
  padding: 8px 18px; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.bq-modal-actions button.bq-ng-cancel { background: var(--bq-line); color: var(--bq-ink); }

/* ── New Adventure setup screen (R20) + adventure codes (R19) ── */
.bq-modal-card h3 { color: var(--bq-accent); margin-bottom: 6px; }
.bq-ng-row { display: block; margin: 4px 0; cursor: pointer; }
.bq-ng-h { margin: 14px 0 2px; font-size: 1em; }                       /* Game Mode / Difficulty section headings */
.bq-ng-sub { margin: 0 0 6px; font-size: 0.88em; opacity: 0.8; }
.bq-ng-custom { margin: 10px 0 2px 24px; display: flex; gap: 14px; flex-wrap: wrap; }
.bq-ng-custom[hidden] { display: none; }   /* display:flex would beat [hidden] */
.bq-ng-custom label { font-weight: 600; }
.bq-ng-custom select { margin-left: 6px; padding: 3px 6px; }
/* Game Mode / Class / Death Rules dropdowns - the choice's description rides on
   the option text ("Name - description"), so the select is full width and the
   closed value truncates rather than ballooning to the widest option. */
.bq-ng-sel { display: block; margin: 14px 0 6px; font-weight: 600; }
.bq-ng-sel select {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box;
  margin-top: 3px; padding: 4px 6px; font-family: inherit; font-weight: 400;
}
.bq-ng-code {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  font-family: ui-monospace, monospace; font-size: 1.05em;
  letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--bq-line); border-radius: 6px;
  background: var(--bq-surface); color: var(--bq-ink);
}
.bq-ng-err { color: var(--bq-err-fg); font-weight: 600; }

/* ── Save / Load progress code (R15) ───────────────────────── */
.bq-save-wrap { position: relative; margin: 4px 0 2px; }
.bq-save-code {
  width: 100%; box-sizing: border-box; padding: 8px 34px 8px 10px;
  font-family: ui-monospace, monospace; font-size: 0.82em; line-height: 1.35;
  word-break: break-all; resize: vertical;
  border: 1px solid var(--bq-line); border-radius: 6px;
  background: var(--bq-surface); color: var(--bq-ink);
}
.bq-save-code:focus { outline: none; border-color: var(--bq-accent); }
.bq-save-wrap .bq-code-copy { position: absolute; top: 8px; right: 8px; }

/* ── About modal (hostbound-style centered card) ───────────── */
.bq-about { text-align: center; }
.bq-about-logo { height: 44px; display: block; margin: 0 auto 6px; }
.bq-about h3 { font-size: 0.95rem; margin: 14px 0 4px; color: var(--bq-ink); }
.bq-about p { margin: 5px 0; color: var(--bq-ink-muted); }
.bq-about-list { list-style: none; margin: 4px 0; padding: 0; color: var(--bq-ink); }
.bq-about a { color: var(--bq-accent); text-decoration: none; }
.bq-about a:hover { text-decoration: underline; }
.bq-about-cr { font-size: 0.82rem; margin-top: 12px; }
.bq-about .bq-modal-actions { text-align: center; margin-top: 12px; }

/* ── victory popup (fireworks + code + ducky) ──────────────── */
.bq-winpop { text-align: center; }
.bq-fireworks { display: block; width: 100%; height: 200px; background: #060a08; border-radius: 6px; }
.bq-winpop .bq-winpop-grats { font-size: 1.5rem; color: var(--bq-accent); letter-spacing: 0.08em; margin: 12px 0 4px; }
.bq-winpop p { color: var(--bq-ink-muted); margin: 4px 0 0; }
.bq-winpop-code { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 4px; }
/* R14: the end-screen stat summary inside the win window */
.bq-win-summary { display: inline-flex; flex-direction: column; gap: 3px; text-align: left; margin: 14px auto 4px; padding: 10px 16px; background: var(--bq-line-soft); border: 1px solid var(--bq-line); border-radius: 8px; min-width: 230px; }
.bq-win-summary .bq-stat { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.bq-win-summary .bq-stat-k { flex: 0 0 auto; }
/* R69 Manage Saves + R64 Assignment modal bits */
.bq-slot-new { display: flex; gap: 8px; margin: 8px 0; }
.bq-slot-new input { flex: 1 1 auto; min-width: 0; }
.bq-slot-note { font-size: 0.82rem; color: var(--bq-ink-muted); }
.bq-slot-adv { font-family: ui-monospace, monospace; font-size: 0.8em; }
.bq-slot-del { color: #a83224; }
.bq-asg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 10px; margin: 8px 0; }
.bq-asg-cmd { font-family: ui-monospace, monospace; font-size: 0.85em; white-space: nowrap; }
.bq-asg-sub { margin: 12px 0 2px; font-size: 0.95em; }                 /* R73/R80 assignment sub-sections */
.bq-ng-locked { opacity: 0.55; }                                       /* R78: a class locked behind a trophy */
.bq-ng-locked i { opacity: 0.85; font-size: 0.9em; }
.bq-ng-death-h a { text-decoration: none; color: inherit; }
/* R62: achievement badges under the win summary */
.bq-win-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px auto 2px; max-width: 320px; }
.bq-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; color: #024230; background: var(--bq-sycamore, #E7ECC3); border: 1px solid var(--bq-cutler, #00694E); }
.bq-winpop-ducky { margin-top: 16px; }
.bq-winpop-ducky img { height: 64px; display: block; margin: 0 auto 4px; }
.bq-winpop-phrase { font-weight: 700; font-size: 1.05rem; color: var(--bq-accent); }
/* R44: the "Enter Totality Mode" call to action - a marigold-accent button */
.bq-tm-btn { background: var(--bq-marigold, #AA8A00); color: #fff; border-color: var(--bq-marigold, #AA8A00); font-weight: 700; }
.bq-tm-btn:hover { filter: brightness(1.08); }

/* ── boot states ───────────────────────────────────────────── */
.bq-boot-loading, .bq-boot-error {
  margin: auto; padding: 24px; text-align: center; color: var(--bq-term-fg);
  font-family: ui-monospace, monospace;
}
.bq-boot-error h2 { color: var(--bq-term-err); }

@media (max-width: 760px) {
  .bq-app { flex-direction: column; }
  .bq-hud { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; }
  .bq-hud-panel { flex: 1 1 30%; }
}