/* Honeytongue: a classic text adventure terminal.
   Dark = amber phosphor CRT. Light = paper teletype, like the terminals the first adventures ran on.
   Shared by the docs (index.html) and the playable demo (play/). */

:root {
  /* Paper teletype */
  --bg: #f3ecdc;
  --screen: #ebe2cc;
  --fg: #2b2216;
  --bright: #0f0b05;
  --dim: #6a583a;
  --line: #cbbd9c;
  --link: #8a4600;
  --lit: #2b2216;           /* lit meter segments */
  --inverse-bg: #2b2216;
  --inverse-fg: #f3ecdc;
  --glow: none;
  --glow-strong: none;
  --scanline: transparent;
  --vignette: transparent;
  --pixel: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Amber phosphor */
    --bg: #0c0904;
    --screen: #130e06;
    --fg: #f2b34d;
    --bright: #ffe0a3;
    --dim: #b88b45;
    --line: #3d2e15;
    --link: #ffd07a;
    --lit: #f2b34d;
    --inverse-bg: #f2b34d;
    --inverse-fg: #0c0904;
    --glow: 0 0 5px rgb(255 168 48 / 0.35);
    --glow-strong: 0 0 10px rgb(255 168 48 / 0.55);
    --scanline: rgb(0 0 0 / 0.2);
    --vignette: rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0904;
  --screen: #130e06;
  --fg: #f2b34d;
  --bright: #ffe0a3;
  --dim: #b88b45;
  --line: #3d2e15;
  --link: #ffd07a;
  --lit: #f2b34d;
  --inverse-bg: #f2b34d;
  --inverse-fg: #0c0904;
  --glow: 0 0 5px rgb(255 168 48 / 0.35);
  --glow-strong: 0 0 10px rgb(255 168 48 / 0.55);
  --scanline: rgb(0 0 0 / 0.2);
  --vignette: rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 3.5rem; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.65 var(--mono);
  text-shadow: var(--glow);
  overflow-wrap: break-word;
}
/* Scanlines and a vignette, only on the CRT. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(to bottom, var(--scanline) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, var(--vignette) 100%);
}
@media (prefers-contrast: more) {
  body { text-shadow: none; }
  body::after { display: none; }
}

::selection { background: var(--fg); color: var(--bg); text-shadow: none; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { background: var(--fg); color: var(--bg); text-decoration: none; text-shadow: none; }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
a:focus-visible { background: var(--fg); color: var(--bg); text-shadow: none; outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; z-index: 60; }
.skip:focus { left: 1rem; top: 3rem; background: var(--bg); padding: 0.5rem 1rem; }

/* ---- Status line: inverse video, like the top of an Infocom screen ---- */
.status {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: calc(0.3rem + env(safe-area-inset-top, 0px)) 1rem 0.3rem;
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  text-shadow: none;
  font: 400 1.35rem/1.15 var(--pixel);
}
.status .room { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status .room a { color: inherit; text-decoration: none; }
.status .room a:hover { background: none; text-decoration: underline; }
.status .extra { white-space: nowrap; }
.status button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  padding: 0 0.45rem;
  cursor: pointer;
}
.status button:hover { background: var(--inverse-fg); color: var(--inverse-bg); }
.status :focus-visible { outline: 2px solid var(--inverse-fg); outline-offset: 1px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .wrap { padding: 0 1.5rem; } }

/* ---- Type ---- */
.pixel { font-family: var(--pixel); }
h1, h2 { font-family: var(--pixel); font-weight: 400; color: var(--bright); text-shadow: var(--glow-strong); letter-spacing: 0.02em; }
h2 { font-size: 2.3rem; line-height: 1; margin: 0 0 1rem; }
h3 { font: 600 1rem/1.45 var(--mono); color: var(--bright); margin: 2rem 0 0.5rem; }
p { margin: 0 0 1rem; }
strong { color: var(--bright); font-weight: 600; }
.dim { color: var(--dim); }
.bright { color: var(--bright); }

code, pre, kbd { font-family: var(--mono); font-size: 0.9rem; }
:not(pre) > code { color: var(--bright); background: var(--screen); border: 1px solid var(--line); padding: 0 0.3em; }
pre {
  background: var(--screen);
  border-left: 3px solid var(--dim);
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.4rem;
  overflow-x: auto;
  line-height: 1.55;
  color: var(--bright);
}
pre .c { color: var(--dim); } /* comments */

.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px dashed var(--line); }
th { color: var(--dim); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
td code { white-space: nowrap; }

.note { border: 1px dashed var(--dim); padding: 0.6rem 0.9rem; margin: 1.25rem 0; }
.note::before { content: "[!] "; color: var(--bright); font-weight: 600; }

/* Numbered steps as [1] [2] [3] */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 4ch; margin-bottom: 1.4rem; }
.steps > li::before { content: "[" counter(step) "]"; position: absolute; left: 0; top: 0; color: var(--bright); font-weight: 600; }

/* ---- The terminal screen used by the transcript and the game ---- */
.screen { background: var(--screen); border: 3px double var(--line); padding: 1rem 1.1rem; }
.cmd { color: var(--bright); margin: 1.1rem 0 0.2rem; font-weight: 500; }
.cmd::before { content: "> "; color: var(--dim); }
.readout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; color: var(--dim); font-size: 0.85rem; margin: 0 0 0.35rem; }
.verdict { text-transform: uppercase; letter-spacing: 0.08em; }
.verdict.won { background: var(--inverse-bg); color: var(--inverse-fg); text-shadow: none; padding: 0 0.35em; }
.cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.1em;
  margin-left: 0.1em;
  vertical-align: text-bottom;
  background: var(--fg);
  box-shadow: var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: blink 1.06s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

/* A segmented meter, 20 blocks wide. Set --score as a percentage; the bar marks the threshold at --mark. */
.meter {
  position: relative;
  flex: none;
  width: 10rem;
  height: 0.7rem;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 8px);
}
.meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--score, 0%);
  background: repeating-linear-gradient(90deg, var(--lit) 0 6px, transparent 6px 8px);
}
.meter > b { position: absolute; top: -3px; bottom: -3px; left: var(--mark, 80%); width: 2px; background: var(--bright); }

footer { color: var(--dim); font-size: 0.9rem; border-top: 3px double var(--line); padding: 1.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); }