/* Winter Stores: bleak, black and white. A silent film of a dying village: soot,
   bone-grey paper, old print, and blood as the only colour. Fonts load from
   Google Fonts and fall back to the system's old-style serifs when offline. */
:root {
  --night: #030303;
  --peat: #0b0b0b;
  --bark: #121212;
  --bark-hi: #1c1c1c;
  --line: #343432;
  --bone: #dddbd4;
  --dim: #8d8b85;
  --faint: #55534f;
  --parch: #cdcac1;
  --parch-lo: #a9a69d;
  --parch-ink: #101010;
  --ember: #f1efe8;      /* the accent is plain white light */
  --blood: #6e0f0c;
  --blood-hi: #b3261e;
  --tallow: #f1efe8;
  --moss: #c9c7c0;
  /* "EB Garamond" is loaded with the ten digits only: the old face's 1 and 0 read as I and o */
  /* resources keep a muted hue each, used for marks, figures and thin rules only:
     lit (on the dark table) and ink (on paper) */
  --food: #e2796a;   --food-ink: #8f1f14;
  --timber: #93bf6c; --timber-ink: #2c5516;
  --coin: #e0b751;   --coin-ink: #7d5503;
  --iron: #79a9d6;   --iron-ink: #1b4270;
  --wild: #f1efe8;   --wild-ink: #131313;
  --display: "EB Garamond", "IM Fell English", "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
  --body: "EB Garamond", "IM Fell English", "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
  --caps: "EB Garamond", "IM Fell English SC", "Iowan Old Style", Palatino, Georgia, serif;
  --rune: "Noto Sans Runic", "Segoe UI Historic", "Apple Symbols", "Segoe UI Symbol", sans-serif;
  --thud: cubic-bezier(.2, 1.5, .4, 1);
}

* { box-sizing: border-box; }
html { background: var(--night); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; color: var(--bone); font: 18px/1.4 var(--body);
  background: radial-gradient(1000px 560px at 50% -6%, #1d1d1c 0%, #0b0b0b 55%, var(--night) 100%) fixed;
}
/* grain, and a vignette that closes in */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 90; opacity: .34; mix-blend-mode: overlay; inset: -40px; animation: grain .7s steps(5) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after { z-index: 1; background: radial-gradient(ellipse at 50% 38%, transparent 38%, rgba(0, 0, 0, .88) 100%); }

button { font: inherit; color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
b { font-weight: 400; color: #f6f6f6; }
small { font-size: .72em; }
.label, .eyebrow, .zone-head h2 {
  font: 400 13px/1.3 var(--caps); letter-spacing: .16em; text-transform: lowercase; color: var(--dim);
}
.zone-head h2 { font-size: 16px; letter-spacing: .14em; color: var(--bone); }
.zone-head h2 small { color: var(--faint); letter-spacing: .08em; margin-left: 6px; }
.zone-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.screen-title { font: 400 44px/1 var(--display); letter-spacing: .01em; color: var(--bone); }
.muted { color: var(--dim); font-size: 15px; }
.flavour { font-style: italic; font-size: 20px; line-height: 1.3; color: #cacaca; }
.amt { white-space: nowrap; }

.suit-H, .tone-H { --tone: var(--food); --ink: var(--food-ink); }
.suit-C, .tone-C { --tone: var(--timber); --ink: var(--timber-ink); }
.suit-D, .tone-D { --tone: var(--coin); --ink: var(--coin-ink); }
.suit-S, .tone-S { --tone: var(--iron); --ink: var(--iron-ink); }
.tone-wild { --tone: var(--wild); --ink: var(--wild-ink); }
.tone-good { --tone: var(--tallow); --ink: #5b5b5b; }
.tone-bad { --tone: var(--blood-hi); --ink: var(--blood); }
.suit-H, .suit-C, .suit-D, .suit-S { color: var(--tone); }

/* Resource icons: each SVG is used as a mask so it takes the text colour. They are
   embedded copies of svgs/*.svg, because a browser will not load a mask from a
   separate file when the page is opened straight from disk. */
.ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-H { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.5 2a34.5 34.5 0 000 20%22/%3E%3Cpath d=%22M13.5 2a34.5 34.5 0 010 20%22/%3E%3Cpath d=%22M4.67 17h14.67%22/%3E%3Cpath d=%22M4.67 7h14.67%22/%3E%3Cpath d=%22M6.23 3.06a19 19 0 000 17.88A2 2 0 008 22h8a2 2 0 001.77-1.06 19 19 0 000-17.88A2 2 0 0016 2H8a2 2 0 00-1.77 1.06%22/%3E%3C/svg%3E"); }   /* svgs/barrel.svg */
.ico-C { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m14 12-8.381 8.38a1 1 0 0 1-3.001-3L11 9%22/%3E%3Cpath d=%22M15 15.5a.5.5 0 0 0 .5.5A6.5 6.5 0 0 0 22 9.5a.5.5 0 0 0-.5-.5h-1.672a2 2 0 0 1-1.414-.586l-5.062-5.062a1.205 1.205 0 0 0-1.704 0L9.352 5.648a1.205 1.205 0 0 0 0 1.704l5.062 5.062A2 2 0 0 1 15 13.828z%22/%3E%3C/svg%3E"); }   /* svgs/axe.svg */
.ico-D { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13.744 17.736a6 6 0 1 1-7.48-7.48%22/%3E%3Cpath d=%22M15 6h1v4%22/%3E%3Cpath d=%22m6.134 14.768.866-.5 2 3.464%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%226%22/%3E%3C/svg%3E"); }   /* svgs/coins.svg */
.ico-S { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 10H6a4 4 0 0 1-4-4 1 1 0 0 1 1-1h4%22/%3E%3Cpath d=%22M7 5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1 7 7 0 0 1-7 7H8a1 1 0 0 1-1-1z%22/%3E%3Cpath d=%22M9 12v5%22/%3E%3Cpath d=%22M15 12v5%22/%3E%3Cpath d=%22M5 20a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3 1 1 0 0 1-1 1H6a1 1 0 0 1-1-1%22/%3E%3C/svg%3E"); }   /* svgs/anvil.svg */
.sigil { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- snow ---------- */
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.snow i {
  position: absolute; top: -12px; left: calc(var(--x) * 1%); width: calc(var(--s) * 1px); height: calc(var(--s) * 1px);
  border-radius: 50%; background: #e6e6e6; opacity: .45; filter: blur(.4px);
  animation: fall calc(var(--d) * 1s) linear calc(var(--d) * -.37s) infinite;
}
@keyframes fall {
  0% { transform: translate(0, 0); }
  50% { transform: translate(34px, 52vh); }
  100% { transform: translate(-18px, 106vh); }
}

/* ---------- header ---------- */
.top { position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; max-width: 1060px; margin: 0 auto; padding: 10px 18px 0; }
.top h1 { margin-right: auto; font: 400 15px var(--caps); letter-spacing: .3em; text-transform: lowercase; color: var(--faint); }
.menu { position: relative; }
.menu > summary, .menu-btn {
  cursor: pointer; list-style: none; padding: 3px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: none; font: 400 14px var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--dim);
}
.menu > summary:hover, .menu-btn:hover { color: var(--bone); border-color: var(--dim); }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(460px, 90vw); max-height: 74vh; overflow-y: auto;
  background: var(--bark); border: 1px solid var(--line); border-radius: 3px; padding: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8); display: grid; gap: 10px; font-size: 16px; color: #c3c3c3;
}

/* ---------- layout ---------- */
#app { position: relative; z-index: 5; max-width: 1060px; margin: 0 auto; padding: 8px 18px 60px; }
.board { display: grid; gap: 14px; }
.panel {
  position: relative; display: grid; gap: 14px; min-width: 0; padding: 22px 24px; border-radius: 3px;
  background: linear-gradient(#202020, #161616); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(229, 229, 229, .06), 0 14px 40px rgba(0, 0, 0, .55);
}
.panel::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(219, 219, 219, .07); pointer-events: none; }
.dim { opacity: .45; filter: saturate(.5); }
.top-row { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
.stores-zone { display: grid; gap: 8px; min-width: 0; align-content: start; }

/* ---------- buttons: carved wood ---------- */
.btn, .act {
  position: relative; cursor: pointer; border-radius: 3px; border: 1px solid #4c4c4c; color: var(--bone);
  background: linear-gradient(#313131, #222222); font: 400 17px/1.2 var(--caps); letter-spacing: .06em;
  box-shadow: 0 3px 0 #0b0b0b, inset 0 1px 0 rgba(233, 233, 233, .14);
  transition: transform .08s, box-shadow .08s, border-color .15s, filter .15s;
}
.btn { padding: 9px 20px; }
.act { display: inline-flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; padding: 8px 14px; text-align: left; max-width: 300px; }
.btn:hover:not(:disabled), .act:hover:not(:disabled) { border-color: var(--ember); filter: brightness(1.15); }
.btn:active:not(:disabled), .act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #0b0b0b, inset 0 2px 4px rgba(0, 0, 0, .5); }
.btn.primary, .act.primary {
  background: linear-gradient(#bd3d21, #822414); border-color: #8e8e8e; color: #f2f2f2; text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  box-shadow: 0 3px 0 #1b1b1b, inset 0 1px 0 rgba(219, 219, 219, .35), 0 0 22px rgba(135, 135, 135, .22);
}
.btn.primary:hover:not(:disabled), .act.primary:hover:not(:disabled) { box-shadow: 0 3px 0 #1b1b1b, inset 0 1px 0 rgba(219, 219, 219, .35), 0 0 34px rgba(135, 135, 135, .5); }
.btn.danger { background: linear-gradient(#6d1710, #1b1b1b); border-color: var(--blood-hi); color: #e3e3e3; }
.btn.big { font-size: 22px; padding: 13px 34px; }
.act.primary { padding: 10px 24px; font-size: 19px; }
.btn:disabled, .act:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.act.quiet { background: none; border-style: dashed; box-shadow: none; color: var(--dim); }
.act.miracle, .btn.miracle { border-color: var(--tallow); color: var(--tallow); text-shadow: 0 0 12px rgba(191, 191, 191, .45); }
.btn.miracle.lit { background: linear-gradient(#c8c8c8, #8a8a8a); color: #1c1c1c; text-shadow: none; box-shadow: 0 3px 0 #363636, 0 0 30px rgba(191, 191, 191, .5); }
.act .ap, .ap {
  display: inline-flex; align-items: center; gap: 3px; font: 400 14px var(--caps); padding: 0 7px; border-radius: 2px;
  background: rgba(0, 0, 0, .35); color: var(--tallow); white-space: nowrap;
}
.act .why { flex-basis: 100%; font: italic 14px var(--body); letter-spacing: 0; color: var(--dim); }
.btnrow, .acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linkbtn, .linkish { background: none; border: 0; padding: 0; cursor: pointer; font: 400 15px var(--caps); letter-spacing: .08em; color: var(--dim); text-decoration: underline dotted; text-underline-offset: 4px; }
.linkbtn:hover, .linkish:hover { color: var(--bone); }
.flame {
  display: inline-block; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 85%, #f1f1f1 0 22%, #b9b9b9 50%, var(--ember) 78%);
}

/* ---------- title screen ---------- */
.title-screen { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 11vh 0 6vh; }
.title-screen > * { animation: rise .7s both; }
.title-screen > :nth-child(2) { animation-delay: .12s; }
.title-screen > :nth-child(3) { animation-delay: .3s; }
.title-screen > :nth-child(4) { animation-delay: .45s; }
.title-screen > :nth-child(n+5) { animation-delay: .6s; }
.runes { font: 22px var(--rune); letter-spacing: .5em; color: var(--blood-hi); opacity: .8; }
.game-title {
  font: 400 clamp(64px, 13vw, 150px)/.86 var(--display); letter-spacing: .01em; color: var(--bone);
  text-shadow: 0 2px 0 #000000, 0 0 60px rgba(135, 135, 135, .35), 0 0 120px rgba(163, 39, 28, .35);
}
.tagline { max-width: 460px; font-style: italic; font-size: 21px; color: var(--dim); margin-bottom: 8px; }
.standing { font-size: 16px; color: var(--dim); }
.options-box { margin-top: 10px; font-size: 15px; color: var(--dim); display: grid; gap: 8px; text-align: left; }
.options-box summary { cursor: pointer; text-align: center; font: 14px var(--caps); letter-spacing: .14em; }
.options-box label { display: block; margin-top: 8px; }
.options-box input[type=number] { width: 100px; font: inherit; padding: 2px 6px; background: var(--peat); border: 1px solid var(--line); color: var(--bone); }

/* ---------- setup step ---------- */
.prep { max-width: 760px; margin: 5vh auto 0; width: 100%; padding: 30px; gap: 22px; animation: rise .5s both; }
.prep-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 28px; align-items: start; }
.prep-grid h3 { font: 400 13px var(--caps); letter-spacing: .16em; text-transform: lowercase; color: var(--dim); margin-bottom: 8px; }
.prep-big { font: 400 54px/1 var(--display); }
.prep-big small { font: 400 15px var(--caps); color: var(--dim); letter-spacing: .1em; }
.tokens { display: flex; flex-wrap: wrap; gap: 8px; }
.event { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.event.quiet { justify-items: center; }
.event-title { font: 400 32px/1 var(--display); }
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.choice {
  display: grid; justify-items: center; gap: 2px; padding: 16px 8px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--tone); background: rgba(0, 0, 0, .3); color: var(--tone); transition: transform .15s var(--thud), box-shadow .15s;
}
.choice:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 24px color-mix(in srgb, var(--tone) 35%, transparent); }
.choice .big { font: 400 50px/1 var(--display); }
.choice .title { font: 18px var(--caps); letter-spacing: .08em; }
.choice .sub { font-size: 14px; font-style: italic; color: var(--dim); }

/* ---------- the year bar ---------- */
.yearbar { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: end; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.when { flex: 1 1 380px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.yr i, .pcard .title i { font: normal 400 .72em var(--caps); letter-spacing: .08em; }
.yr { font: 400 34px/1 var(--display); }
.mo { font: 400 15px var(--caps); letter-spacing: .14em; text-transform: lowercase; color: var(--dim); }
.moons { display: flex; gap: 3px; }
.moon {
  font: normal 19px/1 var(--rune); width: 26px; height: 30px; display: grid; place-items: center; color: var(--faint);
  border-bottom: 2px solid transparent; transition: color .3s;
}
.moon.past { color: #323232; text-shadow: 0 1px 0 rgba(241, 241, 241, .06); }
.moon.now { color: var(--ember); text-shadow: 0 0 12px var(--ember), 0 0 2px #f1f1f1; border-bottom-color: var(--ember); transform: scale(1.18); }
.moon.fx-new { animation: ignite .9s both; }
.woe, .manastat { display: grid; gap: 2px; justify-items: end; text-align: right; }
.marks { display: inline-flex; gap: 6px; }
.mark { font: normal 30px/1 var(--rune); color: #343434; }
.mark.on { color: var(--blood-hi); text-shadow: 0 0 14px rgba(216, 64, 47, .8); }
.mark.fx-new { animation: slam .6s var(--thud) both; }
.woe.grave .mark.on { animation: throb 1.1s ease-in-out infinite alternate; }
.mana { position: relative; font: 400 34px/1 var(--display); color: var(--tallow); text-shadow: 0 0 18px rgba(191, 191, 191, .4); white-space: nowrap; }
.mana.fx-pulse { animation: pulse .5s var(--thud); }
.mana-risk { font: italic 14px var(--body); color: var(--dim); }
.fx-float { position: absolute; right: 0; top: -6px; font-size: 22px; pointer-events: none; animation: float 1.5s ease-out both; }
.fx-float.down { color: var(--blood-hi); text-shadow: none; }

/* ---------- the Omen ---------- */
.omen-stage { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 28px; align-items: center; padding: 6px 0 0 6px; }
.omen-card {
  position: relative; height: 226px; padding: 14px 12px 14px; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center;
  text-align: center; color: var(--tone); border-radius: 4px; border: 1px solid var(--tone);
  background: radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--tone) 7%, #0c0c0c) 0%, #0e0e0e 70%);
  box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 5px color-mix(in srgb, var(--tone) 45%, transparent), 0 18px 40px rgba(0, 0, 0, .7), 0 0 50px color-mix(in srgb, var(--tone) 18%, transparent);
  transform: rotate(-2deg);
}
.omen-card .sigil { width: 100px; height: 100px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 55%, transparent)); }
.omen-card .title { font: 400 32px/1 var(--display); color: var(--bone); }
.omen-card .sub { font: 400 16px var(--caps); letter-spacing: .08em; margin-top: 4px; }
.omen-stage.dire .omen-card { animation: dread 2.2s ease-in-out infinite alternate; }
.omen-stage.averted .omen-card { filter: grayscale(.4) brightness(.8); }
.omen-stage.fx-reveal .omen-card { animation: omen-drop .7s var(--thud) both; }
.omen-stage.fx-reveal.dire .omen-card { animation: omen-drop .7s var(--thud) both, dread 2.2s ease-in-out .7s infinite alternate; }
.omen-stage.fx-reveal .omen-body > * { animation: rise .5s both; animation-delay: .25s; }
.omen-stage.fx-reveal .omen-body > :nth-child(2) { animation-delay: .4s; }
.omen-stage.fx-reveal .omen-body > :nth-child(n+3) { animation-delay: .55s; }
.omen-body { display: grid; gap: 10px; min-width: 0; }
.omen-body .flavour { font-size: 24px; max-width: 30em; }
.toll { display: grid; gap: 6px; }
.dues-row { display: flex; flex-wrap: wrap; gap: 10px; }
.due {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 16px 6px 12px; color: var(--tone);
  background: rgba(0, 0, 0, .4); border-left: 3px solid var(--tone); cursor: help;
}
.due b { font: 400 38px/1 var(--display); color: var(--tone); }
.due .ico { width: 22px; height: 22px; align-self: center; }
.due small { font: 400 15px var(--caps); letter-spacing: .08em; color: var(--dim); text-transform: lowercase; }
.due.none { border-left-color: var(--faint); padding: 12px 14px; }
.scouted { font-style: italic; font-size: 17px; color: #c0c0c0; padding-left: 12px; border-left: 2px dotted var(--dim); }
.scouted.warn { color: var(--food); border-left-color: var(--blood-hi); }
.deeds { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- cards: parchment ---------- */
.hand-zone { display: grid; gap: 10px; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.cards.fan { gap: 10px; padding: 12px 4px 6px; }
.pcard {
  position: relative; isolation: isolate; width: 106px; height: 142px; padding: 12px 8px 11px; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; text-align: center;
  color: var(--ink); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
  transition: transform .18s var(--thud), filter .18s;
}
.pcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 5px; filter: url(#rough);
  background: radial-gradient(ellipse at 40% 30%, #dfdfdf, var(--parch) 55%, var(--parch-lo));
}
.pcard::after { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 2px; box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent); }
.fan .pcard:nth-child(3n+1) { transform: rotate(-2deg); }
.fan .pcard:nth-child(3n+2) { transform: rotate(1.2deg) translateY(3px); }
.fan .pcard:nth-child(3n) { transform: rotate(-.6deg) translateY(-2px); }
.pcard .kind { font-size: 22px; line-height: 1; color: var(--ink); }
.pcard .kind .ico { width: 24px; height: 24px; }
.pcard .big { font: 400 58px/.9 var(--display); color: var(--ink); }
.pcard .title { font: 400 23px/1 var(--display); color: var(--ink); }
.pcard .sub { font: 400 14px/1.15 var(--caps); letter-spacing: .06em; color: var(--parch-ink); opacity: .8; }
.pcard.build::before { background: radial-gradient(ellipse at 40% 30%, color-mix(in srgb, var(--tone) 7%, #dcdad2), color-mix(in srgb, var(--tone) 10%, var(--parch-lo))); }
.pcard:hover:not(.static, .sel, .marked), .fan .pcard:hover:not(.static, .sel, .marked) { transform: translateY(-12px) rotate(0) scale(1.05); z-index: 3; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .7)); }
.pcard.sel, .fan .pcard.sel { transform: translateY(-18px) scale(1.07); z-index: 4; filter: drop-shadow(0 0 14px var(--ember)) drop-shadow(0 16px 14px rgba(0, 0, 0, .7)); }
.pcard.fresh { filter: drop-shadow(0 0 10px var(--tallow)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.pcard.static { cursor: default; }
.pcard.fx-deal { animation: deal .5s var(--thud) backwards; animation-delay: calc(var(--i) * 70ms); }
.pcard.marked, .fan .pcard.marked { transform: translateY(14px) rotate(4deg); filter: grayscale(.7) brightness(.75) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.pcard .ribbon {
  position: absolute; left: -4px; right: -4px; top: 44%; padding: 3px 0; background: var(--blood); color: #ececec; transform: rotate(-8deg);
  font: 400 14px var(--caps); letter-spacing: .14em; text-transform: lowercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.cards.small .pcard { width: 88px; height: 120px; }
.cards.small .pcard .big { font-size: 46px; }
.cards.small .pcard .title { font-size: 18px; }

.options {
  display: grid; gap: 10px; padding: 14px 16px; background: rgba(0, 0, 0, .42); border-left: 3px solid var(--ember);
  animation: unfold .22s ease-out both;
}
.options .about { font-size: 17px; color: #cacaca; }

/* ---------- stores and village ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 2px; }
.work { display: flex; align-items: baseline; gap: 6px; padding: 2px 0 2px 9px; border-left: 2px solid var(--tone); font: 400 16px/1.2 var(--caps); letter-spacing: .06em; color: var(--tone); cursor: help; white-space: nowrap; overflow: hidden; }
.work i { font-style: normal; letter-spacing: .1em; }
.work small { font: italic 13px var(--body); letter-spacing: 0; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.work.none { border-left-color: #2a2a2a; color: #474744; cursor: default; }
.work.fx-built { animation: raise .7s var(--thud) both; }
.work.fx-razed { animation: razed 1s ease-out both; }
.tile {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 7px 14px; min-height: 66px;
  background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)); border: 1px solid var(--line); border-bottom: 3px solid color-mix(in srgb, var(--tone) 60%, #000000);
}
.tile-name { font: 400 16px var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--tone); }
.tile-total { font: 400 34px/.9 var(--display); color: var(--tone); grid-row: span 2; }
.tile.bare .tile-total, .tile.bare .tile-name { opacity: .4; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 28px; align-items: center; }
.chip, .chip.static {
  min-width: 30px; padding: 1px 7px 2px; border: 0; border-radius: 2px; cursor: pointer; text-align: center;
  font: 400 21px/1.15 var(--display); color: var(--ink); background: linear-gradient(#dcdcdc, var(--parch-lo));
  box-shadow: 0 3px 0 #626262, 0 5px 8px rgba(0, 0, 0, .5); transition: transform .15s var(--thud), box-shadow .15s;
}
.chip:nth-child(odd) { transform: rotate(-2deg); }
.chip:nth-child(even) { transform: rotate(1.5deg); }
.chip:hover:not(.static, .sel) { transform: translateY(-4px); }
.chip.credit { outline: 1px dashed var(--ink); outline-offset: -3px; }
.chip.sel { transform: translateY(-6px) scale(1.1); box-shadow: 0 3px 0 #626262, 0 0 16px var(--ember); }
.chip.static { cursor: default; }
.chip.fx-new { animation: chip-in .5s var(--thud) backwards; }
.chip .ico { width: 16px; height: 16px; }
  display: grid; gap: 2px; align-content: center; padding: 7px 14px; min-height: 66px; color: var(--tone);
  background: linear-gradient(#262626, #1a1a1a); border: 1px solid var(--line); border-top: 3px solid var(--tone); cursor: help;
}

/* ---------- pickers: spending and the reckoning ---------- */
.picker.panel { max-width: 720px; width: 100%; margin: 0 auto; border-color: #606060; }
.picker.reckoning { border-color: var(--blood); box-shadow: inset 0 1px 0 rgba(229, 229, 229, .06), 0 14px 40px rgba(0, 0, 0, .55), 0 0 60px rgba(163, 39, 28, .25); }
.hand-zone.picker { padding: 16px 18px; background: rgba(0, 0, 0, .35); border: 1px dashed #606060; }
.pay-bill { display: grid; gap: 12px; padding: 14px 16px; background: rgba(0, 0, 0, .35); }
.pay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 400 30px/1 var(--display); }
.pay-head b { color: inherit; }
.tally { font: 400 26px/1 var(--display); }
.tally.ok { color: var(--bone); text-shadow: 0 0 14px rgba(255, 255, 255, .45); }
.tally small { font: 400 15px var(--caps); letter-spacing: .14em; text-transform: lowercase; margin-left: 4px; }
.tally.bad { color: var(--blood-hi); }
.tally.warn { color: var(--tallow); }
.srcs { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.src {
  display: grid; justify-items: center; gap: 1px; min-width: 86px; padding: 7px 12px 6px; border: 0; border-radius: 2px; cursor: pointer;
  color: var(--ink); background: linear-gradient(#dcdcdc, var(--parch-lo)); opacity: .62;
  box-shadow: 0 3px 0 #626262, 0 5px 8px rgba(0, 0, 0, .5); transition: transform .15s var(--thud), opacity .15s, box-shadow .15s;
}
.src .v { font: 400 26px/1 var(--display); color: var(--ink); }
.src .k { font: 400 13px var(--caps); letter-spacing: .08em; color: var(--parch-ink); opacity: .75; }
.src:hover:not(:disabled) { opacity: .85; }
.src.on { opacity: 1; transform: translateY(-7px) rotate(-1.5deg); box-shadow: 0 3px 0 #626262, 0 0 0 2px var(--ember), 0 0 18px rgba(135, 135, 135, .6); }
.src:disabled { opacity: .25; cursor: not-allowed; }
.consequence { padding: 10px 14px; font-size: 18px; }
.consequence.bad { color: #dddddd; background: rgba(163, 39, 28, .35); border-left: 3px solid var(--blood-hi); }
.consequence.bad .mark { font-size: 22px; margin-right: 4px; vertical-align: -2px; }
.consequence.lethal { animation: throb .9s ease-in-out infinite alternate; }
.consequence.warn { color: var(--tallow); background: rgba(191, 191, 191, .1); border-left: 3px solid var(--tallow); }
.miracle-confirm { display: grid; gap: 12px; background: rgba(191, 191, 191, .08); border: 1px solid var(--tallow); color: var(--bone); animation: unfold .22s ease-out both; }
.error { color: var(--blood-hi); font-style: italic; }

/* ---------- single-panel stages: disaster, the turn of the year, the end ---------- */
.over { max-width: 680px; width: 100%; margin: 3vh auto 0; padding: 34px 36px; justify-items: center; text-align: center; gap: 16px; }
.over .screen-title { font-size: 58px; }
.over > .sigil { width: 96px; height: 96px; }
.over.win { border-color: #656565; }
.over.win > .sigil, .over.win .screen-title { color: var(--tallow); text-shadow: 0 0 30px rgba(191, 191, 191, .35); }
.over.loss { border-color: var(--blood); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 80px rgba(163, 39, 28, .3); }
.over.loss > .sigil { color: var(--blood-hi); filter: drop-shadow(0 0 14px rgba(216, 64, 47, .6)); }
.over .btnrow { justify-content: center; margin-top: 6px; }
.over .toll { justify-items: center; }
.fx-enter { animation: rise .5s both; }
.disaster-panel.fx-strike { animation: strike .7s both; }
.disaster-panel.fx-strike > .sigil { animation: slam .7s var(--thud) both; }
.fallen .screen-title { color: var(--blood-hi); }
.score { display: flex; align-items: center; gap: 16px; text-align: left; cursor: help; }
.score-n { font: 400 70px/.9 var(--display); color: var(--tallow); }
.score-parts { display: grid; gap: 2px; font-size: 16px; color: var(--dim); }
.brings { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.brings li { padding: 4px 12px; background: rgba(0, 0, 0, .4); border-left: 3px solid var(--faint); font: 400 16px var(--caps); letter-spacing: .06em; cursor: default; }
.brings li.good { border-left-color: var(--moss); color: #d6d6d6; }
.brings li.bad { border-left-color: var(--blood-hi); color: #c4c4c4; }
.brings li[title] { cursor: help; }
.reckon { display: grid; gap: 4px; padding: 14px 18px; background: rgba(191, 191, 191, .06); border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c; }
.reckon .mana { font-size: 30px; }
.risen { color: var(--tallow); font-size: 22px; text-shadow: 0 0 20px rgba(191, 191, 191, .5); }

/* ---------- chronicle ---------- */
.chronicle { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding-top: 10px; }
.chronicle .abandon { margin-left: auto; color: #5e5e5e; }
.chronicle .abandon:hover { color: var(--blood-hi); }
.log { flex-basis: 100%; max-height: 260px; overflow-y: auto; font-size: 16px; display: grid; gap: 2px; padding: 14px 18px; background: rgba(0, 0, 0, .4); border-left: 2px solid var(--line); color: #c3c3c3; }
.log .rd { font: 400 13px var(--caps); letter-spacing: .16em; text-transform: lowercase; color: var(--faint); margin-top: 8px; }
.log .rd:first-child { margin-top: 0; }
.log .ev.bad { color: var(--blood-hi); }

/* ---------- the juice ---------- */
.board.fx-shake { animation: shake .55s both; }
.board.fx-quake { animation: shake .4s both; }
.board.fx-shake::before {
  content: ""; position: fixed; inset: -50vh -50vw; z-index: 80; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(163, 20, 12, .75) 100%); animation: bleed 1.1s ease-out both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes unfold { from { opacity: 0; transform: translateY(-8px) scaleY(.9); } }
@keyframes deal { from { opacity: 0; transform: translate(70px, -60px) rotate(14deg) scale(.8); } }
@keyframes chip-in { 0% { opacity: 0; transform: translateY(-34px) scale(1.6) rotate(-12deg); } 70% { opacity: 1; } }
@keyframes omen-drop { 0% { opacity: 0; transform: translateY(-90px) rotate(-12deg) scale(1.25); } 60% { opacity: 1; } 100% { transform: rotate(-2deg); } }
@keyframes dread { from { box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 5px var(--blood), 0 18px 40px rgba(0, 0, 0, .7), 0 0 30px rgba(216, 64, 47, .25); } to { box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 5px var(--blood-hi), 0 18px 40px rgba(0, 0, 0, .7), 0 0 80px rgba(216, 64, 47, .7); } }
@keyframes ignite { 0% { color: #f1f1f1; text-shadow: 0 0 30px #f1f1f1; transform: scale(2.2); } 100% { transform: scale(1.18); } }
@keyframes slam { 0% { opacity: 0; transform: scale(3.4) rotate(-20deg); } 55% { opacity: 1; transform: scale(.9) rotate(4deg); } 100% { transform: none; } }
@keyframes throb { from { filter: brightness(.9); } to { filter: brightness(1.5); } }
@keyframes pulse { 40% { transform: scale(1.25); } }
@keyframes float { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-38px); } }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 35% { transform: scale(.92, 1.08) rotate(2deg); } 70% { transform: scale(1.05, .94) rotate(-1deg); } 100% { transform: scale(.96, 1.1) rotate(3deg); } }
@keyframes smoke { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translate(8px, -44px) scale(2.6); } }
@keyframes raise { 0% { opacity: 0; transform: translateY(24px) scaleY(.4); filter: brightness(2.2); } 100% { transform: none; } }
@keyframes razed { 0% { background: rgba(216, 64, 47, .7); transform: scale(1.06); } 100% { transform: none; } }
@keyframes shake { 10% { transform: translate(-9px, 3px) rotate(-.5deg); } 25% { transform: translate(8px, -4px) rotate(.5deg); } 40% { transform: translate(-6px, 2px); } 55% { transform: translate(5px, -2px); } 70% { transform: translate(-3px, 1px); } 85% { transform: translate(2px, 0); } }
@keyframes bleed { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes strike { 0% { filter: brightness(4) saturate(0); transform: scale(1.04); } 12% { filter: brightness(.6); } 20% { filter: brightness(2.6) saturate(.2); } 100% { filter: none; transform: none; } }

@media (max-width: 780px) {
  .omen-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .omen-card { width: 170px; height: 220px; }
  .top-row, .prep-grid { grid-template-columns: minmax(0, 1fr); }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard { width: 96px; height: 132px; }
  .pcard .big { font-size: 50px; }
  .screen-title, .over .screen-title { font-size: 40px; }
}

/* ---------- bleak: austere capitals, stark light ---------- */
.screen-title, .event-title, .yr, .game-title, .omen-card .title { text-transform: uppercase; letter-spacing: .14em; }
.screen-title { font-size: 32px; line-height: 1.15; }
.over .screen-title { font-size: 40px; }
.game-title { font-size: clamp(40px, 8.4vw, 104px); letter-spacing: .2em; margin-right: -.2em; text-shadow: 0 0 60px rgba(255, 255, 255, .16); }
.yr { font-size: 24px; }
.omen-card .title { font-size: 21px; letter-spacing: .12em; }
.pcard .title, .plot-name { font: 400 19px/1.1 var(--caps); letter-spacing: .06em; }
.event-title { font-size: 24px; }
.runes { color: var(--faint); }
.flavour { color: #b9b7b0; }
.btn.primary, .act.primary {
  background: #dedcd5; border-color: #fff; color: #050505; text-shadow: none;
  box-shadow: 0 3px 0 #000, 0 0 26px rgba(255, 255, 255, .12);
}
.btn.primary:hover:not(:disabled), .act.primary:hover:not(:disabled) { box-shadow: 0 3px 0 #000, 0 0 40px rgba(255, 255, 255, .35); filter: none; background: #fff; }
.btn, .act { background: #111; border-color: #4a4a47; box-shadow: 0 3px 0 #000; }
.btn.primary, .act.primary { background: #dedcd5; }
.btn.danger { background: linear-gradient(#7a120e, #3f0806); border-color: var(--blood-hi); color: #f3d6d2; }
.act.miracle, .btn.miracle { border: 1px solid var(--bone); color: var(--bone); text-shadow: 0 0 14px rgba(255, 255, 255, .5); }
.btn.miracle.lit { background: #f1efe8; color: #050505; text-shadow: none; box-shadow: 0 3px 0 #000, 0 0 40px rgba(255, 255, 255, .45); }
.panel { background: #0d0d0d; }
.omen-stage.dire .omen-card { --tone: var(--blood-hi); }
.mark.on, .tally.bad, .scouted.warn, .log .ev.bad, .fallen .screen-title, .error { color: var(--blood-hi); }
.over.loss > .sigil { color: var(--blood-hi); }
.pcard { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .85)) contrast(1.05); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-18px, 12px); } 40% { transform: translate(14px, -22px); } 60% { transform: translate(-26px, -8px); } 80% { transform: translate(22px, 18px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .snow { display: none; }
}

/* ---------- turn dock: end-month seal, candles, miracle orb ---------- */
.dock {
  display: flex; align-items: center; gap: 0; margin-top: 4px;
}
.seal { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dim); }
.seal .disc {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  position: relative; margin: 9px; background: #0c0c0c; border: 1px solid #3c3c38; box-shadow: 0 4px 10px #000;
  transition: transform .1s, background .2s, box-shadow .2s;
}
.seal .moon-ico { width: 32px; height: 32px; fill: #8c8a84; transition: fill .2s; }
.seal .ring { position: absolute; inset: -10px; width: 96px; height: 96px; overflow: visible; pointer-events: none; }
.ring .seg { fill: none; stroke-width: 3; stroke-linecap: butt; }
.ring .seg.lit { stroke: #f1efe8; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .75)); }
.ring .seg.out { stroke: #2b2b28; }
.ring .seg.fx-snuff { animation: seg-out .7s ease-out both; }
@keyframes seg-out { 0% { stroke: #fff; stroke-width: 6; filter: drop-shadow(0 0 10px #fff); } 100% { stroke: #2b2b28; stroke-width: 3; filter: none; } }
.seal .cap { font: 400 12px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; }
.seal:hover .disc { border-color: var(--bone); transform: translateY(-2px); }
.seal:hover .moon-ico { fill: var(--bone); }
.seal:hover .cap { color: var(--bone); }
.seal:active .disc { transform: translateY(2px) scale(.96); }
.dock.ready .seal { color: var(--bone); }
.dock.ready .seal .disc { background: #e6e4dc; border-color: #fff; animation: beckon 1.6s ease-in-out infinite alternate; }
.dock.ready .seal .moon-ico { fill: #050505; }
@keyframes beckon {
  from { box-shadow: 0 0 10px rgba(255, 255, 255, .15); }
  to { box-shadow: 0 0 34px rgba(255, 255, 255, .55); }
}
.orb-wrap { display: inline-grid; }
.sats { display: grid; grid-template-rows: 40px 40px; gap: 1px; margin-left: -5px; align-self: center; }
.orb {
  position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: #0c0c0c; border: 1px solid var(--bone); color: var(--bone); box-shadow: 0 0 14px rgba(255, 255, 255, .22);
  transition: transform .1s, box-shadow .2s;
}
.orb i { font-style: normal; font-size: 19px; line-height: 1; text-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.orb b { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 3px); font: 400 13px/1 var(--display); color: var(--dim); }
.orb:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255, 255, 255, .5); }
.orb:disabled { cursor: not-allowed; opacity: .32; border-color: #55554f; box-shadow: none; }
.orb:disabled i { text-shadow: none; }
.orb.skull { border-color: #3c3c38; color: #77756f; box-shadow: none; }
.orb.skull svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.orb.skull:hover:not(:disabled) { color: var(--blood-hi); border-color: var(--blood-hi); box-shadow: 0 0 18px rgba(216, 64, 47, .45); }
.reckon .mana.big { font: 400 64px/1 var(--display); }
.yr small { margin-left: 12px; font: 400 13px var(--caps); letter-spacing: .14em; text-transform: lowercase; color: var(--dim); cursor: help; }
.src-groups { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.src-group { display: grid; gap: 2px; justify-items: start; }
.src-group .label { cursor: help; }

/* ---------- the reckoning, played on the board ---------- */
.due-stage { display: grid; gap: 10px; justify-items: start; align-content: start; padding: 6px 0 0 6px; min-height: 254px; box-sizing: border-box; --tone: var(--bone); }
.due-stage.fx-enter { animation: due-in .45s var(--thud) both; }
@keyframes due-in { from { opacity: 0; transform: translateX(-60px); } }
.due-stage .screen-title { font-size: 34px; color: var(--blood-hi); }
.owed { display: flex; align-items: baseline; gap: 34px; flex-wrap: wrap; }
.owed-n { display: inline-flex; align-items: baseline; gap: 10px; }
.owed-n b { font: 400 62px/.9 var(--display); color: var(--tone); }
.owed-n .ico { width: 34px; height: 34px; align-self: center; color: var(--tone); }
.owed-n small { font: 400 17px var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--dim); }
.owed .tally { font: 400 34px/1 var(--display); }
.due-stage .btnrow { align-items: center; gap: 16px; }
.due-stage .consequence { justify-self: stretch; }
.works.fx-leave { animation: leave .4s ease-in both; pointer-events: none; }
@keyframes leave { to { opacity: 0; transform: translateY(18px); } }
.stores-zone .tile.off { opacity: .22; filter: grayscale(1); transition: opacity .3s; }
.stores-zone .tile.live { box-shadow: 0 0 0 1px var(--tone), 0 0 22px color-mix(in srgb, var(--tone) 22%, transparent); }
.stores-zone .tile.live .chip { cursor: pointer; }
.pcard.off { opacity: .22; filter: grayscale(1); }
.pcard .counts {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); padding: 2px 9px; white-space: nowrap;
  background: #0a0a0a; border: 1px solid #55554f; color: var(--bone); font: 400 13px var(--caps); letter-spacing: .1em; text-transform: lowercase;
}
.hand-zone.pay .cards.fan { padding-bottom: 22px; }

/* reckoning: a narrow debt, and the Stores large enough to pick from */
@media (min-width: 781px) { .stage-reckoning .top-row { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; } }
.due-stage .screen-title { font-size: 25px; line-height: 1.15; }
.owed { gap: 6px 22px; }
.stores-zone.pay .tiles { display: flex; flex-wrap: wrap; gap: 14px; }
.stores-zone.pay .tile { flex: 1 1 260px; grid-template-columns: 1fr auto; padding: 14px 20px 18px; min-height: 150px; align-content: start; }
.stores-zone.pay .tile-name { font-size: 20px; }
.stores-zone.pay .tile-name .ico { width: 24px; height: 24px; }
.stores-zone.pay .tile-total { font-size: 50px; grid-row: auto; }
.stores-zone.pay .chips { grid-column: 1 / -1; gap: 14px; padding-top: 10px; min-height: 70px; }
.stores-zone.pay .chip { min-width: 62px; padding: 10px 12px 12px; font-size: 42px; line-height: 1; box-shadow: 0 4px 0 #626262, 0 8px 12px rgba(0, 0, 0, .55); }
.stores-zone.pay .chip:hover:not(.static, .sel) { transform: translateY(-6px); }
.stores-zone.pay .chip.sel { transform: translateY(-10px) scale(1.06); box-shadow: 0 4px 0 #626262, 0 0 0 2px #fff, 0 0 26px rgba(255, 255, 255, .6); }
.btn.suffer { white-space: nowrap; }
.btn.suffer .marks { font-family: var(--body); letter-spacing: .08em; margin: 0 2px; }
.doom { color: var(--blood-hi); font: 400 15px var(--caps); letter-spacing: .14em; text-transform: lowercase; }
.due-stage .btn.big { font-size: 18px; padding: 11px 18px; }