:root {
    color-scheme: dark;
    --night: #0c0f0e;
    --leather: #1e1814;
    --leather-2: #2b221c;
    --gold: #c9a24a;
    --gold-dim: #6f5a2c;
    --stone: #2c3331;
    --stone-hi: #414a46;
    --grout: #090b0a;
    --moss: #33573f;
    --dais: #34473a;
    --fey: #9fe3b5;
    --blood: #c0392b;
    --blood-ink: #ec7a6c;
    --steel: #dfe6ec;
    --parch: #e9ddc2;
    --parch-2: #dccbaa;
    --ink: #2e2217;
    --ink-muted: #6e5a41;
    --text: #efe5d4;
    --muted: #b1a187;
    --display: "Uncial Antiqua", "Palatino Linotype", Georgia, serif;
    --caps: "Alegreya SC", "Palatino Linotype", Georgia, serif;
    --body: "Alegreya", "Palatino Linotype", Georgia, serif;
    --cs: min(30px, calc((100vw - 116px) / 22));
  }
  html, body { background: var(--night); color: var(--text); }
  body {
    font: 17px/1.45 var(--body);
    padding: 22px 16px 48px;
    background:
      radial-gradient(ellipse 70% 40% at 30% 0%, #1b2a2044, transparent 70%),
      radial-gradient(ellipse 50% 50% at 90% 100%, #2a1a1244, transparent 70%),
      var(--night);
  }
  h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
  button, input { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--fey); outline-offset: 2px; }
  .caps { font-family: var(--caps); letter-spacing: .06em; }

  .wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

  /* ---------- Header ---------- */
  header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 28px; }
  .eyebrow { font-family: var(--caps); letter-spacing: .14em; font-size: .8rem; color: var(--gold); text-transform: uppercase; }
  h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.02; color: var(--parch); text-shadow: 0 0 24px #9fe3b522; }
  header p.lede { margin: 0; max-width: 44ch; color: var(--muted); font-style: italic; }

  .layout { display: grid; grid-template-columns: auto minmax(300px, 1fr); gap: 24px; align-items: start; }
  @media (max-width: 1060px) { .layout { grid-template-columns: 1fr; } }

  /* ---------- Map ---------- */
  .map-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .map {
    position: relative; width: max-content; max-width: 100%;
    padding: 10px; border-radius: 6px;
    background: linear-gradient(#171c1a, #121614);
    box-shadow: 0 0 0 1px var(--gold-dim), 0 0 0 4px #0d100f, 0 0 0 5px var(--gold-dim), 0 20px 50px #000a;
  }
  .map-scroll { overflow-x: auto; max-width: 100%; }

  .alcove { position: relative; height: 58px; display: grid; place-items: center; margin-left: 19px; }
  .alcove::before {
    content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
    width: 150px; height: 56px; border-radius: 75px 75px 0 0;
    background: radial-gradient(ellipse at 50% 90%, #2f4a3a, #151c18 70%);
    box-shadow: inset 0 0 0 2px #3b4c42, inset 0 8px 18px #000c;
  }
  .orb {
    position: relative; width: 34px; height: 34px; border-radius: 50%; margin-top: 10px;
    background: radial-gradient(circle at 36% 32%, #ffffff, #d9fbe6 18%, var(--fey) 42%, #3e8f6a 78%, #1c4a37);
    box-shadow: 0 0 18px 6px #9fe3b566, 0 0 50px 16px #9fe3b522;
    animation: orb 4.5s ease-in-out infinite;
  }
  @keyframes orb { 50% { box-shadow: 0 0 26px 10px #9fe3b588, 0 0 70px 24px #9fe3b533; } }
  .band-label { position: absolute; font-family: var(--caps); font-size: .78rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
  .alcove .band-label { left: 0; bottom: 6px; }
  .alcove .band-label.r { left: auto; right: 0; }

  #board {
    display: grid;
    grid-template-columns: 18px repeat(22, var(--cs));
    grid-auto-rows: var(--cs);
    gap: 1px; width: max-content;
    user-select: none; -webkit-user-select: none;
  }
  #board .corner, .lab { display: grid; place-items: center; font: 10px var(--caps); color: #8d8270; font-variant-numeric: tabular-nums; }
  .cell {
    --m: 0%; --h: 0%; --face: 1; --dir: 1;
    position: relative; cursor: pointer; border-radius: 1px;
    background: color-mix(in srgb, color-mix(in srgb, var(--stone) calc(100% - var(--m)), var(--moss)) calc(100% - var(--h)), var(--stone-hi));
    box-shadow: inset 1px 1px 0 #ffffff0f, inset -1px -1px 0 #00000055;
  }
  .cell:hover { background: #4a5550; }
  .cell.dais {
    background: linear-gradient(180deg, #3d5344, var(--dais));
    box-shadow: inset 0 0 6px #9fe3b522, inset 1px 1px 0 #ffffff14, inset -1px -1px 0 #0006;
  }
  .cell.drop { box-shadow: inset 0 0 0 2px var(--fey), 0 0 10px #9fe3b566; z-index: 1; }
  .cell.head::before {
    content: ""; position: absolute; inset: 8%; border-radius: 50%;
    background: radial-gradient(circle, #7a1d16 0 35%, #7a1d1600 72%);
  }
  .cell.head::after {
    content: ""; position: absolute; inset: 4%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 10.5 6 12.5 2 15.5z' fill='%235a2a1c'/%3E%3Cellipse cx='9' cy='13.2' rx='5.3' ry='4.3' fill='%238e3a22'/%3E%3Cpath d='M5.5 12.5q3.5-3.2 6.8 0-3.4 2.4-6.8 0z' fill='%235e2415'/%3E%3Ccircle cx='13.4' cy='10' r='2.9' fill='%23a8492a'/%3E%3Ccircle cx='14.2' cy='9.3' r='.75' fill='%23ffd76a'/%3E%3Cpath d='M16.1 7.8v4.4' stroke='%23d4ad52' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M16.4 9.4 23.6 10 16.4 10.6z' fill='%23e3e9ee'/%3E%3Cpath d='M8 17.3v2.2M10.6 17.3v2.2' stroke='%23d4ad52' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scaleX(var(--face));
    filter: drop-shadow(0 1px 1px #000c);
  }
  .cell.slid::after { animation: slide .3s ease-out; }
  @keyframes slide { from { translate: calc(var(--dir) * -85%) 0; opacity: .35; } }
  .cell.held::before {
    inset: 3%; background: none;
    border: 2px dashed var(--fey); box-shadow: 0 0 8px #9fe3b588, inset 0 0 6px #9fe3b555;
  }
  .cell.held::after { filter: drop-shadow(0 0 2px #9fe3b5) saturate(.6); }
  .cell.dormant::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f9aa1'%3E%3Cpath d='M4 17c2-4 5-6 8.5-6-2 3.2-5 5-8.5 6z'/%3E%3Cpath d='M12 19.5c1-3 4-5 7.5-5-2 3-4.2 4.2-7.5 5z'/%3E%3Cpath d='M8 9.5c2-2.2 4.2-3.3 6.5-3.3-1.2 2.2-3.4 3.3-6.5 3.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none; opacity: .8;
  }
  .cell.dormant::before {
    content: attr(data-regen); inset: auto 1px 1px auto; width: 11px; height: 11px;
    display: grid; place-items: center; background: #0c0f0e; border-radius: 50%;
    font: 700 8px/1 var(--body); color: var(--blood-ink);
  }
  body.tool-hold .cell, body.tool-strike .cell, body.tool-edit .cell { cursor: crosshair; }

  .door-band { position: relative; height: 70px; margin-left: 19px; display: grid; justify-items: center; align-items: start; }
  .door {
    width: 64px; height: 64px; margin-top: 4px; border-radius: 32px 32px 2px 2px; position: relative;
    background:
      repeating-linear-gradient(90deg, #0000 0 15px, #0f2a1c 15px 16px),
      linear-gradient(180deg, #2f7a52, #1d5238 70%, #163f2c);
    box-shadow: 0 0 0 3px #4a4f4b, 0 0 0 5px #242826, inset 0 0 12px #0008;
  }
  .door::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 3px; background: #1b1d1c; box-shadow: 0 22px 0 #1b1d1c; }
  .door::after { content: ""; position: absolute; right: 12px; top: 34px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--gold); }
  .door-band .band-label { left: 0; top: 10px; }
  .door-band .band-label.r { left: auto; right: 0; }

  .token {
    position: absolute; inset: 1px; z-index: 2; padding: 0;
    border-radius: 50%; border: 0;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, white), var(--c) 55%, color-mix(in srgb, var(--c) 60%, black));
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px #1a1208, 0 2px 4px 2px #000b;
    display: grid; place-items: center;
    font: 700 calc(var(--cs) * .52)/1 var(--caps); color: #fff; text-shadow: 0 1px 1px #000a;
    cursor: grab; touch-action: none;
    translate: calc(var(--i, 0) * 22%) calc(var(--i, 0) * -22%);
  }
  .token.dark-ink { color: #1c1409; text-shadow: 0 1px 0 #fff6; }
  .token.sel { box-shadow: 0 0 0 2px var(--fey), 0 0 0 3px #0c0f0e, 0 0 12px 3px #9fe3b5aa; z-index: 3; animation: sel 1.6s ease-in-out infinite; }
  @keyframes sel { 50% { box-shadow: 0 0 0 2px var(--fey), 0 0 0 3px #0c0f0e, 0 0 4px 1px #9fe3b555; } }
  .token.hurt { box-shadow: 0 0 0 2px var(--blood), 0 0 0 3px #1a1208, 0 0 10px 2px #c0392b99; }
  .token.down { filter: grayscale(.85) brightness(.7); }
  .token.down::after { content: "✕"; position: absolute; font-size: .8em; color: var(--blood-ink); }
  .token.dragging { cursor: grabbing; z-index: 10; animation: none; box-shadow: 0 0 0 2px var(--fey), 0 10px 20px #000d; }

  #bench {
    min-height: 54px; border-radius: 6px; padding: 8px 12px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: repeating-linear-gradient(135deg, #151917 0 10px, #121614 10px 20px);
    border: 1px dashed #4a4436;
  }
  #bench.drop { border-color: var(--fey); box-shadow: 0 0 12px #9fe3b544; }
  #bench .label { font: .82rem var(--caps); letter-spacing: .08em; color: var(--muted); }
  #bench .token { position: relative; inset: auto; width: 32px; height: 32px; font-size: 16px; translate: none; }

  .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--muted); }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .sw { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }

  /* ---------- DM screen panels ---------- */
  .side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .panel {
    background:
      radial-gradient(ellipse at 20% 0%, #ffffff08, transparent 60%),
      var(--leather);
    border-radius: 6px; padding: 14px 16px 16px;
    box-shadow: inset 0 0 0 1px #0007, inset 0 0 0 4px var(--leather), inset 0 0 0 5px var(--gold-dim), 0 8px 20px #0008;
    display: flex; flex-direction: column; gap: 12px;
  }
  .panel h2 { font-family: var(--caps); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
  .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .round { font: .9rem var(--caps); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .round b { font: 1.7rem/1 var(--display); color: var(--parch); margin-left: 4px; }

  .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .btn {
    background: linear-gradient(#352a22, #271f19); border: 1px solid #54432f; border-radius: 5px;
    padding: 7px 12px; cursor: pointer; line-height: 1.2; color: var(--text);
  }
  .btn:hover { border-color: var(--gold); }
  .btn:disabled { opacity: .4; cursor: not-allowed; border-color: #54432f; }
  .btn.sweep { flex: 1; padding: 11px 10px; font: 700 1rem var(--caps); letter-spacing: .06em; background: linear-gradient(#5a1f18, #3d1510); border-color: #8a3a2c; }
  .btn.sweep:hover { border-color: var(--blood-ink); }
  .btn.sweep small { display: block; font: italic .78rem var(--body); letter-spacing: 0; color: #e6b3a8; }
  .btn.warn { border-color: #8a3a2c; color: var(--blood-ink); }
  kbd { font: 12px var(--body); border: 1px solid #54432f; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); }

  .tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tools button {
    background: #231c17; border: 1px solid #3f3326; border-radius: 5px; padding: 7px 4px 6px;
    cursor: pointer; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px;
    font: .82rem var(--caps); letter-spacing: .04em;
  }
  .tools svg { width: 20px; height: 20px; }
  .tools button[aria-pressed="true"] { color: var(--parch); border-color: var(--gold); background: #33291f; box-shadow: inset 0 -2px 0 var(--gold); }
  .hint { font-size: .92rem; color: var(--muted); margin: 0; font-style: italic; }

  label.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
  input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
  input.num {
    width: 3.2em; background: #120e0b; border: 1px solid #3f3326; border-radius: 4px; padding: 3px 5px;
    text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
  }
  input.num::-webkit-inner-spin-button { opacity: .5; }

  /* Party roster */
  .party { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .member {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
    padding: 8px 10px; border-radius: 5px; background: #16110e; border: 1px solid #33291f;
  }
  .member.sel { border-color: var(--fey); box-shadow: 0 0 10px #9fe3b522; }
  .member.down-m { opacity: .75; }
  .coin {
    width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 0; cursor: pointer; grid-row: span 2;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, white), var(--c) 55%, color-mix(in srgb, var(--c) 60%, black));
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px #1a1208;
  }
  .member input.name { background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 1px 0; width: 100%; min-width: 0; font: 700 1.02rem var(--body); color: var(--parch); }
  .member input.name:hover, .member input.name:focus { border-bottom-color: #54432f; outline: none; }
  .chip { font: .72rem var(--caps); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; border: 1px solid #4a3d2c; color: var(--muted); white-space: nowrap; }
  .chip.returning { color: var(--gold); border-color: var(--gold-dim); }
  .chip.returned { color: var(--fey); border-color: #3e7a58; }
  .chip.fallen { color: var(--blood-ink); border-color: #8a3a2c; }
  .stats { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .88rem; color: var(--muted); }
  .stats > span { display: inline-flex; align-items: center; gap: 5px; }
  .stats .k { font: .74rem var(--caps); letter-spacing: .08em; text-transform: uppercase; }
  .hpbar { grid-column: 1 / 4; height: 4px; border-radius: 2px; background: #3a1512; overflow: hidden; }
  .hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #6a9f5a, #9fe3b5); transition: width .3s; }
  .hpbar.low i { background: linear-gradient(90deg, #a0321f, #e0713c); }
  .pips { display: inline-flex; gap: 3px; }
  .pips button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1px solid #6b5a40; background: transparent; cursor: pointer; }
  .pips button.on { background: #b86b2e; border-color: #e09a55; }

  .banner { border-radius: 5px; padding: 10px 12px; background: #16261c; border: 1px solid #3e7a58; }
  .banner strong { font: 1.2rem var(--display); color: var(--fey); font-weight: 400; }

  /* Stat block */
  .statblock {
    background: linear-gradient(#efe4cb, var(--parch-2)); color: var(--ink);
    border-radius: 3px; padding: 12px 14px; box-shadow: 0 0 0 1px #9c8a66, 0 4px 10px #0007;
    border-top: 4px solid #8e2b1e; border-bottom: 4px solid #8e2b1e;
    display: flex; flex-direction: column; gap: 6px;
  }
  .statblock h3 { font: 700 1.35rem/1.1 var(--caps); color: #7c2216; letter-spacing: .02em; }
  .statblock .type { font-style: italic; font-size: .9rem; margin-top: -4px; }
  .statblock hr { border: 0; height: 2px; margin: 2px 0; background: linear-gradient(90deg, #8e2b1e, #8e2b1e00); }
  .statblock p { margin: 0; font-size: .95rem; }
  .statblock b { color: #7c2216; }
  .statblock input { background: #fffaf0aa; border: 1px solid #b7a37c; border-radius: 3px; color: var(--ink); padding: 1px 4px; font-variant-numeric: tabular-nums; }
  .statblock input.num { width: 2.8em; }
  .statblock .note { font-size: .8rem; color: var(--ink-muted); font-style: italic; }
  .statblock label.check { font-size: .95rem; }

  /* Chronicle */
  .chronicle {
    background: linear-gradient(#ece1c8, var(--parch-2)); color: var(--ink);
    border-radius: 3px; padding: 10px 12px; box-shadow: 0 0 0 1px #9c8a66, inset 0 0 30px #a8906055;
  }
  #log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: .93rem; display: flex; flex-direction: column; gap: 4px; }
  #log li { display: grid; grid-template-columns: 2.6em 1fr; gap: 8px; }
  #log .r { font: .78rem var(--caps); color: var(--ink-muted); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
  #log .strike { color: #8e2b1e; }
  #log .good { color: #2e6a45; font-weight: 600; }
  #log .miss { color: var(--ink-muted); }
  #log .empty { display: block; color: var(--ink-muted); font-style: italic; }

  /* Keeper's notes */
  details.notes { background: var(--leather); border-radius: 6px; padding: 14px 18px; box-shadow: inset 0 0 0 4px var(--leather), inset 0 0 0 5px var(--gold-dim); }
  details.notes summary { cursor: pointer; font: 1.3rem var(--display); color: var(--parch); }
  .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 4px 32px; }
  .challenge .rules h3, .rules h3 { font: 700 .82rem var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 16px 0 4px; }
  .rules p, .rules ul { margin: 0; max-width: 62ch; }
  .rules ul { padding-left: 1.1em; }
  .rules li + li { margin-top: 3px; }
  .foot { font-size: .88rem; color: var(--muted); margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    .orb, .token.sel, .cell.slid::after { animation: none; }
  }

/* ---------- Additions: hub link, turns, rules ---------- */
.head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.head-side .lede { text-align: right; }
@media (max-width: 700px) { .head-side { align-items: flex-start; } .head-side .lede { text-align: left; } }
a { color: var(--gold); }
a:hover { color: var(--parch); }
.hub { font: .85rem var(--caps); letter-spacing: .1em; text-decoration: none; border-bottom: 1px solid var(--gold-dim); }

.sw-head { background: radial-gradient(circle, #7a1d16 0 40%, #2c3331 75%); }
.sw-held { border: 2px dashed var(--fey); }
.sw-down { background: #2c3331; color: var(--blood-ink); font: 700 9px/16px var(--body); text-align: center; font-style: normal; }
.sw-dais { background: var(--dais); }

.now { display: flex; align-items: center; gap: 12px; }
.now .coin { width: 40px; height: 40px; grid-row: auto; cursor: default; flex: none; }
.now-label { font: .75rem var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.now-name { font: 1.6rem/1.1 var(--display); color: var(--parch); overflow-wrap: anywhere; }
.btn.end-turn {
  padding: 12px; font: 700 1.1rem var(--caps); letter-spacing: .05em;
  background: linear-gradient(#5a1f18, #3d1510); border-color: #8a3a2c;
}
.btn.end-turn:hover { border-color: var(--blood-ink); }
.btn.end-turn small { display: block; font: italic .82rem var(--body); letter-spacing: 0; color: #e6b3a8; }
.btn.small { padding: 4px 12px; }
.btn.on-parch { color: var(--parch); }
.row.between { justify-content: space-between; }
.k-label { font: .8rem var(--caps); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid #54432f; border-radius: 5px; overflow: hidden; }
.seg button { background: #231c17; border: 0; padding: 6px 12px; cursor: pointer; color: var(--muted); font: .92rem var(--caps); }
.seg button + button { border-left: 1px solid #54432f; }
.seg button[aria-pressed="true"] { background: #3a2d22; color: var(--parch); box-shadow: inset 0 -2px 0 var(--gold); }

.token.acting:not(.sel) { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px #1a1208, 0 0 10px 3px #f0c35a88; }
.member.acting { border-color: var(--gold); background: #211a12; }
.chip.acting { color: #1c1409; background: var(--gold); border-color: var(--gold); }
.party { counter-reset: turn; }
.stats .order { margin-left: auto; display: inline-flex; gap: 4px; }
.mini-btn { width: 24px; height: 24px; padding: 0; border-radius: 4px; background: #231c17; border: 1px solid #3f3326; color: var(--muted); cursor: pointer; line-height: 1; }
.mini-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--parch); }
.mini-btn:disabled { opacity: .3; cursor: not-allowed; }

.challenge {
  background: radial-gradient(ellipse at 10% 0%, #f0c35a12, transparent 50%), var(--leather);
  border-radius: 6px; padding: 22px 22px 26px;
  box-shadow: inset 0 0 0 4px var(--leather), inset 0 0 0 5px var(--gold-dim);
  display: flex; flex-direction: column; gap: 18px;
}
.challenge-head h2 { font: clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--display); color: var(--parch); margin-top: 4px; }
.challenge-head .lede { margin: 8px 0 0; max-width: 70ch; color: var(--muted); font-style: italic; }
.challenge .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rule-card { background: #16110e; border: 1px solid #33291f; border-radius: 5px; padding: 14px 16px; }
.rule-card.how { grid-column: 1 / -1; background: linear-gradient(#efe4cb, var(--parch-2)); color: var(--ink); border: 0; box-shadow: 0 0 0 1px #9c8a66; }
.rule-card.how h3 { color: #7c2216; }
.rule-card.how ul { columns: 2 320px; column-gap: 32px; }
.rule-card.how li { break-inside: avoid; }
.rule-card.how b { color: #7c2216; }
.rule-card h3 { margin: 0 0 8px; }
.rule-card p, .rule-card ul, .rule-card dl { margin: 0; max-width: 68ch; }
.rule-card p + p { margin-top: 8px; }
.rule-card dt { font: 700 .95rem var(--caps); letter-spacing: .04em; color: var(--parch); margin-top: 10px; }
.rule-card dt:first-child { margin-top: 0; }
.rule-card dd { margin: 2px 0 0; color: #d8ccb6; }
.rule-card .tool-note { color: var(--muted); font-style: italic; font-size: .92rem; }

footer { display: flex; flex-direction: column; gap: 4px; }
footer p { margin: 0; font-size: .9rem; color: var(--muted); }

.moved { display: flex; justify-content: space-between; align-items: baseline; }
.moved b { font: 700 1.1rem var(--body); color: var(--parch); font-variant-numeric: tabular-nums; }
.luck { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid #3f3326; }
.step-label { font: 700 .9rem var(--caps); letter-spacing: .06em; color: var(--parch); display: flex; align-items: center; gap: 8px; }
.step { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1c1409; font-size: .75rem; }
.luck .or { color: var(--muted); font-style: italic; font-size: .9rem; }
.verdict { margin: 0; font-style: italic; color: var(--muted); }
.verdict.ok { color: var(--fey); font-style: normal; font-weight: 700; }
.verdict.fail { color: var(--blood-ink); font-style: normal; font-weight: 700; }
.luck .btn.end-turn { flex: 1; }
.btn.end-turn:disabled { background: #231c17; border-color: #3f3326; }