/* ============================================================
   浮生 · the 年代画报 look: a life as a pictorial magazine of the
   1980s–2000s. Newsprint and three spot inks (red, cobalt, yellow)
   over black; 黑体 headlines, 宋体 text, condensed figures; halftone
   dots, one-ink stamps, ration tickets, starburst stickers, crop marks.
   Heavy moments (送别, 急症, the card a life ends on) go black and white.

   It is laid over index.html's own styles, which stay the page's
   structure. Every rule starts with :root so that it outranks the
   page's rule for the same element by one class, whatever order the
   two were written in.
   New UI picks the look up by using the page's variables (--ink,
   --paper, --text, --muted, --line …, redefined below) and the tokens
   here (--k, --red, --blue, --yellow, --hl, --hei, --song, --num), and
   the shared pieces: .panel, .card, .btn, .tag, .chip-btn, .lstat.
   look/look.js marks <body data-screen>, body.screen-enter and
   #lot.fresh, and puts in the url(#duo-…) filters.
   ============================================================ */

:root {
  --ink: #efe7d1;
  --ink2: #f8f3e4;
  --ink3: #ece3cb;
  --line: #c6b997;
  --line2: #9d8f70;
  --text: #1d1b18;
  --muted: #514839;
  --faint: #6b604f;
  --paper: #fcf8ee;
  --paper2: #f3ecdb;
  --paper-line: #cbbd9c;
  --paper-ink: #1d1b18;
  --paper-muted: #574d3f;
  --cinnabar: #bf2d24;
  --gold: #855a0a;
  --jade: #1a6b45;
  --rose: #bf2d24;
  --amber: #94520a;
  --k: #1d1b18;
  --red: #d63327;
  --blue: #1e4f9c;
  --yellow: #f5c33b;
  --green: #23845a;
  --pink: #f6d2c6;
  --sky: #cfe0ec;
  --cream: #fffdf6;
  --hl: #fff3c9;
  /* system fonts: macOS and iOS first, then Linux and Android (Noto CJK), then Windows; what is missing falls through to
     the generic family, which on each system is its own CJK font */
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --hei: "Hiragino Sans GB", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --song: "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", "NSimSun", serif;
  /* the figures: DIN Condensed (Bold only) on Apple systems; elsewhere a condensed sans, or Bahnschrift at full width */
  --num: "DIN Condensed", "Bahnschrift Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Bahnschrift", "Hiragino Sans GB", "PingFang SC", sans-serif;
  --lat: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --burst: polygon(50% 0%, 56.8% 11.6%, 67.1% 3%, 69.5% 16.2%, 82.1% 11.7%, 79.9% 24.9%, 93.3% 25%, 86.6% 36.7%, 99.2% 41.3%, 89% 50%, 99.2% 58.7%, 86.6% 63.3%, 93.3% 75%, 79.9% 75.1%, 82.1% 88.3%, 69.5% 83.8%, 67.1% 97%, 56.8% 88.4%, 50% 100%, 43.2% 88.4%, 32.9% 97%, 30.5% 83.8%, 17.9% 88.3%, 20.1% 75.1%, 6.7% 75%, 13.4% 63.3%, 0.8% 58.7%, 11% 50%, 0.8% 41.3%, 13.4% 36.7%, 6.7% 25%, 20.1% 24.9%, 17.9% 11.7%, 30.5% 16.2%, 32.9% 3%, 43.2% 11.6%);
  --burst12: polygon(50% 0%, 61.1% 8.5%, 75% 6.7%, 80.4% 19.6%, 93.3% 25%, 91.5% 38.9%, 100% 50%, 91.5% 61.1%, 93.3% 75%, 80.4% 80.4%, 75% 93.3%, 61.1% 91.5%, 50% 100%, 38.9% 91.5%, 25% 93.3%, 19.6% 80.4%, 6.7% 75%, 8.5% 61.1%, 0% 50%, 8.5% 38.9%, 6.7% 25%, 19.6% 19.6%, 25% 6.7%, 38.9% 8.5%);
  /* perforated edges (a mask): a bite every 10px on all four sides, or every 7px for stamps */
  --perf:
    radial-gradient(circle at 50% 0, transparent 3px, #000 3.5px) 0 0 / 10px 100% round no-repeat,
    radial-gradient(circle at 50% 100%, transparent 3px, #000 3.5px) 0 0 / 10px 100% round no-repeat,
    radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) 0 0 / 100% 10px no-repeat round,
    radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) 0 0 / 100% 10px no-repeat round;
  --perf-s:
    radial-gradient(circle at 50% 0, transparent 2.1px, #000 2.6px) 0 0 / 7px 100% round no-repeat,
    radial-gradient(circle at 50% 100%, transparent 2.1px, #000 2.6px) 0 0 / 7px 100% round no-repeat,
    radial-gradient(circle at 0 50%, transparent 2.1px, #000 2.6px) 0 0 / 100% 7px no-repeat round,
    radial-gradient(circle at 100% 50%, transparent 2.1px, #000 2.6px) 0 0 / 100% 7px no-repeat round;
  --hatch:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px 5px);
  --colorbar: linear-gradient(90deg, #00a1e4 0 12.5%, #e5007e 0 25%, #ffe100 0 37.5%, #1d1b18 0 50%, #d63327 0 62.5%, #1e4f9c 0 75%, #23845a 0 87.5%, #f5c33b 0);
  color-scheme: light;
}
:root .lstat b, :root .tdie b, :root .die b, :root .money-big,
:root .tray .sum b, :root .ab-energy b, :root .grade, :root .peer b,
:root .mini em, :root .epitaph .years, :root .opt::before, :root .odds,
:root .mod b, :root .round b, :root .daily-btn small, :root .card.turn h2 { font-variant-numeric: lining-nums tabular-nums; }
/* (every use of --num asks for its bold, the one weight DIN Condensed has, so a fallback font is as heavy) */
:root .lstat b, :root .tdie b, :root .die b, :root .money-big, :root .ab-energy b, :root .grade, :root .peer b,
:root .mini em, :root .epitaph .years, :root .opt::before, :root .mod b, :root .round b, :root .daily-btn small,
:root .card.turn h2, :root .timeline .yr, :root .chron .e .when, :root .fate .wi .when, :root .moments .m .when { font-weight: 700; }

/* ---------- the page: newsprint, with halftone dots fading in from two corners ---------- */
:root body { background-color: var(--ink); background-image: url(grain.svg); color: var(--text); }
:root body::before, :root body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
:root body::before {
  background: radial-gradient(rgba(214, 51, 39, .2) 1.7px, transparent 2.1px) 0 0 / 11px 11px;
  -webkit-mask: radial-gradient(ellipse 42% 50% at 100% 0, #000, transparent 72%); mask: radial-gradient(ellipse 42% 50% at 100% 0, #000, transparent 72%);
}
:root body::after {
  background: radial-gradient(rgba(30, 79, 156, .2) 1.7px, transparent 2.1px) 5px 5px / 11px 11px;
  -webkit-mask: radial-gradient(ellipse 40% 46% at 0 100%, #000, transparent 72%); mask: radial-gradient(ellipse 40% 46% at 0 100%, #000, transparent 72%);
}
:root .screen { position: relative; z-index: 1; }
:root ::selection { background: rgba(245, 195, 59, .55); }
:root .hint { color: var(--faint); }

/* ---------- top bar: the masthead strip, a thick and a thin rule under it ---------- */
:root .top {
  background: rgba(239, 231, 209, .97); backdrop-filter: none;
  border-bottom: 3px solid var(--k); box-shadow: 0 2px 0 var(--ink), 0 3.5px 0 var(--k);
}
:root .brand { align-items: center; gap: 10px; }
:root .brand b {
  font-family: var(--kai); font-size: 19px; line-height: 1; letter-spacing: 3px; padding: 5px 4px 4px 7px;
  color: #fff; background: var(--red); border: 2px solid var(--k); box-shadow: 2px 2px 0 var(--k);
}
:root .brand small { font-family: var(--lat); font-weight: 700; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--k); }
:root .top .status { color: var(--muted); }
:root .top .status b { color: var(--k); font-family: var(--hei); font-weight: 700; }

/* ---------- buttons: printed blocks with a hard shadow that press flat ---------- */
:root .btn {
  color: var(--k); background: var(--cream); border: 2px solid var(--k); border-radius: 0; font-weight: 600;
  box-shadow: 3px 3px 0 var(--k); transition: transform .08s, box-shadow .08s, background .12s;
}
:root .btn:hover { border-color: var(--k); background: var(--hl); }
:root .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k); }
:root .btn.ghost { background: transparent; box-shadow: none; }
:root .btn.ghost:hover { background: rgba(245, 195, 59, .35); }
:root .btn.ghost:active { transform: translate(1px, 1px); }
:root .btn.primary,
:root .oconfirm .btn.primary,
:root .actionbar .btn.primary,
:root .card.turn .foot .btn.primary {
  color: #fff; background: var(--red); border: 2px solid var(--k); font-weight: 700; letter-spacing: 2px; box-shadow: 3px 3px 0 var(--k);
}
:root .btn.primary:hover { background: #e23f2f; }
:root .btn.big { padding: 11px 24px; font-size: 16px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--k); }
:root .btn.primary.big { font-size: 19px; letter-spacing: 6px; padding: 12px 30px 12px 36px; }
:root .btn.big:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--k); }
:root .btn:disabled:active { transform: none; }
:root select.btn, :root .field select, :root .field input {
  background-color: var(--cream); color: var(--k); border: 2px solid var(--k); border-radius: 0; box-shadow: none;
}
:root .field label { color: var(--k); font-weight: 700; }
:root .field input::placeholder { color: var(--faint); }
:root .linkish { color: var(--cinnabar); text-decoration-color: rgba(191, 45, 36, .5); }
:root kbd { opacity: .6; }

/* ---------- panels: pages in black frames; a red bar under a headline ---------- */
:root .panel {
  background: url(grain.svg), var(--paper); border: 2px solid var(--k); border-radius: 0;
  box-shadow: 5px 5px 0 var(--k); padding: 20px 22px;
}
:root .side3, :root .lifebar { background: url(grain.svg), var(--paper); border: 2px solid var(--k); border-radius: 0; box-shadow: 4px 4px 0 var(--k); }
:root .lastyear, :root .chron, :root .montage, :root .autoyears, :root .kidpage,
:root .sumfold > summary, :root .fate-col, :root .stat, :root .person, :root .talent {
  background: var(--paper); border: 2px solid var(--k); border-radius: 0;
}
:root .panel h2, :root .intro h1, :root .modal .box h2 {
  font-family: var(--hei); font-weight: 700; font-size: 26px; letter-spacing: 3px; color: var(--k);
}
:root .panel h2::after, :root .modal .box h2::after { content: ''; display: block; width: 44px; height: 6px; margin-top: 8px; background: var(--red); }
:root .panel h3, :root .side3 h3:not(.sp-h) { font-family: var(--hei); font-weight: 700; font-size: 14px; letter-spacing: 3px; color: var(--k); }
:root .panel h3::before, :root .side3 h3:not(.sp-h)::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; background: var(--red); }
:root .tag { border: 1.5px solid var(--k); border-radius: 0; color: var(--k); background: var(--cream); font-weight: 600; }
:root .tag.gold { background: var(--yellow); }
:root .tag.red { color: #fff; background: var(--red); }
:root .tag.jade { background: #cfe6d5; }
:root .chip-btn { color: var(--k); background: var(--cream); border: 2px solid var(--k); border-radius: 0; font-weight: 600; box-shadow: 2px 2px 0 var(--k); }
:root .chip-btn.on { color: #fff; background: var(--k); }
:root .chip-btn.on .lk { color: var(--yellow); }
:root .coach { color: var(--k); background: var(--hl); border: 2px solid var(--k); border-left: 8px solid var(--red); border-radius: 0; }
:root .coach b { color: var(--cinnabar); }

/* ============================================================
   标题: a magazine cover on a sunburst. The masthead in white on red,
   a strap line, the one life as a set of one-ink stamps, the day's
   life as a train ticket; crop marks and a colour bar round the sheet
   ============================================================ */
:root body[data-screen="title"] {
  background-image:
    radial-gradient(circle at 50% 46%, transparent 0 14%, rgba(239, 231, 209, .78) 44%, var(--ink) 70%),
    repeating-conic-gradient(from -2deg at 50% 46%, rgba(245, 195, 59, .62) 0deg 5deg, rgba(245, 195, 59, 0) 5deg 10deg),
    url(grain.svg);
}
:root .title-screen { position: relative; padding: 34px 24px 56px; }
:root .title-screen > div {
  position: relative; width: min(740px, 100%); padding: 0 0 26px;
  background: url(grain.svg), var(--paper); border: 3px solid var(--k); box-shadow: 12px 12px 0 var(--k);
}
:root .title-screen > div::before {
  content: ''; position: absolute; inset: -32px; pointer-events: none;
  background:
    linear-gradient(var(--k), var(--k)) left 0 top 32px / 20px 1px no-repeat, linear-gradient(var(--k), var(--k)) left 32px top 0 / 1px 20px no-repeat,
    linear-gradient(var(--k), var(--k)) right 0 top 32px / 20px 1px no-repeat, linear-gradient(var(--k), var(--k)) right 32px top 0 / 1px 20px no-repeat,
    linear-gradient(var(--k), var(--k)) left 0 bottom 32px / 20px 1px no-repeat, linear-gradient(var(--k), var(--k)) left 32px bottom 0 / 1px 20px no-repeat,
    linear-gradient(var(--k), var(--k)) right 0 bottom 32px / 20px 1px no-repeat, linear-gradient(var(--k), var(--k)) right 32px bottom 0 / 1px 20px no-repeat,
    url(regmark.svg) center top / 22px no-repeat, url(regmark.svg) left top 50% / 22px no-repeat, url(regmark.svg) right top 50% / 22px no-repeat;
}
:root .title-screen > div::after { content: ''; position: absolute; right: 0; bottom: -26px; width: 216px; height: 11px; background: var(--colorbar); }
:root .title-screen h1 {
  margin: 0; padding: 24px 0 18px; border-bottom: 3px solid var(--k);
  background: radial-gradient(rgba(0, 0, 0, .1) 1.5px, transparent 2px) 0 0 / 8px 8px, linear-gradient(180deg, #db3a2c, #c92d22);
  color: #fff; font-family: var(--kai); font-size: clamp(88px, 9vw, 116px); line-height: 1; letter-spacing: 34px; text-indent: 34px;
  text-shadow: 4px 4px 0 var(--k);
}
:root .title-screen .sub {
  margin: 0; padding: 7px 0 6px; background: var(--k); color: var(--yellow);
  font-family: var(--lat); font-weight: 700; font-size: 12.5px; letter-spacing: 9px; text-indent: 9px;
}
:root .title-screen .sub::before, :root .title-screen .sub::after { content: '★'; margin: 0 16px; letter-spacing: 0; }
:root .liferow { gap: 14px; margin: 28px auto 0; filter: drop-shadow(2px 3px 0 rgba(29, 27, 24, .5)); }
:root .liferow::before { display: none; }
:root .liferow img {
  width: 86px; height: 106px; padding: 8px; border: 0; border-radius: 0; object-fit: cover; object-position: center 28%;
  background: var(--cream); box-shadow: inset 0 0 0 6px var(--cream), inset 0 0 0 7.5px #4a4a4a;
  -webkit-mask: var(--perf-s); -webkit-mask-composite: source-in; mask: var(--perf-s); mask-composite: intersect;
  transform: rotate(var(--r, 0deg));
  animation: printStamp .5s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--i) * 110ms + 300ms);
}
:root .liferow img:nth-child(1) { filter: url(#duo-red); --r: -4deg; }
:root .liferow img:nth-child(2) { filter: url(#duo-blue); --r: 2.5deg; margin-top: 9px; }
:root .liferow img:nth-child(3) { filter: url(#duo-green); --r: -1.5deg; }
:root .liferow img:nth-child(4) { filter: url(#duo-brown); --r: 3deg; margin-top: 7px; }
:root .liferow img:nth-child(5) { filter: url(#duo-violet); --r: -2.5deg; }
@keyframes printStamp { from { opacity: 0; transform: translateY(-22px) scale(1.25) rotate(calc(var(--r, 0deg) * -3)); } }
:root .title-screen .lede,
:root .title-screen .liferow + .lede { max-width: 640px; margin: 24px auto 22px; padding: 0 24px; color: var(--k); font-family: var(--song); font-size: 16px; line-height: 1.95; }
:root .title-screen .row { gap: 16px; }
:root .title-screen .save-note { color: var(--muted); }
:root .title-screen .daily {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 34px 0; padding: 14px 18px; text-align: left;
  background: var(--hatch), var(--pink); border: 2px solid var(--k);
}
:root .daily-btn { flex: none; color: var(--cinnabar); font-family: var(--hei); font-weight: 700; letter-spacing: 2px; }
:root .daily-btn small { color: var(--k); font-family: var(--num); font-size: 15px; letter-spacing: 1px; }
:root .title-screen .daily .dnote { flex: 1; min-width: 220px; margin: 0; padding-left: 18px; border-left: 2px dashed rgba(29, 27, 24, .55); color: var(--k); }
:root .title-screen .daily .dnote b { color: var(--cinnabar); }
:root .daily-recent { flex-basis: 100%; border-top: 2px dashed rgba(29, 27, 24, .45); }
:root .daily-recent .dr .de { color: var(--muted); }

/* ============================================================
   投胎: the ward as a one-ink photo; the lot as four ration tickets,
   face down in airmail stripes while shuffled, turned over when drawn
   ============================================================ */
:root .panel:has(#lot)::before {
  content: ''; display: block; margin: -20px -22px 18px; aspect-ratio: 21 / 7; border-bottom: 2.5px solid var(--k);
  background: url(../assets/scenes/common_birth_new.webp) center 38% / cover no-repeat;
  filter: url(#duo-blue);
}
:root .lot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 10px; filter: drop-shadow(3px 3px 0 var(--k)); perspective: 900px; }
:root .lot div {
  --tk: var(--pink); --band: var(--red); --bt: #fff;
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 14px; border: 0; border-radius: 0; color: var(--k);
  background: var(--hatch), var(--tk);
  -webkit-mask: var(--perf); -webkit-mask-composite: source-in; mask: var(--perf); mask-composite: intersect;
}
:root .lot div:nth-child(2) { --tk: var(--sky); --band: var(--blue); }
:root .lot div:nth-child(3) { --tk: #f9e6ad; --band: var(--yellow); --bt: var(--k); }
:root .lot div:nth-child(4) { --tk: #d3e9d9; --band: var(--green); }
:root .lot small {
  align-self: stretch; margin: 0 0 12px; padding: 10px 0 7px; border-bottom: 2px solid var(--k);
  background: var(--band); color: var(--bt); font-family: var(--hei); font-weight: 700; font-size: 12.5px; letter-spacing: 6px; text-indent: 6px;
}
:root .lot b { font-family: var(--hei); font-weight: 700; font-size: 25px; line-height: 1.25; color: var(--k); }
:root .lot div::after { content: ''; width: 56%; height: 5px; margin-top: 11px; background: repeating-linear-gradient(90deg, rgba(29, 27, 24, .5) 0 2px, transparent 2px 4px); }
:root .lot.drawing div {
  background:
    linear-gradient(var(--cream), var(--cream)) center / calc(100% - 22px) calc(100% - 22px) no-repeat,
    repeating-linear-gradient(-45deg, var(--red) 0 9px, var(--cream) 9px 18px, var(--blue) 18px 27px, var(--cream) 27px 36px);
  animation: printShuffle .2s steps(2) infinite;
}
:root .lot.drawing small, :root .lot.drawing b, :root .lot.drawing div::after { visibility: hidden; }
:root .lot.drawing div:nth-child(2) { animation-delay: -.07s; }
:root .lot.drawing div:nth-child(3) { animation-delay: -.14s; }
:root .lot.drawing div:nth-child(4) { animation-delay: -.04s; }
@keyframes printShuffle { from { transform: translate(-3px, 1px) rotate(-1.5deg); } to { transform: translate(3px, -2px) rotate(1.5deg); } }
:root .lot.fresh div { animation: printFlip .5s cubic-bezier(.2, 1.25, .4, 1) backwards; }
:root .lot.fresh div:nth-child(2) { animation-delay: .09s; }
:root .lot.fresh div:nth-child(3) { animation-delay: .18s; }
:root .lot.fresh div:nth-child(4) { animation-delay: .27s; }
@keyframes printFlip { from { transform: rotateY(-90deg); } }
:root .panel:has(#lot) > p.muted { color: var(--k) !important; font-family: var(--song); font-size: 16px; line-height: 1.9; }

/* ============================================================
   出生: the family as name cards, the talents and goals as collector
   cards with a colour band for their rarity
   ============================================================ */
:root .intro h1 { font-size: 38px; letter-spacing: 6px; }
:root img.face { background: #e9dfc5; box-shadow: 0 0 0 2px var(--k), 2px 2px 0 2px var(--k); }
:root .person, :root .stat, :root .talent { box-shadow: 3px 3px 0 var(--k); }
:root .person.kin-open:hover { background: var(--hl); }
:root .person .meta { color: var(--muted); }
:root .tcard, :root .gcard {
  color: var(--k); background: var(--cream); border: 2px solid var(--k); border-top: 9px solid #8a8072; border-radius: 0; box-shadow: 4px 4px 0 var(--k);
  transition: transform .1s, box-shadow .1s, background .1s;
}
:root .gcard { border-top-color: var(--blue); }
:root .tcard:not(:disabled):hover, :root .gcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--k); }
:root .tcard b, :root .gcard b { font-family: var(--hei); font-weight: 700; font-size: 16px; }
:root .tcard.r2 { border-top-color: var(--blue); } :root .tcard.r2 i { color: var(--blue); }
:root .tcard.r3 { border-top-color: #7a3f9a; } :root .tcard.r3 i { color: #7a3f9a; }
:root .tcard.r4 { border-top-color: var(--yellow); background: var(--hl); }
:root .tcard.r4::after { content: ''; position: absolute; top: -15px; right: -11px; width: 28px; height: 28px; background: var(--red); clip-path: var(--burst12); }
:root .tcard.on, :root .gcard.on { background: var(--hl); box-shadow: 4px 4px 0 var(--red); transform: translate(-1px, -1px); }
:root .tcard em.picked, :root .gcard em.picked { color: #fff; background: var(--red); border: 1.5px solid var(--k); border-radius: 0; }
:root .gcard i.rec { color: var(--k); background: var(--yellow); border-radius: 0; }
:root .gcard .godds, :root .gcard .gstars { color: var(--blue); }
:root .shelf2 { border-top: 2px dashed rgba(29, 27, 24, .4); }
:root .tcard.locked { opacity: .55; }
:root .talent .capbtn { color: var(--k); border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .stars, :root .capleft b, :root .talent .capplus { color: var(--gold); }

/* ============================================================
   一年: newspaper columns either side, section heads in reverse;
   the year's card as a page, the dice as flat board-game pieces
   ============================================================ */
:root .side3 { padding: 0 14px 14px; scrollbar-color: var(--k) transparent; }
:root .side3 .sp + .sp { margin-top: 18px; padding-top: 0; border-top: 0; }
:root .side3 .sp-h {
  margin: 0 -14px 12px; padding: 6px 14px 5px; background: var(--k); color: var(--paper);
  font-family: var(--hei); font-weight: 700; font-size: 13px; letter-spacing: 8px;
}
:root .side3 .sp-h::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; background: var(--red); }
:root .me-head .who b, :root .lifebar .who b { color: var(--k); font-family: var(--hei); font-weight: 700; }
:root .meter .track, :root .attr .xp, :root .macro .gauge { background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; box-shadow: none; }
:root .meter .track i, :root .attr .xp i { border-radius: 0; }
:root .attr .xp i { background: var(--blue); }
:root .macro .gauge::after { background: var(--k); }
:root .dots { color: var(--k); } :root .dots i { color: rgba(29, 27, 24, .22); }
:root .career .rung { border: 1.5px solid var(--k); border-radius: 0; color: var(--k); }
:root .career .rung.on { color: var(--k); background: var(--yellow); border-color: var(--k); font-weight: 700; }
:root .timeline .yr { color: var(--k); font-family: var(--num); font-size: 15px; }
:root .timeline .it b { color: var(--k); }
:root .timeline .it { border-left: 2px solid var(--k); }
:root .kin { border-top-color: rgba(29, 27, 24, .2); }
:root .kin .knews { color: var(--muted); }
:root .heart { color: var(--cinnabar); }
:root .kv { border-top-color: rgba(29, 27, 24, .22); }
:root .money-big { font-family: var(--num); font-size: 46px; line-height: 1; color: var(--k); }

:root .lifebar { padding: 10px 14px; }
:root .lifebar .who b { font-size: 21px; letter-spacing: 3px; }
:root .lstat { min-width: 58px; padding: 0 0 1px; border: 2px solid var(--k); border-radius: 0; background: var(--cream); }
:root .lstat i { align-self: stretch; padding: 1px 6px; background: var(--k); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-align: center; }
:root .lstat b { padding-top: 3px; font-family: var(--num); font-size: 25px; line-height: 1.1; color: var(--k); }
:root .lstat.bad b { color: var(--cinnabar); }
:root .lstat .dv { top: -11px; right: -9px; border: 1.5px solid var(--k); border-radius: 0; font-weight: 700; }
:root .lstat .dv.up { color: #fff; background: var(--green); }
:root .lstat .dv.down { color: #fff; background: var(--red); }
:root .mini { color: var(--gold); } :root .mini em { font-family: var(--num); font-size: 1.15em; }
:root .gate, :root .wish, :root .lgline, :root .cbline, :root .trline {
  background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; box-shadow: 2px 2px 0 var(--k);
}
:root .lgline i { color: #fff; background: var(--blue); border-radius: 0; }
:root .lgline .gstars { color: var(--blue); }
:root .lgline.p-behind small { color: var(--rose); }
:root .lgline.p-on small, :root .lgline.done small { color: var(--jade); }
:root .wish i { color: var(--k); background: var(--yellow); border: 1.5px solid var(--k); border-radius: 0; }
:root .cbline i, :root .trline i { color: var(--k); background: var(--yellow); border-radius: 0; }
/* 创业线: a column label in black; a year's pip black when it went well, empty when middling, red when badly; a 资金链 one
   cell from breaking in red */
:root .cbline.vtline i { color: var(--paper); background: var(--k); letter-spacing: 1px; }
:root .cbline.vtline .cb-steps i { background: transparent; border: 1.5px solid var(--k); }
:root .cbline.vtline .cb-steps i.on { background: var(--k); }
:root .cbline.vtline .cb-steps i.bad { background: var(--red); border-color: var(--red); }
:root .cbline.vtline.tight { box-shadow: 2px 2px 0 var(--red); }
:root .cbline.vtline.tight .odd { color: var(--paper); background: var(--red); padding: 0 5px; font-weight: 700; }
:root .clock i { border-color: var(--k); border-radius: 0; }
:root .clock i.on { background: var(--k); border-color: var(--k); }
:root .lastyear, :root .montage, :root .autoyears, :root .kidpage { border-left: 8px solid var(--k); }
:root .lastyear .ly-h b, :root .montage .mt-h b, :root .autoyears .ay-h b, :root .kidpage .kp-h b {
  display: inline-block; padding: 2px 10px 1px; background: var(--red); color: #fff; font-family: var(--hei); font-weight: 700; font-size: 14px; letter-spacing: 3px;
}
:root .lastyear li::marker { color: var(--red); }
:root .lastyear li.ly-world { color: var(--blue); font-style: normal; }
:root .lastyear .ly-kin, :root .lastyear .ly-money { border-top: 1.5px dashed rgba(29, 27, 24, .4); }
:root .lastyear .ly-kin i, :root .lastyear .ly-money i { color: var(--cinnabar); font-weight: 700; font-style: normal; }
:root .kinchip { border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .kinchip:hover { background: var(--hl); }
:root .montage .mt-p, :root .kidpage .kp-p { color: var(--k); font-family: var(--song); font-size: 15.5px; }
:root .montage .mt-why, :root .kidpage .mt-why, :root .startpage .kp-ch { color: var(--cinnabar); }
:root .clampbtn { color: var(--cinnabar); }
:root .chron .e .when { color: var(--faint); font-family: var(--num); font-size: 14px; }
:root .chron .e.world b { color: var(--blue); }
:root .chron .e.voice span:last-child { color: var(--muted); font-style: normal; }
:root .lv { color: var(--gold); border-color: rgba(133, 90, 10, .5); border-radius: 0; }
:root .lv.brk { color: var(--k); background: var(--yellow); border-color: var(--k); }
:root .mr { color: var(--muted); border-color: rgba(29, 27, 24, .3); border-radius: 0; }

/* ---------- the card: a page in a black frame, its photo printed in halftone ---------- */
:root .card {
  color: var(--k); background: url(grain.svg), var(--paper); border: 2.5px solid var(--k); border-radius: 0;
  box-shadow: 8px 8px 0 var(--k);
}
:root .card.red, :root .card.urgent { box-shadow: 8px 8px 0 var(--red), 8px 8px 0 2.5px var(--k); }
:root .card.gold, :root .card.rare, :root .card.newyear { box-shadow: 8px 8px 0 var(--yellow), 8px 8px 0 2.5px var(--k); }
:root .card.rare, :root .card.gold.win { background: url(grain.svg), linear-gradient(160deg, #ffe7a0, var(--paper) 55%); }
:root .card.newyear { background: url(grain.svg), linear-gradient(160deg, #f9d3c8, var(--paper) 50%); }
:root .card.rare h2, :root .card.gold.win h2 { color: var(--k); }
:root .card img.scene {
  width: calc(100% + 52px); height: 250px; max-height: none; aspect-ratio: auto; margin: -22px -26px 18px; object-fit: cover;
  border: 0; border-bottom: 2.5px solid var(--k); border-radius: 0; background: #e9dfc5; filter: saturate(1.12) contrast(1.06);
}
:root .card:has(> img.scene)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 250px; z-index: 1; pointer-events: none;
  background: radial-gradient(rgba(29, 27, 24, .3) .8px, transparent 1.25px) 0 0 / 4px 4px; mix-blend-mode: multiply;
}
:root .card .kicker { display: block; width: fit-content; padding: 3px 10px 2px; background: var(--k); color: var(--paper); font-family: var(--hei); font-weight: 700; font-size: 12px; letter-spacing: 3px; }
:root .card img.scene + .kicker { position: relative; z-index: 2; margin-top: -33px; padding: 4px 12px 3px; color: #fff; background: var(--red); border: 2px solid var(--k); box-shadow: 3px 3px 0 var(--k); }
:root .card h2 {
  margin: 12px 0 14px; font-family: var(--hei); font-weight: 700; font-size: 30px; line-height: 1.35; letter-spacing: 1px; color: var(--k);
  text-decoration: underline .36em var(--yellow); text-underline-offset: -.2em; text-decoration-skip-ink: none;
}
:root .card .text { font-family: var(--song); font-size: 16px; line-height: 1.95; color: var(--k); }
:root .card:not(.turn) .text::first-letter {
  float: left; margin: 3px 9px 0 0; padding: 5px 6px 4px; font-family: var(--hei); font-weight: 700; font-size: 33px; line-height: 1; color: #fff; background: var(--red);
}
:root .card .seal {
  top: 16px; right: 16px; z-index: 3; padding: 4px 12px 3px; border: 2.5px solid var(--k); border-radius: 0;
  color: #fff; background: var(--red); font-family: var(--hei); font-weight: 700; font-size: 14px; letter-spacing: 3px; transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--k);
}
:root .card .seal.gold, :root .card .seal.win, :root .card .seal.rare, :root .card .seal.legend { color: var(--k); background: var(--yellow); transform: rotate(5deg); }
:root .card .seal.urgent { font-size: 20px; padding: 2px 12px; }
:root .card .because { color: var(--gold); }
:root .card .recap { border-left-color: var(--red); }
:root .why { color: var(--k); background: var(--hl); }
:root .voice { border-left: 5px solid var(--k); background: rgba(29, 27, 24, .05); color: var(--k); font-style: normal; font-family: var(--song); }
:root .who-card { background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; }
:root .whisper { border-left: 4px solid var(--green); font-style: normal; font-family: var(--song); color: var(--muted); }
:root .whisper b { color: var(--jade); }

/* the choices: coupons, numbered in a black stub; the one pointed at turns yellow */
:root .opts { counter-reset: printopt; gap: 10px; }
:root .opt {
  position: relative; padding: 12px 14px 12px 58px; border: 2px solid var(--k); border-radius: 0; color: var(--k);
  background: var(--cream); box-shadow: 3px 3px 0 var(--k); transition: transform .08s, box-shadow .08s, background .1s;
}
:root .opt::before {
  counter-increment: printopt; content: counter(printopt);
  position: absolute; left: 0; top: 0; bottom: 0; width: 42px; display: grid; place-items: center; padding-top: 3px;
  background: var(--k); color: var(--yellow); font-family: var(--num); font-size: 26px;
}
:root .opt:hover { background: var(--hl); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--k); }
:root .opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k); }
:root .opt .lbl { font-family: var(--hei); font-weight: 700; font-size: 16.5px; }
:root .opt .detail { color: var(--paper-muted); }
:root .opt.open { background: var(--hl); box-shadow: 4px 4px 0 var(--red); transform: none; }
:root .opt.open::before { background: var(--red); color: #fff; }
:root .opt.dim { opacity: .5; }
:root .odds { padding: 1px 8px; border: 1.5px solid var(--k); border-radius: 0; font-family: var(--hei); font-weight: 700; }
:root .odds.hi { color: #fff; background: var(--green); }
:root .odds.mid { color: var(--k); background: var(--yellow); }
:root .odds.lo { color: #fff; background: var(--red); }
:root .odds.allin { color: var(--k); background: #ffe08a; }
:root .opt em.sugg { color: #fff; background: var(--blue); border-radius: 0; }
:root .opt em.away { color: var(--k); border: 1px solid var(--k); border-radius: 0; }
:root .tilt { background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; }
:root .tilt.on { background: var(--hl); border-color: var(--red); }
:root .card .foot { padding-top: 12px; border-top: 2px solid var(--k); }
:root .card .foot .btn.ghost { background: var(--cream); box-shadow: 2px 2px 0 var(--k); }

/* the year's card: the year printed big, like the date on a cover */
:root .card.turn { padding-bottom: 0; }
:root .card.turn h2 { margin: 10px 0 12px; font-family: var(--num); font-size: 60px; line-height: .95; letter-spacing: 0; color: var(--red); text-decoration: none; text-shadow: 3px 3px 0 var(--k); }
:root .card.turn h3 { font-family: var(--hei); font-weight: 700; font-size: 14px; letter-spacing: 3px; color: var(--k); }
:root .card.turn h3::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--red); }
:root .stagenews { background: var(--hl); border: 1.5px solid var(--k); border-radius: 0; }
:root .stagenews .sn-h b { color: var(--cinnabar); }
:root .focusrow .fr-h b { font-family: var(--hei); font-weight: 700; font-size: 16px; color: var(--k); }
:root .fcard { border: 2px solid var(--k); border-radius: 0; background: var(--cream); box-shadow: 3px 3px 0 var(--k); transition: transform .08s, box-shadow .08s; }
:root .fcard:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--k); }
:root .fcard.on { background: var(--hl); box-shadow: 4px 4px 0 var(--red); }
:root .fcard .fhead b { font-family: var(--hei); font-weight: 700; font-size: 16.5px; }
:root .fcard .ftag { border-radius: 0; }
:root .fcard .ftag.picked { color: #fff; background: var(--red); }
:root .fcard .fnums { border-top: 1.5px dashed rgba(29, 27, 24, .4); }
:root .focusrow.kid { border: 2px dashed var(--red); background: rgba(214, 51, 39, .05); border-radius: 0; }
:root .focusres { background: var(--cream); border-radius: 0; }
:root .todo { background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; }
:root .pip { border: 1.5px solid var(--k); border-radius: 0; }
:root .pip.on.t0 { background: var(--green); }
:root .pip.on.t1 { background: var(--yellow); }
:root .pip.on.t2 { background: var(--red); }
:root .energy .eh .big { font-family: var(--hei); font-weight: 700; color: var(--k); }
:root .tray2 { gap: 10px; }
:root .tdie {
  width: 82px; padding: 8px 4px 7px; border: 2px solid var(--k); border-radius: 0; color: var(--k);
  background: var(--cream); box-shadow: 3px 3px 0 var(--k); transition: transform .08s, box-shadow .08s;
}
:root .tdie:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--k); }
:root .tdie svg polygon, :root .tdie svg rect { fill: var(--sky); stroke: var(--k); stroke-width: 2.2; }
:root .tdie svg polyline, :root .tdie svg line { stroke: rgba(29, 27, 24, .3); }
:root .tdie b { top: 17px; font-family: var(--num); font-size: 22px; color: var(--k); text-shadow: none; }
:root .tdie b.two { font-size: 19px; letter-spacing: 0; top: 18px; }
:root .tdie small { font-weight: 700; }
:root .tdie.used { background: #dcefe2; }
:root .tdie.used svg polygon, :root .tdie.used svg rect { fill: #9fd3b3; }
:root .tdie.used em { color: var(--jade); }
:root .tdie.picked { background: var(--hl); box-shadow: 3px 3px 0 var(--red); transform: translateY(-3px); }
:root .tdie.picked svg polygon, :root .tdie.picked svg rect { fill: var(--yellow); }
:root .tdie.max svg polygon, :root .tdie.max svg rect { fill: var(--yellow); }
:root .tdie.max b, :root .tdie em.maxtag { color: var(--k); }
:root .slot { border: 2px solid var(--k); border-radius: 0; background: var(--cream); box-shadow: none; }
:root .slot:hover { background: var(--hl); }
:root .slot.duty { border-left: 8px solid var(--blue); }
:root .slot.filled { background: var(--hl); box-shadow: 3px 3px 0 var(--k); }
:root .slot.ghost { background: transparent; border-style: dashed; }
:root .slot.filled .pickmark { color: var(--jade); }
:root .slot .shead b { font-family: var(--hei); font-weight: 700; font-size: 15.5px; }
:root .slot .swap, :root .slot .dbl { border-radius: 0; border-color: var(--k); }
:root .perks .perk { border-radius: 0; }
:root .res b { font-family: var(--hei); font-weight: 700; }
:root .mo { background: var(--cream); border-radius: 0; }
:root .decide-toggle { border: 1.5px solid var(--k); border-radius: 0; }
:root .moves.situations .mv, :root .ask { border-radius: 0; }
:root .actionbar {
  margin: 18px -26px 0; padding: 12px 26px 14px; border: 0; border-radius: 0; background: var(--k); color: var(--paper); box-shadow: none;
}
:root .ab-energy { color: #ddd3bc; }
:root .ab-energy b { color: #fff; font-family: var(--num); font-size: 18px; }
:root .ab-energy b.full { color: #ff8b7c; }
:root .ab-energy .linkish { color: var(--yellow); }
:root .actionbar .btn.ghost { color: var(--paper); background: transparent; border-color: var(--paper); box-shadow: none; }
:root .actionbar .btn.ghost:hover { color: var(--k); background: var(--yellow); border-color: var(--yellow); }
:root .actionbar .btn.primary { border-color: var(--paper); box-shadow: 3px 3px 0 var(--yellow); }
:root .actionbar .btn.armed { color: var(--yellow); border-color: var(--yellow); }
:root .ab-note { color: #ffb2a6; }
:root .actionbar.more .ab-sec { background: var(--k); border: 2px solid var(--paper); border-radius: 0; }

/* ============================================================
   掷骰: a cobalt board with white dice; the verdict slapped on as a
   sticker: a starburst for the best of it, a black box for the worst
   ============================================================ */
:root .narrator { font-family: var(--song); font-style: normal; font-size: 15.5px; color: var(--paper-muted); letter-spacing: 2px; }
:root .tray {
  color: #fff; border: 2.5px solid var(--k); border-radius: 0; padding: 24px 18px 24px; margin-top: 18px;
  background: radial-gradient(rgba(255, 255, 255, .12) 1.1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(160deg, #2b62b3, #1a4588);
  box-shadow: 6px 6px 0 var(--k);
}
:root .die svg { filter: drop-shadow(3px 3px 0 #0b1f45); }
:root .die svg polygon, :root .die svg rect { fill: var(--cream); stroke: var(--k); stroke-width: 2.4; }
:root .die svg polyline, :root .die svg line { stroke: rgba(29, 27, 24, .28); stroke-width: 1.2; }
:root .die b { font-family: var(--num); font-size: 28px; padding-top: 4px; color: var(--k); }
:root .die small { color: #dce8f6; font-weight: 600; }
:root .die.gold svg polygon, :root .die.gold svg rect { fill: var(--yellow); }
:root .die.gold b { color: var(--k); }
:root .die[data-help] svg polygon, :root .die[data-help] svg rect { fill: var(--pink); }
:root .plus { color: #fff; font-weight: 700; }
:root .mod { color: #dce8f6; }
:root .mod b { color: #fff; font-family: var(--num); font-size: 24px; }
:root .tray .sum { color: #dce8f6; }
:root .tray .sum b { font-family: var(--num); font-weight: 700; font-size: 54px; line-height: 1; color: var(--yellow); text-shadow: 3px 3px 0 var(--k); vertical-align: -6px; }
:root .tray .fate { color: #fff; }
:root .round { border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 0; background: rgba(0, 0, 0, .12); }
:root .round .subj { color: var(--yellow); font-weight: 700; }
:root .round .rv { color: #dce8f6; }
:root .round b { color: #fff; font-family: var(--num); font-size: 24px; }
:root .tray .hint { color: #dce8f6; }
:root .verdict {
  position: relative; width: fit-content; max-width: 100%; margin: 22px auto 6px; padding: 8px 18px 8px 26px;
  border: 2.5px solid var(--k); box-shadow: 4px 4px 0 var(--k); transform: rotate(-2deg);
  font-family: var(--hei); font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: 8px; text-indent: 0;
}
:root .verdict small { display: block; margin-top: 3px; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 1px; color: inherit; opacity: .9; }
:root .verdict .allin-v { color: inherit; }
:root .verdict.v3 { z-index: 0; padding: 22px 44px 22px 52px; border: 0; box-shadow: none; transform: rotate(-4deg); color: var(--k); text-shadow: 2px 2px 0 rgba(214, 51, 39, .85); }
:root .verdict.v3::before, :root .verdict.v3::after { content: ''; position: absolute; inset: -6px -10px; clip-path: var(--burst); }
:root .verdict.v3::before { z-index: -1; background: var(--yellow); }
:root .verdict.v3::after { z-index: -2; background: var(--k); transform: translate(4px, 5px); }
:root .verdict.v2 { color: #fff; background: var(--green); }
:root .verdict.v1 { color: var(--k); background: #f6a24a; transform: rotate(2deg); }
:root .verdict.v0 { color: #fff; background: var(--k); box-shadow: 4px 4px 0 var(--red); }
:root .verdict:not(.hidden) { animation: printSlap .5s cubic-bezier(.2, 1.4, .4, 1) backwards; }
:root .verdict.v3:not(.hidden)::before, :root .verdict.v3:not(.hidden)::after { animation: printBurst .7s cubic-bezier(.2, 1.2, .4, 1) backwards; }
@keyframes printSlap { 0% { opacity: 0; transform: scale(2.1) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(1deg); } }
@keyframes printBurst { from { transform: rotate(-70deg) scale(.3); } }
:root .outcome { font-family: var(--song); font-size: 16px; line-height: 1.95; color: var(--k); }
:root .fx span, :root .deltas span { border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); color: var(--k); }
:root .fx span.up, :root .deltas span.up { color: var(--jade); border-color: var(--jade); background: #e3f1e7; }
:root .fx span.down, :root .deltas span.down { color: var(--cinnabar); border-color: var(--cinnabar); background: #fbe4df; }
:root .fx span.key { color: var(--k); background: var(--yellow); }
:root .recapline, :root .retry-note { font-style: normal; font-family: var(--song); color: var(--muted); }
:root .lesson { border-left: 4px solid var(--red); }
:root .ny-closer { font-style: normal; font-family: var(--song); }
:root .headline { font-family: var(--hei); font-weight: 700; }
:root .extra li.goalline { color: var(--blue); }
:root .card.result .outs { gap: 10px; }
:root .out { border: 2px solid var(--k); border-radius: 0; background: var(--cream); }
:root .out.t0 { box-shadow: inset 6px 0 0 var(--green); }
:root .out.t1 { box-shadow: inset 6px 0 0 var(--yellow); }
:root .out.t2 { box-shadow: inset 6px 0 0 var(--red); }
:root .out p { font-family: var(--song); }
:root .after-turn { padding-bottom: 22px; }

/* ============================================================
   结局: the life's last issue. The masthead again, the portrait as
   the cover photo, the lot as a starburst sticker on its corner, the
   title as the cover line; a barcode, red rays behind the sheet
   ============================================================ */
:root body[data-screen="summary"] {
  background-image:
    radial-gradient(circle at 50% 400px, transparent 0 120px, rgba(239, 231, 209, .8) 430px, var(--ink) 680px),
    repeating-conic-gradient(from -2deg at 50% 400px, rgba(214, 51, 39, .16) 0deg 5deg, rgba(214, 51, 39, 0) 5deg 10deg),
    url(grain.svg);
}
:root .summary .panel.epitaph {
  position: relative; max-width: 600px; margin: 30px auto 38px; padding: 0 30px 26px; text-align: center;
  background: url(grain.svg), var(--paper); border: 3px solid var(--k); border-radius: 0; box-shadow: 12px 12px 0 var(--k);
}
:root .summary .panel.epitaph::before {
  content: '浮生'; display: block; margin: 0 -30px 28px; padding: 22px 0 16px; border-bottom: 3px solid var(--k);
  background: radial-gradient(rgba(0, 0, 0, .1) 1.5px, transparent 2px) 0 0 / 8px 8px, linear-gradient(180deg, #db3a2c, #c92d22);
  color: #fff; font-family: var(--kai); font-size: 64px; line-height: 1; letter-spacing: 22px; text-indent: 22px; text-shadow: 3px 3px 0 var(--k);
}
:root .summary .panel.epitaph::after { content: ''; position: absolute; right: 18px; top: 28px; width: 80px; height: 36px; background: url(barcode.svg) center / 100% 100% no-repeat; border: 2px solid var(--k); }
:root .epitaph img.face { width: 176px; height: 214px; border-radius: 0; object-fit: cover; object-position: center 30%; border: 3px solid var(--k); box-shadow: none; background: #e9dfc5; filter: drop-shadow(8px 8px 0 var(--red)); }
/* (the game greys a dead face with an inline filter; the shadow is added after the grey so it stays red) */
:root .epitaph img.face[style*="grayscale"] { filter: grayscale(1) drop-shadow(8px 8px 0 var(--red)) !important; opacity: 1 !important; }
:root .summary h1 {
  margin-top: 22px !important; font-family: var(--hei); font-weight: 700; font-size: 50px; letter-spacing: 14px; text-indent: 14px; color: var(--k);
  text-decoration: underline .32em var(--yellow); text-underline-offset: -.14em; text-decoration-skip-ink: none;
}
:root .epitaph .years { color: var(--muted); font-family: var(--num); font-size: 18px; letter-spacing: 2px; }
:root .lotword { flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
:root .lotword .grade, :root .lotword::before { position: absolute; top: 118px; right: 146px; width: 112px; height: 112px; clip-path: var(--burst12); transform: rotate(10deg); }
:root .lotword::before { content: ''; z-index: 1; background: var(--k); margin: 5px -5px 0 0; }
:root .lotword .grade {
  z-index: 2; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0;
  font-family: var(--hei); font-weight: 700; font-size: 20px; letter-spacing: 1px; color: var(--cinnabar); background: var(--yellow);
}
:root .lotword .kai { font-family: var(--hei); font-weight: 700; font-size: 40px; letter-spacing: 8px; text-indent: 8px; color: var(--red); text-shadow: 2px 2px 0 var(--k); }
:root .epiline { font-style: normal; font-family: var(--song); font-size: 17px; line-height: 1.9; color: var(--k); }
:root .epiline.legend { color: var(--gold); }
:root .miss { color: var(--cinnabar); font-weight: 600; }
:root .howgrade summary { color: var(--muted); }
:root .epitaph .hint { color: var(--muted); }
:root .sumacts { border-top: 2px solid var(--k); }
:root .peer .bar { background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; }
:root .peer .bar i { background: var(--blue); border-radius: 0; }
:root .peer b { font-family: var(--num); font-size: 16px; }
:root .grade { min-width: 1.6em; padding: 1px 5px 0; border: 1.5px solid var(--k); border-radius: 0; font-family: var(--num); font-size: 1.15em; color: var(--k); background: var(--cream); }
:root .grade.big { font-size: 34px; width: 1.6em; height: 1.6em; line-height: 1.75em; padding: 0; box-shadow: 3px 3px 0 var(--k); }
:root .grade.gS { color: #fff; background: var(--red); }
:root .grade.gA { color: #fff; background: var(--blue); }
:root .grade.gB { color: var(--k); background: var(--yellow); }
:root .grade.gC { color: var(--k); background: var(--cream); }
:root .grade.gD { color: #fff; background: #7d766d; }
:root .rc-t th, :root .vs-t th { color: var(--k); border-bottom: 2px solid var(--k); font-family: var(--hei); font-weight: 700; }
:root .rc-t td, :root .vs-t td { border-top-color: rgba(29, 27, 24, .16); }
:root .rc-all p, :root .rc-t td small, :root .rc-t td:first-child { color: var(--muted); }
:root .rc-par-l i { background: var(--blue); }
:root .gr-verdict b { color: var(--muted); }
:root .goalres.done .gr-verdict b { color: var(--cinnabar); }
:root .goalres.near .gr-verdict b { color: var(--amber); }
:root .goalres h3 .gstars { color: var(--blue); }
:root .ach { border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .ach.new { color: var(--k); background: var(--yellow); }
:root .rchip { color: var(--k); border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .rchip.legend { background: var(--hl); }
:root .rchip i, :root .rtag { color: var(--k); background: var(--yellow); border-radius: 0; }
:root .rcard { border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .rcard.legend { background: var(--hl); }
:root .rcard.locked { border: 1.5px dashed rgba(29, 27, 24, .45); background: transparent; }
:root .rcard .rmeta em, :root .rcard.locked.legend .rmeta em, :root .rcard.script .ends i.on, :root .rcard .linkish { color: var(--gold); }
:root .rcard .rthumb { border-radius: 0; border: 1.5px solid var(--k); }
:root .ul-new { background: var(--hl); border: 1.5px solid var(--k); border-radius: 0; }
:root .ul-new b, :root .ul-next small { color: var(--cinnabar); }
:root .scriptbox { color: var(--k); border: 2.5px solid var(--k); border-radius: 0; background: url(grain.svg), var(--paper); box-shadow: 6px 6px 0 var(--blue), 6px 6px 0 2.5px var(--k); padding: 22px 26px; }
:root .scriptbox .kicker, :root .fate-col .kicker { display: block; width: fit-content; padding: 2px 10px 1px; background: var(--k); color: var(--paper); font-family: var(--hei); font-weight: 700; font-size: 12px; letter-spacing: 3px; }
:root .reveal .kai { font-size: 26px; letter-spacing: 3px; }
:root .fate-col h4 { color: var(--k); }
:root .fate .wi { border-top-color: rgba(29, 27, 24, .16); }
:root .fate .wi .when, :root .moments .m .when { color: var(--cinnabar); font-family: var(--num); font-size: 1.1em; }
:root .fate .wi .alt { border-left-color: var(--red); }
:root .fate .pp, :root .moments .m, :root .fk { border-top-color: rgba(29, 27, 24, .16); }
:root .vs-fork { color: var(--k); }
:root .fk .par { background: rgba(30, 79, 156, .06); border-left-color: var(--blue); }
:root .fk .par-h, :root .fk .par-to { color: var(--blue); }
:root .fk .par-epi, :root .storyp i { color: var(--muted); font-style: normal; }
:root .stat b { font-family: var(--hei); font-weight: 700; }
:root .sumfold > summary b { font-family: var(--hei); font-weight: 700; letter-spacing: 3px; }
:root .dailybar, :root .dailysum { border: 2px solid var(--k); background: var(--hatch), var(--pink); border-radius: 0; }
:root .dailybar b { color: var(--cinnabar); }
:root .recap .kai { padding: 10px 0 8px 14px; border-top: 2px solid var(--k); border-bottom: 2px solid var(--k); font-size: 40px; letter-spacing: 14px; color: var(--k); }
:root .recap .rline { font-family: var(--song); font-size: 18px; color: var(--k); }

/* ============================================================
   沉重的时刻. A farewell (送别) and the card a life ends on are set as
   an obituary: black and white, a double black rule round the page,
   the photo in grey inside it with a black band across its corner, a
   宋体 headline between rules, no stickers, no colour. An emergency
   (急症) goes black and white too, but reads as news: the photo stays
   full width and the clock still runs. game.js marks the cards
   .farewell, .urgent and .death.
   ============================================================ */
/* (printed in one ink: whatever colour a piece inside brings, a new one too, comes out grey) */
:root .card.farewell, :root .card.death, :root .card.urgent { --mourn: #f5f3ee; --grey: #dcd8cf; filter: grayscale(1); }
:root :is(.card.farewell, .card.death, .card.urgent) .whisper { border-left-color: var(--k); }
:root .card.urgent { background: url(grain.svg), var(--mourn); border-color: var(--k); box-shadow: 8px 8px 0 var(--k); }
:root .card.farewell, :root .card.death {
  background: url(grain.svg), var(--mourn); border: 5px solid var(--k);
  box-shadow: inset 0 0 0 4px var(--mourn), inset 0 0 0 5.5px var(--k), 8px 8px 0 var(--k);
}
:root .card.farewell img.scene, :root .card.death img.scene {
  width: 100%; height: 230px; margin: -6px 0 18px; border: 1.5px solid var(--k); filter: grayscale(1) contrast(1.06) brightness(1.03);
}
:root .card.urgent img.scene { filter: grayscale(1) contrast(1.12); }
:root .card.farewell:has(> img.scene)::before, :root .card.death:has(> img.scene)::before { display: none; }
:root .card.farewell:has(> img.scene)::after, :root .card.death:has(> img.scene)::after {
  content: ''; position: absolute; left: 26px; top: 16px; z-index: 2; width: 92px; height: 92px; pointer-events: none;
  background: linear-gradient(135deg, transparent 0 31%, var(--k) 31% 45%, transparent 45%);
}
:root .card.farewell .kicker, :root .card.death .kicker, :root .card.urgent .kicker,
:root .card.farewell img.scene + .kicker, :root .card.death img.scene + .kicker, :root .card.urgent img.scene + .kicker { color: #fff; background: var(--k); border-color: var(--k); box-shadow: none; }
:root .card.farewell .kicker, :root .card.death .kicker { margin-left: auto; margin-right: auto; }
:root .card.farewell img.scene + .kicker, :root .card.death img.scene + .kicker { margin-top: -6px; }
:root .card.farewell h2, :root .card.death h2, :root .card.turn.death h2 {
  margin: 14px 0 16px; padding: 10px 0 8px; border-top: 1.5px solid var(--k); border-bottom: 1.5px solid var(--k);
  font-family: var(--song); font-weight: 700; font-size: 30px; line-height: 1.4; letter-spacing: 6px; text-align: center;
  color: var(--k); text-decoration: none; text-shadow: none;
}
:root .card.urgent h2 { text-decoration-color: rgba(29, 27, 24, .22); }
:root .card.farewell .text::first-letter, :root .card.death .text::first-letter {
  float: none; margin: 0; padding: 0; font: inherit; color: inherit; background: none;
}
:root .card.farewell .text p, :root .card.death .outcome p { text-indent: 2em; }
:root .card.urgent .text::first-letter { background: var(--k); }
:root .card.urgent .seal, :root .card.farewell .seal, :root .card.death .seal { color: #fff; background: var(--k); transform: none; box-shadow: 3px 3px 0 #8c877e; }
:root .card.urgent .emerg { border: 2px solid var(--k); border-radius: 0; background: var(--grey); }
:root .card.urgent .emerg .em-h b { color: var(--k); font-family: var(--hei); font-weight: 700; }
:root .card.urgent .emerg .em-h span, :root .card.urgent .emerg .em-note { color: var(--muted); }
:root .card.urgent .emerg .em-sec { color: var(--k) !important; }
:root .card.urgent .emerg .em-sec i { font-family: var(--num); font-size: 28px; font-weight: 700; }
:root .card.urgent .emerg .em-bar { height: 9px; border: 1.5px solid var(--k); border-radius: 0; background: var(--cream); }
:root .card.urgent .emerg .em-bar i { background: var(--k); }
:root .card.urgent .emerg .em-note.talent { color: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .opt::before { color: #fff; }
:root :is(.card.farewell, .card.death, .card.urgent) .opt:hover,
:root :is(.card.farewell, .card.death, .card.urgent) .opt.open { background: var(--grey); }
:root :is(.card.farewell, .card.death, .card.urgent) .opt.open { box-shadow: 4px 4px 0 var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .opt.open::before { color: #fff; background: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .odds { color: var(--k); background: var(--cream); }
:root :is(.card.farewell, .card.death, .card.urgent) .odds.mid, :root :is(.card.farewell, .card.death, .card.urgent) .odds.allin { background: var(--grey); }
:root :is(.card.farewell, .card.death, .card.urgent) .odds.lo { color: #fff; background: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .opt em.sugg { background: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .btn.primary { color: #fff; background: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .btn.primary:hover { background: #3a3733; }
:root :is(.card.farewell, .card.death, .card.urgent) .tilt.on { background: var(--grey); border-color: var(--k); }
:root :is(.card.farewell, .card.death, .card.urgent) .why { background: var(--grey); }
:root :is(.card.farewell, .card.death, .card.urgent) .tray {
  background: radial-gradient(rgba(255, 255, 255, .1) 1.1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(160deg, #3d3b37, #22201d);
}
:root :is(.card.farewell, .card.death, .card.urgent) .die svg { filter: drop-shadow(3px 3px 0 #000); }
:root :is(.card.farewell, .card.death, .card.urgent) .die.gold svg polygon, :root :is(.card.farewell, .card.death, .card.urgent) .die.gold svg rect { fill: var(--grey); }
:root :is(.card.farewell, .card.death, .card.urgent) .die[data-help] svg polygon, :root :is(.card.farewell, .card.death, .card.urgent) .die[data-help] svg rect { fill: #ebe8e1; }
:root :is(.card.farewell, .card.death, .card.urgent) .tray .sum b { color: #fff; }
:root :is(.card.farewell, .card.death, .card.urgent) .round .subj { color: #fff; }
:root :is(.card.farewell, .card.death, .card.urgent) .die small, :root :is(.card.farewell, .card.death, .card.urgent) .mod,
:root :is(.card.farewell, .card.death, .card.urgent) .tray .sum, :root :is(.card.farewell, .card.death, .card.urgent) .round .rv { color: #d8d4cb; }
:root :is(.card.farewell, .card.death, .card.urgent) .verdict {
  padding: 8px 18px 8px 26px; color: var(--k); background: var(--cream); border: 2.5px solid var(--k); box-shadow: 4px 4px 0 #000; transform: none; text-shadow: none;
}
:root :is(.card.farewell, .card.death, .card.urgent) .verdict.v0 { color: #fff; background: var(--k); box-shadow: 4px 4px 0 #8c877e; }
:root :is(.card.farewell, .card.death, .card.urgent) .verdict.v3::before, :root :is(.card.farewell, .card.death, .card.urgent) .verdict.v3::after { display: none; }
:root :is(.card.farewell, .card.death, .card.urgent) .verdict:not(.hidden) { animation-name: printFade; }
@keyframes printFade { from { opacity: 0; } }
:root :is(.card.farewell, .card.death, .card.urgent) :is(.fx, .deltas) span.up { color: var(--k); border-color: var(--k); background: var(--cream); }
:root :is(.card.farewell, .card.death, .card.urgent) :is(.fx, .deltas) span.down { color: var(--k); border-color: var(--k); background: var(--grey); }
:root :is(.card.farewell, .card.death, .card.urgent) .fx span.key { background: var(--grey); }
:root .card.death .out.t0 { box-shadow: inset 6px 0 0 #b5b0a6; }
:root .card.death .out.t1 { box-shadow: inset 6px 0 0 #6f6a62; }
:root .card.death .out.t2 { box-shadow: inset 6px 0 0 var(--k); }
:root .card.death .lv, :root .card.death .lv.sk { color: var(--k); border-color: var(--k); background: none; }
/* (after a life: its last pass, 这一生, in black on grey paper) */
:root body[data-screen="recap"] { background-color: #ece9e2; }
:root body[data-screen="recap"]::before, :root body[data-screen="recap"]::after { display: none; }

/* ---------- modal, drawer, toast, phone nav ---------- */
:root .modal { background: rgba(29, 27, 24, .55); backdrop-filter: none; }
:root .modal .box { color: var(--k); background: url(grain.svg), var(--paper); border: 3px solid var(--k); border-radius: 0; box-shadow: 10px 10px 0 var(--k); }
:root .modal .box.gilded { box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 3px var(--k); }
:root .help b { color: var(--k); }
:root .help .quick { background: var(--hl); border: 2px solid var(--k); border-radius: 0; }
:root .help .quick > b, :root .help .hgroup > summary { color: var(--cinnabar); font-family: var(--hei); font-weight: 700; }
:root .help .hgroup { border-top: 1.5px solid rgba(29, 27, 24, .2); }
:root .drawer { color: var(--k); background: url(grain.svg), var(--paper); border-left: 3px solid var(--k); box-shadow: -6px 0 0 rgba(29, 27, 24, .9); }
:root .drawer-back { background: rgba(29, 27, 24, .35); }
:root .tabs { border-bottom: 2px solid var(--k); }
:root .tabs button.on { color: var(--k); border-bottom-color: var(--red); font-weight: 700; }
:root .toast { color: #fff; background: var(--k); border: 2px solid var(--k); border-radius: 0; box-shadow: 4px 4px 0 var(--red); }
:root .mnav { background: var(--paper); border-top: 3px solid var(--k); box-shadow: 0 -2px 0 var(--ink), 0 -3.5px 0 var(--k); }
:root .mnav button { font-family: var(--hei); font-weight: 700; letter-spacing: 2px; color: var(--muted); }
:root .mnav button.on { color: #fff; background: var(--k); }
:root .sharebox .shot { background: var(--paper2); border: 2px solid var(--k); border-radius: 0; box-shadow: 6px 6px 0 var(--k); }
:root .sharebox textarea { color: var(--k); background: var(--cream); border: 2px solid var(--k); border-radius: 0; }
:root .loading .bar { height: 8px; background: var(--cream); border: 1.5px solid var(--k); border-radius: 0; }
:root .loading .bar > i { background: var(--red); }

/* ---------- motion: sheets land with their shadow, mastheads run off the press, stickers are slapped on ---------- */
@keyframes printIn { from { opacity: 0; transform: translate(-8px, 12px); } to { opacity: 1; transform: none; } }
@keyframes printWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes printLand { from { opacity: 0; transform: translate(-12px, -12px); box-shadow: 0 0 0 var(--k); } }
@keyframes printSlide { from { opacity: 0; transform: translateX(40px) rotate(1.2deg); } }
:root body.screen-enter .title-screen > div { animation: printLand .5s cubic-bezier(.2, .9, .3, 1) backwards; }
:root body.screen-enter .title-screen h1 { animation: printWipe .6s cubic-bezier(.6, 0, .2, 1) .2s backwards; }
:root body.screen-enter .title-screen .sub { animation: printWipe .45s cubic-bezier(.6, 0, .2, 1) .45s backwards; }
:root body.screen-enter .title-screen .lede,
:root body.screen-enter .title-screen .row,
:root body.screen-enter .title-screen .daily { animation: printIn .45s cubic-bezier(.2, .9, .3, 1) .85s backwards; }
:root body.screen-enter .center-col > *,
:root body.screen-enter .play1 > *,
:root body.screen-enter .side3 { animation: printIn .4s cubic-bezier(.2, .9, .3, 1) backwards; }
:root body.screen-enter .center-col > :nth-child(2), :root body.screen-enter .play1 > :nth-child(2) { animation-delay: .06s; }
:root body.screen-enter .center-col > :nth-child(3), :root body.screen-enter .play1 > :nth-child(3) { animation-delay: .12s; }
:root body.screen-enter .center-col > :nth-child(n+4), :root body.screen-enter .play1 > :nth-child(n+4) { animation-delay: .18s; }
:root body.screen-enter .summary .panel.epitaph { animation: printLand .55s cubic-bezier(.2, .9, .3, 1) backwards; }
:root .card.flipin { animation: printSlide .45s cubic-bezier(.2, .9, .3, 1.05) backwards; }

@media (max-width: 820px) {
  :root .title-screen { padding: 22px 10px 44px; }
  :root .title-screen > div { box-shadow: 7px 7px 0 var(--k); }
  :root .title-screen > div::before { display: none; }
  :root .title-screen > div::after { bottom: -21px; width: 150px; height: 8px; }
  :root .title-screen h1 { padding: 22px 0 16px; font-size: 84px; letter-spacing: 22px; text-indent: 22px; text-shadow: 3px 3px 0 var(--k); }
  :root .title-screen .sub { font-size: 11px; letter-spacing: 5px; text-indent: 5px; }
  :root .title-screen .sub::before, :root .title-screen .sub::after { margin: 0 8px; }
  :root .liferow { gap: 5px; margin-top: 26px; }
  :root .liferow img { width: 62px; height: 78px; padding: 6px; box-shadow: inset 0 0 0 4.5px var(--cream), inset 0 0 0 5.5px #4a4a4a; }
  :root .title-screen .lede, :root .title-screen .liferow + .lede { padding: 0 18px; font-size: 15px; }
  :root .title-screen .daily { flex-direction: column; margin: 24px 14px 0; text-align: center; }
  :root .title-screen .daily .dnote { min-width: 0; padding: 10px 0 0; border-left: 0; border-top: 2px dashed rgba(29, 27, 24, .55); }
  :root .lot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root .lot b { font-size: 22px; }
  :root .panel:has(#lot)::before { margin: -20px -22px 16px; }
  :root .card { box-shadow: 5px 5px 0 var(--k); }
  :root .card.red { box-shadow: 5px 5px 0 var(--red), 5px 5px 0 2.5px var(--k); }
  :root .card.gold, :root .card.rare, :root .card.newyear { box-shadow: 5px 5px 0 var(--yellow), 5px 5px 0 2.5px var(--k); }
  :root .card.urgent { box-shadow: 5px 5px 0 var(--k); }
  :root .card.farewell, :root .card.death { box-shadow: inset 0 0 0 4px var(--mourn), inset 0 0 0 5.5px var(--k), 5px 5px 0 var(--k); }
  :root .card.farewell img.scene, :root .card.death img.scene { width: 100%; height: 170px; margin: -6px 0 16px; }
  :root .card.farewell:has(> img.scene)::after, :root .card.death:has(> img.scene)::after { left: 16px; top: 12px; width: 72px; height: 72px; }
  :root .card.farewell h2, :root .card.death h2, :root .card.turn.death h2 { font-size: 24px; letter-spacing: 4px; }
  :root .card h2 { font-size: 23px; letter-spacing: 0; }
  :root .card.turn h2 { font-size: 48px; }
  :root .card img.scene { width: calc(100% + 32px); height: 190px; margin: -18px -16px 16px; }
  :root .card:has(> img.scene)::before { height: 190px; }
  :root .card .seal { top: 12px; right: 12px; }
  :root .opt { padding-left: 50px; }
  :root .opt::before { width: 36px; font-size: 23px; }
  :root .actionbar { margin: 14px -16px 0; padding: 10px 16px 12px; }
  :root .tdie { width: calc((100% - 20px) / 3); }
  :root .tray .sum b { font-size: 46px; }
  :root .summary .panel.epitaph { margin: 16px 4px 30px; padding: 0 16px 22px; box-shadow: 7px 7px 0 var(--k); }
  :root .summary .panel.epitaph::before { margin: 0 -16px 22px; padding: 18px 0 13px; font-size: 50px; letter-spacing: 16px; text-indent: 16px; }
  :root .summary .panel.epitaph::after { right: 10px; top: 24px; width: 58px; height: 27px; }
  :root .epitaph img.face { width: 142px; height: 172px; filter: drop-shadow(6px 6px 0 var(--red)); }
  :root .epitaph img.face[style*="grayscale"] { filter: grayscale(1) drop-shadow(6px 6px 0 var(--red)) !important; }
  :root .lotword .grade, :root .lotword::before { top: 100px; right: 40px; width: 88px; height: 88px; }
  :root .lotword .grade { font-size: 16px; }
  :root .summary h1 { font-size: 40px; letter-spacing: 10px; text-indent: 10px; }
  :root .lotword .kai { font-size: 32px; letter-spacing: 6px; text-indent: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { animation: none !important; transition: none !important; }
}