/* =====================================================================
   DECKNFORGE — terminal
   Black screen. Cream phosphor. One font. No layout.
   ===================================================================== */

/* A real terminal was never one colour. Body text is the phosphor, --hi
   is the ANSI accent that headers, chips and choices are drawn in, and
   --red is for the red suits, because ♥ and ♦ have been red since 1480. */

:root {
  --bg:      #0a0805;
  --fg:      #efe3c4;   /* light cream */
  --hi:      #ffb01f;   /* hot amber */
  --red:     #ff5f4d;
  --pale:    #fffaf0;   /* ♠ ♣ — neutral in every palette */
  --dim:     #8d8266;
  --bright:  #fffaf0;
  --glow:    rgba(239, 227, 196, 0.30);
  --sel:     #efe3c4;
  --selfg:   #0a0805;

  --cell:    16px;      /* set by JS to fit 42 columns */
  --lh:      1.35;
  --pad:     0.75rem;
}

/* Palette switches ---------------------------------------------------- */
html[data-color='amber'] {
  --fg:     #ffb642;
  --hi:     #fff06a;
  --red:    #ff7a4d;
  --pale:   #ffe9bd;
  --dim:    #8a5f1d;
  --bright: #ffe9bd;
  --glow:   rgba(255, 182, 66, 0.30);
  --sel:    #ffb642;
}
html[data-color='green'] {
  --fg:     #6cff8f;
  --hi:     #d8ff4a;
  --red:    #ff6b6b;
  --pale:   #ccffd8;
  --dim:    #2f7a45;
  --bright: #ccffd8;
  --glow:   rgba(108, 255, 143, 0.28);
  --sel:    #6cff8f;
}
/* Mode 4 — the palette that made 1983 look like 1983. */
html[data-color='cga'] {
  --fg:     #e8e8f0;
  --hi:     #ff55ff;
  --red:    #ff5555;
  --pale:   #ffffff;
  --dim:    #7f6b86;
  --bright: #55ffff;
  --glow:   rgba(255, 85, 255, 0.30);
  --sel:    #ff55ff;
}

/* Not on the prefs screen until you find it. The blue every serious
   program booted into — the one palette here that isn't a phosphor. */
html[data-color='blue'] {
  --bg:     #0000a8;
  --fg:     #d7d7ff;
  --hi:     #ffff55;
  --red:    #ff8f8f;
  --pale:   #ffffff;
  --dim:    #7d7de0;
  --bright: #ffffff;
  --glow:   rgba(215, 215, 255, 0.22);
  --sel:    #ffff55;
  --selfg:  #0000a8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overscroll-behavior: none;
}

body {
  font-family: 'DejaVu Sans Mono', 'Liberation Mono', 'Cascadia Mono',
               'Consolas', 'SF Mono', Menlo, 'Courier New', monospace;
  font-size: var(--cell);
  line-height: var(--lh);
  font-variant-ligatures: none;
  /* ♠ ▶ ▪ and friends must stay glyphs, never colour emoji. */
  font-variant-emoji: text;
  -webkit-font-smoothing: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
}

::selection { background: var(--sel); color: var(--selfg); }

/* ---------------------------------------------------------------------
   Screen
   ------------------------------------------------------------------ */

/* The tube. Full-bleed on a phone; on a desktop it stops at 1200px and
   sits in the middle of the screen, because a terminal stretched across
   a 34-inch monitor is not a terminal, it is a spreadsheet. */
#term {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  cursor: text;
  z-index: 1;
}

#scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad) var(--pad) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
}
#scroll::-webkit-scrollbar { width: 6px; }
#scroll::-webkit-scrollbar-thumb { background: var(--dim); }
#scroll::-webkit-scrollbar-track { background: transparent; }

/* 80 columns, centred in whatever the tube turned out to be. */
#out { max-width: 80ch; margin-inline: auto; }

/* One row of the screen. Never reflows art. */
.ln {
  white-space: pre;
  min-height: calc(1em * var(--lh));
}
.ln.wrap { white-space: pre-wrap; }

/* Block/box-drawing art: character cells must touch, so no leading. */
.ln.blk { line-height: 1; min-height: 1em; }

.b   { color: var(--bright); }
.hi  { color: var(--hi); }

/* ANSI header bar: an inverse tag with the shade blocks fading off it. */
.ln.hd { color: var(--hi); }
.ln.hd .t { background: var(--hi); color: var(--bg); }

/* ♥ ♦ red, ♠ ♣ pale — the one place this screen has always had colour. */
.sr { color: var(--red); }
.sb { color: var(--pale); }
.d   { color: var(--dim); }
.rule { color: var(--dim); }

/* A full-width choice. The whole row is the tap target, sized for a
   thumb, so nothing on this terminal needs the keyboard. */
.ln.choice {
  white-space: pre-wrap;
  display: block;
  /* Never smaller than a fingertip, whatever the font scales to. */
  min-height: max(2.6em, 44px);
  padding: 0.55em var(--pad) 0.55em 0;
  color: var(--bright);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ln.choice .arrow { color: var(--hi); }
.ln.choice:active,
.ln.choice:focus-visible {
  background: var(--hi);
  color: var(--bg);
  outline: none;
}
/* Inverted, the whole row is one colour — arrow, suits, dim asides and
   all. Anything in a label that had its own colour gives it up. */
.ln.choice:active *,
.ln.choice:focus-visible * { color: inherit; }

@media (hover: hover) {
  .ln.choice:hover { background: var(--hi); color: var(--bg); }
  .ln.choice:hover * { color: inherit; }
}

/* ---------------------------------------------------------------------
   The twelve symbols
   ------------------------------------------------------------------ */

/* One symbol inside a line of text. Exactly two cells wide, so it lines
   up in literal rows the way the content author counted it. */
.icell {
  display: inline-block;
  width: 2ch;
  height: 1em;
  vertical-align: -0.14em;
  text-align: center;
  color: var(--hi);
}
.icell svg { width: 1.15em; height: 1.15em; display: inline-block; }

/* The phosphor glows on strokes too, not just on text. */
html[data-crt='on'] .ico { filter: drop-shadow(0 0 2px var(--glow)); }

/* =GRID — four across, three down, every tile a thumb target. */
.ln.gridrow { white-space: normal; padding: 0.35em 0; }
.symgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5em;
  max-width: 44ch;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 0.65em 0.15em 0.5em;
  border: 1px solid var(--dim);
  color: var(--bright);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tico { color: var(--hi); line-height: 0; }
.tico svg { width: 2.2em; height: 2.2em; }
.tname { font-size: 0.8em; letter-spacing: 0.04em; }
.tile:active,
.tile:focus-visible { background: var(--hi); color: var(--bg); outline: none; }
.tile:active .tico,
.tile:focus-visible .tico { color: inherit; }
@media (hover: hover) {
  .tile:hover { background: var(--hi); color: var(--bg); }
  .tile:hover .tico { color: inherit; }
}

/* Tappable command chip inside output */
.cmd {
  color: var(--bg);
  background: var(--hi);
  cursor: pointer;
  padding: 0;
}
.cmd:active { background: var(--bright); }

a, .lnk {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
a:active, .lnk:active { color: var(--bg); background: var(--fg); }

/* ---------------------------------------------------------------------
   Prompt line
   ------------------------------------------------------------------ */

#promptline {
  padding: 0 var(--pad) var(--pad);
  max-width: 80ch;
  margin-inline: auto;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
#promptline[hidden] { display: none; }

/* The one line anybody types into. On a touch screen it gets its own
   size — a little above the output, so it reads at arm's length and
   takes a thumb without taking the wrong character. */
@media (pointer: coarse) {
  #promptline {
    font-size: 1.25em;
    /* ch follows this line's own font, so 64 of them is still the 80
       columns the output is measured in. */
    max-width: 64ch;
    padding-bottom: calc(var(--pad) + 0.15em);
  }
}

#ps1 { color: var(--fg); }
#typed { color: var(--bright); }
#hint { color: var(--dim); }

/* The prompt is the one tap that means "open the keyboard". */
#promptline { cursor: text; -webkit-tap-highlight-color: transparent; }

#cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--fg);
  animation: blink 1.06s steps(1, end) infinite;
}
#cursor.hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* The real input, parked invisibly under the rendered prompt. */
#kbd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.4em;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: 16px;     /* stops iOS from zooming on focus */
  caret-color: transparent;
  outline: none;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Soft keys — the thumb row
   ------------------------------------------------------------------ */

#keys {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--dim);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
}
/* Keyboard up: the home indicator is under it, so stop leaving room. */
html[data-kbd='up'] #keys { padding-bottom: 0; }
#keys[hidden] { display: none; }

#keys button {
  flex: 1 1 0;
  min-width: 0;
  font: inherit;
  font-size: 0.86em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--dim);
  padding: 0.7em 0.1em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  -webkit-tap-highlight-color: transparent;
}
#keys button:last-child { border-right: 0; }
#keys button:active,
#keys button.on { background: var(--hi); color: var(--bg); }

/* ---------------------------------------------------------------------
   Phosphor burn

   Ten thousand hours of the same logo and the tube keeps a copy. Sits
   behind the text, in the glass, the way a screen that ran one program
   for a decade never quite goes black again. Only ever built by JS, and
   only for somebody who earned it.
   ------------------------------------------------------------------ */

/* Laid out exactly like #scroll and #out, at exactly the cell size, so
   the ghost sits where the logo itself sat. A watermark floating in the
   middle of the screen would be a logo; this is a scar. */
#burn {
  position: absolute;
  inset: 0;
  z-index: -1;                /* behind the text, in front of nothing */
  overflow: hidden;
  padding: var(--pad) var(--pad) 0;
  pointer-events: none;
  user-select: none;
}

#burn pre {
  max-width: 80ch;
  margin: 0 auto;
  font: inherit;
  font-size: var(--cell);
  line-height: 1;
  white-space: pre;
  color: var(--fg);
  opacity: 0.08;
}

/* ---------------------------------------------------------------------
   CRT
   ------------------------------------------------------------------ */

html[data-crt='on'] body { text-shadow: 0 0 5px var(--glow); }

#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  display: none;
}
html[data-crt='on'] #crt { display: block; }

#crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.26) 3px,
    rgba(0, 0, 0, 0.26) 4px
  );
}
#crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  animation: flicker 5.2s infinite steps(1, end);
}
@keyframes flicker {
  0%, 96%  { opacity: 1; }
  97%      { opacity: 0.88; }
  98%      { opacity: 1; }
  99%      { opacity: 0.93; }
}

/* ---------------------------------------------------------------------
   A tube that reacts

   Three moments, all of them short: the switch-on, a flash when a roll
   lands well, and a twitch when the terminal disagrees with you.
   ------------------------------------------------------------------ */

#term { transform-origin: center; }

/* The flash sits over the text and under the scanlines. */
#term::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
#term.flash::after { animation: flash 0.36s ease-out 1; }
@keyframes flash {
  from { opacity: 0.4; }
  to   { opacity: 0; }
}

#term.glitch { animation: glitch 0.16s steps(2, end) 2; }
@keyframes glitch {
  0%   { transform: none; }
  25%  { transform: translate3d(-2px, 1px, 0) skewX(-0.6deg); }
  50%  { transform: translate3d(2px, -1px, 0) skewX(0.5deg); }
  75%  { transform: translate3d(-1px, 0, 0); }
  100% { transform: none; }
}

/* Switch-on: the picture opens out of a line, the way a CRT does. */
#term.poweron { animation: poweron 0.55s ease-out 1; }
@keyframes poweron {
  0%   { transform: scale(1.35, 0.004); filter: brightness(3);   opacity: 0.85; }
  35%  { transform: scale(1, 0.03);     filter: brightness(2.2); opacity: 1; }
  100% { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #cursor { animation: none; }
  #crt::after { animation: none; }
  #term.poweron,
  #term.glitch { animation: none; }
  #term.flash::after { animation: none; }
}

/* ---------------------------------------------------------------------
   No JavaScript
   ------------------------------------------------------------------ */

#nojs {
  padding: 2rem var(--pad);
  max-width: 60ch;
  white-space: pre-wrap;
}
#nojs pre { white-space: pre; overflow-x: auto; }

/* ---------------------------------------------------------------------
   The app (app.js)

   One full screen over the terminal: a header with EXIT, a pane, and
   RULES / SHEETS / TABLE / QUEST along the bottom where a thumb already is.
   Everything is a 44px target or bigger. Rules and Table scroll inside
   their pane; Sheets is sized from the screen's height so it never has
   to.
   ------------------------------------------------------------------ */

html.app-open #term { visibility: hidden; }   /* nothing behind to tab into */

#app {
  position: fixed;
  inset: 0;
  z-index: 7;                 /* under the scanlines, over everything else */
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* One column exactly as wide as the screen. Left to size itself, it
     grows to fit the widest unbreakable thing inside - a long chapter
     title - and pushes EXIT and the text off the right edge. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  background: var(--bg);
  font-size: clamp(14px, 3.9vw, 18px);
  overscroll-behavior: contain;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#app[hidden] { display: none; }

/* Every row is the same column, no wider than a hand of cards. */
#app > * { width: min(100%, 40rem); }

#app button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}
#app button:focus-visible,
#app a:focus-visible,
#app input:focus-visible { outline: 2px solid var(--bright); outline-offset: -2px; }
#app [hidden] { display: none !important; }

/* Header --------------------------------------------------------------- */

.app-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(env(safe-area-inset-top) + 0.4rem) var(--pad) 0.4rem;
}
#app .app-back {
  width: 44px;
  height: 44px;
  margin-left: -0.5rem;
  display: grid;
  place-items: center;
  color: var(--hi);
}
.app-backico svg { width: 1.6em; height: 1.6em; }
.app-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 auto 0 0;      /* EXIT keeps to the right */
  font: inherit;
  color: var(--bg);
  background: var(--hi);
  padding: 0.1em 0.5em;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app .app-exit {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 0.9em;
  border: 1px solid var(--dim);
  color: var(--bright);
}
#app .app-exit:active { background: var(--hi); color: var(--bg); }

.app-main { min-height: 0; display: grid; }
.app-pane { min-height: 0; height: 100%; }

/* Tab bar -------------------------------------------------------------- */

.app-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--dim);
  padding-bottom: env(safe-area-inset-bottom);
}
#app .app-tab {
  min-height: clamp(56px, 8.5dvh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  color: var(--fg);
  border-right: 1px solid var(--dim);
}
#app .app-tab:last-child { border-right: 0; }
.app-tabico { line-height: 0; color: var(--hi); }
.app-tabico svg { width: 1.6em; height: 1.6em; }
.app-tabname { font-size: 0.78em; letter-spacing: 0.05em; }
#app .app-tab.on { background: var(--hi); color: var(--bg); }
#app .app-tab.on .app-tabico { color: inherit; }

/* RULES: the contents --------------------------------------------------- */

.app-rules { display: flex; flex-direction: column; }
.app-list { flex: 1; overflow-y: auto; padding: 0 var(--pad) 1rem; }
#app .app-row {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 1.6em 2.4ch minmax(0, 1fr) 1em;
  align-items: center;
  gap: 0.75em;
  border-bottom: 1px solid color-mix(in srgb, var(--dim) 55%, transparent);
  color: var(--bright);
  text-decoration: none;
}
.app-rowico { color: var(--hi); line-height: 0; }
.app-rowico svg { width: 1.45em; height: 1.45em; }
.app-rownum { color: var(--dim); text-align: right; }
.app-rowtitle { letter-spacing: 0.04em; }
.app-rowgo { color: var(--dim); line-height: 0; }
.app-rowgo svg { width: 1em; height: 1em; }
#app .app-row:active { background: var(--hi); color: var(--bg); }
#app .app-row:active .app-rowico,
#app .app-row:active .app-rownum,
#app .app-row:active .app-rowgo { color: inherit; }
.app-sep { border: 0; height: 0.8rem; margin: 0; }

/* RULES: a chapter ------------------------------------------------------ */

.app-read { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app-article {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem var(--pad) 1.4rem;
}
.app-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--dim);
}
#app .app-prev,
#app .app-next {
  min-height: 52px;
  padding: 0 var(--pad);
  color: var(--bright);
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app .app-prev { text-align: left; border-right: 1px solid var(--dim); }
#app .app-next { text-align: right; }
#app .app-prev:disabled,
#app .app-next:disabled { visibility: hidden; }
#app .app-prev:active,
#app .app-next:active { background: var(--hi); color: var(--bg); }

/* Opening FLARE: the page twitches once, as if something outside the
   screen brushed it. */
.app-article.flare-in { animation: flare-in 0.7s steps(1, end) 1; }
@keyframes flare-in {
  0%   { transform: none; opacity: 1; }
  12%  { transform: translate3d(-3px, 1px, 0) skewX(-1.2deg); opacity: 0.7; }
  24%  { transform: translate3d(3px, -1px, 0); filter: brightness(1.8); }
  36%  { transform: none; opacity: 1; filter: none; }
  62%  { transform: translate3d(1px, 0, 0); opacity: 0.85; }
  74%  { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-article.flare-in { animation: none; }
}

/* The rulebook's own markup (markup.js), set for reading. */
.prose { line-height: 1.55; color: var(--fg); }
.prose p { margin: 0 0 0.85em; }
.prose b { color: var(--bright); font-weight: normal; }
.prose i { color: var(--dim); font-style: normal; }
.prose u { text-decoration: none; color: var(--hi); }
.prose h3 {
  font: inherit;
  color: var(--hi);
  margin: 1.4em 0 0.6em;
}
.prose h3::before { content: '\2593'; }
.prose h3 > span { background: var(--hi); color: var(--bg); padding: 0 0.35em; }
.prose h3::after { content: ' \2593\2593\2592\2591'; }
.prose hr { border: 0; border-top: 1px solid var(--dim); margin: 1.2em 0; }
/* Drawings keep their 40 columns, scaled to whatever width there is. */
.prose pre {
  margin: 0 0 1em;
  font: inherit;
  font-size: clamp(9px, calc((min(100vw, 40rem) - 2 * var(--pad)) / 25), 15px);
  line-height: 1.25;
  white-space: pre;
  overflow-x: auto;
}
.prose ul.items { list-style: none; margin: 0 0 1em; padding: 0; }
.prose ul.items li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  margin-bottom: 0.45em;
}
.prose ul.items li p { margin: 0 0 0.35em; }
.prose .mk { color: var(--hi); }
.prose .lead { color: var(--bright); letter-spacing: 0.04em; }
.prose .term { color: var(--bright); margin: 1em 0 0.15em; }
.prose a { color: var(--fg); }
.prose a.chip {
  color: var(--bg);
  background: var(--hi);
  padding: 0 0.3em;
  text-decoration: none;
}
.prose .choice { margin: 0 0 0.5em; }
.prose .choice a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.4em 0.8em;
  border: 1px solid var(--dim);
  color: var(--bright);
  text-decoration: none;
}
.prose .choice a::before { content: '\25B8\00a0\00a0'; color: var(--hi); }
.prose .choice a:active { background: var(--hi); color: var(--bg); }
.prose .symgrid { margin: 0.4em 0 1em; }
.prose .tile { text-decoration: none; }

/* SHEETS --------------------------------------------------------------- */

.app-sheets {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.ref-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.2rem var(--pad) 0;
}
#app .ref-tile {
  height: clamp(54px, 9.5dvh, 92px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border: 1px solid var(--dim);
  color: var(--bright);
}
.ref-tico { color: var(--hi); line-height: 0; }
.ref-tico svg { width: clamp(22px, 4.2dvh, 38px); height: clamp(22px, 4.2dvh, 38px); }
.ref-tname { font-size: 0.78em; letter-spacing: 0.04em; }
#app .ref-tile.on { background: var(--hi); color: var(--bg); border-color: var(--hi); }
#app .ref-tile.on .ref-tico { color: inherit; }
/* The tile the random button landed on blinks once, so the eye finds it. */
#app .ref-tile.rolled { animation: rolled 0.45s steps(2, end) 1; }
@keyframes rolled { 0% { opacity: 0.35; } 50% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #app .ref-tile.rolled { animation: none; } }

/* The one rule. Scrolls only if a screen is impossibly short. */
.ref-rule {
  overflow-y: auto;
  padding: clamp(0.5rem, 1.8dvh, 1.2rem) var(--pad) 0.4rem;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.2dvh, 0.8rem);
}
.ref-rule p { margin: 0; }
.ref-head { display: flex; align-items: center; gap: 0.8rem; }
.ref-big { color: var(--hi); line-height: 0; }
.ref-big svg { width: clamp(36px, 6.5dvh, 60px); height: clamp(36px, 6.5dvh, 60px); }
.ref-name { color: var(--bright); font-size: 1.3em; letter-spacing: 0.05em; }
.ref-gist { color: var(--dim); }
.ref-when {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--hi);
  font-size: 0.85em;
  border-top: 1px solid var(--dim);
  padding-top: clamp(0.35rem, 1.2dvh, 0.8rem);
}
.ref-whenico { line-height: 0; }
.ref-whenico svg { width: 1.2em; height: 1.2em; }
.ref-text { color: var(--bright); font-size: clamp(1.05em, 2.7dvh, 1.4em); line-height: 1.4; }
.ref-hint { color: var(--dim); }
.ref-joker { color: var(--dim); font-size: 0.8em; }
.ref-joker.no { color: var(--red); }

/* Which sheet: three buttons just above the tab bar, boxed so they read
   as a choice on this screen rather than more tabs. */
.ref-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.4rem var(--pad) 0.55rem;
}
#app .ref-segbtn {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border: 1px solid var(--dim);
  color: var(--fg);
}
.ref-segico { color: var(--hi); line-height: 0; }
.ref-segico svg { width: 1.3em; height: 1.3em; }
.ref-segname { font-size: 0.74em; letter-spacing: 0.04em; }
#app .ref-segbtn.on { background: var(--hi); color: var(--bg); border-color: var(--hi); }
#app .ref-segbtn.on .ref-segico { color: inherit; }

/* TABLE ---------------------------------------------------------------- */

.app-table { overflow-y: auto; padding: 0.2rem var(--pad) 0.6rem; }
.tbl-card {
  border: 1px solid var(--dim);
  padding: 0.55rem 0.75rem 0.65rem;
  margin-bottom: 0.55rem;
}
.tbl-head { display: flex; align-items: center; justify-content: space-between; }
.tbl-h { margin: 0 0 0.4rem; font: inherit; font-size: 0.85em; color: var(--hi); letter-spacing: 0.06em; }
#app .tbl-reset {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-height: 36px;
  padding: 0 0.6em;
  margin-top: -0.4rem;
  border: 1px solid var(--dim);
  color: var(--fg);
  font-size: 0.75em;
}
.tbl-resetico { line-height: 0; }
.tbl-resetico svg { width: 1.2em; height: 1.2em; }
.tbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 48px;
}
.tbl-label { display: flex; flex-direction: column; color: var(--bright); min-width: 0; }
.tbl-note { color: var(--dim); font-size: 0.8em; }
.tbl-ctl { display: flex; align-items: center; gap: 0.3rem; }
#app .tbl-step {
  min-width: 44px;
  height: 44px;
  padding: 0 0.3em;
  border: 1px solid var(--dim);
  color: var(--bright);
  text-align: center;
}
#app .tbl-step:active { background: var(--hi); color: var(--bg); }
.tbl-num {
  width: 4.2ch;
  height: 44px;
  font: inherit;
  font-size: max(16px, 1.15em);    /* 16px stops iOS zooming in on focus */
  text-align: center;
  color: var(--bright);
  background: transparent;
  border: 1px solid var(--hi);
  border-radius: 0;
}
.tbl-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--dim);
}
.tbl-sum { color: var(--dim); font-size: 0.85em; }
.tbl-big { color: var(--hi); font-size: 1.75em; font-weight: normal; line-height: 1.2; }
.tbl-verdict { margin: 0.35rem 0 0; padding: 0.4em 0.6em; color: var(--fg); border: 1px solid var(--dim); }
.tbl-verdict.win { background: var(--hi); color: var(--bg); border-color: var(--hi); }

/* QUEST ---------------------------------------------------------------- */

.app-quest { overflow-y: auto; padding: 0.4rem var(--pad) 1.2rem; }
.q-box { display: flex; flex-direction: column; gap: 0.8rem; }
.q-box p { margin: 0; }
.q-hero { display: grid; place-items: center; padding-top: 1.2rem; color: var(--hi); }
.q-heroico svg { width: 4.5em; height: 4.5em; }
.q-title { margin: 0.3rem 0 0; font: inherit; font-size: 1.25em; color: var(--bright); letter-spacing: 0.06em; }
.q-kicker {
  align-self: flex-start;
  color: var(--bg);
  background: var(--hi);
  padding: 0.1em 0.5em;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}
.q-lead { color: var(--fg); line-height: 1.5; }
.q-story { color: var(--fg); font-size: 1.02em; line-height: 1.6; }
.q-story + .q-story { margin-top: -0.2rem; }
.q-word { color: var(--hi); font-weight: normal; }
.q-ask { margin: 0.4rem 0 0; font: inherit; color: var(--hi); letter-spacing: 0.06em; }
.q-chose { color: var(--dim); }
.q-chose .q-word { color: var(--dim); }

#app .q-btn {
  min-height: 56px;
  padding: 0 1em;
  background: var(--hi);
  color: var(--bg);
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}
#app .q-btn:active { background: var(--bright); }
#app .q-btn:disabled { background: transparent; color: var(--dim); border: 1px solid var(--dim); cursor: default; }
#app .q-btn2 {
  min-height: 48px;
  padding: 0 0.8em;
  border: 1px solid var(--dim);
  color: var(--bright);
  text-align: center;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
#app .q-btn2:active { background: var(--hi); color: var(--bg); }
.q-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* The blanks. */
.q-field { display: flex; flex-direction: column; gap: 0.3rem; }
.q-label { color: var(--bright); font-size: 0.85em; letter-spacing: 0.04em; }
.q-inrow { display: flex; gap: 0.4rem; }
.q-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 0.6em;
  font: inherit;
  font-size: max(16px, 1em);       /* 16px stops iOS zooming in on focus */
  color: var(--hi);
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: 0;
}
.q-input::placeholder { color: var(--dim); opacity: 0.8; }
.q-input:focus { border-color: var(--hi); outline: none; }
#app .q-dice {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--dim);
  color: var(--hi);
}
#app .q-dice:active { background: var(--hi); color: var(--bg); }
.q-diceico { line-height: 0; }
.q-diceico svg { width: 1.5em; height: 1.5em; }

/* The two choices. */
#app .q-choice {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  min-height: 60px;
  padding: 0.8em 0.9em;
  border: 1px solid var(--dim);
  color: var(--bright);
  line-height: 1.45;
}
.q-choicemk { color: var(--hi); }
#app .q-choice:active { background: var(--hi); color: var(--bg); }
#app .q-choice:active * { color: inherit; }

/* What the choice did. */
.q-twist { border: 1px solid var(--hi); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.q-twist.bad { border-color: var(--red); }
.q-badge {
  align-self: flex-start;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: var(--hi);
  padding: 0.1em 0.45em;
}
.q-twist.bad .q-badge { background: var(--red); }
.q-twisttext { color: var(--bright); font-size: 1.1em; line-height: 1.5; }
.q-note { color: var(--dim); font-size: 0.85em; }

/* How it went. */
.q-results { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
#app .q-result {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border: 1px solid var(--dim);
  color: var(--bright);
  text-align: center;
  letter-spacing: 0.04em;
}
.q-resultico { line-height: 0; color: var(--hi); }
.q-resultico svg { width: 1.8em; height: 1.8em; }
#app .q-result.loss .q-resultico { color: var(--red); }
#app .q-result:active { background: var(--hi); color: var(--bg); }
#app .q-result:active .q-resultico { color: inherit; }
#app .q-quit { align-self: center; min-height: 44px; color: var(--dim); text-decoration: underline; font-size: 0.85em; }

/* What to write on the deck. */
.q-inscribe { border: 1px solid var(--hi); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.q-inhead { display: flex; align-items: center; gap: 0.8rem; }
.q-inico { color: var(--hi); line-height: 0; }
.q-inico svg { width: 3em; height: 3em; }
.q-inhead > div { display: flex; flex-direction: column; gap: 0.3rem; }
.q-inname { color: var(--bright); font-size: 1.25em; letter-spacing: 0.05em; }
.q-inhow { color: var(--fg); line-height: 1.5; }
.q-insheet { color: var(--dim); font-size: 0.9em; line-height: 1.45; border-top: 1px solid var(--dim); padding-top: 0.5rem; }
.q-xp { color: var(--dim); font-size: 0.85em; line-height: 1.45; }

@media (hover: hover) {
  #app .ref-tile:hover:not(.on),
  #app .ref-segbtn:hover:not(.on),
  #app .app-tab:hover:not(.on) { border-color: var(--hi); color: var(--hi); }
  #app .app-row:hover { color: var(--hi); }
}

/* ---------------------------------------------------------------------
   Share (share.js)

   A card over everything - the terminal, the app, and the scanlines too,
   because a camera reads a QR code best without stripes across it.
   ------------------------------------------------------------------ */

#app .app-share {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dim);
  color: var(--hi);
}
#app .app-share:active { background: var(--hi); color: var(--bg); }
.app-shareico { line-height: 0; }
.app-shareico svg { width: 1.35em; height: 1.35em; }

.share {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: max(var(--pad), env(safe-area-inset-top)) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.72);
  font-size: clamp(14px, 3.9vw, 18px);
  -webkit-tap-highlight-color: transparent;
}
.share[hidden] { display: none; }
.share button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.share button:focus-visible,
.share input:focus-visible { outline: 2px solid var(--bright); outline-offset: -2px; }
.share-card {
  width: min(100%, 24rem);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--hi);
}
.share-top { display: flex; align-items: center; justify-content: space-between; }
.share-title {
  margin: 0;
  font: inherit;
  color: var(--bg);
  background: var(--hi);
  padding: 0.1em 0.5em;
  letter-spacing: 0.06em;
}
.share .share-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--dim);
  color: var(--bright);
}
.share-lead { margin: 0; color: var(--fg); line-height: 1.45; }
.share-qr { align-self: center; width: min(100%, 17rem); }
.share-qr svg { display: block; width: 100%; height: auto; }
.share-qrbg { fill: var(--bright); }
.share-qrfg { fill: var(--bg); }
.share-link {
  width: 100%;
  height: 44px;
  padding: 0 0.6em;
  font: inherit;
  font-size: max(16px, 0.9em);     /* 16px stops iOS zooming in on focus */
  color: var(--hi);
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: 0;
}
.share-row { display: flex; gap: 0.5rem; }
.share-row > * { flex: 1; }
.share .share-btn {
  min-height: 52px;
  background: var(--hi);
  color: var(--bg);
  letter-spacing: 0.05em;
}
.share .share-btn:active { background: var(--bright); }
.share .share-btn2 {
  min-height: 52px;
  border: 1px solid var(--dim);
  color: var(--bright);
  letter-spacing: 0.05em;
}
.share .share-btn2:active { background: var(--hi); color: var(--bg); }
.share .share-btn2[hidden] { display: none; }