:root {
  --night: #0e0907;
  --ember: #1d120c;
  --gold: #d6b268;
  --gold-hi: #f6e2a8;
  --gold-lo: #8c6a2c;
  --parch: #ecdfc1;
  --parch-lo: #cdb88e;
  --ink: #2a1c12;
  --ink-soft: #5b4630;
  --blood: #8f1d1d;
  --blood-hi: #c33a2c;
  --moon: #b9c8d6;
  --win: #e8c066;
  --display: 'Cinzel Decorative', 'Cinzel', serif;
  --caps: 'Cinzel', serif;
  --body: 'IM Fell English', Georgia, serif;
  --sc: 'IM Fell English SC', 'IM Fell English', serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(#21140c, var(--night) 45%, #170e08);
  color: var(--parch);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { /* candle grain over everything */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
button { font: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- HUD ---------- */
.hud {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 22px 12px;
  border-bottom: 1px solid rgba(214, 178, 104, .22);
  background: linear-gradient(#140c08, rgba(20, 12, 8, .6));
}
.brand { font-family: var(--caps); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--parch-lo); text-decoration: none; }
.brand span { color: var(--gold); }
.lives { display: flex; gap: 6px; justify-content: center; }
.heart { width: 30px; height: 28px; position: relative; }
.heart svg { width: 100%; height: 100%; overflow: visible; }
.heart .h-fill { fill: url(#heartGrad); filter: drop-shadow(0 0 6px rgba(195, 58, 44, .55)); transition: opacity .5s; }
.heart .h-edge { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.heart.lost .h-fill { opacity: 0; }
.heart.lost .h-edge { stroke: rgba(214, 178, 104, .35); }
.heart.breaking { animation: shatter .8s ease-out; }
@keyframes shatter { 0% { transform: scale(1); } 20% { transform: scale(1.35) rotate(-8deg); } 45% { transform: scale(.9) rotate(6deg); } 100% { transform: none; } }
.tally { white-space: nowrap; display: flex; align-items: center; gap: 14px; justify-content: flex-end; font-family: var(--sc); font-size: 16px; color: var(--parch-lo); }
.tally b { color: var(--gold-hi); font-family: var(--caps); font-weight: 600; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid rgba(214, 178, 104, .4); color: var(--gold); }
.icon-btn:hover { border-color: var(--gold); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg path:first-child { fill: currentColor; }
.icon-btn[aria-pressed="true"] .off, .icon-btn[aria-pressed="false"] .on { display: none; }

/* ---------- Table layout ---------- */
.table {
  flex: 1; display: grid; gap: 26px; padding: 26px clamp(16px, 3vw, 40px) 28px;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  max-width: 1320px; width: 100%; margin: 0 auto; align-items: start;
}
.arena { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- Encounter card (a tarot card from the bestiary) ---------- */
.card {
  position: relative; border-radius: 14px; padding: 10px;
  background: linear-gradient(145deg, #e9c97f, #8c6a2c 40%, #f2dc9c 60%, #7a5a24);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), 0 0 0 1px #3b2914, inset 0 0 0 1px rgba(255, 240, 200, .5);
  transform-origin: 50% 60%;
}
.card.deal { animation: deal .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes deal { from { transform: translateY(-30px) rotateX(35deg) rotateZ(-4deg); opacity: 0; filter: brightness(2); } to { transform: none; opacity: 1; } }
.card-inner {
  position: relative; border-radius: 8px; padding: 22px 22px 18px; color: var(--ink); overflow: hidden;
  background: radial-gradient(140% 90% at 50% 20%, #f6ecd2 0%, var(--parch) 45%, var(--parch-lo) 100%);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'rib rib' 'pic pic' 'who seal' 'cap cap' 'deeds deeds' 'owner owner';
  column-gap: 14px;
}
.card-inner::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(90, 64, 30, .45); outline: 1px solid rgba(90, 64, 30, .25); outline-offset: 3px; border-radius: 4px; pointer-events: none; }
.card-inner::after { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.ribbon { grid-area: rib; margin: 0 0 12px; text-align: center; font-family: var(--caps); font-weight: 600; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--blood); }
.ribbon::before, .ribbon::after { content: '✦'; margin: 0 .8em; color: var(--gold-lo); letter-spacing: 0; }
.portrait {
  grid-area: pic; justify-self: center; position: relative; width: 168px; height: 196px; margin-bottom: 14px;
  border-radius: 84px 84px 6px 6px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 35%, #6d4b2a, #2a170b);
  box-shadow: 0 0 0 3px var(--gold-lo), 0 0 0 5px #f0d99a, 0 0 0 6px #5c431c, inset 0 -30px 40px rgba(0, 0, 0, .45);
}
.portrait img { position: absolute; left: 50%; bottom: 0; width: 150px; transform: translateX(-50%); filter: sepia(.25) contrast(1.05) saturate(.9); }
.initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 72px; color: var(--gold); }
.who { grid-area: who; min-width: 0; }
.who h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.cls { margin: 4px 0 0; font-family: var(--body); font-style: italic; font-size: 17px; color: var(--ink-soft); }
.match { margin: 6px 0 0; font-family: var(--sc); font-size: 15px; color: var(--ink-soft); }
.seal {
  grid-area: seal; align-self: center; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #d0463a, #8f1d1d 55%, #520c0c);
  box-shadow: 0 6px 14px rgba(60, 10, 5, .5), inset 0 2px 3px rgba(255, 200, 180, .35), inset 0 -4px 8px rgba(0, 0, 0, .35);
  color: #fbe6c8; position: relative;
}
.seal::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(255, 220, 190, .35); }
.seal-n { font-family: var(--caps); font-weight: 700; font-size: 34px; line-height: 1; }
.seal-l { font-family: var(--sc); font-size: 12px; letter-spacing: .08em; opacity: .85; }
.cap { grid-area: cap; margin: 10px 0 0; font-size: 15px; font-style: italic; color: var(--blood); }
.cap:empty { display: none; }
.deeds { grid-area: deeds; list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(90, 64, 30, .3); display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--sc); font-size: 15px; color: var(--ink); }
.deeds li::before { content: '◆'; color: var(--gold-lo); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.owner { grid-area: owner; margin: 14px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.owner img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--gold-lo); }
.owner b { color: var(--ink); font-weight: normal; font-family: var(--sc); }

/* ---------- Dice mat ---------- */
.mat-frame {
  padding: 14px; border-radius: 22px;
  background:
    linear-gradient(#3b2516, #22140b) padding-box;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 220, 160, .12), inset 0 2px 0 rgba(255, 220, 160, .1), 0 0 0 1px #0a0604;
  position: relative;
}
.mat-frame::before { /* tooled gold line on the leather */
  content: ''; position: absolute; inset: 6px; border-radius: 17px; border: 1px solid rgba(214, 178, 104, .45); pointer-events: none;
}
.mat { position: relative; height: clamp(300px, 52vh, 560px); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 40px rgba(0, 0, 0, .8); cursor: pointer; background: #0b1f17; }
.mat canvas { display: block; width: 100%; height: 100%; }
.mat::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 10px rgba(0, 0, 0, .55); border-radius: 10px; }
.mat-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-family: var(--sc); font-size: 15px; color: rgba(236, 223, 193, .55); z-index: 1; pointer-events: none; transition: opacity .3s; }
.mat-hint.gone { opacity: 0; }

/* ---------- Narrative scroll ---------- */
.scroll { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'verdict act' 'tale act'; column-gap: 24px; align-items: center; min-height: 84px; }
.verdict { grid-area: verdict; margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.1; color: var(--gold); min-height: 1em; }
.verdict small { display: block; font-family: var(--caps); font-weight: 600; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--parch-lo); margin-bottom: 4px; }
.verdict.win { color: var(--win); }
.verdict.loss { color: var(--blood-hi); }
.verdict.tie { color: var(--moon); }
.verdict.reveal { animation: reveal .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); letter-spacing: .08em; } }
.tale { grid-area: tale; margin: 6px 0 0; font-size: 19px; color: var(--parch); max-width: 62ch; }
.tale em { color: var(--gold-hi); font-style: normal; }
#act { grid-area: act; }

.gold-btn {
  position: relative; border: 0; padding: 15px 30px; border-radius: 6px; white-space: nowrap;
  font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #2a1708;
  background: linear-gradient(#f7e2a3, #d6b268 45%, #a77d35 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .25) inset, 0 10px 22px -8px rgba(0, 0, 0, .7), 0 0 0 1px #5c431c;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.gold-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.gold-btn:active:not(:disabled) { transform: translateY(1px); }
.gold-btn:disabled { filter: grayscale(.7) brightness(.6); cursor: default; }
.gold-btn:focus-visible, .icon-btn:focus-visible, .brand:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.gold-btn.big { padding: 18px 40px; font-size: 16px; }

/* ---------- Title & end tomes ---------- */
.veil {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(30, 18, 10, .7), rgba(8, 5, 3, .94));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.veil[hidden] { display: none; }
.veil.leaving { animation: fadeout .6s forwards; }
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }
.tome { max-width: 560px; text-align: center; animation: rise 1s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.subtitle { margin: 14px 0 0; font-style: italic; font-size: 21px; color: var(--parch-lo); }
.tome h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 9vw, 84px); line-height: .95; color: var(--parch); text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }
.tome h1 span {
  font-weight: 900; color: var(--gold);
  text-shadow: 0 1px 0 #fff1c4, 0 3px 0 #5c431c, 0 8px 20px rgba(0, 0, 0, .6);
}
.rule { height: 18px; margin: 22px auto; width: 240px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'%3E%3Cg fill='none' stroke='%23d6b268'%3E%3Cpath d='M0 9h100M140 9h100'/%3E%3Cpath d='M120 1l8 8-8 8-8-8z' fill='%23d6b268' fill-opacity='.25'/%3E%3Ccircle cx='104' cy='9' r='2'/%3E%3Ccircle cx='136' cy='9' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.lore { margin: 0 auto; max-width: 46ch; font-size: 20px; color: var(--parch); }
.laws { list-style: none; padding: 0; margin: 22px auto 0; max-width: 40ch; text-align: left; display: grid; gap: 8px; font-size: 18px; color: var(--parch-lo); }
.laws li { padding-left: 28px; position: relative; }
.laws li::before { content: ''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l8.5 5v8L10 19l-8.5-5V6z' fill='%238f1d1d' stroke='%23d6b268'/%3E%3C/svg%3E"); }
.laws b { color: var(--parch); font-weight: normal; font-family: var(--sc); }
.fine { margin: 18px 0 28px; font-style: italic; font-size: 16px; color: var(--parch-lo); }
.best { margin: 18px 0 0; font-family: var(--sc); font-size: 16px; color: var(--gold); min-height: 1.4em; }
.back { display: inline-block; margin-top: 22px; font-family: var(--sc); color: var(--parch-lo); }
.end-h span { font-size: .8em; }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.ledger div { padding: 14px 6px; border: 1px solid rgba(214, 178, 104, .3); border-radius: 8px; background: rgba(214, 178, 104, .05); }
.ledger dt { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--parch-lo); }
.ledger dd { margin: 6px 0 0; font-family: var(--caps); font-weight: 700; font-size: 32px; color: var(--gold-hi); }
#end .lore { margin-bottom: 26px; font-size: 19px; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hud { padding: max(10px, env(safe-area-inset-top)) 14px 10px; grid-template-columns: auto 1fr auto; }
  .brand { font-size: 11px; letter-spacing: .1em; max-width: 7em; line-height: 1.3; }
  .lives { gap: 4px; }
  .heart { width: 24px; height: 22px; }
  .tally { gap: 8px; font-size: 13px; }
  .table { grid-template-columns: 1fr; gap: 14px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .card { padding: 6px; border-radius: 10px; }
  .card-inner { padding: 14px; grid-template-columns: auto 1fr auto; grid-template-areas: 'rib rib rib' 'pic who seal' 'cap cap cap' 'deeds deeds deeds' 'owner owner owner'; align-items: center; }
  .ribbon { margin-bottom: 10px; font-size: 11px; }
  .portrait { width: 72px; height: 86px; margin: 0; border-radius: 36px 36px 4px 4px; box-shadow: 0 0 0 2px var(--gold-lo), 0 0 0 3px #f0d99a; }
  .portrait img { width: 70px; }
  .initial { font-size: 34px; }
  .who h2 { font-size: 21px; }
  .cls { font-size: 15px; }
  .match { font-size: 13px; }
  .seal { width: 64px; height: 64px; }
  .seal-n { font-size: 26px; }
  .seal-l { font-size: 11px; }
  .deeds { margin-top: 10px; padding-top: 8px; font-size: 14px; gap: 4px 10px; }
  .owner { margin-top: 8px; font-size: 13px; }
  .owner img { width: 22px; height: 22px; }
  .mat-frame { padding: 8px; border-radius: 16px; }
  .mat-frame::before { inset: 3px; border-radius: 13px; }
  .mat { height: clamp(210px, 32vh, 360px); }
  .scroll { grid-template-columns: 1fr; grid-template-areas: 'verdict' 'tale' 'act'; row-gap: 4px; min-height: 0; }
  .verdict { font-size: 24px; }
  .tale { font-size: 17px; }
  #act { width: 100%; margin-top: 12px; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
  .ledger dd { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}