/* Colour tokens and the skin live in theme.css (spec D20); this file is layout. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#game-scaler { height: 100%; display: flex; justify-content: center; }
#game-root { position: relative; width: 100%; max-width: calc(100vh * 9 / 16); height: 100%; overflow: hidden; }
.rc-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background-size: cover; background-position: center; }
/* Top nav (owner order 2026-10-10). Clears the notch; tabs row, then the status strip. */
.rc-nav { position: relative; z-index: 3; padding-top: calc(env(safe-area-inset-top, 0px) + 4px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); background: rgba(11,8,6,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border); }
.rc-tabs { display: grid; grid-template-columns: repeat(7, 1fr); }
.rc-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 44px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 18px; padding: 4px 0; }
.rc-tabs button small { font-size: 13px; letter-spacing: 0; }
.rc-tabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
.rc-tabs button:disabled { opacity: 0.35; }
.rc-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; padding: 2px 12px 6px; font-size: 16px; border-bottom: 1px solid var(--glass-border); }
.rc-debt { color: #E07A6A; }
.rc-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.rc-scroll { overflow-y: auto; }
.rc-panel, .rc-sheet, .rc-event, .rc-wheel { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px; }
.rc-panel p, .rc-sheet p, .rc-event p, .rc-wheel p { margin: 6px 0; color: var(--text-dim); }
.rc-title { font-family: Georgia, serif; color: var(--gold); text-align: center; margin-bottom: 8px; }
.rc-tag { text-align: center; color: var(--text-dim); margin-bottom: 24px; }
.rc-btn { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(91,26,46,0.6); color: var(--text); font-size: 16px; }
.rc-btn.rc-primary { background: linear-gradient(135deg, var(--gold), #B8860B); color: #1A1410; font-weight: 700; }
.rc-btn:disabled { opacity: 0.45; }
.rc-input { width: 100%; padding: 10px; margin: 8px 0; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.4); color: var(--text); font-size: 16px; }
.rc-origins { display: flex; justify-content: space-between; margin: 8px 0; text-transform: capitalize; }
.rc-check { display: block; margin: 8px 0; }
.rc-note { font-size: 16px; }
.rc-district { margin-bottom: 10px; }
.rc-district h3 { color: var(--gold); font-size: 16px; margin-bottom: 4px; }
.rc-loc { display: inline-block; margin: 3px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.45); color: var(--text); }
.rc-chip { border-radius: 999px; border: 2px solid var(--gold); padding: 6px 10px; margin: 4px; background: rgba(0,0,0,0.4); color: var(--text); }
.rc-slices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; }
.rc-slices button { padding: 8px 4px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.4); color: var(--text-dim); text-transform: capitalize; }
.rc-slices button.on { color: var(--gold); border-color: var(--gold); }
.rc-overlay { width: 120px; height: 200px; margin: 0 auto auto; border-radius: 60px 60px 12px 12px; background: rgba(212,175,55,0.25); display: grid; place-items: center; font-size: 48px; }
#rc-toast, #rc-modal { position: absolute; left: 16px; right: 16px; bottom: 80px; padding: 12px; border-radius: 10px; background: rgba(11,8,6,0.92); border: 1px solid var(--gold); z-index: 5; }
#rc-modal button { margin-left: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gold); background: none; color: var(--gold); }

/* Deep menus (2026-10-10) */
.rc-body { justify-content: flex-start; gap: 10px; }
.rc-sec h3 { color: var(--gold); font-size: 16px; margin-bottom: 6px; font-family: Georgia, serif; }
.rc-sec p { font-size: 16px; }
.rc-card { margin: 8px 0; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); }
.rc-card p { margin: 4px 0; }
.rc-act { margin: 6px 0; }
.rc-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 16px; }
.rc-row > span:first-child { flex: 1; min-width: 0; }
.rc-row .rc-btn { width: auto; margin: 0; padding: 6px 10px; }
.rc-total { border-top: 1px solid var(--glass-border); padding-top: 4px; }
.rc-bar { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; vertical-align: middle; }
.rc-bar i { display: block; height: 100%; background: var(--gold); }
.rc-bar.neg i { background: #C0533F; }
b.neg { color: #E07A6A; }
.rc-cost { color: var(--gold-light); font-size: 16px; }
.rc-why { color: var(--text-dim); }
.rc-inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 4px 0; font-size: 16px; color: var(--text-dim); }
.rc-inline select, .rc-num { padding: 6px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.5); color: var(--text); font-size: 16px; }
.rc-num { width: 84px; }
.rc-reqs { list-style: none; margin: 4px 0; font-size: 16px; color: #E07A6A; }
.rc-reqs li.met { color: #8FCB8F; }
.rc-person { display: flex; width: 100%; justify-content: space-between; gap: 8px; text-align: left; margin: 6px 0; padding: 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.35); color: var(--text); }
.rc-person small { color: var(--text-dim); }
.rc-op { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; color: var(--gold); }
.rc-warn { color: #E9B44C; }
.rc-reply { font-style: italic; color: var(--gold-light); }
.rc-talk p { color: var(--text); }
.rc-radio { display: block; margin: 6px 0; font-size: 16px; }
.rc-skillgrp { margin: 6px 0; font-size: 16px; }
.rc-skillgrp small { display: block; color: var(--gold); }
.rc-skill { display: inline-block; margin: 2px 8px 2px 0; }

.rc-tree summary { cursor: pointer; list-style: none; padding: 4px 0; }
.rc-tree summary::-webkit-details-marker { display: none; }
.rc-tree summary::before { content: '▸ '; color: var(--gold); }
.rc-tree[open] summary::before { content: '▾ '; }

/* Estate slot medallions (addendum §1.4): round, thumb-sized, over the home background */
.rc-medals { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.rc-medal { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(11,8,6,0.75); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; line-height: 1.1; padding: 4px; }
.rc-medal small { color: var(--gold-light); font-size: 16px; }
.rc-medal-empty { border-style: dashed; font-size: 20px; color: var(--gold); }
.rc-medal-build { border-color: #E9B44C; }

/* City map + Work layer (addendum §2.1). Placeholder map until art batch B2. */
.rc-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.rc-seg button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.4); color: var(--text-dim); }
.rc-seg button.on { color: var(--gold); border-color: var(--gold); }
.rc-map { position: relative; width: 100%; aspect-ratio: 9 / 14; border-radius: 14px; background: radial-gradient(ellipse at 45% 45%, #8a6a46, #2e2216 75%); border: 1px solid var(--glass-border); overflow: hidden; }
.rc-zone { position: absolute; transform: translate(-50%, 0); max-width: 44%; text-align: center; font-size: 16px; }
.rc-zone > b { display: block; color: var(--gold-light); text-shadow: 0 1px 2px #000; }
.rc-zone.here > b::after { content: ' ●'; color: #8FCB8F; }
.rc-zone-locs .rc-loc { font-size: 16px; padding: 4px 6px; margin: 2px; }
.rc-pin { position: relative; width: 44px; height: 44px; margin: 2px; border-radius: 50%; border: 3px solid #b0773c; background: rgba(11,8,6,0.85); font-size: 18px; color: var(--text); }
.rc-pin.tier2 { border-color: #c9ced6; } .rc-pin.tier3 { border-color: var(--gold); }
.rc-pin small { position: absolute; right: -4px; bottom: -4px; font-size: 16px; background: var(--primary); border-radius: 8px; padding: 0 4px; }
.rc-pin.criminal::after { content: ''; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #d23b2e; }
.rc-pin.locked { opacity: 0.5; }

/* Province map (SVG from Natural Earth, addendum H-12) */
.rc-province-map { width: 100%; height: auto; border-radius: 10px; display: block; }
.rc-sea { fill: #1d3a4a; } .rc-land { fill: #8a7356; stroke: #3b2e1f; stroke-width: 0.4; }
.rc-prov { fill: #a58a5f; stroke: #3b2e1f; stroke-width: 0.4; } .rc-prov-on { fill: var(--gold); stroke: #fff6d0; stroke-width: 0.8; }
.rc-seat { fill: #fff; } .rc-seat-rome { fill: #7E2A44; stroke: #fff; stroke-width: 0.8; }

.rc-ico { display: inline-block; vertical-align: middle; flex: none; }
.rc-status .rc-ico { margin-right: 2px; }
.rc-pin .rc-ico, .rc-medal .rc-ico { display: block; margin: 0 auto; }
/* ==========================================================================================
   Life As a Roman Citizen — THE THEME (spec D20, owner 2026-10-10): ROMAN glassmorphism.
   Frosted panels over the full-bleed 9:16 art, framed like bronze plaques with Greek-key trims;
   Trajan-style capitals (Cinzel) over a serif body (EB Garamond); Tyrian purple, gold, marble cream;
   a faint mosaic behind the glass; wax tablets for the ledger, a scroll for talks and events.
   All colour tokens live HERE (theme.test.mjs checks WCAG AA on them, incl. glass over white).
   ========================================================================================== */
:root {
  /* palette */
  --tyrian: #66023C; --tyrian-600: #7A1F4E; --tyrian-300: #B0507F;
  --gold: #D4AF37; --gold-light: #F1D78A; --bronze: #A8743F; --bronze-dark: #6B4524;
  --marble: #F4EEE3; --parchment: #EFE3C8; --ink: #2A1A10; --wax: #3B3524;
  --text: #F4EEE3; --text-dim: #E6DCCC;
  --bg: #120B10; --bg-light: #1C0E18;
  /* glass */
  --glass-fill: rgba(22, 11, 18, 0.76); --glass-fill-strong: rgba(16, 8, 13, 0.84);
  --glass-solid: rgba(28, 14, 24, 0.9); --glass-border: rgba(244, 238, 227, 0.22);
  --glass-blur: blur(14px) saturate(140%);
  --frame: 0 0 0 1px rgba(168, 116, 63, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.38);
  --radius: 14px;
  /* legacy names used by layout rules in styles.css */
  --primary: var(--tyrian-600); --primary-light: var(--tyrian-300); --purple: var(--tyrian); --glass-bg: var(--glass-fill);
  /* ornaments (inline SVG, no external images): Greek key, laurel, mosaic */
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 7.5h6V1.5h9v4.5h-4.5V3.5H9v4h9V.5H24' fill='none' stroke='%23D4AF37' stroke-width='1'/%3E%3C/svg%3E");
  --laurel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cg fill='%23D4AF37'%3E%3Cpath d='M2 8h18' stroke='%23D4AF37' stroke-width='1'/%3E%3Cellipse cx='7' cy='5.5' rx='3' ry='1.3' transform='rotate(-25 7 5.5)'/%3E%3Cellipse cx='7' cy='10.5' rx='3' ry='1.3' transform='rotate(25 7 10.5)'/%3E%3Cellipse cx='14' cy='5.5' rx='3' ry='1.3' transform='rotate(-25 14 5.5)'/%3E%3Cellipse cx='14' cy='10.5' rx='3' ry='1.3' transform='rotate(25 14 10.5)'/%3E%3Ctext x='48' y='12.5' text-anchor='middle' font-family='Cinzel,Trajan Pro,Georgia,serif' font-size='12' font-weight='700' letter-spacing='2'%3ESPQR%3C/text%3E%3Cpath d='M76 8h18' stroke='%23D4AF37' stroke-width='1'/%3E%3Cellipse cx='89' cy='5.5' rx='3' ry='1.3' transform='rotate(25 89 5.5)'/%3E%3Cellipse cx='89' cy='10.5' rx='3' ry='1.3' transform='rotate(-25 89 10.5)'/%3E%3Cellipse cx='82' cy='5.5' rx='3' ry='1.3' transform='rotate(25 82 5.5)'/%3E%3Cellipse cx='82' cy='10.5' rx='3' ry='1.3' transform='rotate(-25 82 10.5)'/%3E%3C/g%3E%3C/svg%3E");  /* owner #29: SPQR between laurel sprigs */
  --mosaic: repeating-conic-gradient(from 45deg, rgba(212, 175, 55, 0.035) 0 25%, rgba(102, 2, 60, 0.05) 0 50%) 0 0 / 18px 18px;
}

html, body { background: var(--bg); color: var(--text); font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; font-size: 16px; }
#game-root { background: var(--mosaic), radial-gradient(ellipse at 50% 20%, #2a1424, var(--bg) 70%); }
button, input, select, textarea { font: inherit; }
h1, h2, h3, .rc-title, summary b, .rc-tabs small { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; letter-spacing: 0.06em; }

/* ---- the screen enters (a short fade-and-rise; off under reduced motion) ---- */
@keyframes rc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rc-float { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
.rc-body { animation: rc-in 0.18s ease-out; }

/* ---- frosted glass, Roman-framed ---- */
.rc-panel, .rc-sheet, .rc-event, .rc-wheel, .rc-card, .rc-sheet-pop, #rc-toast, #rc-modal, .rc-nav {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--frame);
}
.rc-nav { background: var(--glass-fill-strong); border-radius: 0; border-width: 0 0 1px; position: relative; }
.rc-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 8px; background: var(--meander) repeat-x; opacity: 0.8; pointer-events: none; }
.rc-tabs button.on { color: var(--gold-light); border-bottom-color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.35); }
.rc-card { background: rgba(30, 16, 25, 0.6); box-shadow: inset 0 0 0 1px rgba(168, 116, 63, 0.35); }

/* bronze-plaque headers with a Greek-key trim beneath */
.rc-sec h3, .rc-sheet-pop h3 {
  margin: -14px -14px 12px; padding: 8px 14px 9px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(180deg, #8a6036 0%, var(--bronze) 45%, var(--bronze-dark) 100%);
  color: var(--marble); font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-size: 16px; text-transform: uppercase; letter-spacing: 0.14em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  position: relative;
}
.rc-sec h3::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 8px; background: var(--meander) repeat-x; opacity: 0.9; }
.rc-title { color: var(--gold); font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-size: 30px; text-transform: uppercase; }
.rc-title::after { content: ''; display: block; height: 16px; margin: 8px auto 0; width: 96px; background: var(--laurel) center / contain no-repeat; }
/* ---- How to Play + Encyclopedia (owner 2026-10-10): glass panels, pills, standard 16px text ---- */
.rc-title-help { display: flex; gap: 8px; margin-top: 8px; }
.rc-title-help .rc-btn { flex: 1; min-height: 44px; background: rgba(22, 11, 18, 0.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: rgba(212, 175, 55, 0.6); }
/* The HUD row (ui/hud.js): Back · date · How to Play · Volume. Head of State / Void Protocol layout, Roman glass, 44px targets. */
.rc-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px 2px; }
.rc-hud #rc-turn { flex: 1; text-align: center; font-family: 'Cinzel', Georgia, serif; font-size: 16px; color: var(--gold-light); letter-spacing: 0.06em; }
.rc-hud-right { display: inline-flex; gap: 8px; }
.rc-hud-btn { min-width: 44px; height: 44px; padding: 0; border-radius: 22px; border: 1px solid rgba(212, 175, 55, 0.7); background: rgba(102, 2, 60, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: 'Cinzel', Georgia, serif; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rc-hud-btn:active { transform: scale(0.94); }
.rc-hud-back { padding: 0 14px 0 8px; }
.rc-help-btn { font-size: 20px; }
[data-screen="title"] .rc-hud, [data-screen="setup"] .rc-hud { padding: 0 0 6px; }
.rc-guide { display: flex; flex-direction: column; gap: 12px; }
.rc-guide-top { padding: 14px; }
.rc-guide-top h2 { margin: 0 0 4px; }
.rc-guide-top p { margin: 0 0 8px; font-size: 16px; }
.rc-guide-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-guide-btns .rc-btn { flex: 1 1 140px; min-height: 44px; }
.rc-guide-end { padding-bottom: 12px; }
.rc-howto-head { float: right; margin: 0 0 4px 8px; }
.rc-steps { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.45; }
.rc-steps li { margin: 0 0 6px; }
.rc-codex-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-codex-topic { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.45); background: rgba(18, 9, 15, 0.5); color: var(--text); font-family: inherit; font-size: 16px; text-align: left; }
.rc-codex-topic span:first-of-type { flex: 1; }
.rc-codex-topic .rc-pills { flex: none; }
.rc-codex-entry { margin: 8px 0 0; padding: 10px 12px; }
.rc-codex-entry summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 16px; min-height: 32px; }
.rc-codex-entry summary::-webkit-details-marker { display: none; }
.rc-codex-entry summary::after { content: '▸'; margin-left: auto; color: var(--gold); }
.rc-codex-entry[open] summary::after { content: '▾'; }
.rc-codex-entry p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.rc-guide [hidden] { display: none !important; }
/* The videos (ui/video.js): the tutorial player and the menu attract, full screen over the game. */
.rc-video-overlay { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; background: rgba(10, 5, 8, 0.92); }
.rc-video { width: 100%; height: 100%; object-fit: contain; }
.rc-attract { pointer-events: none; background: rgba(10, 5, 8, 0.6); }
.rc-video-skip { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; padding: 0 16px; }
.rc-btn.rc-title-video { width: 100%; min-height: 44px; margin-top: 8px; background: rgba(22, 11, 18, 0.62); border-color: rgba(212, 175, 55, 0.6); }
/* Token prices: the app's green wallet + the number (ui/wallet.js). */
.rc-tok { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; white-space: nowrap; }
.rc-tok svg { flex: none; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.rc-btn .rc-tok b { color: inherit; }
.rc-btn.rc-primary .rc-tok svg { filter: none; }
/* The market Shop (ui/shop.js): the item picture stands in a portrait frame over the screen's own art. */
.rc-shop-item { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 0; padding: 10px; }
.rc-shop-art { width: 96px; height: 120px; }
.rc-shop-art img { object-fit: contain !important; padding: 6px; }
.rc-shop-ico { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.rc-shop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.rc-shop-text p { margin: 0; }
.rc-shop-text .rc-btn { min-height: 44px; }
.rc-codex-count { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.6); background: rgba(22, 11, 18, 0.76); color: var(--gold-light); font-size: 16px; }
.rc-codex-count:empty { display: none; }
.rc-codex-results { display: flex; flex-direction: column; gap: 8px; }
.rc-codex-results .rc-codex-entry { margin: 0; }
/* Title screen = the game poster (owner 2026-10-10, Head of State's layout): the poster card fills the space,
   then ONE SPQR — the laurel emblem (the separate "S · P · Q · R" line was a duplicate and is gone) — and
   New dynasty. No tagline (owner 2026-10-10: "From chains to the purple." removed everywhere it showed). */
.rc-screen[data-screen="title"] .rc-body { justify-content: center; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.rc-poster-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.rc-poster { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.6); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
h2 { color: var(--gold-light); font-size: 20px; }

/* buttons: Tyrian plaques with a gold hairline; primary = burnished gold */
.rc-btn { font-family: inherit; font-size: 16px; background: linear-gradient(180deg, var(--tyrian-600), var(--tyrian)); border: 1px solid rgba(212, 175, 55, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); color: var(--text); }
.rc-btn.rc-primary { background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, #A8862A); color: var(--ink); border-color: #FFF0B8; }
.rc-btn:active { transform: translateY(1px); }
.rc-cost { color: var(--gold-light); }
.rc-medal, .rc-pin { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.06); }

/* the ledger: wax tablets in bronze frames */
[data-screen="ledger"] .rc-panel { background: linear-gradient(180deg, rgba(59, 53, 36, 0.86), rgba(43, 38, 26, 0.9)); border: 3px solid var(--bronze-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.4); }
[data-screen="ledger"] .rc-row b { font-family: 'Cinzel', Georgia, serif; }

/* talks and events: an unrolled scroll — ink on parchment */
[data-screen="talk"] .rc-event, [data-screen="event"] .rc-event {
  background: linear-gradient(180deg, rgba(228, 211, 174, 0.9), rgba(239, 227, 200, 0.86) 8%, rgba(239, 227, 200, 0.86) 92%, rgba(228, 211, 174, 0.9)); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 0; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); position: relative;
}
[data-screen="talk"] .rc-event::before, [data-screen="talk"] .rc-event::after, [data-screen="event"] .rc-event::before, [data-screen="event"] .rc-event::after {
  content: ''; position: absolute; left: -6px; right: -6px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #A07A47, #6B4524);
}
[data-screen="talk"] .rc-event::before, [data-screen="event"] .rc-event::before { top: -8px; }
[data-screen="talk"] .rc-event::after, [data-screen="event"] .rc-event::after { bottom: -8px; }
[data-screen="talk"] .rc-event h2, [data-screen="event"] .rc-event h2 { color: var(--tyrian); }
[data-screen="talk"] .rc-event p, [data-screen="talk"] .rc-event .rc-note, [data-screen="event"] .rc-event p { color: var(--ink); }
[data-screen="talk"] .rc-reply { color: var(--tyrian); }
[data-screen="talk"] .rc-btn:disabled, [data-screen="event"] .rc-btn:disabled { opacity: 1; background: #DCCDAA; color: #5A4632; border-color: #B9A27A; }
[data-screen="talk"] .rc-btn:disabled .rc-cost, [data-screen="talk"] .rc-btn:disabled .rc-why, [data-screen="event"] .rc-btn:disabled .rc-cost { color: #5A4632; }

/* sheets, floaters, info */
.rc-sheet-pop { position: absolute; left: 12px; right: 12px; bottom: 16px; padding: 14px; z-index: 6; }
.rc-floats { position: absolute; top: 120px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; z-index: 7; }
.rc-float { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 16px; padding: 2px 8px; border-radius: 10px; background: rgba(18, 9, 15, 0.8); animation: rc-float 1.8s ease-out forwards; }
.rc-float.up { color: #A8E6A1; } .rc-float.down { color: #F2A99E; }
.rc-person-row { display: flex; gap: 6px; align-items: stretch; }
.rc-person-row .rc-person { flex: 1; }
.rc-info-btn { width: 40px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(0, 0, 0, 0.35); color: var(--gold-light); font-size: 18px; }
.rc-fold summary { cursor: pointer; list-style: none; padding: 4px 0; }
.rc-fold summary::-webkit-details-marker { display: none; }
.rc-fold summary::before { content: '▸ '; color: var(--gold); }
.rc-fold[open] summary::before { content: '▾ '; }

/* ---- fallbacks: no backdrop-filter, or the viewer asked for less transparency ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rc-panel, .rc-sheet, .rc-event, .rc-wheel, .rc-card, .rc-sheet-pop, #rc-toast, #rc-modal, .rc-nav { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .rc-panel, .rc-sheet, .rc-event, .rc-wheel, .rc-card, .rc-sheet-pop, #rc-toast, #rc-modal, .rc-nav { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-body, .rc-float { animation: none; }
  .rc-float { opacity: 1; }
}

/* The map of Rome (ui/citymap.js) with hotspots from the location data */
.rc-mapwrap { position: relative; width: 100%; aspect-ratio: 100 / 150; border-radius: 12px; overflow: hidden; box-shadow: var(--frame); }
.rc-rome { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-hotspot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); background: rgba(18, 9, 15, 0.35); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.rc-hotspot.home { border-color: #8FCB8F; }
.rc-hotspot.locked { opacity: 0.85; border-style: dashed; }
.rc-mapwrap .rc-pin { position: absolute; transform: translate(-50%, -50%); }
/* Highlight on tap: gold glow + border, mirrored on the map and in the list */
.rc-selected { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold), 0 0 14px 3px rgba(212, 175, 55, 0.75) !important; }
.rc-tapped { outline: 2px solid var(--gold); outline-offset: 2px; }
.rc-district h4 { font-family: 'Cinzel', Georgia, serif; color: var(--gold-light); font-size: 16px; margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.rc-loc-row { display: flex; gap: 6px; margin: 4px 0; }
.rc-loc-name { flex: 1; text-align: left; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(18, 9, 15, 0.55); color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-go { min-width: 52px; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.6); background: linear-gradient(180deg, var(--tyrian-600), var(--tyrian)); color: var(--text); }
/* Portrait frames: gold-ringed chips and a waist-up event frame; ring metal by status */
.rc-portrait { display: inline-block; flex: none; overflow: hidden; vertical-align: middle; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.rc-portrait.chip { border-radius: 50%; border: 2px solid var(--gold); aspect-ratio: 1 / 1; flex: none; }
.rc-portrait.waist { border-radius: 12px 12px 4px 4px; border: 3px solid var(--gold); }
.rc-portrait img, .rc-portrait svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-portrait.ring-bronze { border-color: #A8743F; } .rc-portrait.ring-silver { border-color: #C9CED6; } .rc-portrait.ring-gold { border-color: var(--gold); } .rc-portrait.ring-purple { border-color: #8E3B8E; box-shadow: 0 0 0 2px var(--gold); }
.rc-person { align-items: center; gap: 10px; } .rc-person-text { flex: 1; min-width: 0; }
.rc-person-head { display: flex; justify-content: center; margin-bottom: 6px; }
.rc-talk-portrait { display: flex; justify-content: center; margin-bottom: 14px; }

/* Flex children of the scrolling body never shrink (the map kept collapsing to 0 height). */
.rc-body > * { flex-shrink: 0; }

/* Expressions crossfade over the hero (faces.js); still under reduced motion. */
.rc-portrait { position: relative; }
.rc-mood-img { position: absolute; inset: 0; z-index: 2; animation: rc-fade 0.45s ease-out; }
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
.rc-status .rc-portrait.chip { margin-right: 2px; }
.rc-event-face { display: flex; justify-content: center; margin: 4px 0 10px; }
.rc-villa-card { background-blend-mode: normal; }
.rc-villa-card > * { position: relative; }
@media (prefers-reduced-motion: reduce) { .rc-mood-img { animation: none; } }

/* Ready-made Romans on the setup screen (owner 2026-10-10). */
.rc-preset { display: flex; gap: 10px; align-items: flex-start; padding: 10px; margin: 8px 0; }
.rc-preset-face { flex: none; }
.rc-preset-text { flex: 1; min-width: 0; }
.rc-preset-text h3 { margin: 0 0 4px; font-size: 16px; }
.rc-preset-text h3 small { font-weight: 400; opacity: .8; }
.rc-preset-text p { margin: 4px 0; font-size: 16px; }

/* Owner 2026-10-10: "make the back of the containers less translucent, you can barely see the
   background" — Head of State's approach: near-solid dark panels (HoS --card-bg-solid .9) and the art
   left clear where nothing sits on it. A screen with art opens on a SCENE WINDOW (the picture at full
   strength); panels keep a gap between them and a margin from the edges so the art shows around them.
   No scrim over the window: nothing is written on it, so the picture stays clean. */
.rc-scene { height: 168px; flex: none; margin: -12px -12px 0; position: relative; pointer-events: none; }
.rc-has-art .rc-body { gap: 12px; padding-left: 14px; padding-right: 14px; }
.rc-has-art .rc-panel, .rc-has-art .rc-sheet { box-shadow: var(--frame), 0 12px 30px rgba(0, 0, 0, 0.45); }
.rc-has-art .rc-panel, .rc-has-art .rc-sheet, .rc-has-art .rc-wheel { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) saturate(120%); }

/* The social layer (addendum social): leads, People at scale, tracks, cases. */
.rc-leads { display: flex; flex-direction: column; gap: 6px; }
.rc-lead { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(102, 2, 60, 0.35); color: var(--text); font: inherit; }
.rc-lead span { display: flex; flex-direction: column; min-width: 0; }
.rc-lead small { color: var(--text-dim); font-size: 16px; }
.rc-lead-urgent { border-color: #E07A6A; }
.rc-lead-ask { border-color: var(--gold); }
.rc-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.rc-filters .rc-input { grid-column: 1 / -1; margin: 0; }
.rc-filters select { padding: 8px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0, 0, 0, 0.45); color: var(--text); font: inherit; font-size: 16px; min-width: 0; }
.rc-filters .rc-btn { grid-column: 1 / -1; margin-top: 0; }
.rc-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 16px; }
.rc-pager .rc-btn { width: auto; margin: 0; padding: 8px 12px; }
.rc-person.rc-unmet { opacity: 0.88; border-style: dashed; }
.rc-track { color: var(--gold-light); }
.rc-track-row .rc-row span { display: inline-flex; align-items: center; gap: 4px; }
.rc-chip.rc-unmet { border-style: dashed; }
.rc-witness, .rc-suspect { display: block; }
.rc-witness .rc-portrait, .rc-suspect .rc-portrait { vertical-align: middle; margin-right: 6px; }
.rc-suspect.rc-out { opacity: 0.55; }
.rc-fact { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; background: rgba(212, 175, 55, 0.18); border: 1px solid rgba(212, 175, 55, 0.4); font-size: 16px; }
.rc-ok { color: #A8E6A1; }
.rc-accuse { background: linear-gradient(180deg, #7a2a24, #4a1512); }
.rc-clue { flex-wrap: wrap; }
.rc-sec h4 { margin: 10px 0 4px; font-family: 'Cinzel', Georgia, serif; font-size: 16px; color: var(--gold-light); letter-spacing: 0.08em; }

/* Owner 2026-10-10: "NO solid-coloured backgrounds in the game" — every screen stands on art; panels are
   glass (translucent + blur) dark enough for crisp text (theme.test.mjs checks AA and scans for solid fills).
   Choose a Roman: the art stays fixed behind the scrolling list with a slight parallax; the portraits are
   transparent cut-outs with NO fill behind them, framed by a thin glass edge and a name plate. */
.rc-screen[data-screen="setup"], .rc-screen[data-screen="title"] { background-size: cover, auto 120%, cover !important; background-position: center, center calc(0px - var(--parallax, 0px)), center !important; }
.rc-panel.rc-presets { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; padding: 0; }
.rc-presets > h2, .rc-presets > p { display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgba(16, 8, 13, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rc-card.rc-preset { background: transparent; box-shadow: none; border: 1px solid rgba(212, 175, 55, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; align-items: flex-end; }
.rc-preset .rc-portrait.waist { background: transparent; border-width: 1px; border-color: rgba(212, 175, 55, 0.7); box-shadow: none; }
.rc-preset-text { padding: 8px 10px; border-radius: 10px; background: rgba(16, 8, 13, 0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* A loaded portrait hides the placeholder silhouette (and its fill); a failed image removes itself and
   the silhouette shows again. */
.rc-portrait img ~ .rc-silhouette { display: none; }
@media (prefers-reduced-motion: reduce) { .rc-screen[data-screen="setup"], .rc-screen[data-screen="title"] { background-position: center !important; } }

/* PILLS (owner 2026-10-10): traits and stats as rounded glass chips — gold/bronze hairline, icon + plain
   label + value, colour-coded good / bad. */
.rc-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 2px 0; }
.rc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; font-size: 16px; line-height: 1.4;
  color: var(--text); background: rgba(22, 11, 18, 0.55); border: 1px solid rgba(212, 175, 55, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.rc-pill b { font-family: 'Cinzel', Georgia, serif; font-size: 16px; color: var(--gold-light); }
.rc-pill .rc-ico { flex: none; }
.rc-pill-good { border-color: rgba(120, 190, 110, 0.75); background: rgba(30, 60, 32, 0.55); }
.rc-pill-good b { color: #B9EDB2; }
.rc-pill-bad { border-color: rgba(224, 122, 106, 0.8); background: rgba(80, 22, 18, 0.55); }
.rc-pill-bad b { color: #F6B8AC; }
.rc-pill-gold { border-color: var(--gold); background: rgba(80, 60, 14, 0.5); }
[data-screen="talk"] .rc-pill, [data-screen="event"] .rc-pill { color: var(--marble); }
.rc-status .rc-pill { font-size: 14px; padding: 1px 7px 1px 2px; }

/* The visual estate (addendum visual-estate §6, approach C). */
.rc-estate-frame { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; box-shadow: var(--frame); margin-bottom: 8px; }
.rc-estate-svg { display: block; width: 100%; height: 100%; }
.rc-spot-hit { fill: transparent; cursor: pointer; }
.rc-spot-hit:focus { outline: none; stroke: var(--gold-light); stroke-width: 6; }
.rc-ghost-line { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 14 10; opacity: .85; }
.rc-locked-scrim { fill: rgba(8, 5, 2, .55); }
.rc-spot-label { font: 700 26px Georgia, serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 6px; text-anchor: middle; pointer-events: none; }
.rc-spot-label.rc-small { font-size: 20px; }
.rc-pip { font: 700 30px Georgia, serif; fill: var(--gold); paint-order: stroke; stroke: #000; stroke-width: 6px; text-anchor: middle; pointer-events: none; }
.rc-dust circle { fill: rgba(210, 180, 140, .55); transform-box: fill-box; transform-origin: center; animation: rc-dust 1.2s ease-out forwards; }
@keyframes rc-dust { from { opacity: .8; transform: translateY(0) scale(.6); } to { opacity: 0; transform: translateY(-40px) scale(1.4); } }
/* The reveal: the finished building sweeps up from the ground and its colour comes in. */
.rc-reveal { animation: rc-reveal 1.1s ease-out both; }
@keyframes rc-reveal { from { clip-path: inset(100% 0 0 0); filter: sepia(.7) saturate(.4); } 70% { filter: sepia(.3) saturate(.8); } to { clip-path: inset(0 0 0 0); filter: none; } }
.rc-estate-crop { width: 100%; height: 160px; border-radius: 10px; overflow: hidden; margin-bottom: 6px; box-shadow: var(--frame); }
.rc-estate-crop svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .rc-reveal, .rc-dust circle { animation: none; } .rc-dust { display: none; } }
.rc-child-head { display: flex; align-items: center; gap: 10px; }
.rc-portrait.rc-dead { filter: grayscale(1); opacity: .6; }

/* Owner 2026-10-10: the portrait sits at the TOP of its container — the figure leads, the name plate and
   text follow — and the area around it is glass, never a solid fill. */
.rc-figure-sec { padding-top: 10px; }
.rc-figure { display: flex; justify-content: center; margin-bottom: 8px; }
.rc-figure .rc-portrait { background: transparent; }
.rc-figure-sec > h3 { margin: 0 -14px 12px; border-radius: 0; }
.rc-card.rc-preset { flex-direction: column; align-items: stretch; }
.rc-preset-face { align-self: center; }
.rc-talk-portrait .rc-portrait, .rc-event-face .rc-portrait { background: transparent; }

/* The result strip (owner 2026-10-10): the toast and the floating numbers live in the layout under the
   nav — compact, never on top of a control, never over the nav (the old absolute .rc-floats at top:120px
   drew "−10 COINS" behind the Ledger tab). */
.rc-result-strip { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 12px 0; pointer-events: none; flex-shrink: 0; }
#rc-toast { position: static; left: auto; right: auto; bottom: auto; flex: 1 1 100%; padding: 6px 10px; border-radius: 10px; font-size: 16px; line-height: 1.3; z-index: auto; }
.rc-result-strip .rc-floats { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; top: auto; right: auto; }
.rc-result-strip { overflow: hidden; }
.rc-result-strip .rc-float { animation: rc-float-fade 1.8s ease-out forwards; }
@keyframes rc-float-fade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-result-strip .rc-float { animation: none; } }

/* Owner 2026-10-10: every portrait frame shows a small version of the CURRENT screen's background behind
   the figure (shell.js sets --screen-art on the screen), cover-fitted and centred, softly blurred with a
   vignette so the figure pops; the transparent cut-out sits on top; the gold frame stays. */
.rc-portrait { overflow: hidden; isolation: isolate; }
.rc-portrait::before { content: ''; position: absolute; inset: -4px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(10, 5, 8, 0.55) 100%), var(--screen-art, none) center / cover no-repeat;
  filter: blur(1.5px) saturate(1.05); }
.rc-portrait > img, .rc-portrait > svg { position: relative; z-index: 1; }
.rc-portrait > .rc-mood-img { position: absolute; z-index: 2; }
/* With art behind it, a placeholder silhouette drops its own dark plate (the figure stays). */
.rc-portrait > .rc-silhouette > rect:first-child { fill: transparent; }

/* #12 the city map: big, zoomable (+ / − / pinch / wheel), pannable (drag); hotspots and pins live in the
   zoomed box and are counter-scaled so they keep a 44px tap size at every zoom. */
/* Owner 2026-10-10: zoomed out, a vertical swipe on the map scrolls the page (the list of places is
   below it); zoomed in, the map takes every swipe so it can be dragged. */
.rc-mapwrap { touch-action: pan-y; user-select: none; }
.rc-mapwrap[data-zoomed="1"] { touch-action: none; }
.rc-mapzoom { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(var(--mapx, 0%), var(--mapy, 0%)) scale(var(--mapz, 1)); will-change: transform; }
.rc-mapzoom .rc-rome { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-mapzoom .rc-hotspot, .rc-mapzoom .rc-pin { transform: translate(-50%, -50%) scale(calc(1 / var(--mapz, 1))); transform-origin: center; }
.rc-mapzoom .rc-hotspot { width: 44px; height: 44px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rc-mapzoom .rc-hotspot > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(18, 9, 15, 0.55); }
.rc-mapzoom .rc-hotspot.home > span { border-color: #8FCB8F; }
.rc-mapzoom .rc-hotspot.locked > span { border-style: dashed; }
.rc-mapzoom .rc-hotspot.rc-selected > span { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.6); }
.rc-mapctl { position: absolute; right: 8px; bottom: 40px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.rc-mapctl button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #FFF0B8; background: #3B1A2C; color: var(--gold-light); font: 700 22px/1 Georgia, serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.rc-mapctl button:disabled { opacity: 0.45; }
.rc-mapwrap.rc-map-full { margin: 0 -14px; width: calc(100% + 28px); border-radius: 0; }
/* #13 the Map / Work toggle and the work pins are OPAQUE buttons (owner 2026-10-10: an allowed exception to
   the no-solid rule, which is for screens and panels; noSolidFill.test.mjs allows buttons). */
.rc-seg button { background: #3B1A2C; color: var(--marble); border: 1px solid #A8743F; font-weight: 700; min-height: 44px; }
.rc-seg button.on { background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, #A8862A); color: var(--ink); border-color: #FFF0B8; }
.rc-mapzoom .rc-pin { background: #2A1420; }
/* #15 the work board as picture cards */
.rc-jobcards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rc-jobcard { display: flex; gap: 10px; text-align: left; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.5); background: rgba(22, 11, 18, 0.7); color: var(--text); font: inherit; }
.rc-jobcard.rc-selected { border-color: var(--gold-light); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.7); }
.rc-jobcard.locked { opacity: 0.8; }
.rc-jobart { position: relative; flex: none; width: 110px; min-height: 120px; background-size: cover !important; background-position: center !important; }
.rc-jobgiver { position: absolute; left: 6px; bottom: 6px; }
.rc-jobtier { position: absolute; right: 6px; top: 6px; font: 700 16px Cinzel, Georgia, serif; color: var(--ink); background: var(--gold); border-radius: 8px; padding: 1px 6px; }
.rc-jobtext { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 8px 0; min-width: 0; }
.rc-jobtext small { color: var(--text-dim); }

/* #14 a rented (or the master's) home: its picture, why you can't build, and the next home to buy. */
.rc-rented-art { position: relative; border-radius: 12px; overflow: hidden; min-height: 220px; background-size: cover !important; background-position: center !important; display: flex; align-items: flex-end; box-shadow: var(--frame); margin-bottom: 8px; }
.rc-rented-plate { margin: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(16, 8, 13, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rc-rented-plate p { margin: 4px 0 0; }
.rc-next-home { display: flex; gap: 10px; align-items: stretch; padding: 0; overflow: hidden; }
.rc-next-art { flex: none; width: 120px; min-height: 120px; background-size: cover !important; background-position: center !important; }
.rc-next-home > div { padding: 8px 8px 8px 0; flex: 1; min-width: 0; }
.rc-jobtext .rc-pill { white-space: normal; max-width: 100%; }   /* #15: a long risk line wraps inside its pill, never off the card */

/* The portrait studio (Create a Citizen): glass only, pills for choices, a 44 pt tap target everywhere. */
.rc-consent { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.4; }
.rc-btn.rc-consent-check { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 48px; background: rgba(22, 11, 18, 0.55); border: 1px solid rgba(212, 175, 55, 0.55); }
.rc-consent-box { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--gold); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-light); font-weight: 700; }
.rc-consent-check[aria-checked="true"] .rc-consent-box { background: rgba(212, 175, 55, 0.35); }
.rc-studio-photo { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); margin: 2px 0 8px; }
.rc-outfit-slot { margin: 10px 0; }
.rc-outfit-slot > b { display: block; font-family: 'Cinzel', Georgia, serif; font-size: 16px; color: var(--gold-light); margin-bottom: 4px; }
.rc-pill.rc-pick { min-height: 44px; padding: 6px 14px; font: inherit; font-size: 16px; cursor: pointer; white-space: normal; text-align: left; }
.rc-pill.rc-pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold) inset; }
.rc-pill.rc-pick:disabled { opacity: 0.85; cursor: default; }
.rc-portrait-item { display: flex; gap: 10px; align-items: flex-start; }
.rc-portrait-item > div { flex: 1; min-width: 0; }
.rc-studio-refused #rc-studio-msg { font-size: 16px; line-height: 1.45; }

/* Full-screen picture (owner 2026-10-10): tap any portrait or the poster. Translucent dark glass over the
   game (never a solid fill), the picture as large as fits, and a 48px exit button clear of the notch. */
#rc-lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(12, 6, 10, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: zoom-out; }
/* Owner 2026-10-10: the game's maximum is 9:16 — the picture and its exit button never go past a 9:16
   frame, centred, as large as the screen allows (on a wide screen it does not spread sideways). */
.rc-lightbox-frame { position: relative; aspect-ratio: 9 / 16; width: min(100vw, calc(100dvh * 9 / 16)); max-height: 100dvh;
  display: grid; place-items: center; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + 64px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px); }
#rc-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)); }
.rc-lightbox-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: rgba(18, 9, 15, 0.7); color: var(--gold-light); font-size: 22px; line-height: 1; cursor: pointer; }
.rc-portrait, .rc-poster { cursor: zoom-in; }


/* Opening films + narrated prologue (owner 2026-10-10; src/ui/cinema.js). A layer of its own above the game,
   never a solid fill: the poster shows blurred behind a film's letterbox, the Forum behind the prologue.
   The frame never goes past 9:16, like the lightbox. Every control is 48px tall, text 16px or larger. */
.rc-cinema { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(rgba(12, 6, 10, 0.55), rgba(12, 6, 10, 0.55)), var(--cinema-art, none) center / cover no-repeat;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rc-cinema-frame { position: relative; aspect-ratio: 9 / 16; width: min(100vw, calc(100dvh * 9 / 16)); max-height: 100dvh; }
.rc-cinema-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-cinema-skip, .rc-cinema-unmute { position: absolute; min-height: 48px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: blur(14px) saturate(140%);
  color: var(--gold-light); font: 600 16px/1.2 'Cinzel', Georgia, serif; letter-spacing: 0.06em; cursor: pointer; }
.rc-cinema-skip { right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
.rc-cinema-unmute { left: 16px; top: calc(env(safe-area-inset-top, 0px) + 16px); }
.rc-cinema-unmute[hidden] { display: none; }
.rc-cinema-prologue { background: linear-gradient(rgba(12, 6, 10, 0.35), rgba(12, 6, 10, 0.6)), var(--prologue-art, var(--cinema-art, none)) center / cover no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rc-cinema-panel { box-sizing: border-box; width: min(calc(100vw - 32px), calc(100dvh * 9 / 16 - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 22px 20px 18px; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--frame); }
.rc-cinema-title { margin: 0 0 12px; text-align: center; font: 700 22px/1.2 'Cinzel', Georgia, serif; letter-spacing: 0.12em; color: var(--gold); }
.rc-cinema-title::after { content: ''; display: block; height: 8px; margin-top: 10px; background: var(--meander) repeat-x; opacity: 0.8; }
.rc-cinema-text { margin: 0 0 16px; min-height: 12em; font: 400 19px/1.55 'EB Garamond', Georgia, serif; color: var(--text); }
.rc-cinema-next { display: block; width: 100%; min-height: 48px; padding: 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(91, 26, 46, 0.6); color: var(--text); font: 600 16px/1.2 'Cinzel', Georgia, serif; letter-spacing: 0.08em; cursor: pointer; }
.rc-cinema-next.rc-cinema-begin { background: linear-gradient(135deg, var(--gold), #B8860B); color: var(--ink); }
@media (prefers-reduced-transparency: reduce) { .rc-cinema-panel, .rc-cinema-skip, .rc-cinema-unmute { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* The opening film fades to white, then the white fades away to reveal the main menu (owner 2026-10-10). */
.rc-cinema-white { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.9s ease-in; }
.rc-cinema-white.on { opacity: 1; }
.rc-cinema.rc-cinema-out { opacity: 0; transition: opacity 0.7s ease-out; pointer-events: none; }