:root {
  --ink: #101012;
  --black: #09090b;
  --panel: #141416;
  --panel-2: #19191c;
  --line: rgba(255,255,255,.09);
  --muted: #98969a;
  --paper: #e7e1d7;
  --red: #991f2b;
  --red-bright: #c63743;
  --gold: #ba9b65;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--black); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% -10%, #251217 0, transparent 34%), var(--black); color: var(--paper); font-family: var(--sans); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; border-right: 1px solid var(--line); padding: 28px 20px 20px; background: rgba(9,9,11,.92); backdrop-filter: blur(20px); z-index: 10; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin: 0 8px 38px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--red); color: #f0c5c8; border-radius: 50%; font: 700 15px var(--serif); box-shadow: inset 0 0 0 4px var(--black), inset 0 0 0 5px #5b1a22; }
.brand strong { display: block; font: 600 20px/1 var(--serif); letter-spacing: .01em; }
.brand small { display: block; color: #77757a; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; margin-top: 6px; }
.main-nav { display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; display: flex; width: 100%; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 6px; color: #8d8b90; text-align: left; cursor: pointer; font-size: 13px; }
.nav-item span { width: 18px; color: #6d6a70; text-align: center; font-size: 17px; }
.nav-item:hover { color: var(--paper); background: rgba(255,255,255,.04); }
.nav-item.active { color: #f1ece5; background: linear-gradient(90deg, rgba(153,31,43,.25), rgba(153,31,43,.07)); box-shadow: inset 2px 0 var(--red-bright); }
.nav-item.active span { color: var(--red-bright); }
.sidebar-spacer { flex: 1; }
.session-card { border: 1px solid var(--line); background: #111113; padding: 14px; border-radius: 8px; margin: 0 4px 12px; }
.session-card-head { font-size: 9px; text-transform: uppercase; color: #88858a; letter-spacing: .13em; margin-bottom: 12px; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--red-bright); border-radius: 50%; box-shadow: 0 0 10px var(--red); }
.session-card strong { font: 600 19px var(--serif); display: block; }
.session-card small { color: var(--muted); font-size: 11px; }
.session-progress { height: 2px; background: #29282b; margin-top: 13px; }.session-progress i { display:block; height:100%; background: var(--red-bright); }
.storyteller-link { border-top: 1px solid var(--line); border-radius: 0; margin-top: 8px; padding-top: 16px; }
.profile-switcher { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 17px 7px 0; margin-top: 5px; }
.avatar { display: grid; place-items:center; width: 34px; height:34px; border-radius: 50%; background:#3a2226; color:#f0d6d8; font: 700 15px var(--serif); }
.profile-switcher label { flex:1; min-width:0; }.profile-switcher small { display:block; color:#747277; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.profile-switcher select { width:100%; border:0; padding:2px 0; color:#d5d0ca; background:transparent; font-size:11px; outline:0; }
.profile-switcher select:disabled { opacity:1; }.logout-button { border:0; background:transparent; color:#77747a; cursor:pointer; font-size:14px; padding:5px; }.logout-button:hover { color:#d6d0c9; }
.app-shell { margin-left: 248px; min-height: 100vh; }
.topbar { height: 102px; padding: 25px 42px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:rgba(9,9,11,.45); }
.eyebrow { color: var(--gold); font-size: 9px; letter-spacing: .19em; text-transform: uppercase; margin:0 0 6px; font-weight:700; }
h1,h2,h3,p { margin-top:0; } h1 { font: 600 28px/1 var(--serif); margin:0; } h2 { font:600 37px/1.03 var(--serif); margin-bottom:14px; } h3 { font:600 22px/1.1 var(--serif); margin-bottom:10px; }
.topbar-actions { display:flex; align-items:center; gap:16px; }.sync-state { font-size:10px; color:#77757a; }.sync-state i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#577960; margin-right:7px; }
.icon-button { width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--line); background:#141416; border-radius:50%; cursor:pointer; }.icon-button:hover { border-color:#555; }
.view { display:none; padding: 34px 42px 60px; max-width: 1500px; margin:0 auto; }.view.active { display:block; animation: rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } }
.panel { border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(26,26,29,.94), rgba(16,16,18,.94)); box-shadow:0 20px 60px rgba(0,0,0,.15); }
.hero { min-height: 305px; padding: 48px 52px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; background: linear-gradient(100deg, rgba(15,15,17,.96) 15%, rgba(15,15,17,.72)), radial-gradient(circle at 86% 40%, #5b1a23 0, #201317 24%, #111114 55%); }
.hero:after { content:""; position:absolute; inset:0; opacity:.14; background-image: repeating-linear-gradient(110deg, transparent 0 32px, #c19a5e 33px 34px, transparent 35px 67px); mask-image:linear-gradient(90deg,transparent 45%,#000); }
.hero>div:first-child { position:relative; z-index:2; max-width:610px; }.hero h2 { font-size:49px; letter-spacing:-.02em; }.hero h2 em { color:#c44a54; font-weight:500; }.hero p:not(.eyebrow) { color:#a29ea2; font: 500 15px/1.65 var(--serif); max-width:520px; }
.primary-button,.secondary-button { border:0; border-radius:5px; padding:12px 17px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.04em; }.primary-button { background:var(--red); color:white; box-shadow:0 8px 24px rgba(110,15,25,.22); }.primary-button:hover { background:#b52b37; }.primary-button span { margin-left:14px; }.primary-button.small { padding:10px 14px; }.secondary-button { background:#242427; color:#c9c4be; }
.blood-seal { position:relative; z-index:1; width:168px; height:168px; border:1px solid rgba(198,55,67,.38); border-radius:50%; display:grid; place-items:center; margin-right:70px; box-shadow:0 0 0 10px rgba(0,0,0,.24), 0 0 90px rgba(151,21,33,.25); }.blood-seal:before,.blood-seal:after { content:""; position:absolute; border:1px solid rgba(186,155,101,.28); border-radius:50%; inset:12px; }.blood-seal:after { inset:28px; }.blood-seal span { font:600 50px var(--serif); color:#d0aeb1; }
.overview-grid { display:grid; grid-template-columns: 1.4fr .8fr; gap:16px; margin-top:16px; }.overview-grid article { padding:23px 26px; }.panel-heading,.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.panel-heading h3 { margin-bottom:0; }.status-pill { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#ce7a82; background:rgba(153,31,43,.17); padding:6px 9px; border-radius:20px; }.active-scene>p { color:var(--muted); font:500 13px/1.6 var(--serif); max-width:620px; }.scene-meta { display:flex; gap:24px; color:#77757a; font-size:10px; border-top:1px solid var(--line); padding-top:14px; }.scene-meta b { color:var(--gold); margin-right:5px; }.omen-card { background:linear-gradient(135deg,#1c1215,#121214); }.omen-card blockquote { margin:23px 0 12px; font:italic 600 25px/1.25 var(--serif); color:#d5c7bd; }.omen-card>span { color:#716d71; font-size:9px; }
.section-heading { align-items:end; margin:35px 0 16px; }.section-heading h2 { font-size:30px; margin:0; }.section-heading.compact { margin-top:0; }.text-button { border:0; color:#a7a3a6; background:transparent; cursor:pointer; font-size:10px; padding:6px; }.text-button:hover { color:white; }
.character-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.character-card { min-height:176px; padding:22px; position:relative; overflow:hidden; cursor:pointer; transition:.2s ease; }.character-card:hover { transform:translateY(-2px); border-color:rgba(186,155,101,.3); }.character-card:after { content:attr(data-initial); position:absolute; right:12px; bottom:-30px; font:700 120px var(--serif); color:rgba(255,255,255,.025); }.clan-badge { width:42px; height:42px; border:1px solid #65323a; display:grid; place-items:center; border-radius:50%; color:#c98a91; font:700 17px var(--serif); margin-bottom:18px; }.character-card h3 { margin:0 0 4px; }.character-card p { color:#77757b; font-size:10px; margin:0; }.health-pips { position:absolute; bottom:20px; left:22px; display:flex; gap:4px; }.health-pips i { width:12px; height:4px; background:#3b393d; }.health-pips i.filled { background:#9e313c; }
.character-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; }.character-roster { display:grid; gap:8px; align-content:start; }.roster-item { border:1px solid var(--line); background:#111113; padding:14px; border-radius:7px; cursor:pointer; display:flex; gap:12px; align-items:center; text-align:left; }.roster-item.active { border-color:#74323a; background:#1d1316; }.roster-item .avatar { flex:0 0 auto; }.roster-item strong { display:block; font:600 17px var(--serif); }.roster-item small { color:#77757a; font-size:9px; }.character-sheet { padding:30px; min-width:0; }.sheet-header { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:24px; }.sheet-header h2 { margin:0 0 4px; }.sheet-meta { color:#827e82; font-size:10px; }.generation-medallion { text-align:center; }.generation-medallion strong { display:block; font:600 34px var(--serif); color:#d1b078; }.generation-medallion small { color:#777; text-transform:uppercase; font-size:8px; letter-spacing:.13em; }.sheet-tabs { display:flex; gap:3px; border-bottom:1px solid var(--line); margin:0 -30px; padding:0 30px; }.sheet-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; color:#77747a; padding:14px 16px 12px; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font-size:8px; }.sheet-tabs button:hover { color:#c7c1ba; }.sheet-tabs button.active { color:#d8c6b8; border-bottom-color:var(--red-bright); }.sheet-tab-content { animation:rise .25s ease both; }.sheet-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0 0; }.stat-group { background:#101012; border:1px solid var(--line); padding:17px; border-radius:6px; min-width:0; }.stat-group h4 { margin:0 0 13px; font:600 16px var(--serif); color:#c5b7ac; }.stat-line { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#8b888c; font-size:10px; padding:5px 0; }.stat-line em { display:block; color:var(--gold); font-size:7px; font-style:normal; }.stat-actions { display:flex; align-items:center; gap:7px; }.stat-roll { border:1px solid #593038; border-radius:3px; background:#1c1114; color:#bdaeb0; padding:3px 6px; cursor:pointer; font-size:7px; text-transform:uppercase; letter-spacing:.08em; }.stat-roll:hover { border-color:#a43a45; color:#fff; }.stat-roll:disabled { opacity:.3; cursor:not-allowed; }.dots { color:#a23a44; letter-spacing:2px; white-space:nowrap; }.sheet-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.sheet-columns h4 { font:600 17px var(--serif); margin:0 0 10px; }.equipment-list { list-style:none; padding:0; margin:0; }.equipment-list li { padding:8px 0; color:#918d91; font-size:11px; border-bottom:1px solid var(--line); }.sheet-note { color:#918d91; font:500 13px/1.65 var(--serif); white-space:pre-wrap; }
.vitals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0 14px; }.tracker { border:1px solid var(--line); border-radius:6px; background:#101012; padding:12px; }.tracker>div:first-child { display:flex; justify-content:space-between; color:#7d7a7e; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.tracker b { color:#bdb5ae; }.tracker-pips { display:flex; gap:3px; margin-top:10px; }.tracker-pips i { flex:1; height:4px; background:#302e32; }.tracker-pips i.active { background:#9d303a; }.tracker:nth-child(1) .tracker-pips i.active { background:#b59b6a; }.identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }.identity-grid>div { background:#121214; padding:12px 14px; }.identity-grid span,.blood-profile span,.journal-summary span { color:#6f6c71; display:block; font-size:7px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }.identity-grid b { color:#bdb7b1; font:600 13px var(--serif); }.skills-note { display:flex; justify-content:space-between; color:#77747a; font-size:8px; margin:20px 2px -10px; }.skills-grid .stat-line { padding:4px 0; }.blood-profile { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0; }.blood-profile>div { background:#111113; padding:14px; }.blood-profile strong { font:600 17px var(--serif); color:#c8bdb4; }.blood-columns section { min-width:0; }.discipline-list { display:grid; gap:8px; }.discipline-card { border:1px solid var(--line); background:#101012; border-radius:6px; padding:12px; }.discipline-card>div { display:flex; justify-content:space-between; align-items:center; }.discipline-card h4 { margin:0; }.discipline-card p { color:#77747a; font-size:9px; margin:7px 0 0; }.spaced { margin-top:23px; }.trait-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.trait-list,.text-traits { list-style:none; padding:0; margin:0; }.trait-list li { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding:8px 0; color:#918d91; font-size:9px; }.trait-list.flaws .dots { color:#7c7274; }.trait-list .empty-row { color:#666; }.text-traits li { color:#918d91; font:500 11px/1.45 var(--serif); margin:7px 0; padding-left:12px; position:relative; }.text-traits li:before { content:"◆"; position:absolute; left:0; top:2px; color:#773039; font-size:6px; }.journal-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0; }.journal-summary>div { background:#111113; text-align:center; padding:14px; }.journal-summary strong { font:600 25px var(--serif); color:#cbbba9; }.journal-note { min-height:180px; background:#101012; border:1px solid var(--line); border-radius:6px; padding:14px; }
.map-toolbar { padding:18px 22px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.map-toolbar h2 { margin:0; font-size:29px; }.map-key { display:flex; gap:18px; align-items:center; color:#858287; font-size:9px; }.marker-dot { width:7px; height:7px; display:inline-block; border-radius:50%; margin-right:5px; }.marker-dot.location { background:var(--gold); }.marker-dot.npc { background:var(--red-bright); }
.map-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:14px; }.realm-map { height:600px; position:relative; overflow:hidden; background-color:#171615; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:31px 31px; }.realm-map:before { content:""; position:absolute; inset:0; opacity:.18; background:radial-gradient(ellipse at 52% 45%,transparent 0 15%,#000 68%), repeating-radial-gradient(ellipse at 35% 45%,transparent 0 22px,rgba(188,159,110,.13) 23px 24px,transparent 25px 42px); }.river { position:absolute; width:800px; height:80px; border-top:2px solid rgba(76,92,101,.6); border-radius:50%; transform:rotate(-16deg); }.river-a { top:290px; left:-100px; }.river-b { top:318px; left:-80px; border-color:rgba(76,92,101,.35); }.road { position:absolute; height:1px; background:rgba(186,155,101,.25); transform-origin:left; }.road-a { width:720px; top:190px; left:120px; transform:rotate(24deg); }.road-b { width:600px; top:430px; left:150px; transform:rotate(-20deg); }.map-label { position:absolute; color:rgba(218,203,179,.19); font:700 25px var(--serif); letter-spacing:.22em; }.paris { top:280px; left:51%; }.versailles { top:415px; left:18%; }.forest { top:95px; left:10%; font-size:14px; }.compass { position:absolute; right:25px; top:25px; width:55px; height:55px; border:1px solid rgba(186,155,101,.28); border-radius:50%; display:grid; place-items:center; color:#ab8f60; font:600 10px var(--serif); }.compass i { position:absolute; height:38px; width:1px; background:linear-gradient(#ad2b36 50%,#9c855f 50%); transform:rotate(10deg); }.compass span { position:absolute; top:-15px; }.map-marker { position:absolute; transform:translate(-50%,-50%); cursor:pointer; border:0; background:transparent; z-index:3; }.map-marker>i { display:block; width:15px; height:15px; border-radius:50%; border:2px solid #1b1919; box-shadow:0 0 0 1px currentColor,0 0 20px currentColor; background:currentColor; }.map-marker.location { color:var(--gold); }.map-marker.npc { color:var(--red-bright); }.map-marker span { position:absolute; white-space:nowrap; left:50%; transform:translateX(-50%); top:20px; color:#b4afb0; font:600 11px var(--serif); text-shadow:0 1px 4px #000; opacity:.85; }.map-marker:hover { z-index:5; }.map-marker:hover>i { transform:scale(1.25); }.map-inspector { padding:25px; }.map-inspector .portrait-symbol { width:62px; height:62px; border:1px solid #5e3238; border-radius:50%; display:grid; place-items:center; font:600 28px var(--serif); color:#cb9297; margin-bottom:25px; }.map-inspector>p:not(.eyebrow) { color:#8c898d; font:500 13px/1.6 var(--serif); }.intel-list { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }.intel-list span { display:block; color:#77757a; font-size:10px; margin:8px 0; }.intel-list b { color:#b8b1aa; }
.segmented { display:flex; background:#111113; padding:3px; border:1px solid var(--line); border-radius:6px; }.segmented button { border:0; padding:7px 11px; background:transparent; font-size:9px; color:#777; border-radius:4px; cursor:pointer; }.segmented button.active { color:#e3ddd6; background:#29282b; }.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.archive-card { padding:0; overflow:hidden; }.archive-art { height:120px; display:grid; place-items:center; background:radial-gradient(circle,#3a2025,#141416 65%); font:600 43px var(--serif); color:#bf777e; position:relative; }.archive-art.location-art { background:radial-gradient(circle,#393124,#141416 65%); color:#c3a66f; }.archive-lock { position:absolute; right:10px; top:10px; font:600 8px var(--sans); color:#938f92; background:#121214; padding:5px 7px; border-radius:10px; }.archive-body { padding:18px; }.archive-body h3 { margin:0 0 5px; }.archive-body>p { color:#858187; font:500 12px/1.55 var(--serif); min-height:55px; }.archive-tags { display:flex; gap:5px; flex-wrap:wrap; }.archive-tags span { border:1px solid var(--line); color:#77757a; font-size:8px; padding:4px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.08em; }
.dice-layout { display:grid; grid-template-columns:390px 1fr; gap:18px; }.dice-roller { padding:32px; text-align:center; }.pool-stepper { margin:31px auto 20px; display:grid; grid-template-columns:42px 72px 42px; justify-content:center; align-items:center; }.pool-stepper button { width:38px; height:38px; border:1px solid var(--line); background:#1d1d20; border-radius:50%; cursor:pointer; }.pool-stepper strong { font:600 53px var(--serif); }.pool-stepper span { grid-column:1/-1; color:#777; text-transform:uppercase; letter-spacing:.15em; font-size:8px; margin-top:8px; }.hunger-control { display:grid; grid-template-columns:1fr auto; gap:8px; text-align:left; font-size:10px; color:#858287; }.hunger-control input { grid-column:1/-1; accent-color:var(--red); }.hunger-control b { color:#c85962; }.roll-note { width:100%; background:#0f0f11; border:1px solid var(--line); border-radius:5px; color:#d7d2cb; padding:11px; margin:19px 0 10px; font-size:11px; outline:0; }.roll-note:focus { border-color:#663038; }.roll-button { width:100%; background:var(--red); border:0; padding:14px; border-radius:5px; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }.roll-button span { margin-right:7px; }.dice-results { min-height:115px; margin-top:25px; padding-top:21px; border-top:1px solid var(--line); }.dice-results p { color:#6f6d71; font-size:11px; }.dice-row { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }.die { display:grid; place-items:center; width:40px; height:40px; background:#ece4d9; color:#171719; clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); font-weight:700; }.die.hunger { background:#a72430; color:#fff; }.die.success { box-shadow:inset 0 0 0 3px #d2ad68; }.roll-outcome { font:600 21px var(--serif); margin-top:14px; }.success-breakdown { margin:12px auto 0; max-width:310px; color:#a8a3a5; font-size:9px; line-height:1.55; }.success-breakdown span { display:inline-block; margin-right:6px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }.success-breakdown em { display:block; color:#66646a; font-style:normal; margin-top:3px; }.roll-log-panel { padding:27px; }.roll-log { display:grid; gap:8px; margin-top:22px; max-height:570px; overflow:auto; }.roll-entry { border:1px solid var(--line); background:#111113; border-radius:6px; padding:12px 14px; display:grid; grid-template-columns:110px 1fr auto; gap:14px; align-items:center; }.roll-entry strong { font:600 15px var(--serif); }.roll-entry small { display:block; color:#6e6c70; font-size:8px; margin-top:2px; }.roll-entry p { margin:0; color:#969297; font-size:10px; }.roll-entry b { color:#c6a66e; font:600 16px var(--serif); }.log-breakdown { display:block; color:#846f50; font-size:8px; margin-top:4px; }

.memory-section { margin-top:34px; }.memory-composer { display:flex; gap:12px; align-items:stretch; padding:15px; margin:17px 0 25px; }.memory-composer textarea { flex:1; resize:vertical; min-height:72px; padding:13px 15px; border:1px solid var(--line); border-radius:5px; background:#101012; color:#ddd7ce; outline:0; font:12px/1.55 var(--sans); }.memory-composer textarea:focus { border-color:#72543a; }.memory-actions { display:flex; min-width:154px; flex-direction:column; justify-content:space-between; gap:10px; }.private-memory { display:flex; align-items:center; gap:7px; color:#b4adb0; font-size:10px; cursor:pointer; }.private-memory input { accent-color:var(--red); }.private-memory small { display:block; color:#68656a; font-size:7px; }.memory-composer .primary-button { min-width:132px; }.memory-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 20px; padding:8px 4px 22px; }.memory-note { --paper:#d8c79c; position:relative; min-height:154px; padding:28px 22px 17px; background:var(--paper); color:#211e1b; box-shadow:0 9px 18px #0008; transform:rotate(-1deg); }.memory-note.private-note { --paper:#c5b7c9; }.memory-note:nth-child(3n+2) { --paper:#c9b88c; transform:rotate(1.2deg); }.memory-note.private-note:nth-child(3n+2) { --paper:#b8acc0; }.memory-note:nth-child(3n) { --paper:#bcae91; transform:rotate(-.4deg); }.memory-note.private-note:nth-child(3n) { --paper:#afa5b8; }.memory-note::before { content:""; position:absolute; top:9px; left:50%; width:10px; height:10px; border-radius:50%; background:#85242d; box-shadow:1px 2px 3px #0008; transform:translateX(-50%); }.memory-privacy { position:absolute; top:10px; right:12px; color:#5e405f; font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }.memory-note blockquote { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:italic 17px/1.45 var(--serif); }.memory-meta { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-top:18px; border-top:1px solid #453e3044; padding-top:8px; color:#5b5242; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.memory-delete { flex:none; border:0; background:transparent; color:#6c2830; cursor:pointer; font-size:18px; line-height:1; }.memory-empty { grid-column:1/-1; padding:30px; border:1px dashed var(--line); color:#777278; text-align:center; font:italic 15px var(--serif); }
.storyteller-gate { max-width:550px; margin:80px auto; padding:48px; text-align:center; }.small-seal { width:92px; height:92px; margin:0 auto 25px; }.small-seal span { font-size:28px; }.storyteller-gate>p:not(.eyebrow) { color:#8c888d; font:500 14px/1.6 var(--serif); }.hidden { display:none!important; }.st-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:15px; }.st-grid article { padding:25px; }.progress-large { height:5px; background:#2b292c; margin:25px 0 18px; }.progress-large i { display:block; height:100%; background:linear-gradient(90deg,#761e28,#c94a55); }.stat-row { display:flex; gap:22px; color:#77757a; font-size:9px; }.stat-row b { color:#c5bbb2; margin-right:4px; }.danger-panel { border-color:rgba(153,31,43,.3); }.danger-panel>p:not(.eyebrow) { color:#8f898e; font:500 12px/1.5 var(--serif); }.danger-panel select { background:#120e10; color:#ca858c; border:1px solid #50252b; border-radius:4px; padding:8px; font-size:9px; width:100%; }.st-grid.lower { margin-top:15px; grid-template-columns:1.3fr .7fr; }.story-beats,.reveal-list { display:grid; gap:7px; margin-top:17px; }.story-beat { display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; padding:10px; background:#111113; border-radius:5px; border:1px solid var(--line); }.story-beat input { accent-color:var(--red); }.story-beat strong { font:600 14px var(--serif); }.story-beat small { color:#6f6d71; display:block; font-size:8px; }.story-beat button { border:0; background:transparent; color:#6e6b70; cursor:pointer; }.reveal-item { display:flex; justify-content:space-between; align-items:center; color:#99959a; font-size:10px; border-bottom:1px solid var(--line); padding:9px 0; }.switch { width:31px; height:17px; border:0; border-radius:20px; background:#343337; position:relative; cursor:pointer; }.switch:after { content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:#878489; top:3px; left:3px; transition:.2s; }.switch.on { background:#70202a; }.switch.on:after { left:17px; background:#e3c9cb; }
dialog { width:min(980px,calc(100vw - 32px)); max-height:90vh; overflow:auto; border:1px solid #3b3538; border-radius:9px; background:#151517; color:var(--paper); padding:27px; box-shadow:0 30px 100px #000; }dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; position:sticky; top:-27px; z-index:3; background:#151517; padding:12px 0; border-bottom:1px solid var(--line); }.dialog-heading h2 { font-size:29px; margin:0; }.dialog-heading .icon-button { border:0; background:transparent; font-size:24px; }.dialog-heading .icon-button:hover { color:white; }.editor-section { border-bottom:1px solid var(--line); padding:15px 0 20px; }.editor-section>.eyebrow { margin-bottom:10px; }.editor-section small { color:#625f64; text-transform:none; letter-spacing:normal; }.dialog-heading+.form-row {} dialog label { display:block; color:#9b979b; font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin:8px 0; }dialog input,dialog textarea { width:100%; display:block; background:#0e0e10; color:#ddd7d0; border:1px solid var(--line); border-radius:5px; padding:9px; margin-top:6px; outline:0; text-transform:none; letter-spacing:normal; font-size:11px; }dialog input:focus,dialog textarea:focus { border-color:#663038; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-row.three { grid-template-columns:repeat(3,1fr); }.form-row.four { grid-template-columns:repeat(4,1fr); }.trait-editor { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.trait-editor fieldset { border:1px solid var(--line); border-radius:6px; padding:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.trait-editor legend { color:#b7a99c; font:600 14px var(--serif); padding:0 5px; }.trait-editor label { margin:0; }.trait-editor input[type=number] { padding:6px; }.skill-editor fieldset { display:block; }.skill-editor fieldset label { display:grid; grid-template-columns:1fr 48px 1.2fr; gap:5px; align-items:center; text-transform:none; letter-spacing:normal; }.skill-editor fieldset input { margin:0; min-width:0; }.skill-editor .specialty-input { color:#b69a69; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; position:sticky; bottom:-27px; padding:14px 0; background:#151517; border-top:1px solid var(--line); }.toast { position:fixed; right:24px; bottom:24px; z-index:40; background:#eee6dc; color:#1a191b; padding:11px 16px; border-radius:5px; font-size:10px; box-shadow:0 10px 30px #000; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:none; }
.login-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 20%,#2a1218,#08080a 65%); }.login-card { width:min(440px,100%); padding:38px; text-align:center; }.login-seal { width:86px; height:86px; margin:0 auto 24px; }.login-seal span { font-size:27px; }.login-card h2 { margin-bottom:8px; }.login-card>p:not(.eyebrow):not(.login-error) { color:#88858a; font:500 13px/1.5 var(--serif); }.login-card label { display:block; text-align:left; color:#8e8a8e; text-transform:uppercase; letter-spacing:.1em; font-size:8px; margin:14px 0; }.login-card input,.login-card select { width:100%; display:block; margin-top:6px; border:1px solid var(--line); background:#0d0d0f; color:#ded8d1; padding:11px; border-radius:5px; outline:0; }.login-card input:focus,.login-card select:focus { border-color:#6d3038; }.login-card .primary-button { width:100%; margin-top:8px; }.login-error { min-height:16px; color:#cf6670; font-size:9px; margin:2px 0; }
@media (max-width: 1050px) { .sidebar { width:205px; }.app-shell { margin-left:205px; }.topbar,.view { padding-left:26px; padding-right:26px; }.hero { padding:38px; }.blood-seal { margin-right:15px; }.character-preview-grid,.archive-grid { grid-template-columns:1fr 1fr; }.map-layout,.dice-layout { grid-template-columns:1fr; }.map-inspector { min-height:200px; }.character-layout { grid-template-columns:1fr; }.character-roster { grid-template-columns:repeat(3,1fr); }.vitals-grid { grid-template-columns:1fr 1fr; }.memory-wall { grid-template-columns:1fr 1fr; } }
@media (max-width: 760px) { .sidebar { position:fixed; inset:auto 0 0; width:auto; height:68px; padding:7px 8px; border:0; border-top:1px solid var(--line); flex-direction:row; z-index:30; }.brand,.sidebar-spacer,.session-card,.profile-switcher { display:none; }.main-nav { display:flex; width:100%; justify-content:space-around; }.nav-item { width:auto; padding:8px; display:grid; place-items:center; font-size:8px; gap:2px; }.nav-item span { font-size:16px; }.storyteller-link { margin:0; border:0; padding:8px; }.app-shell { margin-left:0; padding-bottom:70px; }.topbar { height:80px; padding:18px; }.view { padding:22px 16px 40px; }.sync-state { display:none; }.hero { padding:28px; min-height:380px; }.hero h2 { font-size:39px; }.blood-seal { position:absolute; opacity:.25; right:-30px; }.overview-grid,.character-preview-grid,.archive-grid,.character-layout,.st-grid,.st-grid.lower,.sheet-stats,.sheet-columns,.blood-profile { grid-template-columns:1fr; }.character-roster { grid-template-columns:repeat(3,1fr); }.roster-item { display:block; padding:10px; }.roster-item .avatar { margin-bottom:7px; }.sheet-header { display:block; }.generation-medallion { text-align:left; margin-top:14px; }.sheet-tabs { overflow:auto; }.sheet-tabs button { white-space:nowrap; }.identity-grid,.vitals-grid,.trait-split,.journal-summary { grid-template-columns:1fr; }.realm-map { height:480px; }.map-key span { display:none; }.dice-layout { grid-template-columns:1fr; }.roll-entry { grid-template-columns:1fr auto; }.roll-entry p { grid-column:1/-1; grid-row:2; }.form-row,.form-row.three,.form-row.four,.trait-editor { grid-template-columns:1fr; }.trait-editor fieldset { grid-template-columns:repeat(3,1fr); }.memory-composer { display:block; }.memory-composer textarea { width:100%; box-sizing:border-box; }.memory-actions { margin-top:10px; }.memory-composer .primary-button { width:100%; margin-top:0; }.memory-wall { grid-template-columns:1fr; } }

/* ===== Game aide additions: map editor, roll requests, live trackers ===== */
/* Readability: the original sizes were tuned for a mock-up; this is read at a table over Discord. */
body { font-size: 15px; }
.nav-item { font-size: 14px; }
.eyebrow { font-size: 11px; }
.stat-line, .trait-list li, .equipment-list li, .roll-entry p, .archive-body>p, .intel-list span { font-size: 13px; }
.tracker>div:first-child, .identity-grid span, .blood-profile span, .journal-summary span { font-size: 10px; }
.identity-grid b { font-size: 15px; } .sheet-tabs button { font-size: 11px; } .discipline-card p { font-size: 12px; }
.text-traits li { font-size: 14px; } .sheet-note { font-size: 15px; } .roll-entry small, .log-breakdown { font-size: 11px; }
.archive-tags span { font-size: 10px; } .memory-meta { font-size: 10px; } .story-beat small { font-size: 11px; } .story-beat strong { font-size: 16px; }
.primary-button, .secondary-button { font-size: 12px; } .text-button { font-size: 12px; }
.brand small { font-size: 10px; } .session-card-head { font-size: 10px; } .session-card small { font-size: 12px; }
.hidden { display: none !important; }
.muted { color: #77757a; } .grow { flex: 1; }
.win { color: #8fbf98 !important; } .lose { color: #d06a73 !important; }
.secondary-button.danger, .text-button.danger { color: #d98a92; }
.secondary-button { border: 1px solid var(--line); }
.secondary-button:hover { background: #2e2e32; }

.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--red-bright); color: #fff; font: 700 11px var(--sans); text-align: center; font-style: normal; }
.profile-name { display: block; color: #d5d0ca; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sync-label.offline { color: #d9a441; }
.quick-rouse { border: 1px solid #593038; background: #1c1114; color: #d8b6ba; padding: 9px 13px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600; }
.quick-rouse:hover { border-color: var(--red-bright); color: #fff; }

.request-banner-stack { position: sticky; top: 0; z-index: 12; display: grid; gap: 1px; }
.request-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 42px; background: linear-gradient(90deg, #4a1119, #2a0f15); border-bottom: 1px solid var(--red); box-shadow: 0 12px 30px #0008; animation: rise .3s ease both; }
.request-banner .eyebrow { color: #e0a0a6; margin-bottom: 3px; }
.request-banner strong { display: block; font: 600 22px var(--serif); }
.request-banner small { color: #d8b6ba; font-size: 12px; }
.request-banner .primary-button { background: #e8dccd; color: #2a0f15; font-size: 13px; padding: 13px 22px; white-space: nowrap; }

.omen-strip { margin-top: 16px; padding: 22px 28px; background: linear-gradient(135deg, #1c1215, #121214); }
.omen-strip blockquote { margin: 6px 0 8px; font: italic 600 26px/1.25 var(--serif); color: #d5c7bd; }
.omen-strip span { color: #77757a; font-size: 12px; }
.hero h2 { max-width: 640px; } .hero>div:first-child>p:not(.eyebrow) { max-width: 600px; color: #a7a3a6; font: 500 17px/1.6 var(--serif); }
.hero .scene-meta { border-top: 0; padding-top: 4px; font-size: 13px; }

/* dice */
.dice-column { display: grid; gap: 18px; align-content: start; }
.call-panel { padding: 24px; border-color: rgba(153,31,43,.35); }
.call-panel h3 { margin-bottom: 14px; }
.call-panel label { display: block; color: #9b979b; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.call-panel select, .call-panel input:not([type=checkbox]), .chronicle-form input, .chronicle-form textarea { width: 100%; display: block; margin-top: 5px; background: #0e0e10; color: #ddd7d0; border: 1px solid var(--line); border-radius: 5px; padding: 9px; font-size: 13px; outline: 0; }
.call-panel select:focus, .call-panel input:focus, .chronicle-form input:focus, .chronicle-form textarea:focus { border-color: #663038; }
.call-players { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex !important; align-items: center; gap: 7px; border: 1px solid var(--line); background: #101012; border-radius: 20px; padding: 7px 12px; cursor: pointer; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: #c9c4be !important; }
.chip input { accent-color: var(--red); margin: 0 !important; width: auto !important; display: inline !important; }
.call-traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.call-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.call-panel .roll-note { margin: 12px 0 10px; }
.call-send { width: 100%; }
.request-list { margin-top: 6px; }
.request-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: #b2adb0; align-items: center; }
.request-row small { display: block; color: #6f6d71; font-size: 11px; }
.request-row b { font: 600 15px var(--serif); } .waiting { color: #d9a441; }
.hunger-control { font-size: 12px; }
.roll-entry { grid-template-columns: 130px 1fr auto; border-left: 3px solid transparent; }
.roll-entry.win { border-left-color: #4d7a57; } .roll-entry.lose { border-left-color: #8a2e37; }
.roll-entry strong { font-size: 17px; } .roll-entry b { font-size: 17px; text-align: right; max-width: 190px; }
.roll-entry p { margin: 0 0 6px; } .rerolled { color: var(--gold); font-size: 11px; font-style: normal; }
.dice-row.mini { justify-content: flex-start; gap: 4px; } .dice-row.mini .die { width: 27px; height: 27px; font-size: 12px; }
.die.ten { font-weight: 800; }
.roll-outcome.win { color: #8fbf98; } .roll-outcome.lose { color: #d06a73; }
.reroll { display: block; margin: 14px auto 0; font-size: 11px; padding: 9px 12px; }
.roll-body .reroll { margin: 8px 0 0; }
.success-breakdown { font-size: 12px; } .dice-results p { font-size: 13px; }

/* map */
.map-toolbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
.map-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.map-tab { border: 1px solid var(--line); background: #111113; color: #a09ca0; padding: 9px 14px; border-radius: 6px; cursor: pointer; font: 600 16px var(--serif); }
.map-tab.active { border-color: #74323a; background: #1d1316; color: #f0e9e0; }
.map-tab .eye { font: 700 9px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #d9a441; margin-left: 6px; font-style: normal; }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.map-st-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.zoom-tools { display: flex; gap: 4px; } .zoom-tools .icon-button { width: 34px; height: 34px; cursor: pointer; color: #cfc9c2; }
.placement-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; margin-bottom: 12px; border: 1px solid #74323a; background: #2a1419; border-radius: 8px; font-size: 14px; }
.map-scroll { overflow: auto; max-height: calc(100vh - 230px); min-height: 320px; padding: 0; background: #0d0d0f; }
.map-canvas { position: relative; min-width: 100%; user-select: none; background: #171615; }
.map-canvas img { display: block; width: 100%; height: auto; }
.map-canvas.empty, .map-canvas:has(.map-blank:not(.hidden)) { aspect-ratio: 16 / 10; }
.map-blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: #77757a; font: italic 18px/1.5 var(--serif);
  background-color: #171615; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; }
.map-canvas.placing { cursor: crosshair; outline: 2px dashed #a43a45; outline-offset: -2px; }
.map-marker { touch-action: none; }
.map-marker>i { width: 16px; height: 16px; }
.map-marker span { top: 21px; font-size: 14px; color: #f1ece5; text-shadow: 0 0 4px #000, 0 1px 6px #000, 0 0 12px #000; opacity: 1; padding: 1px 4px; }
.map-marker.ghost { opacity: .55; } .map-marker.ghost>i { background: transparent; border-style: dashed; }
.map-marker.selected>i { transform: scale(1.5); box-shadow: 0 0 0 2px #fff, 0 0 24px currentColor; }
.map-canvas.placing .map-marker { pointer-events: none; }
.map-inspector { align-self: start; position: sticky; top: 14px; }
.map-inspector>p:not(.eyebrow), .inspector-desc { color: #a29ea2; font: 500 15px/1.6 var(--serif); white-space: pre-wrap; }
.inspector-short { color: var(--gold); font: 600 15px var(--serif); margin: -4px 0 10px; }
.inspector-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.inspector-actions .secondary-button { padding: 8px 11px; font-size: 11px; }
.secret-box { margin-top: 16px; padding: 12px 14px; border: 1px dashed #6a4a1f; background: #1b1610; border-radius: 6px; }
.secret-box .eyebrow, .secret-box summary { color: #d9a441; font-size: 11px; margin-bottom: 6px; cursor: pointer; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.secret-box p { color: #c9b790; font-size: 13px; line-height: 1.55; white-space: pre-wrap; margin: 8px 0 0; }

/* character sheet */
.sheet-column { min-width: 0; display: grid; gap: 12px; align-content: start; }
.pool-bar { position: sticky; top: 8px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid #74323a; background: #241318; border-radius: 8px; box-shadow: 0 12px 30px #0009; }
.pool-bar b { display: block; font: 600 18px var(--serif); } .pool-bar span { color: #b99a9e; font-size: 12px; }
.pool-bar-actions { display: flex; align-items: center; gap: 8px; }
.pick-hint { color: #77757a; font-size: 12px; margin: 16px 0 -4px; }
.stat-line.pickable { background: transparent; border: 0; border-radius: 4px; cursor: pointer; text-align: left; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); color: #8b888c; }
.stat-line.pickable:hover { background: rgba(255,255,255,.04); color: #ddd7d0; }
.stat-line.pickable.picked, .link-pick.picked { background: rgba(153,31,43,.28); color: #fff; }
.link-pick { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 2px 6px; margin: -2px -6px; border-radius: 4px; }
.link-pick:hover { background: rgba(255,255,255,.06); }
.stat-line em { font-size: 10px; }
.vitals-grid { grid-template-columns: repeat(2, 1fr); }
.tracker { padding: 14px; }
.pip-row, .box-row { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.pip { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #4a3a3d; background: #17161a; padding: 0; display: block; }
button.pip, button.box { cursor: pointer; } button.pip:hover, button.box:hover { border-color: #a43a45; }
.pip.on { background: #a72430; border-color: #d0505b; box-shadow: 0 0 10px rgba(167,36,48,.4); }
.tracker.humanity .pip.on { background: #b59b6a; border-color: #d8bf8a; box-shadow: none; }
.box { width: 24px; height: 24px; border: 1px solid #6b6266; border-radius: 3px; background: #101012; padding: 0; position: relative; display: block; }
.box.sup::after, .box.agg::after { content: ""; position: absolute; inset: 3px; }
.box.sup::after { background: linear-gradient(135deg, transparent 45%, #c94a55 45% 55%, transparent 55%); }
.box.agg { background: #3a1015; border-color: #a72430; }
.box.agg::after { background: linear-gradient(45deg, transparent 43%, #e0606b 43% 57%, transparent 57%), linear-gradient(135deg, transparent 43%, #e0606b 43% 57%, transparent 57%); }
.tracker-hint { display: block; color: #5d5b61; font-size: 10px; margin-top: 8px; min-height: 12px; }
.mini-button { margin-top: 12px; border: 1px solid #593038; border-radius: 4px; background: #1c1114; color: #d8b6ba; padding: 7px 10px; cursor: pointer; font-size: 11px; font-weight: 600; }
.mini-button:hover { border-color: var(--red-bright); color: #fff; }

/* archive + storyteller */
.archive-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.archive-card.is-hidden { opacity: .72; border-style: dashed; }
.archive-card .inspector-actions { margin-top: 14px; }
.st-hint { color: #8f898e; font: 500 15px/1.55 var(--serif); }
.beat-actions { display: flex; gap: 2px; } .beat-actions button { border: 0; background: transparent; color: #6e6b70; cursor: pointer; font-size: 15px; padding: 4px 7px; } .beat-actions button:hover { color: #fff; }
.story-beat.done strong { color: #6f6d71; text-decoration: line-through; }
.story-beats { max-height: 560px; overflow: auto; }
.st-grid.lower { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.chronicle-form label { display: block; color: #9b979b; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin: 8px 0; }
.chronicle-form .primary-button { margin-top: 8px; }

/* dialogs */
dialog.narrow { width: min(620px, calc(100vw - 32px)); }
dialog select { width: 100%; display: block; background: #0e0e10; color: #ddd7d0; border: 1px solid var(--line); border-radius: 5px; padding: 9px; margin-top: 6px; font-size: 12px; }
dialog .check-row { display: flex; align-items: center; gap: 9px; text-transform: none; letter-spacing: 0; font-size: 14px; color: #c9c4be; }
dialog .check-row input { width: auto; margin: 0; }
dialog .secret-field { color: #d9a441; } dialog .secret-field textarea { border-color: #4d3a1a; background: #14110c; }
dialog small { font-size: 11px; }

@media (max-width: 760px) {
  .request-banner { padding: 14px 16px; flex-direction: column; align-items: stretch; }
  .call-traits { grid-template-columns: 1fr; } .vitals-grid { grid-template-columns: 1fr 1fr; }
  .map-scroll { max-height: 70vh; } .map-inspector { position: static; }
  .roll-entry { grid-template-columns: 1fr; } .roll-entry b { text-align: left; max-width: none; }
  .pool-bar { flex-direction: column; align-items: stretch; }
}

.login-card .login-seal, .storyteller-gate .small-seal { margin-right: auto; margin-left: auto; }

/* portraits */
.archive-art.has-portrait { height: 190px; padding: 0; cursor: zoom-in; overflow: hidden; background: #0b0b0c; }
.archive-art.has-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; }
.archive-art.has-portrait:hover img { transform: scale(1.04); }
.inspector-portrait { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 18px; cursor: zoom-in; }
.portrait-dialog { width: min(1200px, calc(100vw - 24px)); padding: 0; background: #08080a; text-align: center; overflow: hidden; }
.portrait-dialog img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.portrait-dialog p { margin: 0; padding: 12px; font: 600 20px var(--serif); color: #d8cfc4; }
.portrait-dialog form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.portrait-close { background: rgba(0,0,0,.6); font-size: 22px; cursor: pointer; }
dialog input[type=file] { padding: 7px; font-size: 12px; }

.journal-edit { width: 100%; min-height: 190px; resize: vertical; background: #101012; color: #ddd7ce; border: 1px solid var(--line); border-radius: 6px; padding: 14px; font: 500 15px/1.6 var(--serif); outline: 0; }
.journal-edit:focus { border-color: #72543a; }
.save-state { color: #625f64; text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 8px; font-size: 11px; }

.beat-note.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.beat-note.open { display: block; overflow: visible; cursor: pointer; white-space: pre-wrap; }
.beat-note { font-size: 12px; line-height: 1.45; margin-top: 3px; }

.field-help { color: #b99a6a; font: 500 14px/1.5 var(--serif); margin: 2px 0 0; min-height: 21px; }
.field-note { display: block; color: #8b8790; font: 500 12px/1.4 var(--sans); margin-top: 5px; }

/* year needle, timeline, dated archive entries */
.year-control { display: flex; align-items: center; gap: 6px; }
.year-label { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 4px 12px; border: 1px solid #74323a; border-radius: 8px; background: #1d1316; }
.year-label small { font: 700 9px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.year-label b, .year-label input { font: 600 26px/1.1 var(--serif); color: #f0e9e0; }
.year-label input { width: 96px; text-align: center; background: transparent; border: 0; outline: 0; padding: 0; -moz-appearance: textfield; }
.year-label input::-webkit-outer-spin-button, .year-label input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.year-steps { display: flex; gap: 3px; }
.year-steps button { border: 1px solid var(--line); background: #141416; color: #b9b4b6; border-radius: 5px; padding: 6px 8px; cursor: pointer; font-size: 12px; font-weight: 600; }
.year-steps button:hover { border-color: #a43a45; color: #fff; }
.date-range { color: var(--gold); font: 600 13px var(--serif); margin: -2px 0 8px; letter-spacing: .04em; }
.archive-section { grid-column: 1 / -1; margin: 18px 0 0; font: 600 22px var(--serif); color: #cfc6bb; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.archive-section:first-child { margin-top: 0; }
.archive-card.is-remembered { filter: grayscale(.75); opacity: .8; }
.archive-card.is-upcoming { opacity: .5; border-style: dashed; }
.timeline { position: relative; max-width: 860px; padding-left: 4px; }
.tl-row { display: grid; grid-template-columns: 74px 22px 1fr; gap: 0 10px; align-items: start; position: relative; }
.tl-row::before, .tl-now::before { content: ""; position: absolute; left: 84px; top: 0; bottom: 0; width: 2px; background: #2c2a2e; }
.tl-year { text-align: right; font: 600 22px var(--serif); color: #b9a383; padding-top: 12px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; margin: 18px 0 0 6px; background: #4a4448; border: 2px solid #17161a; position: relative; z-index: 1; }
.tl-row.era .tl-dot { background: var(--red-bright); width: 16px; height: 16px; margin: 16px 0 0 4px; box-shadow: 0 0 14px rgba(198,55,67,.5); }
.tl-card { padding: 10px 0 22px; }
.tl-card h3 { margin: 0; font-size: 21px; }
.tl-row.era .tl-card h3 { color: #f1d9db; }
.tl-card p { color: #a29ea2; font: 500 15px/1.55 var(--serif); margin: 6px 0 0; max-width: 620px; white-space: pre-wrap; }
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-badge { font: 700 9px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #d9a441; border: 1px solid #5a4318; border-radius: 10px; padding: 3px 7px; }
.tl-actions { display: flex; gap: 6px; margin-top: 6px; }
.tl-row.future { opacity: .5; }
.tl-row.derived .tl-card { padding: 8px 0 12px; } .tl-row.derived .tl-card span { color: #7d797e; font-size: 13px; }
.tl-row.derived .tl-dot { width: 8px; height: 8px; margin: 18px 0 0 8px; background: #33303a; }
.tl-row.derived .tl-year { font-size: 16px; padding-top: 12px; color: #77706a; }
.tl-now { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px 84px; position: relative; color: #f0e9e0; font: 600 16px var(--serif); }
.tl-now::before { display: none; }
.tl-now i { width: 100%; max-width: 0; }
.tl-now span { background: linear-gradient(90deg, #6b1d26, #3a1219); border: 1px solid var(--red-bright); padding: 8px 16px; border-radius: 20px; margin-left: -14px; position: relative; z-index: 2; }
.tl-now b { font-size: 20px; }
.event-steps { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.event-steps button { border-color: #593038; color: #d8b6ba; white-space: nowrap; }
.year-control { flex-wrap: wrap; justify-content: flex-end; }
.tl-year small { display: block; font: 600 12px var(--sans); color: #8b8388; letter-spacing: .04em; margin-top: 2px; }
.tl-row[draggable=true] { cursor: grab; }
.tl-row.dragging { opacity: .35; }
.tl-row.drop-before::after, .tl-row.drop-after::after { content: ""; position: absolute; left: 94px; right: 0; height: 3px; border-radius: 2px; background: var(--red-bright); z-index: 3; }
.tl-row.drop-before::after { top: -2px; } .tl-row.drop-after::after { bottom: -2px; }
.tl-head .drag-handle { margin-right: -2px; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .year-steps:not(.event-steps) { display: none; } .year-label b, .year-label input { font-size: 22px; } .tl-row { grid-template-columns: 56px 20px 1fr; } .tl-row::before { left: 66px; } .tl-now { margin-left: 66px; } }

/* drag to re-order checklist items */
.story-beat { grid-template-columns: 16px 24px 1fr auto; position: relative; }
.story-beat[draggable=true] { cursor: grab; }
.drag-handle { color: #4d4b50; font-size: 14px; letter-spacing: -3px; user-select: none; }
.story-beat:hover .drag-handle { color: #a8a3a6; }
.story-beat.dragging { opacity: .35; }
.story-beat.drop-before::before, .story-beat.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--red-bright); }
.story-beat.drop-before::before { top: -5px; } .story-beat.drop-after::after { bottom: -5px; }