/* © 2026 PleasantlyStuck · DEAD LETTER — a fictional phone OS */
:root{
  --glass:#0B0C10; --glass-2:#070810; --amber:#E8A54B; --amber-2:#F2C078; --amber-dim:rgba(232,165,75,.20);
  --ink:#E9E6DE; --ink-soft:#8B8A85; --ink-faint:#5A5B5F;
  --card:#14151B; --line:rgba(255,255,255,.07); --key:#1B1D24; --key-2:#23262f;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --serif:'Spectral',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.2,0,0,1);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* No native text selection / long-press "Look up" inside the game — it's a cheat vector in a word
   puzzle (the OS would hand out definitions) and breaks the phone illusion. Taps still fire clicks,
   so clue-tagging + the on-screen keyboard are unaffected. */
#phone, #phone *{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
#phone img{ -webkit-user-drag:none; user-drag:none; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--sans); background:#000; color:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 8px); }

#phone{ position:relative; width:393px; height:852px; background:var(--glass); overflow:hidden; border-radius:44px;
  box-shadow:0 0 0 10px #050608,0 0 0 12px #191a1f,0 30px 80px rgba(0,0,0,.7); transform-origin:center; flex:0 0 auto; }
/* THE SURGE — a word released back into the world sends an energy discharge THROUGH the phone: a single
   recoil kick + a light sweep passing across + the frame's edges blooming + shockwave rings out. The kick
   animates the independent `translate` property so it composes with the JS `transform:scale(...)` fit. */
/* the phone GLITCHES hard: a jittering translate (composes with the fit scale) + a hard filter flicker (flash/invert) */
@keyframes glitchJitter{ 0%{ translate:0 0; } 8%{ translate:-7px 3px; } 17%{ translate:6px -4px; } 27%{ translate:-9px -2px; } 36%{ translate:8px 4px; }
  46%{ translate:-5px 3px; } 57%{ translate:7px -3px; } 68%{ translate:-6px 2px; } 79%{ translate:4px -3px; } 90%{ translate:-2px 1px; } 100%{ translate:0 0; } }
@keyframes glitchFilter{ 0%{ filter:none; } 12%{ filter:brightness(1.55) contrast(1.35); } 20%{ filter:invert(1) brightness(1.2); } 30%{ filter:brightness(.7) contrast(1.7) hue-rotate(-14deg); }
  44%{ filter:brightness(1.35) contrast(1.15); } 58%{ filter:invert(.18) contrast(1.3); } 72%{ filter:brightness(1.1); } 100%{ filter:none; } }
#phone.pulsing{ animation:glitchJitter .44s steps(2,end), glitchFilter .44s steps(1,end); }
.surge{ position:absolute; inset:0; z-index:85; pointer-events:none; overflow:hidden; border-radius:44px; }   /* ABOVE every gameplay overlay (cinematic 72 · callscreen 79 · coldopen 80) so a recovery glitch can NEVER be occluded — deterministic, not timing-dependent. Below only pause (90) + bootveil (120), which are intentional takeovers. */
/* the screen blooms with the charge */
.sg-flash{ position:absolute; inset:0; opacity:0; animation:sgFlash .5s ease-out forwards;
  background:radial-gradient(62% 46% at 50% 46%, rgba(232,165,75,.34), transparent 72%); }
@keyframes sgFlash{ 0%{ opacity:0; } 16%{ opacity:1; } 100%{ opacity:0; } }
/* a bright band of light travels across — energy passing through the device */
.sg-sweep{ position:absolute; top:-12%; bottom:-12%; width:58%; left:-72%; transform:skewX(-14deg); filter:blur(2px);
  background:linear-gradient(90deg, transparent, rgba(255,214,150,.5) 44%, rgba(255,247,235,.72) 50%, rgba(255,214,150,.5) 56%, transparent);
  animation:sgSweep .62s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sgSweep{ 0%{ left:-72%; opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ left:122%; opacity:0; } }
/* the frame's inner edges light up as the surge passes */
.sg-edge{ position:absolute; inset:0; border-radius:44px; animation:sgEdge .6s ease-out forwards; }
@keyframes sgEdge{ 0%{ box-shadow:inset 0 0 0 2px rgba(232,165,75,0), inset 0 0 0 0 rgba(232,165,75,0); }
  28%{ box-shadow:inset 0 0 2px 2px rgba(232,165,75,.7), inset 0 0 44px 8px rgba(232,165,75,.34); }
  100%{ box-shadow:inset 0 0 0 2px rgba(232,165,75,0), inset 0 0 0 0 rgba(232,165,75,0); } }
/* shockwave rings expand outward — the word going out into the world */
.sg-ring{ position:absolute; left:50%; top:46%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  border:2px solid rgba(232,165,75,.6); opacity:0; animation:sgRing .95s cubic-bezier(.15,.6,.25,1) forwards; }
.sg-ring.r2{ animation-delay:.13s; } .sg-ring.r3{ animation-delay:.26s; }
@keyframes sgRing{ 0%{ transform:scale(.18); opacity:.7; } 100%{ transform:scale(9); opacity:0; } }
/* GLITCH BANDS — horizontal slices that flash and tear sideways (classic signal-glitch) */
.sg-glitch{ position:absolute; left:0; right:0; height:11%; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(255,247,235,.5), rgba(232,165,75,.35) 40%, transparent 80%); animation:sgGlitch .42s steps(1,end); }
.sg-glitch.g1{ top:20%; animation-delay:.02s; } .sg-glitch.g2{ top:50%; animation-delay:.09s; } .sg-glitch.g3{ top:72%; animation-delay:.15s; }
@keyframes sgGlitch{ 0%{ opacity:0; transform:translateX(0); } 22%{ opacity:.95; transform:translateX(-16px); } 42%{ opacity:.15; transform:translateX(12px); }
  62%{ opacity:.8; transform:translateX(-7px); } 100%{ opacity:0; transform:translateX(0); } }
/* SCANLINES flickering over it */
.sg-scan{ position:absolute; inset:0; opacity:0; animation:sgScan .44s steps(1,end);
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
@keyframes sgScan{ 0%{ opacity:0; } 14%{ opacity:1; } 40%{ opacity:.35; } 60%{ opacity:.85; } 100%{ opacity:0; } }
/* reduced motion: keep only a soft bloom — no jitter, sweep, rings, glitch bands, or scanlines */
.surge.still .sg-sweep, .surge.still .sg-ring, .surge.still .sg-glitch, .surge.still .sg-scan{ display:none; }
@media (prefers-reduced-motion: reduce){ #phone.pulsing{ animation:none; } }

/* ---------- status bar (iOS-style) ---------- */
#statusbar{ position:absolute; top:0; left:0; right:0; height:52px; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px 0; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); pointer-events:none; }
#statusbar .sb-time{ font-variant-numeric:tabular-nums; letter-spacing:.2px; }
#statusbar.onlock .sb-time{ visibility:hidden; }   /* the big lockscreen clock stands in */
.sb-right{ display:flex; align-items:center; gap:7px; }
.sb-sos{ font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--ink-soft); }
.sb-sos[hidden]{ display:none; }
.sb-wifi{ display:inline-flex; align-items:center; color:var(--ink); }
.sb-wifi[hidden]{ display:none; }
.sb-wifi svg{ width:17px; height:13px; }
.sb-wifi.dim{ color:var(--ink-faint); animation:wifipulse 1s ease-in-out infinite; }
@keyframes wifipulse{ 50%{ opacity:.4; } }
.sb-sig{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.sb-sig i{ width:3px; background:var(--ink-faint); border-radius:1px; }
.sb-sig.live i{ background:var(--ink); }
/* dead SIM — only the department Wi-Fi ever connects, so the cellular icon carries a permanent ✕ */
.sb-cell{ display:inline-flex; align-items:center; gap:2px; }
.sb-nocell{ font-family:var(--sans); font-size:11px; font-weight:700; line-height:1; color:var(--ink-faint); }
/* during the Wi-Fi handshake the app grid is frozen — taps are inert until the phone joins the network */
#homeGrid.netlock{ pointer-events:none; opacity:.4; filter:saturate(.7); transition:opacity .5s ease; }
.sb-sig i:nth-child(1){ height:4px; } .sb-sig i:nth-child(2){ height:6px; }
.sb-sig i:nth-child(3){ height:8px; } .sb-sig i:nth-child(4){ height:11px; }
.sb-batt{ display:inline-flex; align-items:center; gap:4px; }
.sb-pct{ font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.batt{ width:24px; height:12px; border:1px solid rgba(233,230,222,.5); border-radius:3.5px; position:relative; }
.batt::after{ content:""; position:absolute; right:-3px; top:3.5px; width:2px; height:5px; background:rgba(233,230,222,.5); border-radius:0 1px 1px 0; }
.batt i{ position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:60%; background:var(--ink); border-radius:1.5px; transition:width 1s linear, background .4s; }
.batt i.low{ background:var(--amber); }
/* THE CHARGE — a recovered word floods the phone back to full: the meter glows amber as it climbs */
/* (battery-charging glow removed — the battery is a mortality clock, it only ever drains; the surge is separate dread) */

/* ---------- surfaces ---------- */
.surface{ position:absolute; inset:0; display:none; flex-direction:column; }
.surface.active{ display:flex; }
#app{ padding-top:52px; }   /* clear the persistent status bar */
#app.active{ animation:appopen .28s var(--ease); transform-origin:center 62%; }
@keyframes appopen{ from{ transform:scale(.90); opacity:0; } to{ transform:none; opacity:1; } }
#home.active #homeGrid{ animation:homein .34s var(--ease) both; }
@keyframes homein{ from{ transform:scale(1.06); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- back button (front-end screens) ---------- */
.scr-back{ position:absolute; top:16px; left:14px; z-index:20; background:none; border:none; color:var(--amber); font-size:28px; line-height:1; cursor:pointer; width:38px; height:44px; text-align:left; }
.home-back{ top:56px; opacity:.85; text-shadow:0 1px 6px rgba(0,0,0,.9); }
/* progress bar, right-aligned to balance the chevron — no count, so it never gives away the word total */
.homeprog{ position:absolute; top:66px; right:60px; left:auto; z-index:20; display:flex; align-items:center; gap:7px; pointer-events:none; }
.homeprog .hp-ico{ font-size:12px; color:var(--amber); opacity:.7; text-shadow:0 1px 6px rgba(0,0,0,.9); }
.homeprog .hp-rail{ width:60px; height:3px; border-radius:2px; background:rgba(232,165,75,.16); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.6); }
.homeprog .hp-fill{ display:block; height:100%; background:var(--amber); opacity:.85; border-radius:2px; transition:width .5s var(--ease); }

/* ---------- TITLE MENU ---------- */
#menu{ background:#070810; }
.menu-wall{ position:absolute; inset:0; background:url('wallpaper.png') center/cover no-repeat; opacity:.20; }
.menu-wall::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,16,.66), rgba(7,8,16,.96)); }
.menu-inner{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 34px; text-align:center; }
.menu-mark{ margin-bottom:22px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.menu-title{ font-family:'Archivo Black',var(--sans); font-weight:400; font-size:38px; letter-spacing:5px; margin:0; color:var(--ink); text-shadow:0 2px 18px rgba(0,0,0,.6); padding-left:5px; }
.menu-title span{ color:var(--amber); }
.menu-season{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:5px; text-transform:uppercase; color:var(--amber); margin-top:14px; padding-left:5px; }
.menu-sub{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-soft); margin-top:8px; }
.menu-btns{ margin-top:46px; display:flex; flex-direction:column; gap:12px; width:234px; }
.menu-btn{ height:48px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.4px; cursor:pointer; transition:transform .12s var(--ease),border-color .2s; }
.menu-btn:active{ transform:scale(.98); }
.menu-btn.primary{ background:var(--amber); color:#171009; border-color:var(--amber); box-shadow:0 0 22px rgba(232,165,75,.26); }
.menu-btn[hidden]{ display:none; }
.menu-foot{ position:absolute; bottom:30px; left:0; right:0; text-align:center; z-index:1; font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.foot-link{ color:var(--amber); text-decoration:none; border-bottom:1px solid var(--amber-dim); padding-bottom:1px; cursor:pointer; transition:opacity .15s; }
.foot-link:active{ opacity:.6; }
.foot-link::after{ content:" \2197"; letter-spacing:0; }

/* ---------- CHAPTER MAP ---------- */
#map, #chapters{ background:radial-gradient(120% 90% at 50% 20%, #101118 0%, #06070c 70%); }
.chaplist{ position:absolute; top:70px; left:0; right:0; bottom:0; overflow-y:auto; padding:8px 22px 30px; display:flex; flex-direction:column; gap:12px; }
.chaprow{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer; padding:16px; border-radius:14px;
  background:var(--card); border:1px solid var(--line); transition:transform .12s var(--ease),border-color .2s; }
.chaprow:active{ transform:scale(.99); }
.chaprow:not(.locked):hover{ border-color:var(--amber-dim); }
.chaprow.locked{ opacity:.5; cursor:not-allowed; }
.chap-n{ font-family:'Archivo Black',var(--sans); font-size:20px; color:var(--amber); width:40px; text-align:center; flex:0 0 auto; }
.chap-mid{ flex:1; min-width:0; }
.chap-t{ font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chap-s{ font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.chap-done{ color:var(--amber); font-size:16px; flex:0 0 auto; }
.map-head{ position:absolute; top:24px; left:0; right:0; text-align:center; z-index:15; font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--ink-soft); text-shadow:0 2px 10px #06070c; }
.map-stage{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 52px, #000 96px, #000 92%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, transparent 52px, #000 96px, #000 92%, transparent 100%); }
.map-stage::-webkit-scrollbar{ width:0; height:0; }
#mapView{ position:relative; width:100%; height:2700px; }
.mappath{ position:absolute; left:50%; width:2px; transform:translateX(-50%); background:repeating-linear-gradient(var(--line) 0 5px, transparent 5px 12px); z-index:0; }
/* the trail continues past the frontier, fading into the dark — a shape of "more ahead", never a wall of locks */
.maptrail{ position:absolute; left:50%; transform:translateX(-50%); width:2px; height:160px; z-index:0;
  background:linear-gradient(180deg, rgba(139,138,133,.5), transparent); -webkit-mask-image:repeating-linear-gradient(#000 0 5px, transparent 5px 12px); mask-image:repeating-linear-gradient(#000 0 5px, transparent 5px 12px); opacity:.55; }
.mapnode{ position:absolute; left:50%; transform:translateX(-50%); width:220px; display:flex; flex-direction:column; align-items:center; gap:9px; z-index:1; }
.mapdot{ width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Archivo Black',var(--sans); font-size:17px; border:2px solid var(--line); background:#111218; color:var(--ink-faint); }
.mapnode.done .mapdot{ background:var(--amber); color:#171009; border-color:var(--amber); box-shadow:0 0 22px rgba(232,165,75,.4); }
.mapnode.current .mapdot{ background:rgba(232,165,75,.08); color:var(--amber); border-color:var(--amber); cursor:pointer; animation:copulse 2.4s ease-in-out infinite; }
.mapnode .mlabel{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.mapnode.locked .mlabel{ color:var(--ink-faint); }
.mapnode .msub{ font-family:var(--serif); font-style:italic; font-size:12px; color:var(--ink-soft); }
.mapnode .mstate{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.mapnode.done .mstate{ color:var(--amber); }
.mapnode.current .mstate{ color:var(--amber); }

/* ---------- CASE DESK (resting place) ---------- */
#desk{ background:#08090e; }
.desk-surface{ position:absolute; inset:0; background:radial-gradient(130% 80% at 50% 34%, #15161d 0%, #0a0b10 68%); }
.desk-item{ position:absolute; cursor:pointer; transition:transform .15s var(--ease), opacity .2s; }
.desk-item:active{ transform:scale(.97); }
.desk-item.locked{ opacity:.32; filter:grayscale(.7); cursor:not-allowed; }
.desk-item.locked:active{ transform:none; }
.desk-item.locked .di-tag{ color:var(--ink-faint); }
.di-tag{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.desk-letter{ width:152px; height:112px; top:132px; left:50%; margin-left:-76px; transform:rotate(-4deg); background:linear-gradient(180deg,#e9e3d3,#d0c8b3); border-radius:3px;
  box-shadow:0 12px 26px rgba(0,0,0,.55); }
.desk-letter::before{ content:""; position:absolute; left:16px; right:16px; top:22px; height:1px; box-shadow:0 10px 0 rgba(60,50,35,.18),0 20px 0 rgba(60,50,35,.18),0 30px 0 rgba(60,50,35,.18),0 40px 0 rgba(60,50,35,.18); background:rgba(60,50,35,.18); }
/* plain wax seal — no initial, so it reads as sealed correspondence, not Iris/MOTH */
.desk-letter::after{ content:""; position:absolute; right:12px; bottom:10px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 38% 34%, #9a3a2e, #6f251d 70%); box-shadow:inset 0 1px 2px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.4); }
/* a gentle amber glow when the detective has a new case-note observation waiting */
.desk-letter.has-new{ animation:diNew 2.6s ease-in-out infinite; }
@keyframes diNew{ 0%,100%{ box-shadow:0 0 0 1px rgba(232,165,75,.35), 0 0 12px rgba(232,165,75,.22), 0 10px 24px rgba(0,0,0,.45); } 50%{ box-shadow:0 0 0 1px rgba(232,165,75,.7), 0 0 22px rgba(232,165,75,.5), 0 10px 24px rgba(0,0,0,.45); } }
/* desk-photo removed — the redundant photo shortcut is gone; photos live in the Photos app inside the phone */
.desk-phone{ width:120px; height:232px; bottom:118px; left:50%; margin-left:-60px; border-radius:22px;
  background:linear-gradient(160deg,#1b1d24,#0c0d12); box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 2px #23252d; display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease), opacity .6s var(--ease), filter .7s var(--ease); }
/* NEW-GAME gate: the phone sits out of focus until the case note is read, then it comes into focus (no block, no scold) */
.desk-phone.gated{ filter:blur(5px) brightness(.72); opacity:.6; }
.desk-phone.gated:active{ transform:none; }
@media (prefers-reduced-motion: reduce){ .desk-phone{ transition:opacity .2s, filter .2s; } }
.dp-screen{ width:98px; height:206px; border-radius:15px; background:radial-gradient(circle at 50% 42%, rgba(232,165,75,.10), #050608 70%); display:flex; align-items:center; justify-content:center; animation:copulse 3s ease-in-out infinite; }
.dp-screen svg{ width:30px; height:30px; opacity:.92; }
.desk-hint{ position:absolute; bottom:46px; left:0; right:0; text-align:center; z-index:1; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-soft); }
/* the Case Board thumbnail on the desk — centered in the open middle, framed so it stands out as "tap me" */
.desk-board{ width:122px; height:92px; top:322px; left:50%; margin-left:-61px; transform:rotate(-2deg); border-radius:3px;
  overflow:hidden; border:4px solid #4a3728; box-shadow:0 0 0 1px rgba(232,165,75,.4), 0 14px 30px rgba(0,0,0,.6); }
.desk-board::after{ content:"‹ open ›"; position:absolute; left:0; right:0; bottom:0; text-align:center; padding:3px 0;
  font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--amber); background:linear-gradient(0deg, rgba(10,8,6,.85), transparent); }
.desk-board img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- THE CASE BOARD (hi-fi: world = corkboard/paper/string · chrome = clean software) ---------- */
#board{ background:#0B0C10; }
/* the top bar is SOFTWARE — clean, no texture, so the player always knows what's app vs world */
.board-topbar{ position:absolute; top:0; left:0; right:0; height:58px; z-index:6; display:flex; align-items:center; gap:8px; padding:0 6px;
  background:rgba(23,25,30,.94); border-bottom:1px solid rgba(255,255,255,.06); }
.bt-back,.bt-more{ width:56px; height:56px; background:none; border:none; color:var(--amber); font-size:24px; cursor:pointer; flex:0 0 auto; }
.bt-more{ font-size:22px; color:var(--ink-soft); }
.bt-titles{ flex:1; min-width:0; text-align:center; }
.bt-title{ font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-sub{ font-family:var(--sans); font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.board-wall{ position:absolute; inset:58px 0 0; overflow:hidden;
  background:#2c2013 url('photos/cork1.png') center/cover no-repeat; }
.board-wall::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(135% 100% at 50% 26%, transparent 60%, rgba(0,0,0,.42)); }
.board-wall.rise{ animation:boardrise .55s var(--ease); }
@keyframes boardrise{ from{ opacity:0; transform:scale(1.06); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
/* THE PULSE — a scrawled note pinned to the cork, faint rings escaping it: each recovered word thrown
   back into the world. Steel-blue = the detective's voice (matches the pulse cutscene). */
.board-pulse{ position:absolute; left:3%; top:2.5%; width:40%; max-width:158px; z-index:6; padding:9px 11px 10px;
  background:rgba(11,12,16,.7); border:1px solid var(--line); border-left:2px solid #8FB8D2; border-radius:8px;
  backdrop-filter:blur(4px); transform:rotate(-1.6deg); box-shadow:0 7px 20px rgba(0,0,0,.5); pointer-events:none; overflow:visible; }
.board-pulse::before{ content:""; position:absolute; left:50%; top:-6px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d8695a, #8f3a32); box-shadow:0 2px 3px rgba(0,0,0,.6); }   /* the pin */
.bp-h{ font-family:var(--mono); font-size:8.5px; letter-spacing:2.2px; color:#A9D2EC; }
.bp-c{ font-family:var(--serif); font-size:13px; color:var(--ink); margin-top:2px; }
.bp-n{ font-family:var(--serif); font-style:italic; font-size:10.5px; line-height:1.45; color:var(--ink-faint); margin-top:4px; }
.bp-ring{ position:absolute; left:14px; top:16px; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  border:1.5px solid rgba(143,184,210,.55); pointer-events:none; animation:bpPulse 3s ease-out infinite; }
.bp-ring.d2{ animation-delay:1.5s; }
@keyframes bpPulse{ 0%{ transform:scale(.5); opacity:.55; } 100%{ transform:scale(6); opacity:0; } }
/* pan/zoom viewport: the cork is bigger than the glass. The stage carries all pins; the wall is the frame. */
.board-stage{ position:absolute; inset:0; transform-origin:center center; will-change:transform; }
.board-zoomctl{ position:absolute; right:12px; bottom:16px; z-index:12; display:flex; flex-direction:column; gap:9px; }
.board-zoomctl .bz{ width:40px; height:40px; border-radius:50%; background:rgba(11,12,16,.72); border:1px solid var(--line); color:var(--amber);
  font:400 24px/1 var(--sans); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.45); transition:transform .1s var(--ease), border-color .2s; }
.board-zoomctl .bz:active{ transform:scale(.9); border-color:var(--amber); }
.board-strings{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.bstr{ stroke:#8F3A32; stroke-width:1.8; opacity:.85; }
.bstr.faint{ stroke:#7a6a58; stroke-width:1; stroke-dasharray:3 5; opacity:.4; }
.bstr.draw{ animation:strdraw .8s var(--ease) .3s forwards; }
@keyframes strdraw{ to{ stroke-dashoffset:0; } }
.bstr-tag{ position:absolute; transform:translate(-50%,-50%); z-index:3; font-family:'Caveat',var(--serif); font-style:italic; font-size:12px;
  color:#2a1e14; background:#D9CBA6; padding:1px 6px; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.45); white-space:nowrap; }
.bstr-tag.writing{ animation:tagwrite .4s var(--ease) 1s both; }
@keyframes tagwrite{ from{ opacity:0; transform:translate(-50%,-50%) scale(.85); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.bnode{ position:absolute; transform:translate(-50%,-50%); width:82px; text-align:center; z-index:4; }
.bnode.center{ width:100px; z-index:5; }
.bpolaroid{ position:relative; background:#D9CBA6; padding:5px 5px 8px; border-radius:2px; box-shadow:4px 6px 12px rgba(0,0,0,.5); transform:rotate(-2deg); }
.bnode.center .bpolaroid{ transform:rotate(1deg); box-shadow:5px 7px 16px rgba(0,0,0,.6); }
.bpolaroid::before{ content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f0c26a, #9a6b1e 70%); box-shadow:1px 2px 3px rgba(0,0,0,.6); }
.bface{ height:64px; background:#141210; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bnode.center .bface{ height:78px; }
.bface svg{ width:54%; height:54%; color:#5f574c; }
.bnode.known .bface svg{ color:#8a7c62; }
.bface .bphoto{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.3) contrast(1.05); }
.bnode.vague .bface .bphoto{ filter:grayscale(1) brightness(.72); }
.bface .qmark{ font-family:var(--serif); font-size:30px; color:#B4463D; }
.bnode.blank .bface{ background:#1a1210; }
.bstatus{ font-family:var(--mono); font-size:8px; letter-spacing:.5px; color:#7a5f42; margin-top:3px; text-transform:uppercase; }
.blabel{ font-family:var(--sans); font-size:11px; font-weight:600; color:#f2eee4; margin-top:2px; text-shadow:0 1px 3px rgba(0,0,0,.75); }
.bnode.center .blabel{ font-size:13px; }
.bnode.vague .blabel{ color:#b0a894; }
.bdetail{ font-family:var(--serif); font-style:italic; font-size:9.5px; color:#d8cdb8; margin-top:1px; text-shadow:0 1px 2px rgba(0,0,0,.75); }
/* memory pop — spotlight the recalled card, push the rest of the wall back */
.bnode.focus{ z-index:8; }
.bnode.focus .bpolaroid{ box-shadow:0 0 0 2px var(--amber), 0 0 46px rgba(232,165,75,.4), 6px 10px 22px rgba(0,0,0,.65); animation:nodefocus 1.3s var(--ease) .3s; }
@keyframes nodefocus{ 0%,100%{ transform:rotate(-1deg) scale(1.08); } 45%{ transform:rotate(-1deg) scale(1.16); } }
.board-wall.focusing .bnode:not(.focus){ opacity:.4; filter:saturate(.5); transition:opacity .55s var(--ease), filter .55s var(--ease); }
.board-wall.focusing .bstr:not(.draw){ opacity:.28; transition:opacity .55s var(--ease); }
/* case overview (the ⋮ drawer) — software chrome */
.board-case{ position:absolute; inset:58px 0 0; z-index:7; background:rgba(6,8,12,.72); display:flex; align-items:flex-start; justify-content:center; padding:24px 20px; }
.board-case[hidden]{ display:none; }
.bc-card{ width:100%; max-width:320px; background:#17191E; border:1px solid var(--line); border-radius:14px; padding:20px 18px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.bc-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:2.5px; color:var(--amber); margin-bottom:16px; }
.bc-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.bc-row span{ font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--ink-faint); text-transform:uppercase; }
.bc-row b{ font-family:var(--sans); font-size:13.5px; color:var(--ink); text-align:right; } .bc-row b i{ color:var(--ink-soft); font-style:normal; }
.bc-obj{ font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-soft); margin:14px 0 18px; line-height:1.5; }
.bc-prog{ height:4px; border-radius:2px; background:rgba(232,165,75,.15); overflow:hidden; }
.bc-progbar{ height:100%; background:var(--amber); border-radius:2px; transition:width .5s var(--ease); }
.bc-progtxt{ font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--ink-faint); margin-top:8px; text-align:center; }
.msg-head.tappable{ cursor:pointer; } .msg-head.tappable:active{ opacity:.7; }
@media (prefers-reduced-motion: reduce){ .board-wall.rise{ animation:none; } .bstr.draw{ animation:none; stroke-dashoffset:0 !important; } .bstr-tag.writing{ animation:none; } .bnode.focus .bpolaroid{ animation:none; } }

/* ---------- shared wallpaper ---------- */
.wall{ position:absolute; inset:0; background:url('wallpaper.png') center/cover no-repeat; }
.wall::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,8,12,.72) 0%, rgba(6,8,12,.25) 22%, rgba(6,8,12,.05) 45%, rgba(6,8,12,.35) 88%, rgba(6,8,12,.72) 100%); }

/* ---------- LOCKSCREEN ---------- */
/* the found phone's own lockscreen: two figures on a porch, faces out of frame, her light still on */
#lockscreen .wall{ background-image:url('photos/lockwall.png'); }
#lockscreen .wall::before{ background:linear-gradient(180deg, rgba(6,8,12,.58) 0%, rgba(6,8,12,.12) 24%, rgba(6,8,12,.03) 52%, rgba(6,8,12,.34) 82%, rgba(6,8,12,.82) 100%); }
.lsclock{ position:absolute; top:84px; left:0; right:0; text-align:center; z-index:10; }
.lstime{ font-family:var(--sans); font-weight:300; font-size:72px; letter-spacing:-1px; color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,.7); font-variant-numeric:tabular-nums; }
.lsdate{ font-size:13px; color:var(--ink-soft); letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.lsnote{ position:absolute; left:26px; right:26px; bottom:150px; z-index:10; background:rgba(11,12,16,.6); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.lsnote .from{ font-family:var(--mono); font-size:10px; color:var(--amber); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.lsnote .body{ font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--ink); }
.lspill{ position:absolute; left:26px; right:26px; bottom:92px; z-index:10; height:50px; border:1px solid var(--amber-dim); border-radius:25px;
  background:rgba(11,12,16,.55); backdrop-filter:blur(10px); color:var(--amber); font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.3px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s var(--ease),border-color .2s; }
.lspill:active{ transform:scale(.98); border-color:var(--amber); }
.lspill .lock-ico{ font-size:15px; }

/* ---------- HOME ---------- */
#homeGrid{ position:absolute; top:118px; left:0; right:0; z-index:10; display:grid; grid-template-columns:repeat(4,1fr); gap:18px 4px; padding:0 22px; }
.appicon{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.appicon .tile{ width:62px; height:62px; border-radius:15px; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#20222b 0%,#15161c 55%,#101116 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 .5px rgba(255,255,255,.05), 0 8px 16px rgba(0,0,0,.45);
  transition:transform .13s var(--ease); }
.appicon .tile::after{ content:""; position:absolute; inset:0; border-radius:15px; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%); pointer-events:none; }
.appicon:active .tile{ transform:scale(.88); }
.appicon svg{ width:32px; height:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.appicon .lbl{ font-size:11px; font-weight:500; letter-spacing:.3px; color:var(--ink); text-shadow:0 1px 4px rgba(0,0,0,.9); }
/* discover apps stay hidden until a recovered word reveals them — then they render and DEVELOP in (below) */
/* the break between the found phone's apps and the ones SHE remembered back — a full-width gap + faint hairline */
.appgap{ grid-column:1 / -1; height:1px; margin:8px 14px 10px; border-radius:1px;
  background:linear-gradient(90deg,transparent, rgba(232,165,75,.16) 22%, rgba(232,165,75,.16) 78%, transparent); }
/* a forgotten app DEVELOPS in like a photo — her memory returning, not a level unlocked */
.appicon.developing .tile{ animation:appDevelop 900ms var(--ease) both; }
.appicon.developing .lbl{ animation:appDevelopLbl 900ms var(--ease) both; }
@keyframes appDevelop{ 0%{ opacity:0; transform:scale(.7); filter:blur(7px) brightness(1.7); } 55%{ opacity:1; filter:blur(1.5px) brightness(1.15); } 100%{ opacity:1; transform:scale(1); filter:none; } }
@keyframes appDevelopLbl{ 0%,45%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .appicon.developing .tile,.appicon.developing .lbl{ animation:none; } }
.appicon.quiet .tile{ opacity:.5; }
/* locked apps — her life, sealed to a stranger's face */
.appicon.locked .tile{ opacity:.32; filter:grayscale(.5); }
.appicon.locked .lbl{ opacity:.55; }
.app-lock{ position:absolute; bottom:-3px; right:-3px; font-size:10px; opacity:.8; filter:grayscale(1) brightness(1.4); }
/* face-ID fail overlay — "you are not her" */
#facegate{ position:absolute; inset:0; z-index:78; display:none; align-items:center; justify-content:center;
  background:rgba(4,5,8,.9); backdrop-filter:blur(3px); }
#facegate.on{ display:flex; }
.fg-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.fg-ring{ width:92px; height:92px; border-radius:50%; border:2px solid var(--amber-dim); color:var(--amber);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 0 rgba(232,165,75,.4); animation:fgscan 1.1s ease-in-out infinite; }
.fg-ring svg{ width:44px; height:44px; }
.fg-ring.fail{ border-color:#c0392b; color:#c0392b; animation:none; box-shadow:0 0 18px rgba(192,57,43,.4); }
@keyframes fgscan{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,165,75,.35); } 50%{ box-shadow:0 0 0 10px rgba(232,165,75,0); } }
.fg-app{ font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.fg-msg{ font-family:var(--sans); font-size:14px; color:var(--ink-soft); }
.fg-ring.fail ~ .fg-msg{ color:#d16a5e; }
@media (prefers-reduced-motion: reduce){ .fg-ring{ animation:none; } }
/* a call that rings and stops — you watch UNKNOWN, powerless */
#callscreen{ position:absolute; inset:0; z-index:79; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 80% at 50% 30%, #141518, #08090c 80%); }
#callscreen.on{ display:flex; }
.cs-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:-60px; }
.cs-avatar{ width:96px; height:96px; border-radius:50%; background:linear-gradient(160deg,#2a2c36,#16171d); display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:40px; color:var(--ink-faint); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
#callscreen.ringing .cs-avatar{ animation:csring 1.4s ease-in-out infinite; }
@keyframes csring{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(232,165,75,.35); } 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 14px rgba(232,165,75,0); } }
.cs-name{ font-family:var(--sans); font-weight:600; font-size:22px; color:var(--ink); letter-spacing:1px; }
.cs-sub{ font-family:var(--mono); font-size:12px; letter-spacing:1.5px; color:var(--ink-faint); }
.cs-actions{ display:flex; gap:56px; margin-top:64px; }
.cs-btn{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cs-btn.decline{ background:#c0392b; color:#fff; } .cs-btn.accept{ background:#2e7d32; color:#fff; }
@media (prefers-reduced-motion: reduce){ #callscreen.ringing .cs-avatar{ animation:none; } }
.appicon .badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:8px; background:var(--amber); color:#1a1206;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.homehint{ position:absolute; bottom:96px; left:0; right:0; text-align:center; z-index:10; font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--ink-soft); text-shadow:0 1px 6px rgba(0,0,0,.9); opacity:0; transition:opacity .55s ease; pointer-events:none; }
.homehint.show{ opacity:.92; }
/* ambient dread — cosmetic "words lost tonight" tick (never read by logic) */
.homedecay{ position:absolute; bottom:66px; left:0; right:0; text-align:center; z-index:9; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink-faint); opacity:.7; text-shadow:0 1px 6px rgba(0,0,0,.9); }

/* ---------- app view ---------- */
.appbar{ height:56px; flex:0 0 auto; display:flex; align-items:center; padding:8px 16px 0; gap:8px; z-index:20; }
.appbar button{ background:none; border:none; color:var(--amber); font-size:26px; line-height:1; cursor:pointer; width:30px; text-align:left; }
.appbar span{ font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:.4px; color:var(--ink); }
.appbar .sp{ flex:1; }
#appBody{ flex:1 1 auto; overflow-y:auto; padding:8px 20px 120px; }
.doc{ font-family:var(--serif); font-size:15.5px; line-height:1.62; color:var(--ink); }
.doc .meta{ font-family:var(--sans); font-size:12px; color:var(--ink-soft); margin-bottom:14px; }
.docmeta{ font-family:var(--sans); font-size:12px; color:var(--ink-soft); margin-bottom:14px; }
.clue{ border-bottom:1px dashed rgba(232,165,75,.55); cursor:pointer; transition:color .2s,border-color .2s; }
.clue.tagged{ color:var(--amber); border-bottom:1px solid rgba(232,165,75,.55); }
/* Detective mode: an enrichment clue looks like ordinary text until you find it (then it tags like any clue) */
.clue.enrich{ border-bottom:none; color:inherit; cursor:text; }

/* ---------- Messages (real chat thread) ---------- */
.msg-head{ display:flex; align-items:center; gap:11px; padding:2px 2px 16px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.msg-head .avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(160deg,#2a2c36,#16171d); display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:17px; color:var(--amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.msg-head .who{ display:flex; flex-direction:column; line-height:1.25; }
.msg-head .who b{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); }
.msg-head .who .who-rel{ font-family:var(--mono); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--amber); opacity:.85; margin:2px 0 1px; }
.msg-head .who span{ font-size:11.5px; color:var(--ink-faint); }
/* THE IMPOSSIBLE CHANNEL — the route itself is redacted: a VOID where every human message shows its path. Not a
   spam caption (mundane) — conspicuous absence, read against Nell's clean "Wi-Fi" line. Shown once per contiguous run. */
.msg-nosignal{ align-self:center; display:inline-flex; align-items:center; gap:6px; margin:4px 0 8px; padding:3px 11px; border-radius:5px;
  background:rgba(9,10,12,.55); border:1px solid rgba(120,132,144,.20); font-family:var(--mono); font-size:10px; }
.ns-red{ width:17px; height:8px; border-radius:1px; background:#0b0c0f; box-shadow:inset 0 0 0 1px rgba(120,132,144,.30); }
.ns-mid{ color:var(--ink-faint); opacity:.6; }
.ns-dot{ width:5px; height:5px; border-radius:50%; background:#b0996f; box-shadow:0 0 5px rgba(184,149,102,.55); }   /* legacy marker dot — retained for any older use */
/* the human channel — shown once so the void reads AGAINST it; deliberately quiet, never competing with the bubbles */
.msg-route{ align-self:center; display:inline-flex; align-items:center; gap:5px; margin:4px 0 8px; padding:2px 9px; border-radius:20px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.6px; color:var(--ink-faint); opacity:.7; }
.rt-dot{ width:4px; height:4px; border-radius:50%; background:#6f9a6f; box-shadow:0 0 4px rgba(120,170,120,.5); }
/* THE NETWORK CONVULSES on an impossible arrival — the real Wi-Fi stutters, the dead SIM lights bars it can't have, then reverts */
#statusbar.net-flinch .sb-wifi{ animation:netglitch .78s steps(1,end) both; }
#statusbar.net-flinch .sb-sig i{ background:var(--ink); }
#statusbar.net-flinch .sb-nocell{ opacity:0; transition:opacity .09s; }
@keyframes netglitch{ 0%{opacity:1} 12%{opacity:.14} 24%{opacity:1; transform:translateX(.5px)} 40%{opacity:.4; transform:translateX(-.5px)} 55%{opacity:1; transform:none} 70%{opacity:.1} 85%{opacity:.9} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce){ #statusbar.net-flinch .sb-wifi{ animation-duration:.2s } }

/* HIDDEN MEMORIES — the tender Easter egg. Warm, blooming, dismissible; deliberately NOTHING like the dread cues
   (no silence, no glitch, no blank route) — this is her life, not the case. */
#memview{ position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:26px; background:rgba(12,10,6,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#memview.on{ display:flex; animation:memfade .5s ease both; }
@keyframes memfade{ from{opacity:0} to{opacity:1} }
.mem-card{ max-width:322px; background:linear-gradient(180deg,#241d12,#1a150c); border:1px solid rgba(232,165,75,.34); border-radius:14px; padding:20px 20px 15px; box-shadow:0 18px 50px rgba(0,0,0,.5); animation:membloom .6s var(--ease,ease) both; }
@keyframes membloom{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
.mem-kind{ font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:#c79a5a; margin-bottom:11px; }
.mem-body{ font-family:var(--sans,-apple-system,sans-serif); font-size:15px; line-height:1.62; color:#efe6d4; }
.mem-foot{ margin-top:15px; font-family:var(--mono,ui-monospace,monospace); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:#8a7c60; text-align:right; }
.pv-stage img.mem-hint{ transition:transform .35s ease, filter .35s ease; transform:scale(.985); filter:brightness(.9); }
.thread{ display:flex; flex-direction:column; gap:4px; }
.bubble{ max-width:80%; padding:9px 14px; border-radius:19px; font-family:var(--sans); font-size:15px; line-height:1.42; }
.bubble.in{ align-self:flex-start; background:#26262c; color:var(--ink); border-bottom-left-radius:6px; }
.bubble.pop{ animation:bpop .32s var(--ease) both; }
@keyframes bpop{ from{ transform:translateY(8px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.bubble + .bubble.in{ border-top-left-radius:6px; }
.bubble .clue{ border-bottom-color:rgba(232,165,75,.6); }
.stamp{ align-self:flex-start; font-size:10.5px; color:var(--ink-faint); margin:5px 0 2px 6px; letter-spacing:.2px; }

/* a locked row inside an app (e.g. DRAFTS in Mail) */
.lockrow{ margin-top:20px; display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px dashed var(--amber-dim); border-radius:14px;
  background:rgba(232,165,75,.05); cursor:pointer; transition:transform .12s var(--ease),border-color .2s; }
.lockrow:active{ transform:scale(.99); }
.lockrow.open{ border-style:solid; border-color:var(--line); background:rgba(255,255,255,.02); cursor:default; }
.lockrow .lk{ font-size:18px; color:var(--amber); }
.lockrow .lktxt{ flex:1; }
.lockrow .lktxt b{ display:block; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.lockrow .lktxt small{ font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--ink-soft); }

/* ---------- LOCK SHEET (the SOLVE surface) ---------- */
#locksheet{ position:absolute; inset:0; z-index:50; display:none; flex-direction:column; background:rgba(5,6,9,.86); backdrop-filter:blur(14px); }
#locksheet.on{ display:flex; animation:sheetup .34s var(--ease); }
@keyframes sheetup{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.ls-top{ flex:1 1 auto; overflow-y:auto; padding:66px 26px 8px; }
.ls-close{ position:absolute; top:58px; right:20px; z-index:2; background:none; border:none; color:var(--ink-soft); font-size:24px; cursor:pointer; }
.ls-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
.defcard{ font-family:var(--serif); color:var(--ink); }
.defcard .head{ font-size:26px; letter-spacing:1px; margin-bottom:4px; color:var(--ink); }
.defcard .pos{ font-style:italic; color:var(--ink-soft); font-size:15px; }
.defcard .def{ font-size:17px; line-height:1.6; margin-top:12px; color:#D9D5CB; }
.defcard .also{ display:block; margin-top:8px; color:var(--ink-soft); font-style:italic; }
.acr-note{ font-family:var(--serif); font-size:16px; line-height:1.6; color:#D9D5CB; }
.acr-note em{ color:var(--amber); font-style:italic; }
.locknote{ margin-top:14px; font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-faint); }

/* attach chips */
.attachbar{ margin-top:20px; }
.attachbar .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--sans); font-size:12px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:7px 12px; cursor:pointer; transition:transform .12s var(--ease),border-color .2s,color .2s; }
.chip:active{ transform:scale(.96); }
.chip.ok{ border-color:var(--amber); color:var(--amber); }
.chip.ok::before{ content:"✓ "; }
.chip.no{ animation:shake .4s; }

/* hint ladder */
.hintwrap{ margin-top:22px; }
.hint{ font-family:var(--serif); font-size:14px; color:var(--amber-2); line-height:1.5; padding:8px 0; border-top:1px dashed var(--amber-dim); }
.hint .tier{ font-family:var(--mono); font-size:9px; color:var(--ink-faint); letter-spacing:1px; display:block; }
.hintbtn{ margin-top:14px; background:none; border:1px solid var(--line); color:var(--ink-soft); font-family:var(--sans); font-size:12.5px;
  padding:8px 14px; border-radius:20px; cursor:pointer; }
.hintbtn:disabled{ opacity:.4; cursor:default; }

/* answer line + keyboard */
.ls-bottom{ flex:0 0 auto; padding:0 5px 16px; }
.answerline{ display:flex; align-items:center; justify-content:center; gap:2px; min-height:56px; margin:6px 0 14px; }
.answerline.shake{ animation:shake .45s; }
.aslot{ font-family:var(--mono); font-size:30px; font-weight:500; letter-spacing:2px; color:var(--ink); min-width:22px; text-align:center; }
.ascaret{ width:2px; height:32px; background:var(--amber); animation:blink 1s step-end infinite; }
.answerline.solved .aslot{ color:var(--amber-2); text-shadow:0 0 18px rgba(232,165,75,.5); transition:color .4s,text-shadow .4s; }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-8px);} 40%{ transform:translateX(7px);} 60%{ transform:translateX(-5px);} 80%{ transform:translateX(3px);} }
.kbd{ display:flex; flex-direction:column; gap:8px; }
.kbrow{ display:flex; justify-content:center; gap:4px; }
.key{ flex:1 1 0; max-width:37px; height:50px; border-radius:8px; background:var(--key); border:none; color:var(--ink); font-family:var(--sans);
  font-size:19px; font-weight:500; cursor:pointer; transition:background .1s, transform .06s; }
.key:active{ background:var(--key-2); transform:translateY(1px); }
.kbrow.act{ gap:8px; }
.key.wide{ max-width:none; flex:1.6; }
.kbrow.act .key.enter{ flex:0 0 60%; max-width:60%; }   /* the sole action key sits centred at ~60% width, not full-span */
.key.enter{ background:var(--amber); color:#1a1206; font-weight:700; letter-spacing:.5px; }
.key.enter:disabled{ opacity:.4; background:var(--key); color:var(--ink-faint); }
.key.del{ background:var(--key-2); }

/* ---------- TILE BAG (construction locks: build the word from her scattered letters) ---------- */
.tilewrap{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:4px; }
.tileslots{ display:flex; flex-wrap:nowrap; justify-content:center; gap:5px; min-height:52px; width:100%; }
.tileslots.reject{ animation:shake .42s; }
.tileslots.nearmiss{ animation:tnudge .5s; }
.tileslots.solved .tile.placed{ border-color:var(--amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 16px rgba(232,165,75,.55); transition:box-shadow .4s,border-color .4s; }
.tslot{ width:40px; height:48px; border-radius:9px; border:1.5px dashed var(--line);
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.02); }
.tslot.filled{ border-style:solid; border-color:var(--amber-dim); cursor:pointer; }
.tile{ width:40px; height:48px; border-radius:7px; border:1px solid #b09769;
  background:linear-gradient(#EAE2CB,#DACEAF); color:#2b2317; font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:.3px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
  transition:transform .12s var(--ease),box-shadow .18s,border-color .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 3px rgba(120,95,50,.28), 0 3px 4px rgba(0,0,0,.5); }
.tile:active{ transform:scale(.93) translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.5); }
.tile.placed{ cursor:default; width:100%; height:100%; }
.tile.placed.settle{ animation:tsettle .26s var(--ease); }
@keyframes tsettle{ 0%{ transform:scale(1.28); } 55%{ transform:scale(.9); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .tile.placed.settle{ animation:none; } }
/* KAAN midpoint — the signature assembly */
#kaanview{ position:absolute; inset:0; background:#0C0B0A; z-index:60; display:none; align-items:center; justify-content:center; }
#kaanview.on{ display:flex; }
.kaan-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 26px; text-align:center; }
.kaan-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); }
.kaan-msg{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); max-width:300px; line-height:1.5; }
.kaan-hint{ font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--ink-faint); }
.kaan-tray{ display:flex; gap:12px; justify-content:center; }
#kaanSlots{ gap:8px; }
/* the false CALCULATOR (disguised vault) */
.calc-head{ padding:4px 4px 8px; }
.calc-disp{ font-family:var(--mono); font-size:32px; text-align:right; color:var(--ink); padding:16px 12px; background:var(--key); border-radius:12px; margin-bottom:10px; }
.calc-pad{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; opacity:.45; pointer-events:none; }
.calc-key{ height:40px; border-radius:9px; background:var(--key-2); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:17px; color:var(--ink-soft); }
.calc-key.op{ color:var(--amber); }
.calc-reveal{ margin:16px 2px 6px; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--amber-2); text-align:center; }
/* THE BOARD — dead-man's switch / whiteboard with the STET stego */
.board-wrap{ padding:8px 4px; }
.board-head{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:14px; text-align:center; margin-bottom:16px; }
.board-notes{ display:flex; flex-direction:column; gap:12px; }
.board-note{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; font-family:var(--serif); font-size:14px; color:var(--ink); box-shadow:0 3px 7px rgba(0,0,0,.45); }
.board-note:nth-child(odd){ transform:rotate(-.6deg); }
.board-note:nth-child(even){ transform:rotate(.7deg); }
.board-first{ font-weight:700; }
.board-first.lit{ color:var(--amber); text-shadow:0 0 10px rgba(232,165,75,.5); }
.board-hint{ margin-top:18px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:1px; }
.board-reveal{ margin-top:20px; padding:14px; border:1px solid var(--amber-dim); border-radius:10px; background:rgba(232,165,75,.06); font-family:var(--serif); font-style:italic; font-size:14px; color:var(--amber-2); line-height:1.5; }
.board-reveal b{ color:var(--amber); letter-spacing:3px; }
/* CUTAWAYS — full-bleed self-erasing scenes, one voice per type */
#cutaway{ position:absolute; inset:0; background:#0B0C10; z-index:70; display:none; align-items:center; justify-content:center; padding:0 32px; opacity:0; transition:opacity .5s ease; }
#cutaway.on{ display:flex; opacity:1; }
#cutaway.out{ opacity:0; }
.cut-text{ font-family:var(--mono); font-size:17px; line-height:1.7; color:var(--ink); text-align:center; min-height:2.4em; white-space:pre-wrap; }
.cut-skip{ position:absolute; bottom:38px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--ink-faint); opacity:.5; }
.cutaway.memory{ background:#141009; } .cutaway.memory .cut-text{ color:#e7d7bd; font-family:var(--serif); font-style:italic; letter-spacing:.2px; }
.cutaway.ghost{ background:#07090a; } .cutaway.ghost .cut-text{ color:#8ea0a8; letter-spacing:3px; font-size:15px; }
.cutaway.intercept .cut-text{ color:var(--amber-2); }
.cutaway.interruption{ background:#100c0a; } .cutaway.interruption .cut-text{ color:#d8cfc4; font-family:var(--serif); font-style:italic; }
@media (prefers-reduced-motion: reduce){ #cutaway{ transition:opacity .3s; } }
/* THE CINEMATIC SOLVE — scene delivers the meaning, tiles pour on the SAME surface, the word completes the scene.
   Tier D is warm (a draft finishing itself in her hand); the seam between watching and solving is gone. */
/* MEMORY BEAT — a clue that jogs her surfaces as a quiet card over whatever you're reading, before the phone cuts to home */
.memflash{ position:absolute; inset:0; z-index:71; display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,13,.74); backdrop-filter:blur(2px); opacity:0; transition:opacity .38s ease; pointer-events:none; }
.memflash.on{ opacity:1; } .memflash.out{ opacity:0; }
.mf-card{ text-align:center; transform:translateY(8px) scale(.98); transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.memflash.on .mf-card{ transform:none; }
.mf-glyph{ font-size:26px; color:var(--amber-2); margin-bottom:10px; filter:drop-shadow(0 0 10px rgba(242,192,120,.5)); animation:mfpulse 1.8s ease-in-out infinite; }
.mf-txt{ font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:.3px; color:#e7d7bd; }
@keyframes mfpulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .mf-glyph{ animation:none; } .mf-card{ transition:none; } }
#cinematic{ position:absolute; inset:0; z-index:72; display:none; flex-direction:column; opacity:0; transition:opacity .55s ease;
  background:radial-gradient(120% 80% at 50% 8%, #1b140b 0%, #140f09 42%, #0d0a07 100%); }
#cinematic::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% -6%, transparent 52%, rgba(0,0,0,.55) 100%); }
#cinematic.on{ display:flex; opacity:1; }
#cinematic.out{ opacity:0; }
#cinematic.tier-b{ background:radial-gradient(120% 80% at 50% 8%, #131720 0%, #0d1016 45%, #08090d 100%); }
.cin-scene{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:44px 34px 14px; position:relative; z-index:1; overflow-y:auto; }
/* while the bag is out, the letter keeps its lines but shrinks to the top so the tiles have room */
#cinematic.solving .cin-scene{ flex:0 0 auto; max-height:42%; align-items:flex-start; padding-top:34px; }
.cin-text{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.8; color:#e7d7bd; text-align:center; white-space:pre-wrap; min-height:2.6em; }
#cinematic.solving .cin-text{ font-size:15.5px; line-height:1.7; opacity:.82; }
.tier-b .cin-text{ font-family:var(--mono); font-style:normal; font-size:16px; color:var(--ink); letter-spacing:.3px; }
.cin-text.complete{ display:flex; flex-direction:column; gap:7px; white-space:normal; }
.cin-cline{ }
.cin-text .cw{ font-style:normal; white-space:nowrap; color:var(--amber-2); }
/* the investigative beats are the DETECTIVE's voice — steel-blue, like the case-notes (vs Iris's warm amber) */
#cinematic.voice-detective .cin-text{ color:#AEB8C0; }
#cinematic.voice-detective .cin-text .cw{ color:#A9D2EC; }
.cin-text .cw .ch{ display:inline-block; }
.cin-solve{ flex:1 1 auto; display:none; flex-direction:column; justify-content:flex-start; padding:2px 16px 22px; position:relative; z-index:1; opacity:0; transition:opacity .5s ease; }
.cin-solve.on{ display:flex; opacity:1; }
.cin-solve.fade{ opacity:0; }
.cin-skip{ position:absolute; bottom:26px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--ink-faint); opacity:.5; cursor:pointer; z-index:2; }
.cin-close{ position:absolute; top:50px; left:16px; z-index:6; background:none; border:none; color:var(--amber); font-size:28px; line-height:1; cursor:pointer; opacity:.72; padding:4px 10px; }
.cin-close:active{ opacity:1; }
/* Tier C — THE RESCUE: colder ground, a clock of dread while the word is deleted out from under you */
#cinematic.tier-c{ background:radial-gradient(120% 80% at 50% 8%, #17110d 0%, #100c0a 45%, #080606 100%); }
.cin-clock{ display:none; flex:0 0 auto; padding:2px 22px 8px; position:relative; z-index:1; }
.cin-clock.on{ display:block; }
.cin-clock-txt{ font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#c66; opacity:.75; text-align:center; margin-bottom:6px; }
.cin-clock-rail{ height:3px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
.cin-clock-bar{ height:100%; width:100%; background:linear-gradient(90deg,#7a2d2d,#c0392b); box-shadow:0 0 8px rgba(192,57,43,.6); }
@media (prefers-reduced-motion: reduce){ #cinematic,.cin-solve{ transition:opacity .3s; } .cin-clock-bar{ transition:none !important; } }
/* INTERCEPTS log — the cutaways she kept a copy of */
.intlist{ display:flex; flex-direction:column; gap:12px; padding:6px 2px; }
.intcard{ border:1px solid var(--line); border-left:3px solid var(--amber-dim); border-radius:0 8px 8px 0; padding:12px 14px; background:var(--card); }
.intcard .int-tag{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--amber); margin-bottom:6px; }
.intcard .int-body{ font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink-soft); }
.intcard.memory{ border-left-color:#c8a86a; } .intcard.memory .int-body{ font-family:var(--serif); font-style:italic; }
.intcard.ghost .int-body{ letter-spacing:1px; }
.tileboard{ position:relative; width:100%; height:172px; margin-top:2px; overflow:hidden; touch-action:none; }
.tile.board{ position:absolute; left:0; top:0; margin:0; transition:none; will-change:transform; touch-action:none; }
.tile.board.drag{ z-index:20; box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 10px 18px rgba(0,0,0,.6); }
.tslot.hi{ border-style:solid; border-color:var(--amber); background:rgba(232,165,75,.12); }
.tilemsg{ min-height:18px; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-soft);
  text-align:center; opacity:0; transition:opacity .3s; }
.tilemsg.show{ opacity:.95; }
.tilerecover{ margin-top:2px; height:44px; padding:0 40px; border-radius:10px; border:none;
  background:var(--amber); color:#1a1206; font-family:var(--sans); font-weight:800; letter-spacing:.6px; cursor:pointer; }
.tilerecover:disabled{ opacity:.4; background:var(--key); color:var(--ink-faint); cursor:default; }
@keyframes tnudge{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@media (prefers-reduced-motion: reduce){ .tile{ transition:none; } .tileslots.reject,.tileslots.nearmiss{ animation:none; } }

/* ---------- PHOTOS (gallery + full viewer + glint hotspot) ---------- */
.photogrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; }
.photocell{ position:relative; padding:0; border:none; background:#0d0e12; aspect-ratio:1/1; overflow:hidden; cursor:pointer; border-radius:3px; }
.photocell img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:transform .3s var(--ease),opacity .2s; }
.photocell:active img{ transform:scale(.97); }
#photoview{ position:absolute; inset:0; z-index:52; display:none; flex-direction:column; background:#000; }
#photoview.on{ display:flex; animation:sheetup .3s var(--ease); }
.pv-bar{ height:52px; flex:0 0 auto; display:flex; align-items:center; padding:14px 18px 0; }
.pv-bar button{ background:none; border:none; color:var(--amber); font-size:24px; cursor:pointer; }
.pv-stage{ flex:1 1 auto; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pv-stage img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
#pvGlint{ position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; cursor:pointer; display:none;
  background:radial-gradient(circle, rgba(232,165,75,.95) 0%, rgba(232,165,75,.35) 40%, transparent 70%);
  box-shadow:0 0 14px 4px rgba(232,165,75,.5); animation:glint 1.8s ease-in-out infinite; }
@keyframes glint{ 0%,100%{ transform:scale(.7); opacity:.55; } 50%{ transform:scale(1.15); opacity:1; } }
#pvGlint.done{ animation:none; background:radial-gradient(circle, rgba(232,165,75,.5), transparent 70%); cursor:default; }
/* a photo caption is the investigator's gloss on her things (their READING, not her writing) — steel-blue, matching the case notes; her own words stay amber */
.pv-cap{ flex:0 0 auto; padding:16px 22px 30px; font-family:var(--serif); font-style:italic; font-size:14px; color:#AEB8C0; text-align:center; }

/* ---------- LEXICON (the die / re-ink showcase) ---------- */
.lexhead{ font-family:var(--serif); font-size:22px; color:var(--ink); margin:2px 0 2px; }
.lexsub{ font-family:var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; }
.lexcard{ background:linear-gradient(180deg,#101118,#0b0c11); border:1px solid var(--line); border-radius:18px; padding:24px 20px; }
.lexline{ font-family:var(--serif); font-size:19px; line-height:1.75; color:#CFCABF; }
.lexword{ color:var(--ink); white-space:nowrap; }
.lexword .ch{ display:inline-block; }
.lexword.dying .ch{ animation:candleout .9s var(--ease) forwards; }
@keyframes candleout{
  0%{ opacity:1; filter:none; transform:translateY(0); color:var(--ink); }
  35%{ opacity:1; color:var(--amber-2); text-shadow:0 0 12px rgba(232,165,75,.7); }   /* the flare before it snuffs */
  100%{ opacity:0; filter:blur(3px); transform:translateY(-7px) scale(.9); }
}
.lexword.gone{ color:transparent; border-bottom:1px solid var(--ink-faint); padding-bottom:1px; }
.lexword.reink .ch{ opacity:0; animation:reink .62s var(--ease) forwards; }
@keyframes reink{
  0%{ opacity:0; filter:blur(5px); transform:translateY(5px); color:var(--amber-2); text-shadow:0 0 16px rgba(232,165,75,.8); }
  55%{ opacity:1; filter:blur(0); transform:translateY(0); color:var(--amber-2); text-shadow:0 0 10px rgba(232,165,75,.5); }
  100%{ opacity:1; color:var(--ink); text-shadow:none; }
}
/* ambient word-death in flavor text — a word dies as you read it, leaving a scar */
.erode{ display:inline-block; }
.erode.dying{ animation:candleout .94s var(--ease) forwards; }
.erode.scar{ color:var(--ink-faint); opacity:.5; letter-spacing:2px; }
.lexcaption{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-soft); margin-top:14px; }
.lexbtn{ margin-top:22px; width:100%; height:46px; border-radius:12px; border:1px solid var(--amber-dim); background:rgba(232,165,75,.06);
  color:var(--amber); font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.3px; cursor:pointer; transition:transform .12s var(--ease),border-color .2s; }
.lexbtn:active{ transform:scale(.98); border-color:var(--amber); }

/* gate arming */
.gate-explain{ margin-top:14px; font-family:var(--serif); font-style:italic; font-size:13.5px; line-height:1.55; color:var(--ink-soft); text-align:center; }
.gatebar{ margin-top:12px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); border:1px dashed var(--amber-dim); border-radius:10px; padding:11px 12px; text-align:center; transition:color .2s,border-color .2s; }
.gatebar.armed{ color:var(--amber); border-style:solid; }

/* MAIL / DRAFTS — each message a distinct card, like a real mail app */
.itemcard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 16px; margin-bottom:14px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.itemcard .docmeta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--amber); border-bottom:1px solid var(--line); padding-bottom:9px; margin-bottom:11px; }
.itemcard .entryrow{ margin-top:14px; }

/* MESSAGES — a contact list you tap into (not one long dump) */
.msglist{ display:flex; flex-direction:column; }
.msgrow{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 4px; background:none; border:none; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; }
.msgrow:active{ opacity:.6; }
.msgrow .avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; background:linear-gradient(160deg,#2a2c36,#16171d); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:600; font-size:17px; color:var(--amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.mr-mid{ flex:1; min-width:0; }
.mr-name{ font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-from{ font-family:var(--mono); font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-snip{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.msgrow.unread .mr-snip{ color:var(--ink); }
.mr-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); flex:0 0 auto; }
.thread-back{ background:none; border:none; color:var(--amber); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; padding:0 0 14px; }
.msg-compose{ display:flex; align-items:center; gap:9px; margin-top:22px; opacity:.65; }
.mc-field{ flex:1; border:1px solid var(--line); border-radius:20px; padding:10px 15px; font-family:var(--sans); font-size:12.5px; color:var(--ink-faint); background:rgba(255,255,255,.02); }
.mc-send{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--key-2); color:var(--ink-faint); font-size:15px; position:relative; }
.mc-send::after{ content:""; position:absolute; left:5px; right:5px; top:50%; height:1.5px; background:var(--ink-faint); transform:rotate(-45deg); }

/* anagram tiles */
.ana-src{ display:flex; justify-content:center; gap:6px; margin:6px 0 12px; }
.ana-t{ font-family:var(--mono); font-size:23px; font-weight:600; color:var(--amber-2); width:30px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(232,165,75,.08); border:1px solid var(--amber-dim); border-radius:6px; }

/* entry row (recover / open) */
.entryrow{ margin-top:16px; display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--amber-dim); border-radius:12px; background:rgba(232,165,75,.06); cursor:pointer; transition:transform .12s var(--ease),border-color .2s; }
.entryrow:active{ transform:scale(.99); }
.entryrow:hover{ border-color:var(--amber); }
.entryrow .er-ico{ color:var(--amber); font-size:15px; }
.entryrow .er-txt{ flex:1; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.6px; color:var(--amber); text-transform:uppercase; }
.entryrow .er-go{ color:var(--amber); font-size:18px; }

/* ROOT terminal */
.rootwrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.root-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#0c0e14; border-bottom:1px solid var(--line); }
.root-dot{ width:9px; height:9px; border-radius:50%; background:#2a2d36; }
.root-name{ margin-left:8px; font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--ink-faint); }
.rootdoc{ font-family:var(--mono); font-size:13px; line-height:1.75; color:#7CCF9A; background:#05060a; padding:16px; white-space:pre-wrap; }
.root-prompt{ color:#5f7f6c; }
.root-null{ color:var(--amber); text-shadow:0 0 10px rgba(232,165,75,.35); }
.root-caret{ color:#7CCF9A; animation:cocaret 1s step-end infinite; }
.rootdoc .clue{ color:#7CCF9A; border-bottom:1px dashed rgba(124,207,154,.6); }
.rootdoc .clue.tagged{ color:#9be0b6; }

/* Chapter Complete */
#chapterdone{ position:absolute; inset:0; z-index:62; display:none; background:radial-gradient(120% 90% at 50% 12%, #14151c, #06070c 70%); }
#chapterdone.on{ display:flex; animation:sheetup .45s var(--ease); }
.cd-inner{ margin:auto; width:100%; padding:60px 30px 40px; text-align:center; }
.cd-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:2.5px; color:var(--amber); }
.cd-title{ font-family:'Archivo Black',var(--sans); font-weight:400; font-size:30px; color:var(--ink); margin:10px 0 18px; }
.cd-line{ font-family:var(--serif); font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:300px; margin:0 auto 28px; }
.cd-stats{ display:flex; justify-content:center; gap:14px; margin-bottom:28px; }
.cd-stat{ flex:1; max-width:96px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 6px; }
.cd-stat b{ display:block; font-family:var(--sans); font-size:19px; color:var(--amber); font-variant-numeric:tabular-nums; }
.cd-stat span{ font-family:var(--mono); font-size:8.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-faint); }
.cd-tbc{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-soft); margin-bottom:26px; }
.cd-share{ width:100%; height:46px; margin-bottom:12px; border-radius:12px; border:1px solid var(--amber-dim); background:rgba(232,165,75,.06);
  color:var(--amber); font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.3px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .12s var(--ease),border-color .2s; }
.cd-share:active{ transform:scale(.98); }
.cd-share:hover{ border-color:var(--amber); }
.cd-share svg{ width:17px; height:17px; }

/* CASE FILE (Gate 2 reward) */
#casefileview{ position:absolute; inset:0; z-index:60; display:none; background:radial-gradient(120% 90% at 50% 15%, #14151c, #06070c 70%); }
#casefileview.on{ display:flex; animation:sheetup .4s var(--ease); }
.cf-inner{ margin:auto; width:100%; padding:64px 28px 40px; overflow-y:auto; max-height:100%; }
.cf-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:2.5px; color:var(--amber); text-align:center; }
.cf-title{ font-family:'Archivo Black',var(--sans); font-weight:400; font-size:26px; color:var(--ink); text-align:center; margin:8px 0 24px; }
.cf-list{ display:flex; flex-direction:column; gap:12px; }
.cf-person{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; position:relative; }
.cf-person b{ font-family:var(--sans); font-size:15px; color:var(--ink); }
.cf-person div{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-top:5px; }
.cf-person.lead{ border-color:var(--amber); box-shadow:0 0 18px rgba(232,165,75,.14); }
.cf-flag{ position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:#171009; background:var(--amber); padding:3px 7px; border-radius:5px; }
.cf-go{ margin-top:26px; width:100%; height:48px; border-radius:12px; border:none; background:var(--amber); color:#171009; font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.5px; cursor:pointer; }
.cf-go:active{ transform:scale(.98); }

/* ---------- casebook ---------- */
#casebook{ position:absolute; left:0; right:0; bottom:0; z-index:45; }
#cbHandle{ display:block; width:100%; height:46px; border:none; background:linear-gradient(0deg, rgba(6,8,12,.92), rgba(6,8,12,.4));
  color:var(--amber); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.4px; cursor:pointer; }
#cbHandle b{ color:var(--ink); }
#cbDrawer{ max-height:0; overflow:hidden; background:var(--glass-2); box-shadow:0 -8px 30px rgba(0,0,0,.6); transition:max-height .3s var(--ease); }
#casebook.open #cbDrawer{ max-height:360px; }
#cbList{ padding:8px 16px 26px; display:flex; flex-direction:column; gap:8px; }
.cbcard{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.cbcard .src{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.5px; text-transform:uppercase; }
.cbcard .snip{ font-family:var(--sans); font-size:13px; color:var(--ink); margin-top:3px; }
.cbempty{ color:var(--ink-faint); font-size:13px; text-align:center; padding:18px; font-style:italic; font-family:var(--serif); }
.cbmode{ margin-top:10px; width:100%; background:none; border:1px solid var(--amber-dim); color:var(--ink-soft); font-family:var(--sans);
  font-size:11.5px; letter-spacing:.4px; padding:9px; border-radius:9px; cursor:pointer; transition:color .2s,border-color .2s; }
.cbmode b{ color:var(--amber); }
.cbmode:hover{ border-color:var(--amber); }
.cbreset{ margin-top:6px; width:100%; background:none; border:1px solid var(--line); color:var(--ink-faint); font-family:var(--sans);
  font-size:11.5px; letter-spacing:.4px; padding:9px; border-radius:9px; cursor:pointer; transition:color .2s,border-color .2s; }
.cbreset:hover{ color:var(--ink-soft); }
.cbreset.warn{ color:var(--amber); border-color:var(--amber-dim); }

#sound, #pause{ position:absolute; z-index:55; width:34px; height:34px; border-radius:50%;
  background:rgba(11,12,16,.6); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--amber);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:transform .12s var(--ease),color .2s; }
#sound{ top:20px; right:18px; }        /* title-menu corner (no status bar there) */
#pause{ top:62px; right:14px; }        /* in-game, where the sound toggle used to sit */
#sound:active, #pause:active{ transform:scale(.9); }
#sound svg, #pause svg{ width:17px; height:17px; }
#sound.muted{ color:var(--ink-faint); }
/* the word-lock keyboard covers the lower screen; hide the pause button so it's never under your thumb (the sheet's own ✕ owns the top-right) */
#phone:has(#locksheet.on) #pause{ display:none; }

/* ---------- PAUSE PANEL ---------- */
#pausesheet{ position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,9,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .24s ease; }
#pausesheet[hidden]{ display:none; }
#pausesheet.on{ opacity:1; }
.ps-card{ width:270px; background:linear-gradient(180deg,#14151b,#0e0f14); border:1px solid var(--line); border-radius:20px;
  padding:22px 18px 18px; box-shadow:0 24px 60px rgba(0,0,0,.6); transform:translateY(10px); transition:transform .24s var(--ease); }
#pausesheet.on .ps-card{ transform:translateY(0); }
.ps-title{ font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); opacity:.75; text-align:center; margin-bottom:16px; }
.ps-row{ width:100%; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; color:var(--ink);
  font-family:var(--sans); font-size:15px; cursor:pointer; transition:border-color .2s,transform .12s var(--ease); }
.ps-row:hover{ border-color:var(--amber-dim); }
.ps-row:active{ transform:scale(.99); }
.ps-val{ font-family:var(--mono); font-size:13px; color:var(--amber); }
.ps-row.muted .ps-val{ color:var(--ink-faint); }
.ps-arrow{ color:var(--ink-soft); font-size:18px; line-height:1; }
.ps-resume{ width:100%; margin-top:6px; height:46px; border-radius:12px; border:1px solid var(--amber-dim);
  background:rgba(232,165,75,.08); color:var(--amber); font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:.5px; cursor:pointer; transition:transform .12s var(--ease),border-color .2s; }
.ps-resume:hover{ border-color:var(--amber); }
.ps-resume:active{ transform:scale(.98); }

/* ---------- COLD OPEN (typewriter title card) ---------- */
#coldopen{ position:absolute; inset:0; z-index:80; background:#050608; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:0 36px; transition:opacity .7s ease; }
#coldopen::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(55% 38% at 66% 28%, rgba(232,165,75,.13), transparent 72%),
    linear-gradient(118deg, transparent 47%, rgba(232,165,75,.11) 50%, transparent 53%); }
#coldopen::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0,0,0,.62) 100%); }
#coldopen.out{ opacity:0; pointer-events:none; }
/* app-chrome header naming the cold open's on-phone source (Journal / Notes / Vault / Voice Memo) */
.co-source{ position:relative; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--amber); opacity:.62; margin-bottom:20px; padding-bottom:11px; max-width:320px; text-align:center;
  border-bottom:1px solid rgba(232,165,75,.2); }
.co-text{ position:relative; z-index:1; font-family:var(--mono); font-size:14.5px; line-height:1.95; letter-spacing:.2px;
  color:#B7B4AC; white-space:pre-wrap; max-width:320px; min-height:220px; }
.co-text::after{ content:"▋"; color:var(--amber); margin-left:1px; animation:cocaret 1s step-end infinite; }
@keyframes cocaret{ 50%{ opacity:0; } }
.co-key{ color:var(--amber-2); }
.co-gowrap{ position:relative; z-index:1; margin-top:38px; display:flex; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .6s ease; }
.co-gowrap.show{ opacity:1; pointer-events:auto; }
.co-go{ background:none; border:1px solid var(--amber-dim); color:var(--amber); font-family:var(--sans); font-size:13px;
  font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:13px 30px; border-radius:26px; cursor:pointer;
  transition:transform .12s var(--ease),border-color .2s; animation:copulse 2.6s ease-in-out infinite; }
.co-go:hover{ border-color:var(--amber); }
/* THE DETECTIVE'S VOICE — case notes ("CASE NOTE · YOU"). Cool steel-blue, not Iris's warm amber:
   the analytical outsider reading a stranger's phone. Distinct from her (amber) and the threat (red). */
#coldopen.voice-detective::before{
  background:radial-gradient(55% 38% at 66% 28%, rgba(127,178,206,.14), transparent 72%),
    linear-gradient(118deg, transparent 47%, rgba(127,178,206,.10) 50%, transparent 53%); }
.voice-detective .co-source{ color:#8FB8D2; border-bottom-color:rgba(127,178,206,.22); }
.voice-detective .co-text{ color:#AEB8C0; }
.voice-detective .co-text::after{ color:#7FB2CE; }
.voice-detective .co-key{ color:#A9D2EC; }
.voice-detective .co-go{ border-color:rgba(127,178,206,.5); color:#9EC6DE; }
.voice-detective .co-go:hover{ border-color:#7FB2CE; }
.co-go:active{ transform:scale(.97); }
@keyframes copulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,165,75,0); } 50%{ box-shadow:0 0 20px 0 rgba(232,165,75,.26); } }
/* the note's dying word — snuffed in place like a candle, leaving a scar */
.co-death{ display:inline-block; color:#B7B4AC; }
.co-death.dying{ animation:candleout .94s var(--ease) forwards; }
.co-death.scar{ color:var(--ink-faint); opacity:.55; letter-spacing:3px; }

/* ---------- THE OPENER: boot veil + lockscreen "someone is waiting" notification ---------- */
#bootveil{ position:absolute; inset:0; z-index:120; background:#050608; opacity:1; pointer-events:auto; }  /* solid black from frame 0 — no fade-IN */
#bootveil.lift{ opacity:0; pointer-events:none; transition:opacity .9s ease; }   /* the phone fades UP out of the dark */
.ls-notif{ position:absolute; left:22px; right:22px; top:214px; z-index:5; display:flex; gap:11px; align-items:center;
  padding:12px 14px; border-radius:16px; background:rgba(20,21,27,.62); border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:.82; animation:lsnGlow 3.4s ease-in-out infinite; }
@keyframes lsnGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,165,75,0); } 50%{ box-shadow:0 0 16px 0 rgba(232,165,75,.14); } }
.lsn-ico{ width:34px; height:34px; flex:none; border-radius:50%; background:rgba(232,165,75,.16); color:var(--amber);
  display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:600; font-size:15px; }
.lsn-mid{ min-width:0; flex:1; }
.lsn-top{ display:flex; align-items:center; gap:6px; }
.lsn-from{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.lsn-lock{ font-size:10px; opacity:.6; }
.lsn-sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.4px; color:var(--ink-faint); margin-top:2px; text-transform:lowercase; }

/* the opener's Nell thread: her messages land one at a time */
.bubble.in.landing{ opacity:0; animation:bubbleLand .5s var(--ease) forwards; }
@keyframes bubbleLand{ 0%{ opacity:0; transform:translateY(9px); } 100%{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .bubble.in.landing{ opacity:1; animation:none; } #bootveil.lift{ transition:opacity .2s ease; } }

#toast{ position:absolute; left:50%; bottom:120px; transform:translateX(-50%) translateY(14px); z-index:60; background:var(--card);
  border:1px solid var(--line); color:var(--ink); font-size:13px; padding:9px 16px; border-radius:12px; opacity:0; transition:opacity .25s,transform .25s; pointer-events:none; max-width:300px; text-align:center; }
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.05s !important; } }

/* ---- SEALED STACKS — Ch2 Gate-1 room (the preserved partition) ---- */
.stacks-entry{ cursor:pointer !important; }
.stacks-head{ text-align:center; padding:16px 0 6px; }
.stacks-count{ font-family:var(--sans); font-weight:800; font-size:42px; color:var(--amber); letter-spacing:1px; line-height:1; }
.stacks-sub{ font-family:var(--mono); font-size:11.5px; letter-spacing:1px; color:var(--ink-soft); margin-top:6px; }
.stacks-note{ margin:14px 0 6px; }
.stacks-scroll{ margin-top:8px; border-top:1px solid var(--line); }
.stacks-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.05); opacity:.5; }
.sr-bar{ height:9px; border-radius:3px; background:rgba(201,196,184,.30); }
.sr-tag{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.5px; color:var(--ink-soft); }
.stacks-foot{ text-align:center; font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--ink-soft); padding:18px 0 10px; }

/* photo → lock RECOVER entry (e.g. the circled roster → WARDEN) */
.pv-entry{ padding:2px 18px 20px; }
.pv-entry .entryrow{ margin-top:0; }

/* stacked Lexicon sections get breathing room between headers */
.lexhead ~ .lexhead{ margin-top:28px; }

/* ---- arrival notification banner (drops from the top; lingers ~5s; tap to open) ---- */
.notif{ position:absolute; top:56px; left:12px; right:12px; z-index:70; display:flex; gap:11px; align-items:flex-start;
  background:rgba(20,21,27,.90); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:18px; padding:12px 14px; box-shadow:0 14px 44px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-18px); transition:opacity .38s var(--ease),transform .38s var(--ease); pointer-events:none; }
.notif.on{ opacity:1; transform:translateY(0); pointer-events:auto; cursor:pointer; }
.notif:active{ transform:scale(.99); }
.nt-ico{ width:34px; height:34px; border-radius:9px; background:var(--amber); color:#171009; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.nt-mid{ flex:1; min-width:0; }
.nt-app{ font-family:var(--mono); font-size:9px; letter-spacing:1.2px; color:var(--ink-soft); text-transform:uppercase; }
.nt-title{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink); margin-top:2px; }
.nt-body{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-top:3px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- MAIL mailbox folders (Inbox / Drafts / Sent) ---- */
.mblist{ display:flex; flex-direction:column; }
.lockrow.mbrow{ cursor:pointer; margin-top:12px; transition:transform .12s var(--ease),border-color .2s; }
.lockrow.mbrow:first-child{ margin-top:4px; }
.lockrow.mbrow:hover{ border-color:var(--amber-dim); }
.lockrow.mbrow:active{ transform:scale(.99); }
.mb-go{ margin-left:auto; color:var(--amber); font-size:18px; line-height:1; }

/* ================= high-fidelity Mail / Messages / Notes ================= */
/* mail & notes list rows (sender/title + date, subject, snippet, unread dot) */
.mailrow{ display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; padding:13px 2px 14px; background:none; border:none; border-bottom:1px solid var(--line); cursor:pointer; }
.mailrow:active{ background:rgba(255,255,255,.03); }
/* the "Recovered"/"Archived" section — done drafts & notes tuck below the active list, dimmed but re-readable */
.doc-arch-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; margin-top:14px; padding:9px 2px; background:none; border:none; border-top:1px solid var(--line); cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); }
.doc-arch-h .da-caret{ display:inline-block; transition:transform .2s var(--ease); }
.doc-arch-h.open .da-caret{ transform:rotate(90deg); }
.doc-arch-h .da-n{ margin-left:auto; font-size:10px; color:var(--ink-faint); opacity:.8; }
.msglist.doc-arch .mailrow{ opacity:.5; }
.msglist.doc-arch .mailrow .mr-dot{ background:transparent; box-shadow:none; }
.msglist.doc-arch .mailrow:active{ opacity:.75; }
.mailrow .mr-dot{ width:9px; height:9px; border-radius:50%; margin-top:6px; flex:0 0 auto; background:var(--amber); box-shadow:0 0 8px rgba(232,165,75,.5); }
.mailrow .mr-dot.ghost{ background:transparent; box-shadow:none; }
.mailrow .mr-mid{ flex:1; min-width:0; }
.mailrow .mr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mailrow .mr-name{ font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mailrow.unread .mr-name{ color:var(--ink); }
.mailrow .mr-date{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); flex:0 0 auto; }
.mailrow .mr-subj{ font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mailrow.unread .mr-subj{ color:var(--ink); }
.mailrow .mr-snip{ font-family:var(--serif); font-size:13px; color:var(--ink-faint); margin-top:3px; line-height:1.42; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* email-style reader header */
.reader{ padding:2px 0 8px; }
/* THE PROVENANCE PASS — Iris's own note, in her hand, on how she got a doc she wasn't meant to have.
   Sits above the intercepted material; her warm amber voice, clearly not part of the document below. */
.doc-prov{ margin:2px 0 16px; padding:11px 14px; border-radius:9px; border:1px solid var(--amber-dim);
  border-left:3px solid var(--amber); background:linear-gradient(180deg,rgba(232,165,75,.09),rgba(232,165,75,.03)); }
.doc-prov .dp-tag{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--amber); opacity:.8; margin-bottom:6px; }
.doc-prov .dp-body{ font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.55; color:var(--amber-2); white-space:pre-wrap; }
.rd-subject{ font-family:var(--sans); font-weight:700; font-size:20px; line-height:1.25; color:var(--ink); margin:6px 0 14px; }
.rd-head{ display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.rd-av{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; background:linear-gradient(160deg,#2a2c36,#16171d); color:var(--amber); font-family:var(--sans); font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.rd-who{ min-width:0; }
.rd-from{ font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); }
.rd-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:2px; }
.mail-actions{ display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:14px; border-top:1px solid var(--line); }
.ma-btn{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); opacity:.5; }
.ma-ro{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:6px; padding:3px 7px; }

/* paper Notes canvas */
.notecanvas .nc-title{ font-family:var(--serif); font-weight:500; font-size:23px; color:var(--ink); margin:4px 0 3px; }
.notecanvas .nc-date{ font-family:var(--mono); font-size:10.5px; letter-spacing:.5px; color:var(--ink-faint); margin-bottom:18px; }
.notecanvas .nc-body{ font-family:var(--serif); font-size:16px; line-height:1.7; }

/* Messages: date divider + per-message timestamp */
.msg-datedivider{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); margin:2px 0 14px; }
.bubble-time{ align-self:flex-start; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); margin:3px 0 12px 6px; }

/* ---- Photos: header + viewer date bar ---- */
.photohead{ display:flex; align-items:baseline; justify-content:space-between; margin:2px 2px 12px; }
.photohead .ph-t{ font-family:var(--sans); font-weight:700; font-size:17px; color:var(--ink); }
.photohead .ph-n{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.pv-bar{ justify-content:space-between; }
.pv-when{ text-align:center; line-height:1.15; }
.pv-when b{ display:block; font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink); }
.pv-when span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); }
.pv-sp{ width:24px; }

/* ---- Voicemail: visual voicemail ---- */
.vm-head{ padding:4px 2px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.vm-greeting{ font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-faint); }
.vm-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 0; color:var(--ink-faint); }
.vm-empty svg{ width:46px; height:46px; opacity:.5; margin-bottom:16px; }
.vm-empty-t{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--ink-soft); }
.vm-empty-s{ font-family:var(--serif); font-style:italic; font-size:13px; margin-top:5px; }
.vm-list{ display:flex; flex-direction:column; }
.vm-row{ padding:14px 2px; border-bottom:1px solid var(--line); }
.vm-top{ display:flex; align-items:center; gap:11px; }
.vm-who{ flex:1; min-width:0; }
.vm-name{ font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); }
.vm-when{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:2px; }
.vm-play{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:var(--amber); color:#171009; border:none; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding-left:2px; }
.vm-scrub{ display:flex; align-items:center; gap:10px; margin:12px 0 0 45px; }
.vm-bar{ flex:1; height:3px; border-radius:2px; background:var(--line); position:relative; }
.vm-bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--amber); border-radius:2px; }
.vm-dur{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.vm-transcript{ margin:12px 0 0 45px; font-size:14px; color:var(--ink-soft); }

/* voicemail = transcript only (no audio to play) */
.vm-tlabel{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 0 45px; }
.vm-transcript{ margin:6px 0 0 45px; font-size:14px; color:var(--ink); }

/* outgoing reply (you answer her with the recovered word) */
.bubble.out{ align-self:flex-end; background:var(--amber); color:#171009; border-bottom-right-radius:6px; font-weight:600; }
.bubble-status{ align-self:flex-end; font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; color:var(--ink-faint); margin:2px 6px 12px 0; }
.msg-compose.active{ opacity:1; cursor:pointer; }
.msg-compose.active .mc-invite{ color:var(--amber); }
.msg-compose.active .mc-send{ background:var(--amber); color:#171009; }
.msg-compose.active .mc-send::after{ display:none; }
/* inert composer — present for realism, but you cannot text into the void (the season may break this once) */
.msg-compose.inert{ opacity:.5; cursor:default; }
.msg-compose.void .mc-field{ color:var(--ink-soft); letter-spacing:3px; }
/* she takes a beat before reacting — a "typing…" bubble so the delay reads as her composing */
.bubble.typing{ display:inline-flex; align-items:center; gap:5px; width:auto; align-self:flex-start; }
.bubble.typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:typedot 1.25s infinite ease-in-out; }
.bubble.typing span:nth-child(2){ animation-delay:.18s; }
.bubble.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes typedot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .bubble.typing span{ animation:none; opacity:.6; } }

/* redaction filled back in once its word is recovered */
.unredacted{ color:var(--amber); background:rgba(232,165,75,.14); border-radius:3px; padding:0 4px; font-weight:600; }

/* acrostic lock: show the source lines with the first letter of each lit up */
.acr-def{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.acr-lines{ font-family:var(--mono); font-size:13.5px; line-height:1.75; margin-bottom:12px; }
.acr-line{ color:var(--ink-faint); }
.acr-first{ color:inherit; font-weight:400; }                       /* blends with the line by default — no giveaway; you trace the left edge yourself */
.acr-lines.reveal .acr-first{ color:var(--amber); font-weight:700; } /* a nudge lights the down-the-left letters */

/* solved state on entry rows (progress marker) */
.entryrow.solved{ border-color:rgba(232,165,75,.3); background:rgba(232,165,75,.07); cursor:default; }
.entryrow.solved .er-ico{ color:var(--amber); }
.entryrow.solved .er-txt b{ color:var(--amber); letter-spacing:.5px; }
/* forward-gate: this word isn't recoverable until the previous one is done */
.entryrow.locked{ border-color:var(--line); background:transparent; cursor:default; opacity:.55; }
.entryrow.locked:hover{ border-color:var(--line); }
.entryrow.locked .er-ico,.entryrow.locked .er-txt{ color:var(--ink-soft); }
.lexcaption.locked{ opacity:.6; font-style:italic; }
/* chapter progress under the map title */
.map-prog{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }