/* ═══════════════════════════════════════════════════════════════
   FOOLFRONT - retro.css
   CRT / Phosphor Green aesthetic, 1983 terminal vibes
   ═══════════════════════════════════════════════════════════════ */

/* ── Local font ──────────────────────────────────────────────── */
@font-face {
  font-family: 'VCR';
  src: url('../fonts/vcr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --fg:           #00eeff;   /* vivid cyan */
  --fg-dim:       #005f72;   /* dimmed cyan */
  --fg-bright:    #99f5ff;   /* highlight cyan */
  --bg:           #040404;
  --bg-panel:     #080808;
  --accent:       #ff3300;   /* punk orange-red for accents */
  --accent2:      #ffdd00;   /* yellow for choices */
  --border:       #003d4f;
  --font:         'VCR', 'Courier New', monospace;
  --font-pixel:   'VCR', 'Courier New', monospace;
  --side-w:       0px;
  --player-h:     80px;
  --header-h:     38px;
  --bottom-zone-h: 310px;   /* fixed: text panel + choices, ascii absorbs the rest */
}

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

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.5;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

/* ── CRT scanlines overlay ───────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.52) 0px,
    rgba(0, 0, 0, 0.52) 1px,
    transparent        1px,
    transparent        3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── CRT vignette ────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 42%,
    rgba(0, 0, 0, 0.93) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── CRT screen flicker ──────────────────────────────────────── */
@keyframes flicker {
  0%,  83%        { opacity: 1.00; }
  84%             { opacity: 0.86; }
  85%             { opacity: 1.00; }
  88%             { opacity: 0.93; }
  89%             { opacity: 1.00; }
  93%             { opacity: 0.80; }
  94%, 95%        { opacity: 0.97; }
  96%             { opacity: 0.86; }
  97%, 100%       { opacity: 1.00; }
}
body { animation: flicker 4s infinite; }

/* ── Blink animation ─────────────────────────────────────────── */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink { animation: blink 1s step-end infinite; }

/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Text glow ───────────────────────────────────────────────── */
.glow {
  text-shadow:
    1px  0 0 rgba(255, 30, 60, 0.25),
    -1px 0 0 rgba(0, 60, 220, 0.25),
    0 0 4px  var(--fg),
    0 0 10px var(--fg-dim);
}

/* ── Grain / noise overlay ───────────────────────────────────── */
#grain {
  position: fixed;
  inset: -100px;
  width:  calc(100% + 200px);
  height: calc(100% + 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 9000;
  animation: grain 0.08s steps(1) infinite;
}

@keyframes grain {
  0%   { transform: translate(  0px,  0px); }
  11%  { transform: translate( -5px, -7px); }
  22%  { transform: translate(  7px,  5px); }
  33%  { transform: translate( -3px,  9px); }
  44%  { transform: translate(  9px, -5px); }
  55%  { transform: translate( -7px,  3px); }
  66%  { transform: translate(  5px, -9px); }
  77%  { transform: translate( -9px,  7px); }
  88%  { transform: translate(  3px, -3px); }
}

/* ── Glitch overlay ──────────────────────────────────────────── */
#glitch-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  animation: glitch 5s step-end infinite;
}

@keyframes glitch {
  0%, 90%, 100% { opacity: 0; transform: none; }
  91% {
    opacity: 1;
    background: linear-gradient(
      to bottom,
      transparent                     0%,
      transparent                    17%,
      rgba(0, 220, 255, 0.07)        17%, rgba(0, 220, 255, 0.07) 21%,
      transparent                    21%,
      transparent                    56%,
      rgba(255, 0, 80, 0.05)         56%, rgba(255, 0, 80, 0.05) 61%,
      transparent                    61%
    );
    transform: translate(-4px, 0);
  }
  92% {
    opacity: 1;
    background: linear-gradient(
      to bottom,
      transparent                     0%,
      transparent                    32%,
      rgba(0, 220, 255, 0.08)        32%, rgba(0, 220, 255, 0.08) 36%,
      transparent                    36%
    );
    transform: translate(4px, 1px);
  }
  93% {
    opacity: 1;
    background: linear-gradient(
      to bottom,
      transparent                     0%,
      transparent                    67%,
      rgba(255, 0, 80, 0.06)         67%, rgba(255, 0, 80, 0.06) 72%,
      transparent                    72%
    );
    transform: translate(-2px, 0);
  }
  94% { opacity: 0; }
}

/* ── Side panels ─────────────────────────────────────────────── */
#side-left,
#side-right {
  display: none;
}

/* ════════════════════════════════════════════════════════════════
   BOOT SCREEN
   ════════════════════════════════════════════════════════════════ */
#boot-screen {
  position: fixed;
  inset: 0 var(--side-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  z-index: 89;
  background: var(--bg);
  padding: 1rem 0.5rem;
  overflow: hidden;
}

/* wrapper clips art to viewport - no scroll */
#boot-logo-wrap {
  width: 100%;
  overflow: hidden;
  flex-shrink: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
}

#boot-logo {
  color: var(--fg);
  font-family: 'Courier New', monospace;
  /* mobile-first base - floor/cap tuned per breakpoint via media queries */
  font-size: clamp(1.4px, calc(100vw / 780), 1.8px);
  line-height: 1.1;
  text-shadow:
    1px  0 0 rgba(255, 30, 60, 0.22),
    -1px 0 0 rgba(0, 60, 220, 0.22),
    0 0 4px  var(--fg),
    0 0 8px  var(--fg-dim);
  white-space: pre;
  display: block;
  flex-shrink: 0;
}

#boot-subtitle {
  color: var(--accent);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-shadow: 0 0 4px var(--accent);
}

#boot-year {
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.3em;
}

.boot-info {
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 2;
  text-align: center;
  margin-top: 1rem;
}

#boot-prompt {
  color: var(--fg-bright);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.15em;
  text-shadow: 0 0 3px var(--fg);
}

/* ════════════════════════════════════════════════════════════════
   LANGUAGE SELECTION SCREEN
   ════════════════════════════════════════════════════════════════ */
#lang-screen {
  position: fixed;
  inset: 0 var(--side-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 89;
  background: var(--bg);
}

.lang-btn {
  display: block;
  background: none;
  border: none;
  color: var(--fg-bright);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.15em;
  text-shadow: 0 0 3px var(--fg);
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  margin: 0.1rem auto;
  border-left: 2px solid transparent;
  transition: border-color 0.1s, color 0.1s;
}

.lang-btn:hover,
.lang-btn.focused {
  color: var(--accent);
  border-left-color: var(--accent);
  text-shadow: 0 0 4px var(--accent);
}

/* ════════════════════════════════════════════════════════════════
   GAME SCREEN
   ════════════════════════════════════════════════════════════════ */
#game-screen {
  position: fixed;
  inset: 0 var(--side-w) var(--player-h) var(--side-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header bar ──────────────────────────────────────────────── */
#header-bar {
  height: var(--header-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--fg-dim);
  flex-shrink: 0;
  letter-spacing: 0.1em;
}
#scene-label { color: var(--accent); text-shadow: 0 0 3px var(--accent); }
#track-label { color: var(--fg-dim); }

/* ── ASCII panel ─────────────────────────────────────────────── */
#ascii-panel {
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  overflow: hidden;  /* prevent art from bleeding into adjacent elements */
}

/* ── ASCII frame wrapper (no decorative border - art fills the space) */
#ascii-wrapper {
  position: relative;
  opacity: 0;  /* starts hidden; ascii-reveal animation brings it in */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* ── ASCII reveal animation ──────────────────────────────────── */
@keyframes ascii-reveal {
  0%   { opacity: 0;   filter: brightness(3.5) blur(1.5px); }
  45%  { opacity: 0.75; filter: brightness(1.4) blur(0); }
  100% { opacity: 1;   filter: brightness(1)   blur(0); }
}

#ascii-wrapper.ascii-reveal {
  animation: ascii-reveal 0.65s ease-out forwards;
}

#ascii-art {
  font-family: 'Courier New', monospace;
  line-height: 1.15;
  color: var(--fg-dim);
  text-shadow: 0 0 2px var(--fg-dim);
  white-space: pre;
  overflow: hidden;
  text-align: left;
  /* default (sm): narrow art ≤ 55 cols */
  font-size: clamp(10px, min(2vw, 3.4vh), 26px);
}
/* medium art: 56–110 cols */
#ascii-art[data-artsize="md"] { font-size: clamp(7px,  min(1.4vw, 2.5vh), 18px); }
/* large art: 111–180 cols */
#ascii-art[data-artsize="lg"] { font-size: clamp(5px,  min(1vw,   1.8vh), 13px); }
/* extra-large art: 181+ cols */
#ascii-art[data-artsize="xl"] { font-size: clamp(2px,  min(0.55vw, 1vh),   8px); }

/* ── Bottom zone: stable container for text + choices ────────────── */
/* This wrapper never changes size when choices appear, so the   */
/* ASCII art above stays perfectly still.                        */
#bottom-zone {
  flex-shrink: 0;
  height: var(--bottom-zone-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Text panel ─────────────────────────────────────── */
#text-panel {
  flex: 1;
  min-height: 0;
  padding: 0.6rem 1.4rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;           /* Firefox: hide scrollbar */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
}
#text-panel::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide scrollbar */

#text-output {
  color: var(--fg);
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.65;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  max-width: 820px;
  animation: chroma 4.5s infinite;
}

@keyframes chroma {
  0%,  85%, 100% {
    text-shadow:
      1px  0 0 rgba(255, 30, 60, 0.15),
      -1px 0 0 rgba(0, 60, 220, 0.15),
      0 0 2px var(--fg-dim);
  }
  86% {
    text-shadow:
      3px  0 0 rgba(255, 30, 60, 0.32),
      -3px 0 0 rgba(0, 60, 220, 0.32),
      0 0 4px var(--fg-dim);
  }
  87% {
    text-shadow:
      1px  0 0 rgba(255, 30, 60, 0.15),
      -1px 0 0 rgba(0, 60, 220, 0.15),
      0 0 2px var(--fg-dim);
  }
}

#text-cursor {
  color: var(--fg);
  font-size: 1em;   /* inherit from text-output so it matches exactly */
  vertical-align: text-bottom;
  line-height: 1;
}

/* ── Auto-advance countdown bar ─────────────────────────────── */
#autoadvance-bar {
  width: 100%;
  max-width: 820px;
  height: 3px;
  background: var(--fg-dim);
  margin-bottom: 0.5rem;
  box-shadow: 0 0 6px var(--fg-dim);
  align-self: center;
  /* width is driven by JS transitions; default none here */
  transition: none;
}

/* ── Choices panel ───────────────────────────────────────────── */
#choices-panel {
  flex-shrink: 0;
  padding: 0.8rem 1.4rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#choices-prompt {
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: clamp(13px, 1.5vw, 17px);
  margin-bottom: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: 100%;
  max-width: 820px;
}

#choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  max-width: 820px;
}

.choice-btn {
  background: transparent;
  border: none;
  border-left: 2px solid var(--border);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 26px);
  text-align: left;
  padding: 0.15rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, text-shadow 0.1s;
  letter-spacing: 0.03em;
}

.choice-btn:hover,
.choice-btn.focused {
  border-left-color: var(--fg);
  color: var(--fg-bright);
  text-shadow: 0 0 4px var(--fg);
  background: transparent;
}

/* ── Menu overlay ────────────────────────────────────────────── */
#menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

#menu-box {
  border: 1px solid var(--fg);
  padding: 2rem 3rem;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  box-shadow: 0 0 30px var(--fg-dim);
}

.menu-title {
  color: var(--accent);
  font-family: var(--font);
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: 0.3em;
  text-shadow: 0 0 4px var(--accent);
  margin-bottom: 0.5rem;
}

.menu-btn {
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 26px);
  padding: 0.4rem 1.4rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}
.menu-btn:hover { background: var(--fg); color: var(--bg); }

.menu-hint {
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: clamp(14px, 1.6vw, 18px);
  margin-top: 0.2rem;
}

/* ════════════════════════════════════════════════════════════════
   PLAYER BAR - inverted status line (Infocom style)
   ════════════════════════════════════════════════════════════════ */
#player-bar {
  position: fixed;
  bottom: 0;
  left: var(--side-w);
  right: var(--side-w);
  height: var(--player-h);
  background: var(--fg);           /* INVERTED: cyan background */
  border-top: 3px solid var(--fg-bright);
  box-shadow: 0 -8px 40px rgba(0, 238, 255, 0.28);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.2rem 7px;           /* 7px bottom = space for progress strip */
  z-index: 200;
}

#player-left {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

#player-left button,
#player-bar button {
  background: var(--bg);           /* dark buttons on cyan bar */
  border: 1px solid rgba(0,0,0,0.4);
  color: var(--fg);                /* cyan text inside dark button */
  font-family: var(--font);
  font-size: clamp(14px, 1.7vw, 20px);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, text-shadow 0.1s;
  letter-spacing: 0.05em;
  text-shadow: 0 0 3px var(--fg);
}
#player-left button:hover {
  background: var(--bg-panel);
  color: var(--fg-bright);
  text-shadow: 0 0 5px var(--fg);
}
#btn-play-pause {
  background: var(--bg);
  color: var(--fg);
  border-color: rgba(0,0,0,0.5);
  font-size: clamp(16px, 2vw, 22px);
  padding: 0.2rem 0.9rem;
  text-shadow: 0 0 5px var(--fg);
}

#player-center {
  flex: 1;
  display: flex;
  flex-direction: row;             /* track name + time in one row */
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

#player-track-name {
  font-size: clamp(15px, 1.8vw, 21px);
  color: var(--bg);                /* black on cyan */
  font-family: var(--font);
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1em;
  flex: 1;
  min-width: 0;
}

/* progress strip - absolute at the very bottom of the player bar */
#progress-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: rgba(0, 0, 0, 0.22);
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--bg);           /* dark fill on cyan */
  transition: width 0.5s linear;
  box-shadow: none;
}

#loop-indicator {
  position: absolute;
  right: 6px;
  top: -18px;
  color: var(--accent);
  font-size: clamp(11px, 1.3vw, 14px);
  animation: blink 0.6s step-end infinite;
  text-shadow: 0 0 3px var(--accent);
}

#player-time {
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--bg);                /* black on cyan */
  letter-spacing: 0.1em;
  flex-shrink: 0;
  font-family: var(--font);
}

#player-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

#player-right label {
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--bg);                /* black on cyan */
  letter-spacing: 0.2em;
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
  outline: none;
  cursor: pointer;
  border-radius: 0;
}
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--bg);
  cursor: pointer;
  box-shadow: none;
}
#volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: none;
  cursor: pointer;
}

/* ── Screen fade transition ──────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn 0.4s ease forwards; }

/* ── Responsive: very small screens ─────────────────────────── */
@media (max-width: 600px) {
  :root {
    --side-w: 0px;
    --player-h: 52px;
    --bottom-zone-h: 290px;
  }
  #boot-logo { font-size: clamp(1.4px, calc(100vw / 780), 1.8px); }
  #ascii-art,
  #ascii-art[data-artsize="md"],
  #ascii-art[data-artsize="lg"],
  #ascii-art[data-artsize="xl"] { font-size: 6px; }
  #volume-slider { width: 45px; }
  #side-left span, #side-right span { font-size: 14px; }

  /* Compact player bar on mobile */
  #player-right { display: none; }
  #player-bar { padding: 0 0.8rem 6px; gap: 0.5rem; }
  #player-track-name { font-size: 12px; }

  /* Larger touch targets for choices */
  .choice-btn { padding: 0.7rem 0.8rem; }
  .choice-btn + .choice-btn { border-top: 1px solid var(--border); }

  /* Header: prevent scene label from wrapping and breaking layout */
  #header-bar { height: auto; min-height: var(--header-h); padding: 0 0.8rem; }
  #scene-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .header-right { flex-shrink: 0; }
}

/* ── Tablet portrait ─────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  #boot-logo { font-size: clamp(1.8px, calc(100vw / 780), 2.8px); }
}

/* ── Tablet landscape / small desktop ───────────────────────── */
@media (min-width: 901px) and (max-width: 1280px) {
  #boot-logo { font-size: clamp(2.8px, calc(100vw / 780), 4px); }
}

/* ── HD desktop ──────────────────────────────────────────────── */
@media (min-width: 1281px) and (max-width: 1600px) {
  #boot-logo { font-size: clamp(4px, calc(100vw / 780), 5.2px); }
}

/* ── Full HD ─────────────────────────────────────────────────── */
@media (min-width: 1601px) and (max-width: 1920px) {
  #boot-logo { font-size: clamp(5.2px, calc(100vw / 780), 6.2px); }
}

/* ── 2K / QHD ────────────────────────────────────────────────── */
@media (min-width: 1921px) and (max-width: 2560px) {
  #boot-logo { font-size: clamp(6.2px, calc(100vw / 780), 8px); }
}

/* ── 4K ──────────────────────────────────────────────────────── */
@media (min-width: 2561px) {
  #boot-logo { font-size: clamp(8px, calc(100vw / 780), 13px); }
}

/* ════════════════════════════════════════════════════════════════
   ACCESSIBILITY: reduced motion
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  #grain { animation: none; }
  #glitch-overlay { animation: none; }
  #text-output { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   FOCUS VISIBLE
   ════════════════════════════════════════════════════════════════ */
button:focus-visible,
input:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}
.choice-btn:focus-visible {
  outline: none;  /* border-left already highlights it */
  border-left-color: var(--fg);
  color: var(--fg-bright);
  text-shadow: 0 0 4px var(--fg);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE HINTS: keyboard vs touch
   ════════════════════════════════════════════════════════════════ */
.touch-hint { display: none; }

/* On touch-primary devices, swap keyboard hints for tap hints */
@media (hover: none) and (pointer: coarse) {
  .kb-hint  { display: none; }
  .touch-hint { display: inline; }
}

/* Choices keyboard hint: slightly dimmed and smaller */
.choices-kb-hint {
  font-size: 0.8em;
  opacity: 0.55;
  letter-spacing: 0.05em;
}

/* ════════════════════════════════════════════════════════════════
   HEADER RIGHT GROUP
   ════════════════════════════════════════════════════════════════ */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

#header-esc {
  font-size: clamp(11px, 1.3vw, 14px);
  color: var(--fg-dim);
  opacity: 0.6;
  letter-spacing: 0.08em;
}

/* ════════════════════════════════════════════════════════════════
   PAUSE MENU CHAPTER LABEL
   ════════════════════════════════════════════════════════════════ */
.menu-chapter-label {
  color: var(--fg-dim);
  font-family: var(--font);
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.1em;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.2rem;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   SCROLL INDICATOR (text panel top)
   ════════════════════════════════════════════════════════════════ */
#scroll-indicator {
  flex-shrink: 0;
  text-align: center;
  color: var(--fg-dim);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  padding: 0.25rem 0;
  background: var(--bg);
  pointer-events: none;
}