/* =====================================================================
   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 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;
  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(3, 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); }

/* 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 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); }

/* 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); }
.tbl-luckbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
#app .tbl-luckbtn {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border: 1px solid var(--dim);
  color: var(--bright);
  font-size: 0.78em;
  text-align: center;
}
#app .tbl-luckbtn:active { background: var(--hi); color: var(--bg); }
.tbl-luckico { color: var(--hi); line-height: 0; }
.tbl-luckico svg { width: 1.7em; height: 1.7em; }
.tbl-luck { margin: 0.45rem 0 0; min-height: 1.5em; text-align: center; font-size: 1.35em; color: var(--bright); }
.tbl-luck.high { color: var(--hi); }
.tbl-luck.low { color: var(--dim); }

@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); }
}