/* ─────────────────────────────────────────────────────────────
   PRETEND — a life that isn't yours.
   Warm dark, paper-at-dusk. Serif for the fiction, sans for the
   machinery. Nothing external loads: no fonts, no frameworks.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:#efe7da;
  --ink-2:#b8ab98;
  --ink-3:#7d7263;
  --bg:#14110d;
  --bg-2:#1c1813;
  --bg-3:#241f18;
  --line:#332c23;
  --gold:#d9a441;
  --gold-dim:#8a6a2c;
  --ember:#c96f43;
  --serif:ui-serif,Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans:ui-sans-serif,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial,sans-serif;
  --rad:14px;
  --shell:min(660px,100%);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.hidden{display:none !important}

#app{position:relative;height:100%;overflow:hidden}

.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  opacity:0;transition:opacity .45s ease;
}
.screen.is-on{display:flex;opacity:1}
.screen.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* warm glow behind the quiet screens */
.hearth{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(201,111,67,.20), transparent 62%),
    radial-gradient(90% 55% at 50% -10%, rgba(217,164,65,.09), transparent 60%);
}

/* ══════════ HOME ══════════ */
.home-wrap{
  position:relative;margin:auto;padding:34px 26px 40px;
  width:var(--shell);text-align:center;
}
.eyebrow{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:20px;
}
.wordmark{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(52px,15vw,88px);line-height:1;margin:0 0 26px;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,#f6ecda,#d9a441 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{
  font-family:var(--serif);font-size:19px;line-height:1.62;
  color:var(--ink-2);margin:0 auto 14px;max-width:44ch;
}
.lede.dim{color:var(--ink-3);font-style:italic}
.home-actions{margin-top:30px;display:flex;flex-direction:column;gap:11px;align-items:center}
.home-meta{
  margin-top:26px;display:flex;gap:16px;justify-content:center;align-items:center;
  flex-wrap:wrap;font-size:13px;color:var(--ink-3);
}
.footnote{margin-top:34px;font-size:12px;color:#5c5346}

/* ══════════ BUTTONS ══════════ */
.btn{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:12px 22px;border-radius:var(--rad);font-size:15px;
  transition:border-color .18s,background .18s,transform .12s;
}
.btn:hover{border-color:var(--gold-dim);background:#2b241b}
.btn:active{transform:translateY(1px)}
.btn-lg{
  padding:15px 40px;font-size:17px;min-width:230px;
  background:linear-gradient(180deg,#e0ae4d,#c08b2b);
  color:#1a1409;border-color:transparent;font-weight:600;
}
.btn-lg:hover{background:linear-gradient(180deg,#eebc59,#cf9832);border-color:transparent}
.btn-ghost{
  background:transparent;color:var(--ink-2);border:1px solid var(--line);font-weight:400;
}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.linkish{
  color:var(--ink-3);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#3d352a;padding:4px;
}
.linkish:hover{color:var(--gold)}
.icon-btn{
  width:38px;height:38px;border-radius:10px;color:var(--ink-3);font-size:18px;
}
.icon-btn:hover{background:var(--bg-2);color:var(--ink)}

/* ══════════ PLAY: top bar ══════════ */
.bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#191510,#14110d);
}
.bar-mid{flex:1;text-align:center;line-height:1.25}
.bar-day{font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.bar-chapter{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.beads{display:flex;gap:5px;width:38px;justify-content:flex-end}
.bead{width:7px;height:7px;border-radius:50%;background:#2f281f;transition:background .3s}
.bead.on{background:var(--gold)}

/* ══════════ PLAY: stage ══════════ */
.stage{
  flex:1;min-height:0;overflow-y:auto;
  padding:30px 22px 44px;
  width:var(--shell);margin:0 auto;
}
.place{
  font-size:10px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 16px;
}
.prose{
  font-family:var(--serif);font-size:20px;line-height:1.68;color:var(--ink);
  margin-bottom:8px;
}
.prose p{margin:0 0 15px}
.echo{
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.6;
  color:var(--ember);margin:4px 0 8px;min-height:0;
}
.fade-in{animation:fade .55s ease both}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.choices{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.choice{
  text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--rad);padding:14px 17px;font-size:16px;color:var(--ink-2);
  line-height:1.45;transition:border-color .16s,background .16s,color .16s,transform .12s;
}
.choice:hover{border-color:var(--gold-dim);background:var(--bg-3);color:var(--ink)}
.choice:active{transform:translateY(1px)}
.choice.picked{border-color:var(--gold);background:#2a2116;color:var(--ink)}
.choice.dud{opacity:.28;pointer-events:none}

.btn-next{display:block;margin:26px auto 0;min-width:170px}

/* the occasional typed line */
.ask{
  margin-top:26px;padding:18px;border:1px dashed var(--line);
  border-radius:var(--rad);background:var(--bg-2);
  display:flex;flex-direction:column;gap:11px;align-items:flex-start;
}
.ask-q{font-family:var(--serif);font-size:17px;color:var(--ink-2);line-height:1.5}
.ask-input{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--ink);font-family:var(--serif);font-size:17px;outline:none;
}
.ask-input:focus{border-color:var(--gold-dim)}
.ask .btn{align-self:flex-start}

/* ══════════ END OF DAY ══════════ */
.card-wrap{
  position:relative;margin:auto;padding:30px 22px;width:var(--shell);
}
.postcard{
  border:1px solid var(--line);border-radius:18px;padding:28px 26px;
  background:linear-gradient(165deg,#221d16,#191510);
  box-shadow:0 22px 50px rgba(0,0,0,.42);
}
.pc-top{
  display:flex;justify-content:space-between;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.pc-body{font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink)}
.pc-body p{margin:0 0 14px}
.pc-body p:last-child{margin-bottom:0}
.pc-nudge{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-3);font-style:italic;font-family:var(--serif);
}
.pc-nudge:empty{display:none}
.day-actions{margin-top:26px;display:flex;flex-direction:column;gap:11px;align-items:center}

/* ══════════ THE LEDGER ══════════ */
.ledger-wrap{width:var(--shell);margin:0 auto;padding:44px 22px 80px}
.led-eyebrow{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:14px;
}
.led-title{
  font-family:var(--serif);font-size:clamp(30px,7vw,42px);font-weight:400;
  line-height:1.15;margin:0 0 22px;color:var(--ink);
}
.led-title em{color:var(--gold);font-style:italic}
.led-prose{
  font-family:var(--serif);font-size:18px;line-height:1.68;color:var(--ink-2);
  margin:0 0 16px;
}
.led-prose strong{color:var(--ink);font-weight:600}

.led-block{
  border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  background:var(--bg-2);margin:26px 0;
}
.led-block h3{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 14px;font-weight:600;
}
.led-offer{
  font-family:var(--serif);font-size:23px;line-height:1.45;color:var(--ink);margin:0;
}
.led-offer em{color:var(--gold);font-style:normal}

.receipt{
  display:flex;gap:13px;padding:11px 0;border-bottom:1px solid #292319;
  font-size:15px;color:var(--ink-2);line-height:1.5;
}
.receipt:last-child{border-bottom:0;padding-bottom:0}
.receipt-day{
  flex:0 0 52px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px;
}
.receipt-what{font-family:var(--serif);font-style:italic;color:var(--ink)}

.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:flex;align-items:center;gap:12px;font-size:13px}
.bar-name{
  flex:0 0 86px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.bar-track{flex:1;height:6px;background:#2a2419;border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:99px}
.bar-row.top .bar-name{color:var(--gold)}
.bar-num{flex:0 0 30px;text-align:right;color:var(--ink-3);font-size:12px}

.led-move{
  font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink);margin:0 0 12px;
}
.led-price{font-size:14px;color:var(--ink-3);margin:0}
.led-actions{margin-top:34px;display:flex;flex-direction:column;gap:11px;align-items:center}

/* progress toward the ledger, shown before it opens */
.led-locked{text-align:center;padding:20px 0}
.led-count{
  font-family:var(--serif);font-size:56px;color:var(--gold);line-height:1;margin:6px 0 4px;
}
.led-count small{font-size:20px;color:var(--ink-3)}

@media(max-width:420px){
  .prose{font-size:18px}
  .stage{padding:24px 18px 40px}
  .ledger-wrap{padding:34px 18px 70px}
}

/* keep the Spine bar clear of the bottom edge */
body{padding-bottom:env(safe-area-inset-bottom)}

/* back to the hall */
.back{color:#7d7263;text-decoration:none;border-bottom:1px solid #3d352a;padding-bottom:2px}
.back:hover{color:var(--gold);border-color:var(--gold-dim)}