/* Crown & Consequence — one stylesheet for the court and its storybook realm.

   Sections
     1. Tokens and themes
     2. Layout
     3. Header and pillars (stats, preview dots, goals)
     4. Card (deck, card face, question, portrait, story ribbon, nameplate)
     5. Choices and previews (answer ribbon, side answers)
     6. Footer (menu buttons, ruler, year)
     7. Overlays and panels (overlay, panel, buttons, tabs, title screen)
     8. End screen and legacy (reign summary, chart, legacy page, bequests)
     9. Chronicle (achievements, tales, rulers, help, settings tab)
    10. Council
    11. Coach, toasts and speech bubbles
    12. Realm (peek, doom)
    13. Settings variants (big-text / contrast / calm / mystery)
    14. Media queries

   Each selector has one rule per context (top level or one media query). Where two rules of equal
   specificity can hit the same element, the later one in this file is the one that must win. */

/* ═════ 1. Tokens and themes ═════ */
/* Fredoka (SIL Open Font License, see fonts/OFL.txt), bundled so the game needs nothing from other sites */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Storybook diorama: chunky, rounded, brightly lit UI pieces to match the low-poly 3D realm. */
:root {
  --ink: #3b2a1e;
  --ink-dim: #7a6450;
  --panel: rgba(28, 20, 14, 0.72);
  --panel-solid: #241a12;
  --edge: rgba(214, 178, 110, 0.35);
  --gold: #e0a020;
  --up: #3f9b3a;
  --down: #d2463a;
  /* the same colours as text on cream and white, dark enough to read (4.5:1 or more) */
  --up-ink: #2e7d32;
  --down-ink: #b3261e;
  --gold-ink: #8a5d00;
  --card-w: min(250px, 64vw);
  --tx: 15px;          /* card text size for this screen (media queries change it) */
  --tx-big: 1;         /* the large-text setting's factor */
  --cream: #fbf3e2;
  --cream-2: #f1e3c6;
  --lip: #c9ae80;
  --lip-dark: #8f764e;
  --church: #8a5fb0;
  --people: #4f9a32;
  --army: #c9452f;
  --treasury: #d99a12;
  /* the brown wood chip: menu, spyglass and close buttons, the story ribbon, ribbons, the nameplate, the coach */
  --wood-bg: linear-gradient(#8a5a32, #6d4424);
  --wood-flat: #6d4424;
  --wood-lip: #4a2c16;
}
/* pillar colour: one variable, --col, set by each per-use class (data-k, ln-, el-, lg-, db-, c-), so every pillar-coloured
   rule reads var(--col) */
.stat[data-k="c"], .goal.heirloom[data-k="c"], .ln-c, .el-c, .lg-c, .db-c, .c-c { --col: var(--church); }
.stat[data-k="p"], .goal.heirloom[data-k="p"], .ln-p, .el-p, .lg-p, .db-p, .c-p { --col: var(--people); }
.stat[data-k="a"], .goal.heirloom[data-k="a"], .ln-a, .el-a, .lg-a, .db-a, .c-a { --col: var(--army); }
.stat[data-k="m"], .goal.heirloom[data-k="m"], .ln-m, .el-m, .lg-m, .db-m, .c-m { --col: var(--treasury); }
.lg-x, .db-x { --col: #888; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #3d5a2a;
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--gold, #e0a020); outline-offset: 2px; }
.quiet-focus:focus-visible { outline: none; }
/* on the cream panels and chips the gold ring is too faint (2:1): there it is dark ink, gold stays for the realm */
.panel :focus-visible, footer :focus-visible, #goals :focus-visible, #endScreen :focus-visible, .coach :focus-visible { outline-color: var(--ink); }
/* 3D interface icons */
.ui-ic { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.3em; }
@keyframes pulse {
  50% { opacity: 0.55; }
}
@keyframes fade {
  from { opacity: 0; }
}

/* ═════ 2. Layout ═════ */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: filter 1.2s ease;
}
#app {
  position: relative;
  height: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  transition: opacity 0.45s ease, filter 1.2s ease;
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
}
.table { position: relative; width: var(--card-w); }

/* ═════ 3. Header and pillars ═════ */
/* a narrower pillar panel; a raised cream tile with a solid lip underneath */
#stats {
  display: flex;
  justify-content: space-around;
  position: relative;
  width: min(100%, 360px);
  padding: 14px 10px 10px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(var(--cream), var(--cream-2));
  color: var(--ink);
  border: 3px solid #fffaf0;
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--lip), 0 7px 0 var(--lip-dark), 0 14px 24px rgba(20, 30, 10, 0.35);
  cursor: pointer;
}
#stats:hover { filter: brightness(1.03); }
.stat {
  position: relative;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat svg { width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18)); }
/* pillar gauges with a clear outline for the empty part */
.stat .fg { fill: var(--col); transition: clip-path 1.1s cubic-bezier(.4,0,.2,1), fill 0.6s ease; stroke: var(--col); stroke-width: 1.2px; }
.stat.danger .fg { fill: var(--down); animation: pulse 1s ease-in-out infinite; }
.stat.flash-up .fg { fill: var(--up); }
.stat.flash-down .fg { fill: var(--down); }
/* a pillar in danger also gets a shape, not just a colour */
.stat.danger::after {
  content: '!';
  position: absolute;
  top: -4px;
  right: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  font: 700 11px/1 sans-serif;
  color: #fff;
  background: var(--down);
  border-radius: 50%;
}
/* each pillar gets a small gauge bar beneath its icon */
.stat .sbar {
  display: block;
  width: 38px;
  height: 7px;
  margin-top: 5px;
  border-radius: 3px;
  background: #b7a88e;   /* the empty part, 3:1 against the panel */
  box-shadow: inset 0 0 0 1px rgba(59, 42, 30, 0.55);
  overflow: hidden;
}
.stat .sbar > i {
  display: block;
  height: 100%;
  width: 50%;
  background: var(--col, var(--ink));
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 30, 0.6);   /* the fill's edge reads even where its colour is pale (Guilds, Commons) */
  transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}
.stat.danger .sbar > i { background: var(--down); }
/* preview dots: size shows how much a pillar would move */
.stat .dot {
  margin-top: 5px;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--col);
  transition: width 0.15s, height 0.15s;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.stat .dot.small { width: 7px; height: 7px; }
.stat .dot.big { width: 13px; height: 13px; }
.stat .dot.fatal {
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2.5px solid var(--down);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 25%, transparent);
  animation: pulse 0.6s ease-in-out infinite;
}
/* preview direction: a small arrow inside each dot (hidden with "mystery previews") */
.stat .dot.up, .stat .dot.down { display: grid; place-items: center; color: #fff; font-size: 9px; line-height: 1; font-weight: 700; }
.stat .dot.small.up, .stat .dot.small.down { width: 13px; height: 13px; }
/* big moves read as double arrows, so small and big differ at a glance */
.stat .dot.big.up, .stat .dot.big.down { width: 19px; height: 19px; font-size: 12px; }
.stat .dot.up::after { content: '▲'; }
.stat .dot.down::after { content: '▼'; }
.stat .dot.fatal.up::after, .stat .dot.fatal.down::after { color: var(--down); font-size: 9px; }
/* an heirloom would catch this fall: a gold ring instead of the red fatal pulse */
.stat .dot.saved { width: 15px; height: 15px; background: transparent; border: 2.5px solid #d99a12; box-shadow: 0 0 0 3px rgba(217, 154, 18, 0.25); color: var(--gold-ink); }
.stat .dot.big.up::after { content: '▲▲'; letter-spacing: -3px; font-size: 9px; }
.stat .dot.big.down::after { content: '▼▼'; letter-spacing: -3px; font-size: 9px; }
/* a huge move (over 16) is bigger again, with a dark rim */
.stat .dot.huge { width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 rgba(0, 0, 0, 0.2); }
.stat .dot.huge.up, .stat .dot.huge.down { width: 23px; height: 23px; font-size: 9px; }
.stat .dot.huge.up::after { content: '▲▲▲'; letter-spacing: -3px; }
.stat .dot.huge.down::after { content: '▼▼▼'; letter-spacing: -3px; }
/* an end that is no pillar's (a duel, the Fae): every dot a filled red ring with a skull */
.stat .dot.fatal.end { display: grid; place-items: center; background: var(--down); border-color: #fff; box-shadow: 0 0 0 2px var(--down); }
.stat .dot.fatal.end::after { content: '☠'; color: #fff; font: 700 10px/1 sans-serif; }
.stakes-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 9px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--down-ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}
.stakes-badge.grace { background: var(--up-ink); }
/* the first reign's opening lessons: the goals and the stakes wait until they are done (D13) */
body.staged #goals, body.staged .stakes-badge { visibility: hidden; }
/* the council button lies over the whole pillar panel: a tap anywhere opens the council, Tab and Enter reach it */
.council-btn { position: absolute; inset: -3px; z-index: 1; padding: 0; border: none; border-radius: 18px; background: none; cursor: pointer; }
#stats .stakes-badge { z-index: 2; pointer-events: none; }
/* goals: a single row of chunky chips; two goals share the row evenly, heirlooms are just their icon */
#goals {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin: -1px 0 -9px;
  padding: 9px 0;   /* room for the swap button's 44 px reach, inside the clip */
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}
#goals:empty { display: none; }
#goals.expanded { flex-wrap: wrap; }
.goal {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 12.5px;
  line-height: 1.2;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  box-shadow: 0 3px 0 var(--lip), 0 6px 10px rgba(20, 30, 10, 0.25);
}
.goal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal b { font-variant-numeric: tabular-nums; color: #7a5200; font-weight: 700; white-space: nowrap; }
.goal.soon b { color: var(--down-ink); }
.goal .g-state { color: var(--ink-dim); font-weight: 700; }
.goal.done span { text-decoration: line-through; }
.goal.failed { color: var(--ink-dim); background: #efe6d4; }
.goal.failed span { text-decoration: line-through; }
.goal.failed .g-ic { opacity: 0.6; }
.goal .g-ic { flex: none; width: 17px; height: 17px; font-size: 15px; vertical-align: middle; }
/* comfortable targets for the small controls: the swap reaches 44 px around its small ring, without making the pill taller */
.goal .reroll {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px -4px;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.goal .reroll > span { display: grid; place-items: center; width: 24px; height: 22px; border: 1px solid currentColor; border-radius: 999px; opacity: 0.75; }
.goal .reroll:hover > span { opacity: 1; }
/* a heirloom that cannot save this reign (the reign's one rescue is spent): greyed until the next ruler */
#goals .goal.heirloom.asleep { opacity: 0.45; filter: grayscale(1); }
.goal.done { background: #e4f4d8; }
#goals .goal { flex: 0 1 auto; min-width: 0; }
#goals .goal.heirloom { flex: none; }
#goals .goal:not(.heirloom) { flex: 0 1 50%; }
#goals .goal.heirloom > span:not(.sr-only) { display: none; }
#goals.expanded .goal.heirloom > span:not(.sr-only) { display: inline; }
/* heirlooms stay icon-only whatever the screen (named in their tooltip and in the council) */
#goals:not(.expanded) .goal.heirloom > span:not(.g-ic):not(.sr-only) { display: none; }
/* each heirloom chip in its pillar's colour (data-k on the chip sets --col) */
.goal.heirloom:where([data-k]) {
  background: color-mix(in srgb, var(--col) 22%, var(--cream));
  box-shadow: inset 0 0 0 2px var(--col), 0 3px 0 color-mix(in srgb, var(--col) 70%, #000), 0 6px 10px rgba(20, 30, 10, 0.25);
}

/* ═════ 4. Card ═════ */
#deck { position: relative; width: var(--card-w); aspect-ratio: 1 / 1.42; }
/* the card back matches the card front: warm tile, castle crest */
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: url(../img/icons/castle-back.webp) center 46% / 46% no-repeat,
  radial-gradient(circle at 50% 46%, rgba(255, 240, 200, 0.5), transparent 48%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px),
  linear-gradient(#a8743e, #7c5128);
  border: 4px solid #fffaf0;
  box-shadow: 0 8px 0 var(--wood-lip), 0 18px 30px rgba(20, 30, 10, 0.45);
  transform: translateY(6px) scale(0.97);
}
#card { position: absolute; inset: 0; z-index: 1; border-radius: 24px; cursor: grab; touch-action: none; outline: none; will-change: transform; }
#card.dragging { cursor: grabbing; }
#card.fly { transition: transform 0.42s cubic-bezier(.55,.06,.68,.19), opacity 0.42s ease-in; }
#card.settle { transition: transform 0.4s cubic-bezier(.25,1.3,.5,1); }
#card.nudge { animation: nudge 2.8s ease-in-out 1.2s infinite; }
@keyframes nudge {
  0%, 58%, 100% { transform: none; }
  68% { transform: translateX(-22px) rotate(-5deg); }
  80% { transform: translateX(18px) rotate(4deg); }
  90% { transform: translateX(-4px) rotate(-1deg); }
}
/* the card face: a thick glossy tile */
.card-inner {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.35), transparent 60%),
  linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.12)),
  var(--bg, #6b5b95);
  border: 5px solid #fffaf0;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.14),
  inset 0 6px 0 rgba(255, 255, 255, 0.25),
  0 8px 0 color-mix(in srgb, var(--bg, #6b5b95) 60%, #000),
  0 18px 30px rgba(20, 30, 10, 0.45);
  backface-visibility: hidden;
}
.card-inner.enter { animation: flipIn 0.6s cubic-bezier(.22,.8,.3,1); }
@keyframes flipIn {
  from { transform: perspective(900px) translateY(10px) scale(0.96) rotateY(-70deg); opacity: 0; filter: brightness(0.5); }
  60% { opacity: 1; }
  to { transform: perspective(900px) translateY(0) scale(1) rotateY(0); opacity: 1; filter: none; }
}
#card:focus-visible:not(.quiet-focus) .card-inner { box-shadow: 0 0 0 4px var(--gold), 0 18px 30px rgba(20, 30, 10, 0.45); }
/* touch: past this point letting go answers — the card glows to say so */
/* not gold, so it never looks like a story card's frame: a white rim, a green bloom and a small swell */
#card.will-commit .card-inner, #card.will-commit:focus-visible .card-inner { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--up), 0 0 26px 6px rgba(120, 220, 110, 0.85); transform: scale(1.03); transition: transform 0.12s, box-shadow 0.12s; }
.card-inner.crisis {
  border-color: #ffd9cf;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.14), inset 0 6px 0 rgba(255, 255, 255, 0.25), 0 0 0 4px #c9452f, 0 8px 0 #8a2a1c, 0 18px 30px rgba(120, 20, 10, 0.5);
}
/* the question lives on the card at every size. One grid column: the speech (.say) and any stage direction
   (.stage) stack as full-width lines, centred as a group; `safe` keeps the first line in the box if it ever fills.
   Font size = the screen's base size (--tx) × the large-text factor (--tx-big) × the length step (--tx-fit). */
.card-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: safe center;
  justify-items: stretch;
  row-gap: 0.3em;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: manual;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(47% - 10px);
  margin: 10px 10px 0;
  padding: 10px 12px;
  text-align: center;
  font-size: calc(var(--tx) * var(--tx-big) * var(--tx-fit, 1));
  line-height: 1.3;
  z-index: 1;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--cream);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--lip);
}
.card-inner.crisis .card-text { padding-top: 30px; }
/* card text markup (contract 1): <span class="stage"> is its own italic line; <span class="say"> is the speech */
.card-text .say { display: block; }
.card-text .stage {
  display: block;
  font-style: italic;
  font-size: 0.92em;
  line-height: 1.25;
  opacity: 0.8;
}
/* long cards (contract 2): the text box grows into the portrait's space, the portrait moves down and shrinks,
   and the type steps down a little. The answer bubble still has the bottom of the card to itself. */
.card-text.long { --tx-fit: 0.96; height: calc(54% - 10px); }
.card-text.xlong { --tx-fit: 0.92; height: calc(58% - 10px); }
.card-text.long ~ .portrait { top: 51%; }
.card-text.xlong ~ .portrait { top: 55%; }
/* portraits: Fluent 3D renders standing on the tile, with a soft shadow at their feet */
.portrait {
  position: absolute;
  inset: 0;
  top: 44%;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-w) * 0.36);
  line-height: 1;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.16));
  pointer-events: none;
}
.portrait .pic {
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform: translateY(-4%);
  width: 52%;
  height: 52%;
}
.portrait:has(.pic) { filter: none; }
.portrait:has(.pic)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 79%;
  width: 46%;
  height: 9%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 70%);
}
/* story ribbon: a chunky banner above the card */
.thread {
  margin: -4px 0 -6px;
  padding: 3px 12px;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* a long chain wraps to a second line, so the saga part is never cut */
  border-radius: 14px;
  color: #fffaf0;
  background: #6e4626;
  box-shadow: 0 3px 0 var(--wood-lip);
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
}
.thread b { font-weight: 700; color: #ffe9b0; }
.thread b.scorned { color: var(--down); }
.thread b.devoted { color: var(--up); }
/* small labelled ribbons (a crisis, a saga part…); on the card face they sit at the top edge, above the text box */
.ribbon {
  display: inline-block;
  padding: 2px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fffaf0;
  background: var(--wood-bg);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--wood-lip);
}
.ribbon.crisis { color: #fff; background: linear-gradient(#e0604f, #c9452f); box-shadow: 0 3px 0 #8a2a1c; }
.card-inner > .ribbon { position: absolute; left: 50%; top: 6px; z-index: 3; transform: translateX(-50%); }
html.big-text .ribbon { font-size: 12px; }
/* the commit line: a faint tick shows where letting go will answer; it brightens once the card is past it.
   It sits on the deck, --commit from the side the card is dragged toward (the engine may set left/right inline). */
.commit-tick {
  --commit: 40%;
  position: absolute;
  top: -16px;
  bottom: -16px;
  z-index: 0;   /* behind the card: only the ends above and below it show, never a line across the text */
  width: 0;
  border-left: 3px dashed rgba(255, 250, 240, 0.85);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s;
  pointer-events: none;
}
.commit-tick.right { left: var(--commit); }
.commit-tick.left { right: var(--commit); }
.commit-tick.show { opacity: 0.6; }
.commit-tick.hit { opacity: 1; border-left-style: solid; border-left-color: var(--gold); filter: drop-shadow(0 0 6px rgba(227, 180, 90, 0.9)); }
/* the speaker's nameplate */
#speaker {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  padding: 5px 18px 6px;
  color: #fffaf0;
  background: var(--wood-bg);
  border: 3px solid #fffaf0;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--wood-lip), 0 8px 14px rgba(0, 0, 0, 0.3);
}

/* ═════ 5. Choices and previews ═════ */
/* the answer being held pops up as a speech bubble at the bottom of the card */
.choice {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 2;
  margin: 12px;
  padding: 10px 14px;
  font-size: clamp(16px, 4.4vw, 19px);
  line-height: 1.2;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--lip), 0 8px 14px rgba(0, 0, 0, 0.25);
}
.choice.show { opacity: 1; }
.choice.left { text-align: right; }
.choice.right { text-align: left; }
.choice.fatal { color: var(--down-ink); }
/* a death that falls due later: a quieter red than "now" */
.choice.doom { color: #8e3a2e; }
.side-choice.fatal { color: var(--down-ink); }
.choice .c-ic, .side-choice .c-ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
/* the hourglass (a story begins) is big enough to notice; the same markers serve the card's answer ribbon and,
   on desktop, the side answers (span.conseq inside .opt-t; small.why.saves after it, on the previewed side) */
.choice .conseq .c-ic, .side-choice .conseq .c-ic { width: 1.45em; height: 1.45em; vertical-align: -0.35em; }
.choice .conseq, .side-choice .conseq { opacity: 0.8; white-space: nowrap; }
.choice .why, .side-choice .why { display: block; margin-top: 4px; font-size: 12.5px; font-style: italic; }
.side-choice .why { font-weight: 500; }
.choice .why.saves, .side-choice .why.saves { color: var(--gold-ink); }
/* a fatal answer has to be given twice */
.choice.confirming { animation: pulse 0.7s ease-in-out infinite; }
/* side answers: hidden on touch screens; on desktop they sit beside the card (see media queries) */
.side-choice {
  display: none;
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  background: linear-gradient(var(--cream), var(--cream-2));
  border: 3px solid #fffaf0;
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--lip), 0 7px 0 var(--lip-dark), 0 12px 20px rgba(20, 30, 10, 0.3);
}
.side-choice:active { box-shadow: 0 2px 0 var(--lip), 0 4px 10px rgba(20, 30, 10, 0.3); }
.side-choice .opt-t { display: block; }

/* ═════ 6. Footer ═════ */
footer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  text-align: center;
  background: linear-gradient(var(--cream), var(--cream-2));
  color: var(--ink);
  border: 3px solid #fffaf0;
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--lip), 0 7px 0 var(--lip-dark), 0 14px 24px rgba(20, 30, 10, 0.35);
}
.foot-btns { display: flex; gap: 6px; }
/* the game cannot save: a lasting badge on the footer's edge (it opens the settings, which say why) */
.unsaved-badge {
  position: absolute;
  top: -11px;
  left: 12px;
  z-index: 1;
  padding: 2px 9px;
  font: 700 11px/1.4 'Fredoka', sans-serif;
  color: #fff;
  background: var(--down-ink);
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.unsaved-badge[hidden] { display: none; }
.unsaved-note { display: none; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; color: #5c1a12; background: #fbe3dc; font-weight: 600; }
body.unsaved .unsaved-note { display: block; }
/* the square wood icon button (#menuBtn, #peekBtn and the panels' .close carry .icon-btn) */
.icon-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  color: #fffaf0;
  background: var(--wood-bg);
  box-shadow: 0 3px 0 var(--wood-lip);
}
.icon-btn:hover { filter: brightness(1.1); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-lip); }
#menuBtn, #peekBtn { display: grid; place-items: center; }
#peekBtn { font-size: 22px; }
#menuBtn .ui-ic, #peekBtn .ui-ic { width: 26px; height: 26px; }
/* the ruler's name and trait shrink before they collide with the year */
.ruler-box {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: left;
  min-width: 0;
}
footer > .ruler-box, .ruler-box > div { min-width: 0; }
.ruler-pic {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px var(--house, #777);
}
/* (0,2,0) and later than .portrait:has(.pic), so it wins on order alone */
.ruler-pic .portrait { position: absolute; inset: 0; font-size: 24px; filter: none; }
.ruler-pic .portrait .pic { width: 74%; height: 74%; transform: none; }
.ruler-pic .portrait::after { display: none; }
/* a house crest: a little shield in the house colour */
.crest {
  display: grid;
  place-items: center;
  width: 26px;
  height: 30px;
  font-style: normal;
  font-size: 14px;
  color: #fff;
  background: var(--house);
  border-radius: 4px 4px 13px 13px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.ruler-pic .crest {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 16px;
  height: 18px;
  display: grid;
  place-items: center;
  font: 700 10px/1 sans-serif;
  font-style: normal;
  color: #fff;
  background: var(--house, #777);
  border-radius: 3px 3px 8px 8px;
}
#ruler {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
#reign { font-size: 14px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the year as a little calendar badge */
#year {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
  flex: none;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 16px 0 5px;
  position: relative;
  background: #fffaf0;
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--lip), inset 0 0 0 2px var(--cream-2);
  overflow: hidden;
}
#year::before {
  content: 'YEAR';
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  line-height: 12px;
  color: #fff;
  background: var(--army);
}

/* ═════ 7. Overlays and panels ═════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 30, 15, 0.55);
  backdrop-filter: blur(3px);
  animation: fade 0.4s;
}
.panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  max-height: 88dvh;   /* the small-toolbar-aware height where supported */
  overflow: auto;
  padding: 24px 20px;
  text-align: center;
  background: linear-gradient(var(--cream), var(--cream-2));
  color: var(--ink);
  border: 3px solid #fffaf0;
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--lip), 0 7px 0 var(--lip-dark), 0 14px 24px rgba(20, 30, 10, 0.35);
  user-select: text;
}
.panel.wide { max-width: 440px; text-align: left; }
.panel h2 { font-family: 'Fredoka', sans-serif; margin: 6px 0 10px; color: var(--ink); text-align: center; }
/* panels with a close button keep their title clear of it */
.panel > .close ~ h2 { padding: 0 44px; }
/* the Chronicle keeps one height, so its tabs don't jump when a tab's content is short */
#menu .panel { height: min(88vh, 820px); height: min(88dvh, 820px); }
.close { position: absolute; top: 12px; right: 12px; }
.btn {
  margin-top: 16px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(#358a39, #2e7d32);   /* white on it: 4.5:1 or more (the brighter green was 2.5) */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #1f5a22, 0 8px 14px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.btn:hover { filter: brightness(1.15); }
.btn.ghost {
  background: none;
  box-shadow: none;
  border: 1.5px solid currentColor;
  color: var(--ink);
  text-shadow: none;
}
/* pressed buttons sink onto their lip (the danger button keeps its own shadow) */
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f5a22; }
.btn.danger { border-color: var(--down); background: linear-gradient(#e0604f, #c9452f); box-shadow: 0 4px 0 #8a2a1c, 0 8px 14px rgba(0, 0, 0, 0.25); }
.link {
  margin-top: 4px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-dim);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
/* a destructive button waiting for its second press; after .btn.danger and .btn.ghost, which it must beat */
.btn.armed, .link.armed { color: #fff; background: var(--down-ink); }
.tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.tab {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--lip);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
}
.tab.active { color: #fff; background: var(--treasury); border-color: var(--treasury); }
.tabpane p { line-height: 1.45; }
/* the title screen */
.overlay.title { z-index: 30; }
.title .panel { max-width: 420px; text-align: center; }
.title h1 { margin: 2px 0 0; font-size: clamp(32px, 11vw, 44px); letter-spacing: 0.06em; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--ink); }
.title-crown { font-size: 54px; line-height: 1; }
.title-sub { margin: 4px 0 12px; font-style: italic; color: var(--ink-dim); }
.title .recap {
  text-align: left;
  margin: 8px 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.08);
  font-size: 14px;
}
.title .recap h3 { margin: 0 0 6px; font-size: 14px; }
.title .recap ul { margin: 6px 0 0; padding-left: 18px; }
.title-actions { display: grid; gap: 8px; }
.title-actions .btn { margin: 0; width: 100%; }
.title-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#titleNew { padding: 8px 12px; min-height: 32px; }
.title-note { margin: 2px 0 0; font-size: 12px; color: var(--ink-dim); }

/* ═════ 8. End screen and legacy ═════ */
.crown { font-size: 46px; color: var(--gold); animation: bob 2.4s ease-in-out infinite; text-shadow: none; }
.crown .ui-ic { width: 58px; height: 58px; }
@keyframes bob {
  50% { transform: translateY(-5px); }
}
#endSub { color: var(--ink-dim); margin: 0 0 6px; }
#endCause { font-size: 19px; font-style: italic; }
/* the end of a reign: a tile showing the fallen territory, and whoever ended it */
.end-art { position: relative; margin: 12px auto 28px; width: min(320px, 100%); }
.end-scene canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 4px solid #fffaf0;
  box-shadow: 0 5px 0 var(--lip), 0 10px 18px rgba(20, 30, 10, 0.3);
}
.end-who {
  position: absolute;
  right: -12px;
  bottom: -16px;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.35), transparent 60%), var(--bg, #6b5b95);
  border: 4px solid #fffaf0;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bg, #6b5b95) 60%, #000), 0 10px 16px rgba(0, 0, 0, 0.3);
}
.end-scene.hidden + .end-who { position: relative; right: auto; bottom: auto; margin: 0 auto; }
.end-who .portrait { position: absolute; inset: 0; font-size: 40px; }
.end-who .portrait .pic { width: 74%; height: 74%; transform: none; }
.end-who .portrait::after { display: none; }
.end-stats {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.end-stats div {
  min-width: 58px;
  padding: 6px 4px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  box-shadow: 0 2px 0 var(--cream-2);
}
.end-stats b { display: block; font-size: 18px; }
.end-stats span { font-size: 11px; color: var(--ink-dim); }
.moment {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 18px 10px 10px;
  margin: 12px 0 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 0 var(--cream-2);
}
.moment .m-label {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--army);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}
.moment q { display: block; font-size: 13px; font-style: italic; color: var(--ink-dim); }
.moment b { display: block; font-size: 14px; margin-top: 3px; }
.m-ic { flex: none; width: 34px; height: 34px; font-size: 30px; }
.end-deeds details { text-align: left; margin: 8px 0; }
.end-deeds summary { cursor: pointer; font-weight: 700; }
.end-deeds ul { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 13.5px; }
.end-deeds li { padding: 3px 0; border-bottom: 1px dashed rgba(127, 127, 127, 0.3); }
.end-deeds li span { display: inline-block; min-width: 52px; color: var(--ink-dim); font-size: 12px; }
/* the reign chart: lines per pillar, markers for moments, a legend that toggles lines */
.end-chart svg { display: block; width: 100%; max-width: 320px; margin: 10px auto 2px; border-radius: 12px; background: #fffaf0; box-shadow: 0 3px 0 var(--lip); }
.end-chart .band { fill: rgba(127, 127, 127, 0.08); pointer-events: none; }
.end-chart .mid { stroke: rgba(127, 127, 127, 0.45); stroke-dasharray: 3 3; pointer-events: none; }
.end-chart .ln { fill: none; stroke: var(--col); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.end-chart .mk line { stroke: rgba(127, 127, 127, 0.35); stroke-width: 1; }
.end-chart .mk circle { fill: var(--down); }
.end-chart .mk-goal circle { fill: var(--up); }
.end-chart .mk-saga circle, .end-chart .mk-heirloom circle { fill: var(--gold, #e0a020); }
.end-chart .legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
}
.end-chart .mk { cursor: pointer; outline: none; }
.end-chart .mk.on line, .end-chart .mk:focus line { stroke: var(--ink); stroke-width: 1.5; }
.end-chart .mk.on circle, .end-chart .mk:focus circle { r: 5.5; }
.end-chart .mk .hit { fill: transparent; x: -11px; width: 22px; }
.end-chart .end-lbl { font: 700 8px sans-serif; fill: var(--col); text-anchor: end; pointer-events: none; }
.end-chart .legend button {
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-dim);
  background: none;
  border: none;
  padding: 5px 7px;
  cursor: pointer;
  min-height: 28px;
  white-space: nowrap;   /* large text wraps the legend between entries, never inside one */
}
.end-chart .legend button.off { opacity: 0.4; text-decoration: line-through; }
/* legend swatches, one rule for both charts: a line on the reign chart, a square on the dynasty chart
   (the reign chart's "tap a marker" span has no swatch) */
.end-chart .legend button::before, .dyn-chart .legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--col);
}
.dyn-chart .legend span::before { width: 8px; height: 8px; }
.end-chart svg.off-c .ln-c, .end-chart svg.off-c .el-c, .end-chart svg.off-p .ln-p, .end-chart svg.off-p .el-p, .end-chart svg.off-a .ln-a, .end-chart svg.off-a .el-a, .end-chart svg.off-m .ln-m, .end-chart svg.off-m .el-m { display: none; }
.chart-note { min-height: 1.3em; margin: 2px 0 0; font-size: 13px; font-style: italic; }
.share { padding: 10px; border-radius: 8px; background: rgba(127, 127, 127, 0.1); font-weight: 700; }
.end-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.end-actions .btn { margin-top: 12px; }
/* two pages: the reign, then the legacy */
.end-page.turn { animation: pageTurn 0.55s cubic-bezier(.2, .8, .3, 1); transform-origin: left center; }
@keyframes pageTurn {
  from { opacity: 0; transform: perspective(900px) rotateY(-28deg) translateX(20px); }
}
.end-page h2 { margin-top: 0; }
/* the legacy page */
.epitaph { margin: 2px 6px 10px; font-size: 14.5px; font-style: italic; line-height: 1.4; color: var(--ink-dim); }
.lg-sec { text-align: left; }
.lg-sec:empty { display: none; }
.lg-sec h4, .end-bequest h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 15px; }
.end-bequest h4 small { font-weight: 400; color: var(--ink-dim); }
.lg-sec h4 small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--ink-dim); }
.lg-ic { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; }
.lg-ic svg { width: 100%; height: 100%; }
.lg-ic path { fill: var(--col); }
/* legacy sections that fold on a phone */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h4::after { content: '▾'; content: '▾' / ''; margin-left: 6px; opacity: 0.6; }
details.fold:not([open]) > summary h4::after { content: '▸'; content: '▸' / ''; }
.funeral { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.funeral li { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 var(--cream-2); font-size: 13.5px; }
.funeral li span { flex: 1; }
.funeral li b { font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.funeral li.fell { background: #fbe3dc; box-shadow: 0 2px 0 #eebfb2; }
.funeral li.fell b { color: var(--down); }
.heir { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--lip); }
.heir-pic { flex: none; width: 54px; height: 54px; font-size: 46px; line-height: 54px; text-align: center; }
.heir.none .heir-pic { filter: grayscale(1); opacity: 0.55; }
.heir b { display: block; font-size: 16px; }
.heir .trait { display: inline-block; margin: 3px 0 2px; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--cream-2); }
.heir p { margin: 4px 0 0; font-size: 13px; color: var(--ink-dim); }
.vault { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; text-align: center; border: 1.5px dashed var(--lip); opacity: 0.75; }
.slot .lg-ic { width: 26px; height: 26px; }
.slot:not(.has) .lg-ic { filter: grayscale(1); opacity: 0.4; }
.slot b { font-size: 12px; line-height: 1.2; }
.slot span { font-size: 10.5px; color: var(--ink-dim); }
.slot:not(.has) { opacity: 1; color: var(--ink-dim); }
.slot.has { opacity: 1; border: none; background: #fff; box-shadow: 0 3px 0 var(--lip); }
.slot.fresh { box-shadow: 0 3px 0 var(--lip), 0 0 0 2px var(--gold), 0 0 16px rgba(227, 180, 90, 0.7); animation: slot-in 0.9s ease-out; }
.slot.fresh span { color: var(--gold-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
@keyframes slot-in { from { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
.end-legacy { text-align: left; }
.end-legacy p { margin: 6px 0; font-size: 14px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.55); }
/* bequests: renown spent on gifts for the next ruler */
.earned { margin: 0 0 8px; font-size: 13px; color: var(--ink-dim); }
.boons { display: grid; gap: 6px; }
.end-bequest .boons { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.boon {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: 0 3px 0 var(--lip);
}
.boon b { font-size: 13px; }
.boon span { font-size: 11.5px; color: var(--ink-dim); }
.boon em { font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--gold-ink); }
.boon[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.boon:not([aria-disabled="true"]):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip); }
.boon-ic { width: 24px; height: 24px; font-size: 20px; }
.boon.on { box-shadow: 0 3px 0 #a07010, 0 0 0 2px var(--gold); background: #fff8e6; }
.boon.on em { color: var(--people); }
.smith {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
}
.smith button {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  cursor: pointer;
}
.smith.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.smith.picks button { border-radius: 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.smith.picks small { font-size: 11px; opacity: 0.8; }
/* the line of rulers */
.line { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding: 2px 2px 6px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.line li { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 8px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 var(--cream-2); }
.line li + li::before { content: ''; position: absolute; left: -15px; top: 50%; width: 15px; height: 3px; background: var(--house); }
.line li b { font-size: 12.5px; white-space: nowrap; }
.line li span { font-size: 10.5px; color: var(--ink-dim); }
.line li.now { color: #fff; background: var(--house); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.line li.now span { color: rgba(255, 255, 255, 0.85); }
.line li.next, .line li.more { background: none; box-shadow: none; border: 1.5px dashed var(--house); }
.line li.end { border-color: var(--lip); }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); }
.ledger div { min-width: 0; }
.ledger b { font-size: 16px; }
/* the reign's stat tiles: five across, never one orphan on its own row */
#endStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 6px;
}
#endStats div { min-width: 0; }
/* the Smith: a chosen heirloom is marked (tap to undo), and "earned" and "forged" read differently */
.smith .chosen { color: #fff; background: var(--treasury); border-color: var(--treasury); box-shadow: 0 2px 0 #a07010; }
.smith .earned { font-style: normal; font-weight: 700; color: var(--up-ink); }
.smith .forged { font-style: normal; font-weight: 700; color: var(--gold-ink); }
/* the tutor's and smith's pickers open below the bequests; leave room for the sticky button bar when scrolled to */
#smithPick, #tutorPick { scroll-margin-bottom: 140px; scroll-margin-top: 16px; }
/* prices stay readable on a disabled bequest (after .boon.on em, which it must beat) */
.boon[aria-disabled="true"] em { color: var(--ink-dim); }
/* a picker opens right under its boon, across the whole grid */
.boons > .smith { grid-column: 1 / -1; margin: 0; }
.smith button[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.smith button small { font-size: 11px; color: var(--ink-dim); }
/* achievements on the legacy page fold into one line, "Achievements (n)" */
.legacy-achievements { text-align: left; }
.legacy-achievements details { margin: 16px 0 6px; }
.legacy-achievements summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
.legacy-achievements summary::-webkit-details-marker { display: none; }
.legacy-achievements summary::after { content: '▸'; content: '▸' / ''; opacity: 0.6; }
.legacy-achievements details[open] > summary::after { content: '▾'; content: '▾' / ''; }
.legacy-achievements summary h4 { margin: 0; font-size: inherit; }
.legacy-achievements details > :not(summary) { margin-top: 8px; }

/* ═════ 9. Chronicle ═════ */
/* achievements: locked ones stay legible; only the icon greys out */
.ach {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 0 var(--cream-2);
}
.ach b { font-family: 'Fredoka', sans-serif; font-size: 14px; display: block; }
.ach span { font-size: 14px; color: var(--ink-dim); }
.ach-count { text-align: center; color: var(--ink-dim); margin-bottom: 10px; }
#endAch .ach { text-align: left; }
.ach.locked b { color: var(--ink-dim); }
.ach .ic { font-size: 20px; width: 34px; text-align: center; display: grid; place-items: center; }
.ach .ic .ui-ic { width: 30px; height: 30px; }
.ach.locked .ic { filter: grayscale(1); opacity: 0.45; }
/* tales */
#tab-tales h3 { margin: 14px 0 8px; font-size: 15px; }
#tab-tales h3 small { font-weight: 400; color: var(--ink-dim); }
.whispers { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; background: #fff; box-shadow: 0 2px 0 var(--cream-2); }
.whispers .g-ic { width: 18px; height: 18px; vertical-align: -0.25em; }
.tale {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 0 var(--cream-2);
}
.tale[role="button"] { cursor: pointer; }
.tale > div:last-child { flex: 1; min-width: 0; }
.tale .ic { width: 34px; display: grid; place-items: center; font-size: 26px; }
.tale .ic img { width: 30px; height: 30px; }
.tale b { display: block; font-size: 14px; }
.tale span { font-size: 13px; color: var(--ink-dim); }
.tale.locked b { color: var(--ink-dim); }
.tale .bar {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.2);
  overflow: hidden;
}
.tale .bar i { display: block; height: 100%; background: var(--up); }
.tale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tale-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  min-width: 0;
  box-shadow: 0 2px 0 var(--cream-2);
}
.tale-chip > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tale-chip > span b, .tale-chip > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tale-chip > span b { font-size: 12.5px; font-weight: 600; }
.tale-chip > span small { font-size: 11px; color: var(--ink-dim); }
button.tale-chip {
  font: inherit;
  font-size: 12px;
  color: inherit;
  border: none;
  cursor: pointer;
  text-align: left;
}
.tale-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tale-chip img { flex: none; width: 20px; height: 20px; font-size: 18px; }
.tale-chip.locked { opacity: 0.55; }
.tale.locked .ic, .tale-chip.locked img { filter: grayscale(1); opacity: 0.5; }
.tale-detail { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 var(--cream-2); }
.tale-detail h4 { margin: 0 0 8px; }
.tale-detail h4 small { font-weight: 400; color: var(--ink-dim); }
.tale-detail ol { margin: 0; padding: 0; list-style: none; }
.tale-detail li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-top: 1px dashed rgba(127, 127, 127, 0.3);
  font-size: 13.5px;
}
.tale-detail li .m-ic { width: 24px; height: 24px; font-size: 20px; }
.tale-detail li.unseen { color: var(--ink-dim); font-style: italic; }
/* rulers: dynasty chart and family tree */
.dyn-chart h3 { margin: 4px 0 6px; font-size: 15px; }
.dyn-chart svg { display: block; width: 100%; }
.dyn-chart line { stroke: rgba(127, 127, 127, 0.5); }
.db { opacity: 0.85; fill: var(--col); }
.dyn-chart .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.house-branch { margin: 12px 0; }
.house-branch h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.house-branch h4 small { font-weight: 400; color: var(--ink-dim); margin-left: auto; }
.house-branch ol { margin: 0 0 0 12px; padding: 0 0 0 16px; list-style: none; border-left: 3px solid var(--house); }
.house-branch .node { position: relative; padding: 6px 0 8px; }
.house-branch .node::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--house);
  box-shadow: 0 0 0 3px #fbf3e2;
}
.house-branch .node b { display: block; font-size: 14px; }
.house-branch .node span { display: block; font-size: 13px; color: var(--ink-dim); }
.house-branch .node .extra { font-style: italic; }
.house-branch details { font-size: 13px; margin-top: 3px; }
.house-branch summary { cursor: pointer; color: var(--ink-dim); }
.house-branch details ul { margin: 4px 0 0; padding-left: 16px; }
/* how to play: the short reference */
dl.ref { margin: 4px 0 10px; }
dl.ref dt { margin-top: 10px; font-weight: 700; }
dl.ref dd { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.help-actions .btn { margin-top: 6px; }
.credits { font-size: 13px; color: var(--ink-dim); }
/* settings tab */
.settings { display: grid; gap: 8px; }
.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: left;
  gap: 2px 12px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: 0 3px 0 var(--lip);
}
.setting span { grid-column: 1; font-size: 12.5px; color: var(--ink-dim); }
.setting::after {
  content: 'Off';
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.2);
}
.setting.on::after { content: 'On'; color: #fff; background: var(--up); }
.setting.slider { cursor: default; }
.setting.slider::after { display: none; }
.setting.slider input {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 120px;
  accent-color: var(--up);
  height: 28px;
}
.keys { font-size: 13px; color: var(--ink-dim); }

/* ═════ 10. Council ═════ */
#council .panel { max-width: 460px; }
#councilBody h3 { margin: 16px 0 8px; font-size: 15px; }
#councilBody ul { margin: 0; padding-left: 18px; font-size: 14px; }
#councilBody .scorned { color: var(--down-ink); font-weight: 700; }
#councilBody .devoted { color: var(--up-ink); font-weight: 700; }
.c-pillar {
  display: grid;
  grid-template-columns: minmax(80px, 36%) 1fr 36px;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.c-pillar em { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-dim); margin-top: -4px; }
.c-pillar.danger em { color: var(--down-ink); font-weight: 700; }
.c-pillar span { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.c-pillar.focus[data-pillar] { margin: 0 -8px 8px; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--gold); }
.c-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.2);
  overflow: hidden;
}
.c-bar > i { display: block; height: 100%; background: var(--col); }
/* loyalty bars run from the centre line */
.c-rel { position: relative; }
.c-rel > i { position: absolute; top: 0; bottom: 0; }
.c-rel > i.neg { background: var(--down); }
.c-rel > i.pos { background: var(--up); }
.c-rel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: currentColor;
  opacity: 0.5;
}
.c-recent { grid-column: 1 / -1; margin: 0 0 2px; padding: 0; list-style: none; font-size: 12.5px; }
.c-recent li { padding: 1px 0; }
.c-recent .up { color: var(--up-ink); font-weight: 700; } .c-recent .down { color: var(--down-ink); font-weight: 700; }
/* the realm's own moves (a goal reward, upkeep, the weight of years, an heirloom) read apart from the card's answers */
.c-recent li.realm { font-style: italic; }
.c-recent li.realm b { font-weight: 700; font-style: normal; }
.c-recent li.drift b { color: #6b3f9a; }
.c-goal { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: #fff; box-shadow: 0 2px 0 var(--cream-2); }
.c-goal b { display: block; }
.c-goal span { font-size: 13px; color: var(--ink-dim); }
.c-goal em { display: block; font-size: 12.5px; margin-top: 2px; }
.c-goal.done b { text-decoration: line-through; }
.c-goal.failed { color: var(--ink-dim); background: #f6efe2; }
.c-goal .reroll {
  margin: 6px 0 0 8px;
  min-height: 44px;
  padding: 3px 14px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}
.c-note { font-size: 13.5px; color: var(--ink-dim); margin: 4px 0; }

/* ═════ 11. Coach, toasts and speech bubbles ═════ */
/* the tutorial coach: a bubble pointing at the thing being taught */
.coach {
  position: fixed;
  z-index: 25;
  width: 280px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.35;
  box-shadow: 0 4px 0 var(--wood-lip), 0 12px 26px rgba(0, 0, 0, 0.35);
  animation: coachIn 0.4s ease;
  color: #fffaf0;
  background: var(--wood-flat);
  font-family: 'Fredoka', sans-serif;
}
.coach p { margin: 0 0 8px; }
.coach button {
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  opacity: 0.8;
  padding: 0;
}
.coach::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.coach[data-dir="down"]::after { bottom: -7px; }
.coach[data-dir="up"]::after { top: -7px; }
.coach[data-dir="right"]::after { right: -7px; left: auto; top: 22px; transform: rotate(45deg); }
.coach[data-dir="none"]::after { display: none; }
@keyframes coachIn {
  from { opacity: 0; transform: translateY(6px); }
}
#coachSkip { padding: 6px 4px; min-height: 28px; }
.coach.hint #coachSkip { display: none; }
body.overlay-open .coach { display: none; }
/* toasts rise above the footer instead of covering the goals */
#toast {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 26;   /* above the coach (25), below the title (30): a warning is never hidden behind a lesson */
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 22px;   /* a pill on one line, a rounded box when it wraps */
  background: linear-gradient(var(--cream), var(--cream-2));
  border: 3px solid #fffaf0;
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-shadow: 0 5px 0 var(--lip), 0 7px 0 var(--lip-dark), 0 14px 24px rgba(20, 30, 10, 0.35);
  animation: toast var(--toast-dur, 3s) ease forwards;   /* JS may set --toast-dur inline to match its timer */
  display: flex;
  align-items: center;
  gap: 8px;
}
#toast .t-ic { flex: none; width: 24px; height: 24px; }
/* a queued toast: one that follows straight on another fades in place instead of rising again,
   and data-more="n" shows how many are still waiting */
#toast.next { animation-name: toastNext; }
#toast[data-more]::after {
  content: '+' attr(data-more);
  flex: none;
  align-self: flex-start;
  margin: -4px -8px 0 2px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--ink-dim);
  border-radius: 999px;
}
#toast[data-more="0"]::after { content: none; }
/* on the end and legacy pages the toast drops in at the top edge, off the tiles, the bequests and the sticky buttons */
#endScreen:not(.hidden) ~ #toast { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
/* toast variants: a warning, good news, a one-time explanation (longer, stays readable), and aging */
#toast.warn, #toast.alert { border-color: #ffd9cf; background: linear-gradient(#fff1ec, #fbe3dc); box-shadow: 0 5px 0 #eebfb2, 0 7px 0 #c9452f, 0 14px 24px rgba(20, 30, 10, 0.35); }
#toast.good { border-color: #e4f4d8; background: linear-gradient(#f4fbee, #e4f4d8); box-shadow: 0 5px 0 #b9dca4, 0 7px 0 var(--up), 0 14px 24px rgba(20, 30, 10, 0.35); }
#toast.age { border-color: #fff4d6; background: linear-gradient(#fff8e6, #f6e6b8); box-shadow: 0 5px 0 #e0c27a, 0 7px 0 #a07010, 0 14px 24px rgba(20, 30, 10, 0.35); }
#toast.alert { max-width: min(380px, calc(100vw - 32px)); text-align: left; border-radius: 16px; border-color: #c9452f; }
#toast.hint { --toast-dur: 5.5s; max-width: min(340px, calc(100vw - 32px)); padding: 10px 16px; font-weight: 500; text-align: left; border-radius: 16px; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  10%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
/* wide screens: the toast stands in the realm's bottom-right corner, clear of the card's nameplate (see media queries) */
@keyframes toastSide {
  0% { opacity: 0; transform: translateY(12px); }
  10%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(12px); }
}
@keyframes toastNext {
  0% { opacity: 0.4; transform: translate(-50%, 0); }
  8%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
/* speech bubbles from the realm */
.bubble {
  position: fixed;
  z-index: 14;
  max-width: 260px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--lip), 0 10px 22px rgba(0, 0, 0, 0.3);
  animation: coachIn 0.25s ease;
  pointer-events: none;
  color: var(--ink);
  background: var(--cream);
  font-family: 'Fredoka', sans-serif;
}
.bubble b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-bottom: 2px;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

/* ═════ 12. Realm ═════ */
/* a reign near its end drains the colour from the realm */
body.doom #bg { filter: saturate(0.25) brightness(0.65) contrast(1.1); }
body.doom #app { filter: saturate(0.5) brightness(0.85); }
/* peek: hide the court and look at the realm */
#peekLayer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  cursor: grab;
  touch-action: none;
}
#peekBack {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 6;
  transform: translateX(-50%);
  margin: 0;
  font-size: 15px;
}
body.peek #app { opacity: 0; pointer-events: none; }
body.peek #peekLayer, body.peek #peekBack { display: block; }

/* ═════ 13. Settings variants ═════ */
/* large text */
html.big-text { font-size: 112%; --tx-big: 1.2; }
/* the card: large text takes more of the card, and long cards (contract 2) take more still, shrinking the portrait;
   every card must fit at 390×844 (checked by baker/fit29.mjs) */
html.big-text .card-text { --tx-fit: 0.96; height: calc(57% - 10px); }
html.big-text .card-text ~ .portrait { top: 54%; }
html.big-text .card-text.long { --tx-fit: 0.88; height: calc(64% - 10px); }
html.big-text .card-text.long ~ .portrait { top: 61%; }
html.big-text .card-text.xlong { --tx-fit: 0.82; height: calc(68% - 10px); }
html.big-text .card-text.xlong ~ .portrait { top: 65%; }
html.big-text .choice { font-size: 1.12em; }
html.big-text .goal, html.big-text .thread { font-size: 14px; }
html.big-text .goal .g-ic { width: 20px; height: 20px; }
html.big-text .stakes-badge { font-size: 13px; }
html.big-text .stat .dot { scale: 1.2; }
html.big-text .choice .why, html.big-text .side-choice .why { font-size: 14px; }
/* the footer scales with the rest */
html.big-text #ruler { font-size: 17.5px; }
html.big-text #reign { font-size: 14.5px; }
html.big-text #year { font-size: 17px; }
/* large text on the end and legacy pages: one scale, so headings stay above their descriptions,
   and prices, tiles and labels grow with the body (each about 1.15× its normal size) */
html.big-text #endScreen .panel { font-size: 17px; }
html.big-text #endScreen .btn { font-size: 18px; }
html.big-text #endCause { font-size: 21px; }
html.big-text .end-stats b { font-size: 21px; }
html.big-text .end-stats span { display: block; font-size: 13px; line-height: 1.2; }
html.big-text .moment .m-label { font-size: 12.5px; }
html.big-text .moment q { font-size: 15px; }
html.big-text .moment b { font-size: 16px; }
html.big-text .end-deeds ul { font-size: 15.5px; }
html.big-text .end-deeds li span { font-size: 13.5px; }
html.big-text .end-chart .legend, html.big-text .end-chart .legend button { font-size: 13px; }
html.big-text .chart-note { font-size: 15px; }
html.big-text .epitaph { font-size: 16.5px; }
html.big-text .lg-sec h4, html.big-text .end-bequest h4, html.big-text .legacy-achievements summary { font-size: 18px; }
html.big-text .lg-sec h4 small, html.big-text .end-bequest h4 small { font-size: 14px; }
html.big-text .funeral li { font-size: 15.5px; }
html.big-text .funeral li b { font-size: 14px; }
html.big-text .heir b { font-size: 18.5px; }
html.big-text .heir .trait { font-size: 14px; }
html.big-text .heir p { font-size: 15px; }
html.big-text .slot b { font-size: 14px; }
html.big-text .slot span { font-size: 12.5px; }
html.big-text .end-legacy p { font-size: 15.5px; }
html.big-text .earned { font-size: 15px; }
html.big-text .boon b { font-size: 16px; }
html.big-text .boon span { font-size: 14px; }
html.big-text .boon em { font-size: 14.5px; }
html.big-text .smith button { font-size: 15px; }
html.big-text .smith.picks small { font-size: 13px; }
html.big-text .line li b { font-size: 14.5px; }
html.big-text .line li span { font-size: 12.5px; }
html.big-text .ledger b { font-size: 18.5px; }
html.big-text .ach b { font-size: 16.5px; }
html.big-text .ach span { font-size: 15px; }
html.big-text #toast { font-size: 16px; }
/* calm motion */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
/* the toast's animation ends invisible, so without motion it gets none at all (its timer still hides it) */
html.calm #toast { animation-name: none; }
/* high contrast */
html.contrast #stats, html.contrast footer, html.contrast .panel, html.contrast .goal, html.contrast .thread, html.contrast #speaker, html.contrast .side-choice {
  background: #fffdf6;
  color: #111;
  border: 2px solid #111;
  box-shadow: none;
  text-shadow: none;
}
html.contrast .card-text { color: #111; background: #fffdf6; }
html.contrast .goal b, html.contrast .thread b { color: #111; }
html.contrast #bg { filter: brightness(0.7) saturate(0.7); }
html.contrast .stakes-badge { background: #111; color: #fff; }
html.contrast .stakes-badge.grace { background: #1b5e20; }
html.contrast .stat .sbar { background: #8c8170; box-shadow: inset 0 0 0 1.5px #111; }
html.contrast .stat .sbar > i { box-shadow: inset 0 0 0 1.5px #111; }
html.contrast :focus-visible { outline: 3px solid #111; box-shadow: 0 0 0 6px #fff; }
html.contrast .goal.failed, html.contrast .c-goal.failed { color: #333; }
/* mystery previews: dots show how much, not which way */
html.mystery .stat .dot.up::after, html.mystery .stat .dot.down::after { content: none; }
html.mystery .stat .dot.small.up, html.mystery .stat .dot.small.down { width: 7px; height: 7px; }
html.mystery .stat .dot.big.up, html.mystery .stat .dot.big.down { width: 13px; height: 13px; }

/* ═════ 14. Media queries ═════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .slot.fresh { animation: none; }
  #toast, #toast.next { animation-name: none; }
}
/* desktop: the answers sit right against the card, with a pointer toward it;
   the spyglass is for phones, since on a computer the realm is zoomed and dragged directly */
@media (min-width: 760px) and (hover: hover) {
  .side-choice {
    display: block; position: absolute; top: 50%; width: 180px; transform: translateY(-50%);
    padding: 12px 14px; font-size: 16px; line-height: 1.25; cursor: pointer;
    transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1), opacity 0.2s;
  }
  .side-choice[hidden] { display: none; }
  .side-choice.left { right: calc(100% + 16px); text-align: right; }
  .side-choice.right { left: calc(100% + 16px); text-align: left; }
  .side-choice.left:hover { transform: translate(-4px, -50%); }
  .side-choice.right:hover { transform: translate(4px, -50%); }
  .side-choice::after { content: ''; position: absolute; top: 50%; width: 12px; height: 12px; background: inherit; border: inherit; transform: translateY(-50%) rotate(45deg); }
  .side-choice.left::after { right: -7px; border-left: none; border-bottom: none; }
  .side-choice.right::after { left: -7px; border-right: none; border-top: none; }
  #peekBtn { display: none; }
  /* the answers sit beside the card, so the card's own answer ribbon only appears to warn of a fatal choice */
  .choice:not(.fatal) { display: none; }
}
@media (max-width: 520px) and (max-height: 700px) {
  :root { --card-w: min(210px, 58vw); --tx: 13.5px; }
  /* a small card: the text takes a larger share of it */
  .card-inner.crisis .card-text { padding-top: 26px; }
  .card-text { height: calc(51% - 10px); }
  .card-text ~ .portrait { top: 48%; }
  .card-text.long { height: calc(58% - 10px); }
  .card-text.long ~ .portrait { top: 55%; }
  .card-text.xlong { height: calc(63% - 10px); }
  .card-text.xlong ~ .portrait { top: 60%; }
  html.big-text .card-text { height: calc(61% - 10px); }
  html.big-text .card-text ~ .portrait { top: 58%; }
  html.big-text .card-text.long { height: calc(69% - 10px); }
  html.big-text .card-text.long ~ .portrait { top: 66%; }
  html.big-text .card-text.xlong { height: calc(73% - 10px); }
  html.big-text .card-text.xlong ~ .portrait { top: 70%; }
}
/* phones: goals collapse to icon chips with their progress (tap the row to read them),
   and the legacy page's buttons stick to the bottom of the panel */
@media (max-width: 520px) {
  #goals { cursor: pointer; }
  .goal { padding: 3px 9px; }
  .thread { font-size: 11.5px; }
  #goals:not(.expanded) .goal .reroll { display: none; }
  #goals .goal > span:not(.sr-only) { display: none; }
  #goals .goal:not(.heirloom) { flex: 0 0 auto; }
  #goals.expanded .goal > span:not(.sr-only) { display: inline; white-space: normal; }
  #goals.expanded .goal:not(.heirloom) { flex: 1 1 100%; }
  .stat .dot.small.up, .stat .dot.small.down { width: 12px; height: 12px; }
  .stat .dot.big.up, .stat .dot.big.down { width: 22px; height: 22px; }
  /* the legacy page keeps "Crown the heir" in reach, in a bar stuck to the bottom of the panel */
  /* the bar takes the panel's bottom padding, so it sits flush with the panel's edge (sticky stops at the padding) */
  #endScreen .panel:has(> .end-page[data-page="2"]:not(.hidden)) { padding-bottom: 0; }
  .end-page[data-page="2"] > .end-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin: 14px -20px 0;
    padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(241, 227, 198, 0), var(--cream-2) 12px);
  }
  .end-page[data-page="2"] > .end-actions .btn { margin: 0; }
  .end-page[data-page="2"] > .end-actions #nextKing { grid-column: 1 / -1; order: -1; }
  .end-page[data-page="2"] > .end-actions .btn.ghost { padding: 7px 8px; font-size: 14px; }
  html.big-text .end-page[data-page="2"] > .end-actions .btn.ghost { font-size: 15px; }
}
@media (max-width: 420px) {
  footer { gap: 6px; padding-left: 8px; padding-right: 8px; }
  #year::before { content: none; }
  #ruler { font-size: 14.5px; }
  #reign { font-size: 12.5px; }
  .ruler-pic { width: 34px; height: 34px; }
  .vault { grid-template-columns: repeat(2, 1fr); }
  .end-bequest .boons { grid-template-columns: 1fr 1fr; }
}
/* larger screens: a bigger card, and goals wrap onto two lines rather than losing their meaning to an ellipsis */
@media (min-width: 521px) {
  :root { --card-w: min(290px, 60vw); --tx: 17px; }
  #goals { max-width: min(560px, 100%); margin-left: auto; margin-right: auto; }
  #goals .goal > span:not(.g-ic):not(.sr-only) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
  #goals .goal { border-radius: 14px; }
}
@media (min-width: 1100px) and (hover: hover) {
  #toast { left: auto; right: 24px; bottom: 28px; transform: none; max-width: 340px; animation-name: toastSide; }
  #toast.next { animation-name: toastSide; }
  #endScreen:not(.hidden) ~ #toast { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 1100px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  #toast, #toast.next { animation-name: none; }
}
@media (min-width: 521px) and (max-height: 760px) {
  :root { --card-w: min(250px, 60vw); --tx: 15.5px; }
}
@media (min-width: 521px) and (max-height: 640px) {
  :root { --card-w: min(212px, 56vw); --tx: 14px; }
}
/* short landscape screens (phones on their side): a smaller card and a tighter frame so nothing overlaps;
   goals live in the council (tap the pillars) so the card has room */
@media (max-height: 480px) {
  :root { --card-w: min(170px, calc((100vh - 176px) / 1.42 + 20px)); --tx: 12.5px; }
  #stats { padding: 6px 10px 4px; margin-top: 6px; }
  .stat svg { width: 28px; height: 28px; }
  .stat .sbar { margin-top: 3px; }
  #goals { display: none; }
  main { gap: 6px; }
  .thread { display: none; }
  #speaker { padding: 2px 12px 3px; font-size: 14px; }
  footer { margin-bottom: 6px; padding-top: 5px; padding-bottom: 5px; }
  .ruler-pic { width: 30px; height: 30px; }
  html.big-text { --tx-big: 1.08; }
  .card-text { padding: 8px 10px; height: calc(66% - 10px); }
  .card-inner.crisis .card-text { padding-top: 24px; }
  .card-text ~ .portrait { top: 63%; }
  .card-text.long, .card-text.xlong, html.big-text .card-text { height: calc(76% - 10px); }
  .card-text.long ~ .portrait, .card-text.xlong ~ .portrait, html.big-text .card-text ~ .portrait { top: 73%; }
  html.big-text .card-text.long, html.big-text .card-text.xlong { height: calc(82% - 10px); }
  html.big-text .card-text.long ~ .portrait, html.big-text .card-text.xlong ~ .portrait { top: 79%; }
  #toast { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
/* the same card size against the visible height; a custom property has no per-line fallback, hence @supports */
@supports (height: 100dvh) {
  @media (max-height: 480px) {
    :root { --card-w: min(170px, calc((100dvh - 176px) / 1.42 + 20px)); }
  }
}

/* v30 UI additions */
/* the end screen focuses its page heading (tabindex="-1") so Enter can't press a button that crowns; no ring on it */
#endTitle:focus, #legacyTitle:focus { outline: none; }

/* the stand-in for inert where the browser lacks it (ui/kit.js setInert): a covered court takes no clicks either */
[data-inert] { pointer-events: none; }