*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Any element that sets its own `display` silently overrides the `hidden`
   attribute, and the UI hides everything with `hidden`. Without this rule
   every screen renders at once and the Close button appears to do nothing. */
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--ink);
  font:var(--fs-body)/1.65 ui-serif,Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  min-height:100dvh;
  transition:background-color .2s ease,color .2s ease;
}

/* --- theme toggle --- */
.theme-toggle{
  position:fixed;top:14px;right:14px;z-index:30;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink-dim);
  font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,transform .15s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--ink)}
.theme-toggle:active{transform:scale(.92)}
#app{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) env(safe-area-inset-bottom)}
.screen{min-height:100dvh;display:flex;flex-direction:column}
.wrap{margin:auto;text-align:center;padding:40px 0}

/* --- home --- */
.logo{font-size:clamp(38px,11vw,64px);letter-spacing:.14em;margin:0 0 4px;font-weight:800}
.logo span{color:var(--accent);display:block;font-size:.55em;letter-spacing:.3em}
.tagline{color:var(--ink-dim);font-style:italic;margin:0 0 36px}
.stack{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto}
.fineprint{color:var(--ink-faint);font-size:13px;margin-top:24px}

/* --- buttons --- */
.btn{
  appearance:none;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  font:inherit;font-size:15px;padding:13px 18px;border-radius:var(--radius);
  cursor:pointer;text-align:left;width:100%;transition:border-color .15s,background .15s,transform .08s;
}
.btn:hover{border-color:var(--accent);background:var(--bg-3)}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--line);background:var(--bg-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;text-align:center;font-weight:600}
.btn-primary:hover{background:#8f74ff;border-color:#8f74ff}
.btn-ghost{width:auto;background:none;border-color:transparent;color:var(--ink-faint);font-size:13px;padding:8px 12px}
.btn-ghost:hover{color:var(--ink);background:none;border-color:var(--line)}

/* --- hud --- */
.hud{padding:16px 0 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
/* The theme toggle is position:fixed at top-right of the viewport, and the
   HUD is position:sticky — so this row sits in the same screen band as the
   toggle for as long as the game screen is open. The right padding is a
   permanent gutter, not a one-off nudge: without it the toggle button
   overlaps the age text every time, not just at a particular scroll depth. */
.hud-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:42px}
.hud-age{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;color:var(--ink-faint);letter-spacing:.04em;white-space:nowrap}
.lifebar{height:3px;background:var(--bg-3);border-radius:2px;margin:12px 0 14px;overflow:hidden}
.lifebar-fill{height:100%;background:var(--rank,var(--accent));transition:width .5s ease}

/* Rank badge: the word the Spell currently uses for you (Aspirant, Sleeper,
   Awakened, Master...), plus a 7-pip ladder showing how far up the Soul
   Ranks that word sits. */
.rank-badge{display:flex;flex-direction:column;gap:5px}
.rank-badge-name{
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rank,var(--ink-dim));
  border:1px solid currentColor;border-radius:99px;padding:3px 11px;
  display:inline-block;width:fit-content;
}
.rank-pips{display:inline-flex;gap:4px;padding-left:2px}
.rank-pips i{width:6px;height:6px;border-radius:50%;background:var(--line);display:inline-block}
.rank-pips i.on{background:var(--rank,var(--accent));box-shadow:0 0 5px -1px var(--rank,var(--accent))}

/* Runes: the Spell's status page, as the book describes it — written where
   only the carrier can see it. Each stat gets a glyph in a glowing ring,
   coloured by current rank, so the whole strip's palette shifts as the
   character climbs. Aspect gets its own rune in the memory-gold accent,
   to read as personal rather than a rank-conferred number. */
.rune-strip{display:flex;flex-wrap:wrap;gap:10px 14px;padding-top:2px}
.rune{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:38px;cursor:default}
.rune-glyph{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;font-family:ui-serif,Georgia,serif;
  color:var(--rank,var(--accent));background:var(--bg-2);
  border:1px solid var(--rank,var(--accent));
  box-shadow:0 0 9px -3px var(--rank,var(--accent));
}
#hud-runes .rune-aspect{cursor:pointer}
.rune-aspect .rune-glyph{color:var(--accent-2);border-color:var(--accent-2);box-shadow:0 0 9px -3px var(--accent-2)}
.rune-val{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.rune-name{font-family:ui-serif,Georgia,serif;font-style:italic;font-size:12px;color:var(--ink)}
.rune-label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);line-height:1}

.rune-expand{
  appearance:none;border:none;background:none;color:var(--ink-faint);
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:.06em;
  padding:10px 0 2px;cursor:pointer;text-align:left;
}
.rune-expand:hover{color:var(--ink)}
.rune-panel{padding-top:6px;animation:fade .2s ease}
.rune-strip-secondary{padding-top:4px}
.rune-flaw{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;color:var(--ink-faint);margin:10px 0 0;font-style:italic}

/* --- story --- */
.story{flex:1;padding:26px 0 12px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.event-title{
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;
}
.event-text{font-size:17px;line-height:1.75;white-space:pre-wrap}
.event-text em{color:var(--accent-2);font-style:italic}
.outcome{
  margin-top:20px;padding:14px 16px;border-left:2px solid var(--rank,var(--accent));
  background:var(--bg-2);border-radius:0 var(--radius) var(--radius) 0;font-size:16px;
}
.outcome.fail{border-left-color:var(--danger)}
.deltas{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px}
.delta.up{color:var(--ok)} .delta.down{color:var(--danger)}
.choices{display:flex;flex-direction:column;gap:10px;margin:26px 0 8px}
.choice-hint{display:block;font-size:12px;color:var(--ink-faint);font-family:ui-sans-serif,system-ui,sans-serif;margin-top:4px}
.toolbar{display:flex;justify-content:space-between;padding:8px 0 16px;border-top:1px solid var(--line)}

/* --- end --- */
.screen-end .wrap{padding:32px 0 40px}
.end-badge{display:flex;justify-content:center;margin-bottom:18px}
.rank-badge-lg .rank-badge-name{font-size:14px;padding:5px 16px}
.rank-badge-lg{align-items:center}
.rank-badge-lg .rank-pips{align-self:center}
.end-title{font-size:28px;margin:0 0 8px;text-align:center}
.end-cause{color:var(--ink-dim);font-style:italic;margin:0 0 22px;text-align:center}

.rune-strip-end{justify-content:center;padding:14px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px}

.end-section-title{
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 12px;text-align:left;
}

/* Achievements: chips, most-dramatic-first, so a good run is legible at a
   glance instead of buried in a stat list. */
.achv-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.achv-chip{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent-2);
  border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;
}
.achv-chip b{font-size:14px;color:var(--ink)}
.achv-chip span{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;color:var(--ink-dim)}
.achv-empty{color:var(--ink-faint);font-style:italic;font-size:14px;text-align:left;margin-bottom:28px}

/* Life at a glance: small tiles instead of a dense list — the two or three
   numbers that matter read in one pass. */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;text-align:left}
.stat-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.stat-tile b{
  display:block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;
}
.stat-tile span{font-size:14px;color:var(--ink);line-height:1.4}
.stat-tile.wide{grid-column:1 / -1}

/* --- feedback links --- */
.feedback-row{display:flex;gap:10px;margin-top:14px}
.feedback-row .btn{width:auto;flex:1;text-align:center;font-size:13px;padding:10px 12px;border-color:var(--line)}
.feedback-note{color:var(--ink-faint);font-size:11px;text-align:center;margin:10px 0 0;line-height:1.5}

/* --- sheet --- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;padding:22px;width:100%;max-width:var(--maxw);max-height:82dvh;overflow:auto;animation:up .25s ease}
@keyframes up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px}
.sheet-line{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--line);font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px}
.sheet-line span:last-child{color:var(--ink-dim);text-align:right}
.sheet-note{margin:4px 0 6px;color:var(--ink-dim);font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;line-height:1.45}
.sheet-section{margin:20px 0 8px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sheet .btn{margin-top:20px;text-align:center}

/* --- guide (first-launch primer) ---
   Reuses the sheet backdrop, but centred rather than bottom-docked: it is
   the first thing a new player sees, so it reads as a page, not a drawer. */
#guide{align-items:center;padding:16px;z-index:40}
.guide{border-radius:var(--radius);max-height:88dvh;display:flex;flex-direction:column;overflow:hidden}
.guide h3{margin-bottom:6px}
.guide-title{font-size:22px;margin:0 0 12px}
.guide-body{font-size:15px;line-height:1.6;flex:1;min-height:0;overflow:auto}
.guide-body p{margin:0 0 12px}
.guide-body em{color:var(--accent-2)}
.guide-formula{
  text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;
  letter-spacing:.04em;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)
}
.guide-code{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;color:var(--ink-dim);white-space:nowrap}
.guide-note{font-size:13px;color:var(--ink-faint)}
.guide-runes{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.guide-rune{display:flex;gap:12px;align-items:flex-start;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;color:var(--ink-dim)}
.guide-rune b{color:var(--ink)}
.guide-rune .rune{flex:none}
.guide-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);border-radius:99px;padding:1px 6px}
.guide-dots{display:flex;justify-content:center;gap:6px;margin:8px 0 4px}
.guide-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.guide-dots i.on{background:var(--accent)}
.guide-nav{display:flex;align-items:center;gap:8px;margin-top:12px}
.guide-nav .btn{margin-top:0}
.guide-nav .btn-primary{width:auto;margin-left:auto;padding:11px 26px}
.btn-guide{align-self:center}