/* Alibi Town — a storybook village at night. Same frame as its sibling Lorewheel (menu, stage, record),
   its own world: an aubergine night, flat candy-coloured houses, one marigold for anything you can act on,
   a fat poster serif for the voice, and case files typed on paper. */
:root{
  color-scheme:dark;
  --night-1:#160b2e; --night-2:#2d1650; --night-3:#6b2d5c;
  --frame:#150d24; --panel:#1f1433; --panel-2:#2a1c45; --panel-3:#372657; --line:#3d2b5e;
  --text:#f7f1e6; --muted:#bcb0d3; --faint:#9285ad;
  --lamp:#ffc247; --lamp-ink:#22140a; --ember:#ff6b4a; --teal:#5fd4b8;
  --paper:#f1e6cd; --paper-2:#e6d8b8; --paper-ink:#2a2118; --paper-muted:#5d4f3c;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Abril Fatface",Georgia,serif;
  --typed:"Special Elite","Courier New",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px; --s6:56px;
}
*{box-sizing:border-box}
/* the root is 18px (112.5% respects a reader's own setting) and nothing is set under .78rem */
html{font-size:112.5%}
html{height:100%;overflow:hidden}
/* the gap round the frame is body padding, not a frame margin: a margin collapses through body and lets the page scroll under a focused field */
body{height:100dvh;padding:24px;margin:0;font-family:var(--font);font-size:.95rem;line-height:1.55;color:var(--text);background:var(--night-1);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.002em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem)}
h2{font-size:1.35rem}
h3{font-size:1.15rem}
p{margin:0;text-wrap:pretty}
a{color:var(--lamp)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 14px;border-radius:var(--r-sm);background:var(--lamp);color:var(--lamp-ink);font-weight:700}
.skip:focus{top:12px}

/* ---------- night sky + frame ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(700px 420px at 82% 8%,rgba(255,243,207,.18),transparent 70%),
  radial-gradient(900px 520px at 8% 100%,rgba(255,107,74,.34),transparent 65%),
  linear-gradient(170deg,var(--night-1),var(--night-2) 55%,var(--night-3))}
.frame{position:relative;margin:0 auto;width:min(1360px,100%);height:100%;
  display:grid;grid-template-columns:232px minmax(0,1fr) 280px;background:var(--frame);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);animation:frameIn .7s var(--ease) backwards}
@keyframes frameIn{from{opacity:0;transform:translateY(16px) scale(.99)}}

/* ---------- menu ---------- */
.side{display:flex;flex-direction:column;gap:var(--s4);padding:26px 18px 20px;border-right:1px solid rgba(255,255,255,.05);min-height:0;overflow:auto}
.logo{display:flex;align-items:center;gap:11px;padding:0 6px;font-family:var(--display);font-size:1.32rem;letter-spacing:.01em}
.logo svg{width:36px;height:36px;filter:drop-shadow(0 6px 12px rgba(255,194,71,.25))}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--muted);font-weight:600;font-size:.93rem;text-align:left;transition:color .2s,background .2s}
.nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.800;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover{color:var(--text);background:var(--panel)}
.nav button[aria-current=page]{color:var(--text);background:var(--panel)}
.nav button[aria-current=page] svg{stroke:var(--lamp)}
.nav button[aria-current=page]::before{content:"";position:absolute;left:-18px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lamp)}
.promo{margin-top:auto;padding:18px 16px;border-radius:var(--r-md);background:linear-gradient(160deg,#4a2470,#7a2f55);display:flex;flex-direction:column;gap:6px}
.promo b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.1}
.promo p{font-size:.86rem;color:#eadfd2}
.promo button{margin-top:10px;background:var(--lamp);color:var(--lamp-ink);border-radius:var(--r-sm);padding:10px 12px;font-weight:700;font-size:.88rem;transition:transform .2s var(--ease)}
.promo button:hover{transform:translateY(-1px)}
.side-legal{padding:0 8px;font-size:.78rem;color:var(--faint)}
.side-legal a{color:var(--muted);text-decoration:none}
.side-legal a:hover{color:var(--text);text-decoration:underline}

/* ---------- stage ---------- */
.center{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:18px 28px 12px}
.tb-town{display:flex;flex-direction:column;min-width:0}
.tb-town b{font-family:var(--display);font-weight:400;font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-town small{font-size:.8rem;color:var(--muted)}
.main{flex:1;min-height:0;overflow:auto;padding:8px 28px 40px;scroll-behavior:smooth}
.main:focus{outline:none}
.view{display:flex;flex-direction:column;gap:var(--s4);max-width:900px;margin:0 auto;animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.noscript{padding:var(--s5);text-align:center}

/* ---------- record (right rail) ---------- */
.rail{padding:26px 22px;border-left:1px solid rgba(255,255,255,.05);overflow:auto;display:flex;flex-direction:column;gap:var(--s2)}
.rail h2{font-family:var(--font);font-weight:800;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:var(--s3)}
.rail h2:first-child{margin-top:0}
.rail p{font-size:.9rem}
.rail-list{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:r}
.rail-list li{counter-increment:r;display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel);font-size:.9rem}
.rail-list li::before{content:counter(r);font-family:var(--display);font-size:1.2rem;color:var(--lamp)}
.rail-list span{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- common pieces ---------- */
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lamp)}
.muted{color:var(--muted)}
.fine{font-size:.82rem;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.stack{display:flex;flex-direction:column;gap:var(--s2)}
.block{display:flex;flex-direction:column;gap:var(--s3)}
.block-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s3)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:start}
.tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--panel-3);color:var(--muted);font-family:var(--font);font-size:.78rem;font-weight:600;vertical-align:middle}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:var(--r-sm);background:var(--panel-2);color:var(--text);font-weight:700;font-size:.92rem;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn:hover{background:var(--panel-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-lamp{background:var(--lamp);color:var(--lamp-ink);box-shadow:0 10px 26px -12px rgba(255,194,71,.75)}
.btn-lamp:hover{background:#ffd06b}
.btn-ghost{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--panel)}
.btn-big{min-height:54px;padding:14px 26px;font-size:1.02rem;border-radius:var(--r-md)}
.btn-sm{min-height:44px;padding:8px 12px;font-size:.84rem}
.btn-round{width:48px;height:48px;padding:0;border-radius:50%;font-size:1.4rem}
.field{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;transition:border-color .2s,background .2s}
.field::placeholder{color:var(--faint)}
.field:focus{outline:none;border-color:var(--lamp);background:var(--panel-2)}
.field-big{font-family:var(--display);font-size:1.5rem;min-height:60px}
.area{resize:vertical;min-height:96px;font-family:var(--typed);font-size:1.05rem;line-height:1.5}
.status{min-height:1.5em;font-weight:600;color:var(--muted)}
.status.warn{color:#ffb199}
.av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tint);color:#10161d;font-weight:800;font-size:.95rem}
.av-ai{border-radius:12px}
.spin{display:block;width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--lamp);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:20;padding:12px 18px;border-radius:99px;background:var(--paper);color:var(--paper-ink);font-weight:700;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}

/* ---------- welcome ---------- */
.hero{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) var(--s4) var(--s4);border-radius:var(--r-lg);background:radial-gradient(520px 300px at 92% 0,rgba(255,194,71,.2),transparent 70%),linear-gradient(150deg,#2d1650,#1f1433 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.hero::after{content:"";position:absolute;right:38px;top:34px;width:74px;height:74px;border-radius:50%;background:#fff3cf;box-shadow:0 0 60px 18px rgba(255,243,207,.35);opacity:.92}
.hero h1{font-size:clamp(2.6rem,1.4rem + 4.8vw,4.8rem);line-height:1;max-width:12ch}
.hero h1::first-line{color:var(--lamp)}
.lede{font-size:1.12rem;max-width:54ch;color:#ece4f5}
.steps{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:var(--s3)}
.step{display:flex;flex-direction:column;gap:6px;padding:var(--s4);border-radius:var(--r-md);background:var(--panel)}
.step:first-child{background:var(--paper);color:var(--paper-ink)}
.step:first-child p{color:var(--paper-muted)}
.step-n{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--lamp)}
.step:first-child .step-n{color:var(--ember)}
.step p{font-size:.92rem;color:var(--muted)}

/* ---------- the map ---------- */
.map-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
.map{display:block;width:100%;height:auto}
.stars circle{fill:#fff3cf;opacity:.8}
.hill.h1{fill:#2c1a4d}.hill.h2{fill:#23133f}.hill.h3{fill:#1a0e30}
.road{fill:none;stroke:#44306a;stroke-width:16;stroke-linecap:round;opacity:.75}
.plot path{stroke:#6f5a96;stroke-width:3;stroke-linecap:round}
.plot rect{fill:none;stroke:#6f5a96;stroke-width:2.500;stroke-dasharray:5 4}
.plot .q{stroke:#6f5a96;stroke-width:2}
.shadow{fill:#000;opacity:.3}
/* every kind of place has its own flat colour, so a full town reads as a street of different houses */
.b-wall{fill:var(--wall,#7a6bb5)}.b-roof{fill:var(--roof,#3c2a6b)}.b-door{fill:#22123c}.b-col{stroke:var(--roof,#3c2a6b);stroke-width:5;fill:none;opacity:.55}
.k-bakery{--wall:#ff8f6b;--roof:#b3402c}.k-clock{--wall:#b7a3f5;--roof:#5a3db3}.k-library{--wall:#f3dfb3;--roof:#a8703a}
.k-station{--wall:#7cc6f2;--roof:#2b6aa3}.k-lighthouse{--wall:#f7efe2;--roof:#c8413f}.k-market{--wall:#7fd9b6;--roof:#1f8a66}
.k-theatre{--wall:#f48fb1;--roof:#a8325e}.k-post{--wall:#f2a65a;--roof:#9c4a1a}.k-greenhouse{--wall:#5fd4b8;--roof:#1f8a66}
.b-lit{fill:#fff0a8}.b-accent{fill:var(--ember)}.b-duck{fill:#f7f1e6}.b-water{fill:#3f7fc4}
.b-reed{stroke:#6fbf8f;stroke-width:3;stroke-linecap:round;fill:none}
.b-hand{stroke:#22123c;stroke-width:2.500;stroke-linecap:round;fill:none}.b-hand-fill{fill:#22123c}
.b-rail{stroke:#6f5a96;stroke-width:2.500;fill:none}
.b-bulbs{stroke:var(--lamp);stroke-width:4;stroke-linecap:round;stroke-dasharray:.1 8.400;fill:none}
.b-beam{fill:var(--lamp);opacity:.3}
.b-glass{fill:#5fd4b8;opacity:.55}.b-frame{stroke:#e9fbf5;stroke-width:1.800;fill:none}
.landmark{cursor:pointer}
.landmark>g{transition:translate .25s var(--ease)}
.landmark:hover>g,.landmark:focus-visible>g{translate:0 -5px}
.landmark:focus-visible{outline:none}
.landmark:focus-visible .lm-name,.landmark:hover .lm-name{fill:var(--lamp)}
.lm-name{font-family:var(--font);font-weight:800;font-size:17px;fill:#f7f1e6;paint-order:stroke;stroke:#160b2e;stroke-width:5px;stroke-linejoin:round}
.landmark.fresh>g{animation:build .9s var(--ease) both}
.landmark.fresh .lm-name{animation:rise .6s var(--ease) .5s both}
/* translate/scale, not transform: the drawing already carries a transform attribute for its size on the hill */
@keyframes build{0%{opacity:0;translate:0 -50px;scale:.6}60%{opacity:1;translate:0 4px;scale:1.04}}
.h-town{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem)}
.lm-solo{width:120px;height:auto;flex:none}

/* ---------- case files: typed on paper ---------- */
.file{position:relative;display:flex;flex-direction:column;gap:8px;padding:var(--s4);border-radius:6px;background:var(--paper);color:var(--paper-ink);font-family:var(--typed);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.8);rotate:-.4deg;background-image:linear-gradient(var(--paper-2) 1px,transparent 1px);background-size:100% 1.9em;background-position:0 1.2em}
.files .file:nth-child(even){rotate:.5deg}
.file h3{font-family:var(--display);font-size:1.5rem;padding-right:120px}
.file-no{padding-right:150px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted)}
.file-q,.verdict .file-q{font-size:1.15rem;line-height:1.45}
.file-by{font-size:.84rem;color:var(--paper-muted)}
.file-foot{margin-top:6px;padding-top:10px;border-top:1px dashed #b9a987;font-size:.84rem;color:var(--paper-muted)}
.stamp{position:absolute;top:18px;right:16px;padding:4px 10px;border:3px solid currentColor;border-radius:6px;font-family:var(--font);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;rotate:7deg;opacity:.9}
.stamp-caught{color:#b3261e}.stamp-escaped{color:#1f6b4f}.stamp-slipped{color:#8a5a00}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.place{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.place-head{display:flex;align-items:end;gap:var(--s3)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s6) 0}

/* ---------- records ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);background:var(--panel)}
.records{width:100%;border-collapse:collapse;font-size:.92rem}
.records th,.records td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.records th:first-child{text-align:left}
.records thead th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.records tbody tr:last-child>*{border-bottom:0}
.records tbody th{font-weight:700}
.how{margin:0;padding-left:1.3em;display:grid;gap:10px;max-width:62ch}
.how li::marker{font-family:var(--display);color:var(--lamp);font-size:1.2rem}

/* ---------- a case ---------- */
.seat-row .field{flex:1;min-width:0}
.stepper{display:flex;align-items:center;gap:var(--s3)}
.stepper-n{min-width:2ch;text-align:center;font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--lamp)}
.brief{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s4);border-radius:var(--r-md);background:linear-gradient(165deg,var(--night-2),var(--night-1))}
.brief .lm-solo{width:150px}
.crime{font-family:var(--typed);font-size:1.2rem;line-height:1.5;padding:var(--s3) var(--s4);border-left:4px solid var(--ember);background:var(--paper);color:var(--paper-ink);border-radius:0 6px 6px 0}
.crime-sm{font-size:1rem}
.chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--panel);font-weight:600;font-size:.92rem}
.suspects{display:flex;flex-direction:column;gap:var(--s2)}
.pass{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s3)}
.pass .av{width:84px;height:84px;font-size:2.2rem}
.role{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border-radius:var(--r-md)}
.role-innocent{background:#143a35;box-shadow:inset 0 0 0 1px #2f8a78}
.role-guilty{background:#4a1626;box-shadow:inset 0 0 0 1px #b3402c}
.detail{font-family:var(--display);font-size:1.6rem;line-height:1.15;color:var(--lamp)}
.alibis{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.alibi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;width:100%;padding:14px 16px;border-radius:var(--r-md);background:var(--panel);text-align:left}
.said{font-family:var(--typed);font-size:1.08rem;line-height:1.45;color:#f3ead8;margin-top:2px}
.alibi-pick{box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,box-shadow .2s,transform .2s var(--ease)}
.alibi-pick:not(:disabled):hover{background:var(--panel-2);transform:translateX(3px)}
.alibi-pick[aria-pressed=true]{background:#4a3410;box-shadow:inset 0 0 0 2px var(--lamp)}
.alibi-pick:disabled{opacity:.55;cursor:not-allowed}
.tally{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tally li{display:grid;grid-template-columns:36px minmax(90px,150px) minmax(0,1fr) auto;align-items:center;gap:12px}
.bar{height:14px;border-radius:99px;background:var(--panel-2);position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:0;width:var(--tint);border-radius:99px;background:var(--lamp);animation:grow .8s var(--ease) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}}
.tally .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.88rem}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.btn-option{min-height:84px;padding:16px;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.2;border-radius:var(--r-md);text-align:left;justify-content:flex-start}
.verdict{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s4) var(--s4);border-radius:8px;background:var(--paper);color:var(--paper-ink)}
.verdict .eyebrow{color:var(--ember)}
.verdict h1{padding-right:170px}
.verdict .detail{color:var(--paper-ink);font-size:1.25rem}
.verdict .file-q{font-family:var(--typed);margin-top:var(--s2)}
.stamp-big{top:26px;right:22px;font-size:1rem;padding:8px 14px;animation:thud .5s var(--ease) .25s both}
@keyframes thud{from{opacity:0;transform:scale(2.4)}}

/* ---------- the Lamplighter, teasers, the Daily Alibi ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hookline{max-width:56ch;padding-left:var(--s3);border-left:3px solid var(--lamp);font-family:var(--typed);font-size:1.02rem;color:#efe7d6}
.tease{padding:var(--s3) var(--s4);border-radius:var(--r-md);background:linear-gradient(120deg,#33205a,#4d2350);font-family:var(--typed);font-size:1.05rem}
.tease b{font-family:var(--font);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lamp)}
.hunt{padding:var(--s4);border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.chip-out{opacity:.6}
.chip-out{text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:2px}
.chip-out .tag{text-decoration:none;display:inline-block}
.scraps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.scraps-one{grid-template-columns:minmax(0,520px)}
.scrap{display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s3) var(--s3) var(--s4);background:var(--paper);color:var(--paper-ink);font-family:var(--typed);font-size:.98rem;line-height:1.45;border-radius:3px 12px 5px 9px;rotate:-.6deg;box-shadow:0 14px 26px -18px #000}
.scrap:nth-child(even){rotate:.7deg}
.scraps-one .scrap{font-size:1.2rem;padding:var(--s4) var(--s4) var(--s4) var(--s5);rotate:-1deg;animation:thud .5s var(--ease) both}
.scrap-n{font-family:var(--font);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted)}
.scrap-clear{border-left:5px solid #1f6b4f}
.scrap-out{font-family:var(--font);font-weight:800;font-size:.86rem;color:#1f6b4f}
.solved{display:flex;flex-direction:column;gap:6px;padding:var(--s4);border-radius:var(--r-md);background:#3a2c12;box-shadow:inset 0 0 0 2px var(--lamp)}
.solved h3{font-size:1.7rem}
.lamps path{stroke:#5a4785;stroke-width:3;stroke-linecap:round}
.lamps .bulb{fill:#5a4785}
.lamps .glow{fill:var(--lamp);opacity:0}
.lamps.lit .bulb{fill:#fff3cf}
.lamps.lit .glow{opacity:.28;animation:rise 1.2s var(--ease) both}
.daily-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4);border-radius:var(--r-lg);background:linear-gradient(135deg,#2a1c45,#45205a);box-shadow:inset 0 0 0 1px var(--line)}
.week{margin:0;padding:0;list-style:none;display:flex;gap:10px}
.lamp{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.lamp-dot{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line)}
.lamp-solved .lamp-dot{background:var(--lamp);box-shadow:0 0 16px rgba(246,183,60,.6)}
.lamp-played .lamp-dot{background:var(--panel-3);box-shadow:inset 0 0 0 2px var(--lamp)}
.lamp-today .lamp-day{color:var(--text);font-weight:800}
.marks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.mark{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-md);background:var(--panel);font-size:1.02rem}
.mark span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-weight:800}
.mark-yes span{background:#1f6b4f;color:#fff}
.mark-no span{background:#8a2f22;color:#fff}
.tag-ember{background:var(--ember);color:#fff}

.next-season{font-family:var(--typed);font-size:1.05rem;color:#efe7d6}
.strings path{fill:none;stroke:#ffd98a;stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 22;translate:0 -14px;animation:rise 1.2s var(--ease) both}
.strings path:nth-child(2){stroke:#ff9f7a}
.streak{font-weight:700}
.streak b{font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1;color:var(--lamp);margin-right:6px}
.daily-card.at-risk{box-shadow:inset 0 0 0 2px var(--ember)}

.paywall{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s3);border-top:1px dashed rgba(246,183,60,.5)}
.paywall h3{font-size:2rem}
.key-row{margin-top:var(--s2)}
.key-row label{flex-basis:100%}
.key-row .field{flex:1;min-width:180px;max-width:280px;font-family:var(--typed);letter-spacing:.08em;text-transform:uppercase}
.bought{display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.bought-new{padding:var(--s4);background:#3a2c12;box-shadow:inset 0 0 0 2px var(--lamp)}
.bought-bad{box-shadow:inset 0 0 0 2px var(--ember)}
.key{font-family:var(--typed);font-size:1.5rem;letter-spacing:.12em;color:var(--lamp);user-select:all;overflow-wrap:anywhere}
.burst path{stroke-width:3;stroke-linecap:round}
.burst{animation:pop 2.6s var(--ease) infinite}
.b1 path,.b1 circle{stroke:#ffd98a;fill:#ffd98a}.b2 path,.b2 circle{stroke:#ff9f7a;fill:#ff9f7a}.b3 path,.b3 circle{stroke:#8fe3d4;fill:#8fe3d4}
.b2{animation-delay:.9s}.b3{animation-delay:1.7s}
@keyframes pop{0%{opacity:0;scale:.2}25%{opacity:1;scale:1}70%{opacity:.5;scale:1.08}100%{opacity:0;scale:1.12}}

.offer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s4);border-radius:var(--r-lg);background:radial-gradient(420px 240px at 0 0,rgba(255,194,71,.16),transparent 70%),linear-gradient(140deg,#3a1d5c,#1f1433);box-shadow:inset 0 0 0 1px rgba(255,194,71,.45)}
.offer-art{display:grid;place-items:center;width:88px;height:88px;border-radius:22px;background:var(--lamp);color:#2d1650;font-size:3.4rem;line-height:1;rotate:-6deg;box-shadow:0 18px 30px -16px rgba(255,194,71,.7)}
.offer h2{font-size:1.9rem}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){.frame{grid-template-columns:232px minmax(0,1fr)}.rail{display:none}}
@media (max-width:820px){
  body{padding:0}
  .frame{border-radius:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .side{grid-row:2;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:0;border-right:0;border-top:1px solid var(--line);overflow:visible}
  .logo,.promo,.side-legal{display:none}
  .nav{flex-direction:row;flex:1;gap:0}
  .nav button{flex:1;flex-direction:column;gap:3px;padding:8px 2px;min-height:54px;justify-content:center;text-align:center;font-size:.78rem;line-height:1.15}
  .nav button[aria-current=page]{background:none}
  .nav button[aria-current=page]::before{left:22%;right:22%;top:-7px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  .topbar{padding:12px 16px 8px}
  .main{padding:6px 16px 28px}
  .two,.steps,.options{grid-template-columns:minmax(0,1fr)}
  .daily-card{grid-template-columns:minmax(0,1fr)}
  .offer{grid-template-columns:minmax(0,1fr)}
  .offer-art{width:64px;height:64px;font-size:2.4rem;border-radius:16px}
  .week{justify-content:space-between}
  .nav button{font-size:.78rem}
  .two{gap:var(--s4)}
  .brief{grid-template-columns:minmax(0,1fr);justify-items:start}
  .file h3,.file-no,.verdict h1{padding-right:0}
  .stamp{position:static;align-self:flex-start;rotate:-3deg}
  .hero{padding:var(--s4) var(--s3)}
  .hero::after{display:none} /* the moon would sit on the first line of text */
  .tally li{grid-template-columns:36px minmax(0,1fr) auto}
  .tally .bar{grid-column:1/-1;grid-row:2}
  .lm-name{font-size:24px}
  .toast{bottom:86px;width:max-content;max-width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}