/* ============================================================================
   Candela Obscura - Character Creator · stylesheet
   Design tokens: candlelit dark, aged ivory, antique gold (the gilded die),
   oxblood for danger. Display: Cinzel. Body: EB Garamond.
   ============================================================================ */

:root{
  --ink:        #0e0c0a;   /* page base, warm near-black */
  --ink-2:      #15110d;   /* panel */
  --ink-3:      #1d1813;   /* raised panel */
  --ink-4:      #2a221a;   /* hover / pip empty */
  --parchment:  #ece2c8;   /* primary text */
  --parchment-2:#bdb094;   /* secondary text */
  --parchment-3:#8a7e66;   /* muted / captions */
  --gild:       #c9a24a;   /* THE accent. Gilded dice */
  --gild-bright:#ecca78;   /* gold highlight */
  --gild-deep:  #8a6e2e;   /* gold shadow */
  --ember:      #9d3b2c;   /* danger / oxblood */
  --ember-soft: #c2604e;
  --line:       rgba(201,162,74,.16);
  --line-soft:  rgba(236,226,200,.08);
  --radius: 3px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.8);
  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--parchment);
  background:var(--ink);
  font-family:"EB Garamond", Garamond, "Times New Roman", serif;
  font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* Candlelit vignette. The one ambient flourish. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(201,162,74,.10), rgba(201,162,74,0) 46%),
    radial-gradient(140% 120% at 50% 120%, rgba(157,59,44,.06), rgba(0,0,0,0) 55%);
  animation:flicker 7s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{opacity:.85} 45%{opacity:1} 70%{opacity:.78} }
@media (prefers-reduced-motion:reduce){ body::before{ animation:none } }

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 22px 96px; }

/* ---- Typography helpers ---- */
.display{ font-family:"Cinzel", "Trajan Pro", Georgia, serif; font-weight:600; letter-spacing:.04em; }
.eyebrow{ font-family:"Cinzel", Georgia, serif; font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gild); font-weight:600; }
.muted{ color:var(--parchment-2); }
.dim{ color:var(--parchment-3); }
.serifnum{ font-family:"Cinzel", Georgia, serif; }

/* ---- Masthead ---- */
.masthead{ text-align:center; padding:54px 0 26px; }
.masthead .candela{ font-size:.74rem; letter-spacing:.46em; color:var(--gild); }
.masthead h1{
  font-family:"Cinzel", serif; font-weight:600; letter-spacing:.06em;
  font-size:clamp(2.1rem, 5.4vw, 3.5rem); margin:.28em 0 .12em; color:var(--parchment);
  text-shadow:0 0 28px rgba(201,162,74,.18);
}
.masthead .sub{ color:var(--parchment-2); font-style:italic; font-size:1.05rem; }
.rule-orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin:20px auto 0; max-width:340px; color:var(--gild); }
.rule-orn::before, .rule-orn::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gild), transparent); opacity:.5; }
.rule-orn .dia{ width:9px; height:9px; transform:rotate(45deg); background:var(--gild); box-shadow:0 0 10px rgba(201,162,74,.6); }

/* ---- Stepper rail ---- */
.steps{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:30px 0 8px; }
.step-chip{
  display:flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--line);
  background:var(--ink-2); border-radius:var(--radius); cursor:pointer; color:var(--parchment-3);
  font-size:.82rem; transition:border-color .2s, color .2s, background .2s;
}
.step-chip .n{ font-family:"Cinzel",serif; font-size:.78rem; width:1.4em; text-align:center; }
.step-chip .lbl{ letter-spacing:.02em; }
.step-chip:hover{ color:var(--parchment-2); border-color:rgba(201,162,74,.34); }
.step-chip[aria-current="true"]{ color:var(--ink); background:var(--gild); border-color:var(--gild);
  box-shadow:0 0 18px -2px rgba(201,162,74,.5); }
.step-chip[aria-current="true"] .lbl{ color:var(--ink); }
.step-chip.done{ color:var(--parchment); border-color:rgba(201,162,74,.4); }
.step-chip.done .n::before{ content:"✦ "; color:var(--gild); }
.step-chip[disabled]{ opacity:.4; cursor:not-allowed; }
@media (max-width:680px){ .step-chip .lbl{ display:none } .step-chip{ padding:9px 11px } }

/* ---- Panels ---- */
.panel{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 30px 32px; margin-top:18px; box-shadow:var(--shadow);
  animation:rise .4s ease both; }
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .panel{ animation:none } }
.panel h2{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.05em; font-size:1.55rem; margin:.1em 0 .2em; }
.panel .lede{ color:var(--parchment-2); margin:0 0 22px; max-width:62ch; }
@media (max-width:560px){ .panel{ padding:22px 18px 24px } }

/* ---------- beginner explainer callout ---------- */
.plain-tip{
  position:relative;
  margin:0 0 26px;
  padding:16px 20px 18px;
  max-width:64ch;
  background:linear-gradient(180deg, rgba(201,162,74,.07), rgba(201,162,74,.03));
  border:1px solid var(--line);
  border-left:2px solid var(--gild);
  border-radius:var(--radius);
}
.plain-tip .pt-label{
  font-family:"Cinzel",serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gild); margin-bottom:7px;
}
.plain-tip .pt-head{
  margin:0 0 8px; color:var(--parchment); font-weight:500; font-size:1.04rem; line-height:1.45;
}
.plain-tip .pt-body{
  margin:0 0 8px; color:var(--parchment-2); font-size:.96rem; line-height:1.6;
}
.plain-tip .pt-body:last-child{ margin-bottom:0; }
/* When the player turns Beginner tips off, hide every explainer. */
body.tips-off .plain-tip{ display:none; }
/* Highlighted state for the toggle button when tips are on. */
#btn-tips{ color:var(--parchment-2); border-color:rgba(201,162,74,.34); }
body.tips-off #btn-tips{ color:var(--parchment-3); border-color:var(--line); }
@media (max-width:560px){ .plain-tip{ padding:14px 15px 15px } }

/* ---------- ability cost key (glossary on the Abilities step) ---------- */
.ability-key{
  margin:0 0 22px; padding:14px 18px 16px; max-width:64ch;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
}
.ability-key .ak-label{
  font-family:"Cinzel",serif; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gild); margin-bottom:10px;
}
.ability-key .ak-row{
  display:grid; grid-template-columns:200px 1fr; gap:14px;
  padding:7px 0; border-top:1px solid var(--line-soft);
}
.ability-key .ak-row:first-of-type{ border-top:0; }
.ability-key .ak-term{
  font-family:"Cinzel",serif; font-size:.82rem; color:var(--parchment); letter-spacing:.02em;
}
.ability-key .ak-def{ color:var(--parchment-2); font-size:.92rem; line-height:1.5; }
body.tips-off .ability-key{ display:none; }
@media (max-width:620px){
  .ability-key .ak-row{ grid-template-columns:1fr; gap:3px; }
  .ability-key .ak-term{ color:var(--gild-bright); }
}

/* ---- Selectable cards (roles / specialties / abilities) ---- */
.grid{ display:grid; gap:14px; }
.grid.cols2{ grid-template-columns:repeat(2,1fr); }
.grid.cols3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .grid.cols2,.grid.cols3{ grid-template-columns:1fr } }

.card{
  text-align:left; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 17px; cursor:pointer; color:var(--parchment); font:inherit; width:100%;
  transition:border-color .2s, transform .15s, background .2s; position:relative;
}
.card:hover{ border-color:rgba(201,162,74,.45); transform:translateY(-2px); }
.card .ttl{ font-family:"Cinzel",serif; font-size:1.08rem; letter-spacing:.04em; color:var(--parchment); }
.card .tag{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gild); margin-bottom:6px; }
.card .desc{ color:var(--parchment-2); font-size:.94rem; margin-top:6px; }
.card[aria-pressed="true"], .card.selected{
  border-color:var(--gild); background:linear-gradient(180deg, rgba(201,162,74,.10), var(--ink-3));
  box-shadow:inset 0 0 0 1px rgba(201,162,74,.3), 0 0 22px -6px rgba(201,162,74,.4);
}
.card.selected::after{ content:"✦"; position:absolute; top:11px; right:13px; color:var(--gild); font-size:.9rem; }

/* ---- Allocation rows (actions / drives) ---- */
.alloc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.budget{ font-family:"Cinzel",serif; letter-spacing:.05em; }
.budget b{ color:var(--gild-bright); font-size:1.15em; }
.budget.spent b{ color:var(--parchment-3); }
.rules-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 20px; }
.chip{ font-size:.78rem; padding:5px 11px; border:1px solid var(--line); border-radius:99px; color:var(--parchment-3); }
.chip.met{ color:var(--ink); background:var(--gild); border-color:var(--gild); }
.chip.met::before{ content:"✓ "; }

.drive-block{ margin-bottom:22px; }
.drive-block > .drive-name{ font-family:"Cinzel",serif; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem;
  color:var(--gild); display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.drive-block > .drive-name::after{ content:""; height:1px; flex:1; background:var(--line); }
.drive-block .res-badge{ font-family:"EB Garamond",serif; text-transform:none; letter-spacing:0; color:var(--parchment-3); font-size:.82rem; }

.arow{ display:grid; grid-template-columns: 132px 1fr auto; align-items:center; gap:12px; padding:7px 0; }
.arow .aname{ display:flex; align-items:center; gap:9px; }
.arow .aname .label{ font-size:1.02rem; }
.arow .blurb{ color:var(--parchment-3); font-size:.82rem; line-height:1.3; }
@media (max-width:620px){ .arow{ grid-template-columns:108px 1fr; } .arow .blurb{ display:none } }

/* gilded diamond toggle */
.gild-toggle{ width:18px; height:18px; flex:0 0 auto; border:none; background:transparent; cursor:pointer; padding:0;
  display:grid; place-items:center; }
.gild-toggle .dia{ width:11px; height:11px; transform:rotate(45deg); border:1.5px solid var(--gild-deep); background:transparent;
  transition:background .18s, box-shadow .18s, border-color .18s; }
.gild-toggle[aria-pressed="true"] .dia{ background:var(--gild); border-color:var(--gild-bright); box-shadow:0 0 11px rgba(201,162,74,.7); }
.gild-toggle[disabled]{ cursor:default; }
.gild-toggle.locked .dia{ background:var(--gild); border-color:var(--gild-bright); box-shadow:0 0 11px rgba(201,162,74,.7); }
.gild-toggle.inert{ visibility:hidden; }

/* pip rating control */
.pips{ display:flex; gap:7px; align-items:center; }
.pip{ width:21px; height:21px; border-radius:50%; border:1.5px solid var(--line); background:var(--ink-4);
  cursor:pointer; padding:0; transition:transform .12s, background .18s, border-color .18s, box-shadow .18s; }
.pip:hover:not([disabled]){ transform:scale(1.12); border-color:rgba(201,162,74,.5); }
.pip.base{ background:var(--parchment-2); border-color:var(--parchment-3); cursor:default; }
.pip.added{ background:var(--gild); border-color:var(--gild-bright); box-shadow:0 0 9px rgba(201,162,74,.5); }
.pip[disabled]{ cursor:not-allowed; opacity:.5; }
.pip.capped{ border-style:dashed; opacity:.35; }

/* ---- Resistance summary ---- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:620px){ .res-grid{ grid-template-columns:1fr } }
.res-card{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; }
.res-card .dn{ font-family:"Cinzel",serif; letter-spacing:.12em; text-transform:uppercase; color:var(--gild); font-size:.82rem; }
.res-card .big{ font-family:"Cinzel",serif; font-size:2.4rem; color:var(--parchment); margin:6px 0 2px; }
.res-card .meta{ color:var(--parchment-3); font-size:.82rem; }

/* ---- Form fields ---- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:"Cinzel",serif; letter-spacing:.06em; font-size:.82rem; text-transform:uppercase;
  color:var(--gild); margin-bottom:5px; }
.field .hint{ color:var(--parchment-3); font-size:.86rem; margin:-2px 0 8px; font-style:italic; }
.field input, .field textarea, .field select{
  width:100%; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--parchment); font-family:"EB Garamond",serif; font-size:1.04rem; padding:11px 13px; }
.field textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gild); box-shadow:0 0 0 1px var(--gild); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .two-col{ grid-template-columns:1fr } }

/* ---- randomizer controls ---- */
.roll-bar{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 20px; align-items:center; }
.btn.mini{ padding:6px 13px; font-size:.72rem; letter-spacing:.08em; }
.roll-btn::before{ content:"\2684"; margin-right:7px; color:var(--gild); font-size:.9em; }
.btn.roll-btn:hover:not([disabled])::before{ color:var(--ink); }
.field-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.two-col .field-head{ min-height:28px; }
.field-head label{ margin-bottom:0; }
.field-head .roll-btn{ flex:none; }
.head-roll{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 10px; }
.pron-row{ display:flex; gap:9px; align-items:stretch; }
.pron-row input{ flex:1; }
.pron-row .pron-quick{ width:auto; flex:none; font-size:.82rem; padding:0 28px 0 12px; color:var(--parchment-2);
  background-image:none; cursor:pointer; }

/* ---- Relationships ---- */
.rel-row{ display:grid; grid-template-columns:1fr 150px auto; gap:10px; align-items:start; margin-bottom:12px; }
@media (max-width:620px){ .rel-row{ grid-template-columns:1fr } }
.rel-note{ grid-column:1 / -1; }
.icon-btn{ background:var(--ink-3); border:1px solid var(--line); color:var(--parchment-2); border-radius:var(--radius);
  cursor:pointer; padding:11px 14px; font:inherit; transition:border-color .2s,color .2s; }
.icon-btn:hover{ border-color:var(--ember); color:var(--ember-soft); }

/* ---- Buttons / nav ---- */
.btn{ font-family:"Cinzel",serif; letter-spacing:.06em; font-size:.86rem; padding:12px 22px; border-radius:var(--radius);
  border:1px solid var(--gild); background:transparent; color:var(--gild); cursor:pointer; transition:all .18s; }
.btn:hover:not([disabled]){ background:var(--gild); color:var(--ink); box-shadow:0 0 22px -4px rgba(201,162,74,.5); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn.primary{ background:var(--gild); color:var(--ink); }
.btn.primary:hover:not([disabled]){ background:var(--gild-bright); }
.btn.ghost{ border-color:var(--line); color:var(--parchment-2); }
.btn.ghost:hover:not([disabled]){ border-color:var(--parchment-2); background:transparent; color:var(--parchment); box-shadow:none; }
.btn.danger{ border-color:rgba(157,59,44,.5); color:var(--ember-soft); }
.btn.danger:hover:not([disabled]){ background:var(--ember); color:var(--parchment); box-shadow:none; }

.navbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; }
.navbar .right{ display:flex; gap:10px; }
.gate-msg{ color:var(--ember-soft); font-size:.9rem; font-style:italic; }
.gate-msg.ok{ color:var(--gild); font-style:normal; }

/* utility bar above masthead */
.utility{ display:flex; justify-content:flex-end; gap:8px; padding-top:14px; flex-wrap:wrap; }
.utility .btn{ padding:8px 14px; font-size:.74rem; }

/* ---- Final sheet ---- */
.sheet{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); }
.sheet-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; }
.sheet-top .who h2{ font-family:"Cinzel",serif; font-size:2rem; margin:0; letter-spacing:.04em; }
.sheet-top .who .pron{ color:var(--parchment-3); font-style:italic; }
.sheet-top .who .roleline{ color:var(--gild); font-family:"Cinzel",serif; letter-spacing:.08em; font-size:.9rem; margin-top:4px; }
.sheet-cols{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; }
@media (max-width:720px){ .sheet-cols{ grid-template-columns:1fr } }
.sheet h3{ font-family:"Cinzel",serif; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gild);
  border-bottom:1px solid var(--line-soft); padding-bottom:6px; margin:22px 0 12px; }
.sheet-action{ display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.sheet-action .nm{ display:flex; align-items:center; gap:9px; }
/* grouped actions */
.act-drive{ font-family:"Cinzel",serif; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment-3); margin:12px 0 4px; }
.act-drive:first-of-type{ margin-top:4px; }
.act-text{ display:flex; flex-direction:column; line-height:1.2; }
.act-name{ color:var(--parchment); }
.act-verbs{ font-size:.72rem; color:var(--parchment-3); font-style:italic; margin-top:1px; }
.sheet-action .sdia{ width:9px; height:9px; transform:rotate(45deg); background:var(--gild); box-shadow:0 0 8px rgba(201,162,74,.6); }
.sheet-action .sdia.off{ background:transparent; border:1.4px solid var(--ink-4); box-shadow:none; }
.sheet-action .rating{ font-family:"Cinzel",serif; color:var(--parchment); }
.sheet-drive{ display:flex; justify-content:space-between; padding:5px 0; }
.sheet-drive .dpips{ display:flex; gap:4px; }
.sheet-drive .dp{ width:13px; height:13px; border-radius:50%; border:1px solid var(--parchment-3); }
.sheet-drive .dp.on{ background:var(--gild); border-color:var(--gild-bright); }
.ability-block{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; margin-bottom:12px; }
.ability-block .an{ font-family:"Cinzel",serif; letter-spacing:.03em; color:var(--gild-bright); font-size:1rem; }
.ability-block .ad{ color:var(--parchment-2); font-size:.92rem; margin-top:4px; }
.detail-line{ margin-bottom:12px; }
.detail-line .dl-label{ font-family:"Cinzel",serif; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gild); }
.detail-line .dl-val{ color:var(--parchment); }
.detail-line .dl-val.empty{ color:var(--parchment-3); font-style:italic; }
.rel-list-item{ padding:7px 0; border-bottom:1px solid var(--line-soft); }
.rel-list-item .rt{ color:var(--gild); font-family:"Cinzel",serif; font-size:.82rem; letter-spacing:.06em; }

/* ---- Marks & Scars (harm tracks on the sheet) ---- */
.sheet-harm{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:4px 0 6px; padding-bottom:20px; border-bottom:1px solid var(--line); }
@media (max-width:720px){ .sheet-harm{ grid-template-columns:1fr; gap:18px; } }
.sheet-harm h3{ margin-top:0; }
.mk-track{ display:flex; align-items:center; gap:12px; padding:4px 0; }
.mk-label{ width:54px; font-family:"Cinzel",serif; font-size:.84rem; letter-spacing:.04em; color:var(--parchment-2); }
.mk-boxes{ display:flex; gap:8px; }
.mk-box{ width:19px; height:19px; border:1.5px solid var(--gild-deep); border-radius:3px; background:rgba(201,162,74,.05); }
.mk-legend{ color:var(--parchment-3); font-size:.78rem; font-style:italic; margin-top:10px; line-height:1.45; }
.scar-lines{ display:flex; flex-direction:column; gap:13px; margin-top:2px; }
.scar-line{ display:flex; align-items:center; gap:11px; }
.scar-n{ font-family:"Cinzel",serif; color:var(--gild); font-size:.84rem; width:14px; text-align:center; }
.scar-rule{ flex:1; height:0; border-bottom:1px solid var(--line); }
.scar-line.fatal .scar-n{ color:var(--ember-soft); }
.scar-line.fatal .scar-rule{ border-bottom-color:rgba(157,59,44,.45); }

/* ---- Gear (slots + standard reference) ---- */
.sheet-gear{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.gear-note{ color:var(--parchment-3); font-size:.82rem; font-style:italic; margin:-4px 0 14px; max-width:74ch; line-height:1.45; }
.gear-cols{ display:grid; grid-template-columns:1fr 1.3fr; gap:28px; }
@media (max-width:720px){ .gear-cols{ grid-template-columns:1fr; gap:16px; } }
.gear-sub{ font-family:"Cinzel",serif; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-3); margin-bottom:9px; }
.gear-slots{ display:flex; flex-direction:column; gap:13px; }
.gear-slot{ display:flex; align-items:center; gap:11px; }
.gear-slot .mk-box{ width:16px; height:16px; flex:none; }
.gear-rule{ flex:1; height:0; border-bottom:1px solid var(--line); }
.gear-item{ margin-bottom:9px; font-size:.92rem; line-height:1.45; }
.gear-item .gi-name{ font-family:"Cinzel",serif; color:var(--parchment); letter-spacing:.02em; font-size:.86rem; }
.gear-item .gi-desc{ color:var(--parchment-2); }

/* progress meter under masthead */
.meter{ height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden; margin:14px auto 0; max-width:var(--maxw); }
.meter > i{ display:block; height:100%; background:linear-gradient(90deg, var(--gild-deep), var(--gild-bright)); transition:width .4s ease; }

footer.tiny{ text-align:center; color:var(--parchment-3); font-size:.8rem; margin-top:40px; }
.kbd{ font-family:"Cinzel",serif; border:1px solid var(--line); border-radius:3px; padding:1px 6px; font-size:.78rem; color:var(--parchment-2); }
/* publish-ready footer + credits */
.site-foot{ max-width:760px; margin-left:auto; margin-right:auto; padding:0 16px 8px; }
.cc-logo{ display:block; width:188px; max-width:62%; height:auto; margin:0 auto 16px; opacity:.92; }
.site-foot a{ color:var(--gild); text-decoration:none; border-bottom:1px solid var(--line); }
.site-foot a:hover{ color:var(--gild-bright); }
.foot-attr{ line-height:1.55; margin:0 0 12px; }
.foot-attr strong{ color:var(--parchment-2); }
.foot-kbd{ margin:12px 0 0; color:var(--parchment-3); }
.credits{ text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--ink-2);
  max-width:680px; margin:0 auto; overflow:hidden; }
.credits > summary{ cursor:pointer; list-style:none; padding:11px 16px; text-align:center;
  font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gild); }
.credits > summary::-webkit-details-marker{ display:none; }
.credits[open] > summary{ border-bottom:1px solid var(--line); }
.credits-body{ padding:14px 18px 18px; }
.credits-body h4{ font-family:"Cinzel",serif; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--parchment-2); margin:16px 0 5px; }
.credits-body p{ font-size:.82rem; line-height:1.6; color:var(--parchment-3); margin:0 0 4px; }
.credits-body strong{ color:var(--parchment-2); }
.cr-flag{ color:var(--parchment-2) !important; }
.logo-slot{ margin:9px 0 4px; padding:18px; border:1px dashed var(--gild-deep); border-radius:8px;
  text-align:center; font-size:.72rem; letter-spacing:.04em; color:var(--parchment-3);
  background:repeating-linear-gradient(45deg, rgba(201,162,74,.04), rgba(201,162,74,.04) 8px, transparent 8px, transparent 16px); }
.cr-note{ margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line);
  font-style:italic; color:var(--parchment-3) !important; }

/* ---- How to play (printed onto the sheet) ---- */
.howto{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.howto-title{ font-family:"Cinzel",serif; color:var(--gild); font-size:1.05rem; letter-spacing:.05em; margin:0 0 6px; }
.howto-intro{ color:var(--parchment-2); font-size:.94rem; line-height:1.55; margin:0 0 18px; max-width:74ch; }
.howto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; }
@media (max-width:720px){ .howto-grid{ grid-template-columns:1fr; } }
.howto-block{ break-inside:avoid; }
.howto-h{ font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gild); margin-bottom:8px; }
.howto-ol{ margin:0; padding-left:1.15em; color:var(--parchment-2); }
.howto-ol li{ font-size:.92rem; line-height:1.5; margin-bottom:4px; padding-left:2px; }
.howto-defs{ display:flex; flex-direction:column; gap:6px; }
.howto-def{ display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:baseline; }
.howto-def .hd-term{ font-family:"Cinzel",serif; font-size:.78rem; color:var(--parchment); letter-spacing:.02em; }
.howto-def .hd-def{ color:var(--parchment-2); font-size:.9rem; line-height:1.45; }
.howto-p{ color:var(--parchment-2); font-size:.92rem; line-height:1.55; margin:0; }
@media (max-width:480px){ .howto-def{ grid-template-columns:72px 1fr; gap:8px; } }

/* nine-actions reference */
.acts-title{ margin-top:28px !important; padding-top:22px; border-top:1px solid var(--line); }
.acts-ref{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 28px; margin-top:14px; }
@media (max-width:720px){ .acts-ref{ grid-template-columns:1fr; } }
.acts-drive{ font-family:"Cinzel",serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gild); margin-bottom:10px; }
.acts-item{ margin-bottom:12px; }
.acts-item .ai-name{ font-family:"Cinzel",serif; color:var(--parchment); font-size:.92rem; }
.acts-item .ai-verbs{ font-size:.74rem; font-style:italic; color:var(--parchment-3); margin:1px 0 2px; }
.acts-item .ai-desc{ font-size:.88rem; color:var(--parchment-2); line-height:1.45; }

/* mission framing. Step 1 callout */
.mission-intro{ border:1px solid rgba(201,162,74,.38); border-radius:10px; padding:15px 18px; margin:0 0 18px;
  background:linear-gradient(180deg, rgba(201,162,74,.06), transparent); }
details.mission-intro > summary.mi-label{ cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; gap:8px; }
details.mission-intro > summary.mi-label::-webkit-details-marker{ display:none; }
details.mission-intro > summary.mi-label::before{ content:"▾"; color:var(--gild); font-size:.9rem;
  transition:transform .18s ease; display:inline-block; }
details.mission-intro:not([open]) > summary.mi-label::before{ transform:rotate(-90deg); }
details.mission-intro:not([open]) > summary.mi-label{ margin-bottom:0; }
details.mission-intro:not([open]){ padding-top:12px; padding-bottom:12px; }
.mi-label{ font-family:"Cinzel",serif; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gild); margin-bottom:8px; }
.mi-body{ color:var(--parchment-2); font-size:.92rem; line-height:1.55; margin:0 0 8px; }
.mi-goals{ margin:0 0 8px; padding-left:18px; }
.mi-goals li{ color:var(--parchment-2); font-size:.9rem; line-height:1.5; margin-bottom:2px; }
.mi-goals strong{ color:var(--parchment); }
.mi-foot{ color:var(--parchment-3); font-size:.84rem; font-style:italic; margin:0; }
.mi-tips-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
.mi-tips-cta .btn[disabled]{ opacity:.7; cursor:default; }
.mi-tips-hint{ color:var(--parchment-3); font-size:.84rem; font-style:italic; }
/* mission framing - How to Play block */
.mission-block{ margin-bottom:6px; }
.mission-goals{ margin:8px 0 12px; padding-left:20px; }
.mission-goals li{ color:var(--parchment-2); font-size:.92rem; line-height:1.55; margin-bottom:3px; }
.mission-goals strong{ color:var(--parchment); }
.mission-coda{ color:var(--parchment-3); font-style:italic; font-size:.9rem; margin:0; }
.section-rule{ margin-top:26px !important; padding-top:22px; border-top:1px solid var(--line); }
/* gilded-action legend on the sheet */
.act-legend{ display:flex; align-items:center; gap:7px; margin:-2px 0 9px; font-size:.74rem; font-style:italic; color:var(--parchment-3); }
.pdf-hint{ max-width:var(--maxw); margin:12px auto 0; text-align:center; }

/* ---- Print ---- */
@media print{
  body{ background:#fff; color:#111; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body::before, .utility, .steps, .navbar, .masthead .sub, .meter, footer.tiny, .plain-tip, .ability-key, .pdf-hint, #toast{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  /* Near-black body text for legibility; gold accents darkened for contrast. */
  .sheet{ background:#fff; border:1px solid #888; box-shadow:none; color:#111; padding:20px; }
  .sheet h3, .sheet-top .who .roleline, .detail-line .dl-label, .rel-list-item .rt{ color:#6b4e0e; }
  .sheet-top .who h2{ color:#000; }
  .sheet-top .who .pron, .sheet .eyebrow{ color:#444; }
  .sheet-action .rating, .detail-line .dl-val, .rel-list-item{ color:#111; }
  .ability-block{ background:#f4efe2; border-color:#c7bda3; }
  .ability-block .an{ color:#6b4e0e; }
  .ability-block .ad, .muted, .dim{ color:#1c1c1c; }
  .detail-line .dl-val.empty{ color:#777; }
  /* filled vs empty marks read clearly in print */
  .sheet-action .sdia{ background:#b8862b; box-shadow:none; }
  .sheet-action .sdia.off{ background:transparent; border:1.4px solid #888; }
  .sheet-drive .dp{ border:1px solid #888; background:#fff; }
  .sheet-drive .dp.on{ background:#b8862b; border-color:#b8862b; }
  /* marks & scars */
  .sheet-harm{ border-bottom:1px solid #bbb; }
  .sheet-harm h3{ color:#6b4e0e; }
  .mk-label{ color:#111; }
  .mk-box{ border:1.5px solid #555; background:#fff; }
  .mk-legend{ color:#444; }
  .scar-n{ color:#6b4e0e; }
  .scar-rule{ border-bottom-color:#888; }
  .scar-line.fatal .scar-n{ color:#7a2418; }
  .scar-line.fatal .scar-rule{ border-bottom-color:#b06a60; }
  /* gear */
  .sheet-gear{ border-top:1px solid #bbb; }
  .sheet-gear h3{ color:#6b4e0e; }
  .gear-note{ color:#444; }
  .gear-sub{ color:#555; }
  .gear-slot .mk-box{ border:1.5px solid #555; background:#fff; }
  .gear-rule{ border-bottom-color:#888; }
  .gear-item .gi-name{ color:#000; }
  .gear-item .gi-desc{ color:#1c1c1c; }
  /* Play reference gets its own page, near-black ink on white. */
  .howto{ break-before:page; border-top:0; margin-top:0; padding-top:0; }
  .howto-title, .howto-h{ color:#6b4e0e; }
  .howto-intro, .howto-ol li, .howto-def .hd-def, .howto-p{ color:#1a1a1a; }
  .howto-def .hd-term{ color:#000; }
  .howto-grid{ gap:12px 26px; }
  /* grouped actions + nine-actions reference */
  .act-drive{ color:#555; }
  .act-name{ color:#111; }
  .act-verbs{ color:#555; }
  .acts-title{ color:#6b4e0e; border-top-color:#bbb; }
  .acts-drive{ color:#6b4e0e; }
  .acts-item .ai-name{ color:#000; }
  .acts-item .ai-verbs{ color:#555; }
  .acts-item .ai-desc{ color:#1c1c1c; }
  /* mission framing */
  .mission-goals li{ color:#1c1c1c; }
  .mission-goals strong{ color:#000; }
  .mission-coda{ color:#444; }
  .section-rule{ border-top-color:#bbb; color:#6b4e0e; }
  .act-legend{ color:#555; }
}

/* ---- newcomer polish: derived-page ribbon, gild legend, sheet jump links ---- */
.ribbon{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(90deg, rgba(201,162,74,.14), rgba(201,162,74,0));
  border-left:2px solid var(--gild);
  padding:11px 15px; margin:6px 0 22px;
  color:var(--parchment); font-size:.95rem;
}
.ribbon .lock{ font-family:"Cinzel",serif; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gild); font-size:.7rem; font-weight:600; }
.gild-legend{
  display:flex; align-items:center; gap:11px;
  border:1px dashed var(--line); background:var(--ink-2);
  padding:9px 14px; border-radius:var(--radius);
  margin:6px 0 14px; color:var(--parchment-2); font-size:.92rem;
}
.gild-legend .dia{
  width:11px; height:11px; transform:rotate(45deg);
  background:var(--gild); border:1.5px solid var(--gild-bright);
  box-shadow:0 0 10px rgba(201,162,74,.55); flex-shrink:0;
}
.jump-links{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:9px 13px; margin:10px 0 16px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  font-size:.86rem;
}
.jump-links .jl-label{ color:var(--gild); letter-spacing:.16em; text-transform:uppercase;
  font-size:.7rem; font-family:"Cinzel",serif; }
.jump-links a{ color:var(--parchment); text-decoration:none;
  border-bottom:1px dotted var(--line); padding-bottom:1px; }
.jump-links a:hover{ color:var(--gild-bright); border-color:var(--gild); }
@media print { .jump-links, .ribbon, .gild-legend { display:none !important; } }