/* ==========================================================================
   YÜKSELİŞ — Karaşehir Hikâyesi
   Visual lock: distressed newsprint (ink on paper, 2px rules, zero radius,
   halftone imagery, inverted ink panels) + one riso red for the main action
   and danger only. See DESIGN.md §4.
   ========================================================================== */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/anton-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/anton-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/newsreader-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/newsreader-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/newsreader-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/newsreader-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/newsreader-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/newsreader-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/inter-tight-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/inter-tight-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --paper: #ECEAE3;
  --paper-2: #E2DFD6;
  --paper-3: #D6D2C7;
  --ink: #151412;
  --ink-2: #56524A;
  --ink-3: #8C877C;
  --red: #E23B1E;
  /* the night desk the paper lies on (wide screens) and the ink chrome bars (phones) */
  --desk: #131210;
  --desk-2: #1D1B18;
  --on-ink: #ECEAE3;
  --on-ink-2: #A9A498;
  --on-ink-3: #6E6A61;
  --sheet-shadow: 0 1px 0 rgba(0,0,0,.45), -3px 4px 6px rgba(0,0,0,.3), 0 30px 60px -20px rgba(0,0,0,.8);
  --rule: 2px solid var(--ink);
  --hair: 1px solid var(--ink);
  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-ui: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk) radial-gradient(120% 90% at 50% -12%, #2C2924 0%, #191815 46%, #0E0D0B 100%) fixed;
  color: var(--ink);
  font-family: var(--f-ui); font-weight: 500;
  font-size: 15px; line-height: 1.4;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 8px; text-wrap: pretty; }
b, strong { font-weight: 700; }
.small { font-size: 12.5px; }
.muted { color: var(--ink-2); }
.b { color: var(--red) !important; }
.mono { font-family: var(--f-mono); }
.ic { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.15em; }
.kicker { font-family: var(--f-ui); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

#app { max-width: 540px; margin: 0 auto; height: 100%; position: relative; background: var(--paper); }
#app::before, .paper::before, .sheet::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url(../assets/paper.png); background-size: 256px; opacity: .55; mix-blend-mode: multiply;
}
#app > * { position: relative; z-index: 1; }
.boot { height: 100dvh; display: grid; place-content: center; text-align: center; gap: 8px; }
.boot b { font-family: var(--f-display); font-size: 56px; letter-spacing: .02em; }
.boot span { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }

/* ---------- Game shell ----------
   Phones: a paper page framed by two ink bars (status on top, thumb controls at the bottom).
   Wide screens re-lay the same parts as sheets on the night desk (see "v4: the desk"). */
.game { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.rail { display: contents; }
.hdr { order: 1; padding: calc(10px + var(--safe-t)) 14px 10px; background: var(--ink); color: var(--on-ink); z-index: 5; }
.view { order: 2; }
.side { order: 3; }
.dock { order: 4; }
.h-top { display: flex; align-items: center; gap: 11px; }
.h-av { padding: 0; border: 0; background: none; width: 46px; height: 46px; display: grid; place-items: center; flex: none; }
.mono-av { width: 42px; height: 42px; display: grid; place-items: center; font: 400 20px/1 var(--f-display); letter-spacing: .02em; color: var(--ink); background: var(--paper); transform: rotate(-3deg); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ink); }
.h-id { flex: 1; min-width: 0; }
.h-id b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.22; letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-id small { display: block; color: var(--on-ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-money { text-align: right; }
.h-money small { display: block; font-size: 9px; letter-spacing: .16em; font-weight: 700; color: var(--on-ink-2); }
.h-money b { font-family: var(--f-mono); font-weight: 500; font-size: 16px; white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; border: var(--rule); background: var(--paper); display: grid; place-items: center; padding: 0; color: var(--ink); }
.icon-btn .ic { width: 20px; height: 20px; }
.hdr .icon-btn { background: transparent; color: var(--on-ink); border: 1.5px solid var(--on-ink-3); flex: none; }
.hdr .icon-btn:active { background: var(--on-ink); color: var(--ink); }
.h-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(236,234,227,.16); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; }
.h-date { font-family: var(--f-mono); font-weight: 500; letter-spacing: .04em; font-size: 11px; white-space: nowrap; }
.h-ch { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-ink-2); }
.h-tok { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.h-tok em { font-style: normal; font-size: 9px; margin-right: 4px; color: var(--on-ink-2); letter-spacing: .16em; }
.tok { width: 12px; height: 12px; border: 2px solid var(--ink); display: inline-block; }
.tok.on { background: var(--ink); }
.tok.lock { border-color: var(--ink-3); background: repeating-linear-gradient(45deg, var(--ink-3) 0 1.5px, transparent 1.5px 4px); }
.hdr .tok { border-color: var(--on-ink); }
.hdr .tok.on { background: var(--on-ink); }
.hdr .tok.lock { border-color: var(--on-ink-3); background: repeating-linear-gradient(45deg, var(--on-ink-3) 0 1.5px, transparent 1.5px 4px); }

.view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 14px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dock { padding: 10px 12px calc(6px + var(--safe-b)); background: var(--ink); color: var(--on-ink); z-index: 5; }
.endbtn { width: 100%; border: 0; min-height: 50px; padding: 11px 14px 11px 16px; background: var(--red); color: #FFF8F2; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: transform .12s; }
.endbtn span { font-family: var(--f-display); font-size: 22px; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; }
.endbtn small { font-family: var(--f-mono); font-weight: 500; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.endbtn:active { transform: translateY(2px); }
.endbtn.stamped { animation: stampbtn .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes stampbtn { 0% { transform: scale(1); } 30% { transform: scale(.94) rotate(-1deg); } 100% { transform: scale(1); } }
.nav { display: flex; margin-top: 8px; gap: 2px; }
.nav button { flex: 1; min-width: 0; min-height: 50px; background: transparent; border: 0; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; color: var(--on-ink-2); transition: color .12s, background .12s; }
.nav button .ic { width: 21px; height: 21px; }
.nav button small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav button.on { background: var(--paper); color: var(--ink); }
.nav button:active:not(.on) { color: var(--on-ink); }
.nav .dot { position: absolute; top: 5px; right: calc(50% - 17px); width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 2px var(--ink); }
.nav kbd { display: none; }

/* ---------- Editorial sections ---------- */
.card { display: block; width: 100%; text-align: left; border: 0; border-top: var(--rule); padding: 10px 0 4px; margin: 0 0 18px; background: none; }
.card > h3 { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card > h3 .hint { font-family: var(--f-mono); font-size: 13px; margin-left: auto; }
.card.hl { border: var(--rule); padding: 12px; background: var(--paper); }
.card.danger { border: 2px solid var(--red); padding: 12px; }
.card.danger > h3 { color: var(--red); }
.card.btnrow { display: flex; justify-content: space-between; align-items: center; font-weight: 700; border-bottom: var(--rule); padding: 12px 0; }
.card.btnrow span { display: inline-flex; gap: 8px; align-items: center; font-family: var(--f-display); font-size: 18px; text-transform: uppercase; font-weight: 400; }
.alerts { display: grid; gap: 8px; margin-bottom: 14px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 13.5px; border: var(--hair); border-left: 5px solid var(--ink); background: var(--paper-2); }
.alert .ic { width: 18px; height: 18px; margin-top: 1px; }
.alert.bad { border-left-color: var(--red); }
.alert.bad .ic { color: var(--red); }

.bar { height: 8px; border: 1.5px solid var(--ink); background: var(--paper); }
.bar i { display: block; height: 100%; background: var(--ink); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar.red i { background: var(--red); }
.bar.thin { height: 6px; margin: 4px 0 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.stat .st-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 4px; }
.stat .st-h span { display: inline-flex; gap: 6px; align-items: center; }
.stat b { font-family: var(--f-mono); }
.stat.hot b { color: var(--red); }
.rows, .ledger { display: grid; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--ink-3); font-size: 13.5px; }
.row:last-child { border-bottom: 0; }
.row span { color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.row b { font-family: var(--f-mono); text-align: right; font-size: 13.5px; }
.row.total { border-top: var(--rule); border-bottom: 0; margin-top: 4px; font-weight: 700; }
.row.total span { color: var(--ink); }
.kv { display: flex; justify-content: space-between; font-size: 13.5px; margin: 8px 0 5px; gap: 8px; }
.kv span { color: var(--ink-2); }
.kv b { font-family: var(--f-mono); }
.goals { display: grid; }
.goal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--ink-3); font-size: 14px; font-weight: 700; }
.goal em { font-style: normal; font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.log { list-style: none; padding: 0; margin: 0; }
.log li { font-family: var(--f-serif); font-size: 15px; padding: 8px 0 8px 12px; border-left: 3px solid var(--ink-3); margin-bottom: 4px; }
.log li .ic { margin-right: 6px; width: 14px; height: 14px; }
.log li.good { border-left-color: var(--ink); }
.log li.bad { border-left-color: var(--red); }
.log small { display: block; font-family: var(--f-mono); color: var(--ink-2); font-size: 10.5px; margin-bottom: 2px; }
.spark { width: 100%; height: 44px; display: block; }
.spark polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.spark.red polyline { stroke: var(--red); }
.spark-empty { color: var(--ink-2); font-size: 12.5px; font-family: var(--f-mono); }

/* ---------- Buttons ---------- */
.btn { border: var(--rule); background: var(--paper); color: var(--ink); padding: 10px 14px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; transition: background .12s, color .12s, transform .08s; }
.btn .ic { width: 16px; height: 16px; }
.btn small { font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .8; font-family: var(--f-mono); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.pri { background: var(--ink); color: var(--paper); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.big { width: 100%; padding: 13px; font-size: 15px; margin-top: 10px; }
.btn.sm { padding: 7px 10px; min-height: 38px; min-width: 44px; font-size: 11.5px; flex-direction: row; gap: 6px; }
.btn.sm small { display: block; }
.btn.sm i { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-row .btn { flex: 1 1 auto; }
.btn-col { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 104px; }
.seg { display: flex; border: var(--rule); margin-bottom: 18px; position: sticky; top: -16px; z-index: 3; background: var(--paper); }
.seg button { flex: 1; border: 0; border-right: var(--hair); background: var(--paper); padding: 10px 4px; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--paper); }
.tag { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; padding: 4px 8px; border: var(--hair); white-space: nowrap; }
.link { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 11.5px; padding: 3px 7px; border: 1px solid var(--ink); background: var(--paper); white-space: nowrap; }
.chip .ic { width: 12px; height: 12px; }
.chip.down { color: var(--red); border-color: var(--red); }
.chip.stampchip { font-family: var(--f-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); border: 2px solid var(--red); transform: rotate(-2deg); }

/* ---------- Gündem (the season's key moments) ---------- */
.gundem { border: var(--rule); margin-bottom: 16px; background: var(--paper); }
.g-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--ink); color: var(--paper); }
.g-date { font-family: var(--f-mono); font-size: 10.5px; }
.g-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: var(--hair); }
.g-item:first-of-type { border-top: 0; }
.g-item.danger { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(226,59,30,.07) 8px 16px); }
.g-item.danger .g-ic { border-color: var(--red); color: var(--red); }
.g-ic { width: 38px; height: 38px; border: var(--rule); display: grid; place-items: center; flex: none; }
.g-ic .ic { width: 20px; height: 20px; }
.g-main { flex: 1; min-width: 0; }
.g-main b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.g-main p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.g-score { font-family: var(--f-display); font-size: 26px; text-align: center; line-height: 1; }
.g-score small { display: block; font-family: var(--f-ui); font-size: 9px; letter-spacing: .12em; }

/* ---------- City map ---------- */
.mapwrap { border: var(--rule); margin-bottom: 16px; background: var(--paper); line-height: 0; }
.citymap { width: 100%; height: auto; display: block; }
.citymap .land { fill: var(--paper); }
.citymap .sea { fill: url(#hatch); }
.citymap .hatchline { stroke: var(--ink-3); stroke-width: 1.1; }
.citymap .dot { fill: var(--ink); }
.citymap .coast { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.citymap .street { fill: none; stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 3 2; }
.citymap .contour { fill: none; stroke: var(--ink-3); stroke-width: .8; }
.citymap .pier { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.citymap .ink-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.citymap .tower rect { fill: var(--ink); }
.citymap .tower line { stroke: var(--ink); stroke-width: 2; }
.citymap .dist { cursor: pointer; outline: none; }
.citymap .dfill { fill: transparent; transition: fill .15s; }
.citymap .dist:hover .dfill, .citymap .dist:focus .dfill, .citymap .dist:active .dfill { fill: url(#dots); }
.citymap .dline { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.citymap .ibox { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.citymap .dico { color: var(--ink); stroke: var(--ink); fill: none; stroke-width: 2; }
.citymap .dname { font-family: var(--f-display); font-size: 15px; letter-spacing: .04em; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.citymap .dsub { font-family: var(--f-ui); font-weight: 700; font-size: 7.5px; letter-spacing: .08em; fill: var(--ink-2); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; text-transform: uppercase; }
.citymap .mark rect { fill: var(--red); }
.citymap .mark text { fill: var(--paper); font-family: var(--f-display); font-size: 13px; text-anchor: middle; }
.citymap .mark { animation: markpulse 1.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes markpulse { 50% { opacity: .55; } }
.citymap .cartouche rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.citymap .ct1 { font-family: var(--f-display); font-size: 12px; letter-spacing: .08em; fill: var(--ink); }
.citymap .ct2 { font-family: var(--f-mono); font-size: 6.5px; fill: var(--ink-2); }
.citymap .compass path { fill: var(--ink); }
.citymap .compass text { font-family: var(--f-display); font-size: 9px; text-anchor: middle; fill: var(--ink); }
.waitcard { border-top-color: var(--red); }
.waitcard > h3 { color: var(--red); }
.waitrow { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-bottom: 1px dotted var(--ink-3); padding: 8px 0; text-align: left; }
.wr-who { display: flex; flex: none; }
.wr-who svg { border: 1.5px solid var(--ink); margin-right: -8px; background: var(--paper); }
.wr-main { flex: 1; min-width: 0; padding-left: 8px; }
.wr-main b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 16px; text-transform: uppercase; }
.wr-main small { color: var(--ink-2); font-size: 12px; }

/* ---------- Photos ---------- */
.photo { position: relative; overflow: hidden; background: var(--paper-2); line-height: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.photo.nophoto { background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper-3) 6px 12px); }
.photo.nophoto img { display: none; }

/* ---------- Activities (district sheet) ---------- */
.acts { display: grid; }
.act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dotted var(--ink-3); padding: 11px 2px; transition: background .12s; }
.act:active:not(:disabled) { background: var(--paper-2); }
.act:disabled { opacity: .4; cursor: not-allowed; }
.a-ic { width: 38px; height: 38px; border: var(--rule); display: grid; place-items: center; flex: none; }
.a-ic .ic { width: 20px; height: 20px; }
.a-main { flex: 1; min-width: 0; }
.a-main b { display: block; font-size: 15px; }
.cnt { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.a-eff { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 3px; }
.a-eff em { font-style: normal; font-family: var(--f-mono); font-size: 11px; display: inline-flex; gap: 3px; align-items: center; }
.a-eff em .ic { width: 12px; height: 12px; }
.a-eff em.b { color: var(--red); }
.a-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.a-cost i { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; }
.a-cost i.free { color: var(--ink-2); }
.a-cost small { color: var(--red); font-size: 10.5px; font-weight: 700; }
.tokc { display: inline-flex; gap: 2px; }
.tokc b { width: 10px; height: 10px; background: var(--ink); display: inline-block; }

/* ---------- Jobs, items, people ---------- */
.big-ic { width: 42px; height: 42px; border: var(--rule); display: grid; place-items: center; flex: none; }
.big-ic .ic { width: 22px; height: 22px; }
.job-top, .job-h, .stock-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.job-top b, .job-h b, .stock-h b { display: block; font-size: 15.5px; }
.job-top small, .job-h small, .stock-h small { color: var(--ink-2); font-size: 12.5px; }
.jobs { display: grid; gap: 0; }
.job, .party { padding: 12px 0; border-bottom: 1px dotted var(--ink-3); }
.job .btn, .party .btn { width: 100%; margin-top: 8px; }
.job.locked { opacity: .78; }
.why { color: var(--red); font-size: 12px; font-weight: 700; margin: 4px 0 0; display: flex; gap: 5px; align-items: flex-start; }
small.why, small.g { display: block; margin-top: 3px; font-weight: 700; }
.ilan > h3 { border-bottom: 4px double var(--ink); padding-bottom: 6px; }
.pmark { font-size: 22px; width: 42px; height: 42px; border: var(--rule); display: inline-grid; place-items: center; flex: none; }
.card > h3 .pmark { width: 28px; height: 28px; font-size: 15px; }
.depts { display: grid; margin: 8px 0; border: var(--hair); }
.dept { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 10px; border-bottom: 1px dotted var(--ink-3); color: var(--ink-3); }
.dept:last-child { border-bottom: 0; }
.dept span { display: inline-flex; gap: 6px; align-items: center; }
.dept b { font-family: var(--f-mono); }
.dept.ok { color: var(--ink); font-weight: 700; }
.ladder { display: grid; }
.office { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dotted var(--ink-3); opacity: .7; }
.office b { display: block; }
.office small { color: var(--ink-2); display: block; font-size: 12px; }
.office.ok, .office.cur { opacity: 1; }
.office.cur .big-ic { background: var(--ink); color: var(--paper); }
.items { display: grid; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--ink-3); }
.item.own .big-ic { background: var(--ink); color: var(--paper); }
.it-main { flex: 1; min-width: 0; }
.it-main b { display: block; font-size: 14.5px; }
.it-main small { color: var(--ink-2); font-size: 12px; display: block; }
.life { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--rule); margin-bottom: 8px; }
.life button { background: var(--paper); border: 0; border-right: var(--hair); padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.life button:last-child { border-right: 0; }
.life button .ic { width: 20px; height: 20px; }
.life button b { font-size: 12px; }
.life button small { font-size: 10px; font-family: var(--f-mono); }
.life button.on { background: var(--ink); color: var(--paper); }
.person { border-bottom: 1px dotted var(--ink-3); }
.person.char .p-main b::after { content: 'KARAKTER'; font-family: var(--f-ui); font-size: 8.5px; letter-spacing: .14em; margin-left: 8px; padding: 1px 4px; border: 1px solid var(--ink); vertical-align: 2px; }
.p-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 10px 0; text-align: left; }
.p-ic { flex: none; border: var(--rule); line-height: 0; background: var(--paper); }
.p-main { flex: 1; min-width: 0; }
.p-main b { display: block; font-size: 15px; }
.p-main small { display: block; color: var(--ink-2); font-size: 12px; margin-bottom: 6px; }
.p-v { font-family: var(--f-display); font-size: 22px; width: 36px; text-align: right; }
.p-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; animation: fadeIn .2s; }
.p-acts .btn { flex: 1 1 calc(50% - 6px); }
.p-acts .btn.pa { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; justify-items: start; text-align: left; min-height: 50px; padding: 8px 12px; }
.p-acts .btn.pa .ic { grid-row: 1 / span 3; width: 18px; height: 18px; }
.p-acts .btn.pa > span { line-height: 1.15; }
.p-acts .btn.pa i, .p-acts .btn.pa small { grid-column: 2; line-height: 1.2; }
.stock-h .tick { font-family: var(--f-display); font-weight: 400; font-size: 16px; padding: 6px 8px; background: var(--ink); color: var(--paper); }
.bud { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; margin-top: 8px; }
.bud span { display: inline-flex; gap: 6px; align-items: center; }
.bud.tax { margin-top: 14px; }
.stepper { display: flex; align-items: center; border: var(--rule); }
.stepper b { min-width: 48px; text-align: center; font-family: var(--f-mono); }
.stepper button { width: 44px; height: 40px; border: 0; background: var(--paper); font-size: 18px; font-weight: 700; }
.stepper button:first-child { border-right: var(--hair); }
.stepper button:last-child { border-left: var(--hair); }
.stepper button:active { background: var(--ink); color: var(--paper); }
.gk { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hair); border-left: var(--hair); }
.gki { border-right: var(--hair); border-bottom: var(--hair); padding: 8px 10px; }
.gki span { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--ink-2); }
.gki b { font-family: var(--f-display); font-size: 22px; font-weight: 400; }
.gki.b b { color: var(--red); }

/* ---------- Profile ---------- */
.kunye { display: flex; gap: 14px; align-items: flex-start; border-top: 4px double var(--ink); border-bottom: var(--rule); padding: 12px 0; margin-bottom: 18px; }
.k-portrait { border: var(--rule); line-height: 0; flex: none; }
.k-main h2 { font-family: var(--f-display); font-size: 30px; text-transform: uppercase; margin: 4px 0 6px; }
.k-main p { margin: 0 0 4px; font-family: var(--f-serif); font-size: 16px; }
.k-meta { font-family: var(--f-ui) !important; font-size: 13px !important; color: var(--ink-2); }
.k-meta .ic { margin-right: 4px; }
.stamps { display: flex; flex-wrap: wrap; gap: 10px; }
.stamp { border: 3px solid var(--red); color: var(--red); padding: 6px 10px; max-width: 160px; opacity: .92; mix-blend-mode: multiply; background: transparent; }
.stamp b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 17px; letter-spacing: .06em; line-height: 1; }
.stamp small { display: block; font-size: 10.5px; line-height: 1.25; margin-top: 4px; color: var(--ink-2); }
.stamp.r0 { transform: rotate(-3deg); } .stamp.r1 { transform: rotate(2deg); } .stamp.r2 { transform: rotate(-1deg); }
.stamps.small { justify-content: center; margin-top: 12px; }
.stamps.small .stamp b { font-size: 13px; }
.dosya { margin: 0; padding-left: 22px; font-family: var(--f-serif); font-size: 15.5px; }
.dosya li { padding: 6px 0; border-bottom: 1px dotted var(--ink-3); }
.dosya li.found { font-weight: 600; }
.redact { background: var(--ink); color: var(--ink); font-family: var(--f-mono); font-size: 12px; user-select: none; letter-spacing: -1px; }
.dosyacard > h3 { color: var(--ink); }

/* ---------- Toasts ---------- */
#toast-root { position: fixed; top: calc(8px + var(--safe-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 300; pointer-events: none; padding: 0 12px; }
/* toasts are paper slips: they must read over the ink bar on phones and over the paper sheets on the desk */
.toast { max-width: 440px; min-width: 62%; background: var(--paper); color: var(--ink); padding: 9px 14px 10px; font-weight: 700; font-size: 13.5px; line-height: 1.35; text-align: center; transform: translateY(-16px); opacity: 0; transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .22s; border: 2px solid var(--ink); border-left-width: 7px; box-shadow: 0 10px 26px -8px rgba(0,0,0,.55); }
.toast.in { transform: none; opacity: 1; }
.toast.bad { border-left-color: var(--red); }
.toast.ach { border-width: 3px; font-family: var(--f-display); font-weight: 400; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.toast .chips { justify-content: center; margin-top: 6px; }

/* ---------- Modals ---------- */
#modal-root .modal { position: fixed; inset: 0; background: rgba(21,20,18,.62); display: flex; align-items: flex-end; justify-content: center; z-index: 100; opacity: 0; transition: opacity .2s; }
#modal-root .modal.in { opacity: 1; }
/* sheets sit on a dark scrim, so their double rule is drawn inside the paper (an outer ink line would vanish) */
.sheet { --rule-top: inset 0 3px 0 var(--ink), inset 0 6px 0 var(--paper), inset 0 8px 0 var(--ink); position: relative; width: 100%; max-width: 540px; max-height: 90dvh; overflow-y: auto; background: var(--paper); box-shadow: var(--rule-top); padding: 22px 16px calc(16px + var(--safe-b)); transform: translateY(40px); transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.sheet > * { position: relative; z-index: 1; }
.modal.in .sheet { transform: none; }
.sheet > .kicker { display: block; margin-bottom: 6px; color: var(--ink-2); }
.sheet > h2 { font-family: var(--f-display); font-size: 28px; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 10px; }
.sheet h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.m-body > p { font-family: var(--f-serif); font-size: 17px; line-height: 1.45; }
.m-btns { display: flex; gap: 8px; margin-top: 16px; }
.m-btns .btn { flex: 1; }
.m-btns.col { flex-direction: column; }
.sheet.tall { max-height: 94dvh; }
/* the menu: a list of rows rather than a stack of boxes */
.menu-sheet .m-btns.col { gap: 0; margin-top: 4px; }
.menu-sheet .btn.mi { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 54px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(21,20,18,.22); background: none; font-size: 13.5px; letter-spacing: .08em; text-align: left; }
.menu-sheet .btn.mi:first-child { border-top: 2px solid var(--ink); }
.menu-sheet .btn.mi .ic { width: 20px; height: 20px; }
.menu-sheet .btn.mi .go { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3); }
.menu-sheet .btn.mi .state { margin-left: auto; font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .06em; border: 1.5px solid currentColor; padding: 4px 7px; }
.menu-sheet .btn.mi:active { background: var(--paper-2); transform: none; }
.menu-sheet .btn.pri { margin-top: 16px; }
.meet { text-align: center; }
.meet svg { border: var(--rule); margin-bottom: 8px; }
.help p { font-family: var(--f-serif); font-size: 16px; }
.achs { display: grid; }
.achi { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dotted var(--ink-3); opacity: .4; }
.achi .ic { width: 22px; height: 22px; }
.achi.on { opacity: 1; }
.achi.ever { opacity: .7; }
.achi b { display: block; font-size: 14px; }
.achi small { color: var(--ink-2); font-size: 12px; }
.votes { display: grid; gap: 12px; margin: 10px 0; }
.vote .kv { margin: 0 0 4px; }
.vote .kv span { color: var(--ink); font-weight: 700; }
.vote .kv small { color: var(--ink-2); font-weight: 500; }
.vbar { height: 16px; }
.vbar i { transition: width 1.6s cubic-bezier(.2,.8,.2,1); background: repeating-linear-gradient(90deg, var(--ink) 0 3px, var(--ink-2) 3px 4px); }
.vote.me .vbar i { background: var(--red); }
.vres { text-align: center; font-family: var(--f-display); font-size: 26px; min-height: 30px; margin-top: 8px; letter-spacing: .04em; }

/* ---------- Event card: newspaper clipping ---------- */
.sheet.clip { --rule-top: inset 0 6px 0 var(--ink); }
.sheet.clip.tone-bad { --rule-top: inset 0 6px 0 var(--red); }
.clip-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 4px double var(--ink); padding-bottom: 6px; margin-bottom: 12px; }
.clip-date { font-family: var(--f-mono); font-size: 11px; }
.clip.tone-bad .clip-head .kicker { color: var(--red); }
.clip-photo { aspect-ratio: 16 / 9; border: var(--rule); margin-bottom: 12px; }
.clip-ic { width: 64px; height: 64px; border: var(--rule); display: grid; place-items: center; margin-bottom: 12px; }
.clip-ic .ic { width: 32px; height: 32px; }
.clip.tone-bad .clip-ic { border-color: var(--red); color: var(--red); }
.clip-title { font-family: var(--f-display); font-size: 32px; text-transform: uppercase; line-height: 1.1; margin-bottom: 8px; }
.clip-x { font-family: var(--f-serif); font-size: 18px; line-height: 1.45; margin-bottom: 14px; }
.ev-whos { display: flex; gap: 10px; margin: -2px 0 10px; }
.ev-who { margin: 0; text-align: center; }
.ev-who svg { border: var(--rule); display: block; }
.ev-who figcaption { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.ev-ch { display: grid; gap: 8px; }
.ev-ch.gone { display: none; }
.choice { position: relative; width: 100%; text-align: left; padding: 12px 44px 12px 14px; background: var(--paper); border: var(--rule); color: var(--ink); font-weight: 700; font-size: 15px; transition: background .12s, color .12s; display: flex; flex-direction: column; gap: 2px; }
.choice small { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; color: var(--ink-2); }
.choice .risk { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 9.5px; letter-spacing: .12em; font-weight: 700; border: 1.5px solid currentColor; padding: 2px 4px; display: inline-flex; }
.choice .risk .ic { width: 14px; height: 14px; }
.choice:active:not(:disabled), .choice.picked { background: var(--ink); color: var(--paper); }
.choice.picked small { color: var(--paper-3); }
.choice:disabled:not(.picked) { opacity: .35; }
.choice.fade { opacity: .2; }
.hint-g { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.hint-g .ic { width: 12px; height: 12px; }
.hint-g b { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.res { font-family: var(--f-serif); font-size: 18px; line-height: 1.45; margin: 4px 0 8px; padding: 12px 0; border-top: var(--rule); border-bottom: var(--hair); animation: fadeIn .3s; }
.res.bad { border-top-color: var(--red); }
.ev-res .chips { margin-bottom: 4px; }

/* ---------- Story scene: inverted ink panel ---------- */
.modal.scene { align-items: stretch !important; background: var(--ink) !important; }
.scene-wrap { width: 100%; max-width: 540px; height: 100%; overflow-y: auto; background: var(--ink); color: var(--paper); transform: translateY(24px); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.modal.in .scene-wrap { transform: none; }
.scene-photo { aspect-ratio: 4 / 3; max-height: 42dvh; width: 100%; background: var(--ink); border-bottom: 4px double var(--paper); }
.scene-photo { background: var(--paper); }
.scene-photo img { mix-blend-mode: multiply; }
.scene-body { padding: 16px 16px calc(24px + var(--safe-b)); }
.scene-body > .kicker { color: var(--ink-3); }
.scene-body h2 { font-family: var(--f-display); font-size: 38px; text-transform: uppercase; line-height: 1.1; margin: 6px 0 8px; letter-spacing: .01em; }
.scene-body .dek { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--paper-3); margin-bottom: 14px; }
.lines { border-top: 2px solid var(--paper); padding-top: 12px; margin-bottom: 16px; }
.line { display: flex; gap: 12px; margin-bottom: 14px; animation: lineIn .45s both; }
.line:nth-child(2) { animation-delay: .15s; } .line:nth-child(3) { animation-delay: .3s; } .line:nth-child(4) { animation-delay: .45s; } .line:nth-child(5) { animation-delay: .6s; } .line:nth-child(6) { animation-delay: .75s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp { flex: none; line-height: 0; border: 2px solid var(--paper); height: fit-content; }
.lb b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.lb p { font-family: var(--f-serif); font-size: 18px; line-height: 1.42; margin: 0; }
.line.me .lb b { color: var(--red); }
.narr { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--paper-3); line-height: 1.5; margin: 0 0 14px; animation: lineIn .45s both; }
.scene .choice { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.scene .choice small { color: var(--ink-3); }
.scene .choice:active:not(:disabled), .scene .choice.picked { background: var(--paper); color: var(--ink); }
.scene .res { border-top-color: var(--paper); border-bottom-color: var(--ink-2); color: var(--paper); }
.scene .res.bad { border-top-color: var(--red); }
.scene .chip { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.scene .chip.down { color: #ff8c73; border-color: #ff8c73; }
.scene .btn.pri { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Chapter card ---------- */
.modal.chapter { background: var(--ink) !important; align-items: center !important; }
.chapter-sheet { background: var(--ink); color: var(--paper); border: 0; text-align: center; padding: 40px 20px calc(30px + var(--safe-b)); max-height: none; }
.chapter-sheet::before { display: none; }
.ch-kick { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }
.ch-no { font-family: var(--f-display); font-size: 30px; letter-spacing: .12em; margin-top: 24px; color: var(--red); }
.ch-name { font-family: var(--f-display); font-size: clamp(72px, 26vw, 130px); line-height: 1.05; letter-spacing: .01em; animation: chIn .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes chIn { from { opacity: 0; transform: scale(1.3); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
.chapter-sheet .dek { font-family: var(--f-serif); font-style: italic; font-size: 19px; color: var(--paper-3); max-width: 360px; margin: 18px auto 0; }
.chapter-sheet .btn.pri { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- District sheet ---------- */
.sheet.locsheet { --rule-top: none; padding-top: 0; }
.loc-hero { position: relative; margin: 0 -16px; }
.loc-photo { aspect-ratio: 16 / 9; border-bottom: var(--rule); }
.loc-title { position: absolute; left: 16px; bottom: 0; background: var(--ink); color: var(--paper); padding: 8px 12px 6px; }
.loc-title .kicker { color: var(--ink-3); font-size: 10px; }
.loc-title h2 { font-family: var(--f-display); font-size: 40px; line-height: 1.12; letter-spacing: .02em; }
.loc-x { position: absolute; top: 10px; right: 10px; }
.loc-d { font-family: var(--f-serif); font-style: italic; font-size: 16.5px; color: var(--ink-2); margin: 12px 0 10px; }
.loc-scenes { display: grid; gap: 8px; margin-bottom: 12px; }
.scene-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--ink); color: var(--paper); border: 0; border-left: 6px solid var(--red); padding: 10px; text-align: left; }
.scene-btn .wr-who svg { border-color: var(--paper); }
.scene-btn .wr-main small { color: var(--paper-3); }
.scene-btn .go { font-style: normal; font-family: var(--f-display); font-size: 16px; letter-spacing: .06em; background: var(--red); padding: 6px 10px; }
.loc-vakit { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-top: var(--rule); border-bottom: var(--hair); padding: 6px 0; }
.loc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.loc-links .btn { flex: 1 1 auto; }

/* ---------- Newspaper ---------- */
.modal.paperwrap { align-items: center !important; background: rgba(21,20,18,.82) !important; perspective: 900px; }
.paper-stage { width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); gap: 10px; }
.paper-spin { flex: 0 1 auto; min-height: 0; overflow-y: auto; background: var(--paper); position: relative; }
.modal.paperwrap.in .paper-spin { animation: spinIn .95s cubic-bezier(.16,.84,.3,1) both; }
@keyframes spinIn { 0% { transform: rotate(-540deg) scale(.08); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.paper-btns { display: flex; gap: 8px; }
.paper-btns .btn { flex: 1; margin-top: 0; }
.paper-btns .btn:not(.pri) { background: var(--paper); }
.paper { position: relative; padding: 14px 14px 0; }
.paper > * { position: relative; z-index: 1; }
.pp-mast { text-align: center; border-bottom: 5px double var(--ink); padding-bottom: 6px; }
.pp-meta { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; border-top: var(--hair); border-bottom: var(--hair); padding: 3px 0; }
.pp-mast h1 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(34px, 11vw, 50px); letter-spacing: -.02em; line-height: 1; margin: 8px 0 4px; }
.pp-tag { display: flex; justify-content: space-between; font-family: var(--f-serif); font-style: italic; font-size: 12px; color: var(--ink-2); }
.pp-lead { padding: 12px 0 10px; border-bottom: var(--rule); }
.pp-lead .kicker { display: inline-block; background: var(--ink); color: var(--paper); padding: 2px 6px; }
.pp-lead.bad .kicker { background: var(--red); }
.pp-lead h2 { font-family: var(--f-display); font-size: clamp(30px, 9vw, 42px); line-height: 1.1; text-transform: uppercase; margin: 8px 0 10px; }
.pp-photo { aspect-ratio: 16 / 10; border: var(--rule); }
.pp-lead-vis { position: relative; }
.pp-portrait.inset { position: absolute; right: 8px; bottom: -14px; border: 3px solid var(--ink); background: var(--paper); line-height: 0; }
.pp-portrait.solo { display: flex; justify-content: center; border: var(--rule); padding: 10px 0 0; background: var(--paper-2); line-height: 0; }
.pp-lead .dek { font-family: var(--f-serif); font-style: italic; font-size: 17px; line-height: 1.4; margin: 14px 0 0; }
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--rule); }
.pp-col { padding: 10px 10px 10px 0; border-right: var(--hair); }
.pp-col:nth-child(2n) { padding: 10px 0 10px 10px; border-right: 0; }
.pp-col:nth-child(3) { grid-column: 1 / -1; border-right: 0; border-top: var(--hair); padding: 10px 0; }
.pp-col h3 { font-family: var(--f-serif); font-weight: 600; font-size: 17px; line-height: 1.15; margin: 4px 0; }
.pp-col p { font-family: var(--f-serif); font-size: 13.5px; line-height: 1.35; color: var(--ink-2); margin: 0; }
.pp-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; padding: 10px 0; }
.pp-bottom.hide { display: none; }
.pp-you { border: var(--rule); padding: 8px; }
.pp-you .row { font-size: 12.5px; padding: 4px 0; }
.pp-you .row b { font-size: 12.5px; }
.pp-you ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }
.pp-side { display: grid; gap: 8px; align-content: start; }
.pp-weather b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.pp-weather small { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.pp-ads { border-top: var(--hair); padding-top: 6px; }
.pp-ads p { font-family: var(--f-serif); font-size: 12.5px; line-height: 1.3; margin: 4px 0 0; }
.pp-ads b { font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .08em; }
.pp-ticker { display: flex; gap: 14px; overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--paper); margin: 0 -14px; padding: 7px 14px; font-family: var(--f-mono); font-size: 11px; }
.pp-ticker i { font-style: normal; }
.pp-ticker i.b { color: #ff8c73 !important; }
.ledger-page { position: relative; padding: 16px; font-family: var(--f-mono); background: repeating-linear-gradient(var(--paper) 0 27px, #cfd5d9 27px 28px); min-height: 100%; }
.ledger-page .kicker { font-family: var(--f-ui); display: block; border-bottom: 5px double var(--ink); padding-bottom: 8px; margin-bottom: 6px; }
.ledger-page .row span { color: var(--ink); font-family: var(--f-mono); font-size: 12.5px; }
.ledger-page .row { border-bottom: 0; }
.notes { padding-left: 18px; margin: 12px 0 0; font-family: var(--f-serif); font-size: 14.5px; display: grid; gap: 4px; }

/* ---------- Title / create / death ---------- */
.title-screen { height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.t-hero { position: relative; height: 46dvh; min-height: 260px; border-bottom: 6px double var(--ink); }
.t-photo { position: absolute; inset: 0; }
.t-over { position: absolute; left: 16px; top: calc(14px + var(--safe-t)); background: var(--ink); color: var(--paper); padding: 4px 8px; }
.t-body { padding: 14px 18px calc(20px + var(--safe-b)); display: flex; flex-direction: column; flex: 1; }
.t-logo { font-family: var(--f-display); font-size: clamp(72px, 24vw, 118px); line-height: 1; padding: .1em 0 .17em; letter-spacing: -.005em; margin-top: 0; animation: chIn .9s cubic-bezier(.2,.9,.3,1) both; }
.t-dek { font-family: var(--f-serif); font-style: italic; font-size: 19px; line-height: 1.4; margin: 4px 0 20px; max-width: 420px; }
.title-btns { display: grid; gap: 8px; margin-top: auto; }
.title-btns .btn.big { margin-top: 0; }
.title-btns .btn-row { margin-top: 0; }
.foot { color: var(--ink-2); font-family: var(--f-mono); font-size: 10.5px; margin: 14px 0 0; text-align: center; }
.create { height: 100dvh; overflow-y: auto; padding: calc(16px + var(--safe-t)) 16px 0; }
.form-h { text-align: center; border-bottom: 5px double var(--ink); padding-bottom: 10px; margin-bottom: 16px; }
.form-h h2 { font-family: var(--f-display); font-size: 34px; text-transform: uppercase; margin-top: 6px; }
.form-id { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.form-photo { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.form-photo svg { border: var(--rule); display: block; }
.form-photo .btn { width: 100%; }
.form-fields { flex: 1; display: grid; gap: 10px; }
.form-fields label { display: grid; gap: 2px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink-2); }
.form-fields input { border: 0; border-bottom: var(--rule); background: transparent; font-family: var(--f-display); font-size: 26px; text-transform: uppercase; padding: 2px 0; color: var(--ink); border-radius: 0; width: 100%; }
.form-fields input:focus { outline: none; border-bottom-color: var(--red); }
.form-sec { border-top: var(--rule); padding-top: 10px; margin-bottom: 18px; }
.form-sec h3 { font-family: var(--f-display); font-size: 18px; text-transform: uppercase; margin: 6px 0 8px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hair); border-left: var(--hair); }
.opts.four { grid-template-columns: 1fr 1fr 1fr 1fr; }
.opts.three { grid-template-columns: 1fr 1fr 1fr; }
.opt { background: var(--paper); border: 0; border-right: var(--hair); border-bottom: var(--hair); padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.opts.two .opt, .opts.three .opt, .opts.four .opt { align-items: center; text-align: center; }
.opt .ic { width: 22px; height: 22px; margin-bottom: 2px; }
.opt b { font-size: 14px; }
.opts.four .opt b { font-size: 12px; }
.opt small { color: var(--ink-2); font-size: 11.5px; line-height: 1.3; }
.opt.on { background: var(--ink); color: var(--paper); }
.opt.on small { color: var(--paper-3); }
.create-go { display: flex; gap: 8px; align-items: stretch; position: sticky; bottom: 0; padding: 10px 0 calc(10px + var(--safe-b)); background: var(--paper); border-top: 4px double var(--ink); }
.create-go .btn.big { margin-top: 0; flex: 1; background: var(--red); border-color: var(--red); }
.death { height: 100dvh; overflow-y: auto; padding: calc(18px + var(--safe-t)) 16px calc(24px + var(--safe-b)); }
.obit { border: 6px double var(--ink); padding: 16px; text-align: center; margin-bottom: 18px; }
.obit > .kicker { display: block; }
.obit-life .log li { font-size: 14.5px; }
.death-side > .btn.big:first-of-type { margin-top: 4px; }
.obit-portrait { display: inline-block; border: var(--rule); line-height: 0; margin: 12px 0 8px; }
.obit h1 { font-family: var(--f-serif); font-weight: 600; font-size: 32px; line-height: 1.05; }
.yrs { font-family: var(--f-mono); font-size: 13px; margin: 6px 0; }
.ep { font-family: var(--f-serif); font-style: italic; font-size: 19px; margin: 12px 0 4px; }
.ending { border-top: var(--hair); padding-top: 10px; margin-top: 12px; text-align: left; }
.ending .kicker { color: var(--red); }
.ending p { font-family: var(--f-serif); font-size: 16px; margin: 4px 0 0; }
.score { margin: 16px 0 10px; border-top: var(--rule); border-bottom: var(--rule); padding: 8px 0; }
.score b { display: block; font-family: var(--f-display); font-size: 54px; font-weight: 400; line-height: 1; }
.score small { font-size: 10.5px; letter-spacing: .16em; font-weight: 700; }
.obit .rows { text-align: left; }
.death .btn.big { margin-top: 8px; }
.heir { display: flex; gap: 12px; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px dotted var(--ink-3); padding: 10px 0; text-align: left; }
.heir svg { border: var(--rule); flex: none; }
.heir b { display: block; }
.heir small { color: var(--ink-2); font-size: 12px; }
.pfall { display: inline-grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--f-display); }

/* ---------- Mini-games ---------- */
.mg { position: fixed; inset: 0; z-index: 150; background: rgba(21,20,18,.92); display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 0; transition: opacity .2s; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg.in { opacity: 1; }
.mg-card { width: 100%; max-width: 480px; background: var(--paper); box-shadow: inset 0 3px 0 var(--ink), inset 0 6px 0 var(--paper), inset 0 8px 0 var(--ink); padding: 20px 14px 14px; position: relative; }
.mg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; border-bottom: var(--rule); padding-bottom: 10px; }
.mg-ic { width: 44px; height: 44px; border: var(--rule); display: grid; place-items: center; }
.mg-ic .ic { width: 24px; height: 24px; }
.mg-head b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 22px; text-transform: uppercase; line-height: 1; }
.mg-head small { color: var(--ink-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.mg-how { font-family: var(--f-serif); font-size: 17px; text-align: center; margin: 12px 0; }
.mg-count { font-family: var(--f-display); font-size: 110px; text-align: center; padding: 30px 0; animation: pop .5s; line-height: 1; }
.mg-hud { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 15px; margin-bottom: 10px; border-bottom: var(--hair); padding-bottom: 6px; }
.mg-msg { text-align: center; font-family: var(--f-display); font-size: 22px; min-height: 30px; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.mg-big { width: 100%; padding: 20px; font-family: var(--f-display); font-size: 30px; letter-spacing: .06em; border: 0; background: var(--red); color: var(--paper); }
.mg-big:active { transform: translateY(2px); }
.mg-timebar { height: 8px; border: 1.5px solid var(--ink); margin-bottom: 12px; }
.mg-timebar i { display: block; height: 100%; width: 100%; background: var(--ink); }
.mg-res { text-align: center; padding: 6px 0; }
.mg-grade { font-family: var(--f-display); font-size: 96px; line-height: 1; animation: pop .5s cubic-bezier(.2,.9,.3,1.5); display: inline-block; border: 5px solid var(--ink); padding: 4px 22px; transform: rotate(-4deg); margin-bottom: 8px; }
.gS, .gA { background: var(--ink); color: var(--paper); }
.gD { border-color: var(--red) !important; color: var(--red); }
.mg-score { font-family: var(--f-mono); font-size: 30px; }
.mg-score small { font-size: 15px; color: var(--ink-2); }
.mg-res p { font-family: var(--f-serif); font-style: italic; font-size: 18px; }
.tbar { position: relative; height: 60px; border: var(--rule); background: var(--paper); overflow: hidden; }
.tzone { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 7px); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.tzone i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.tneedle { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; background: var(--red); }
.mq { font-family: var(--f-display); font-size: 52px; text-align: center; padding: 14px 0; }
.mans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mans button { padding: 18px 0; font-family: var(--f-mono); font-size: 28px; border: var(--rule); background: var(--paper); }
.mans button.ok { background: var(--ink); color: var(--paper); }
.mans button.no { background: var(--red); color: var(--paper); border-color: var(--red); }
.arena { position: relative; height: min(56vh, 420px); border: var(--rule); overflow: hidden; background-color: var(--paper); background-image: radial-gradient(var(--paper-3) 1px, transparent 1.4px); background-size: 12px 12px; }
.arena.shake { animation: shake .3s; }
.tgt { position: absolute; width: 60px; height: 60px; border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; animation: tgt linear forwards; color: var(--ink); }
.tgt .ic { width: 28px; height: 28px; }
.tgt.bomb { background: var(--red); border-color: var(--red); color: var(--paper); }
.tgt.pop { transform: scale(1.4); opacity: 0; transition: .15s; }
@keyframes tgt { 0% { transform: scale(.3); } 15% { transform: scale(1); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: .2; } }
.pitch { position: relative; padding: 24px 16px 70px; border: var(--rule); overflow: hidden; background: repeating-linear-gradient(90deg, var(--paper) 0 26px, var(--paper-2) 26px 52px); }
.pgoal { position: relative; aspect-ratio: 2.4 / 1; border: 5px solid var(--ink); border-bottom: 0; }
.pgoal.flash { animation: flash .4s; }
.net { position: absolute; inset: 0; background-image: linear-gradient(var(--ink-3) 1px, transparent 1px), linear-gradient(90deg, var(--ink-3) 1px, transparent 1px); background-size: 12px 12px; opacity: .6; }
.keeper { position: absolute; bottom: 0; left: 50%; width: 52px; transform: translateX(-50%); line-height: 0; }
.keeper svg { width: 100%; fill: var(--ink); stroke: var(--ink); }
.keeper .arm { fill: none; stroke-width: 6; stroke-linecap: round; }
.keeper .glove { fill: var(--red); stroke: none; }
.keeper.dive { transform: translateX(-50%) rotate(var(--rot, 0deg)); }
.cross { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.cross svg { width: 100%; fill: none; stroke: var(--red); stroke-width: 3.5; }
.pball { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); z-index: 3; }
.pball svg { width: 100%; fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.pball svg path { fill: var(--ink); }
.spot { position: absolute; bottom: 22px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); }
.lanes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: min(48vh, 360px); }
.lane { position: relative; border: var(--rule); overflow: hidden; background: var(--paper); transition: background .08s; }
.lane.flash { background: var(--paper-3); }
.hitline { position: absolute; left: 0; right: 0; top: 85%; height: 4px; background: var(--red); pointer-events: none; }
.note { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; pointer-events: none; }
.note i { display: block; width: 100%; height: 100%; background: var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 8px var(--ink); }
.note.hit { transform: translate(-50%, -50%) scale(1.8); opacity: 0; transition: .15s; }
.note.miss { opacity: .15; }
.lbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.lbtns button { padding: 16px 0; border: var(--rule); background: var(--paper); display: grid; place-items: center; }
.lbtns button .ic { width: 26px; height: 26px; }
.lbtns button:active { background: var(--ink); color: var(--paper); }
.dq { font-family: var(--f-serif); font-size: 18px; line-height: 1.35; border-left: 6px solid var(--red); padding: 10px 12px; margin-bottom: 12px; background: var(--paper-2); }
.dans { display: grid; gap: 8px; }
.dans button { text-align: left; padding: 12px; border: var(--rule); background: var(--paper); font-size: 14.5px; font-weight: 700; }
.dans button.ok { background: var(--ink); color: var(--paper); }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes flash { 50% { border-color: var(--red); } }

@media (min-width: 600px) {
  body { padding: 0; }
  #app { box-shadow: var(--sheet-shadow); }
  .sheet { margin-bottom: 24px; box-shadow: var(--rule-top), var(--sheet-shadow); }
  .sheet.locsheet { box-shadow: var(--sheet-shadow); }
  #modal-root .modal:not(.scene):not(.paperwrap):not(.chapter) { align-items: center; }
}
@media (max-width: 360px) {
  .h-tok em { display: none; }
  .opts.four { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ================= v3: paper theatre (story scenes) ================= */
.modal.scene.theatre { align-items: stretch !important; justify-content: center; background: var(--ink) !important; }
.th-wrap { width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); transform: translateY(24px); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.modal.in .th-wrap { transform: none; }
.th-stage { position: relative; flex: 0 0 auto; height: min(54dvh, 460px); overflow: hidden; background: var(--paper); border-bottom: 4px double var(--paper); cursor: pointer; }
.th-back { position: absolute; inset: 0; background: var(--paper-2); }
.th-back img { position: absolute; inset: -5%; width: 110%; height: 110%; object-fit: cover; mix-blend-mode: multiply; animation: thPush 26s ease-in-out infinite alternate; }
.th-back.nophoto img { display: none; }
.th-stage.noimg .th-back { background: repeating-linear-gradient(35deg, var(--paper-2) 0 2px, var(--paper) 2px 7px); }
.th-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(236,234,227,.96) 0, rgba(236,234,227,.9) 12%, rgba(236,234,227,0) 42%), radial-gradient(ellipse at 50% 40%, rgba(236,234,227,0) 55%, rgba(21,20,18,.28) 100%); }
.th-cast { position: absolute; left: 0; right: 0; top: 29%; bottom: 6%; display: flex; justify-content: space-evenly; align-items: flex-end; padding: 0 4%; pointer-events: none; }
.fig { position: relative; margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform-origin: 50% 100%; animation: thSway 4.8s ease-in-out infinite; animation-delay: var(--d); transition: opacity .3s, transform .3s, filter .3s; }
.th-cast.n3 .fig { height: 88%; }
.fig-img { height: 100%; width: auto; max-width: 44vw; object-fit: contain; filter: drop-shadow(2.5px 0 0 #F6F4EE) drop-shadow(-2.5px 0 0 #F6F4EE) drop-shadow(0 2.5px 0 #F6F4EE) drop-shadow(0 -2.5px 0 #F6F4EE) drop-shadow(5px 7px 0 rgba(21,20,18,.3)); }
.th-cast.n3 .fig-img { max-width: 30vw; }
.fig-card { display: block; background: #F6F4EE; border: 2px solid var(--ink); padding: 6px 6px 10px; transform: rotate(calc((var(--i) - 1) * 2deg)); box-shadow: 5px 7px 0 rgba(21,20,18,.3); }
.fig-card svg, .fig-card .pimg { display: block; }
.fig-foot { display: block; width: 62%; height: 9px; margin-top: -3px; background: var(--paper-2); border: 2px solid var(--ink); }
.fig figcaption { margin-top: 4px; font: 600 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); padding: 3px 5px; }
.fig.talk { animation: thTalk .9s ease-in-out infinite alternate; z-index: 2; }
.fig.dim { opacity: .55; transform: translateY(6px) scale(.97); }
.fig.cheer { animation: thHop .5s cubic-bezier(.3,1.6,.5,1) 2; }
.fig.slump { transform: translateY(8px) rotate(-2deg); opacity: .8; animation: none; }
.th-cap { position: absolute; left: 10px; top: 10px; max-width: 80%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 6px 10px 7px; }
.th-cap .kicker { color: var(--ink-2); font-size: 10px; }
.th-cap h2 { font-family: var(--f-display); font-size: 24px; line-height: 1.05; text-transform: uppercase; margin: 3px 0 0; letter-spacing: .01em; }
.th-script { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px calc(18px + var(--safe-b)); display: flex; flex-direction: column; }
.th-script > * { flex: none; }
.th-script > .dek { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--paper-3); margin: 0 0 10px; }
.th-log .narr, .th-log .say { opacity: .74; margin-bottom: 10px; animation: none; }
.th-log .say p, .th-log .narr { font-size: 15px; }
.th-line { min-height: 84px; margin: 4px 0 12px; }
.th-script .say b { display: block; font-family: var(--f-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); border-bottom: 2px solid var(--paper); padding-bottom: 3px; margin-bottom: 6px; width: max-content; max-width: 100%; }
.th-script .say.me b { border-bottom-style: dashed; }
.th-script .say p { font-family: var(--f-serif); font-size: 19px; line-height: 1.45; margin: 0; }
.th-script .narr { font-family: var(--f-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--paper-3); margin: 0; }
.th-ctl { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: auto 0 4px; padding-top: 8px; }
.th-skip { background: none; border: 0; color: var(--on-ink-2); font: 500 12px/1 var(--f-mono); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 12px 0 0; cursor: pointer; }
.theatre .th-next { min-width: 150px; }
.ev-ch.hold { display: none; }
.ev-ch.show { animation: lineIn .4s both; }
.th-script .ev-ch.show { margin-top: auto; padding-top: 10px; }
@keyframes thPush { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
@keyframes thSway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
@keyframes thTalk { from { transform: translateY(-4px) scale(1.04) rotate(-.8deg); } to { transform: translateY(-7px) scale(1.05) rotate(.8deg); } }
@keyframes thHop { 0% { transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@media (min-width: 720px) { .th-stage { height: min(50dvh, 480px); } .fig-img { max-width: 220px; } .th-cast.n3 .fig-img { max-width: 170px; } }
@media (prefers-reduced-motion: reduce) { .th-back img, .fig, .fig.talk, .fig.cheer { animation: none !important; } }

/* halftoned portrait photos (Y.ART) */
.pimg { display: inline-block; flex: none; overflow: hidden; border: 2px solid var(--ink); background: var(--paper); vertical-align: middle; }
.pimg img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pimg.dead img { filter: contrast(.85) brightness(1.05); }
.scene .pimg, .paper .pimg { border-color: var(--ink); }

/* sound settings */
.vols { display: grid; gap: 12px; }
.vol { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font: 600 13px/1.2 var(--f-ui); }
.vol input[type=range] { width: 100%; accent-color: var(--ink); }
.vol.tog button { justify-self: start; min-width: 90px; }

/* ================= v3: isometric paper maquette (city map) ================= */
.citymap.iso { background: var(--paper); }
.iso .pbg { fill: var(--paper); }
.iso .pdot { fill: var(--ink); }
.iso .phatch { stroke: var(--ink); stroke-width: .55; }
.iso .pwave { fill: none; stroke: var(--ink); stroke-width: .7; }
.iso .sea { fill: url(#mwave); stroke: var(--ink); stroke-width: .8; }
.iso .board { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.iso .board-l { fill: url(#mdotD); stroke: var(--ink); stroke-width: 1; }
.iso .board-r { fill: url(#mdotL); stroke: var(--ink); stroke-width: 1; }
.iso .plate { fill: var(--paper); stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; transition: fill .15s; }
.iso .plate.old { fill: #EEEBE3; }
.iso .plate.port { fill: #E9E6DE; }
.iso .plate-l { fill: url(#mdotD); stroke: var(--ink); stroke-width: .6; }
.iso .plate-r { fill: url(#mdotL); stroke: var(--ink); stroke-width: .6; }
.iso .dhit { cursor: pointer; }
.iso .dhit:hover .plate, .iso .dhit:active .plate { fill: #F7F5EF; }
.iso .bld { pointer-events: none; }
.iso .f-t { fill: var(--paper); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; }
.iso .f-l { fill: url(#mdotL); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; }
.iso .f-r { fill: url(#mdotD); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; }
.iso .f-l.towers, .iso .f-l.akbas { fill: url(#mdotD); }
.iso .f-r.akbas { fill: var(--ink); }
.iso .f-t.akbas { fill: var(--ink-2); }
.iso .fallen.f-l, .iso .fallen.f-r, .iso .fallen.f-t { fill: url(#mhatch); }
.iso .ruin.f-t { fill: url(#mhatch); }
.iso .ruin.f-l, .iso .ruin.f-r { fill: var(--ink); }
.iso .ship.f-l { fill: var(--ink-2); }
.iso .pier.f-t { fill: var(--paper); }
.iso .monument.f-l, .iso .monument.f-r { fill: var(--ink); }
.iso .floorline { stroke: var(--paper); stroke-width: .35; opacity: .75; }
.iso .f-r + .f-t + .floorline { stroke: var(--paper); }
.iso .win { fill: var(--ink); }
.iso .trunk { stroke: var(--ink); stroke-width: 1.1; }
.iso .crown { fill: url(#mdotL); stroke: var(--ink); stroke-width: .7; }
.iso .crane { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.iso .crane.thin { stroke-width: .5; }
.iso .dist { cursor: pointer; outline: none; }
.iso .dist .tag { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .15s; }
.iso .dname { font-family: var(--f-display); font-size: 10px; letter-spacing: .04em; fill: var(--ink); text-anchor: middle; stroke: none; }
.iso .dsub { font-family: var(--f-mono); font-weight: 500; font-size: 4.4px; letter-spacing: .06em; fill: var(--ink-2); text-anchor: middle; stroke: none; }
.iso .dist:hover .tag, .iso .dist:focus .tag, .iso .dist:active .tag { fill: var(--ink); }
.iso .dist:hover .dname, .iso .dist:focus .dname, .iso .dist:active .dname, .iso .dist:hover .dsub, .iso .dist:focus .dsub { fill: var(--paper); }
.iso .mark { animation: markBob 1.6s ease-in-out infinite; }
.iso .mark rect { fill: var(--red); stroke: var(--ink); stroke-width: 1; }
.iso .mark text { fill: #fff; font-family: var(--f-display); font-size: 9.5px; text-anchor: middle; }
.iso .cartouche rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.iso .ct1 { font-family: var(--f-display); font-size: 9px; fill: var(--ink); letter-spacing: .06em; }
.iso .ct2 { font-family: var(--f-mono); font-size: 4.6px; fill: var(--ink-2); }
.iso .compass path { fill: var(--ink); }
.iso .compass text { font-family: var(--f-display); font-size: 7px; text-anchor: middle; fill: var(--ink); }
@keyframes markBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.iso .mark { transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .iso .mark { animation: none; } }
.iso .shd { pointer-events: none; }
.iso .shadow { fill: url(#mhatch); opacity: .55; stroke: none; }
.iso .dname { font-size: 8.6px; }
.iso .dsub { font-size: 3.7px; }

/* ================= v3.1: full-bleed city hub ================= */
.view.v-city { padding: 0; overflow: hidden; position: relative; }
.city { --sheet-h: 200px; position: absolute; inset: 0; overflow: hidden; background: var(--paper); container-type: size; }
/* the season set as a giant masthead behind the board; sized to the stage so it never gets cut */
.city-type { position: absolute; left: 0; right: 0; top: 10px; display: flex; flex-direction: column; align-items: center; pointer-events: none; font-family: var(--f-display); font-size: 23cqw; line-height: .9; letter-spacing: -.01em; color: var(--ink); opacity: .065; white-space: nowrap; user-select: none; }
.city-type span:last-child { font-size: .56em; letter-spacing: .06em; }
.city-pan { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--sheet-h) - 28px); overflow: hidden; touch-action: none; cursor: grab; }
.city-pan.dragging { cursor: grabbing; }
.city-pan.dragging .dist, .city-pan.dragging .dhit { pointer-events: none; }
.city-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.city-stage svg { display: block; width: 100%; height: auto; background: transparent; }
.city .citymap.iso { background: transparent; }
.city-wx { position: absolute; inset: 0 0 var(--sheet-h) 0; pointer-events: none; }
.city.s-2 .city-wx { background-image: repeating-linear-gradient(104deg, transparent 0 18px, rgba(21,20,18,.14) 18px 19px, transparent 19px 41px); background-size: 240px 240px; animation: wxRain .55s linear infinite; }
.city.s-3 .city-wx { background-image: radial-gradient(circle, rgba(21,20,18,.22) 1.1px, transparent 1.6px), radial-gradient(circle, rgba(21,20,18,.14) 0.8px, transparent 1.3px); background-size: 46px 46px, 29px 29px; background-position: 0 0, 13px 7px; animation: wxSnow 7s linear infinite; }
@keyframes wxRain { to { background-position: -60px 240px; } }
@keyframes wxSnow { to { background-position: 12px 46px, 25px 36px; } }
.city-pills { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.pill-bad { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; background: var(--paper); border: 2px solid var(--red); color: var(--ink); font: 700 12px/1 var(--f-ui); padding: 7px 11px 7px 9px; text-transform: uppercase; letter-spacing: .05em; box-shadow: 3px 3px 0 rgba(226,59,30,.22); }
.pill-bad .ic { width: 15px; height: 15px; color: var(--red); }
.city-tip { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; background: var(--ink); color: var(--paper); padding: 12px 12px 12px 14px; display: flex; gap: 12px; align-items: center; border-left: 6px solid var(--red); }
.city-tip p { margin: 0; font: 400 14px/1.45 var(--f-ui); }
.city-tip .btn { flex: none; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.city-tip ~ .city-zoom { visibility: hidden; }
/* phones: top-right, clear of the district labels (pinch zoom is the main gesture there) */
.city-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; z-index: 2; background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.city-zoom button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--ink); }
.city-zoom button + button { border-top: 1px solid var(--ink-3); }
.city-zoom button .ic { width: 18px; height: 18px; }
.city-zoom button:active { background: var(--ink); color: var(--paper); }
.city-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h); z-index: 2; background: linear-gradient(to top, var(--paper) 80%, rgba(236,234,227,0)); padding-top: 16px; }
.city-sheet header { display: flex; align-items: baseline; gap: 10px; padding: 0 16px 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; }
.city-sheet header span { font-family: var(--f-display); font-size: 17px; letter-spacing: .06em; }
.city-sheet header i { font-style: normal; color: var(--ink-2); flex: 1; }
.city-sheet header b { font-weight: 500; border: 1.5px solid var(--ink); padding: 1px 6px; }
.clips { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px 16px 14px; scrollbar-width: none; }
.clips::-webkit-scrollbar { display: none; }
.kupur { flex: 0 0 min(80vw, 300px); scroll-snap-align: start; display: flex; background: #F6F4EE; border: 2px solid var(--ink); transform: rotate(var(--r)); min-height: 108px; }
.kupur.urgent { border-color: var(--red); box-shadow: inset 0 3px 0 var(--red); }
.clip-img { flex: 0 0 84px; border-right: 2px solid var(--ink); background: var(--paper-2); overflow: hidden; display: grid; place-items: center; }
.kupur.urgent .clip-img { border-right-color: var(--red); }
.clip-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.clip-img.none .ic { width: 28px; height: 28px; color: var(--ink-3); }
.clip-body { flex: 1; min-width: 0; padding: 8px 10px 8px; display: flex; flex-direction: column; }
.clip-k { font: 500 9.5px/1.2 var(--f-mono); letter-spacing: .08em; color: var(--ink-2); text-transform: uppercase; }
.kupur.urgent .clip-k { color: var(--red); }
.clip-body h4 { margin: 2px 0 2px; padding-top: 2px; font: 400 17px/1.16 var(--f-display); letter-spacing: .01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-body p { margin: 0; font: 400 12.5px/1.3 var(--f-serif); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clip-who { display: flex; gap: 3px; }
.clip-go { min-height: 38px; min-width: 66px; background: var(--ink); color: var(--paper); border: 0; font: 400 15px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px 8px; }
.kupur.urgent .clip-go { background: var(--red); }
.clip-done { font: 500 16px/1 var(--f-mono); }
.clip-done small { font-size: 9px; margin-left: 3px; letter-spacing: .08em; color: var(--ink-2); }
/* map tweaks for the full-bleed view */
.iso .dist .tag { stroke-width: 1.4; }
.iso .dname { font-size: 10.2px; }
.iso .dist.waiting .tag { stroke: var(--red); stroke-width: 1.8; }
.iso .home { cursor: pointer; }
.iso .home .pin { fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
.iso .home .pin-dot { fill: var(--paper); }
.iso .home .pin-t { font: 600 5.2px/1 var(--f-mono); fill: var(--ink); letter-spacing: .08em; paint-order: stroke; stroke: var(--paper); stroke-width: 2.4px; }
@media (min-width: 720px) { .kupur { flex-basis: 320px; } }
@media (prefers-reduced-motion: reduce) { .city-wx { animation: none !important; } }

/* drawn portraits printed like photos */
.psvg { position: relative; display: inline-block; flex: none; line-height: 0; vertical-align: middle; }
.psvg > svg { filter: grayscale(1) contrast(1.12) brightness(1.04); }
.psvg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(21,20,18,.55) .8px, transparent 1.15px); background-size: 3px 3px; mix-blend-mode: multiply; opacity: .32; }
.psvg.dead > svg { filter: grayscale(1) contrast(.9) brightness(1.1); }
/* tab change */
.view.v-enter > * { animation: viewIn .22s cubic-bezier(.2,.9,.3,1) both; }
.view.v-enter.v-city > * { animation: none; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.v-enter > * { animation: none; } }

/* ================= v4: the night desk (wide screens) =================
   The same parts as the phone, laid out as printed sheets on a dark desk:
   the press card on the left, the maquette or the open section in the middle, the agenda column on the right. */
.side, .h-desk { display: none; }
.page { position: relative; }
@media (min-width: 1100px) {
  #app:has(> .game), #app:has(> .title-screen), #app:has(> .create), #app:has(> .death) { max-width: none; background: none; box-shadow: none; }
  #app:has(> .game)::before, #app:has(> .title-screen)::before, #app:has(> .create)::before, #app:has(> .death)::before { display: none; }
  /* a printed sheet on the desk: paper colour, the fibre texture, a soft lamp shadow */
  .rail, .game > .view, .side, .t-body, .create, .obit, .death-side {
    background-color: var(--paper); background-image: linear-gradient(rgba(236,234,227,.6), rgba(236,234,227,.6)), url(../assets/paper.png);
    background-size: auto, 256px; background-blend-mode: normal, multiply; box-shadow: var(--sheet-shadow);
  }
  .game { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; grid-template-areas: "rail view side"; gap: 16px; padding: 16px; }
  .game > * { min-height: 0; }

  /* left sheet: the press card */
  .rail { grid-area: rail; display: flex; flex-direction: column; overflow: hidden; }
  .hdr { order: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; background: none; color: var(--ink); padding: 0 20px 16px; -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }
  .h-top { flex-wrap: wrap; row-gap: 14px; margin: 0 -20px; padding: 20px 20px 0; background: var(--ink); color: var(--on-ink); position: relative; }
  .h-av { width: 64px; height: 64px; }
  .mono-av { width: 58px; height: 58px; font-size: 27px; }
  .h-id { padding-right: 44px; }
  .h-id b { font-size: 25px; line-height: 1.08; white-space: normal; overflow: visible; text-overflow: clip; padding-top: 2px; }
  .h-id small { font-size: 13px; margin-top: 3px; white-space: normal; }
  .hdr .icon-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; }
  .h-money { order: 3; flex: 1 0 100%; text-align: left; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid rgba(236,234,227,.2); padding: 11px 0 2px; }
  .h-money small { font-size: 10px; }
  .h-money b { font-size: 25px; letter-spacing: -.01em; }
  .h-row { flex-wrap: wrap; row-gap: 10px; margin: 0 -20px; padding: 10px 20px 18px; border-top: 0; background: var(--ink); color: var(--on-ink); }
  .h-date { font-size: 12px; }
  .hdr .h-tok { flex: 1 0 100%; gap: 6px; }
  .hdr .h-tok em { margin-right: auto; }
  .hdr .tok { width: 17px; height: 17px; }
  .h-desk { display: block; margin-top: 16px; }
  .h-stats { display: grid; gap: 7px; }
  .hs { display: grid; grid-template-columns: 104px minmax(0, 1fr) 30px; align-items: center; column-gap: 10px; min-height: 22px; font-size: 12.5px; font-weight: 600; }
  .hs span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  .hs .ic { width: 15px; height: 15px; }
  .hs b { order: 3; font-family: var(--f-mono); font-weight: 500; text-align: right; }
  .hs .bar { order: 2; height: 7px; border-width: 1.5px; }
  .hs.hot span, .hs.hot b { color: var(--red); }
  .h-meta { margin-top: 16px; border-top: 2px solid var(--ink); padding-top: 4px; display: grid; font-size: 12.5px; }
  .h-meta .row { padding: 7px 0; font-size: 12.5px; }
  .h-meta .row span { color: var(--ink-2); }
  .h-meta b { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; }
  .h-meta b.b { color: var(--red); }
  .dock { order: 1; background: none; color: var(--ink); border-top: 4px double var(--ink); padding: 14px 20px 20px; display: flex; flex-direction: column-reverse; gap: 14px; }
  .nav { flex-direction: column; margin-top: 0; gap: 0; border-top: 1px solid var(--ink-3); }
  .nav button { flex: none; min-height: 42px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; color: var(--ink); border-bottom: 1px solid var(--ink-3); }
  .nav button .ic { width: 18px; height: 18px; }
  .nav button small { font-size: 12px; letter-spacing: .1em; }
  .nav button:hover:not(.on) { background: var(--paper-2); }
  .nav button.on { background: var(--ink); color: var(--paper); }
  .nav kbd { display: block; margin-left: auto; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); border: 1px solid currentColor; padding: 3px 5px; }
  .nav button.on kbd { color: var(--on-ink-2); }
  .nav .dot { top: 50%; right: 42px; margin-top: -4px; box-shadow: none; }
  .endbtn { min-height: 56px; }
  .endbtn span { font-size: 24px; }
  .endbtn:hover { filter: brightness(1.06); }

  /* centre sheet: the stage */
  .game > .view { grid-area: view; order: 0; }
  .view.v-city { padding: 0; }
  .view:not(.v-city) { padding: 30px 38px 60px; }
  .page { max-width: 1180px; margin: 0 auto; columns: 290px 3; column-gap: 40px; column-rule: 1px solid rgba(21,20,18,.16); }
  .page > * { break-inside: avoid; }
  .page > .seg, .page > .alert, .page > .alerts, .page > .kunye, .page > .btnrow { column-span: all; }
  .page > .seg { position: static; max-width: 560px; margin-bottom: 26px; }
  /* only long lists run on into the next column like classifieds; their rows never split */
  .page > .card.ilan, .page > .card:has(> .items), .page > .card:has(> .item), .page > .card:has(> .ladder), .page > .card:has(> .person), .page > .card:has(> .party) { break-inside: auto; }
  .card > h3 { break-after: avoid; }
  .card > h3 + * { break-before: avoid; }
  /* the life story runs under its own full-width heading, in columns of its own */
  .page > .card.logcard { column-span: all; break-inside: auto; }
  .card.logcard .log { columns: 290px 3; column-gap: 40px; }
  .job, .party, .person, .item, .office, .row, .stat, .goal, .log li, .dept, .depts, .gk, .bud, .dosya li, .gki, .life, .stats, .p-acts { break-inside: avoid; }
  .card.hl, .card.danger { margin-bottom: 22px; }
  .kunye { margin-bottom: 26px; }
  .card.ilan .jobs { display: block; }
  .card.btnrow { margin-top: 4px; }

  /* the maquette */
  .city { --sheet-h: 0px; }
  .city-sheet { display: none; }
  .city-type { top: 18px; }
  .city-zoom { top: auto; bottom: 20px; right: 20px; }
  .city-tip ~ .city-zoom { visibility: visible; }
  .city-pills { left: 20px; top: 20px; }
  .city-tip { left: 20px; right: auto; top: 20px; max-width: 480px; }
  .iso .dhit:hover .plate { fill: #F7F5EF; }

  /* right sheet: the agenda column of the day's paper */
  .side { grid-area: side; display: block; overflow-y: auto; scrollbar-width: thin; padding: 0 20px 36px; }
  .side-mast { margin: 0 -20px 18px; padding: 18px 20px 12px; background: var(--ink); color: var(--on-ink); }
  .side-mast .kicker { display: block; color: var(--on-ink-2); font-size: 10px; letter-spacing: .18em; }
  .side-mast b { display: block; font: 400 30px/1.1 var(--f-display); letter-spacing: .01em; margin-top: 4px; }
  .side-mast small { display: block; font: 500 11px/1.3 var(--f-mono); color: var(--on-ink-2); margin-top: 4px; letter-spacing: .04em; }
  .side-sec { margin-bottom: 24px; }
  .side-sec > header { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; }
  .side-sec > header span { font-family: var(--f-display); font-size: 19px; letter-spacing: .06em; }
  .side-sec > header i { font-style: normal; color: var(--ink-2); flex: 1; }
  .side-sec > header b { font-weight: 500; border: 1.5px solid var(--ink); padding: 1px 6px; }
  .side-clips { display: grid; gap: 14px; padding: 2px 2px 0; }
  .side-clips .kupur { flex-basis: auto; }
  .side-goals { list-style: none; margin: 0; padding: 0; display: grid; }
  .side-goals li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; border-bottom: 1px dotted var(--ink-3); padding: 7px 0; }
  .side-goals em { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; white-space: nowrap; color: var(--ink-2); }
  .side-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font: 400 14px/1.42 var(--f-serif); }
  .side-log li { border-left: 3px solid var(--ink-3); padding-left: 10px; }
  .side-log li.good { border-left-color: var(--ink); }
  .side-log li.bad { border-left-color: var(--red); }
  .side-log small { display: block; font: 500 10.5px/1.3 var(--f-mono); color: var(--ink-2); letter-spacing: .04em; }

  /* hover affordances a mouse deserves */
  .btn:hover:not(:disabled):not(.pri):not(.danger) { background: var(--paper-2); }
  .btn.pri:hover:not(:disabled) { background: #2A2825; }
  .choice:hover:not(:disabled):not(.picked) { background: var(--paper-2); }
  .scene .choice:hover:not(:disabled):not(.picked) { background: #24221E; }
  .act:hover:not(:disabled) { background: var(--paper-2); }
  .p-row:hover, .heir:hover, .scene-btn:hover { filter: brightness(.97); }
  .clip-go:hover { filter: brightness(1.25); }

  /* modals: a district opens as a drawer beside the map; everything else is a centred sheet */
  #modal-root .modal { background: rgba(8,7,6,.66); }
  .sheet { max-width: 580px; }
  #modal-root .modal.loc { justify-content: flex-end; align-items: stretch !important; background: rgba(8,7,6,.42); }
  .modal.loc .sheet { max-width: 460px; max-height: none; height: 100%; margin: 0; transform: translateX(48px); }
  .modal.loc.in .sheet { transform: none; }

  /* scenes: stage and script side by side */
  .modal.scene.theatre { align-items: center !important; background: var(--desk) !important; }
  .th-wrap { max-width: 1280px; height: min(calc(100% - 32px), 880px); flex-direction: row; box-shadow: var(--sheet-shadow); outline: 1px solid rgba(236,234,227,.12); }
  .th-stage { flex: 1 1 auto; height: auto; border-bottom: 0; border-right: 4px double var(--paper); }
  .th-script { flex: 0 0 460px; padding: 28px 30px 30px; }
  .fig-img { max-width: 300px; }
  .th-cast.n3 .fig-img { max-width: 240px; }
  .th-cap { left: 18px; top: 18px; }
  .th-cast { top: 17%; bottom: 7%; }
  .th-cap h2 { font-size: 36px; }

  /* the front page as a broadsheet */
  .paper-stage { max-width: 940px; padding: 18px 16px; }
  .paper-spin { box-shadow: var(--sheet-shadow); }
  .pp-lead h2 { font-size: 58px; }
  /* lead story on the left, the other stories stacked in the right-hand column */
  .paper { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 26px; }
  .paper > .pp-mast, .paper > .pp-bottom, .paper > .pp-ticker { grid-column: 1 / -1; }
  .paper > .pp-lead { grid-column: 1; border-bottom: 0; padding-bottom: 16px; }
  .paper > .pp-cols { grid-column: 2; grid-template-columns: 1fr; align-self: stretch; border-bottom: 0; border-left: var(--hair); padding: 8px 0 12px 22px; margin-top: 12px; }
  .pp-cols .pp-col, .pp-cols .pp-col:nth-child(2n), .pp-cols .pp-col:nth-child(3) { grid-column: auto; border: 0; border-bottom: var(--hair); padding: 12px 0 14px; }
  .pp-cols .pp-col:last-child { border-bottom: 0; }
  .pp-col h3 { font-size: 21px; }
  .pp-col p { font-size: 14.5px; }
  .pp-lead .dek { font-size: 20px; }
  .paper > .pp-bottom { border-top: var(--rule); }

  /* the back room gets more table */
  .modal.ko .ko-wrap { max-width: 760px; height: calc(100% - 32px); box-shadow: var(--sheet-shadow); }
  body #modal-root .modal.ko { align-items: center !important; background: var(--desk) !important; }
  .mg .mg-card { max-width: 540px; box-shadow: inset 0 3px 0 var(--ink), inset 0 6px 0 var(--paper), inset 0 8px 0 var(--ink), var(--sheet-shadow); }

  /* title: a front page spread on the desk */
  .title-screen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(480px, 1fr); gap: 16px; padding: 16px; height: 100dvh; overflow: hidden; }
  .t-hero { height: auto; min-height: 0; border: 0; box-shadow: var(--sheet-shadow); background: var(--paper-2); }
  .t-over { top: 20px; left: 20px; }
  .t-body { overflow-y: auto; padding: 56px 56px 36px; justify-content: center; }
  .t-logo { font-size: clamp(116px, 10.5vw, 188px); }
  .t-dek { font-size: 22px; max-width: 460px; margin: 18px 0 34px; }
  .title-btns { margin-top: 0; max-width: 520px; }
  .foot { text-align: left; margin-top: 22px; }

  /* create: the registry form as one document */
  .create { max-width: 1080px; height: calc(100dvh - 32px); margin: 16px auto; padding: 36px 48px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-content: start; }
  .form-h, .create-go, .form-sec.s-trait { grid-column: 1 / -1; }
  .form-id { grid-column: 1; }
  .form-sec.s-g { grid-column: 1; }
  .form-sec.s-keep { grid-column: 2; grid-row: 2 / span 2; }
  .s-trait .opts { grid-template-columns: repeat(3, 1fr); }
  .create-go { margin: 0 -48px; padding: 14px 48px 18px; justify-content: flex-end; }
  .create-go .btn { min-width: 160px; }
  .create-go .btn.big { flex: 0 0 360px; }

  /* the obituary and what comes after, side by side */
  .death { max-width: 1120px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .obit { grid-row: 1 / span 2; margin: 0; border: 0; outline: 6px double var(--ink); outline-offset: -18px; padding: 44px 44px 40px; }
  .death-side { padding: 24px 26px 26px; }
  .death-side .card { margin-bottom: 8px; border-top: 0; padding-top: 0; }
}
@media (min-width: 1500px) {
  .game { grid-template-columns: 316px minmax(0, 1fr) 390px; }
}
@media (min-width: 1100px) and (max-height: 800px) {
  .h-top { padding-top: 14px; row-gap: 10px; }
  .h-av { width: 56px; height: 56px; }
  .mono-av { width: 50px; height: 50px; font-size: 24px; }
  .h-money { padding-top: 8px; }
  .h-money b { font-size: 22px; }
  .h-row { padding-top: 8px; padding-bottom: 12px; row-gap: 8px; }
  .h-desk { margin-top: 10px; }
  .h-stats { gap: 3px; }
  .hs { min-height: 20px; }
  .h-meta { display: none; }
  .nav button { min-height: 36px; }
  .endbtn { min-height: 50px; }
  .dock { padding-top: 10px; padding-bottom: 14px; gap: 10px; }
}
/* tablets: a wider page on the desk */
@media (min-width: 760px) and (max-width: 1099px) {
  #app { max-width: 720px; }
  .view { padding: 22px 24px 32px; }
  .hdr { padding-left: 22px; padding-right: 22px; }
  .dock { padding-left: 22px; padding-right: 22px; }
  .card.ilan .jobs { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .paper-stage { max-width: 660px; }
}