/* ============================================================
   KATABASIS house style. Single theme: aged parchment.
   Merges the approved scroll-frame shell (frame-mock) with the
   prototype's component styling. The parchment texture is Alba's
   asset; the burn/tear is layered on top in the engine and here,
   controlled by one variable (--burn), held ~30% below the mockup
   so the sheet reads aged, not damaged. CLAUDE.md sections 5, 6.
   No em dashes anywhere. touch-action:manipulation on tap targets.
   ============================================================ */
:root{
  --bg:#c3b287; --panel:#d3c39d; --panel2:#cdbc94; --line:#b3a074;
  --ink:#241d12; --ink-soft:#4f4126; --ink-faint:#7a6a49;
  --bronze:#7a5a22; --bronze-deep:#5f451a; --bronze-faint:#a58f5f;
  --blood:#7a2c20; --sight:#365e4f; --good:#3a6444; --edge:#8a6c3a;
  --burn:.7;   /* one dial for the whole scorch. 1.0 = mockup strength */
  /* dark stone surround: topbar text lifts off the charcoal ground */
  --stone-base:#16181b; --stone-title:#d8b878; --stone-label:#b6a884; --stone-border:#5a4a2e;
  /* the surround treatment itself, shared by the play view and the title screen */
  --stone-bg:
    radial-gradient(1200px 800px at 50% 42%, rgba(40,44,48,0) 0%, rgba(14,15,17,0.55) 78%, rgba(8,9,10,0.82) 100%),
    radial-gradient(300px 240px at 22% 30%, rgba(90,92,96,0.12), transparent 70%),
    radial-gradient(360px 300px at 78% 66%, rgba(70,72,76,0.10), transparent 72%),
    linear-gradient(180deg, #34373b, #23262a 55%, #16181b);
  --serif:'EB Garamond',serif; --disp:'Cinzel',serif; --mono:'IBM Plex Mono',monospace;
  --check:'Cormorant Garamond',serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--stone-base);   /* dark stone base; the surround treatment is on body::before */
  color:var(--ink);
  font-family:var(--serif); font-size:20px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:hidden;                 /* the PAGE never scrolls */
  display:flex; flex-direction:column;
}
/* Surround: dark stone slab in a pool of light. Fixed to the viewport,
   never scrolls. First radial is the vignette (light centre, near-black
   corners); the two small radials are faint stone mottling; the linear
   is the base charcoal. The parchment sheet rests on top of this. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--stone-bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:340px 340px;
  opacity:.45; mix-blend-mode:multiply;
}
button{touch-action:manipulation; font-family:inherit;}

/* ---- top strip: fixed ---- */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:14px; padding:12px 22px;
}
/* top-bar sits over the dark stone ground, so its text lifts to
   warm bronze / muted parchment rather than the dark ink used on
   parchment. */
.topbar h1{font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.34em; color:var(--stone-title);}
.topbar .sub{font-family:var(--disp); font-size:13px; letter-spacing:.2em; color:var(--stone-label);}
.topbar .spacer{flex:1;}
#saveDot{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-label);}
/* base .tbtn reads on parchment (the Ledger drawer); the top-bar
   variant below lifts to stone colours for the dark ground. */
.tbtn{
  background:none; border:1px solid var(--bronze-faint); color:var(--ink-soft);
  border-radius:2px; padding:6px 14px; font-family:var(--disp); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer; touch-action:manipulation;
}
.tbtn:hover{border-color:var(--bronze); color:var(--bronze);}
.topbar .tbtn{border-color:var(--stone-border); color:var(--stone-label);}
.topbar .tbtn:hover{border-color:var(--stone-title); color:var(--stone-title);}

/* ============================================================
   THE SCROLL: fixed to viewport height, only interior scrolls
   ============================================================ */
.scrollwrap{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:14px 20px 26px;
}
.scroll{
  position:relative;
  width:min(760px, 94vw);
  height:100%;
  display:flex; flex-direction:column;
  /* stronger lift so the sheet sits above the stone slab */
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
/* rolled bronze rods top and bottom */
.rod{
  flex:0 0 auto; height:20px; margin:0 -4px; position:relative; z-index:3;
  background:linear-gradient(var(--bronze-deep), var(--bronze-faint) 45%, var(--bronze-deep));
  border:1px solid var(--bronze-deep); border-radius:11px;
  box-shadow:0 3px 10px rgba(50,34,14,.4), inset 0 1px 0 rgba(255,240,200,.4);
}
.rod::before, .rod::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:16px; height:28px; border-radius:4px;
  background:radial-gradient(circle at 40% 40%, var(--bronze-faint), var(--bronze-deep));
  border:1px solid var(--bronze-deep);
}
.rod::before{left:-12px;} .rod::after{right:-12px;}

/* the parchment sheet: Alba's texture, torn/burnt edges via SVG mask */
.sheet{
  flex:1 1 auto; min-height:0; position:relative;
  background:
    linear-gradient(rgba(211,195,157,.12), rgba(205,188,148,.22)),
    url("../art/parchment_bg.webp") center/cover no-repeat,
    linear-gradient(var(--panel), var(--panel2));
  -webkit-mask:var(--tornmask); mask:var(--tornmask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* burnt scorch bloom along the edges, painted over the sheet */
.sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(140% 34px at 50% 0%,  rgba(58,42,18,.34), transparent 72%),
    radial-gradient(140% 34px at 50% 100%,rgba(58,42,18,.34), transparent 72%),
    radial-gradient(46px 130% at 0% 50%,  rgba(58,42,18,.5), transparent 68%),
    radial-gradient(46px 130% at 100% 50%,rgba(58,42,18,.5), transparent 68%);
  -webkit-mask:var(--tornmask); mask:var(--tornmask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  mix-blend-mode:multiply; opacity:calc(.85 * var(--burn));
}
/* a few discrete scorch blotches */
.sheet::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(38px 30px at 88% 16%, rgba(34,22,7,.55), transparent 72%),
    radial-gradient(52px 34px at 8% 62%,  rgba(34,22,7,.42), transparent 74%),
    radial-gradient(30px 26px at 70% 92%, rgba(34,22,7,.5),  transparent 72%);
  mix-blend-mode:multiply; opacity:calc(.7 * var(--burn));
}
.fadebot{
  position:absolute; left:0; right:0; bottom:0; height:52px; z-index:2; pointer-events:none;
  background:linear-gradient(transparent, var(--panel2) 88%);
  opacity:.9;
}
/* interior scroller (this is #main) */
.page{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; z-index:1;
  padding:46px 54px 54px;
  scrollbar-width:thin; scrollbar-color:var(--bronze-faint) transparent;
}
.page::-webkit-scrollbar{width:9px;}
.page::-webkit-scrollbar-thumb{background:var(--bronze-faint); border-radius:5px;}
.page::-webkit-scrollbar-track{background:transparent;}

/* ---- art plates ---- */
.beat{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--edge); border-radius:2px; margin:0 0 26px;
  box-shadow:0 6px 18px rgba(50,34,14,.28);
}
.cover{
  display:block; width:100%; max-width:520px; aspect-ratio:16/9; object-fit:cover;
  margin:0 auto 22px; border:1px solid var(--edge); border-radius:2px;
  box-shadow:0 8px 22px rgba(50,34,14,.32);
  position:relative; z-index:1;
}

/* ---- scene interior ---- */
.scene-title{font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze);}
.mdiv{
  height:14px; margin:18px 0 26px;
  background:repeat-x left center/auto 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 12 L0 4 L10 4 L10 10 L4 10 L4 6 M14 12 L14 4 L24 4 L24 10 L18 10 L18 6' fill='none' stroke='%23a58f5f' stroke-width='1.2'/%3E%3C/svg%3E");
  opacity:.85;
}
.mdiv span{display:none;}
.narr p{margin-bottom:21px; color:var(--ink); opacity:0; animation:rise .7s ease forwards;}
.narr > p:first-of-type:not(.aside)::first-letter{
  font-family:var(--disp); font-weight:700; font-size:62px; line-height:.82;
  color:var(--bronze); float:left; padding:8px 12px 0 0;
}
.narr .aside{color:var(--ink-soft); font-style:italic; border-left:2px solid var(--bronze-faint); padding-left:20px;}
/* chronicle as a ledger list (the "descent so far" review) */
/* chapter heading above each run of chronicle entries */
.chron-chapter{
  clear:both; margin:22px 0 8px;
  font-family:var(--disp); font-size:11px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--bronze);
  opacity:0; animation:rise .7s .12s ease forwards;
}
.chron-chapter:first-of-type{margin-top:18px;}
.chronicle-list{
  list-style:none; margin:6px 0 22px; padding:0; clear:both;
  opacity:0; animation:rise .7s .18s ease forwards;
}
.chronicle-list li{
  position:relative; padding-left:26px; margin-bottom:13px;
  color:var(--ink-soft); font-style:italic; line-height:1.5;
}
.chronicle-list li:last-child{ margin-bottom:0; }
.chronicle-list li::before{
  content:"\25C6"; position:absolute; left:3px; top:.12em;
  color:var(--bronze-faint); font-size:10px; font-style:normal;
}
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ---- omen (dice) ---- */
.rollbox{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  border:1px solid var(--bronze-faint); border-left:3px solid var(--bronze);
  background:linear-gradient(90deg, rgba(201,161,95,.06), transparent);
  padding:12px 16px; margin:0 0 26px;
  opacity:0; animation:rise .5s ease forwards;
}
.rollbox .rt{font-family:var(--disp); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--bronze-deep); display:block; margin-bottom:4px;}
/* drawn die face in the roll line, in place of the numeral */
.dieface{width:17px; height:17px; vertical-align:-3px; margin:0 2px;}
.rollbox.fail{border-left-color:var(--blood); background:linear-gradient(90deg, rgba(142,58,44,.08), transparent);}
.rollbox.ok{border-left-color:var(--good);}
.fxnote{font-family:var(--mono); font-size:12px; color:var(--bronze); margin:2px 0 22px; opacity:0; animation:rise .6s .15s ease forwards;}

/* ---- choices ---- */
.choices{margin-top:34px;}
.choices .clabel{
  font-family:var(--disp); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
  text-align:center; position:relative;
}
.choices .clabel::before, .choices .clabel::after{content:"\2767"; color:var(--bronze-faint); margin:0 12px; font-size:12px;}
.choice{
  display:block; width:100%; text-align:left;
  background:linear-gradient(var(--panel2), var(--panel2));
  border:1px solid var(--bronze-faint); border-radius:3px;
  color:var(--ink); padding:16px 20px; margin-bottom:13px;
  font-family:var(--serif); font-size:19px; line-height:1.5; cursor:pointer;
  position:relative; touch-action:manipulation;
  box-shadow:0 1px 0 rgba(255,248,225,.35) inset, 0 2px 6px rgba(50,34,14,.14);
  transition:border-color .18s, box-shadow .18s, transform .1s, background .18s, padding .18s;
  opacity:0; animation:rise .6s ease forwards;
}
/* laurel/vine flourish at the left */
.choice::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:16px; height:34px; opacity:0; transition:opacity .2s;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 34'%3E%3Cg fill='none' stroke='%237a5a22' stroke-width='1.1'%3E%3Cpath d='M8 2 C8 12 8 22 8 32'/%3E%3Cpath d='M8 8 C4 6 2 8 2 11 C5 11 7 10 8 8Z' fill='%237a5a22'/%3E%3Cpath d='M8 14 C12 12 14 14 14 17 C11 17 9 16 8 14Z' fill='%237a5a22'/%3E%3Cpath d='M8 20 C4 18 2 20 2 23 C5 23 7 22 8 20Z' fill='%237a5a22'/%3E%3Cpath d='M8 26 C12 24 14 26 14 29 C11 29 9 28 8 26Z' fill='%237a5a22'/%3E%3C/g%3E%3C/svg%3E");
}
.choice:hover{
  border-color:var(--bronze-deep);
  background:linear-gradient(var(--panel), var(--panel));
  box-shadow:0 1px 0 rgba(255,248,225,.5) inset, 0 3px 10px rgba(50,34,14,.2);
  padding-left:32px;
}
.choice:hover::before{opacity:.85;}
.choice:active{transform:translateY(1px);}
.choice .req{display:block; font-family:var(--check); font-style:italic; font-weight:500; font-size:16px; letter-spacing:.02em; color:var(--ink-faint); margin-top:6px;}
.choice.sight{border-color:var(--sight); border-style:solid; background:linear-gradient(rgba(54,94,79,.08), rgba(54,94,79,.03));}
.choice.sight::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 34'%3E%3Cg fill='none' stroke='%23365e4f' stroke-width='1.1'%3E%3Cpath d='M8 2 C8 12 8 22 8 32'/%3E%3Cpath d='M8 8 C4 6 2 8 2 11 C5 11 7 10 8 8Z' fill='%23365e4f'/%3E%3Cpath d='M8 14 C12 12 14 14 14 17 C11 17 9 16 8 14Z' fill='%23365e4f'/%3E%3Cpath d='M8 20 C4 18 2 20 2 23 C5 23 7 22 8 20Z' fill='%23365e4f'/%3E%3Cpath d='M8 26 C12 24 14 26 14 29 C11 29 9 28 8 26Z' fill='%23365e4f'/%3E%3C/g%3E%3C/svg%3E");
}
.choice.sight .req{color:var(--sight);}

/* ---- chapter cards ---- */
.chapwrap{min-height:100%; display:flex; flex-direction:column; justify-content:center;}
.chapcard{text-align:center; position:relative; padding:30px 10px 20px;}
.chapcard .ghost{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  font-family:var(--disp); font-weight:900; font-size:min(38vw,240px);
  color:var(--bronze); opacity:.06; pointer-events:none; user-select:none;
}
.chapcard .num{font-family:var(--disp); font-size:12px; letter-spacing:.44em; text-transform:uppercase; color:var(--ink-faint); opacity:0; animation:rise .8s .1s ease forwards; position:relative; z-index:1;}
.chapcard h2{font-family:var(--disp); font-weight:700; font-size:min(9vw,44px); letter-spacing:.1em; color:var(--bronze); margin:18px 0 16px; opacity:0; animation:rise .9s .35s ease forwards; position:relative; z-index:1;}
.chapcard .ep{font-style:italic; color:var(--ink-soft); max-width:420px; font-size:19px; margin:0 auto; opacity:0; animation:rise .9s .65s ease forwards; position:relative; z-index:1;}
.cardchoices{max-width:320px; margin:30px auto 0; text-align:center;}
.cardchoices .choice{text-align:center; font-family:var(--disp); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze);}
.cardchoices .choice::before{display:none;}
.cardchoices .choice:hover{padding-left:20px;}

/* ============================================================
   THE ALMANAC: annotated terms, popup, Ledger rows.
   myth carries a bronze dotted underline, lore a fainter ink one,
   so a player is never misled about what is real mythology.
   ============================================================ */
.alm{
  background:none; border:none; padding:2px 0; margin:0;
  font:inherit; color:inherit; cursor:pointer; text-align:left;
  text-decoration:none; border-bottom:1px dotted var(--bronze);
  touch-action:manipulation;
}
.alm-myth{border-bottom-color:var(--bronze);}
.alm-lore{border-bottom-color:var(--ink-faint);}
.alm:hover{border-bottom-style:solid;}
.alm:focus-visible{outline:1px solid var(--bronze); outline-offset:2px;}

#almScrim{
  position:fixed; inset:0; background:rgba(10,11,12,.55); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#almScrim.open{opacity:1; pointer-events:auto;}
#almPopup{
  position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(460px,90vw); max-height:76vh; overflow-y:auto;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--bronze-faint); border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:22px 24px 18px;
}
.almhead{margin-bottom:12px;}
#almTerm{
  display:block; font-family:var(--disp); font-weight:700; font-size:21px;
  letter-spacing:.06em; color:var(--bronze);
}
.almkind{
  display:block; font-family:var(--disp); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; margin-top:5px;
}
.almkind-myth{color:var(--bronze-deep);}
.almkind-lore{color:var(--ink-faint);}
#almBody{font-size:17px; line-height:1.68; color:var(--ink-soft);}
.almfoot{margin-top:18px; text-align:right;}
.almrow{padding:3px 0;}
.almrow .alm{font-size:15.5px;}
@media (max-width:760px){
  #almPopup{width:92vw; max-height:80vh; padding:20px 18px 16px;}
  #almBody{font-size:16.5px;}
  .alm{padding:4px 0;}
}

/* ---- the Ledger (drawer) ---- */
#scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:30; opacity:0; pointer-events:none; transition:opacity .25s;}
#scrim.open{opacity:1; pointer-events:auto;}
#drawer{
  position:fixed; top:0; right:-380px; width:350px; max-width:94vw; height:100vh;
  background:var(--panel); border-left:1px solid var(--bronze-faint);
  z-index:31; transition:right .28s ease; overflow-y:auto; padding:24px 22px 40px;
}
#drawer.open{right:0;}
#drawer h3{font-family:var(--disp); font-size:11.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--bronze-deep); margin:22px 0 8px;}
.pname{font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:.06em; color:var(--ink);}
.pchapter{font-family:var(--disp); font-size:12px; letter-spacing:.24em; color:var(--bronze); margin-top:4px; text-transform:uppercase;}
.statrow{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line); font-size:16.5px;}
.statrow .v{font-family:var(--disp); font-weight:700; font-size:20px; color:var(--bronze);}
.dots{letter-spacing:4px; font-family:var(--mono); font-size:12px;}
.dots .on{color:var(--blood);}
.dots .off{color:var(--line);}
.hub .on{color:var(--bronze);}
.bless{padding:9px 0; border-bottom:1px solid var(--line);}
.bless .bn{font-family:var(--disp); font-size:14.5px; letter-spacing:.06em; color:var(--ink);}
.bless .bb{color:var(--ink-soft); font-size:15.5px;}
.bless .bp{color:var(--blood); font-size:15.5px; font-style:italic;}
.small{color:var(--ink-soft); font-size:16px; padding:4px 0;}
.chron{font-size:15px; color:var(--ink-faint); padding:5px 0; border-bottom:1px solid var(--line); font-style:italic;}
.empty{color:var(--ink-faint); font-style:italic; font-size:16px;}
.dfoot{margin-top:28px; display:flex; gap:8px; flex-wrap:wrap;}
.dfoot .tbtn{font-size:12.5px; padding:8px 16px;}

/* ---- title screen: the same scroll on the same stone as the play view ---- */
#titleScreen{
  position:fixed; inset:0; z-index:50; background:var(--stone-bg);
  display:flex; flex-direction:column;
}
/* the title content rides the shared .page scroller, centred */
.titlepage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
/* sized to fit inside the scroll sheet at both desktop and mobile widths */
#titleScreen .kt{
  font-family:var(--disp); font-weight:900; font-size:min(10vw,72px);
  letter-spacing:.12em; color:var(--bronze); text-indent:.12em;
  text-shadow:0 2px 0 rgba(255,248,225,.4), 0 3px 14px rgba(60,42,16,.25);
  opacity:0; animation:rise 1.1s .1s ease forwards;
}
#titleScreen .ks{font-family:var(--disp); font-size:12px; color:var(--ink-faint); letter-spacing:.5em; text-transform:uppercase; margin:14px 0 24px; text-indent:.5em; opacity:0; animation:rise 1s .5s ease forwards;}
#titleScreen .tline{
  width:min(300px,60vw); height:14px;
  background:repeat-x center/auto 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 12 L0 4 L10 4 L10 10 L4 10 L4 6 M14 12 L14 4 L24 4 L24 10 L18 10 L18 6' fill='none' stroke='%23a58f5f' stroke-width='1.2'/%3E%3C/svg%3E");
  opacity:0; animation:rise 1s .4s ease forwards;
}
#titleScreen .blurb{max-width:460px; color:var(--ink-soft); margin:30px 0 40px; line-height:1.8; font-style:italic; font-size:18px; opacity:0; animation:rise 1s .8s ease forwards;}
#titleScreen .entry{opacity:0; animation:rise 1s 1.1s ease forwards;}

/* ---- save select: one row per descent ---- */
.slotlabel{
  font-family:var(--disp); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;
}
.slotlist{width:min(430px,86vw); margin:0 auto 22px;}
.slot{
  display:flex; align-items:stretch; gap:8px; margin-bottom:10px;
}
.slotmain{
  flex:1 1 auto; text-align:left; cursor:pointer; touch-action:manipulation;
  background:linear-gradient(var(--panel2), var(--panel2));
  border:1px solid var(--bronze-faint); border-radius:3px;
  padding:12px 16px; font-family:inherit; color:var(--ink);
  box-shadow:0 1px 0 rgba(255,248,225,.35) inset, 0 2px 6px rgba(50,34,14,.14);
  transition:border-color .18s, box-shadow .18s;
}
.slotmain:hover{border-color:var(--bronze-deep); box-shadow:0 1px 0 rgba(255,248,225,.5) inset, 0 3px 10px rgba(50,34,14,.2);}
.slotname{
  display:block; font-family:var(--disp); font-weight:700; font-size:17px;
  letter-spacing:.05em; color:var(--bronze);
}
.slotmeta{
  display:block; font-family:var(--check); font-style:italic; font-size:15px;
  color:var(--ink-faint); margin-top:3px;
}
.slotbtn{
  flex:0 0 auto; align-self:center; cursor:pointer; touch-action:manipulation;
  background:none; border:1px solid var(--bronze-faint); border-radius:2px;
  color:var(--ink-soft); padding:8px 12px;
  font-family:var(--disp); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.slotbtn:hover{border-color:var(--bronze); color:var(--bronze);}
.slotbtn.danger{border-color:var(--blood); color:var(--blood);}
.slotconfirm{
  flex:0 0 auto; align-self:center; display:flex; align-items:center; gap:6px;
  font-family:var(--check); font-style:italic; font-size:15px; color:var(--blood);
}
@media (max-width:760px){
  /* keep the row clear of the torn edge, which crops the last few px */
  .slotlist{width:82vw;}
  .slotmain{padding:12px 14px;}
  .slotname{font-size:16px;}
  .slotbtn{padding:8px 10px;}
}
#titleScreen input{
  background:none; border:none; border-bottom:1px solid var(--bronze-faint);
  color:var(--ink); padding:10px 14px; font-size:22px; font-family:var(--disp);
  letter-spacing:.08em; text-align:center; width:280px; margin-bottom:26px;
}
#titleScreen input:focus{outline:none; border-bottom-color:var(--bronze);}
#titleScreen input::placeholder{color:var(--ink-faint); font-size:16px; letter-spacing:.2em;}
.bigbtn{
  background:none; border:1px solid var(--bronze); color:var(--bronze);
  font-family:var(--disp); font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  border-radius:2px; padding:15px 38px; font-size:13px; cursor:pointer; margin:5px;
  transition:background .2s, color .2s; touch-action:manipulation;
}
.bigbtn:hover{background:var(--bronze); color:var(--bg);}
.bigbtn.ghost{border-color:var(--bronze-faint); color:var(--ink-faint);}
.bigbtn.ghost:hover{background:none; border-color:var(--bronze); color:var(--bronze);}
.hidden{display:none !important;}

/* ---- mobile: portrait parchment, tighter padding ---- */
@media (max-width:760px){
  body{font-size:19px;}
  .scrollwrap{padding:8px 10px 16px;}
  .scroll{width:96vw;}
  .sheet{
    background:
      linear-gradient(rgba(211,195,157,.12), rgba(205,188,148,.22)),
      url("../art/parchment_bg_tall.webp") center/cover no-repeat,
      linear-gradient(var(--panel), var(--panel2));
  }
  .page{padding:30px 24px 40px;}
  .beat{margin-bottom:20px;}
}

/* the passphrase gate on the title screen. Deliberately quiet: it is
   a doorway, not a security warning. */
.keynote{
  margin-top:14px; font-size:13px; line-height:1.55; font-style:italic;
  color:var(--ink-faint); max-width:340px; margin-left:auto; margin-right:auto;
}
#keyInput{ letter-spacing:.18em; }
/* Set as a spoken line rather than a label: the house label style is
   uppercase with wide tracking, which turns a sentence with a full
   stop into something that reads like signage. */
.keyhead{
  font-family:var(--disp); font-size:19px; letter-spacing:.06em;
  color:var(--bronze); margin-bottom:14px;
}
.keywarn{ margin-top:8px; font-style:normal; color:var(--ink-soft); }
.keyerr{ color:#8c3b2a; font-style:normal; margin-top:10px; }
#emptyLedger .keyhead{ margin-bottom:8px; }
#emptyLedger .emptynote{ margin:0 auto 12px; }
#emptyLedger .tline{ margin:16px auto 12px; }
/* The gate carries more text than the other two panels, and the last
   line of it is the one the player most needs to read. Tighten the
   premise above it so the whole door lands above the fold on a 720px
   laptop rather than under the bottom fade. */
/* Both the gate and the empty ledger carry more text than the plain
   name entry does, and in each the line that matters most sits last.
   Tighten the premise above them so nothing important falls under the
   fold on a 720px laptop. */
#titleScreen:has(#titleKey:not(.hidden)) .blurb,
#titleScreen:has(#emptyLedger:not(.hidden)) .blurb{
  margin:18px 0 20px; font-size:16.5px; line-height:1.62;
}
#titleScreen:has(#titleKey:not(.hidden)) .tline{ margin:14px auto; }
#titleKey .keyhead{ margin-bottom:12px; }
#titleKey input{ margin-bottom:2px; }
#titleKey .bigbtn{ margin:2px 5px 4px; }
#titleKey .keynote{ margin-top:9px; line-height:1.48; font-size:12.5px; }
/* The bottom fade exists to hint that the parchment continues. On the
   gate nothing continues, and the line it was fading out is the one
   the player most needs to read, so it is suppressed there. */
#titleScreen:has(#titleKey:not(.hidden)) .fadebot{ display:none; }
.exporthint{
  flex-basis:100%; font-size:11.5px; font-style:italic;
  color:var(--ink-faint); margin-top:8px;
}