/* Rogo — night-ink room, kaya board, slate & shell stones.
   Layout: one screen; the board is the hero, everything else orbits it.
   Single deliberate dark look (the game's world), all colours explicit. */
:root {
  color-scheme: dark;
  --ink: #141c2e;          /* room / page */
  --ink-2: #1c2740;        /* panels */
  --ink-3: #26334f;        /* raised controls */
  --line: #34446a;         /* hairlines on ink */
  --paper: #ece4d2;        /* text on ink */
  --paper-dim: #a9b0c2;    /* secondary text */
  --kaya: #dcae68;         /* board wood, also "points" */
  --kaya-deep: #b9853f;
  --grid: #5a3b1d;         /* board lines */
  --jade: #4fb58d;         /* multiplier, good */
  --jade-deep: #2d7d5f;
  --cinnabar: #e2593d;     /* White's intent, danger */
  --gold: #f2c35b;         /* gold currency */
  --slate: #17181c;
  --shell: #f4f0e6;

  --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --f-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.4rem;
  --step-3: 2rem;
  --step-4: 3rem;
  --step-5: 4.75rem;
  --r-sm: 6px;
  --r-md: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  background-image: radial-gradient(120% 80% at 50% 0%, #1f2a46 0%, var(--ink) 60%);
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

#app { height: 100%; padding-inline: 16px; padding-block: 12px; }
.screen { height: 100%; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--ink-3);
  color: var(--paper); padding: 0.55em 1.1em; border-radius: var(--r-sm);
  cursor: pointer; font-weight: 500; transition: background 0.15s, border-color 0.15s, transform 0.08s;
  display: inline-flex; align-items: center; gap: 0.5em; justify-content: center;
}
.btn:hover:not(:disabled) { background: #2f3e60; border-color: #4a5c88; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary { background: var(--kaya); color: #2a1a08; border-color: var(--kaya-deep); font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: #e8bd79; border-color: var(--kaya-deep); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--paper-dim); }
.btn.quiet:hover:not(:disabled) { color: var(--paper); background: var(--ink-3); }
.btn.big { font-size: var(--step-1); padding: 0.7em 1.6em; }
.btn .key { font-size: 0.72em; color: var(--paper-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.35em; }
.btn.primary .key { color: #5a3d16; border-color: #b98a48; }

/* ---------- title ---------- */
.title-screen { display: grid; place-items: center; overflow-y: auto; }
.title-inner { width: min(560px, 100%); display: grid; gap: 28px; justify-items: center; text-align: center; padding-block: 24px; }
#title-board { width: min(320px, 70vw); aspect-ratio: 1; max-width: 100%; }
.wordmark { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.5rem, 14vw, 6.5rem); letter-spacing: 0.02em; line-height: 1; }
.wordmark small { display: block; font-family: var(--f-ui); font-weight: 400; font-size: var(--step-0); letter-spacing: 0.02em; color: var(--paper-dim); margin-top: 10px; }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.title-meta { color: var(--paper-dim); font-size: var(--step--1); }

/* ---------- starting kit (round 1 intro): one row of stones ---------- */
.kit { display: grid; gap: 8px; }
.kit-row { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: start; justify-content: center; }
.kit-stone { display: grid; justify-items: center; gap: 2px; width: 44px; }
.kit-stone span { font-size: 0.7rem; color: var(--paper); font-weight: 700; line-height: 1.1; text-align: center; }
.kit .sub { text-align: center; font-size: var(--step--1); }
.pool-line { font-size: var(--step--1); }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; color: var(--kaya); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.linkbtn:hover { color: #e8bd79; }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.retry-note { border-left: 3px solid var(--kaya-deep); padding-left: 10px; font-size: var(--step--1); }
.retry-note b { color: var(--paper); }

/* ---------- game layout ---------- */
.game {
  display: grid; height: 100%; gap: 12px;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "hud hud" "board side";
  max-width: 1180px; margin-inline: auto;
}
.hud { grid-area: hud; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.board-col { grid-area: board; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; min-height: 0; min-width: 0; }
.side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-bottom: 8px; }

.round-label h1 { font-size: var(--step-2); }
.round-label p { color: var(--paper-dim); font-size: var(--step--1); }
.boss-tag { color: var(--cinnabar); }

.scorebar { display: grid; gap: 4px; min-width: 0; }
.scorebar .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.scorebar .score { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; color: var(--kaya); }
.scorebar .target { color: var(--paper-dim); font-size: var(--step--1); }
.bar { position: relative; height: 10px; background: var(--ink-3); border-radius: 99px; overflow: hidden; }
.bar > i.banked { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--kaya-deep), var(--kaya)); border-radius: 99px; transition: width 0.6s cubic-bezier(.2,.8,.2,1); }
.bar.full > i.banked { background: linear-gradient(90deg, var(--jade-deep), var(--jade)); }
/* The harvest that's ready but not cashed in: striped, gently moving, after the banked fill */
.bar > i.proj {
  position: absolute; top: 0; height: 100%; left: 0; width: 0; border-radius: 0 99px 99px 0;
  background: repeating-linear-gradient(-45deg, rgba(242,195,91,0.75) 0 6px, rgba(242,195,91,0.35) 6px 12px);
  background-size: 17px 17px; animation: proj-slide 1.2s linear infinite;
  transition: left 0.4s ease, width 0.4s ease, opacity 0.3s; opacity: 0;
}
.bar > i.proj.on { opacity: 1; }
.bar.wins { box-shadow: 0 0 0 2px rgba(79,181,141,0.55), 0 0 12px rgba(79,181,141,0.45); }
.bar.wins > i.proj { background: repeating-linear-gradient(-45deg, rgba(79,181,141,0.85) 0 6px, rgba(79,181,141,0.45) 6px 12px); background-size: 17px 17px; }
@keyframes proj-slide { to { background-position: 17px 0; } }
.score-line { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.proj-num { color: var(--gold); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.proj-num.wins { color: var(--jade); }

.hud-right { display: flex; gap: 14px; align-items: center; }
.stat { display: grid; justify-items: center; line-height: 1.1; }
.stat b { font-family: var(--f-display); font-size: var(--step-2); }
.stat span { font-size: var(--step--1); color: var(--paper-dim); }
.stat.gold b { color: var(--gold); }
.stat.moves.low b { color: var(--cinnabar); }
.icon-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; }

.white-bar {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px;
  background: var(--ink-2); border-radius: var(--r-sm); border-left: 3px solid var(--cinnabar);
  font-size: var(--step--1);
}
.white-bar .who { font-weight: 700; white-space: nowrap; }
.white-bar .plan { color: var(--paper-dim); min-width: 0; }
.white-bar .plan b { color: var(--paper); font-weight: 500; }

.board-wrap { position: relative; min-height: 0; display: grid; place-items: center; }
.board-box { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1; max-height: 100%; height: auto; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; border-radius: 4px; }
/* Above the tally: stones that fly into the multiplier. Clicks pass through. */
#fxtop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* hover / outcome readout pinned under the board */
.readout { min-height: 22px; font-size: var(--step--1); color: var(--paper-dim); text-align: center; }
.readout b { color: var(--paper); font-weight: 500; }
.readout .pts { color: var(--kaya); }
.readout .mul { color: var(--jade); }
.readout .bad { color: var(--cinnabar); }

/* ---------- side panel ---------- */
.panel { background: var(--ink-2); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; }
.panel h2 { font-size: var(--step-1); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel-head span { color: var(--paper-dim); font-size: var(--step--1); }

.mult-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mult-strip .label { font-size: var(--step--1); color: var(--paper-dim); }
.mult-strip .label b { color: var(--paper); font-weight: 500; }
.mult-chip { font-family: var(--f-display); font-weight: 800; font-size: var(--step-3); color: var(--jade); line-height: 1; }
.prisoner-bowl { display: flex; flex-wrap: wrap; gap: 3px; min-height: 12px; }
.prisoner-bowl i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9d3c4 60%, #a9a294); }
.bump { animation: bump 0.35s ease-out; }
@keyframes bump { 40% { transform: scale(1.25); } }

.hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.hand-stone {
  appearance: none; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 6px 8px; display: grid; justify-items: center; gap: 6px; cursor: pointer; position: relative;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.hand-stone:hover { border-color: #56689a; }
.hand-stone[aria-pressed="true"] { border-color: var(--kaya); background: #33405f; transform: translateY(-3px); }
.hand-stone .nm { font-size: var(--step--1); font-weight: 700; }
.hand-stone .k { position: absolute; top: 4px; left: 7px; font-size: 0.7rem; color: var(--paper-dim); }
.stone-ico { display: block; }
.desc { font-size: var(--step--1); color: var(--paper-dim); min-height: 2.6em; }
.desc b { color: var(--paper); font-weight: 500; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 auto; font-size: var(--step--1); }

.proverb-list { display: grid; gap: 6px; }
.proverb {
  position: relative;
  border: 1px solid #4a3a26; background: linear-gradient(180deg, #2b2418, #231d14); border-radius: var(--r-sm);
  padding: 6px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: center;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
}
/* reorderable: a drag handle on the left, arrows under the card on touch / small screens */
.proverb.reorder { grid-template-columns: auto auto minmax(0, 1fr); }
.pv-grip { color: var(--paper-dim); font-size: 1.1rem; line-height: 1; cursor: grab; user-select: none; opacity: 0.8; }
.proverb:hover .pv-grip { color: var(--kaya); opacity: 1; }
.proverb .pv-body .pv-ord { display: inline-block; overflow: visible; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2a1a08; background: var(--kaya); border-radius: 99px; padding: 0 7px; line-height: 1.5; justify-self: start; margin-bottom: 2px; }
.proverb .pv-body { display: grid; gap: 2px; min-width: 0; }
.proverb .pv-body b { font-family: var(--f-display); font-weight: 700; color: var(--kaya); font-size: var(--step-0); }
.proverb .pv-body span { font-size: 0.76rem; line-height: 1.3; color: var(--paper-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-provs .proverb .pv-body span { -webkit-line-clamp: 4; }
/* the big number: the proverb's current value */
.pv-val { display: grid; justify-items: center; line-height: 1; min-width: 3.2em; }
.pv-val b { font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); color: var(--jade); }
.pv-val span { font-size: 0.65rem; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.proverb.chips .pv-val b { color: var(--kaya); }
.proverb.static .pv-val b { font-size: var(--step-0); color: var(--paper-dim); }
.proverb.static .pv-val { min-width: 2.4em; }
.proverb[draggable="true"] { cursor: grab; }
.proverb.dragging { opacity: 0.45; }
.proverb.over { border-color: var(--kaya); box-shadow: inset 0 3px 0 var(--kaya); }
.pv-move { grid-column: 1 / -1; display: none; gap: 6px; padding-top: 4px; }
.pv-move .btn { font-size: 0.74rem; padding: 2px 8px; flex: 1 1 auto; }
@media (hover: none), (max-width: 900px) { .pv-move { display: flex; } }
.proverb .pv-sell { justify-self: start; padding: 2px 8px; font-size: 0.72rem; margin-top: 4px; }
/* growth: pulse + a floating "+1"; firing: lit up while it adds its part in the tally */
.proverb.pulse { animation: pv-pulse 0.5s ease-out; border-color: var(--jade); }
.proverb.reset { animation: pv-pulse 0.5s ease-out; border-color: var(--cinnabar); }
.proverb.firing { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,195,91,0.35), 0 0 18px rgba(242,195,91,0.35); transform: translateX(3px); }
@keyframes pv-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(79,181,141,0.45); } 100% { transform: scale(1); } }
.pv-float {
  position: absolute; left: 10px; top: 4px; font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--jade);
  pointer-events: none; animation: pv-float 1s ease-out forwards; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.pv-float.bad { color: var(--cinnabar); }
@keyframes pv-float { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.shop-provs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.proverb-offer .top { display: flex; gap: 10px; align-items: center; }
.tally .parts span.dim { opacity: 0.45; border-color: var(--line); color: var(--paper-dim); }
.tally .parts span.bump { animation: bump 0.28s ease-out; }
.empty-note { font-size: var(--step--1); color: var(--paper-dim); }

/* dojo lesson card */
.lesson { border: 1px solid var(--kaya-deep); }
.lesson h2 { color: var(--kaya); }
.lesson .steps { display: flex; gap: 4px; }
.lesson .steps i { width: 18px; height: 4px; border-radius: 2px; background: var(--ink-3); }
.lesson .steps i.done { background: var(--kaya); }
.lesson .result { font-weight: 700; }
.lesson .result.ok { color: var(--jade); }
.lesson .result.bad { color: var(--cinnabar); }

/* ---------- harvest tally (the one loud moment) ---------- */
.tally {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
  background: rgba(16, 22, 38, 0.92); border: 1px solid var(--kaya-deep); border-radius: var(--r-md);
  padding: 16px 22px; display: grid; gap: 8px; justify-items: center; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(.2,1.4,.4,1); min-width: min(320px, 90%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tally.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tally .eq { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; }
.tally .box { display: grid; justify-items: center; line-height: 1; }
.tally .box b { font-size: var(--step-4); }
.tally .box span { font-family: var(--f-ui); font-weight: 400; font-size: var(--step--1); color: var(--paper-dim); margin-top: 4px; }
.tally .pts b { color: var(--kaya); }
.tally .mul b { color: var(--jade); }
/* The multiplier runs hotter as it climbs (--heat 0..1 is set from ui.js setMult). */
.tally .box.mul { text-shadow: 0 0 calc(var(--heat, 0) * 22px) rgba(79,181,141, calc(var(--heat, 0) * 0.9)); }
.tally .box.mul span { text-shadow: none; }
.tally .mul b { scale: calc(1 + var(--heat, 0) * 0.2); transition: scale 0.25s cubic-bezier(.2,1.4,.4,1), color 0.3s; }
.tally.hot .mul b { color: #8fe3bd; }
.tally.hot .box.mul { animation: heat-flicker 0.45s ease-in-out infinite alternate; }
@keyframes heat-flicker {
  from { text-shadow: 0 0 14px rgba(79,181,141,0.85), 0 -3px 20px rgba(242,195,91,0.4); }
  to   { text-shadow: 0 0 24px rgba(120,230,180,0.95), 0 -8px 30px rgba(242,195,91,0.7); }
}
.tally .op { font-size: var(--step-3); color: var(--paper-dim); }
.tally .total { font-family: var(--f-display); font-weight: 800; font-size: var(--step-5); line-height: 1; color: var(--paper); }
.tally .total.stamp { animation: stamp 0.35s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tally .parts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: var(--step--1); }
.tally .parts span { border: 1px solid var(--jade-deep); color: var(--jade); border-radius: 99px; padding: 1px 8px; }
.tally .parts span.p { border-color: var(--kaya-deep); color: var(--kaya); }
.tally h3 { font-size: var(--step-1); color: var(--kaya); }
.tally .skip-hint { font-size: 0.72rem; color: var(--paper-dim); opacity: 0.7; }
.tally .box b.bump { animation: bump 0.28s ease-out; }

.toast {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 4px 14px; font-size: var(--step--1); opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(8, 11, 20, 0.72); display: grid; place-items: center; z-index: 20; padding: 16px; backdrop-filter: blur(3px); }
.sheet {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-md); width: min(560px, 100%);
  max-height: calc(100% - 16px); overflow-y: auto; padding: 24px; display: grid; gap: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55); animation: rise 0.25s ease-out;
}
.sheet.wide { width: min(900px, 100%); }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.sheet h2 { font-size: var(--step-3); }
.sheet .sub { color: var(--paper-dim); }
.sheet .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact { background: var(--ink-3); border-radius: var(--r-sm); padding: 10px 12px; display: grid; }
.fact b { font-family: var(--f-display); font-size: var(--step-2); }
.fact span { font-size: var(--step--1); color: var(--paper-dim); }
.fact.target b { color: var(--kaya); }
.boss-card { border: 1px solid var(--cinnabar); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 4px; }
.boss-card b { font-family: var(--f-display); color: var(--cinnabar); font-size: var(--step-1); }
.payout { display: grid; gap: 6px; }
.payout div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.payout div:last-child { border-bottom: 0; font-weight: 700; color: var(--gold); }

/* round recap */
.recap-head h2 .num { display: inline-block; min-width: 2ch; }
.rc-ratio { color: var(--gold); font-weight: 700; margin-left: 4px; }
.recap .rc-line, .recap .rc-total { opacity: 0; transform: translateY(8px); transition: opacity .22s ease-out, transform .22s ease-out, color .3s; }
.recap .rc-line.in, .recap .rc-total.in { opacity: 1; transform: none; }
.recap .rc-line.zero { color: var(--paper-dim); }
.recap .rc-v { font-weight: 700; color: var(--gold); min-width: 2ch; text-align: right; }
.recap .rc-line.zero .rc-v { color: var(--paper-dim); font-weight: 400; }
.recap .rc-line.crush span:first-child {
  background: linear-gradient(100deg, var(--gold) 0%, #fff4d0 45%, var(--gold) 60%, #f0a040 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer-text 2.4s linear infinite; font-weight: 700;
}
.recap .rc-total.in span:last-child { display: inline-block; animation: stamp .35s cubic-bezier(.2,1.6,.4,1); font-size: var(--step-1); }
.purse {
  display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 14px 12px 10px;
  border-radius: var(--r-md); background: radial-gradient(ellipse at 50% 100%, rgba(242,195,91,0.14), transparent 70%);
}
.purse .pile { position: relative; width: 88px; height: 40px; }
.purse .pile i, .fly-coin {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4 0 18%, var(--gold) 40%, #b9852a 100%);
  box-shadow: inset 0 0 0 2px rgba(120,80,20,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.purse .pile i { position: absolute; left: var(--x); bottom: calc(-1 * var(--y)); animation: coin-drop .22s ease-in; }
@keyframes coin-drop { from { transform: translateY(-14px); opacity: 0; } }
.purse-num { display: grid; justify-items: start; line-height: 1; }
.purse-num b { font-family: var(--f-display); font-size: var(--step-4); color: var(--gold); display: inline-block; }
.purse-num span { color: var(--paper-dim); font-size: var(--step--1); }
.purse.bump .purse-num b { animation: coin-bump .18s ease-out; }
.purse.full .purse-num b { text-shadow: 0 0 18px rgba(242,195,91,0.45); }
@keyframes coin-bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.fly-coin { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; will-change: transform; }

/* shop */
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wallet { font-family: var(--f-display); font-size: var(--step-3); color: var(--gold); }
.shop-sec { display: grid; gap: 10px; }
.shop-sec h3 { font-size: var(--step-1); }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.offers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer {
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: grid; gap: 8px;
  align-content: start; text-align: left;
}
.offer .top { display: flex; align-items: center; gap: 10px; }
.offer .top b { font-size: var(--step-1); }
.offer p { font-size: var(--step--1); color: var(--paper-dim); }
.offer .star { color: var(--gold); font-size: var(--step--1); }
.offer.proverb-offer { background: linear-gradient(180deg, #2b2418, #231d14); border-color: #4a3a26; }
.offer.proverb-offer b { font-family: var(--f-display); color: var(--kaya); }
.offer.sold { opacity: 0.35; }
.price { color: var(--gold); font-weight: 700; }
.services { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .offers, .offers.two { grid-template-columns: minmax(0, 1fr); } .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- collection / pool ---------- */
.collection { display: grid; gap: 18px; }
.col-tier { display: grid; gap: 8px; }
.col-tier h3 { font-size: var(--step-1); color: var(--kaya); }
.col-tier h3 small { font-family: var(--f-ui); font-weight: 400; font-size: var(--step--1); color: var(--paper-dim); }
.col-tier.locked { opacity: 0.5; }
.col-tier.locked h3 { color: var(--paper-dim); }
.col-tier .lock { font-size: 0.85em; }
.col-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.col-item { position: relative; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 4px; align-content: start; }
.col-item.proverb-ish { background: linear-gradient(180deg, #2b2418, #231d14); border-color: #4a3a26; }
.col-item.proverb-ish .col-head b { font-family: var(--f-display); color: var(--kaya); }
.col-item.owned { border-color: var(--jade-deep); box-shadow: inset 3px 0 0 var(--jade); }
.col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-head b { font-size: var(--step-0); flex: 1 1 auto; min-width: 0; }
.col-head .price { font-size: var(--step--1); }
.col-head .price::after { content: ' gold'; color: var(--paper-dim); font-weight: 400; }
.col-item p { font-size: 0.78rem; color: var(--paper-dim); line-height: 1.35; }
.badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: 99px; padding: 0 7px; color: var(--paper-dim); white-space: nowrap; }
.badge.mult, .badge.xmult { color: var(--jade); border-color: var(--jade-deep); }
.badge.chips { color: var(--kaya); border-color: var(--kaya-deep); }
.col-item .own { font-size: 0.68rem; color: var(--jade); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- info card: bottom-right; hover any stone, or a first encounter shows here ---------- */
.explain {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; pointer-events: auto;
  width: min(340px, calc(100vw - 32px));
  background: rgba(16, 22, 38, 0.97); border: 1px solid var(--kaya-deep); border-radius: var(--r-md);
  padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55); font-size: var(--step--1);
}
.explain.in { animation: explain-in 180ms cubic-bezier(.2,.9,.3,1.1); }
@keyframes explain-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.explain .ex-icon { display: grid; place-items: center; width: 44px; height: 44px; }
.explain .ex-glyph { font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1; }
.explain .ex-body { display: grid; gap: 3px; min-width: 0; }
.explain .ex-body b { font-family: var(--f-display); color: var(--kaya); font-size: var(--step-0); }
.explain .ex-body p { color: var(--paper-dim); line-height: 1.4; margin: 0; }
.explain .ex-line { font-size: 0.92em; }
.explain .ex-lvl { color: var(--paper-dim); opacity: 0.55; font-size: 0.8em; letter-spacing: -1px; }
.explain .ex-lvl.on { color: var(--gold); opacity: 1; }
.explain .ex-tag { font-weight: 700; margin-right: 2px; }
.explain .ex-tag.red { color: #e2593d; }
.explain .ex-tag.gold { color: var(--gold); }
.explain .ex-dim { opacity: 0.7; }
.explain .ex-new { justify-self: start; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #12161f; background: var(--gold); border-radius: 99px; padding: 1px 8px; }
.explain .ex-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--paper-dim); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 2px 4px; }
.explain .ex-x:hover { color: var(--paper); }
@media (hover: none) { .explain { right: 12px; left: 12px; width: auto; bottom: 12px; } }

.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bag-item { appearance: none; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; display: grid; justify-items: center; gap: 4px; cursor: default; font-size: var(--step--1); }
.bag-item.pick { cursor: pointer; }
.bag-item.pick:hover { border-color: var(--kaya); }
.bag-item:disabled { opacity: 0.35; }
.glossary { display: grid; gap: 10px; }
.gloss { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.gloss p { font-size: var(--step--1); color: var(--paper-dim); }
.gloss p b { color: var(--paper); }
.gloss p .lv { display: block; color: var(--paper-dim); }
.gloss p .lv b { color: var(--gold); font-weight: 400; }
.bag-item small { font-size: 0.68rem; color: var(--gold); line-height: 1.25; text-align: center; }
.bag-item small.lv-text { color: var(--paper-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bag-item:disabled small { color: var(--paper-dim); }
.rules { display: grid; gap: 10px; font-size: var(--step-0); }
.rules p { max-width: 62ch; }
.rules .formula { font-family: var(--f-display); font-size: var(--step-1); text-align: center; padding: 10px; background: var(--ink-3); border-radius: var(--r-sm); }
.rules .formula .p { color: var(--kaya); }
.rules .formula .m { color: var(--jade); }

/* ---------- narrow screens: stack ---------- */
@media (max-width: 900px) {
  body { overflow-y: auto; }
  #app { height: auto; min-height: 100%; }
  .screen.game { height: auto; }
  .game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "hud" "board" "side";
  }
  .board-col { grid-template-rows: auto auto auto auto; }
  .board-box { width: min(100%, 560px); }
  .side { overflow: visible; }
  .side > .panel.hand-panel { order: -1; }
  .side > .lesson { order: -2; }
  .hud { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label right" "bar bar"; gap: 8px 12px; }
  .hud .round-label { grid-area: label; }
  .hud .scorebar { grid-area: bar; }
  .hud .hud-right { grid-area: right; }
}
@media (max-width: 420px) {
  .kit-row { gap: 0; } .kit-stone { width: 34px; } .kit-stone span { font-size: 0.6rem; }
  .stat b { font-size: var(--step-1); }
  .hud-right { gap: 10px; }
  .tally .box b { font-size: var(--step-3); }
  .tally .total { font-size: var(--step-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Harvest button: quiet until something is alive, then the loudest thing in the panel */
.harvest-btn { width: 100%; justify-content: center; font-size: var(--step-0); padding: 0.7em 1em; }
.harvest-btn.ready { background: var(--kaya); color: #2a1a08; border-color: var(--kaya-deep); font-weight: 700; box-shadow: 0 0 0 0 rgba(242,195,91,0.6); animation: ready-pulse 1.6s ease-out infinite; }
.harvest-btn.ready:hover:not(:disabled) { background: #e8bd79; border-color: var(--kaya-deep); }
.harvest-btn .num { font-family: var(--f-display); font-size: var(--step-1); }
.harvest-btn .key { color: #5a3d16; border-color: #b98a48; }
@keyframes ready-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,195,91,0.55); } 70% { box-shadow: 0 0 0 10px rgba(242,195,91,0); } 100% { box-shadow: 0 0 0 0 rgba(242,195,91,0); } }

/* Moves left: under the board, growing and warming as the round runs out.
   --k goes from 0 (full budget) to 1 (last move); JS sets it. The number grows with a
   transform inside a fixed-height strip, so the board never resizes. */
.moves-strip { --k: 0; display: flex; align-items: center; justify-content: center; gap: 16px; height: 88px; }
.mv-num {
  font-family: var(--f-display); font-weight: 800; line-height: 1; font-size: 3rem; color: var(--paper);
  display: inline-block; min-width: 1.3ch; text-align: right; transform-origin: right center;
  transform: scale(calc(1 + var(--k) * 0.75));
  transition: transform 0.35s cubic-bezier(.2,1.4,.4,1), color 0.3s;
}
.mv-meta { display: grid; gap: 6px; }
.mv-label { font-size: var(--step-1); color: var(--paper-dim); font-weight: 500; }
.mv-pips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.mv-pips i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b5f68, #17181c 70%); box-shadow: 0 1px 1px rgba(0,0,0,0.4); }
.mv-pips i.used { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.moves-strip.warn .mv-num, .moves-strip.warn .mv-label { color: #f0a040; }
.moves-strip.last .mv-num { color: var(--cinnabar); text-shadow: 0 0 18px rgba(226,89,61,0.45); }
.moves-strip.last .mv-label { color: var(--cinnabar); font-weight: 700; }
.moves-strip.out .mv-num { color: var(--paper-dim); }
/* pop on each decrement, and a slow heartbeat on the last move (on a wrapper so it stacks with the scale) */
.mv-num.tick { animation: mv-tick 0.4s cubic-bezier(.2,1.6,.4,1); }
.moves-strip.last { animation: last-pulse 1.1s ease-in-out infinite; }
@keyframes mv-tick { 0% { filter: brightness(1.6); } 100% { filter: none; } }
@keyframes last-pulse { 50% { transform: scale(1.04); } }

/* "Crushing it": the ready harvest would reach 2x (and 3x) the target.
   A slow light sweep across the bar, a warm glow, and shimmering text. Restrained on purpose. */
.bar.crush { box-shadow: 0 0 0 2px rgba(242,195,91,0.65), 0 0 16px rgba(242,195,91,0.5); }
.bar.crush > i.proj { background: repeating-linear-gradient(-45deg, rgba(255,214,120,0.95) 0 6px, rgba(240,160,64,0.65) 6px 12px); background-size: 17px 17px; }
.bar.crush::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,250,230,0.6) 50%, transparent 65%);
  background-size: 250% 100%; animation: shimmer 2.2s linear infinite; mix-blend-mode: screen;
}
.bar.crush3::after { animation-duration: 1.2s; }
.bar.crush3 { animation: crush-glow 1.6s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes crush-glow { 50% { box-shadow: 0 0 0 2px rgba(255,214,120,0.9), 0 0 26px rgba(242,195,91,0.75); } }
.proj-num.crush {
  background: linear-gradient(90deg, #f2c35b 0%, #fff6dc 25%, #f2c35b 50%, #fff6dc 75%, #f2c35b 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer-text 2.4s linear infinite;
}
@keyframes shimmer-text { from { background-position: 0% 0; } to { background-position: -200% 0; } }
.tally .total.crush {
  background: linear-gradient(90deg, #f2c35b 0%, #fff6dc 25%, #f2c35b 50%, #fff6dc 75%, #f2c35b 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: stamp 0.35s cubic-bezier(.2,1.6,.4,1), shimmer-text 1.8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(242,195,91,0.55));
}

/* ---------- sandbox (debug) ---------- */
.sandbox { display: grid; gap: 10px; }
.sb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sb-row label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--paper-dim); }
.sb-row select, .sb-row input[type=number] { font: inherit; background: var(--ink-2, #1b2235); color: var(--paper); border: 1px solid var(--line, #3a4560); border-radius: 6px; padding: 4px 6px; }
.sb-bag .bag-item { padding: 4px 6px; }
.sb-provs .btn { font-size: var(--step--1); }

/* ---------------------------------------------------------------------------
   The Almanac: proverb and stone bestiary (ui.js openAlmanac / openAlmanacEntry)
   --------------------------------------------------------------------------- */
.alm { display: grid; gap: 16px; }
.new-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--cinnabar); color: #fff; font-size: 0.72em; font-weight: 700; vertical-align: 1px; }
.alm-progress { display: grid; grid-template-columns: auto 120px; gap: 4px 10px; align-items: center; font-size: var(--step--1); color: var(--paper-dim); }
.alm-progress b { color: var(--paper); }
.alm-progress i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--kaya) var(--p), var(--ink-3) var(--p)); }
.alm-dev { font-size: var(--step--1); color: var(--gold); border: 1px dashed rgba(242,195,91,0.5); border-radius: var(--r-sm); padding: 6px 10px; }
.alm-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.alm-tabs .btn.on { background: var(--ink-3); border-color: var(--kaya-deep); color: var(--kaya); font-weight: 700; }
.alm-body { display: grid; gap: 22px; }
.alm-tier { display: grid; gap: 10px; }
.alm-tier h3 { font-size: var(--step-1); color: var(--kaya); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.alm-tier h3 small { font-family: var(--f-ui); font-weight: 400; font-size: var(--step--1); color: var(--paper-dim); }
.alm-tier.locked h3 { color: var(--paper-dim); }
.alm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.alm-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  padding: 14px 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-3);
  color: var(--paper); font: inherit; min-height: 132px;
}
button.alm-card { cursor: pointer; transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; }
button.alm-card:hover, button.alm-card:focus-visible { transform: translateY(-2px); border-color: var(--kaya-deep); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.alm-card.pv { background: linear-gradient(180deg, #2b2418, #221c13); border-color: #4a3a26; }
.alm-card b { font-size: var(--step--1); line-height: 1.25; text-wrap: balance; }
.alm-card.pv b { font-family: var(--f-display); color: var(--kaya); font-size: var(--step-0); }
.alm-face { display: grid; place-items: center; min-height: 44px; }
.alm-card.pv .alm-face { font-family: var(--f-display); font-size: var(--step-2); font-weight: 800; color: var(--jade); }
.alm-tag { font-size: 0.7rem; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.alm-new { position: absolute; top: 8px; right: 8px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--cinnabar); border-radius: 99px; padding: 1px 6px; }
.alm-card.admin-only { border-style: dashed; opacity: 0.8; }
.alm-card.unknown { background: rgba(255,255,255,0.02); border-style: dashed; color: var(--paper-dim); }
.alm-card.unknown b { font-family: var(--f-display); color: #59627a; letter-spacing: 0.15em; }
.alm-card.unknown .alm-face { font-family: var(--f-display); font-size: var(--step-3); color: #3a4560; }
.alm-blank { display: block; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2e3850, #1a2135); box-shadow: inset 0 0 0 1px #34446a; }
.alm-hint { font-size: 0.7rem; color: #6d7690; }

.alm-page { gap: 18px; }
.alm-back { justify-self: start; }
.alm-top { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.alm-hero { width: 104px; height: 104px; display: grid; place-items: center; border-radius: var(--r-md); }
.alm-hero.pv { background: linear-gradient(180deg, #2b2418, #1d170f); border: 1px solid #4a3a26; }
.alm-hero.pv span { font-family: var(--f-display); font-size: var(--step-3); font-weight: 800; color: var(--jade); }
.alm-hero.st { background: radial-gradient(circle, rgba(220,174,104,0.22), transparent 70%); }
.alm-rule { font-size: var(--step-1); line-height: 1.45; margin-top: 6px; }
.alm-kind-long { color: var(--paper-dim); border-left: 3px solid var(--jade-deep); padding-left: 10px; }
.alm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.alm-facts div { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.alm-facts dt { font-size: 0.68rem; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.alm-facts dd { margin: 2px 0 0; font-weight: 700; }
.alm-page section { display: grid; gap: 8px; }
.alm-page section h3 { font-size: var(--step-1); color: var(--kaya); }
.alm-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.alm-levels li { display: grid; grid-template-columns: 3.2em 1fr; gap: 8px; background: var(--ink-3); border-radius: var(--r-sm); padding: 8px 10px; }
.alm-levels .lv { color: var(--gold); }
.alm-syns { display: flex; flex-wrap: wrap; gap: 8px; }
.alm-syn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--ink-3); color: var(--paper); font: inherit; font-size: var(--step--1); cursor: pointer; }
button.alm-syn:hover, button.alm-syn:focus-visible { border-color: var(--kaya-deep); color: var(--kaya); }
.alm-syn-face { color: var(--jade); font-weight: 700; }
.alm-syn.unknown { border-style: dashed; color: #59627a; cursor: default; letter-spacing: 0.15em; }
@media (max-width: 560px) {
  .alm-top { grid-template-columns: 1fr; }
  .alm-hero { width: 84px; height: 84px; }
  .alm-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .alm-progress { grid-template-columns: auto 80px; }
}
.alm-hero.pv span.long { font-size: var(--step-1); text-align: center; line-height: 1.1; padding: 0 6px; }

/* Trigger highlights: the thread from the board to the proverb card that just fired (ui.js threadTo) */
#threads { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 15; overflow: visible; }
#threads .thread {
  fill: none; stroke: var(--jade); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(79,181,141,0.8));
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: thread-draw 0.32s ease-out forwards, thread-fade 0.6s ease-in 0.7s forwards;
}
#threads .thread.white { stroke: var(--cinnabar); filter: drop-shadow(0 0 4px rgba(226,89,61,0.8)); }
#threads .thread-end { fill: var(--jade); opacity: 0; animation: thread-dot 1.3s ease-out forwards; }
#threads .thread-end.white { fill: var(--cinnabar); }
@keyframes thread-draw { to { stroke-dashoffset: 0; } }
@keyframes thread-fade { to { opacity: 0; } }
@keyframes thread-dot { 0%, 22% { opacity: 0; r: 2; } 30% { opacity: 1; r: 7; } 60% { opacity: 1; r: 4; } 100% { opacity: 0; r: 4; } }

/* ---------------------------------------------------------------------------
   Demo mode (index.html?demo=kind:id, shown in an iframe by the Almanac and the shop):
   only the board, a caption bar, the prisoners and the proverb cards.
   --------------------------------------------------------------------------- */
body.demo-mode { overflow: hidden; background: var(--ink); background-image: none; }
body.demo-mode #app { height: 100%; padding: 10px 12px; }
.demo-mode .screen.game { height: 100%; }
.demo-mode .hud, .demo-mode .white-bar, .demo-mode .moves-strip, .demo-mode .readout,
.demo-mode .hand-panel, .demo-mode .lesson, .demo-mode .explain, .demo-mode .prisoner-bowl { display: none !important; }
.demo-mode .game {
  height: 100%; max-width: none; gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 36%);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bar bar" "board side";
}
.demo-mode.demo-no-provs .game { grid-template-columns: minmax(0, 1fr) minmax(170px, 30%); }
.demo-mode.demo-no-provs .side > .panel:last-child { display: none; }
.demo-mode .board-col { grid-template-rows: minmax(0, 1fr); }
.demo-mode .side { overflow: hidden; gap: 8px; justify-content: center; }
.demo-mode .side .panel { padding: 10px 12px; }
.demo-bar { grid-area: bar; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; align-items: center; }
.demo-cap { margin: 0; min-height: 1.4em; font-size: var(--step-0); line-height: 1.35; color: var(--paper); text-wrap: balance; }
.demo-cap.in { animation: cap-in 0.3s ease-out; }
.demo-cap.final { color: var(--jade); font-weight: 700; }
@keyframes cap-in { from { opacity: 0; transform: translateY(4px); } }
.demo-dots { display: flex; gap: 5px; }
.demo-dots i { width: 18px; height: 4px; border-radius: 2px; background: var(--line); }
.demo-dots i.done { background: var(--kaya-deep); }
.demo-dots i.now { background: var(--kaya); }
.demo-replay { grid-column: 2; grid-row: 1 / span 2; }
.demo-missing { color: var(--paper-dim); text-align: center; margin-top: 30vh; }
@media (max-width: 520px) {
  .demo-mode .game, .demo-mode.demo-no-provs .game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "board" "side"; }
  .demo-cap { min-height: 2.7em; }
  .demo-mode .side { flex-direction: row; }
  .demo-mode .side .panel { flex: 1 1 0; min-width: 0; }
}
.demo-mode .proverb .pv-grip, .demo-mode .proverb .pv-move { display: none; }
.demo-mode .proverb.reorder { grid-template-columns: auto minmax(0, 1fr); }
.demo-mode .tally { scale: 0.85; }
/* Demo frames: the Almanac's "How it plays" and the shop's Watch sheet */
.demo-frame { display: block; width: 100%; aspect-ratio: 16 / 8.5; min-height: 300px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink); }
.watch { display: grid; gap: 14px; }
.offer-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.offer-btns .btn:first-child { flex: 1 1 auto; }
@media (max-width: 560px) { .demo-frame { aspect-ratio: 4 / 5.2; } }

/* ===========================================================================
   The table (design system: docs in the Rogo design system artifact; tools/table-lab.html).
   Palette: lacquer table, indigo panels, paper text, vermilion seals, gold money, soul-blue multiplier.
   js/table-scene.js paints the sky, the opponent, the lantern, the purse and the incense on a canvas
   behind (#table-bg) and in front (#table-fx); the DOM below just leaves room for them.
   =========================================================================== */
:root {
  --ink: #120c0b; --ink-2: #1c1412; --ink-3: #2a1f1b; --line: #4a3a2e;
  --paper: #f1e6cf; --paper-dim: #b9b2a2;
  --kaya: #e9b44c; --kaya-deep: #9a6a1e;  /* "points" and primary buttons: gold */
  --jade: #8fb6ff; --jade-deep: #3d5fae;  /* the multiplier: soul blue */
  --cinnabar: #e0462c; --gold: #e9b44c;
  --indigo: #1a2650; --vermilion: #e0462c; --vermilion-deep: #9e2a18; --seal: #c0261a; --soul: #8fb6ff;
  --sky: 240px; --board: 480px;
}
body { background: #0d1026; background-image: none; }
.btn { background: #241a17; border-color: #4a3a2e; }
.btn:hover:not(:disabled) { background: #33251f; border-color: #7a5a3a; }
.btn.primary { background: var(--gold); color: #2a1a08; border-color: #9a6a1e; }
.btn.primary:hover:not(:disabled) { background: #f2c46a; border-color: #9a6a1e; }
.sheet { background: #1c1412; border-color: #4a3a2e; }
.modal { background: rgba(6, 5, 12, 0.72); }
.fact { background: #2a1f1b; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#table-bg, #table-fx { position: fixed; left: 0; top: 0; pointer-events: none; }
#table-bg { z-index: 0; }
#table-fx { z-index: 8; }

body:not(.demo-mode) .game {
  position: relative; height: 100%; max-width: none; margin: 0; overflow: hidden;
  display: grid; column-gap: 28px; row-gap: 10px;
  grid-template-columns: minmax(230px, 1fr) var(--board) minmax(240px, 1fr);
  grid-template-rows: var(--sky) var(--board) minmax(0, 1fr);
  grid-template-areas: "hud . menu" "left board right" "left under right";
}
body:not(.demo-mode) .game > :not(canvas) { position: relative; z-index: 2; min-width: 0; }
body:not(.demo-mode) .hud { grid-area: hud; display: block; align-self: start; }
body:not(.demo-mode) .hud-right { grid-area: menu; justify-self: end; align-self: start; }
.round-label { text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.round-label .hour { font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--gold); letter-spacing: 0.04em; }
.round-label h1 { font-size: var(--step-3); font-weight: 800; }
.round-label p { color: #d8d0c0; }
body:not(.demo-mode) .board-col { grid-area: board; display: block; }
body:not(.demo-mode) .board-wrap { display: block; }
body:not(.demo-mode) .board-box { width: var(--board); height: var(--board); max-width: none; aspect-ratio: auto; }
body:not(.demo-mode) .under { grid-area: under; display: grid; gap: 6px; align-content: start; }
body:not(.demo-mode) .t-left { grid-area: left; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
body:not(.demo-mode) .t-right { grid-area: right; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.panel { background: rgba(28, 20, 18, 0.88); border: 1px solid rgba(233,180,76,0.14); }
.panel h2 { font-family: var(--f-display); font-weight: 800; }
.slot-lantern { height: calc(var(--board) * 0.34); min-height: 140px; flex: none; }
.slot-purse { height: 74px; flex: none; }
.moves-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 28px; padding: 0; background: none; border: 0; }
.slot-incense { height: 24px; }
.mv-label { font-size: var(--step--1); color: var(--paper-dim); white-space: nowrap; }
.mv-label b { font-family: var(--f-display); font-size: var(--step-1); color: var(--paper); }
.moves-strip.warn .mv-label b, .moves-strip.last .mv-label b { color: var(--cinnabar); }
.white-bar { background: rgba(28,20,18,0.8); border-left-color: var(--cinnabar); min-height: 30px; padding: 4px 10px; }
.readout .pts { color: var(--gold); }
.readout .mul { color: var(--soul); }
.score-panel .score { font-size: var(--step-3); font-weight: 800; color: var(--paper); }
.score-panel .target { color: var(--paper-dim); }
.score-panel .score-cap { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.score-panel .proj-num { white-space: normal; }
.bar { background: #2a1f1b; }
.bar > i.banked { background: linear-gradient(90deg, #9a6a1e, var(--gold)); }
.bar.full > i.banked { background: linear-gradient(90deg, #3d5fae, var(--soul)); }
.hand-stone { background: #241a17; border-color: #4a3a2e; }
.hand-stone[aria-pressed="true"] { background: #33251f; border-color: var(--gold); }
.harvest-btn.ready { background: var(--gold); border-color: #9a6a1e; }
.toast { background: rgba(28,20,18,0.95); border-color: #4a3a2e; z-index: 9; }
.table-cta { position: fixed; transform: translate(-50%, -100%); z-index: 12; }
/* the DOM tally only serves the Almanac demos; the table uses the abacus */
body:not(.demo-mode) .tally { display: none; }

/* narrow or portrait: one column, the page scrolls; the canvases stay fixed and follow the slots */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  body:not(.demo-mode) { overflow-y: auto; }
  body:not(.demo-mode) #app { height: auto; min-height: 100%; }
  body:not(.demo-mode) .screen.game { height: auto; }
  body:not(.demo-mode) .game { overflow: visible; }
  body:not(.demo-mode) .game {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: var(--sky) var(--board) auto auto auto;
    grid-template-areas: "hud menu" "board board" "under under" "right right" "left left";
    column-gap: 12px;
  }
  body:not(.demo-mode) .board-col { justify-self: center; }
  body:not(.demo-mode) .t-right { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lantern hand" "purse hand"; overflow: visible; }
  body:not(.demo-mode) .t-right .slot-lantern { grid-area: lantern; height: 170px; }
  body:not(.demo-mode) .t-right .slot-purse { grid-area: purse; }
  body:not(.demo-mode) .t-right .hand-panel { grid-area: hand; }
  body:not(.demo-mode) .t-right .lesson { grid-column: 1 / -1; }
  body:not(.demo-mode) .t-left { overflow: visible; }
  .round-label h1 { font-size: var(--step-2); }
}
@media (max-width: 560px) {
  body:not(.demo-mode) .t-right { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lantern" "purse" "hand"; }
}

/* demo mode (Almanac iframes): no table, the old layout with the proverbs and souls at the side */
.demo-mode .game { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar" "board left" "board right"; }
.demo-mode .t-left { grid-area: left; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: center; }
.demo-mode .t-right { grid-area: right; }
.demo-mode .score-panel, .demo-mode .slot-lantern, .demo-mode .slot-purse, .demo-mode .under { display: none !important; }
.demo-mode .mult-strip.sr-only { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; overflow: visible; }
.demo-mode .board-col { grid-area: board; }

/* ---------- proverbs as hanafuda cards (js/cards.js paints .pv-art) ---------- */
.proverb-list { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 14px 10px; }
.proverb, .proverb.reorder { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 0; background: none; border: 0; border-radius: 0; }
.proverb .pv-art { width: 100%; max-width: 120px; aspect-ratio: 1 / 1.75; display: block; border-radius: 6px; box-shadow: 0 6px 14px rgba(0,0,0,0.55); transition: transform 0.2s, box-shadow 0.25s; }
.proverb:hover .pv-art { transform: translateY(-6%); }
.proverb .pv-grip { display: none; }
.proverb .pv-val { display: flex; gap: 4px; align-items: baseline; justify-content: center; min-width: 0; margin-top: 4px; }
.proverb .pv-val b { font-size: var(--step-1); color: var(--soul); }
.proverb .pv-val span { margin: 0; }
.proverb.xmult .pv-val b { color: #dcefff; }
.proverb.chips .pv-val b { color: var(--paper); }
.proverb.static .pv-val b { font-size: 0.72rem; color: var(--paper-dim); text-align: center; }
.proverb .pv-body { justify-items: center; text-align: center; width: 100%; }
.proverb .pv-body b { font-family: var(--f-ui); font-weight: 500; font-size: 0.7rem; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
#proverbs .proverb .pv-body > span { display: none; }
.proverb .pv-body .pv-ord { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 1; margin: 0; }
.proverb.firing { transform: none; box-shadow: none; }
.proverb.firing .pv-art { animation: pv-flip 0.7s ease-in-out; box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(233,180,76,0.6); }
@keyframes pv-flip { 0% { transform: rotateY(0) translateY(-6%); } 50% { transform: rotateY(180deg) translateY(-10%) scale(1.06); } 100% { transform: rotateY(360deg) translateY(-6%); } }
.proverb.pulse, .proverb.reset { animation: none; border: 0; }
.proverb.pulse .pv-art { animation: pv-pulse 0.5s ease-out; box-shadow: 0 0 0 2px var(--soul), 0 0 18px rgba(143,182,255,0.55); }
.proverb.reset .pv-art { animation: pv-pulse 0.5s ease-out; box-shadow: 0 0 0 2px var(--cinnabar); }
.proverb.over .pv-art { box-shadow: -4px 0 0 var(--gold); }
.proverb .pv-move { grid-column: 1; width: 100%; }
.proverb .pv-move .btn { padding: 1px 4px; font-size: 0.66rem; }
.pv-float { left: 50%; top: 10%; transform: translateX(-50%); color: var(--soul); }
.shop-provs .proverb { justify-items: stretch; }
.proverb-list > .empty-note { grid-column: 1 / -1; }
@media (max-width: 700px) { body:not(.demo-mode) #round-sub { display: none; } body:not(.demo-mode) .round-label { max-width: 46vw; } }
@media (max-width: 700px) { body:not(.demo-mode) .round-label .hour { font-size: var(--step--1); } }
.demo-mode .hud-right { display: none !important; }

/* ---------- the table layout (body.table): three panels round the board, the score on the rail ---------- */
.score-harvest { display: none; }
/* the score rail is the harvest button; no separate Harvest button */
body.table #btn-harvest { display: none; }
body.table .score-panel .proj-num { display: none !important; }
body.table .score-harvest:not([hidden]) { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
body.table .score-harvest .sh-go { font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--gold); }
body.table .score-harvest .num { font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--paper); }
body.table .score-harvest .p { color: var(--paper); }
body.table .score-harvest .m { color: var(--soul); }
body.table .score-harvest .key { margin-left: auto; font-size: 0.7rem; color: var(--paper-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.35em; }
body.table .score-panel { transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s; }
body.table .score-panel.can-harvest { cursor: pointer; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(233,180,76,0.35); animation: plaque-pulse 1.8s ease-in-out infinite; }
body.table .score-panel.can-harvest:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold), 0 0 34px rgba(233,180,76,0.5); }
body.table .score-panel.can-harvest:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@keyframes plaque-pulse { 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 38px rgba(233,180,76,0.55); } }
/* left: the lantern, the incense, the purse; right: the stones, then the proverbs. Panels sit on the lacquer, no boxes */
body.table .panel:not(.score-panel) { background: none; border: 0; padding: 0; box-shadow: none; }
body.table .score-panel { background: linear-gradient(180deg, #4a2a16, #2e180c); border: 1px solid #6a4a26; border-radius: 6px; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.5); padding: 14px 16px; }
body.table .score-panel .bar { background: #1a0f0a; }
body.table .panel-head h2 { font-size: var(--step-0); color: var(--gold); letter-spacing: 0.06em; }
body.table .t-left .slot-lantern { height: calc(var(--board) * 0.44); }
body.table .t-right { gap: 14px; }
body.table .hand { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; }
body.table .hand-stone { background: none; border: 0; padding: 6px 2px 4px; }
body.table .hand-stone .stone-ico { width: 52px; height: 52px; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.55)); transition: transform 0.15s, filter 0.15s; }
body.table .hand-stone:hover .stone-ico { transform: translateY(-4px); }
body.table .hand-stone[aria-pressed="true"] { background: none; transform: none; }
body.table .hand-stone[aria-pressed="true"] .stone-ico { transform: translateY(-10px) scale(1.08); filter: drop-shadow(0 0 10px rgba(233,180,76,0.85)) drop-shadow(0 12px 8px rgba(0,0,0,0.5)); }
body.table .hand-stone .nm { font-size: 0.72rem; color: var(--paper-dim); }
body.table .hand-stone .k { top: 0; left: 4px; }
body.table .actions .btn { background: rgba(28,20,18,0.7); padding: 0.35em 0.7em; font-size: 0.74rem; }
body.table .desc { min-height: 0; }
body.table .t-right .white-bar { font-size: 0.74rem; }
body.table .t-right .readout { text-align: left; }
/* Undo is gone from the table (Z still works) */
#btn-undo { display: none; }
/* the words come off the table: instructions only appear when they say something new */
body.table .score-cap, body.table #bag-count, body.table .hand-panel .panel-head, body.table #round-sub, body.table .hand-stone .k, body.table #hand-desc.idle, body.table .readout.idle, body.table #prov-count { display: none !important; }
body.table .round-label .hour { font-size: var(--step--1); letter-spacing: 0.06em; }
body.table .round-label h1 { font-size: var(--step-2); }
body.table .round-label { max-width: 26vw; }
body.table .score-panel { padding: 12px 16px; }
body.table .score-panel .score { font-size: var(--step-4); line-height: 1; }
body.table .score-harvest:not([hidden]) { border-top: 1px solid rgba(233,180,76,0.3); padding-top: 8px; margin-top: 10px; }
body.table .actions { justify-content: center; }
body.table .actions .btn { flex: 0 0 auto; background: none; border-color: rgba(233,180,76,0.25); }
body.table .t-right { gap: 18px; padding-top: 4px; }
body.table .prov-panel .panel-head h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-dim); font-family: var(--f-ui); font-weight: 700; }
body.table .t-right .white-bar { background: none; border-left-width: 2px; padding: 0 0 0 8px; min-height: 0; color: var(--paper-dim); }
body.table .t-right .white-bar .who { font-weight: 500; }
body.table .mv-label { font-size: 0.78rem; }
body.table .mv-label b { font-size: var(--step-0); }
body.table .t-left { gap: 6px; }
body.table .white-bar.idle { display: none !important; }
body.table .hand { grid-template-columns: repeat(auto-fit, minmax(64px, 84px)); justify-content: center; }
/* proverbs as rows: the card on its side, then its value and name */
body.table .prov-panel .proverb-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.table .prov-panel .proverb { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "art val" "art body"; justify-items: start; align-items: center; column-gap: 12px; row-gap: 0; }
body.table .prov-panel .proverb .pv-art { grid-area: art; width: 104px; max-width: none; aspect-ratio: 1.75 / 1; }
body.table .prov-panel .proverb:hover .pv-art { transform: translateX(4px); }
body.table .prov-panel .proverb .pv-val { grid-area: val; justify-content: start; margin: 0; align-self: end; }
body.table .prov-panel .proverb .pv-body { grid-area: body; justify-items: start; text-align: left; align-self: start; }
body.table .prov-panel .proverb .pv-body b { font-size: 0.78rem; color: var(--paper); white-space: normal; }
body.table .prov-panel .proverb .pv-move { grid-column: 1 / -1; }
body.table .prov-panel .proverb .pv-body .pv-ord { left: -8px; top: 50%; transform: translate(-100%, -50%); }
body.table:not(.demo-mode) .game { grid-template-columns: minmax(var(--side, 196px), 1fr) var(--board) minmax(var(--side, 216px), 1fr); column-gap: 18px; }
@media (min-width: 1500px) and (min-height: 1000px) {
  html { font-size: clamp(16px, 1.05vmin, 21px); }
  body.table .hand-stone .stone-ico { width: 64px; height: 64px; }
  body.table .prov-panel .proverb { grid-template-columns: 128px minmax(0, 1fr); }
  body.table .prov-panel .proverb .pv-art { width: 128px; }
}
body.table .under { gap: 2px; }
/* stones centred however many are left; the lantern first in the left column; info cards bottom left */
body.table .hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
body.table .hand-stone { flex: 0 0 76px; }
body.table .t-left .slot-lantern { height: calc(var(--board) * 0.4); min-height: 150px; }
body.table .explain { right: auto; left: 16px; }
/* no running text on the table — White's last move is the red ring on the board, the hover card says the rest;
   the info card fits inside the left column instead of spilling over the board */
body.table .t-right .white-bar, body.table .t-right .readout { display: none !important; }
body.table .explain { left: 16px; right: auto; bottom: 16px; width: var(--side, 220px); grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; }
body.table .explain .ex-icon { display: none; }
body.table .score-panel .score-line { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0; }
body.table .score-panel .target { font-family: var(--f-display); font-weight: 800; font-size: var(--step-4); line-height: 1; color: var(--paper); }
body.table .score-panel .score { font-family: var(--f-ui); font-weight: 700; font-size: var(--step-0); color: var(--gold); line-height: 1.6; }
body.table .score-panel .score::after { content: " written"; color: var(--paper-dim); font-weight: 500; }
body.table .score-panel .nums::before { content: "YEARS TO WRITE"; display: block; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--paper-dim); font-weight: 700; }
body.table .score-panel .nums { display: block; }
body.table .slot-purse { height: 64px; }
/* keep the right column inside the screen with five proverbs and a full hand */
body.table .prov-panel .proverb-list { gap: 6px; }
body.table .prov-panel .proverb { grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; }
body.table .prov-panel .proverb .pv-art { width: 84px; }
body.table .prov-panel .proverb .pv-val b { font-size: var(--step-0); }
body.table .prov-panel .proverb .pv-body b { font-size: 0.74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
body.table .t-right { gap: 10px; }
body.table .hand-stone { flex: 0 0 70px; padding: 2px; }
body.table .hand-stone .stone-ico { width: 46px; height: 46px; }
@media (min-width: 1500px) and (min-height: 1000px) {
  body.table .prov-panel .proverb { grid-template-columns: 110px minmax(0, 1fr); }
  body.table .prov-panel .proverb .pv-art { width: 110px; }
  body.table .hand-stone .stone-ico { width: 58px; height: 58px; }
}
/* the incense sits in the left column */
body.table .t-left .moves-strip { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 2px 0; }
body.table .t-left .moves-strip .slot-incense { height: 22px; }
body.table .t-left .moves-strip .mv-label { text-align: center; }
body.table .t-left { gap: 10px; }
/* the score: the bar runs past the goal when a harvest would, and the projected total rides its end */
body.table .score-panel .nums::before, body.table .score-panel .score::after { content: none; }
body.table .score-panel .score-line { flex-direction: row; align-items: baseline; gap: 10px; }
body.table .score-panel .score { font-family: var(--f-display); font-weight: 800; font-size: var(--step-4); line-height: 1; color: var(--paper); }
body.table .score-panel .target { font-size: var(--step-3); color: var(--paper-dim); }
.bar-wrap { position: relative; }
.bar > i.goal { display: none; }
body.table .bar { height: 14px; overflow: visible; }
body.table .bar > i.banked, body.table .bar > i.proj { border-radius: 99px; }
body.table .bar > i.goal { display: block; position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 6px rgba(241,230,207,0.8); border-radius: 1px; z-index: 2; }
body.table .bar > i.goal[hidden] { display: none; }
body.table .bar-wrap { margin-top: 26px; }
.proj-val { position: absolute; bottom: 100%; margin-bottom: 4px; transform: translateX(-100%); font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--gold); white-space: nowrap; text-shadow: 0 0 10px rgba(233,180,76,0.6); pointer-events: none; }
.proj-val.wins { color: var(--goldL, #ffe3a0); }
.proj-val[hidden] { display: none; }
/* The score rail: the table edge the opponent leans on.
   The bar runs from 0 (the left end) across to the board's right edge, the target sits under the white notch,
   and the projected total rides the end of the fill as an overfill. "Click to harvest" sits right of the board;
   the whole rail is the button. */
.rail { display: none; }
.goal-val { display: none; }
body.table .rail { display: block; position: fixed; z-index: 5; left: 0; width: 100%; top: var(--rail-y, -100px); height: var(--rail-h, 70px); }
body.table .rail .score-panel { position: absolute; inset: 0; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; animation: none; transform: none; }
body.table .rail .score-panel:hover { transform: none; box-shadow: none; }
body.table .rail .scorebar { position: absolute; inset: 0; display: block; }
body.table .rail .score-cap, body.table .rail .proj-num, body.table .rail .nums { display: none !important; }
body.table .rail .bar-wrap { position: absolute; left: 28px; right: 28px; width: auto; top: 18px; margin: 0; }
body.table .rail .bar-wrap::before { content: "0"; position: absolute; left: 2px; top: calc(100% + 3px); font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.1; color: rgba(241,230,207,0.55); text-shadow: 0 1px 0 rgba(60,10,4,0.9); }
body.table .rail .bar { height: 26px; border-radius: 99px; background: linear-gradient(180deg, #2a0a05, #4a140a); box-shadow: inset 0 3px 5px rgba(0,0,0,0.7), 0 1px 0 rgba(255,200,160,0.3); }
body.table .rail .bar > i.goal { top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--paper); box-shadow: 0 0 8px rgba(255,240,210,0.9), 0 0 0 1px rgba(60,10,4,0.6); }
body.table .rail .goal-val:not([hidden]) { display: block; position: absolute; top: calc(100% + 3px); transform: translateX(-50%); font-family: var(--f-display); font-weight: 800; font-size: 16px; line-height: 1.1; color: var(--paper); text-shadow: 0 1px 0 rgba(60,10,4,0.9), 0 0 6px rgba(0,0,0,0.5); white-space: nowrap; pointer-events: none; }
body.table .rail .goal-val.aside { transform: translateX(7px); }
body.table .rail .proj-val { bottom: auto; top: calc(100% + 1px); margin: 0; transform: translateX(-100%); font-size: 19px; line-height: 1.1; color: var(--goldL, #ffe3a0); text-shadow: 0 1px 0 rgba(60,10,4,0.95), 0 0 10px rgba(233,180,76,0.7); z-index: 3; }
body.table .rail .proj-val.banked { color: var(--paper); text-shadow: 0 1px 0 rgba(60,10,4,0.95); font-size: 17px; }
/* "Click to harvest" is written on the bar itself, in the middle, under the opponent's hands */
body.table .rail .score-harvest:not([hidden]) { position: absolute; left: 50%; top: 31px; transform: translate(-50%, -50%); margin: 0; padding: 0; border: 0; z-index: 4; pointer-events: none; }
body.table .rail .score-harvest .num, body.table .rail .score-harvest .key { display: none; }
body.table .rail .score-harvest .sh-go { font-size: 19px; line-height: 1; white-space: nowrap; color: #fff3d0; letter-spacing: 0.02em;
  text-shadow: 0 0 2px #2a0a05, 0 0 4px #2a0a05, 0 0 8px rgba(42,10,5,0.9), 0 1px 0 #2a0a05; }
body.table .rail .score-panel.can-harvest { cursor: pointer; border: 0; box-shadow: none; animation: none; }
body.table .rail .score-panel.can-harvest .bar { animation: rail-pulse 1.8s ease-in-out infinite; }
body.table .rail .score-panel.can-harvest:hover .bar { box-shadow: inset 0 3px 5px rgba(0,0,0,0.7), 0 0 0 2px var(--gold), 0 0 22px rgba(233,180,76,0.7); }
body.table .rail .score-panel.can-harvest:hover .sh-go { color: #fff3d0; }
body.table .rail .score-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@keyframes rail-pulse { 50% { box-shadow: inset 0 3px 5px rgba(0,0,0,0.7), 0 0 0 1px var(--gold), 0 0 18px rgba(233,180,76,0.55); } }
body:has(#scr-game[hidden]) .rail { display: none !important; }

/* ===========================================================================
   Sheets (round start, the stall, the bag, the menu, the end of a run): black lacquer with a gold inlay,
   paper text, an eyebrow in gold over a title in the display face. The table stays visible behind.
   =========================================================================== */
body.table .modal { background: rgba(6, 5, 12, 0.5); backdrop-filter: blur(2px); }
body.table .sheet { position: relative; border: 1px solid #6a4a26; border-radius: 10px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(233,180,76,0.08), rgba(233,180,76,0) 60%), linear-gradient(180deg, #23171a, #150d0c);
  box-shadow: inset 0 0 0 5px rgba(0,0,0,0.28), 0 30px 70px rgba(0,0,0,0.65); }
body.table .sheet::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(233,180,76,0.22); border-radius: 6px; pointer-events: none; }
body.table .sheet h2 { font-weight: 800; color: var(--paper); letter-spacing: 0.01em; }
body.table .sheet h3 { font-family: var(--f-display); font-weight: 800; color: var(--gold); letter-spacing: 0.02em; }
body.table .sheet .sub:has(+ h2) { font-family: var(--f-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
body.table .sheet .fact { background: rgba(241,230,207,0.04); border: 1px solid rgba(233,180,76,0.18); border-radius: 6px; }
body.table .sheet .fact b { color: var(--paper); }
body.table .sheet .fact.target b { color: var(--gold); }
body.table .sheet .boss-card { border-color: rgba(224,70,44,0.7); background: rgba(158,42,24,0.14); border-radius: 6px; }
body.table .sheet .btn { background: #2a1d18; border-color: #5a432c; }
body.table .sheet .btn:hover:not(:disabled) { background: #3a2a20; border-color: #8a6a3a; }
body.table .sheet .btn.primary { background: var(--gold); color: #2a1a08; border-color: #9a6a1e; }
body.table .sheet .btn.primary:hover:not(:disabled) { background: #f2c46a; }
body.table .sheet .btn.quiet { background: transparent; border-color: transparent; }
body.table .sheet .btn.quiet:hover:not(:disabled) { background: rgba(241,230,207,0.06); }
body.table .sheet .bag-item { background: rgba(241,230,207,0.04); border-color: rgba(233,180,76,0.18); border-radius: 6px; }
body.table .sheet .bag-item.pick:hover:not(:disabled) { border-color: var(--gold); background: rgba(233,180,76,0.08); }
body.table .sheet .panel { background: rgba(0,0,0,0.2); border-color: rgba(233,180,76,0.14); }

/* ---------- the dokkaebi's stall (the shop): an awning over his wares, laid out over the board ---------- */
.coin { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 50%; vertical-align: -0.12em; margin-right: 0.28em;
  background: radial-gradient(circle at 35% 30%, #fff0b0, #e9b44c 45%, #9a6a1e 100%); box-shadow: inset 0 0 0 1.5px rgba(90,60,10,0.6); position: relative; }
.coin::after { content: ""; position: absolute; inset: 32%; background: rgba(90,60,10,0.75); border-radius: 1px; }
body.table .sheet.stall { width: min(1200px, 100%); padding-top: 0; gap: 16px; }
body.table .sheet.stall::before { top: 60px; }
.stall-awning { height: 40px; margin: 0 -24px 6px; border-radius: 9px 9px 0 0; position: relative;
  background: repeating-linear-gradient(90deg, #b8321e 0 46px, #1e2a56 46px 92px); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,220,180,0.25); }
.stall-awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: radial-gradient(circle at 23px 0, #b8321e 22px, transparent 23px) 0 0 / 92px 14px repeat-x, radial-gradient(circle at 69px 0, #1e2a56 22px, transparent 23px) 0 0 / 92px 14px repeat-x;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4)); }
.stall .shop-head { padding-top: 10px; }
.stall .wallet { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); color: var(--gold); padding: 6px 14px; border: 1px solid rgba(233,180,76,0.35); border-radius: 99px; background: rgba(0,0,0,0.25); }
.stall .wallet b { font-size: var(--step-3); font-weight: 800; line-height: 1; }
.stall .wallet span { font-family: var(--f-ui); font-size: var(--step--1); color: var(--paper-dim); }
.stall .wallet .coin { font-size: 1.5rem; align-self: center; }
.stall-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.stall-wares, .stall-side { display: grid; gap: 18px; min-width: 0; }
.stall h3 .cnt { font-family: var(--f-ui); font-weight: 500; font-size: var(--step--1); color: var(--paper-dim); letter-spacing: 0; margin-left: 6px; }
.stall .offers.wares { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stall .ware { position: relative; justify-items: center; text-align: center; padding: 16px 12px 12px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(241,230,207,0.06), rgba(241,230,207,0.02)); border: 1px solid rgba(233,180,76,0.2); transition: transform 0.15s, border-color 0.15s; }
.stall .ware:hover:not(.sold) { transform: translateY(-3px); border-color: rgba(233,180,76,0.55); }
.stall .ware p { font-size: var(--step--1); color: var(--paper-dim); text-align: center; }
.stall .ware .star { color: var(--gold); }
.stall .ware-name { font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); color: var(--paper); }
.stall .proverb-offer .ware-name { color: var(--gold); }
.stall .ware-kind { margin-top: -4px; }
.stall .ware-kind b { color: var(--soul); font-family: var(--f-display); font-size: var(--step-1); }
.stall .ware-pic { height: 132px; display: grid; place-items: center; }
.stall .ware-pic svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
.stall canvas.ware-card { width: 86px; height: 132px; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.55)); transform: rotate(-2deg); }
.stall .ware:nth-child(even) canvas.ware-card { transform: rotate(2deg); }
.stall .offer-btns { width: 100%; justify-content: center; }
.stall .tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; padding: 3px 9px 3px 8px; border-radius: 3px;
  background: #efe3c6; color: #2a1a08; font-weight: 700; font-size: var(--step--1); box-shadow: 0 2px 4px rgba(0,0,0,0.4); transform: rotate(4deg); }
.stall .tag::before { content: ""; position: absolute; left: -5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #23171a; box-shadow: 0 0 0 1px #9a7a4a; }
.stall .tag b { font-family: var(--f-display); font-size: var(--step-0); }
.stall .tag.sold { background: #3a4a2a; color: #cfe8b8; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.stall .ware.sold { opacity: 0.45; }
.stall .services { gap: 8px; }
.stall .services .btn { display: inline-flex; align-items: center; gap: 8px; }
.stall .svc { color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; }
.stall .stall-side .shop-provs { grid-template-columns: minmax(0, 1fr); }
.stall .stall-foot { border-top: 1px solid rgba(233,180,76,0.18); padding-top: 14px; align-items: center; }
@media (max-width: 900px) { .stall-body { grid-template-columns: minmax(0, 1fr); } }
/* the stall hangs from the table edge: the dokkaebi leans over it from his seat, and his speech stays in view */
body.table .modal:has(.sheet.stall) { place-items: start center; padding-top: max(8px, calc(var(--sky) - 64px)); background: linear-gradient(180deg, rgba(6,5,12,0) 0, rgba(6,5,12,0) calc(var(--sky) - 64px), rgba(6,5,12,0.55) calc(var(--sky) - 20px)); backdrop-filter: none; }
body.table .sheet.stall { max-height: calc(100vh - max(8px, calc(var(--sky) - 64px)) - 12px); }
.stall .stone-ware .ware-pic { height: 78px; }

/* ---------- the title: the night your furthest run reached, over an empty table ---------- */
.title-screen { position: relative; }
#title-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }
.title-screen .title-inner { position: relative; z-index: 1; }
body:not(.demo-mode) #title-board { display: none; }
body:not(.demo-mode) .title-inner { display: flex; flex-direction: column; align-items: center; padding: 11vh 16px 5vh; gap: 16px; min-height: 100vh; box-sizing: border-box; }
body:not(.demo-mode) .wordmark { text-shadow: 0 4px 24px rgba(0,0,0,0.6); position: relative; }
body:not(.demo-mode) .wordmark .seal { position: absolute; left: 100%; top: 0.18em; margin-left: 0.12em; font-size: 0.32em; width: 1.25em; height: 1.25em; display: grid; place-items: center;
  background: var(--seal); color: var(--paper); border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(241,230,207,0.5); transform: rotate(-4deg); text-shadow: none; }
body:not(.demo-mode) .wordmark small { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); color: #e8dcc0; max-width: 34ch; margin: 14px auto 0; line-height: 1.4; }
body:not(.demo-mode) .title-screen .title-actions:first-of-type { margin-top: auto; }
body:not(.demo-mode) .title-screen .title-actions .btn.quiet { color: #d8ccb4; }
body:not(.demo-mode) .title-meta { color: #b9b2a2; }
body:not(.demo-mode) .wordmark .wm { position: relative; display: inline-block; }

/* ---------- the stall, v2: tabs, three columns of wares, no scrolling ---------- */
.stall .tag { color: #1a1008; }
.stall .tag b { color: #1a1008; }
.stall .tag.poor { opacity: 0.55; }
.stall .shop-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 18px; }
.stall .wallet { padding: 0; border: 0; background: none; align-self: center; }
.stall .wallet canvas { display: block; }
.stall-tabs { display: flex; gap: 6px; justify-self: center; align-self: end; }
.stall-tabs .tab { appearance: none; font: inherit; cursor: pointer; padding: 8px 16px; border-radius: 6px 6px 0 0; border: 1px solid rgba(233,180,76,0.2); border-bottom: 0;
  background: rgba(0,0,0,0.25); color: var(--paper-dim); font-family: var(--f-display); font-weight: 800; font-size: var(--step-0); }
.stall-tabs .tab span { font-family: var(--f-ui); font-weight: 500; font-size: 0.72rem; margin-left: 6px; color: var(--paper-dim); }
.stall-tabs .tab[aria-selected="true"] { background: rgba(233,180,76,0.12); color: var(--gold); border-color: rgba(233,180,76,0.5); }
.stall-tabs .tab:hover { color: var(--paper); }
.stall-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; border-top: 1px solid rgba(233,180,76,0.25); padding-top: 14px; margin-top: -16px; }
.stall-cols .wares { display: grid; gap: 10px; }
.stall .ware { grid-template-columns: 64px minmax(0, 1fr); justify-items: stretch; text-align: left; align-items: start; column-gap: 12px; padding: 12px 12px 10px; }
.stall .ware .ware-pic { height: auto; min-height: 64px; }
.stall .ware .ware-pic svg { width: 56px; height: 56px; }
.stall canvas.ware-card { width: 56px; height: 86px; }
.stall .ware p { text-align: left; font-size: 0.78rem; line-height: 1.35; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stall .ware .ware-name { font-size: var(--step-0); padding-right: 52px; display: block; }
.stall .ware .stars { color: var(--gold); font-size: 0.8em; }
.stall .ware .offer-btns { justify-content: flex-start; margin-top: 8px; }
.stall .ware .offer-btns .btn { padding: 0.35em 1em; flex: 0 0 auto; }
.stall .ware:hover:not(.sold) { transform: translateY(-2px); }
.stall .up-ware { border-style: dashed; }
/* hover a proverb for sale: your own proverbs, to compare */
.stall .proverb-offer .yours { display: none; position: absolute; right: calc(100% + 10px); top: 0; width: 250px; z-index: 5; padding: 12px 14px; border-radius: 8px;
  background: #1a1110; border: 1px solid rgba(233,180,76,0.45); box-shadow: 0 14px 30px rgba(0,0,0,0.6); text-align: left; }
.stall .proverb-offer:hover .yours, .stall .proverb-offer:focus-within .yours { display: block; }
.stall .yours > b { font-family: var(--f-display); color: var(--gold); font-size: var(--step--1); letter-spacing: 0.04em; }
.stall .yours ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 0.8rem; color: var(--paper); }
.stall .yours li b { color: var(--soul); font-family: var(--f-display); }
.stall .yours li span { color: var(--paper-dim); font-size: 0.7rem; }
.stall .yours li.none { color: var(--paper-dim); }
.stall-things { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; border-top: 1px solid rgba(233,180,76,0.25); padding-top: 14px; margin-top: -16px; align-items: start; }
.stall-things .shop-provs { grid-template-columns: minmax(0, 1fr); max-height: 52vh; overflow-y: auto; }
.stall-things .bag-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.stall-foot { display: grid; gap: 10px; border-top: 1px solid rgba(233,180,76,0.18); padding-top: 12px; }
.stall-foot .services { display: flex; flex-wrap: wrap; gap: 8px; }
.stall-foot .services .cnt { color: var(--paper-dim); font-size: 0.75rem; }
.stall-next { display: flex; align-items: center; gap: 14px; }
.stall-next .sub { margin-right: auto; font-size: var(--step--1); }
@media (max-width: 1000px) { .stall-cols, .stall-things { grid-template-columns: minmax(0, 1fr); } .stall .proverb-offer .yours { right: auto; left: 0; top: 100%; } .stall .shop-head { grid-template-columns: 1fr auto; } .stall-tabs { grid-column: 1 / -1; justify-self: start; } }
/* Your things: proverbs as rows, the card on its side, value and words beside it, order controls at the end */
.stall-things .shop-provs { gap: 8px; max-height: none; overflow: visible; }
.stall-things .proverb { grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "art val move" "art body move"; justify-items: start; align-items: center;
  column-gap: 14px; row-gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(241,230,207,0.04); border: 1px solid rgba(233,180,76,0.16); text-align: left; }
.stall-things .proverb .pv-art { grid-area: art; width: 112px; max-width: none; aspect-ratio: 1.75 / 1; }
.stall-things .proverb .pv-val { grid-area: val; justify-content: start; margin: 0; align-self: end; }
.stall-things .proverb .pv-body { grid-area: body; justify-items: start; text-align: left; align-self: start; width: auto; }
.stall-things .proverb .pv-body b { font-family: var(--f-display); font-weight: 800; font-size: var(--step-0); color: var(--gold); white-space: normal; }
.stall-things .proverb .pv-body > span:not(.pv-ord) { display: -webkit-box; -webkit-line-clamp: 2; font-size: 0.76rem; }
.stall-things .proverb .pv-body .pv-ord { position: static; transform: none; margin: 0 0 2px; }
.stall-things .proverb .pv-move { grid-area: move; width: auto; display: grid; gap: 4px; }
.stall-things .proverb .pv-sell { margin-top: 2px; }
/* compact rows: ordinal and name on one line, the rule under them in one line, order and sell at the right */
.stall-things .proverb { position: relative; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "art val" "art body"; padding: 7px 118px 7px 10px; row-gap: 0; }
.stall-things .proverb .pv-art { width: 92px; }
.stall-things .proverb .pv-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.stall-things .proverb .pv-body .pv-ord { grid-column: 1; margin: 0; }
.stall-things .proverb .pv-body b { grid-column: 2; font-size: 0.92rem; }
.stall-things .proverb .pv-body > span:not(.pv-ord) { grid-column: 1 / -1; -webkit-line-clamp: 1; }
.stall-things .proverb .pv-move { position: absolute; right: 10px; top: 6px; display: flex; gap: 2px; }
.stall-things .proverb .pv-move .btn { padding: 1px 5px; }
.stall-things .proverb .pv-sell { position: absolute; right: 10px; bottom: 6px; margin: 0; }
.stall-things .proverb .pv-val b { font-size: var(--step-0); }

/* ---------- big screens: the side columns scale with --ui (set from the room beside the board) ---------- */
body.table .hand-stone { flex: 0 0 calc(70px * var(--ui, 1)); }
body.table .hand-stone .stone-ico { width: calc(46px * var(--ui, 1)); height: calc(46px * var(--ui, 1)); }
body.table .hand-stone .nm { font-size: calc(0.72rem * var(--ui, 1)); }
body.table .t-right .btn { font-size: calc(0.8rem * var(--ui, 1)); }
body.table .prov-panel .panel-head h2 { font-size: calc(0.72rem * var(--ui, 1)); }
body.table .prov-panel .proverb { grid-template-columns: calc(84px * var(--ui, 1)) minmax(0, 1fr); column-gap: calc(10px * var(--ui, 1)); }
body.table .prov-panel .proverb .pv-art { width: calc(84px * var(--ui, 1)); }
body.table .prov-panel .proverb .pv-val b { font-size: calc(1.15rem * var(--ui, 1)); }
body.table .prov-panel .proverb .pv-val span { font-size: calc(0.66rem * var(--ui, 1)); }
body.table .prov-panel .proverb .pv-body b { font-size: calc(0.74rem * var(--ui, 1)); }
body.table .prov-panel .proverb-list { gap: calc(6px * var(--ui, 1)); }
body.table .slot-purse { height: calc(84px * var(--ui, 1)); }
body.table .t-left .moves-strip .slot-incense { height: calc(22px * var(--ui, 1)); }
body.table .mv-label { font-size: calc(0.78rem * var(--ui, 1)); }
body.table .mv-label b { font-size: calc(1.2rem * var(--ui, 1)); }
body.table .explain { width: calc(var(--side, 220px) * var(--ui, 1)); }
body.table .rail .proj-val.near0 { transform: translateX(6px); }
body.table .rail .bar-wrap:has(.proj-val.near0:not([hidden]))::before { opacity: 0; }
.hand-stone.snatched { opacity: 0; transform: translateY(-30px) scale(0.6); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
/* Meng Po's round: forgotten proverbs are washed out and crossed through */
.proverb.forgotten { position: relative; }
.proverb.forgotten .pv-art { filter: grayscale(0.85) brightness(0.55); }
.proverb.forgotten .pv-val, .proverb.forgotten .pv-body { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgba(224,70,44,0.8); }
.proverb .pv-forgot { grid-area: art; place-self: center; z-index: 2; pointer-events: none; font-family: var(--f-display); font-weight: 800; line-height: 1;
  font-size: calc(2.6rem * var(--ui, 1)); color: var(--cinnabar); text-shadow: 0 2px 6px rgba(0,0,0,0.7); transform: rotate(-6deg); }
.proverb.forgotten .pv-val::after { content: "forgotten"; margin-left: 6px; font-family: var(--f-ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinnabar); }
/* a harvest that wins: the projection is gold, bright and slightly hotter than an ordinary one (not the old jade) */
body.table .bar.wins { box-shadow: inset 0 3px 5px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,214,120,0.75), 0 0 16px rgba(242,195,91,0.55); }
body.table .bar.wins > i.proj { background: repeating-linear-gradient(-45deg, rgba(255,226,140,0.98) 0 6px, rgba(226,164,58,0.85) 6px 12px); background-size: 17px 17px; }

/* ---------- the end of a round lost, and the end of the road ---------- */
body.table .sheet.end-sheet { width: min(560px, 100%); text-align: center; justify-items: center; gap: 14px; padding-top: 18px; }
.end-sheet .end-head { display: grid; gap: 2px; }
.end-sheet h2 { font-size: var(--step-4); }
.end-sheet .end-score { display: grid; gap: 8px; justify-items: center; width: 100%; }
.end-sheet .end-score p { font-size: var(--step-1); color: var(--paper); margin: 0; }
.end-sheet .end-score b { font-family: var(--f-display); font-weight: 800; color: var(--gold); }
.end-sheet .end-score .sub { font-size: var(--step--1); }
.end-sheet .facts { width: 100%; }
.end-sheet .row { justify-content: center; width: 100%; }
.end-sheet .btn .cnt { font-weight: 500; opacity: 0.75; margin-left: 4px; }
.end-sheet .end-note { max-width: 40ch; }
.mini-bar { position: relative; width: 82%; height: 14px; border-radius: 99px; background: linear-gradient(180deg, #2a0a05, #4a140a); box-shadow: inset 0 2px 4px rgba(0,0,0,0.7), 0 0 0 1px rgba(233,180,76,0.25); overflow: hidden; }
.mini-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #9a6a1e, var(--gold)); border-radius: 99px; }
.mini-bar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--paper); }
/* the incense, burned down to a stub, with the last of its smoke */
.end-art { position: relative; width: 140px; height: 110px; }
.incense-out .bowl { position: absolute; left: 30px; right: 30px; bottom: 6px; height: 34px; border-radius: 6px 6px 40px 40px; background: linear-gradient(180deg, #7a5a3a, #3a2414); box-shadow: inset 0 3px 0 rgba(255,220,170,0.25), 0 8px 16px rgba(0,0,0,0.5); }
.incense-out .bowl::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px; height: 9px; border-radius: 50%; background: #9a948a; box-shadow: inset 0 2px 3px rgba(0,0,0,0.45); }
.incense-out .stub { position: absolute; left: 68px; bottom: 36px; width: 4px; height: 22px; background: linear-gradient(180deg, #6a6460 0 30%, #8a3a1a 30%); border-radius: 1px; }
.incense-out .stub::before { content: ""; position: absolute; left: -1px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #5a5652; }
.incense-out .smoke { position: absolute; left: 62px; bottom: 58px; width: 16px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, rgba(220,220,230,0.35), rgba(220,220,230,0) 70%); filter: blur(2px); animation: smoke-rise 3.2s ease-out infinite; }
.incense-out .smoke.s2 { animation-delay: 1.6s; left: 66px; }
@keyframes smoke-rise { 0% { transform: translateY(8px) scaleX(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -40px) scaleX(1.6); opacity: 0; } }
/* the run ends: a slip from the ledger, his name and his nineteen years, sealed */
.ledger-slip { position: relative; display: flex; flex-direction: row-reverse; gap: 10px; padding: 14px 16px 16px; background: #efe3c6; color: #1a1008; border-radius: 2px; box-shadow: 0 6px 14px rgba(0,0,0,0.5); transform: rotate(-1.5deg);
  font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.ledger-slip { height: 104px; align-items: flex-start; }
.ledger-slip > span { display: block; text-align: center; line-height: 1.15; }
.ledger-slip .seal { position: absolute; right: -14px; bottom: -10px; writing-mode: horizontal-tb; width: 36px; height: 36px; display: grid; place-items: center; background: var(--seal); color: #f4e8cf; font-style: normal; font-size: 1.1rem; border-radius: 3px; transform: rotate(8deg); box-shadow: inset 0 0 0 2px rgba(244,232,207,0.5); }
/* victory: the Northern Dipper over the seal of life */
.seal-art { width: 200px; height: 130px; }
.seal-art .dipper { position: absolute; left: 0; top: 0; width: 200px; height: 70px; filter: drop-shadow(0 0 6px rgba(255,230,170,0.8)); }
.seal-art .seal-big { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-5deg); width: 74px; height: 74px; display: grid; place-items: center; background: var(--seal); color: #f4e8cf;
  font-family: var(--f-display); font-weight: 800; font-size: 2.8rem; border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(244,232,207,0.55), 0 10px 24px rgba(0,0,0,0.55); animation: seal-stamp 0.6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes seal-stamp { from { transform: translateX(-50%) rotate(-5deg) scale(2.2); opacity: 0; } }
.end-sheet.win h2 { color: var(--gold); }
.explain .ex-tag.boss { color: #fff; background: var(--cinnabar); border-radius: 3px; padding: 0 5px; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.explain .ex-glyph { font-family: var(--f-display); }

/* ---------- accounts and leaderboards (js/account.js) ---------- */
.account-row { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.account-row[hidden] { display: none; }
.acct-ways { display: grid; gap: 16px; }
.acct-ways > .btn.big { width: 100%; }
.acct-email { display: grid; gap: 8px; }
.acct-field { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-field input {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; /* 16px keeps iOS from zooming */
  background: var(--ink-3); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
}
.acct-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.acct-msg:empty { display: none; }
.sheet .row.acct-actions { justify-content: space-between; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(52vh, 460px); overflow-y: auto; }
.lb-row {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; grid-template-areas: "rank name val" "rank meta val";
  align-items: center; column-gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--ink-3);
}
.lb-row.you { outline: 1px solid var(--gold); }
.lb-rank { grid-area: rank; text-align: right; color: var(--paper-dim); font-weight: 700; }
.lb-row:nth-child(1) .lb-rank { color: var(--gold); }
.lb-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-name em { font-style: normal; color: var(--gold); font-weight: 400; }
.lb-meta { grid-area: meta; font-size: var(--step--1); }
.lb-val { grid-area: val; text-align: right; font-weight: 700; }
.lb-val small { font-weight: 400; color: var(--paper-dim); }
.lb-empty { padding: 12px 4px; }
.lb-you { display: grid; gap: 6px; }
.lb-you .btn.quiet { padding: 0.2em 0.5em; }
.lb-note { font-size: var(--step--1); opacity: 0.8; }
@media (max-width: 480px) { .lb-tabs .btn { padding: 0.4em 0.7em; font-size: var(--step--1); } }

/* a close × in the top-right corner of long sheets (the Almanac); it stays put while the sheet scrolls */
.sheet-x { position: sticky; top: 0; justify-self: end; align-self: start; margin-bottom: -40px; z-index: 6; width: 36px; height: 36px; display: grid; place-items: center;
  appearance: none; border: 1px solid rgba(233,180,76,0.35); border-radius: 50%; background: rgba(20,14,12,0.92); color: var(--paper); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sheet-x:hover { border-color: var(--gold); color: var(--gold); }
.alm { position: relative; }