/* =====================================================================
   Aletheia: The Unwritten Name — css/style.css
   "Ink on obsidian": near-black violet field, engraved alabaster letters,
   Lethe in cold cobalt, the True Name in alchemical gold.
   ===================================================================== */

:root{
  --night:#07060f;
  --deep:#0d0b1c;
  --slate:#161228;
  --panel:#1a1533;
  --panel2:#221b40;
  --line:rgba(196,182,255,.16);
  --line-soft:rgba(196,182,255,.08);
  --glyph:#eae4ff;
  --glyph-dim:#9d93c8;
  --gold:#f0c76a;
  --gold-pale:#ffe6a8;
  --lethe:#6f8ff0;
  --found:#7ff0c8;
  --ember:#ff9a5c;
  --blood:#e2537a;
  --ok:#7ff0c8;
  --radius:16px;
  --pad:clamp(10px,2.2vw,22px);
  --font:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --ui:"Avenir Next",Avenir,"Segoe UI",Inter,Helvetica,Arial,sans-serif;

  /* --vh100 is the viewport height the board is allowed to use, and --chrome
     is the room the header + HUD above it take. The board is then
     min(column width, vh100 - chrome) — it fits BOTH axes.
     --chrome is not a constant: measured, it is 139px on a wide desktop,
     196px in the site's 914x514 embed and 227px on a 375px phone. The values
     below are per-breakpoint estimates that are deliberately generous, so
     the board fits even before any script runs; game.js replaces this with
     the real measurement on load and on every resize, so it cannot go stale
     the way a hard-coded `calc(100vh - 200px)` does.
     dvh where available: 100vh on a phone is the *large* viewport, so the
     board would be sized for a URL bar that is not there. */
  --vh100:100vh;
  --chrome:150px;
}
@supports (height:100dvh){ :root{ --vh100:100dvh } }
@media (max-width:1000px){ :root{ --chrome:215px } }
@media (max-width:560px){ :root{ --chrome:235px } }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--night);
  color:var(--glyph);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[hidden]{display:none !important}
button{font-family:inherit}
a{color:var(--gold-pale);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- shell */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px var(--pad);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(26,21,51,.92),rgba(13,11,28,.6));
  position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font);font-size:18px;letter-spacing:.06em;color:var(--glyph)}
.brand b{font-weight:600}
.brand .sig{color:var(--gold);font-size:15px}
.topbar .spacer{flex:1}
.tbtn{
  background:rgba(196,182,255,.07);color:var(--glyph-dim);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:13px;cursor:pointer;transition:.18s;
}
.tbtn:hover{color:var(--glyph);border-color:rgba(240,199,106,.5);background:rgba(240,199,106,.08)}
.tbtn[aria-pressed="true"]{color:var(--gold-pale);border-color:rgba(240,199,106,.55)}
.tbtn .sm{display:none}

.main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:var(--pad)}

/* ------------------------------------------------------------------ hud */
.hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(34,27,64,.72);border:1px solid var(--line);
  border-radius:12px;padding:6px 12px;min-width:66px;
}
.chip b{font-size:16px;font-weight:600;letter-spacing:.02em}
.chip span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--glyph-dim)}
.chip.gold b{color:var(--gold-pale)}
.chip.gold{border-color:rgba(240,199,106,.4)}
.chip.act{background:transparent;border-color:var(--line-soft)}
.chip.act b{font-family:var(--font);font-size:14px;font-style:italic;font-weight:400}

/* ---------------------------------------------------------------- stage */
.stage{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 268px;
  gap:14px;align-items:stretch;
}
.boardwrap{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(111,143,240,.18),transparent 60%),
    radial-gradient(90% 70% at 80% 110%,rgba(240,199,106,.10),transparent 60%),
    linear-gradient(180deg,var(--slate),var(--deep));
  aspect-ratio:1/1;min-height:0;
  /* The site renders this page inside a 914x514 iframe, and a *width-only*
     cap made the board 872px tall there — 554px of it below the fold, with
     the bottom rows unreachable behind the frame. Same for any wide, short
     window (a phone held sideways was 593px over). Capping both axes at
     every width is the only rule that covers every shape; the width-only
     version below 1001px was the blind spot. */
  width:min(100%,calc(var(--vh100) - var(--chrome)));
  justify-self:center;align-self:start;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03);
}
canvas#board{display:block;width:100%;height:100%;touch-action:none}
.toast{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);
  background:rgba(10,8,22,.92);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:13px;max-width:90%;
  opacity:0;transition:.3s;pointer-events:none;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.gold{border-color:rgba(240,199,106,.6);color:var(--gold-pale)}
.toast.bad{border-color:rgba(226,83,122,.6);color:#ffc2d5}

/* ------------------------------------------------------------ word list */
.listpanel{
  display:flex;flex-direction:column;gap:10px;min-height:0;
  background:linear-gradient(180deg,rgba(34,27,64,.7),rgba(22,18,40,.8));
  border:1px solid var(--line);border-radius:var(--radius);padding:12px;
}
.listpanel h2{
  margin:0;font-family:var(--font);font-size:15px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.listpanel .sub{font-size:11px;color:var(--glyph-dim);margin:-6px 0 2px;line-height:1.5}
.words{display:flex;flex-direction:column;gap:5px;overflow:auto;flex:1;min-height:0}
.word{
  display:flex;align-items:center;gap:8px;
  border-radius:9px;padding:6px 9px;font-size:14px;letter-spacing:.08em;
  background:rgba(255,255,255,.02);border:1px solid transparent;
  transition:.22s;position:relative;
}
.word .g{font-weight:600}
.word .pips{display:flex;gap:3px;margin-left:auto}
.word .pips i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(196,182,255,.35)}
.word .rev{color:var(--lethe);font-size:12px}
.word.done{color:rgba(234,228,255,.42);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.word.done .pips i{background:rgba(127,240,200,.5)}
.word.done .g{text-shadow:none}
.word.hinting{animation:pulseRow 1.1s ease-in-out 2}
.word .lore{display:none}
.word.done::after{
  content:"";position:absolute;inset:0;border-radius:9px;
  background:linear-gradient(90deg,rgba(127,240,200,.16),transparent 70%);
  animation:fxSweep .5s ease-out;
}
@keyframes fxSweep{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes pulseRow{0%,100%{background:rgba(255,255,255,.02)}50%{background:rgba(240,199,106,.16)}}
.relic-row{
  border:1px dashed rgba(240,199,106,.45);border-radius:9px;padding:7px 9px;
  font-size:13px;color:var(--gold-pale);display:flex;align-items:center;gap:8px;
  background:rgba(240,199,106,.05);
}
.relic-row.done{border-style:solid;background:rgba(240,199,106,.14)}
.relic-row .q{letter-spacing:.3em}
/* Only appears once the list is read and the True Name is still loose. */
.closebar{
  width:100%;padding:10px 14px;font-size:13.5px;
  animation:closeNudge 2.1s ease-in-out infinite;
}
@keyframes closeNudge{
  0%,100%{box-shadow:0 10px 26px -12px rgba(240,199,106,.7)}
  50%{box-shadow:0 10px 30px -8px rgba(240,199,106,1)}
}

/* --------------------------------------------------------------- mobar */
.mobar{display:none;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ---------------------------------------------------------------- buttons */
.btn{
  appearance:none;border:1px solid var(--line);border-radius:12px;
  background:rgba(196,182,255,.06);color:var(--glyph);
  padding:11px 17px;font-size:14px;cursor:pointer;transition:.18s;
}
.btn:hover{background:rgba(196,182,255,.13);border-color:rgba(196,182,255,.35);transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(180deg,#f5d47f,#c99a3c);color:#231a05;font-weight:600;
  border-color:rgba(255,235,190,.6);box-shadow:0 10px 26px -12px rgba(240,199,106,.7);
}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* -------------------------------------------------------------- overlays */
.overlay{
  position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:radial-gradient(90% 80% at 50% 30%,rgba(13,11,28,.82),rgba(7,6,15,.94));
  backdrop-filter:blur(5px);
}
.overlay .card{
  width:min(620px,100%);max-height:100%;overflow:auto;
  background:linear-gradient(180deg,rgba(38,30,72,.96),rgba(18,15,34,.97));
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,3.4vw,32px);
  box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.overlay.wide .card{width:min(860px,100%)}
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.overlay h2{
  font-family:var(--font);font-weight:400;font-size:clamp(22px,3.2vw,32px);
  margin:0 0 10px;letter-spacing:.01em;
}
.overlay h3{font-family:var(--font);font-weight:400;font-size:17px;margin:18px 0 6px;color:var(--gold-pale)}
.overlay p{margin:0 0 10px;font-size:14.5px;line-height:1.68;color:#d6cff0}
.overlay p.lore{font-family:var(--font);font-size:16px;font-style:italic;color:#e9e2ff}
.overlay .small{font-size:12.5px;color:var(--glyph-dim)}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 4px}
.stats>div{display:flex;flex-direction:column}
.stats b{font-size:19px;font-weight:600}
.stats span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--glyph-dim)}
.stars{font-size:32px;letter-spacing:.14em;color:var(--gold);margin:6px 0 2px}
.stars .off{color:rgba(196,182,255,.22)}
.premise{font-family:var(--font);font-size:15.5px;line-height:1.7;color:#ded6ff}

/* ------------------------------------------------------------- chapters */
.actblock{margin-bottom:14px}
.actblock h3{display:flex;align-items:baseline;gap:10px;margin:12px 0 8px;font-size:16px}
.actblock h3 span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--glyph-dim)}
.actblock .blurb{font-size:12.5px;color:var(--glyph-dim);line-height:1.6;margin:0 0 10px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.cbtn{
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);
  color:var(--glyph);padding:8px 6px;cursor:pointer;text-align:center;transition:.16s;
}
.cbtn:hover{background:rgba(196,182,255,.12);transform:translateY(-2px)}
.cbtn b{display:block;font-size:15px}
.cbtn i{display:block;font-size:10px;font-style:normal;color:var(--gold);letter-spacing:.1em;height:12px}
.cbtn.locked{opacity:.45;cursor:not-allowed}
.cbtn.done{border-color:rgba(127,240,200,.5);background:rgba(127,240,200,.07)}
.cbtn.here{border-color:var(--gold);box-shadow:0 0 0 1px rgba(240,199,106,.35) inset}

/* --------------------------------------------------------------- ledger */
.ledger{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}
.led{border:1px solid var(--line-soft);border-radius:12px;padding:9px 11px;background:rgba(255,255,255,.02)}
.led b{display:block;font-size:14px;letter-spacing:.08em}
.led span{display:block;font-size:11.5px;color:var(--glyph-dim);line-height:1.5;margin-top:3px}
.led.locked{opacity:.5}
.led.locked b{letter-spacing:.28em}

/* ------------------------------------------------------------- response */
@media (max-width:1000px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .listpanel{order:2}
  .words{max-height:none}
  .mobar{display:flex}
}
/* On a desktop window the whole board has to be on the screen at once: a
   square board taller than the space under the header puts the first row
   behind the sticky header the moment the page scrolls, and a word search
   you cannot see the whole of is not a word search.
   The rule that does that now lives on .boardwrap itself, because the
   two-column case is not the only one that needs it — see the note there.
   What is left here is the two-column specific part: align-self:start is
   load-bearing, since stretched the grid makes the board box as tall as the
   word list beside it, the box stops being square, and the drawn grid and
   the hit-testing grid disagree about where the rows are.
   `height:0;min-height:100%` keeps the list from setting the row height, so
   the board decides it and the list scrolls inside that. */
@media (min-width:1001px){
  .listpanel{height:0;min-height:100%}
}
@media (max-width:560px){
  .topbar{flex-wrap:wrap;padding:7px 10px;gap:7px}
  .topbar .spacer{display:none}
  .brand{font-size:15px;flex:1 1 100%}
  .brand .sig{display:none}
  .tbtn{padding:5px 9px;font-size:12.5px}
  .tbtn .lg{display:none}
  .tbtn .sm{display:inline}
  /* the chips were 209px of a 568px screen in five wrapped rows; as a grid
     they are 121px in three, and the board starts on the first screen */
  /* 70px, not 58px: auto-fill packs eight narrow pills into a 540px window
     and every label truncates, which reads as broken rather than compact */
  .hud{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:5px}
  /* the act name does not fit a 58px pill, and an ellipsis on the first
     screen reads as broken rather than as restrained */
  .chip.act{display:none}
  .chip{min-width:0;padding:4px 6px;align-items:center;text-align:center}
  .chip b{font-size:13px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip span{font-size:8.5px;letter-spacing:.06em;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toast{font-size:12px;max-width:94%}
  .overlay .card{padding:16px}
  .stats{gap:12px}
}
/* Narrow screens: the four-column tables below the fold are wider than the
   viewport at their min-content width, so they scroll inside their own box
   rather than dragging the whole document sideways. */
@media (max-width:700px){
  .about table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .about code{word-break:break-word}
}

/* ------------------------------------------------------- article / seo */
.about{margin-top:26px;border-top:1px solid var(--line-soft);padding-top:22px;max-width:900px}
.about h2{font-family:var(--font);font-weight:400;font-size:clamp(20px,2.6vw,26px);margin:22px 0 8px;color:var(--gold-pale)}
.about h3{font-family:var(--font);font-weight:400;font-size:17px;margin:18px 0 6px}
.about p,.about li{font-size:14.5px;line-height:1.75;color:#cdc6e6}
.about ul,.about ol{margin:8px 0 12px;padding-left:22px}
.about li{margin-bottom:5px}
.about table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13.5px}
.about th,.about td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.about th{background:rgba(196,182,255,.07);color:var(--gold-pale);font-weight:600}
.about code{background:rgba(196,182,255,.1);border-radius:5px;padding:1px 6px;font-size:13px}
.crumbs{font-size:12.5px;color:var(--glyph-dim);margin-bottom:12px}
.crumbs a{color:var(--glyph-dim)}
.site-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--glyph-dim);line-height:1.7}

/* --------------------------------------------------------------- effects */
@keyframes dismissLetter{
  0%,100%{opacity:1;filter:blur(0)}
  42%{opacity:.28;filter:blur(3px);transform:translateY(-2px)}
}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.risein{animation:riseIn .5s ease-out both}
.title-letters{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:3px;font-family:var(--font);font-size:clamp(24px,6.4vw,54px);letter-spacing:.06em;margin:2px 0 4px}
.title-letters span{display:inline-block}
.title-letters .tword{white-space:nowrap}
.title-letters .tsp{width:.28em}
.title-letters span.fade{animation:dismissLetter 5.2s ease-in-out infinite}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:16px 0}
.goldrule{height:1px;background:linear-gradient(90deg,transparent,rgba(240,199,106,.5),transparent);margin:14px 0}