/* Lake Wequaquet — second edition. One dark world; the sky is the page. */
:root {
  --ink: #e6e2d8;          /* firelit paper */
  --ink-2: #b7b2a6;
  --ink-3: #7d7a72;
  --ember: #e8a24a;
  --ember-2: #c9702a;
  --glass: rgba(12, 14, 24, 0.78);
  --glass-2: rgba(20, 22, 34, 0.9);
  --line: rgba(230, 226, 216, 0.12);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --dock-h: 62px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0c18; color: var(--ink); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0.5em 0; }
.quiet { color: var(--ink-3); font-size: 12px; }
.eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin: 0 0 6px; }
[hidden] { display: none !important; }

#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; cursor: grab; }
#sky:active { cursor: grabbing; }

/* fire, anchored bottom centre. Glow radius/opacity driven by --fire (0..1) */
/* A tight halo around the ring only — the firelight ON THE WATER is drawn by the canvas, and a
   big DOM wash here would sit on top of the lake and grey out every reflection. */
#fireGlow { position: fixed; left: 50%; bottom: 0; width: 58vmax; height: 26vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,140,50, calc(0.34 * var(--fire, .6))) 0%, rgba(255,110,40, calc(0.13 * var(--fire, .6))) 26%, rgba(120,50,20,0) 62%);
  transition: opacity 1.2s; }
#fireArt { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 8px); width: 140px; height: 150px; transform: translateX(-50%) scale(calc(0.55 + 0.6 * var(--fire, .6))); transform-origin: 50% 100%; pointer-events: none; transition: transform 1.5s ease; }
#fireArt svg { width: 100%; height: 100%; }
#camper { position: fixed; left: calc(50% + 96px); bottom: calc(var(--dock-h) + 6px); width: 64px; height: 78px; pointer-events: none; opacity: .96;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 78'><g fill='%23140f0b'><circle cx='27' cy='14' r='10'/><path d='M14 30 q13 -8 26 0 l6 26 q-2 6 -8 6 l-2 -14 l-4 0 l2 14 q-6 4 -12 2 l-3 -16 q-8 -2 -7 -10 z'/><path d='M36 56 q12 -2 22 4 q4 3 2 7 q-10 -4 -22 -1 z'/><path d='M8 60 q10 -6 22 -2 q4 4 1 7 q-12 -2 -22 0 z'/><path d='M0 70 q32 -8 64 0 l0 8 l-64 0 z'/></g></svg>") no-repeat center bottom / contain; }

/* top bar */
#top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; pointer-events: none;
  background: linear-gradient(rgba(6,8,16,.55), rgba(6,8,16,0)); }
.brand { display: flex; flex-direction: column; gap: 2px; }
.place { font-family: var(--serif); font-size: 18px; color: var(--ink); letter-spacing: 0.01em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#top, #fireStatus { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tonight { font-size: 12px; color: var(--ink-2); max-width: 60vw; }
.clock { text-align: right; font-variant-numeric: tabular-nums; }
#clockTime { font-family: var(--serif); font-size: 18px; }
.period { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* dock */
#dock { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; gap: 4px; align-items: stretch;
  background: linear-gradient(rgba(6,8,16,0), rgba(6,8,16,.7) 30%, rgba(6,8,16,.9)); }
#dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 6px 10px; border-radius: 10px; color: var(--ink-2); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
#dock button .ic { font-size: 18px; line-height: 1; filter: saturate(.8); }
#dock button:hover, #dock button.active { color: var(--ink); background: rgba(255,255,255,.05); }
#dock button.active .ic { filter: none; }
#dock button.attn { color: var(--ember); }
#fireStatus { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 2px); transform: translateX(-50%); pointer-events: none; text-align: center; letter-spacing: 0.06em; text-transform: uppercase; }

/* panels — a sheet from the bottom on phones, a side card on wide screens */
.panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; background: var(--glass-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; z-index: 20; }
@media (min-width: 900px) { .panel { left: auto; right: 18px; bottom: calc(var(--dock-h) + 14px); width: 420px; max-height: calc(100vh - var(--dock-h) - 90px); border: 1px solid var(--line); border-radius: 14px; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.panel-head h2 { font-size: 20px; }
.panel-body { overflow-y: auto; padding: 4px 18px 22px; font-size: 14.5px; line-height: 1.5; }
.x { width: 32px; height: 32px; border-radius: 50%; color: var(--ink-2); font-size: 15px; }
.x:hover { background: rgba(255,255,255,.08); color: var(--ink); }

/* fire panel */
.fuel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.fuel button { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.fuel button:hover:not(:disabled) { border-color: var(--ember); }
.fuel button:disabled { opacity: .4; cursor: default; }
.fuel .ic { font-size: 22px; }
.fuel .n { font-family: var(--serif); font-size: 15px; }
.fuel .c { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meter { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin: 6px 0 4px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-2), var(--ember)); transition: width .8s; }

/* forage */
.forage { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.find { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; overflow: hidden; }
.find:hover { border-color: var(--ember); }
.find .ic { font-size: 24px; }
.find .n { font-size: 12.5px; }
.find .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ember); width: 0; }
.find.plant { border-style: dashed; }
.find.busy { pointer-events: none; }
.forage-note { color: var(--ink-3); font-size: 12.5px; margin: 6px 0; }

/* sky panel */
.toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); }
.chip.on { border-color: var(--ember); color: var(--ink); }
.chip:hover { color: var(--ink); }
.list { list-style: none; margin: 8px 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li button { text-align: left; flex: 1; display: flex; justify-content: space-between; align-items: baseline; }
.list li button:hover .n { color: var(--ember); }
.list .n { font-family: var(--serif); font-size: 15px; }
.list .m { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.list .up { color: var(--ink-3); font-size: 12px; }

/* popup (sky object) */
.popup { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.popup-inner { pointer-events: auto; position: relative; width: min(560px, 100vw); max-height: 70vh; overflow-y: auto; margin-bottom: calc(var(--dock-h) + 10px); background: var(--glass-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 16px; }
@media (min-width: 900px) { .popup { align-items: center; } .popup-inner { margin-bottom: 0; } }
.popup .x { position: absolute; top: 8px; right: 8px; }
.popup h2 { font-size: 26px; }
.popup .sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.popup .facts { color: var(--ink-3); font-size: 12px; margin: 8px 0 12px; font-variant-numeric: tabular-nums; }
.popup .desc { font-size: 15px; line-height: 1.55; }
.cultures { display: grid; gap: 8px; margin-top: 12px; }
.culture { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.culture:hover { border-color: var(--ember); }
.culture .k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.culture .t { font-family: var(--serif); font-size: 15px; margin: 2px 0; }
.culture .s { color: var(--ink-2); font-size: 13px; }
.culture .prov { color: var(--ink-3); font-size: 11px; margin-top: 4px; font-style: italic; }
.rowbtn { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--ink); }
.btn:hover { border-color: var(--ember); }
.btn.primary { background: var(--ember); color: #1a1208; border-color: var(--ember); font-weight: 600; }
.btn.primary:hover { background: #f0b060; }
.btn.on { border-color: var(--ember); color: var(--ember); }
.btn:disabled { opacity: .5; cursor: default; }

/* reader */
.reader { position: fixed; inset: 0; z-index: 40; background: rgba(6,8,16,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; }
.reader-inner { position: relative; max-width: 620px; margin: 0 auto; padding: 56px 24px 96px; }
.reader .x { position: fixed; top: 14px; right: 14px; background: rgba(255,255,255,.06); }
.reader .eyebrow { margin-bottom: 10px; }
.reader h2 { font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
.reader .body { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.reader .body p { margin: 0 0 1em; }
.reader .attrib { margin-top: 20px; color: var(--ink-2); font-size: 14px; }
.reader .attrib b { color: var(--ink); font-weight: 500; }
.reader .commentary { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.reader .commentary .eyebrow { color: var(--ink-3); }
.reader .themes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.reader .prov { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; font-style: italic; }
.related { margin-top: 26px; }
.related h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-family: var(--sans); font-weight: 600; }
.related button { display: block; text-align: left; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 16px; }
.related button:hover { color: var(--ember); }
.related .who { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-3); }

/* sprites: wisdom & creatures */
#sprites { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.sprite { position: absolute; pointer-events: auto; cursor: pointer; animation: drift 14s ease-in-out infinite alternate; }
.wisdom-sprite { max-width: 300px; padding: 12px 16px; background: rgba(14,16,28,.72); border: 1px solid rgba(232,162,74,.35); border-radius: 12px; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 40px rgba(232,162,74,.12); opacity: 0; transition: opacity 2s; }
.wisdom-sprite.in { opacity: 1; }
.wisdom-sprite .who { display: block; margin-top: 6px; font-family: var(--sans); font-size: 11.5px; color: var(--ember); letter-spacing: 0.04em; }
.wisdom-sprite:hover { border-color: var(--ember); }
.creature-sprite { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: rgba(10,12,20,.7); border: 1px solid var(--line); border-radius: 12px; opacity: 0; transition: opacity 1.5s; animation: none; }
.creature-sprite.in { opacity: 1; }
.creature-sprite .ic { font-size: 26px; }
.creature-sprite .n { font-family: var(--serif); font-size: 15px; }
.creature-sprite .b { font-size: 12px; color: var(--ink-2); }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .sprite { animation: none; } * { transition-duration: .01ms !important; } }

/* voice */
.voice { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 150px); transform: translateX(-50%); z-index: 15; max-width: 440px; width: calc(100vw - 40px); pointer-events: none; text-align: center; }
.voice-text { display: inline-block; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: #f3e6cf; text-shadow: 0 0 18px rgba(255,150,60,.35), 0 1px 2px rgba(0,0,0,.6); opacity: 0; transition: opacity 1.8s; }
.voice.in .voice-text { opacity: 1; }
.voice.thinking .voice-text { opacity: .55; }

/* reflection */
.reflect { position: fixed; inset: 0; z-index: 45; background: rgba(6,8,16,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; }
.reflect-inner { max-width: 560px; margin: 0 auto; padding: 60px 24px 100px; }
.reflect h2 { font-size: 26px; line-height: 1.25; margin: 10px 0 8px; }
.reflect .ctx { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 16px; margin-bottom: 20px; }
.dim { margin: 18px 0; }
.dim .dn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.dim .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); }
.opt.on { border-color: var(--ember); color: var(--ink); background: rgba(232,162,74,.1); }
.synth { margin-top: 26px; padding: 18px 20px; border-left: 2px solid var(--ember); font-family: var(--serif); font-size: 18px; line-height: 1.55; color: #f3e6cf; min-height: 60px; }
.synth.thinking { color: var(--ink-3); font-style: italic; }
.reflect .actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* journal */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 10px; }
.tabs button { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.tabs button.on { background: rgba(255,255,255,.08); color: var(--ink); }
.entry { padding: 10px 0; border-bottom: 1px solid var(--line); }
.entry .t { font-family: var(--serif); font-size: 15.5px; line-height: 1.45; }
.entry .w { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.entry .a { display: flex; gap: 8px; margin-top: 6px; }
.entry .a button { font-size: 12px; color: var(--ink-3); }
.entry .a button:hover { color: var(--ember); }
.entry .note { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.empty { color: var(--ink-3); font-style: italic; padding: 12px 0; }
.night-h { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); margin: 14px 0 4px; }

/* settings */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row label { font-size: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.seg button.on { background: rgba(232,162,74,.15); color: var(--ink); }
input[type=range] { accent-color: var(--ember); width: 140px; }

/* toast */
.toast { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 13px; z-index: 50; }

/* gate */
.gate { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 120%, rgba(200,100,40,.25), rgba(8,10,20,0) 55%), #090b16; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.gate-inner { max-width: 440px; }
.gate h1 { font-size: 46px; font-weight: 400; letter-spacing: -0.01em; margin: 6px 0 14px; }
.gate-line { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); min-height: 52px; }
.gate-actions { display: flex; gap: 10px; justify-content: center; margin: 22px 0 18px; flex-wrap: wrap; }
.gate-actions button { border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; font-size: 15px; }
.gate-actions button.primary { background: var(--ember); border-color: var(--ember); color: #1a1208; font-weight: 600; }
.gate-actions button:hover { border-color: var(--ember); }
.gate-foot { color: var(--ink-3); font-size: 12.5px; }
.gate.out { opacity: 0; transition: opacity 1.6s; pointer-events: none; }

/* --- tonight: something worth sitting up for --- */
.tonight.special { color: var(--ember); }
.tonight.special::before { content: "✦ "; opacity: .8; }
.night-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.night-item .n { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.night-item .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); margin-bottom: 2px; }
.night-item .l { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.night-item .r { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; font-style: italic; }
.night-item.big .n { font-size: 19px; }

/* --- walking away from the fire --- */
body.walking #sky { filter: brightness(.45) saturate(.6); transition: filter 2.5s; }
body.walking #fireArt, body.walking #camper { opacity: .25; transition: opacity 2.5s; }
body.walking #fireGlow { opacity: .3; }
.walk-view { padding: 6px 0 4px; }
.walk-line { font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); min-height: 50px; transition: opacity .6s; }
.walk-bar { margin-top: 14px; }
.walk-result { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink); }
.find .quiet { font-size: 11.5px; line-height: 1.35; margin-top: 2px; }

/* --- theme explorer --- */
.tag { cursor: pointer; }
.tag:hover { border-color: var(--ember); color: var(--ember); }
.theme-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.theme-head .ic { font-size: 22px; }
.theme-desc { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; }
.theme-group { margin-top: 18px; }
.theme-group h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.theme-group button { display: block; text-align: left; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 15.5px; line-height: 1.4; }
.theme-group button:hover { color: var(--ember); }
.theme-group button .who { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.theme-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.theme-cloud button { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; color: var(--ink-2); }
.theme-cloud button:hover { border-color: var(--ember); color: var(--ink); }
.theme-cloud button .c { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 5px; font-size: 11px; }

/* --- your themes over time --- */
.tt-row { display: grid; grid-template-columns: 92px 1fr 30px; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.tt-row .lbl { color: var(--ink-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row .bar { height: 9px; border-radius: 2px; background: linear-gradient(90deg, var(--ember-2), var(--ember)); min-width: 2px; }
.tt-row .bar.past { background: rgba(230,226,216,.18); }
.tt-row .num { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.tt-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-3); margin: 10px 0 4px; letter-spacing: .06em; text-transform: uppercase; }
.tt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.tt-note { color: var(--ink-3); font-size: 12.5px; font-style: italic; margin-top: 12px; line-height: 1.5; }

/* --- reader auto-scroll --- */
.reader-scroll { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 14px; z-index: 41; }
.reader-scroll .st { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.reader-scroll button { border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); border: 1px solid transparent; }
.reader-scroll button:hover, .reader-scroll button.on { color: var(--ink); border-color: var(--line); }

/* --- note modal --- */
.note-modal { position: fixed; inset: 0; z-index: 60; background: rgba(6,8,16,.75); display: flex; align-items: center; justify-content: center; padding: 24px; }
.note-box { background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(460px, 100%); }
.note-box h3 { font-size: 18px; margin-bottom: 4px; }
.note-box .ctx { color: var(--ink-3); font-size: 12.5px; margin-bottom: 12px; line-height: 1.4; }
.note-box textarea { width: 100%; min-height: 110px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-family: var(--serif); font-size: 15.5px; line-height: 1.5; resize: vertical; }
.note-box textarea:focus { outline: none; border-color: var(--ember); }

/* --- flag this --- */
.quiet-btn { color: var(--ink-3); border-color: transparent; }
.quiet-btn:hover { color: var(--ember); border-color: var(--line); }
.flag-box { display: flex; flex-direction: column; gap: 8px; width: min(380px, 100%); margin-top: 6px; }
.flag-box textarea { width: 100%; min-height: 64px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--ink); font: inherit; font-size: 13.5px; resize: vertical; }
.flag-box textarea:focus { outline: none; border-color: var(--ember); }