/* kit.css: structure and behaviour for the Realms kit's screens. A game skins it; it must not look like this.
 *
 * HOW TO SKIN. Set these variables on :root (or on .kit-skin-<name>, the class createHud / createStory / runSetup add
 * when given { skin: "<name>" }), load the game's own fonts, and add frame art with the game's own rules on the classes
 * below (borders, backgrounds, ::before / ::after ornaments).
 *
 *   --kit-font-display   the huge words and numbers            --kit-font-text    in-hand paragraphs
 *   --kit-ink            on-floor text colour                  --kit-outline      the thick outline round on-floor text
 *   --kit-accent         bars, rings, buttons, kickers         --kit-accent-ink   text on the accent colour
 *   --kit-good / --kit-warn / --kit-bad / --kit-calm / --kit-hot    the five tones (word, verdict, bar, flash)
 *   --kit-paper / --kit-paper-ink    in-hand backgrounds and text
 *   --kit-bar-bg, --kit-caption-bg, --kit-figure (the setup mirror figure), --kit-word-size, --kit-btn-radius
 *
 * ON THE FLOOR everything is sized in vh and meant to be read from 2 m: the word is up to 16vh (135 px on an iPhone 14),
 * the counter 30vh, bars 8vh tall, icons 24vh, captions 7.5vh. Words shrink to fit the width through --len (their longest
 * line), set by hud.js, so nothing here measures text. Keep meaning in the middle 70% of the height (notch, home bar).
 */

@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../vendor/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-condensed-600.woff2") format("woff2"); }

:root {
  --kit-font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --kit-font-text: -apple-system, system-ui, "Segoe UI", sans-serif;
  --kit-ink: #f7f4ea; --kit-outline: #0a0c0f;
  --kit-accent: #f0c24a; --kit-accent-ink: #15120a;
  --kit-good: #5fd688; --kit-warn: #f0c24a; --kit-bad: #f0595c; --kit-calm: #6bc3e6; --kit-hot: #ff8b3d;
  --kit-paper: #101318; --kit-paper-ink: #ebe7dc;
  --kit-bar-bg: rgba(6, 8, 10, 0.62); --kit-caption-bg: rgba(6, 8, 10, 0.84); --kit-figure: #f7f4ea;
  --kit-btn-radius: 10px;
}

/* ---------- Page basics: add class "kit-page" to <html> ---------- */
[hidden] { display: none !important; }   /* a class that sets display would otherwise beat the hidden attribute */
.kit-page, .kit-page body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; background: var(--kit-paper); color: var(--kit-paper-ink); }
.kit-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- On the floor: the HUD ---------- */
.kit-hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; text-align: center; text-transform: uppercase;
  font-family: var(--kit-font-display); font-weight: 800; color: var(--kit-ink); }
.kit-hud-top, .kit-hud-mid, .kit-hud-low, .kit-hud-verdict { position: absolute; left: 0; right: 0; display: grid; justify-items: center; }
.kit-hud-verdict { top: 66%; z-index: 2; }
.kit-hud-top { top: 11%; }
.kit-hud-mid { top: 50%; transform: translateY(-46%); align-items: center; }
.kit-hud-mid > * { grid-area: 1 / 1; }                    /* counter and ring share the middle */
.kit-hud-low { bottom: 9%; gap: 2.2vh; }

.kit-word, .kit-verdict, .kit-count, .kit-ring-n, .kit-bar-label {
  -webkit-text-stroke: 1.1vh var(--kit-outline); paint-order: stroke fill; text-shadow: 0 0.5vh 2.4vh rgba(0, 0, 0, 0.55); }
.kit-word { font-size: min(var(--kit-word-size, 16vh), calc(172vw / var(--len, 5))); line-height: 0.9; white-space: pre; }
.kit-verdict { font-size: min(12vh, calc(172vw / var(--len, 6))); line-height: 0.9; white-space: pre; color: var(--kit-accent); }
.kit-count { font-size: 30vh; line-height: 0.82; display: flex; align-items: baseline; justify-content: center; font-variant-numeric: tabular-nums; }
.kit-count-n { display: inline-block; }
.kit-count-of { font-size: 9vh; margin-left: 0.6vh; opacity: 0.85; -webkit-text-stroke-width: 0.7vh; }
.kit-icon { width: 24vh; height: 24vh; color: var(--kit-ink); filter: drop-shadow(0 0 0.5vh var(--kit-outline)) drop-shadow(0 0 0.5vh var(--kit-outline)); }
.kit-icon svg, .kit-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kit-icon svg { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.kit-ring { position: relative; width: 34vh; height: 34vh; }
.kit-ring svg { fill: none; stroke-width: 9; }
.kit-ring-track { stroke: var(--kit-bar-bg); }
.kit-ring-arc { stroke: var(--kit-accent); stroke-linecap: butt; }
.kit-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17vh; line-height: 1; font-variant-numeric: tabular-nums; }
.kit-bar { position: relative; width: 92vw; height: 8vh; box-sizing: border-box; border: 0.7vh solid var(--kit-outline); border-radius: 1.4vh; background: var(--kit-bar-bg); overflow: hidden; }
.kit-bar-fill { position: absolute; inset: 0; background: var(--kit-accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.12s linear; will-change: transform; }
.kit-bar-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5.2vh; line-height: 1; -webkit-text-stroke-width: 0.7vh; }
.kit-caption { font-size: min(7.5vh, calc(165vw / var(--len, 8))); line-height: 1; white-space: pre; padding: 1.8vh 5vw; border-radius: 1.4vh; background: var(--kit-caption-bg); font-weight: 600; letter-spacing: 0.02em; }
.kit-flash { position: absolute; inset: 0; opacity: 0; background: var(--kit-good); }

[data-tone="good"] { color: var(--kit-good); } [data-tone="warn"] { color: var(--kit-warn); } [data-tone="bad"] { color: var(--kit-bad); }
[data-tone="calm"] { color: var(--kit-calm); } [data-tone="hot"] { color: var(--kit-hot); }
.kit-flash[data-tone="warn"], .kit-bar[data-tone="warn"] .kit-bar-fill { background: var(--kit-warn); }
.kit-flash[data-tone="bad"], .kit-bar[data-tone="bad"] .kit-bar-fill { background: var(--kit-bad); }
.kit-flash[data-tone="calm"], .kit-bar[data-tone="calm"] .kit-bar-fill { background: var(--kit-calm); }
.kit-flash[data-tone="hot"], .kit-bar[data-tone="hot"] .kit-bar-fill { background: var(--kit-hot); }
.kit-flash[data-tone="good"], .kit-bar[data-tone="good"] .kit-bar-fill { background: var(--kit-good); }
.kit-bar[data-tone] { color: var(--kit-ink); }

/* The loop's pause screen: "STEP BACK IN", "PAUSED TAP". */
.kit-pause { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(6, 8, 10, 0.9); }
.kit-pause-word { font: 800 min(17vh, 30vw) / 0.92 var(--kit-font-display); white-space: pre; text-align: center; text-transform: uppercase; color: var(--kit-warn); }
/* guard.js: an uncaught error, said out loud. */
.kit-fatal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; box-sizing: border-box; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); max-height: 30vh; overflow: hidden;
  font: 600 13px/1.35 ui-monospace, Menlo, monospace; background: var(--kit-bad); color: #111; word-break: break-word; }
/* "BOT" / "REPLAY": this is not a person playing. */
.kit-badge { position: fixed; left: 50%; transform: translateX(-50%); top: max(5px, env(safe-area-inset-top)); z-index: 70; padding: 3px 8px 2px; border-radius: 4px; pointer-events: none;
  font: 800 12px/1.2 var(--kit-font-display); letter-spacing: 0.12em; background: var(--kit-hot); color: #111; }

/* ---------- In hand: buttons and type shared by setup, story and results ---------- */
.kit-btn { font: 800 19px/1 var(--kit-font-display); text-transform: uppercase; letter-spacing: 0.07em; min-height: 50px; padding: 14px 22px; border: 0;
  border-radius: var(--kit-btn-radius); background: var(--kit-accent); color: var(--kit-accent-ink); cursor: pointer; }
.kit-btn:disabled { opacity: 0.5; }
.kit-btn-big { font-size: 28px; min-height: 68px; width: 100%; }
.kit-btn-quiet { min-height: 40px; padding: 8px 14px; font-size: 14px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.72; }
.kit-title { margin: 0; font: 800 46px/0.92 var(--kit-font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.kit-kicker { font: 800 13px/1 var(--kit-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kit-accent); }
.kit-actions { display: grid; gap: 10px; }

/* ---------- Setup ---------- */
.kit-setup { position: fixed; inset: 0; z-index: 50; box-sizing: border-box; overflow: auto; background: var(--kit-paper); color: var(--kit-paper-ink); font-family: var(--kit-font-text);
  padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom)); }
.kit-setup-card { box-sizing: border-box; max-width: 460px; min-height: 100%; margin: 0 auto; display: grid; gap: 18px; align-content: center; }
.kit-setup-lines { margin: 0; padding-left: 1.25em; font-size: 18px; line-height: 1.42; }
.kit-setup-lines li { margin-bottom: 8px; }
.kit-toggle { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.kit-toggle input { width: 26px; height: 26px; margin: 0; accent-color: var(--kit-accent); }
.kit-share { font-size: 14px; line-height: 1.3; align-items: flex-start; }
.kit-share input { flex: none; }
.kit-privacy { margin: 0; font-size: 14px; line-height: 1.4; opacity: 0.72; }
.kit-setup-msg { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--kit-warn); }
.kit-setup-frame { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; justify-items: center; gap: 2vh; text-align: center; }
.kit-setup-word { font: 800 13vh/0.9 var(--kit-font-display); white-space: pre; text-transform: uppercase; color: var(--kit-warn); }
.kit-setup-frame.ok .kit-setup-word { color: var(--kit-good); }
.kit-setup-view { height: 100%; min-height: 0; max-width: 100%; aspect-ratio: 3 / 4; box-sizing: border-box; border: 0.9vh solid var(--kit-bad); border-radius: 2vh; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.kit-setup-frame.ok .kit-setup-view { border-color: var(--kit-good); }
.kit-setup-figure { width: 100%; height: 100%; display: block; }
.kit-checks { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5vw; }
.kit-checks li { display: grid; justify-items: center; gap: 0.7vh; font: 800 2.1vh/1 var(--kit-font-display); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.55; }
.kit-checks i { position: relative; width: 7.5vh; height: 7.5vh; box-sizing: border-box; border-radius: 50%; border: 0.8vh solid currentColor; }
.kit-checks li.ok { opacity: 1; }
.kit-checks li.ok i { background: var(--kit-good); border-color: var(--kit-good); }
.kit-checks li.ok i::after { content: ""; position: absolute; left: 30%; top: 12%; width: 28%; height: 52%; border: solid var(--kit-outline); border-width: 0 1vh 1vh 0; transform: rotate(40deg); }
.kit-setup-count { position: fixed; inset: 0; display: grid; place-items: center; background: var(--kit-paper); font: 800 46vh/1 var(--kit-font-display); color: var(--kit-ink); }

/* ---------- Story pages and choices ---------- */
.kit-story { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: minmax(0, 46%) minmax(0, 1fr) auto; background: var(--kit-paper); color: var(--kit-paper-ink); font-family: var(--kit-font-text); }
.kit-story-art { overflow: hidden; }
.kit-story-art img, .kit-story-art canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-story-art[hidden] + .kit-story-body { grid-row: 1 / 3; align-self: center; }
.kit-story-body { padding: 22px 24px 0; overflow: hidden; }
.kit-story-body .kit-kicker { margin-bottom: 12px; }
.kit-story-text { margin: 0; font-size: 19px; line-height: 1.5; white-space: pre-wrap; }
.kit-story-rest { visibility: hidden; }
.kit-story-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px max(18px, env(safe-area-inset-bottom)); }
.kit-pips i { display: inline-block; width: 18px; height: 4px; margin-right: 5px; background: currentColor; opacity: 0.22; }
.kit-pips i.on { opacity: 1; }
.kit-story-next { width: 0; height: 0; border: 9px solid transparent; border-left: 14px solid var(--kit-accent); border-right: 0; opacity: 0; }
.kit-story-next.on { opacity: 1; animation: kit-nudge 0.9s ease-in-out infinite; }
@keyframes kit-nudge { 50% { transform: translateX(5px); } }
.kit-story-skip { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); }
.kit-choice { grid-template-rows: minmax(0, 36%) auto 1fr; }
.kit-choice-list { align-content: start; padding: 18px 24px max(18px, env(safe-area-inset-bottom)); }
.kit-choice-list .kit-btn { display: grid; gap: 4px; text-align: left; }
.kit-choice-list .kit-btn span { font: 400 13px/1.3 var(--kit-font-text); text-transform: none; letter-spacing: 0; opacity: 0.85; }

/* ---------- Results ---------- */
.kit-panel { position: fixed; inset: 0; z-index: 45; overflow: auto; background: var(--kit-paper); color: var(--kit-paper-ink); font-family: var(--kit-font-text); -webkit-overflow-scrolling: touch; }
.kit-panel-in { box-sizing: border-box; max-width: 480px; margin: 0 auto; display: grid; gap: 18px; padding: max(36px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom)); }
.kit-res-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kit-res-big div { display: grid; gap: 6px; padding: 14px 4px 12px; text-align: center; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, 0.35); }
.kit-res-big b { font: 800 36px/1 var(--kit-font-display); font-variant-numeric: tabular-nums; }
.kit-res-big span { font-size: 10.5px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.72; }
.kit-res-moves { list-style: none; margin: 0; padding: 0; }
.kit-res-moves li { display: grid; grid-template-columns: 1fr 64px auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.28); font-size: 16px; }
.kit-res-moves b { min-width: 2.4em; text-align: right; font: 800 23px/1 var(--kit-font-display); font-variant-numeric: tabular-nums; }
.kit-res-move::first-letter { text-transform: uppercase; }
.kit-res-q i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--kit-accent) calc(var(--q) * 100%), rgba(128, 128, 128, 0.3) 0); }
.kit-res-week { display: grid; gap: 7px; font-size: 13.5px; }
.kit-res-weekbar { height: 12px; border-radius: 6px; overflow: hidden; background: rgba(128, 128, 128, 0.28); }
.kit-res-weekbar i { display: block; height: 100%; width: var(--p); background: var(--kit-good); }
.kit-res-note { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: 0.66; }
.kit-res-rate { display: grid; gap: 8px; font-size: 15px; }
.kit-res-rate div { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.kit-res-rate button { min-height: 42px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, 0.5); font: 800 16px/1 var(--kit-font-display); }
.kit-res-rate button.on { background: var(--kit-accent); color: var(--kit-accent-ink); box-shadow: none; }
.kit-share a { color: inherit; opacity: 0.8; }