:root {
  --bg: #14110d;
  --bg2: #1b1712;
  --panel: #221d16;
  --panel2: #2a241b;
  --ink: #efe7d6;
  --ink-dim: #b6a98f;
  --ink-faint: #8a7f6b;
  --line: rgba(233, 220, 196, 0.13);
  --gold: #d9b866;
  --gold-dim: #a98f4e;
  --green: #7fb069;
  --red: #d98c73;
  --blue: #7fa8c9;
  --accent: #d9b866;
  --gw: 1180px; /* content width ceiling; the shell + background go full-bleed */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  /* A single faint khatam star, repeated as a quiet watermark over a warm glow and a soft
     vignette - much simpler than the old interlaced lattice, yet still mosque tilework. */
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23e3c583' stroke-opacity='0.05' stroke-width='1'%3E%3Crect x='30' y='30' width='24' height='24'/%3E%3Crect x='30' y='30' width='24' height='24' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1300px 850px at 80% -12%, rgba(74,58,34,0.42) 0%, rgba(36,29,20,0) 62%),
    radial-gradient(140% 130% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-size: clamp(64px, 7vmin, 96px), cover, cover, cover;
  background-position: center top, center, center, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  padding-bottom: calc(var(--rail-h, 0px) + 20px); /* always leave room to scroll clear of the fixed rail (it is taller on mobile) */
}
/* ISLAMIC INFLUENCE (the luminous layer): a warm light that strengthens as the heart turns.
   Driven by body[data-iman] (0 in menus; 1-4 in play, from the shahada + faith). Simplified to
   a pure glow - no second lattice - so belief lights the world without adding pattern. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 50% at 50% 24%, rgba(217,184,102,0.42), rgba(217,184,102,0) 70%);
  background-attachment: fixed;
  opacity: var(--iman-op, 0);
  transition: opacity 1.4s ease;
}
body[data-iman="1"] { --iman-op: 0.05; }
body[data-iman="2"] { --iman-op: 0.11; }
body[data-iman="3"] { --iman-op: 0.18; }
body[data-iman="4"] { --iman-op: 0.26; }
body[data-iman="3"] .girih-band, body[data-iman="4"] .girih-band { opacity: 0.92; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
  background: rgba(20, 17, 13, 0.7);
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-family: var(--serif); font-size: 20px; letter-spacing: 0.02em; color: var(--ink); }
.brand-sub { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.topnav { display: flex; gap: 6px; align-items: center; }
.linkbtn {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; text-decoration: none;
}
.linkbtn:hover { color: var(--ink); border-color: var(--line); }

/* ---- layout ---- */
.game { width: 100%; max-width: var(--gw); margin: 0 auto; padding: clamp(20px, 3vw, 44px) clamp(18px, 5vw, 64px) 32px; }
.muted { color: var(--ink-dim); }
.center { text-align: center; }

/* ---- buttons ---- */
.btn {
  font-family: var(--sans); font-size: 15px; color: #1a150e;
  background: linear-gradient(180deg, #e7cd86, var(--gold));
  border: none; border-radius: 11px; padding: 12px 22px; cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.22,1,0.36,1), filter 0.2s ease, box-shadow 0.25s ease; font-weight: 600; letter-spacing: 0.01em;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(217,184,102,0.24); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: rgba(233, 220, 196, 0.06); }
.btn.close { display: inline-block; text-decoration: none; margin-top: 18px; }

/* ============ CREATION ============ */
.create-intro { margin-bottom: 26px; }
.create-intro h1 { font-family: var(--serif); font-size: clamp(28px, 6vw, 40px); margin: 0 0 10px; font-weight: 500; }
.create-intro p { color: var(--ink-dim); max-width: 58ch; }

.points {
  position: sticky; top: 74px; z-index: 10;
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 22px;
}
.points-num { font-family: var(--serif); font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; }
.points-num.spent { color: var(--red); }
.points-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; justify-content: center; }
.preset {
  font-size: 13px; color: var(--ink-dim); background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; cursor: pointer;
}
.preset:hover { color: var(--ink); border-color: var(--gold-dim); }
.preset b { color: var(--ink); font-weight: 600; }

.stat-row { padding: 15px 2px 17px; border-top: 1px solid var(--line); }
.stat-row:last-child { border-bottom: 1px solid var(--line); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-head { display: flex; align-items: center; gap: 9px; }
.stat-emblem { display: inline-flex; }
.stat-emblem svg { width: 19px; height: 19px; display: block; color: var(--sc, var(--gold)); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.stat-name { font-family: var(--serif); font-size: 18px; }
.stat-short { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.stat-desc { font-size: 13px; color: var(--ink-faint); margin: 3px 0 12px; max-width: 60ch; }
.points-num.done { color: var(--green); }

/* the number box — a real editable field */
.stat-num {
  width: 3.4em; text-align: center; font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums;
  color: var(--sc, var(--gold)); background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 4px 2px;
  -moz-appearance: textfield; transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.stat-num::-webkit-outer-spin-button, .stat-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-num:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,184,102,0.15); }
.stat-row.empty .stat-num { color: var(--ink-faint); }
.stat-row.maxed .stat-num { color: var(--green); border-color: rgba(127,176,105,0.5); }

/* the drag bar — a gold-filled track with a jewelled thumb */
.stat-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
.stat-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc, var(--gold)) 58%, #000), var(--sc, var(--gold))) left / var(--fill, 0%) 100% no-repeat, rgba(233,220,196,0.09);
}
.stat-range::-moz-range-track { height: 8px; border-radius: 6px; background: rgba(233,220,196,0.09); border: 1px solid var(--line); }
.stat-range::-moz-range-progress { height: 8px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc, var(--gold)) 58%, #000), var(--sc, var(--gold))); }
.stat-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sc, var(--gold)), #fff 48%), var(--sc, var(--gold)) 60%, color-mix(in srgb, var(--sc, var(--gold)), #000 28%));
  border: 1px solid #7a642f; box-shadow: 0 1px 5px rgba(0,0,0,0.5); transition: transform 0.1s ease;
}
.stat-range::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 1px solid #7a642f;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sc, var(--gold)), #fff 48%), var(--sc, var(--gold)) 60%, color-mix(in srgb, var(--sc, var(--gold)), #000 28%)); box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.stat-range:active::-webkit-slider-thumb { transform: scale(1.18); }
.stat-range:focus { outline: none; }
.stat-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(217,184,102,0.2), 0 1px 5px rgba(0,0,0,0.5); }

.create-actions { margin-top: 28px; display: flex; justify-content: center; }

/* ============ PLAY ============ */
.act-banner { text-align: center; margin-bottom: 8px; }
.act-name { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-dim); }
.act-sub { font-size: 12px; color: var(--ink-faint); font-style: italic; }

.scene { animation: rise 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scene-title { font-family: var(--serif); font-size: clamp(24px, 5vw, 32px); font-weight: 500; margin: 4px 0 16px; }
.scene-text { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: #e8ddc7; margin-bottom: 26px; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-left: 2px solid rgba(217,184,102,0.30); border-radius: 12px;
  padding: 15px 18px; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
  display: flex; align-items: center; gap: 13px;
}
/* a slow light sweeps across on hover */
.choice::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(217,184,102,0.13) 50%, transparent 62%);
  transform: translateX(-130%);
}
.choice > span { position: relative; z-index: 1; }
.choice .choice-label, .choice > span:first-of-type { flex: 1 1 auto; }
.choice:hover:not(.locked) {
  border-color: var(--gold-dim); border-left-color: var(--gold);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(217,184,102,0.12);
}
.choice:hover:not(.locked)::after { animation: choice-sheen 0.85s ease; }
@keyframes choice-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.choice:active:not(.locked) { transform: translateY(0); }
.choice.locked { opacity: 0.5; cursor: not-allowed; }

/* ---- picking a choice is a moment: the chosen option confirms, the rest fall away ---- */
.choices.committing { pointer-events: none; }
/* !important + the extra .committing specificity beat the flow-in entrance animation, which fills both and would otherwise hold opacity:1 */
.choices.committing .choice:not(.chosen) { opacity: 0.28 !important; filter: saturate(0.5); transition: opacity 0.32s ease, filter 0.32s ease; }
.choices.committing .choice.chosen { z-index: 2; border-color: var(--gold) !important; border-left-color: var(--gold) !important; animation: choice-commit 0.44s cubic-bezier(0.22,1,0.36,1) both !important; }
.choices.committing .choice.chosen::after { animation: choice-sheen 0.6s ease 0.04s; }
@keyframes choice-commit {
  0%   { box-shadow: 0 0 0 0 rgba(217,184,102,0.55), 0 6px 20px rgba(0,0,0,0.28); }
  45%  { box-shadow: 0 0 0 5px rgba(217,184,102,0.26), 0 12px 32px rgba(0,0,0,0.42); transform: translateY(-2px) scale(1.012); }
  100% { box-shadow: 0 0 0 1px rgba(217,184,102,0.40), 0 8px 26px rgba(0,0,0,0.34); transform: none; }
}

/* the odds / requirement tag as a small jewelled pill */
.choice-tag {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.05em; white-space: nowrap; color: var(--ink-dim);
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); background: rgba(0,0,0,0.2);
}
.choice-tag:empty { display: none; }
.choice-tag .odds-favored { color: var(--green); text-shadow: 0 0 8px rgba(127,176,105,0.45); }
.choice-tag .odds-even { color: var(--gold); text-shadow: 0 0 8px rgba(217,184,102,0.45); }
.choice-tag .odds-risky { color: var(--red); text-shadow: 0 0 8px rgba(217,140,115,0.45); }
.choice-tag .locktag { color: var(--red); }

.outcome { animation: rise 0.5s ease; }
.outcome-text { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: #e8ddc7; margin: 6px 0 16px; }
.result-flag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.result-flag.ok { color: var(--green); }
.result-flag.no { color: var(--red); }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.delta { font-size: 12px; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green); border-color: rgba(127,176,105,0.4); }
.delta.down { color: var(--red); border-color: rgba(217,140,115,0.4); }

/* ---- stat rail (during play): a row of unique tokens; every change pulses and floats ---- */
.rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: linear-gradient(180deg, rgba(24,20,15,0.84), rgba(19,15,11,0.96));
  border-top: 1px solid rgba(217,184,102,0.22); box-shadow: 0 -9px 28px rgba(0,0,0,0.38);
  backdrop-filter: blur(12px);
  padding: 9px clamp(12px, 4vw, 40px);
}
.rail-inner { max-width: 900px; margin: 0 auto; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 42px; }
.pip-short { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); }
.pip-val { font-family: var(--serif); font-size: 16px; font-variant-numeric: tabular-nums; transition: color 0.3s ease, text-shadow 0.3s ease; }
.pip-bar { width: 40px; height: 3px; border-radius: 3px; background: rgba(233,220,196,0.1); overflow: hidden; }
.pip-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); width: 0%; transition: width 1.15s cubic-bezier(0.22,1,0.36,1), box-shadow 1.1s ease; }
.rail-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 0; }

/* the three life-meters read as their own emblemed gauges */
.meter-pip { min-width: 58px; padding: 3px 9px 5px; border-radius: 10px; background: rgba(233,220,196,0.03); border: 1px solid var(--line); }
.meter-pip .pip-icon { display: block; height: 15px; line-height: 0; margin-bottom: 1px; }
.meter-pip .pip-icon svg { width: 15px; height: 15px; display: block; }
.meter-pip .pip-bar { width: 62px; height: 6px; }
.meter-pip.hitPoints { border-color: rgba(217,140,115,0.32); } .meter-pip.hitPoints .pip-icon { color: var(--red); } .meter-pip.hitPoints .pip-bar > i { background: linear-gradient(90deg, #b8543f, var(--red)); }
.meter-pip.armor { border-color: rgba(199,204,212,0.28); } .meter-pip.armor .pip-icon { color: #c7ccd4; } .meter-pip.armor .pip-bar > i { background: linear-gradient(90deg, #7d828c, #c7ccd4); }
.meter-pip.spirit { border-color: rgba(127,168,201,0.32); } .meter-pip.spirit .pip-icon { color: var(--blue); } .meter-pip.spirit .pip-bar > i { background: linear-gradient(90deg, #4f7fa8, var(--blue)); }

/* ---- the seven virtues as illuminated, colour-signed tokens ---- */
.stat-pip { min-width: 46px; }
.stat-pip .pip-top { display: flex; align-items: center; gap: 5px; }
.stat-pip .pip-emblem { display: inline-flex; }
.stat-pip .pip-emblem svg { width: 15px; height: 15px; display: block; color: var(--sc, var(--gold)); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); }
.stat-pip .pip-bar { width: 46px; }
.stat-pip .pip-bar > i { background: var(--sc, var(--gold)); background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 60%, #000), var(--sc)); }
.stat-pip .pip-short { color: var(--ink-faint); letter-spacing: 0.08em; }

/* a change blooms the token slowly, haloes it, and floats a rising +/- that lingers */
.rl-coin { position: relative; }
.pip.flash-up .pip-val, .rl-coin.flash-up { color: var(--green); text-shadow: 0 0 12px rgba(127,176,105,0.6); }
.pip.flash-down .pip-val, .rl-coin.flash-down { color: var(--red); text-shadow: 0 0 12px rgba(217,140,115,0.6); }
.pip.flash-up, .pip.flash-down { animation: pip-bloom 1.3s cubic-bezier(0.22,1,0.36,1); }
@keyframes pip-bloom { 0% { transform: translateY(0) scale(1); } 34% { transform: translateY(-1.5px) scale(1.07); } 100% { transform: none; } }
.pip.flash-up .pip-bar > i { box-shadow: 0 0 12px rgba(127,176,105,0.8); }
.pip.flash-down .pip-bar > i { box-shadow: 0 0 12px rgba(217,140,115,0.8); }
.pip.flash-up::after, .pip.flash-down::after { content: ""; position: absolute; inset: -7px; border-radius: 14px; z-index: -1; pointer-events: none; opacity: 0; animation: pip-halo 1.5s ease-out; }
.pip.flash-up::after { background: radial-gradient(circle, rgba(127,176,105,0.34), transparent 70%); }
.pip.flash-down::after { background: radial-gradient(circle, rgba(217,140,115,0.34), transparent 70%); }
@keyframes pip-halo { 0% { opacity: 0; transform: scale(0.55); } 32% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.pip-float {
  position: absolute; left: 50%; top: -8px; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  animation: pip-float 1.9s cubic-bezier(0.16,0.9,0.3,1) forwards;
}
.pip-float.up { color: var(--green); } .pip-float.down { color: var(--red); }
@keyframes pip-float { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.9); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pip.flash-up, .pip.flash-down, .pip.flash-up::after, .pip.flash-down::after, .pip-float, .travel-anim .ta-walker, .travel-anim .ta-dune, .combat.clash, .cbar-track.hit, .cbar-track.hurt, .choice::after { animation: none !important; }
}

/* ---- reflection (verse) aside ---- */
.reflection {
  position: fixed; right: 18px; top: 88px; width: min(330px, 40vw); z-index: 12;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 18px 20px;
  opacity: 0; transform: translateX(16px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 14px 40px rgba(0,0,0,0.3);
}
.reflection.show { opacity: 1; transform: none; }
.reflection-sign { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.reflection-text { font-family: var(--serif); font-size: 16px; line-height: 1.55; margin: 0 0 10px; color: #e8ddc7; }
.reflection-ref { font-size: 12px; color: var(--ink-faint); }

/* ============ END ============ */
.ending { text-align: center; animation: rise 0.7s ease; }
.ending-kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); }
.ending h1 { font-family: var(--serif); font-size: clamp(30px, 7vw, 46px); font-weight: 500; margin: 8px 0 18px; }
.ending-body { font-family: var(--serif); font-size: 19px; line-height: 1.7; color: #e8ddc7; max-width: 56ch; margin: 0 auto 28px; }
.growth { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto 28px; text-align: left; }
.growth-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.growth-name { font-size: 13px; color: var(--ink-dim); }
.growth-change { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.growth-change .g-up { color: var(--green); } .growth-change .g-down { color: var(--red); }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; display: none; place-items: center; padding: 20px; z-index: 40; background: rgba(8,6,4,0.6); backdrop-filter: blur(4px); }
.modal.open { display: grid; }
.modal-card { max-width: 560px; width: 100%; max-height: 82vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; }
.modal-card h2 { font-family: var(--serif); font-weight: 500; margin: 0 0 8px; }
.modal-card p { color: #ded3bd; }
.modal-card em { font-style: italic; color: var(--ink); }
.modal-card .fineprint { font-size: 12.5px; color: var(--ink-faint); margin-top: 16px; }
.modal-card a { color: var(--gold); }
.journal-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.journal-item { border-left: 2px solid var(--gold-dim); padding-left: 14px; }
.journal-item .ji-text { font-family: var(--serif); color: #e8ddc7; }
.journal-item .ji-ref { font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.journal-empty { color: var(--ink-faint); font-style: italic; }

/* ============ BACKSTORY REVEAL ============ */
.reveal { animation: rise 0.6s ease; max-width: 640px; margin: 10px auto; }
.reveal-kicker { text-align: center; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 18px; }
.backstory { font-family: var(--serif); font-size: 20px; line-height: 1.72; color: #ece2cd; text-wrap: pretty; }
.backstory.small { font-size: 16px; line-height: 1.6; }
.reveal-trait { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--panel); font-size: 15px; color: #ded3bd; }
.reveal-trait strong { color: var(--gold); }
.reveal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
/* the backstory reveal now sits in an illuminated manuscript frame */
.reveal.illum { padding: 30px clamp(20px, 5vw, 40px); max-width: 680px; }
/* the live "who that makes you" panel on the allocate screen */
.alloc-preview { margin: 18px auto 0; max-width: 520px; border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 12px; background: linear-gradient(180deg, var(--panel2), var(--panel)); padding: 14px 18px; }
.ap-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 9px; }
.ap-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(233,220,196,0.05); font-size: 14px; }
.ap-row:last-child { border-bottom: none; }
.ap-k { color: var(--ink-dim); }
.ap-v { color: var(--ink); font-family: var(--serif); text-align: right; }
/* per-trial glyph on the "what you carry" reveal (mind-core for mental, mountains for physical) */
.trial-row { display: flex; align-items: flex-start; gap: 12px; }
.trial-glyph { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; color: var(--gold-dim); }
.trial-glyph svg { width: 100%; height: 100%; display: block; }
.trial-glyph.mental { color: #9db4d6; }
.trial-body { flex: 1 1 auto; min-width: 0; }

/* ============ PATHS (classes) ============ */
.path-preamble { font-size: 14.5px; color: var(--ink-dim); font-style: italic; max-width: 62ch; }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
/* origin vignette cards (the creation "where you come from" step) */
.origins { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 13px; margin-bottom: 6px; }
.origin { position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 13px; padding: 16px 18px; cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.origin:hover { border-color: var(--gold-dim); border-left-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.origin.picked { border-color: var(--gold); border-left-color: var(--gold); box-shadow: 0 0 0 1px rgba(217,184,102,0.3), 0 8px 22px rgba(0,0,0,0.35); }
.origin-label { font-family: var(--serif); font-size: 18px; color: var(--gold); margin-bottom: 7px; }
.origin-line { font-size: 14px; color: var(--ink-dim); line-height: 1.55; margin: 0 0 11px; }
.origin-seeds { display: flex; flex-wrap: wrap; gap: 6px; }
.origin-seed { font-size: 11px; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); background: rgba(217,184,102,0.08); color: var(--ink-dim); }
.path { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--panel); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.path:hover { border-color: var(--gold-dim); background: var(--panel2); }
.path.picked { border-color: var(--gold); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--gold-dim); }
/* per-path aniconic hero banner, bleeding across the top of the card */
.path.has-art { padding-top: 0; overflow: hidden; }
.path-art { position: relative; margin: 0 -20px 14px; height: 82px; overflow: hidden; border-bottom: 1px solid var(--line); }
.path-art svg { width: 100%; height: 100%; display: block; }
.path-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -16px 22px -12px rgba(17,13,9,0.7); pointer-events: none; }
.path.picked .path-art { border-bottom-color: var(--gold-dim); }
.path-name { font-family: var(--serif); font-size: 20px; }
.path-prophet { font-size: 12px; letter-spacing: 0.04em; color: var(--gold-dim); margin: 2px 0 10px; }
.path-exp { font-size: 14px; line-height: 1.55; color: #ded3bd; margin: 0 0 12px; }
.path-verse { display: block; border-left: 2px solid var(--gold-dim); padding: 2px 0 2px 12px; margin: 0 0 12px; min-height: 1em; }
.pv-text { display: block; font-family: var(--serif); font-size: 14px; font-style: italic; color: #e8ddc7; line-height: 1.5; }
.pv-ref { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 4px; letter-spacing: 0.04em; }
.path-abil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.path-abil li { font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.path-abil b { color: var(--ink); }
.pv-cite { color: var(--gold-dim); font-size: 11px; }
.ending-path { font-size: 12px; letter-spacing: 0.05em; margin: 14px 0 24px; }

/* ---- the shahada moment ---- */
.shahada { max-width: 600px; margin: 30px auto; text-align: center; animation: rise 0.9s ease; }
.shahada-prompt { font-family: var(--serif); font-size: 19px; line-height: 1.7; color: #e8ddc7; margin: 14px 0 26px; }
.shahada-words { margin: 0 auto 24px; padding: 20px 24px; border: 1px solid var(--line); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); border-radius: 6px; background: rgba(217,184,102,0.05); max-width: 520px; }
.sh-en { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink); }
.sh-tr { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0.02em; color: var(--gold-dim); font-style: italic; }
.shahada .reveal-actions { margin-top: 26px; }

/* ---- ending verse + closing ---- */
.ending-how { font-size: 14px; font-style: italic; margin: 4px 0 14px; }
.ending-verse { display: block; max-width: 560px; margin: 0 auto 14px; padding: 14px 18px; border-left: 2px solid var(--gold-dim); text-align: left; min-height: 1em; }
.ending .ending-verse { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 10px; }
.ending-closing { font-family: var(--serif); font-style: italic; color: var(--gold-dim); font-size: 15px; margin: 6px 0 4px; }

/* keep the sacred reflection apart from the mechanical run summary */
.ending-reflection { padding-bottom: 8px; }
.ending-divider { border: 0; height: 1px; background: var(--line); max-width: 120px; margin: 40px auto; opacity: 0.7; }
.run-summary { opacity: 0.82; }
.rs-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.run-summary .ending-trait { font-size: 13.5px; }
.run-summary .growth { margin-top: 12px; }

/* the beat of stillness after bearing witness */
.stillness { min-height: 46vh; display: grid; place-items: center; }
.still-mark { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.5); } }

/* ============ TALENTS ============ */
.talents-screen { animation: rise 0.5s ease; }
.talent-group { margin-bottom: 22px; }
.talent-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; }
.linkbtn.tiny { padding: 2px 8px; font-size: 10px; }
.talent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.talent { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.talent.granted { border-left: 3px solid var(--gold-dim); }
.talent.choose { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.talent.choose:hover { border-color: var(--gold-dim); background: var(--panel2); }
.talent.picked { border-color: var(--gold); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.talent-name { font-family: var(--serif); font-size: 17px; margin-bottom: 5px; }
.talent-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 8px; }
.talent-eff { font-size: 12px; color: var(--gold-dim); }

/* ============ TRAIT SHIFT BANNER ============ */
.trait-shift { animation: rise 0.5s ease; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 22px; background: linear-gradient(180deg, rgba(217,184,102,0.08), rgba(217,184,102,0)); }
.trait-shift.slipped { background: linear-gradient(180deg, rgba(217,140,115,0.08), rgba(217,140,115,0)); }
.ts-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.trait-shift.slipped .ts-kicker { color: var(--red); }
.ts-name { font-family: var(--serif); font-size: 20px; margin: 6px 0; }
.ts-name strong { color: var(--gold); }
.ts-line { font-size: 14px; color: var(--ink-dim); margin-bottom: 10px; }
.ts-eff { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-buff, .ts-debuff { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); }
.ts-buff { color: var(--green); border-color: rgba(127,176,105,0.4); }
.ts-debuff { color: var(--red); border-color: rgba(217,140,115,0.4); }

/* ---- pip bonus badge on rail ---- */
.pip-bonus { font-size: 9px; padding: 0 3px; border-radius: 4px; margin-left: 2px; vertical-align: top; }
.pip-bonus.up { color: var(--green); } .pip-bonus.down { color: var(--red); }

/* ---- character modal blocks ---- */
.char-block { margin-bottom: 18px; }
.char-h { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.talent-line { font-size: 14px; margin-bottom: 5px; }

/* ---- ending additions ---- */
.ending-trait { font-size: 15px; color: #ded3bd; max-width: 52ch; margin: 0 auto 22px; }
.ending-trait strong { color: var(--gold); }
.ending-talents { font-size: 12px; letter-spacing: 0.06em; margin: 16px 0 24px; }

/* ============ START — an illuminated frontispiece ============ */
.start.illum {
  position: relative; max-width: 660px; margin: 18px auto; overflow: hidden;
  border: 1px solid var(--gold-dim); border-radius: 20px;
  background: linear-gradient(180deg, rgba(30,24,16,0.55), rgba(17,13,9,0.72));
  box-shadow: inset 0 0 0 1px rgba(217,184,102,0.14), inset 0 0 70px rgba(217,184,102,0.05), 0 24px 70px rgba(0,0,0,0.5);
  animation: rise 0.9s ease;
}
/* corner star ornaments (a manuscript frame) */
.illum-corner { position: absolute; width: 16px; height: 16px; z-index: 3; opacity: 0.5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d9b866' stroke-width='1.4'%3E%3Crect x='6' y='6' width='12' height='12'/%3E%3Crect x='6' y='6' width='12' height='12' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.illum-corner.tl { top: 9px; left: 9px; } .illum-corner.tr { top: 9px; right: 9px; }
.illum-corner.bl { bottom: 9px; left: 9px; } .illum-corner.br { bottom: 9px; right: 9px; }

/* the animated dawn hero */
.start-hero { position: relative; opacity: 0; animation: start-fade 1.1s ease 0.05s forwards; }
.intro-art { width: 100%; height: clamp(190px, 40vw, 300px); display: block; }
.start-hero-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 62px; background: linear-gradient(180deg, rgba(17,13,9,0), rgba(17,13,9,0.9)); pointer-events: none; }
.ia-star { animation: ia-twinkle 3.4s ease-in-out infinite; }
@keyframes ia-twinkle { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }
.ia-glow, .ia-sun { transform-box: fill-box; transform-origin: center; animation: ia-breathe 6s ease-in-out infinite; }
@keyframes ia-breathe { 0%, 100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.ia-rays { transform-box: fill-box; transform-origin: center; opacity: 0.32; animation: ia-spin 80s linear infinite; }
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-road { animation: ia-road-shimmer 4.5s ease-in-out infinite; }
@keyframes ia-road-shimmer { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.3; } }

.start-body { text-align: center; padding: 4px clamp(20px, 5vw, 40px) clamp(24px, 4vw, 36px); }
.start-headpiece { display: block; width: 200px; max-width: 68%; height: 20px; margin: 4px auto 8px; }
.start-title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 7vw, 48px); letter-spacing: 0.01em; margin: 0 0 6px; color: #ecd79b; text-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 0 26px rgba(217,184,102,0.35); }
.start-kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-dim); }
.start-intro { font-family: var(--serif); font-size: 18px; line-height: 1.72; color: #e8ddc7; margin: 16px auto 18px; max-width: 60ch; }
.start .girih-band { margin: 8px auto 18px; }
.start .ending-verse { text-align: left; }
.start-question { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 20px 0 14px; }
.start-choices { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.shahada-choice { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; text-align: center; width: 100%; max-width: 520px; padding: 20px 22px; background: linear-gradient(180deg, rgba(217,184,102,0.16), rgba(217,184,102,0.05)); border: 1px solid var(--gold-dim); color: var(--ink); border-radius: 14px; cursor: pointer; animation: sh-glow 4s ease-in-out infinite; transition: filter 0.2s, border-color 0.2s, transform 0.12s; }
@keyframes sh-glow { 0%, 100% { box-shadow: 0 0 0 rgba(217,184,102,0); } 50% { box-shadow: 0 0 22px rgba(217,184,102,0.22); } }
.shahada-choice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,0.14) 50%, transparent 60%); transform: translateX(-130%); pointer-events: none; }
.shahada-choice:hover { filter: brightness(1.06); border-color: var(--gold); transform: translateY(-1px); }
.shahada-choice:hover::after { animation: choice-sheen 0.9s ease; }
.shahada-choice > * { position: relative; z-index: 1; }
.shahada-choice .sc-en { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink); }
.shahada-choice .sc-tr { font-size: 14px; font-style: italic; color: var(--gold-dim); }
.shahada-choice .sc-do { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.start-decline { max-width: 520px; width: 100%; }

/* staged reveal — the frontispiece assembles piece by piece */
.rv { opacity: 0; animation: start-rise 0.85s cubic-bezier(0.16,1,0.3,1) forwards; }
.rv2 { animation-delay: 0.4s; } .rv3 { animation-delay: 0.66s; } .rv4 { animation-delay: 0.95s; }
@keyframes start-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes start-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .start-hero, .rv { opacity: 1 !important; animation: none !important; }
  .ia-star, .ia-glow, .ia-sun, .ia-rays, .ia-road, .shahada-choice, .shahada-choice::after { animation: none !important; }
}

/* ============ HUB (a place on the map) ============ */
.hub { max-width: 680px; margin: 6px auto; animation: rise 0.4s ease; padding-bottom: 40px; }
.loc-arc { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dim); }
.loc-name { font-family: var(--serif); font-size: clamp(24px, 5vw, 32px); font-weight: 500; margin: 4px 0 10px; }
.loc-desc { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: #e8ddc7; margin-bottom: 12px; }
.town-view { font-size: 13.5px; font-style: italic; color: var(--gold-dim); margin: 0 0 18px; }
.ending-rep { font-size: 13px; color: var(--ink-dim); margin: 8px 0; }
.debuff-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.debuff-chip { font-size: 12px; color: var(--red); border: 1px solid rgba(217,140,115,0.4); border-radius: 20px; padding: 4px 12px; }
.hub-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
/* the secondary "Tend to yourself" fold: the inner life + housekeeping, visually lighter so the place's own actions lead */
.hub-tend { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hub-tend-h { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px; opacity: 0.85; }
.hub-acts-sec { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; opacity: 0.9; }
.hub-acts-sec .hub-act { font-size: 14.5px; padding: 10px 13px; background: rgba(34, 29, 22, 0.5); }
.hub-acts-sec .hub-act:hover { opacity: 1; }
.hub-act { display: flex; align-items: center; gap: 11px; text-align: left; font-family: var(--serif); font-size: 16px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s ease, box-shadow 0.2s ease; }
.hub-act:hover { border-color: var(--gold-dim); background: var(--panel2); }
.hub-act.faith { border-left: 3px solid var(--gold); }
.hub-act.found { border-left: 3px solid var(--green); color: var(--green); }
.hub-act.quiet { font-size: 13.5px; color: var(--ink-dim); font-family: var(--sans); }

/* an icon per action so no two option boxes read the same */
.ha-icon { flex: 0 0 auto; display: inline-flex; color: var(--gold-dim); }
.ha-icon svg { width: 19px; height: 19px; display: block; }
.ha-label { flex: 1 1 auto; min-width: 0; }
/* category icon tints (match each accent) */
.hub-act.faith .ha-icon { color: var(--gold); }
.hub-act.people .ha-icon { color: #d69f7e; }
.hub-act.provision .ha-icon { color: #6bbf59; }
.hub-act.charity .ha-icon { color: #e2879e; }
.hub-act.learn .ha-icon { color: #7fbfa8; }
.hub-act.rest .ha-icon { color: var(--blue); }
.hub-act.found .ha-icon { color: var(--green); }
.hub-act.quiet .ha-icon { color: var(--ink-faint); }
/* the otherwise-plain actions each get their own accent + icon tint, so the whole board reads varied */
.hub-act[data-act="look"] { border-left: 3px solid #b9a06a; } .hub-act[data-act="look"] .ha-icon { color: #cdb679; }
.hub-act[data-act="travel"] { border-left: 3px solid #c2954c; } .hub-act[data-act="travel"] .ha-icon { color: #d7a659; }
.hub-act[data-act="market"] { border-left: 3px solid var(--gold); } .hub-act[data-act="market"] .ha-icon { color: var(--gold); }
.hub-act[data-act="sell"] { border-left: 3px solid var(--gold-dim); } .hub-act[data-act="sell"] .ha-icon { color: var(--gold-dim); }
.hub-act[data-act="ask"] { border-left: 3px solid #7fa8c9; } .hub-act[data-act="ask"] .ha-icon { color: #7fa8c9; }
.hub-act[data-act="work"] { border-left: 3px solid #b08a4e; } .hub-act[data-act="work"] .ha-icon { color: #c79a58; }
.hub-act[data-act="past"] { border-left: 3px solid #9db4d6; } .hub-act[data-act="past"] .ha-icon { color: #9db4d6; }
.hub-act[data-act="future"] { border-left: 3px solid #e0a24f; } .hub-act[data-act="future"] .ha-icon { color: #e0a24f; }

/* ============ RAIL (now with a life line) ============ */
/* width:100% forces the pip row to the rail's width so flex-wrap actually wraps to fit — without it the
   column parent (align-items:center) sizes the row to its content and it overruns narrow (<=360px) screens */
.rail-inner { flex-direction: column; gap: 7px; width: 100%; }
.rail-life { display: flex; gap: 16px; justify-content: center; align-items: baseline; font-size: 11px; letter-spacing: 0.08em; flex-wrap: wrap; max-width: 100%; }
.rl-arc { color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.16em; }
.rl-age { color: var(--ink-dim); }
.rl-coin { color: var(--gold); font-variant-numeric: tabular-nums; }
.rail-pips { display: flex; gap: 14px 12px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 100%; }

/* ============ CHECKPOINT (arc turning + ambition) ============ */
.checkpoint { max-width: 620px; margin: 20px auto; text-align: center; animation: rise 0.7s ease; }
.cp-desc { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: #e8ddc7; margin: 8px 0 16px; }
.cp-shift { font-size: 14px; color: var(--gold-dim); margin-bottom: 22px; }
.cp-shift strong { color: var(--gold); }
.cp-amb-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.cp-ambitions { display: flex; flex-direction: column; gap: 10px; }
.cp-amb { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; cursor: pointer; color: var(--ink); }
.cp-amb:hover { border-color: var(--gold-dim); background: var(--panel2); }
.cp-amb b { font-family: var(--serif); font-size: 17px; display: block; }
.cp-amb span { font-size: 13.5px; color: var(--ink-dim); }
.cp-amb.hold { opacity: 0.72; }

/* ---- a trait the road forged (gained at a turning) ---- */
.cp-gain-note { font-size: 13px; margin: 0 0 14px; }
.cp-gain-note strong { color: var(--gold); }
.cp-carry { font-size: 13px; font-style: italic; margin: -6px 0 16px; }
.cp-gains { display: flex; flex-direction: column; gap: 10px; }
.cp-gain {
  text-align: left; background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 12px;
  padding: 14px 18px; cursor: pointer; color: var(--ink);
  transition: border-color 0.15s, background 0.15s, transform 0.12s ease, box-shadow 0.2s ease;
}
.cp-gain:hover { border-color: var(--gold); border-left-color: var(--gold); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0,0,0,0.25); }
.cp-gain b { font-family: var(--serif); font-size: 17px; display: block; }
.cp-gain .cpg-desc { display: block; font-size: 13.5px; color: var(--ink-dim); margin: 3px 0 8px; line-height: 1.5; }
.cp-gain .cpg-eff { display: flex; flex-wrap: wrap; gap: 8px; }
.cpg-buff, .cpg-debuff { font-size: 12px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); }
.cpg-buff { color: var(--green); border-color: rgba(127,176,105,0.4); }
.cpg-debuff { color: var(--red); border-color: rgba(217,140,115,0.4); }
.cp-gain.hold { opacity: 0.72; border-left-color: var(--line); }
.cp-gain.hold .cpg-desc { margin-bottom: 0; }

/* ============ MAP ============ */
.map-screen, .panel { max-width: 640px; margin: 8px auto; padding-bottom: 40px; animation: rise 0.4s ease; }
.panel-h { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.panel-sub { font-size: 13px; color: var(--ink-dim); margin-bottom: 16px; }
/* ============ THE GILDED CHART — illuminated travel map ============ */
/* ===== THE GILDED CHART — illuminated travel map ===== */
.map{display:block;width:100%;height:auto;aspect-ratio:104/72;overflow:visible;margin-bottom:16px;filter:drop-shadow(0 6px 20px rgba(0,0,0,0.38))}

/* ---- ROUTES: gilt caravan-tracks (danger lives in the texture) ---- */
/* renderer builds each edge as <g class="mapedge [reach|sanct|unknown] [d0-3]">
   with a quadratic <path class="track"> under a <path class="core"> centerline */
.mapedge{fill:none}
.mapedge .track{stroke:var(--gold-dim);stroke-width:1.4;stroke-linecap:round;opacity:.5}
.mapedge .core{stroke:var(--gold);stroke-width:.5;stroke-linecap:round;opacity:.55}
/* danger progressively breaks the centerline into a ragged track */
.mapedge.d1 .core{stroke-dasharray:3 1.4}
.mapedge.d2 .core{stroke-dasharray:2 1.8}
.mapedge.d3 .core{stroke-dasharray:1 2.2}
/* reachable = fully lit gold + a caravan-light running toward the node */
.mapedge.reach .track{opacity:.9}
.mapedge.reach .core{opacity:1;stroke-width:.6;stroke-dasharray:1.4 12;animation:mp-caravan 2.2s linear infinite}
/* the road that leans sanctuary-ward glows a touch brighter */
.mapedge.sanct .core{opacity:1;filter:drop-shadow(0 0 .6px var(--gold))}
/* road to an unknown place fades to a faint dotted trail */
.mapedge.unknown .track{opacity:0}
.mapedge.unknown .core{stroke:var(--line);stroke-width:.4;stroke-dasharray:.6 1.4;opacity:.75;animation:none}

/* ---- NODE ROUNDELS: parent <g class="mapnode STATE dN"> is translate(x,y) ---- */
.mapnode{color:var(--gold-dim);cursor:pointer}
.mapnode .glow{opacity:0;transition:opacity .4s}
.mapnode .ring{transition:stroke .3s}
.mapnode .device{transition:opacity .3s}
.mapnode .halo{opacity:.85}
.mapnode .accent{opacity:0;transition:opacity .3s}
.mapnode .dpips path{opacity:0;transition:opacity .3s}

/* danger pips reveal cumulatively (0-3 red diamonds arced beneath) */
.mapnode.d1 .dp1{opacity:1}
.mapnode.d2 .dp1,.mapnode.d2 .dp2{opacity:1}
.mapnode.d3 .dp1,.mapnode.d3 .dp2,.mapnode.d3 .dp3{opacity:1}

/* CURRENT — fully illuminated, gold ring, breathing halo */
.mapnode.cur{color:var(--gold)}
.mapnode.cur .glow{opacity:1;animation:mp-breathe 3.6s ease-in-out infinite}

/* REACHABLE — green ring + thin gold inner accent, its road lit */
.mapnode.reach{color:var(--green)}
.mapnode.reach .glow{opacity:.35}
.mapnode.reach .accent{opacity:.7}

/* KNOWN — painted but muted, glow off */
.mapnode.known{color:var(--gold-dim)}
.mapnode.known .device{opacity:.72}

/* UNKNOWN — an unfinished patch of the leaf: ruled-but-unpainted, faint */
.mapnode.unknown{color:var(--ink-faint)}
.mapnode.unknown .device{opacity:.4}
.mapnode.unknown .ring{stroke-dasharray:1 1;opacity:.55}
.mapnode.unknown .glow{opacity:0}
.mapnode.unknown .halo{opacity:.3}

/* LABELS — serif on a hair-thin gold rubric underline */
.mapnode text{font-family:var(--serif);font-size:2.4px;fill:var(--ink);text-anchor:middle;letter-spacing:.02px}
.mapnode.unknown text{fill:var(--ink-faint);font-style:italic}
.mapnode .rubric{stroke:var(--gold-dim);stroke-width:.25;opacity:.7}
.mapnode.unknown .rubric{stroke:var(--line)}

/* HOVER echo — links to the matching destination card via shared highlight id */
.mapnode:hover .glow{opacity:.5}
.mapnode:hover .ring{stroke:var(--gold)}
.mapnode:hover .accent{opacity:.85}

/* ---- ORNAMENTAL COMPASS ROSETTE ---- */
.compass{opacity:.55}
.compass .rl{fill:var(--gold);opacity:.85}
.compass .rs{fill:var(--gold-dim);opacity:.7}
.compass .compass-rays{transform-box:fill-box;transform-origin:center;animation:mp-rose 60s linear infinite}

/* ---- SUBTLE, GUARDED LIFE ---- */
@keyframes mp-breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes mp-caravan{to{stroke-dashoffset:-13.4}}
@keyframes mp-rose{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .mapnode.cur .glow,.mapedge.reach .core,.compass .compass-rays{animation:none}
  .mapnode.cur .glow{opacity:1}
}

.map-choices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

/* ============ THE GILDED CHART — destination card (illuminated catalogue entry) ============ */
.map-go{
  --accent: var(--gold-dim);
  --accent-ground: var(--panel);
  --dg: var(--green);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 16px 14px 22px;
  text-align: left;
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel2) 90%, var(--gold) 7%), var(--panel2));
  overflow: visible;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.map-go:focus-visible{ outline: none; }

/* --- LEFT EDGE danger gauge: green(0) -> gold -> red(3), filled by magnitude --- */
.map-go__gauge{
  position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px;
  display: flex; flex-direction: column-reverse; gap: 2px;
  border-radius: 0 2px 2px 0; overflow: hidden;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--bg) 70%, transparent);
}
.map-go__gauge i{ flex: 1; background: var(--line); transition: background .25s ease; }
.map-go[data-danger="0"]{ --dg: var(--green); }
.map-go[data-danger="1"]{ --dg: var(--green); }
.map-go[data-danger="2"]{ --dg: var(--gold);  }
.map-go[data-danger="3"]{ --dg: var(--red);   }
.map-go[data-danger="0"] .map-go__gauge i:nth-child(1){ background: color-mix(in srgb, var(--green) 55%, var(--line)); }
.map-go[data-danger="1"] .map-go__gauge i:nth-child(1),
.map-go[data-danger="2"] .map-go__gauge i:nth-child(1),
.map-go[data-danger="2"] .map-go__gauge i:nth-child(2),
.map-go[data-danger="3"] .map-go__gauge i{ background: var(--dg); }
/* a hard road looks dangerous — weight the whole card at max danger */
.map-go[data-danger="3"]{ border-color: color-mix(in srgb, var(--red) 42%, var(--gold-dim)); }
.map-go[data-danger="3"] .map-go__gauge{ box-shadow: inset -1px 0 0 color-mix(in srgb,var(--bg) 70%,transparent), 0 0 7px color-mix(in srgb, var(--red) 55%, transparent); }
.map-go[data-danger="3"]::before{
  content: ""; position: absolute; inset: 0; border-radius: 3px; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 14px -4px color-mix(in srgb, var(--red) 40%, transparent);
}

/* --- OGEE ARCH CROWN cresting the top rule (mihrab geometry) --- */
.map-go__crown{
  position: absolute; top: 0; left: 26px; width: 48px; height: 16px;
  transform: translateY(-58%); z-index: 4; pointer-events: none;
}
.map-go__crown svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.map-go__crown-arch{ stroke: var(--gold-dim); stroke-width: 1; transition: stroke .25s ease, filter .25s ease; }

/* --- caravan-dot sliding along the top rule on hover --- */
.map-go__caravan{
  position: absolute; top: -1px; left: 8px; width: 5px; height: 5px; z-index: 5;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--gold) 70%, transparent);
  opacity: 0; pointer-events: none;
}

/* --- GILT CARTOUCHE holding the shared type emblem, on a jewel-ink ground --- */
.map-go__cartouche{
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--gold-dim));
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--accent-ground);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.map-go__halo{
  position: absolute; inset: -7px; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.map-go__emblem{ position: relative; z-index: 2; width: 30px; height: 30px; color: var(--accent); }
.map-go__emblem svg{ display: block; width: 100%; height: 100%; }
.map-go__fret{ position: absolute; inset: 0; z-index: 3; color: color-mix(in srgb, var(--accent) 65%, var(--gold)); pointer-events: none; }

/* --- BODY: name on a gold rubric underline, scribe's read-line, marginalia chips --- */
.map-go__body{ display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; position: relative; z-index: 1; }
.map-go__name{
  align-self: flex-start; max-width: 100%;
  font-family: var(--serif); font-size: 18px; line-height: 1.1; color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
}
.map-go__read{
  font-family: var(--serif); font-style: italic; font-size: 12.5px; line-height: 1.32;
  color: var(--ink-dim);
}
.map-go__margin{ display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 1px; }
.map-go__type{
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.map-go__bullet{ color: var(--gold-dim); flex: 0 0 auto; }
.map-go__bullet rect{ fill: currentColor; }
.map-go__badges{ display: inline-flex; align-items: center; gap: 7px; }
.map-go__badges:empty{ display: none; }
.map-go__margin :where(svg, span, i){ vertical-align: middle; }

/* --- HOVER / FOCUS: lift, gild the rules, bloom the initial --- */
.map-go:hover,
.map-go:focus-visible{
  transform: translateY(-1px);
  border-color: var(--gold);
  box-shadow:
    0 4px 12px -3px color-mix(in srgb, var(--bg) 82%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
}
.map-go:hover .map-go__crown-arch,
.map-go:focus-visible .map-go__crown-arch{
  stroke: var(--gold);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 60%, transparent));
}
.map-go:hover .map-go__caravan,
.map-go:focus-visible .map-go__caravan{ opacity: 1; animation: mapGoCaravan 1.5s linear infinite; }
.map-go:hover .map-go__halo,
.map-go:focus-visible .map-go__halo{ opacity: .9; }
.map-go:hover .map-go__cartouche,
.map-go:focus-visible .map-go__cartouche{
  border-color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 0 13px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.map-go:hover .map-go__name,
.map-go:focus-visible .map-go__name{ border-bottom-color: var(--gold); }
@keyframes mapGoCaravan{
  from{ left: 8px; }
  to{ left: calc(100% - 10px); }
}

/* ============ PER-TYPE ACCENTS (five distinct hands, shared lexicon with the map) ============ */
.map-go.type-village{ --accent: var(--green);    --accent-ground: color-mix(in srgb, var(--green) 15%, var(--bg2)); }
.map-go.type-town   { --accent: var(--gold-dim); --accent-ground: color-mix(in srgb, var(--gold-dim) 20%, var(--bg2)); }
.map-go.type-city   { --accent: var(--gold);     --accent-ground: color-mix(in srgb, var(--blue) 34%, var(--bg2)); } /* gold-on-lapis */
.map-go.type-wild   { --accent: var(--red);      --accent-ground: color-mix(in srgb, var(--red) 15%, var(--bg2)); }
.map-go.type-sanctuary{ --accent: var(--gold);   --accent-ground: var(--bg2); } /* gold-leaf on night ink */

/* ============ THE SANCTUARY BREAKS THE GRID — the leaf's destination ============ */
.map-go.type-sanctuary{
  padding: 20px 18px 18px 24px;
  border-color: var(--gold);
  background:
    radial-gradient(140% 110% at 50% -10%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 84%, var(--gold) 6%), var(--bg2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
.map-go.type-sanctuary .map-go__cartouche{ width: 54px; height: 54px; }
.map-go.type-sanctuary .map-go__emblem{ width: 38px; height: 38px; }
.map-go.type-sanctuary .map-go__halo{ opacity: .5; } /* always radiant */
.map-go.type-sanctuary .map-go__name{ font-size: 20px; }
.map-go.type-sanctuary .map-go__crown{
  width: 62px; height: 22px; left: 24px; transform: translateY(-60%);
}
.map-go.type-sanctuary .map-go__crown-arch{
  stroke: var(--gold); stroke-width: 1.3;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--gold) 50%, transparent));
}
.map-go.type-sanctuary:hover,
.map-go.type-sanctuary:focus-visible{
  box-shadow:
    0 5px 16px -4px color-mix(in srgb, var(--bg) 80%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ============ reduced motion — dignified stillness ============ */
@media (prefers-reduced-motion: reduce){
  .map-go, .map-go *{ transition: none !important; }
  .map-go:hover .map-go__caravan,
  .map-go:focus-visible .map-go__caravan{ animation: none; opacity: 1; left: 50%; }
}
/* --- marginalia badge glyphs + the unread-place accent --- */
.map-go__badges .mg-badge{display:inline-flex;width:14px;height:14px}
.map-go__badges .mg-badge svg{width:100%;height:100%}
.map-go__badges .mg-badge.market{color:var(--gold)}
.map-go__badges .mg-badge.rest{color:var(--gold-dim)}
.map-go__badges .mg-badge.danger{color:var(--red)}
.map-go.type-unknown{--accent:var(--ink-faint);--accent-ground:var(--panel)}
.map-go.type-unknown .map-go__type{font-style:italic;text-transform:none;letter-spacing:.04em}


/* ============ MARKET / INVENTORY / ASK ============ */
.shop, .inv, .ask, .amb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.shop-row, .inv-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 16px; }
.shop-info b { font-family: var(--serif); font-size: 16px; }
.shop-kind { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-left: 6px; }
.shop-info .muted { font-size: 13px; margin-top: 4px; }
.btn.small { font-size: 13px; padding: 8px 14px; white-space: nowrap; }
.worn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.ask-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; font-size: 14px; }
.ask-row b { font-family: var(--serif); }
.amb-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; }
.amb-row b { font-family: var(--serif); }
.amb-met { color: var(--green); } .amb-unmet { color: var(--ink-faint); }

/* ============ SIMPLE result (pray/reflect/work) ============ */
.simple { max-width: 600px; margin: 30px auto; text-align: center; animation: rise 0.5s ease; }
.hub-act.rest { border-left: 3px solid var(--blue); }

/* ============ COMBAT ============ */
.combat { max-width: 560px; margin: 16px auto; text-align: center; animation: rise 0.4s ease; padding-bottom: 30px; }
.combat-name { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 6px 0 4px; }
.combat-desc { font-size: 14.5px; line-height: 1.5; max-width: 46ch; margin: 0 auto 20px; }
.combat-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.cbar { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.cbar-label { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.03em; }
.cbar-track { height: 9px; border-radius: 6px; background: rgba(233,220,196,0.1); overflow: hidden; }
.cbar-track > i { display: block; height: 100%; border-radius: 6px; transition: width 0.35s ease; }
.cbar-track.enemy > i { background: linear-gradient(90deg, #8a3b2f, var(--red)); }
.cbar-track.you > i { background: linear-gradient(90deg, #6b8f52, var(--green)); }
.combat-log { font-family: var(--serif); font-style: italic; font-size: 16px; color: #e8ddc7; min-height: 1.4em; margin: 6px 0 18px; }
.combat-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* the stamina/telegraph minigame */
.cbar-track.stamina > i { background: linear-gradient(90deg, #b78a3c, #e0c064); }
.cbar-track.stamina.low > i { background: linear-gradient(90deg, #b8603a, #d98c73); }
.combat-tell { margin: 0 auto 14px; max-width: 46ch; padding: 8px 14px; border: 1px solid var(--red); border-radius: 10px; background: rgba(217,140,115,0.12); color: #e6a48c; font-size: 14px; box-shadow: 0 0 0 3px rgba(217,140,115,0.12); }
.combat-acts .cmove { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 14px; min-width: 152px; }
.cmove .mv-label { font-size: 15px; }
.cmove .mv-w { font-size: 12px; color: var(--ink-dim); font-style: italic; }
.cmove .mv-meta { font-size: 11px; letter-spacing: 0.02em; color: var(--ink-faint); }
.cmove[disabled] { opacity: 0.45; cursor: not-allowed; }
.combat.heavy .cbar-track.you.hurt > i { background: linear-gradient(90deg, #a83b2f, #e06a5a); }
.inv-eff.wpn-eff { color: #d68a63; }
/* the bow aiming minigame */
.combat .aim-instruct { font-size: 14px; color: var(--ink-dim); margin: 2px auto 20px; max-width: 42ch; }
.aim-bar { position: relative; height: 34px; max-width: 460px; margin: 6px auto 22px; border-radius: 8px; background: rgba(233,220,196,0.08); border: 1px solid var(--line); cursor: pointer; }
.aim-zone { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.aim-zone.hit { background: rgba(127,176,105,0.2); }
.aim-zone.bull { background: rgba(217,184,102,0.5); box-shadow: 0 0 12px rgba(217,184,102,0.45); }
.aim-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; left: 0; background: var(--red); box-shadow: 0 0 7px rgba(217,140,115,0.85); }
.aim-marker::before { content: "▼"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: var(--red); font-size: 12px; }

/* ---- ending: ambition recap ---- */
.amb-recaps { margin: 12px 0; text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
.amb-recap { font-size: 13.5px; color: var(--ink-dim); font-style: italic; margin-bottom: 6px; }

/* ============ FEELING (how a choice sits in the soul) ============ */
.feeling { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.6; color: var(--gold-dim); margin: -4px 0 16px; opacity: 0.95; }

/* ============ MOSQUE GEOMETRY: tilework band + mihrab arch ============ */
.girih-band { display: block; width: 190px; height: 12px; margin: 16px auto 22px; opacity: 0.72; }
.girih-band rect, .girih-band line { fill: none; stroke: var(--gold-dim); stroke-width: 1; }
.arched {
  position: relative; border: 1px solid var(--gold-dim);
  border-top-left-radius: 46% 88px; border-top-right-radius: 46% 88px;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  padding: clamp(40px, 8vw, 60px) clamp(20px, 5vw, 34px) 30px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(217,184,102,0.07), rgba(217,184,102,0) 60%), var(--panel);
  max-width: 620px; margin: 16px auto;
}
.arched::before { /* keystone star at the apex of the arch */
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--bg); border: 1px solid var(--gold-dim);
}

/* ============ SETTING SCENE (hub banner) ============ */
.scene-frame { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; box-shadow: inset 0 0 30px rgba(0,0,0,0.4); }
/* bolder, more saturated banners + a little more presence */
.scene-art { display: block; width: 100%; height: clamp(82px, 21vw, 112px); filter: saturate(1.22) contrast(1.05); }
.scene-star { fill: none; stroke: #e9d6a8; stroke-width: 1; opacity: 0.4; }
.scene-star.bright { opacity: 0.7; }
/* a slow light passes over every banner, so the scene is never quite still */
.scene-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,246,222,0.05) 50%, transparent 58%);
  transform: translateX(-100%); animation: scene-sweep 11s ease-in-out infinite; }
@keyframes scene-sweep { 0%, 12% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* --- the per-location scenes mark elements for motion; the engine animates these classes --- */
.scene-art .scene-twinkle { animation: scene-tw 3.6s ease-in-out infinite; }
@keyframes scene-tw { 0%, 100% { opacity: 0.32; } 50% { opacity: 1; } }
.scene-art .scene-glow { animation: scene-glow 5s ease-in-out infinite; }
@keyframes scene-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.scene-art .scene-shimmer { animation: scene-shimmer 4.5s ease-in-out infinite; }
@keyframes scene-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
.scene-art .scene-flicker { animation: scene-flicker 2.6s ease-in-out infinite; }
@keyframes scene-flicker { 0%, 100% { opacity: 0.6; } 30% { opacity: 1; } 45% { opacity: 0.7; } 70% { opacity: 0.95; } }
.scene-art .scene-drift { animation: scene-drift 24s ease-in-out infinite alternate; }
@keyframes scene-drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.scene-art .scene-rise { transform-box: fill-box; animation: scene-rise 6.5s ease-out infinite; }
@keyframes scene-rise { 0% { opacity: 0.5; transform: translateY(4px); } 60% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-10px); } }

/* --- a place wears your deeds + the age you live in: the art and frame shift with its state --- */
.scene-frame.state-grateful .scene-art { filter: saturate(1.32) brightness(1.07) contrast(1.05); }
.scene-frame.state-grateful { box-shadow: inset 0 0 0 1px rgba(217,184,102,0.34), inset 0 0 40px rgba(217,184,102,0.12), 0 0 22px rgba(217,184,102,0.12); }
.scene-frame.state-thriving .scene-art { filter: saturate(1.3) brightness(1.05); }
.scene-frame.state-grieving .scene-art { filter: saturate(0.5) brightness(0.82) contrast(1.02); }
.scene-frame.state-grieving { box-shadow: inset 0 0 40px rgba(0,0,0,0.55); }
.scene-frame.state-wary .scene-art { filter: saturate(0.85) brightness(0.9); }
.scene-frame.state-wary { box-shadow: inset 0 0 0 1px rgba(217,140,115,0.28), inset 0 0 34px rgba(0,0,0,0.4); }
.scene-frame.state-troubled .scene-art { filter: saturate(1.06) contrast(1.12) brightness(0.9); }
.scene-frame.state-troubled { box-shadow: inset 0 0 0 1px rgba(180,80,60,0.22), inset 0 0 40px rgba(60,10,10,0.4); }
.loc-state { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; max-width: 66ch; }
.loc-state.grateful { color: var(--gold); } .loc-state.thriving { color: #8fbf7a; }
.loc-state.grieving { color: #9db4d6; } .loc-state.wary { color: var(--red); } .loc-state.troubled { color: #d98c73; }
/* what the journey did to you, shown once on arrival (no more silent meter shifts on travel) */
.arrival-note { font-size: 13px; letter-spacing: .02em; color: var(--ink-dim); background: rgba(233,220,196,0.05); border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; margin: 0 0 16px; }

/* --- an emotional key on toned scenes: a hair of colour on the banner + accent --- */
.scene.tone-tragedy .act-name { color: #9db4d6; } .scene.tone-tragedy .scene-title { color: #d7e0ec; }
.scene.tone-tender .act-name { color: #e2a7b4; }
.scene.tone-comedy .act-name { color: #9bce86; }
.scene.tone-drama .act-name { color: var(--gold); }


/* ---- encounter scene banner: the scenario gets its own illuminated art, keyed to verseTheme + tinted by tone ---- */
.scene-frame.scene-enc { animation: rise 0.45s ease; }
.scene-enc .scene-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  padding: 28px 16px 8px; background: linear-gradient(transparent, rgba(9,7,4,0.8));
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-dim); text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
/* tone tints the banner art + caption, mirroring the location state-* treatments */
.scene-frame.scene-enc.tone-drama .scene-art { filter: saturate(1.16) contrast(1.16) brightness(1.02); }
.scene-frame.scene-enc.tone-drama { box-shadow: inset 0 0 0 1px rgba(217,184,102,0.22), inset 0 0 34px rgba(0,0,0,0.42); }
.scene-frame.scene-enc.tone-drama .scene-cap { color: var(--gold); }
.scene-frame.scene-enc.tone-tender .scene-art { filter: saturate(1.24) brightness(1.06); }
.scene-frame.scene-enc.tone-tender { box-shadow: inset 0 0 0 1px rgba(226,167,180,0.2), inset 0 0 40px rgba(120,50,70,0.14); }
.scene-frame.scene-enc.tone-tender .scene-cap { color: #e2a7b4; }
.scene-frame.scene-enc.tone-comedy .scene-art { filter: saturate(1.34) brightness(1.1); }
.scene-frame.scene-enc.tone-comedy .scene-cap { color: #9bce86; }
.scene-frame.scene-enc.tone-tragedy .scene-art { filter: saturate(0.5) brightness(0.8) contrast(1.06); }
.scene-frame.scene-enc.tone-tragedy { box-shadow: inset 0 0 0 1px rgba(120,150,190,0.18), inset 0 0 42px rgba(0,0,0,0.55); }
.scene-frame.scene-enc.tone-tragedy .scene-cap { color: #9db4d6; }

/* ---- kinship: per-person scene banner (name + role + a bond chip + an aniconic sigil, never a face) ---- */
.scene-cap .npc-sigil { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; color: currentColor; opacity: 0.92; }
.scene-cap .npc-sigil svg { width: 100%; height: 100%; }
.bond-chip { display: inline-block; font-size: 9.5px; letter-spacing: 0.08em; padding: 2px 7px; margin-left: 8px; border-radius: 20px; border: 1px solid var(--line); background: rgba(0,0,0,0.28); color: var(--ink-dim); text-shadow: none; }
.bond-chip.bond2 { color: #efd794; border-color: rgba(217,184,102,0.55); background: rgba(217,184,102,0.14); }
.bond-chip.bond1 { color: #9bce86; border-color: rgba(127,176,105,0.45); }
.bond-chip.bond-1 { color: #a9c4de; border-color: rgba(127,168,201,0.45); }
.bond-chip.bond-2 { color: #e6a48c; border-color: rgba(217,140,115,0.5); background: rgba(217,140,115,0.12); }
/* the immediate warmer/colder chip on the outcome screen */
.delta.rel { border: 1px solid var(--line); background: rgba(217,184,102,0.08); }
.delta.rel.up { color: #efd794; }
.delta.rel.down { color: var(--red); }
/* "Those who remember you" on the Character screen */
.rel-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px solid rgba(233,220,196,0.06); }
.rel-row:last-of-type { border-bottom: none; }
.rel-row .npc-sigil { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold-dim); opacity: 0.85; }
.rel-row .npc-sigil svg { width: 100%; height: 100%; display: block; }
.rel-name { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.rel-word { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); }
.rel-deed { font-style: italic; font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
.rel-since { font-size: 11px; white-space: nowrap; color: var(--ink-faint); }
.rel-row.bond2 .npc-sigil { color: #efd794; opacity: 1; }
.rel-row.bond2 .rel-word { color: #efd794; }
.rel-row.bond1 .rel-word { color: #9bce86; }
.rel-row.bond-1 .rel-word { color: #a9c4de; }
.rel-row.bond-2 .npc-sigil { color: var(--red); }
.rel-row.bond-2 .rel-word { color: var(--red); }
.rel-renown { margin-top: 9px; font-style: italic; }

/* the madrasa: quiz / examination */
.scene.school .scene-text.small { font-size: 15px; color: var(--ink-dim); margin-bottom: 14px; }
.quiz-q { font-size: 20px; margin-bottom: 6px; }
.choice.quiz-opt.quiz-correct { border-color: var(--green); border-left-color: var(--green); background: rgba(127,176,105,0.14); box-shadow: 0 0 0 1px rgba(127,176,105,0.38); }
.choice.quiz-opt.quiz-correct::after { content: "✓"; position: absolute; right: 16px; color: var(--green); font-size: 18px; z-index: 2; }
.choice.quiz-opt.quiz-wrong { border-color: var(--red); border-left-color: var(--red); background: rgba(217,140,115,0.12); }
.choice.quiz-opt[disabled] { cursor: default; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .scene-frame.scene-enc { animation: none !important; }
  .scene-frame::after, .scene-art .scene-twinkle, .scene-art .scene-glow, .scene-art .scene-shimmer,
  .scene-art .scene-flicker, .scene-art .scene-drift, .scene-art .scene-rise { animation: none !important; }
}

/* ============ ITEM GLYPHS ============ */
.glyph { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 7px; color: var(--gold-dim); opacity: 0.92; }
.shop-info b .glyph, .inv-row b .glyph { color: var(--gold); }

/* ============ TRIALS (disabilities) reveal ============ */
.trials { text-align: center; animation: rise 0.7s ease; }
.trials-intro { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: #e8ddc7; max-width: 54ch; margin: 12px auto 22px; text-align: left; }
.trials-none { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: #e8ddc7; max-width: 52ch; margin: 14px auto 22px; }
.trials-list { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 18px; }
.trial-row { border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 11px; padding: 12px 16px; background: var(--panel); }
.trial-row.mental { border-left-color: #9db4d6; }
.trial-name { font-family: var(--serif); font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.trial-kind { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; }
.trial-note { font-size: 13.5px; margin: 4px 0 6px; }
.trial-bear { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold-dim); }

/* ============ LESSON (a point of faith) ============ */
.lesson { text-align: center; animation: rise 0.6s ease; }
.lesson-title { font-family: var(--serif); font-size: clamp(22px, 5vw, 28px); font-weight: 500; margin: 6px 0 14px; }
.lesson-body { font-family: var(--serif); font-size: 17px; line-height: 1.72; color: #e8ddc7; text-align: left; max-width: 58ch; margin: 0 auto 18px; text-wrap: pretty; }
.lesson .deltas { justify-content: center; }

/* ============ HUB: learn action + rail bearing ============ */
.hub-act.learn { border-left: 3px solid #7fbfa8; }
.rl-bearing { text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; }
.rl-bearing.proud { color: var(--red); }
.rl-bearing.humble { color: var(--green); }

/* ============ FOLLOW-UP INFO + INTROSPECTIVE / DOUBT / QUEST SCENES ============ */
.reveal-line { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink-dim); border-left: 2px solid var(--line); padding-left: 14px; margin: 0 0 14px; }
.scene.inward .scene-text, .scene.doubt .scene-text { border-left: 2px solid var(--gold-dim); padding-left: 16px; }
.scene.inward .act-name { color: #9db4d6; }   /* reliance-blue — a turn inward */
.scene.doubt .act-name { color: #c7b8e0; }    /* guidance-lavender — a question of faith */
.scene.quest .act-name { color: #7fbfa8; }    /* knowledge-teal — a task asked of you */
.scene.people .act-name { color: #d69f7e; }   /* charity-warm — among the townsfolk */
.hub-act.people { border-left: 3px solid #d69f7e; }
.hub-act.provision { border-left: 3px solid #6bbf59; }
.hub-act.charity { border-left: 3px solid #e2879e; }

/* ============ INVENTORY (reworked: categorized cards) ============ */
.inv-panel .inv-coin { color: var(--gold); margin-bottom: 20px; letter-spacing: 0.06em; }
.inv-panel .ic-num { font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums; }
.inv-section { margin-bottom: 24px; }
.inv-section-h { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 11px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.inv-card { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.inv-card.equipment { border-left: 3px solid var(--gold-dim); }
.inv-card.medicine { border-left: 3px solid #e2879e; }
.inv-glyph { flex: 0 0 auto; }
.inv-glyph .glyph { width: 2em; height: 2em; margin: 2px 0 0; color: var(--gold); opacity: 0.95; }
.inv-body { flex: 1 1 auto; min-width: 0; }
.inv-name { font-family: var(--serif); font-size: 16px; }
.inv-count { color: var(--gold-dim); font-size: 13px; }
.inv-eff { font-size: 12.5px; margin-top: 3px; }
.inv-eff.worn-eff { color: var(--gold-dim); }
.inv-eff.use-eff { color: var(--green); }
.inv-desc { font-size: 12.5px; line-height: 1.45; margin-top: 5px; }
.inv-act { flex: 0 0 auto; align-self: center; }

/* ============ WORLD CONDITION (the age you are born into) ============ */
.world-note { border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: 12px; padding: 12px 16px; margin: 14px auto 4px; max-width: 56ch; text-align: left; background: rgba(217,184,102,0.05); }
.world-name { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.world-note p { font-family: var(--serif); font-size: 15px; line-height: 1.62; color: #ded3bd; margin: 6px 0 0; }
.loc-detail { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink-faint); margin: 2px 0 10px; max-width: 66ch; }

/* ============ TALENT CATEGORIES ============ */
.talent-cat { margin-bottom: 20px; }
.talent-cat-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.talent-cat-label { font-family: var(--serif); font-size: 16px; color: var(--gold); letter-spacing: 0.02em; }
.talent-cat-blurb { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.talent-cat-tag { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; }
.talent.choose.cat-body { border-left: 3px solid #d98c73; }
.talent.choose.cat-mind { border-left: 3px solid #7fa8c9; }
.talent.choose.cat-heart { border-left: 3px solid #e2879e; }
.talent.choose.cat-faith { border-left: 3px solid var(--gold); }
.talent.choose.cat-fortune { border-left: 3px solid #7fbfa8; }
.talent.choose.picked { border-left-color: var(--gold); }

/* ============ FULL-BLEED RESPONSIVE LAYOUT ============ */
/* Reading-centric screens stay a measured column; grid/utility screens fan out to fill
   the width; the shell + background go edge to edge and adapt to the viewport. */
.scene, .outcome { max-width: 760px; margin-left: auto; margin-right: auto; }
.choices { max-width: 680px; }
.scene-text, .outcome-text, .loc-desc, .reveal-line, .feeling { max-width: 66ch; }

.hub { max-width: 100%; }
.loc-head { max-width: 860px; }
.hub-acts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.paths { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.talent-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.map-screen, .panel { max-width: 960px; }
.rail-inner { max-width: var(--gw); }
.growth { max-width: 760px; }

/* The peripheral verse ("signs surface at the edge"): a fixed side-lane on wide screens
   (with the content reserving room for it), inline below the content on smaller ones. */
@media (min-width: 1081px) {
  body.has-aside .game { padding-right: 340px; }
  .reflection { right: max(20px, calc((100vw - var(--gw)) / 2 + 14px)); width: clamp(280px, 22vw, 320px); top: 92px; }
}
@media (max-width: 1080px) {
  .reflection { position: static; width: auto; max-width: 680px; margin: 8px auto 22px; transform: none; opacity: 1; transition: none; box-shadow: none; }
  .reflection:not(.show) { display: none; }
}

@media (max-width: 720px) {
  .brand-sub { display: none; }
  .meter-pip .pip-bar { width: 48px; }
  .arched { border-top-left-radius: 40% 54px; border-top-right-radius: 40% 54px; }
}
/* narrow phones: the top bar + nav must never overrun the viewport (which used to stretch the fixed rail
   to match the overflowing document width). flex-wrap guarantees no horizontal overflow; the smaller
   links keep it to one line on most phones. */
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; row-gap: 2px; padding-top: 12px; padding-bottom: 12px; }
  .topnav { flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
  .linkbtn { padding: 6px 8px; font-size: 10.5px; letter-spacing: 0.03em; }
  .brand-title { font-size: 17px; }
  /* compact the rail so its wrapped tokens don't eat a small phone (nothing is hidden — just tighter) */
  .rail { padding: 7px 10px; }
  .rail-pips { gap: 8px 10px; }
  .stat-pip { min-width: 36px; }
  .stat-pip .pip-emblem svg { width: 13px; height: 13px; }
  .stat-pip .pip-val { font-size: 14px; }
  .stat-pip .pip-bar { width: 34px; }
  .stat-pip .pip-short { font-size: 9px; }
  .meter-pip { min-width: 50px; padding: 2px 7px 4px; }
  .meter-pip .pip-icon svg { width: 13px; height: 13px; }
  .rail-life { gap: 10px; font-size: 10px; }
}

/* ============ GAME-FEEL, ANIMATION & ILLUMINATED TEXT ============ */
/* creation reads more like a game screen */
.points { box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.preset { transition: color 0.15s, border-color 0.15s, transform 0.08s; }
.preset:active { transform: translateY(1px); }

/* illuminated narrative: a gold drop-cap opens authored prose (verse text is never touched) */
.scene-text::first-letter, .lesson-body::first-letter, .ending-body::first-letter, .reveal.illum .backstory::first-letter {
  font-family: var(--serif); font-size: 3.1em; line-height: 0.82; float: left;
  margin: 0.04em 0.10em 0 0; color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.scene.inward .scene-text::first-letter { color: #9db4d6; }
.scene.doubt .scene-text::first-letter { color: #c7b8e0; }
/* results read distinct from scenes: a small illuminated rule instead of a drop-cap */
.outcome-text { position: relative; padding-left: 16px; }
.outcome-text::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--gold), rgba(217,184,102,0)); }

/* delta chips carry a little more presence */
.delta { background: rgba(233,220,196,0.03); }
.delta.up { box-shadow: inset 0 0 0 1px rgba(127,176,105,0.14); }
.delta.down { box-shadow: inset 0 0 0 1px rgba(217,140,115,0.14); }

/* a tilework flourish under the act banner + a small lift on interactive rows */
.act-name::after { content: ""; display: block; width: 30px; height: 1px; margin: 6px auto 0; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
.hub-act:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }

/* ---- the "light on your road" gauge (character sheet) ---- */
.iman-gauge { display: flex; gap: 7px; margin: 2px 0 10px; }
.iman-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(233,220,196,0.12); border: 1px solid var(--line); }
.iman-dot.lit { background: radial-gradient(circle at 35% 30%, #fbeeba, var(--gold)); border-color: var(--gold-dim); box-shadow: 0 0 8px rgba(217,184,102,0.5); }
.iman-note { font-style: italic; font-size: 13.5px; }

/* ---- The Gilded Chart — journey interstitial: an atlas leaf illuminates as you set out ---- */
.travel-anim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:radial-gradient(120% 92% at 50% 42%, var(--bg2), var(--bg));opacity:0;transition:opacity .34s ease;}
.travel-anim.in{opacity:1;}
.travel-anim.out{opacity:0;}
.ta-scene{position:absolute;inset:0;width:100%;height:100%;display:block;}

.ta-leaf{transform-box:fill-box;transform-origin:left center;animation:ta-turn 2.24s cubic-bezier(.55,.02,.3,1) both;}

.ta-lattice path{stroke-dashoffset:1;animation:ta-draw 0.99s ease-out both;}
.ta-lattice path:nth-child(1){animation-delay:0.03s;}
.ta-lattice path:nth-child(2){animation-delay:0.14s;}
.ta-lattice path:nth-child(3){animation-delay:0.26s;}
.ta-lattice path:nth-child(4){animation-delay:0.1s;}
.ta-lattice path:nth-child(5){animation-delay:0.21s;}
.ta-lattice path:nth-child(6){animation-delay:0.32s;}
.ta-lstar{opacity:0;animation:ta-fade 0.8s ease-out both;}
.ta-lstar:nth-of-type(1){animation-delay:0.54s;}
.ta-lstar:nth-of-type(2){animation-delay:0.64s;}
.ta-lstar:nth-of-type(3){animation-delay:0.74s;}

.ta-road-line{stroke-dashoffset:1;animation:ta-ink 1.15s cubic-bezier(.4,0,.3,1) both;animation-delay:0.35s;}
.ta-road-base{opacity:0;animation:ta-fade 0.64s ease-out both;animation-delay:0.26s;}

.ta-skyline{opacity:0;animation:ta-fade 0.96s ease-out both;animation-delay:0.45s;}

.ta-cvn{offset-rotate:0deg;offset-anchor:0px 0px;offset-path:path("M18 184 C78 160 118 202 176 178 C236 154 278 180 322 150");animation:ta-march 2.08s cubic-bezier(.35,0,.5,1) both;}
.ta-cvn1{--d0:-4%;--d1:44%;}
.ta-cvn2{--d0:-16%;--d1:32%;animation-delay:0.06s;}
.ta-cvn3{--d0:-28%;--d1:20%;animation-delay:0.13s;}
.ta-cvn4{--d0:-40%;--d1:8%;animation-delay:0.19s;}
.ta-bundle{transform-box:fill-box;transform-origin:center;animation:ta-bob 2.4s ease-in-out infinite;}
.ta-cvn2 .ta-bundle{animation-delay:0.4s;}
.ta-cvn3 .ta-bundle{animation-delay:0.8s;}
.ta-cvn4 .ta-bundle{animation-delay:1.2s;}
.ta-glow{transform-box:fill-box;transform-origin:center;animation:ta-lamp 2.72s ease-in-out infinite;}
.ta-cvn2 .ta-glow{animation-delay:0.64s;}
.ta-cvn3 .ta-glow{animation-delay:1.28s;}
.ta-cvn4 .ta-glow{animation-delay:1.92s;}

.ta-waypoint{offset-rotate:0deg;offset-anchor:0px 0px;offset-path:path("M18 184 C78 160 118 202 176 178 C236 154 278 180 322 150");opacity:0;animation:ta-way 2.24s cubic-bezier(.4,0,.3,1) both;}
.ta-way-star{transform-box:fill-box;transform-origin:center;animation:ta-spin 4.8s linear infinite;}

.ta-mote{transform-box:fill-box;transform-origin:center;animation:ta-drift 6.4s ease-in-out infinite;}
.ta-mote2{animation-duration:8.32s;animation-delay:0.96s;}
.ta-mote3{animation-duration:7.36s;animation-delay:1.76s;}

.ta-frame{opacity:0;animation:ta-fade 0.8s ease-out both;animation-delay:0.16s;}

.ta-iris{pointer-events:none;}
.ta-iris-core{transform-box:fill-box;transform-origin:center;animation:ta-iris 2.24s cubic-bezier(.5,0,.4,1) both;}

.ta-word{position:absolute;left:0;right:0;bottom:14%;display:flex;flex-direction:column;align-items:center;gap:.5em;pointer-events:none;opacity:0;transform:translateY(7px);animation:ta-word 2.24s ease-out both;}
.ta-colophon{width:78px;height:20px;overflow:visible;}
.ta-col-dot{transform-box:fill-box;transform-origin:center;animation:ta-colpulse 3.2s ease-in-out infinite;}
.ta-col-far{animation-delay:0.64s;}
.ta-word-text{font-family:var(--serif);font-size:clamp(15px,2.4vw,21px);color:var(--gold-dim);text-transform:lowercase;font-variant:small-caps;letter-spacing:.3em;text-indent:.3em;text-align:center;text-shadow:0 1px 10px rgba(217,184,102,0.25);}

@keyframes ta-fadein{from{opacity:0;}to{opacity:1;}}
@keyframes ta-fade{from{opacity:0;}to{opacity:1;}}
@keyframes ta-draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes ta-ink{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes ta-march{from{offset-distance:var(--d0);}to{offset-distance:var(--d1);}}
@keyframes ta-bob{0%,100%{transform:translateY(0) scale(.9);}50%{transform:translateY(-2.4px) scale(.9);}}
@keyframes ta-lamp{0%,100%{opacity:.55;transform:scale(.9);}50%{opacity:1;transform:scale(1.18);}}
@keyframes ta-way{0%{offset-distance:32%;opacity:0;}18%{opacity:1;}86%{offset-distance:100%;opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes ta-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes ta-drift{0%,100%{transform:translate(0,0);opacity:.5;}50%{transform:translate(6px,-4px);opacity:.9;}}
@keyframes ta-iris{0%,66%{transform:scale(0);opacity:0;}74%{opacity:1;}100%{transform:scale(9);opacity:1;}}
@keyframes ta-turn{0%,70%{transform:translateX(0) rotate(0deg);opacity:1;}100%{transform:translateX(48px) rotate(2.4deg);opacity:.12;}}
@keyframes ta-word{0%,36%{opacity:0;transform:translateY(7px);}68%,100%{opacity:1;transform:translateY(0);}}
@keyframes ta-colpulse{0%,100%{opacity:.5;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}

@media (prefers-reduced-motion:reduce){
  .ta-leaf,.ta-frame,.ta-skyline,.ta-road-base,.ta-lattice path,.ta-lstar,.ta-bundle,.ta-glow,.ta-mote,.ta-way-star,.ta-col-dot,.ta-word{animation:none !important;}
  .ta-leaf{opacity:1;transform:none;}
  .ta-frame,.ta-skyline,.ta-road-base,.ta-lstar{opacity:1;}
  .ta-lattice path{stroke-dashoffset:0;}
  .ta-road-line{animation:none !important;stroke-dashoffset:0;}
  .ta-cvn{animation:none !important;}
  .ta-cvn1{offset-distance:44%;}.ta-cvn2{offset-distance:34%;}.ta-cvn3{offset-distance:24%;}.ta-cvn4{offset-distance:14%;}
  .ta-waypoint{animation:none !important;offset-distance:100%;opacity:1;}
  .ta-iris-core{animation:none !important;transform:scale(0);opacity:0;}
  .ta-word{opacity:1;transform:none;}
}

/* ---- combat clash: bars flash and shake, damage numbers rise ---- */
.combat.clash .combat-name { animation: clash-title 0.4s ease; }
@keyframes clash-title { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
.cbar { position: relative; }
.cbar-track.hit { animation: bar-hit 0.45s ease; }
.cbar-track.you.hurt { animation: bar-shake 0.45s ease; }
@keyframes bar-hit { 0% { box-shadow: 0 0 0 rgba(255,207,159,0); } 30% { box-shadow: 0 0 16px rgba(255,207,159,0.8); } 100% { box-shadow: none; } }
@keyframes bar-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.cdmg {
  position: absolute; right: 10px; bottom: 2px; font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--red); text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; animation: cdmg-rise 0.9s ease forwards;
}
.cbar:first-of-type .cdmg { color: #ffcf9f; }
@keyframes cdmg-rise { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-18px); } }

/* ============ FLOW: small staggered entrances so a screen assembles, not just appears ============ */
@keyframes flow-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* the play-loop lists cascade in one after another */
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card) {
  animation: flow-in 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(2) { animation-delay: 0.045s; }
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(3) { animation-delay: 0.09s; }
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(4) { animation-delay: 0.135s; }
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(5) { animation-delay: 0.18s; }
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(6) { animation-delay: 0.225s; }
:is(.choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row, .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card):nth-child(7) { animation-delay: 0.27s; }
:is(.hub-acts .hub-act, .growth .growth-row):nth-child(8) { animation-delay: 0.315s; }
:is(.hub-acts .hub-act):nth-child(9) { animation-delay: 0.36s; }
:is(.hub-acts .hub-act):nth-child(10) { animation-delay: 0.405s; }
:is(.hub-acts .hub-act):nth-child(11) { animation-delay: 0.45s; }
:is(.hub-acts .hub-act):nth-child(n+12) { animation-delay: 0.49s; }
/* creation lists get a gentle uniform fade (their own screen already rises) */
.paths .path, .talent-grid .talent, .presets .preset { animation: flow-in 0.42s cubic-bezier(0.16,1,0.3,1) both; }
/* the aftermath lines arrive a beat after the outcome text, so a result unfolds */
.feeling, .reveal-line { animation: flow-in 0.55s ease both; animation-delay: 0.16s; }
/* the peripheral verse breathes in (already soft); keep the girih band alive with a faint shimmer */
.girih-band { animation: band-breath 6s ease-in-out infinite; }
@keyframes band-breath { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.82; } }

@media (prefers-reduced-motion: reduce) {
  .choices .choice, .hub-acts .hub-act, .cp-ambitions .cp-amb, .deltas .delta, .trials-list .trial-row, .growth .growth-row,
  .amb-list .amb-row, .shop .shop-row, .ask .ask-row, .inv-grid .inv-card, .paths .path, .talent-grid .talent, .presets .preset,
  .feeling, .reveal-line, .girih-band { animation: none !important; }
  .choice.chosen { animation: none !important; }
  .choices.committing .choice:not(.chosen) { transition: none !important; }
}