:root { color-scheme: dark; --bg: #0d0d0f; --panel: #1b1b21; --edge: #3a3a44; --fg: #d8d8d8; --dim: #8a8a8a; --accent: #f0c45a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 ui-monospace, Menlo, Consolas, monospace; -webkit-text-size-adjust: 100%; }
section { padding: max(16px, env(safe-area-inset-top)) 16px 24px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 20px; margin: 8px 0; } h2 { font-size: 14px; color: var(--dim); margin: 20px 0 8px; font-weight: normal; text-transform: uppercase; }
.lead, .dim { color: var(--dim); font-size: 13px; }
button { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:active { background: #33333c; }
.card { display: block; width: 100%; text-align: left; padding: 12px 14px; margin: 8px 0; }
.card b { display: block; color: var(--accent); } .card span { color: var(--dim); font-size: 13px; }
.resume { border-color: var(--accent); }
.primary { background: var(--accent); color: #17171a; border-color: var(--accent); font-weight: bold; padding: 12px 20px; }
.link { background: none; border: 0; color: var(--dim); padding: 8px 0; }
#seeds { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 6px 10px; font-size: 13px; } .chip.on { border-color: var(--accent); color: var(--accent); }
#brief-focus { padding-left: 20px; } #brief-focus li { margin: 6px 0; font-size: 14px; }
#start { width: 100%; margin-top: 12px; font-size: 18px; }
/* The game screen is a stack of bands with fixed heights, so nothing moves while you play: the board is a square
   sized once from the screen, and every list or panel is shown inside a band that scrolls, never one that grows. */
#game { --controls: 176px; --side: min(calc(100vw - 16px), calc(100dvh - 330px), 560px); padding: 0 8px; max-width: 600px; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  /* Mis-taps on the board/controls used to select glyphs and open the phone's Look Up / Search
     callout (the board is a <pre>). Keep play chrome non-selectable; report textareas stay outside #game.
     touch-action: manipulation kills iOS Safari double-tap zoom on retries when a slow move feels
     unresponsive (#694 covered selection only). Scoped to #game so menu/brief keep pinch-zoom. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.kbd #game { --controls: 0px; --side: min(calc(100vw - 16px), calc(100dvh - 190px), 560px); }
#bar { height: 34px; flex: none; margin-top: max(4px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
#title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bar button { padding: 4px 12px; font-size: 16px; }
#bar-buttons { display: flex; flex: none; gap: 6px; } #bar #mapbtn { font-size: 14px; } #bar #mapbtn.on { border-color: var(--accent); color: var(--accent); }
/* Board chrome matches fog so any sub-pixel gap never reads as a black void. */
#board { width: var(--side); height: var(--side); flex: none; margin: 0 auto; background: #12181c; border: 1px solid var(--edge); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
/* Square tiles: each glyph is a span of --tile (set by fitBoard). Letter-spacing left black voids. */
#boardtext { --tile: 32px; margin: 0; white-space: pre; line-height: var(--tile); font-size: calc(var(--tile) * 0.72); letter-spacing: 0; text-align: left; }
#boardtext.tiles > span { display: inline-block; width: var(--tile); height: var(--tile); line-height: var(--tile); text-align: center; vertical-align: top; overflow: hidden; }
/* Defeat fills the board square: skull, banner, cause, attempt summary. */
#boardtext.defeat { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; white-space: normal; line-height: 1.35; letter-spacing: 0; font-size: clamp(13px, 3.2cqi, 16px); padding: 16px; container-type: size; }
#boardtext.defeat .defeat-skull { font-size: clamp(52px, 28cqi, 96px); line-height: 1; color: #c65a4a; margin-bottom: 12px; }
#boardtext.defeat .defeat-banner { color: var(--fg); font-size: 1.2em; margin-bottom: 10px; }
#boardtext.defeat .defeat-cause { color: var(--dim); margin-bottom: 8px; max-width: 22em; }
#boardtext.defeat .defeat-summary { color: var(--accent); font-size: 0.92em; }
#vitals { height: 32px; flex: none; display: flex; gap: 6px; } #vitals div { flex: 1; min-width: 0; background: var(--panel); border-radius: 6px; padding: 3px 4px; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; }
#vitals i { display: block; height: 5px; border-radius: 3px; margin-top: 3px; }
/* 96px = former 62px band + the 34px affinity-hint row that no longer shows instructional text. */
#msg { height: 96px; flex: none; overflow-y: auto; background: var(--panel); border-radius: 8px; padding: 4px 8px; font-size: 12px; line-height: 1.3; color: var(--dim); overscroll-behavior: contain; }
/* When a slot is selected, swap/unequip reclaim that 34px so total chrome stays fixed. */
#game:has(#tune:not(.hint)) #msg { height: 62px; }
#msg .first { color: var(--fg); }
#slots { height: 52px; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.slot { position: relative; padding: 4px 6px 4px 18px; text-align: left; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; min-width: 0; }
.slot::before { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #666); }
.slot b { font-size: 13px; } .slot small { font-size: 10.5px; color: var(--dim); white-space: nowrap; } .slot em { position: absolute; right: 6px; top: 4px; font-style: normal; font-size: 10px; color: var(--accent); }
.slot em.bad { color: #ff5a5a; }
.slot.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .slot.off { opacity: 0.55; }
.slot.empty { border-style: dashed; color: var(--dim); align-items: center; padding-left: 6px; } .slot.empty::before { display: none; } .slot:disabled { opacity: 0.4; }
.tune { height: 34px; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tune > button { font-size: 11px; padding: 0; } .tune button:disabled { opacity: 0.35; }
/* Empty (no slot selected): collapse — space went to #msg. Swap/unequip still use .tune at 34px. */
.tune.hint { height: 0; min-height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; visibility: hidden; }
#controls { height: var(--controls); flex: none; display: flex; gap: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
body.kbd #controls { display: none; }
/* Slot / More pickers need the controls band even when a keyboard or mouse hid it. */
body.picking #controls, body.kbd.picking #controls { display: flex; }
body.picking #game, body.kbd.picking #game { --controls: 176px; --side: min(calc(100vw - 16px), calc(100dvh - 330px), 560px); }
#controls .pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; width: 62%; flex: none; }
#controls .act { flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 5px; }
#controls .grid { flex: 1; display: grid; gap: 5px; align-content: start; overflow-y: auto; }
#controls .grid.more { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 48px; } #controls .grid.end { grid-template-columns: 1fr; grid-auto-rows: 48px; } #controls .grid.list { grid-template-columns: 1fr 1fr; grid-auto-rows: 44px; }
.k { font-size: 17px; padding: 0 4px; min-width: 0; } .act .k, .grid .k { font-size: 13px; } .k.go { background: var(--accent); color: #17171a; border-color: var(--accent); font-weight: bold; } .k.no { color: var(--dim); }
dialog { background: var(--bg); color: var(--fg); border: 1px solid var(--edge); border-radius: 14px; width: min(92vw, 480px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog > button { display: block; width: 100%; margin: 8px 0; padding: 14px; }
#help-dialog { max-height: min(92dvh, 720px); padding: 16px 16px 12px; }
#help-dialog[open] { display: flex; flex-direction: column; }
#help-dialog h2 { margin: 0 0 10px; flex: none; }
#help-dialog .row { flex: none; margin: 8px 0 0; }
.help { overflow-y: auto; flex: 1; min-height: 0; margin: 0; overscroll-behavior: contain; }
.help-block { margin: 0 0 14px; }
.help-block:last-child { margin-bottom: 4px; }
.help-block h3 { font-size: 11px; color: var(--accent); margin: 0 0 6px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.06em; }
.help-row { display: grid; grid-template-columns: minmax(6.5rem, 40%) 1fr; gap: 8px 10px; align-items: start; padding: 7px 0; border-top: 1px solid #ffffff0c; font-size: 13px; line-height: 1.35; }
.help-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.help kbd { display: inline-block; padding: 2px 6px; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); color: var(--fg); font: 600 11px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.help-desc { color: var(--dim); }
textarea { width: 100%; background: var(--panel); color: var(--fg); border: 1px solid var(--edge); border-radius: 8px; font: 13px/1.3 ui-monospace, Menlo, monospace; padding: 8px; }
.row { display: flex; gap: 8px; margin: 8px 0; } .row button { flex: 1; padding: 10px; }
@media (hover: hover) and (pointer: fine) {
  #controls { display: none; }
  #game { --controls: 0px; --side: min(calc(100vw - 16px), calc(100dvh - 190px), 560px); }
  body.picking #controls { display: flex; }
  body.picking #game { --controls: 176px; --side: min(calc(100vw - 16px), calc(100dvh - 330px), 560px); }
}

#update { position: fixed; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--accent); color: #17171a; border-radius: 10px; font-size: 13px; box-shadow: 0 4px 16px #0008; pointer-events: auto; }
#update span { flex: 1; } #update button { padding: 6px 12px; background: #17171a; color: var(--accent); border-color: #17171a; font-size: 13px; pointer-events: auto; cursor: pointer; } #update #update-later { background: none; color: #17171a; border-color: #17171a55; }
#menu-version { margin: 0 0 4px; text-align: center; }

/* The character screen (#557): rows of tappable fields; the keys below change the one that is lit. */
.wide { display: block; width: 100%; margin-top: 10px; padding: 12px; }
#character { padding-bottom: 150px; }
/* Stay on screen while the sheet scrolls down to vitals / minions, so −/+ spend is visible. */
#allowance { position: sticky; top: 0; z-index: 2; padding: 8px 0 10px; margin: 0 -2px; background: var(--bg); font-size: 13px; color: var(--dim); } #allowance i { display: block; height: 6px; border-radius: 3px; margin-top: 4px; background: var(--edge); } #allowance i b { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--accent)); }
#sheet h2 { margin: 14px 0 6px; }
.srow { display: flex; align-items: center; gap: 4px; margin: 4px 0; } .srow > span { width: 22px; color: var(--dim); font-size: 12px; flex: none; } .srow > em { margin-left: auto; font-style: normal; color: var(--dim); font-size: 12px; width: 40px; text-align: right; flex: none; }
/* Fixed columns, so a long value (fortify, corrode) never resizes its box; the text shrinks instead. */
.srow.aff, .srow.vital { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 28px 40px; }
.srow.vital { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) 40px; }
.srow.aff > .mana { width: auto; font-size: clamp(9px, 2.8vw, 12px); text-align: center; white-space: nowrap; overflow: hidden; color: var(--dim); } .srow.aff > .mana.bad { color: #e07a6a; }
.srow.minion { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 3.8fr) 40px; } .srow.minion > .dim { font-size: 12px; padding-left: 6px; white-space: nowrap; overflow: hidden; width: auto; }
.srow.aff > span, .srow.vital > span, .srow.minion > span { width: auto; } .srow.aff > em, .srow.vital > em, .srow.minion > em { width: auto; margin-left: 0; }
.f { padding: 7px 2px; font-size: clamp(10px, 3.1vw, 13px); min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: clip; } .f.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.f.kind { border-left: 4px solid var(--c, var(--edge)); } .srow.empty .f:not(.on) { border-style: dashed; color: var(--dim); }
#sheet-note { min-height: 18px; margin: 8px 0; } #sheet-note .bad { color: #e07a6a; }
#sheet-keys { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--edge); max-width: 640px; margin: 0 auto; }
#sheet-keys button { padding: 12px 4px; font-size: 15px; } #sheet-keys .wide { grid-column: 1 / -1; } #sheet-keys button:disabled { opacity: 0.35; } #sheet-keys .go { background: var(--accent); color: #17171a; border-color: var(--accent); font-weight: bold; }

/* attack / defence / support tag on a slot and a sheet row (#704) */
i.role { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--dim); text-align: center; }
.slot i.role { position: absolute; right: 6px; bottom: 4px; }
i.role.attack { color: #e07a6a; } i.role.defence { color: #6aa8e0; } i.role.support { color: #6ac98a; }