/* The Haunted Archive (tsunderesql.com/halloween/). Gothic pass, Oct 29: ink black and oxblood,
   tarnished brass and candle amber for the case, the landing pink kept for the calls to action.
   Headings in a book serif from the system (no font download). A fixed vignette darkens the edges.
   Motion: the fog drift, the lantern's candle flicker and the stamp, all off under
   prefers-reduced-motion. Text contrast stays at or above 4.5:1 on every card colour. */
:root{
  --night:#060508; --plum:#0d0a10; --plum2:#150e17; --card:#120d15; --card2:#19121c;
  --text:#ece3da; --dim:#b9aaa6; --line:rgba(214,186,140,.16);
  --pink:#ff7ab5; --pink-deep:#d9437f; --amber:#e9b766; --amber-dim:#c39550;
  --blood:#7a1f2c; --brass:#a8864f;
  --ok:#86d9ad; --miss:#ff9a8f; --focus:#ffd98a;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--night)}
body{
  font:16px/1.6 'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--text);
  background:radial-gradient(1100px 650px at 65% -12%,#2a1222 0,transparent 62%),
             radial-gradient(900px 600px at 0% 35%,#130d1c 0,transparent 70%),
             linear-gradient(180deg,#0a070c 0,var(--night) 60%);
  background-color:var(--night);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--pink)}
code{font:0.92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(255,255,255,.07);padding:.08em .35em;border-radius:5px;color:#ffe3b8;overflow-wrap:anywhere}
.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:28px 20px 64px}
.wrap:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--amber);color:#2a1630;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.noscript{padding:24px;background:var(--card);border-radius:14px}

/* fog: two soft layers drifting slowly behind everything */
.fog{position:fixed;inset:-20% -20% auto;height:140vh;pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(40% 18% at 20% 70%,rgba(200,170,220,.10),transparent 70%),
             radial-gradient(35% 15% at 80% 40%,rgba(255,196,107,.06),transparent 70%);
  animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,-2%,0)}}
/* vignette: the room's edges stay dark however far you scroll */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.8) 100%)}

/* brand bar: the code-drawn haunted wordmark (assets/wordmark_haunted_fx.svg over the real
   wordmark_d2a.webp), linking home. The candle glow on the heart flickers gently; it holds still
   under prefers-reduced-motion. Kept short so Start stays on the first screen at 1440x900. */
.brandbar{position:relative;z-index:2;display:flex;justify-content:center;padding:16px 20px 0}
.brand{display:inline-block;line-height:0;border-radius:8px}
.hlogo{position:relative;display:inline-block;width:clamp(170px,18vw,240px);aspect-ratio:2400/520;
  filter:drop-shadow(0 0 7px rgba(146,92,255,.45)) drop-shadow(0 0 16px rgba(62,230,210,.14))}
.hlogo img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.hlogo .hlogo-fx{height:100%}
.hlogo-glow{position:absolute;left:28.4%;top:16.9%;width:8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,140,.55),rgba(255,170,90,.2) 60%,transparent);mix-blend-mode:screen;animation:hlogo-flicker 5.2s ease-in-out infinite}
@keyframes hlogo-flicker{0%,100%{opacity:.8}38%{opacity:1}44%{opacity:.62}52%{opacity:.95}70%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.hlogo-glow{animation:none;opacity:.85}}
.brandbar + .wrap{padding-top:10px}

/* header */
.case-head{text-align:center;margin:8px auto 22px;max-width:760px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:800}
.draft-chip{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;border:1px dashed var(--amber);color:var(--amber);font-size:11px;letter-spacing:.08em}
h1{font:600 clamp(36px,6.4vw,62px)/1.04 var(--serif);margin:8px 0 10px;letter-spacing:.01em;
  background:linear-gradient(180deg,#f6ead6 0,#e9b766 70%,#a8864f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(233,183,102,.12)}
.subtitle{color:var(--dim);font:italic 19px/1.5 var(--serif)}
h2{font:600 27px/1.2 var(--serif);margin:0 0 12px;color:#f3e4cc;letter-spacing:.01em}
h3{font:600 20px/1.3 var(--serif);margin:0 0 10px}
h2:focus,h3:focus{outline:none}
h2:focus-visible,h3:focus-visible{outline:3px solid var(--focus)}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:28px}
.hero-art{display:flex;justify-content:center;align-items:flex-end;position:relative;max-width:960px;width:100%;margin:0 auto}
.hero-art img{width:100%;max-width:960px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.7);filter:saturate(.9) contrast(1.04)}
/* the lantern's glow (the lantern sits at about 52% / 37% of the 16:9 scene) and a darkened frame */
.hero-art::before{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:radial-gradient(70% 80% at 52% 42%,transparent 40%,rgba(4,3,6,.55) 100%)}
.hero-art::after{content:'';position:absolute;left:52%;top:37%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,196,107,.34) 0,rgba(255,170,80,.12) 35%,transparent 68%);mix-blend-mode:screen;
  animation:flicker 3.2s steps(1,end) infinite}
@keyframes flicker{0%{opacity:.92}9%{opacity:.78}14%{opacity:1}31%{opacity:.86}38%{opacity:.97}52%{opacity:.8}60%{opacity:.95}77%{opacity:.84}88%{opacity:1}100%{opacity:.9}}
.intro{display:flex;flex-direction:column;gap:12px;padding-bottom:18px;width:100%;max-width:820px;margin:0 auto}

/* her lines */
.line{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,#151018,#100c12);border:1px solid var(--line);border-left:3px solid var(--blood);border-radius:6px 14px 14px 6px;padding:12px 14px}
.line-face{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;position:relative;background:#24141f;border:2px solid rgba(168,134,79,.7)}
.line-face img{position:absolute;left:50%;top:0;width:300%;height:auto;max-width:none;transform:translate(-50%,-4%)}
.line-text{margin:0}
.speaker{font-weight:900;color:var(--amber);margin-right:4px}
.solved-line{border-color:rgba(134,217,173,.35);border-left-color:var(--ok)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:inherit;font-weight:800;border-radius:999px;padding:10px 22px;cursor:pointer;border:0;text-decoration:none;font-size:15px}
.btn:disabled{opacity:.6;cursor:progress}
.btn-primary{background:linear-gradient(180deg,#ef6aa5,var(--pink-deep));color:var(--night);box-shadow:0 8px 24px rgba(217,67,127,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(14,10,16,.85);color:#f6ece2;border:1px solid rgba(168,134,79,.75)}
.btn-ghost:hover{background:rgba(32,20,26,.95)}
.btn-link{background:none;color:var(--dim);text-decoration:underline;padding:10px 8px}
/* the call to action sits right under the scene, above her lines, so it is on the first screen at desktop widths too (measured 1440x900) */
#start{order:-1;align-self:flex-start;margin:0 0 4px}

/* brief */
.brief,.tasks,.reveal,.deep{background:linear-gradient(180deg,rgba(21,14,23,.94),rgba(12,9,14,.94));border:1px solid var(--line);border-radius:6px;padding:22px;margin-bottom:22px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 4px rgba(6,5,8,.6),inset 0 0 0 5px rgba(168,134,79,.12)}
.contract{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.contract li{padding-left:22px;position:relative}
.contract li::before{content:'';position:absolute;left:4px;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--brass)}
.tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.table-doc{background:var(--card2);border-radius:4px;padding:14px;border:1px solid var(--line)}
.table-name{font-weight:900;margin-bottom:2px}
.table-desc{color:var(--dim);font-size:14px;margin-bottom:8px}
.cols{list-style:none;display:grid;gap:4px;font-size:14px}
.type{color:var(--amber-dim);font-size:12px;letter-spacing:.04em}
.note{color:var(--dim)}

/* tasks */
.tasks-sub{color:var(--dim);margin-bottom:16px}
.task{border-top:1px solid var(--line);padding:20px 0 6px}
.task:first-of-type{border-top:0}
.task-n{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:800}
.badge{display:inline-block;margin-left:6px;padding:1px 10px;border-radius:999px;background:rgba(127,224,176,.16);color:var(--ok);font-size:13px;vertical-align:middle}
.is-locked h3{color:var(--dim)}
.locked{color:var(--dim);font-style:italic}
.prompt{margin:14px 0 10px}
.prompt p+p{margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;font-size:14px}
.chips-label{color:var(--dim)}
.editor-label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.editor{display:block;width:100%;min-height:150px;resize:vertical;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f6e9d6;background:#050406;border:1px solid rgba(168,134,79,.4);border-radius:6px;padding:12px;tab-size:2}
.is-hard .editor{min-height:230px}
.editor:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.keys-help{color:var(--dim);font-size:13px;margin:6px 0 10px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.hints{margin:6px 0 12px}
.hints-title{font-weight:800;font-size:14px;color:var(--dim);margin-bottom:4px}
.hint{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.hint summary{cursor:pointer;padding:10px 12px;font-weight:700;min-height:44px;display:flex;align-items:center}
.hint>div{padding:0 12px 12px}
.out{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.out>*,.result{min-width:0}
.next{justify-self:start}

/* results and verdicts */
.result-meta{color:var(--dim);font-size:13px;margin-bottom:6px}
.table-scroll{overflow:auto;max-height:420px;border-radius:12px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:#1d1419;font-weight:800;color:#f3dcb6}
tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.null{color:var(--amber);font-style:italic;font-weight:700}
.verdict{border-radius:12px;padding:12px 14px;border:1px solid}
.verdict-pass{border-color:rgba(127,224,176,.55);background:rgba(127,224,176,.08)}
.verdict-fail{border-color:rgba(255,143,143,.5);background:rgba(255,143,143,.07)}
.verdict .raw{margin-top:6px;font-size:13px;color:var(--dim)}
.sets{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:14px}
.sets .mark{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--dim)}
.sets .ok .mark{background:var(--ok)}
.sets .miss .mark{background:var(--miss)}
.db-status{color:var(--amber);font-weight:700}
.db-failed{color:var(--miss)}

/* reveal */
.reveal{position:relative;overflow:hidden;border-color:rgba(168,134,79,.45)}
.reveal h2,.deep h2{font-size:clamp(28px,5vw,42px);background:linear-gradient(180deg,#f6ead6,#e9b766);-webkit-background-clip:text;background-clip:text;color:transparent}
.stamp{position:absolute;right:18px;top:18px;transform:rotate(8deg);border:3px solid var(--ok);color:var(--ok);font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:8px;animation:stamp .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stamp{from{transform:rotate(8deg) scale(1.8);opacity:0}to{transform:rotate(8deg) scale(1);opacity:1}}
.reveal-body{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:20px;align-items:end;margin:14px 0 18px}
.reveal-art img{width:100%;height:auto;max-height:60vh;object-fit:contain}
.reveal-lines{display:grid;gap:10px}
.cta{background:var(--card2);border-radius:6px;padding:18px;border:1px solid var(--line)}
.cta p{margin-bottom:8px}
.launch{color:var(--amber)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 6px}

.case-foot{text-align:center;color:var(--dim);font-size:14px;margin-top:28px;display:grid;gap:4px}

/* manga panels: sized before they load, faded in when they arrive, removed if the file is missing */
.panel{margin:0 auto 22px;max-width:820px;width:100%;opacity:0;transition:opacity .6s ease}
.panel.is-loaded{opacity:1}
/* the ink panels have no drawn border: a brass rule and a grey mat frame them, so even the darkest (p1, mean RGB 16) separates from the page */
.panel img{display:block;width:100%;height:auto;border-radius:2px;background:#0b080d;
  padding:6px;background-color:#2a2427;border:1px solid var(--brass);box-shadow:0 0 0 4px #0a080b,0 0 0 5px rgba(168,134,79,.35),0 16px 44px rgba(0,0,0,.7)}
.out .panel{margin:4px 0 0}

/* the deep stacks: darker still, a red rule, all three problems open */
.deep{position:relative;border-color:rgba(122,31,44,.55);
  background:linear-gradient(180deg,rgba(14,8,11,.96),rgba(5,4,6,.97));
  box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 4px rgba(4,3,5,.7),inset 0 0 0 5px rgba(122,31,44,.3),inset 0 0 120px rgba(0,0,0,.6)}
.eyebrow-hard{color:#e98a8a}
.deep-lines{display:grid;gap:10px;margin:6px 0 18px}
.deep>h3{margin-top:4px}
.deep .tables{margin-bottom:8px}
.skill{display:inline-block;margin:0 0 8px;padding:2px 10px;border:1px solid rgba(233,138,138,.5);border-radius:3px;color:#f0b0a8;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.deep-done{position:relative;margin-top:16px;padding-top:12px}
.deep-done .stamp{position:static;display:inline-block;margin-bottom:10px}
.deep-done:focus{outline:none}

/* the reader's card from the_unread */
.egg-card{position:relative;max-width:520px;margin:10px auto 22px;padding:20px 22px;border-radius:4px;color:#2a1d14;
  background:linear-gradient(180deg,#efe2c4,#dcc8a0);border:1px solid #8a6c3f;box-shadow:0 16px 40px rgba(0,0,0,.7),inset 0 0 30px rgba(120,80,30,.25)}
.egg-card .eyebrow{color:#7a1f2c}
.egg-card h2{color:#2a1d14;font-size:26px}
.egg-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 14px;font:16px/1.5 var(--serif);border-top:1px solid rgba(42,29,20,.3);padding-top:10px}
.egg-card dt{font-weight:700;color:#5a4128}
.egg-card dd{border-bottom:1px dotted rgba(42,29,20,.45)}
.egg-card .line{color:var(--text)}
.egg-card:focus{outline:none}

/* sound toggle: fixed top right, off by default; aria-pressed shows waves (on) or a cross (off) */
.sound-toggle{position:fixed;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--dim);background:rgba(18,13,21,.86);
  border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.sound-toggle:hover{color:var(--text);border-color:rgba(214,186,140,.35)}
.sound-toggle[aria-pressed="true"]{color:var(--amber);border-color:rgba(233,183,102,.45)}
.sound-toggle .sound-waves{display:none}
.sound-toggle[aria-pressed="true"] .sound-waves{display:inline}
.sound-toggle[aria-pressed="true"] .sound-mute{display:none}

/* phone width */
@media (max-width:720px){
  .wrap{padding:18px 14px 48px}
  .hero{grid-template-columns:1fr;gap:12px}
  .hero-art img{border-radius:14px}
  /* the call to action sits right under the scene, above her lines, so it is on a phone's first screen (measured 390x844 and 320x568) */
  #start{order:-1;align-self:stretch;margin:0 0 4px}
  .brief,.tasks,.reveal,.deep{padding:16px}
  .is-hard .editor{min-height:200px}
  .reveal-body{grid-template-columns:1fr}
  .reveal-art{display:none}
  .stamp{position:static;display:inline-block;margin:6px 0 4px;transform:rotate(-3deg)}
  .actions .btn,.cta-buttons .btn{flex:1 1 140px}
  .line-face{width:44px;height:44px}
  .sound-toggle{top:8px;right:8px;min-height:36px;padding:6px 11px}
}

/* reduced motion: nothing moves */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}