/* ---------- Design tokens ---------- */
:root {
  --night: #131a2e;      /* page background colour */
  --on-gold: #131a2e;    /* text on gold buttons */
  --texture: none;       /* layered background images (set per theme) */
  --title-glow: rgba(217, 169, 63, 0.25);
  --panel: #1d2742;      /* inputs, dialogs */
  --line: #2f3b5e;       /* borders */
  --parchment: #ede3cc;  /* main text */
  --muted: #9aa3b8;      /* secondary text */
  --gold: #d9a93f;       /* title, spell slots, focus */
  --good: #3e8e57;       /* exact match */
  --part: #c79628;       /* partial match */
  --bad: #93302a;        /* no match */
  --divine: #7a4db3;     /* revealed by divine intervention (easter egg) */
  --tile-w: 96px;
  --name-w: 118px;
  --tile-h: 76px;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Themes ----------
   Textures are inline SVG noise filters: horizontal streaks for wood grain,
   fine fibres plus large blotches for parchment. No image files needed. */

/* Tavern: dark oak planks, warm candlelight from above */
:root[data-theme="tavern"] {
  --night: #2e1c10;
  --panel: #21140b;
  --line: #5c3f27;
  --parchment: #eadcc0;
  --muted: #b3a081;
  --on-gold: #24160c;
  --title-glow: rgba(255, 176, 80, 0.3);
  --texture:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 170, 80, 0.13), transparent 70%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(to bottom,
      transparent 0 158px,
      rgba(0, 0, 0, 0.55) 158px 160px,
      rgba(255, 220, 170, 0.05) 160px 161px,
      transparent 161px 162px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.28' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.035 0 0 0 0 0.01 1.1 0 0 0 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.6' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.5 0 0 0 0 0.28 0 0.7 0 0 -0.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #3a2414, #2a190e);
}

/* Parchment: aged paper for the scroll. Only the play area (and stats) is
   parchment; the page keeps whatever background data-theme gives it. */
[data-scroll] main,
[data-scroll] .stats {
  --night: #e4d5b3;
  --panel: #f1e7cf;
  --line: #c3ab82;
  --parchment: #3b2a19;   /* "parchment" is the text token; here it's ink */
  --muted: #7a6346;
  --gold: #8a5a16;
  --on-gold: #f7eedb;
  --title-glow: rgba(138, 90, 22, 0.18);
  --texture:
    radial-gradient(ellipse at center, transparent 45%, rgba(120, 75, 25, 0.35) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.38 0 0 0 0 0.16 1.1 0 0 0 -0.48'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0.9 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
[data-scroll] #guess-input { border-color: var(--line); }
[data-scroll] .slot { box-shadow: none; }

/* data-scroll: the play area is an unrolled scroll lying on the page background,
   with a roller at the top and bottom. data-scroll's value picks the variant
   (only "plain" for now); a variant only changes the knobs below. */
[data-scroll] main {
  --roll-h: 30px;
  --roll-over: 14px;   /* how far the rollers stick out past the paper */
  /* Variant knobs */
  --paper-base: var(--night);                     /* parchment colour under the texture */
  --paper-art: linear-gradient(transparent, transparent); /* decoration drawn on the paper */
  --rim-bg: var(--texture), #5e3512;              /* what shows along the torn edge */
  --paper-glow: drop-shadow(0 0 0 transparent);   /* glow that follows the torn outline */
  --cap: linear-gradient(to bottom, #2a170a, #8a5a2c 45%, #5a3718 70%, #1f1107);  /* roller end caps */
  position: relative;
  flex: 0 0 auto;
  width: min(1320px, 100% - 2 * max(20px, var(--roll-over) + 8px));
  margin: calc(18px + var(--roll-h) / 2) auto calc(var(--roll-h) / 2);
  padding: calc(var(--roll-h) / 2 + 12px) clamp(12px, 1vw, 28px) calc(var(--roll-h) / 2 + 16px);
  color: var(--parchment);   /* body's text colour resolves to the page's ink, so reset it on the paper */
  isolation: isolate;
  /* Shadow follows the torn outline of the paper, not the element's box */
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* The paper sits behind main's content on its own layer so the torn-edge masks
   don't also clip the rollers. Three layers:
     .paper          unmasked, carries the glow so it can follow the torn shape
     .paper::before  the rim colour, cut to the torn outline
     .paper::after   the clean parchment, same tear pulled inward and blurred,
                     so the rim shows as a soft band that follows every bite */
.paper { display: none; }
[data-scroll] .paper {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: var(--paper-glow);
}
[data-scroll] .paper::before,
[data-scroll] .paper::after {
  content: "";
  position: absolute;
  inset: 0;
  --edge-mask:
    var(--edge-left) left top / var(--tear-w) auto repeat-y,
    var(--edge-right) right top / var(--tear-w) auto repeat-y,
    linear-gradient(#000, #000) center / calc(100% - 2 * var(--tear-w) + 2px) 100% no-repeat;
  -webkit-mask: var(--edge-mask);
  mask: var(--edge-mask);
}
[data-scroll] .paper::before {
  --edge-left: var(--tear-left);
  --edge-right: var(--tear-right);
  background: var(--rim-bg);
}
[data-scroll] .paper::after {
  --edge-left: var(--rim-left);
  --edge-right: var(--rim-right);
  background: var(--paper-art), var(--texture), var(--paper-base);
  box-shadow: inset 0 0 40px rgba(110, 70, 25, 0.4);
}

[data-scroll] main::before,
[data-scroll] main::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--roll-over));
  right: calc(-1 * var(--roll-over));
  height: var(--roll-h);
  border-radius: calc(var(--roll-h) / 2);
  background:
    var(--cap) left / 18px 100% no-repeat,
    var(--cap) right / 18px 100% no-repeat,
    /* the rolled paper: shaded like a cylinder */
    linear-gradient(to bottom, #7a5a2e, #d9c296 22%, #f4e8cb 42%, #e2cfa6 62%, #a9885a 85%, #6b4c24);
  z-index: 3;
}
[data-scroll] main::before { top: calc(-1 * var(--roll-h) / 2); }
[data-scroll] main::after  { bottom: calc(-1 * var(--roll-h) / 2); }
[data-scroll] footer { margin-top: auto; }

/* How much of the school sigil is showing, 0 to 1 (set by game.js).
   Registered so it can be transitioned. */
@property --sigil-reveal { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- School scrolls ----------
   Painted schools swap the CSS paper and rollers for artwork in img/<school>/
   (built from img/raw/<school>/ by tools/scroll_assets.py). The layout below
   is shared; each school only sets its artwork and sizes. Schools without a
   block use the plain scroll. Slice numbers are in the built images' pixels. */
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) main {
  --roll-h: 52px;
  --art-hole: none;   /* optional see-through hole cut where the sigil sits */
  --roll-top-ext: 0;  --roll-bottom-ext: 0;   /* artwork past the rollers' outer edges, in image px */
  /* The sigil sits big and centred behind the board (game.js sets --sigil-top
     to where the guess rows start) and is wiped in from the top as guesses are
     made. It's lifted so its top already shows behind the summary before the
     first guess. */
  --sigil-size: min(760px, 88vw);
  --sigil-lift: 200px;
  --sigil: 50% calc(var(--sigil-top, 0px) - var(--sigil-lift)) / var(--sigil-size) var(--sigil-size) no-repeat;
  /* opaque over the revealed part of the sigil, with a soft leading edge */
  --sigil-shown: linear-gradient(#000 calc((var(--sigil-reveal) * 1.25 - 0.25) * 100%), transparent calc(var(--sigil-reveal) * 1.25 * 100%));
  --sigil-hidden: linear-gradient(transparent calc((var(--sigil-reveal) * 1.25 - 0.25) * 100%), #000 calc(var(--sigil-reveal) * 1.25 * 100%));
  transition: --sigil-reveal 1.6s ease-out;
  /* let the painted paper show through the UI instead of pale cream boxes */
  --panel: rgba(250, 234, 200, 0.5);
  --line: rgba(110, 60, 20, 0.35);
}
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) #guess-input { background: rgba(255, 247, 230, 0.82); }
/* stays solid: it opens over the board */
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) #suggestions { background: #f6e8cc; }

/* The sheet: the painted edges stay a fixed width, the middle stretches
   sideways, and the whole strip repeats downwards as the board grows */
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) .paper::before {
  background: none;
  border-style: solid;
  border-width: 0 var(--edge-w);
  border-image: var(--art-middle) 0 var(--middle-slice) fill / 0 var(--edge-w) / 0 stretch round;
  /* cut the sigil's hole (if it has one) out of the sheet too, so it's see-through,
     but only as far as the sigil has been revealed: (sheet - hole) + unrevealed */
  -webkit-mask: var(--sigil-hidden) var(--sigil), var(--art-hole) var(--sigil), linear-gradient(#000, #000);
  mask: var(--sigil-hidden) var(--sigil), var(--art-hole) var(--sigil), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over, xor;
  mask-composite: add, exclude;
}
/* The sigil, behind the board */
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) .paper::after {
  -webkit-mask: none;
  mask: none;
  box-shadow: none;
  background: var(--art-sigil) var(--sigil);
  -webkit-mask: var(--sigil-shown) var(--sigil);
  mask: var(--sigil-shown) var(--sigil);
}
/* Rollers: the end caps keep their shape, the roll stretches between them */
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) main::before,
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) main::after {
  background: none;
  border-radius: 0;
  border-style: solid;
}
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) main::before {
  border-width: 0 var(--roll-top-w);
  /* roller images are 120px tall at --roll-h, plus their glow drawn outside the box */
  border-image: var(--art-roll-top) 0 var(--roll-top-slice) fill / 0 var(--roll-top-w) / calc(var(--roll-h) * var(--roll-top-ext) / 120) 0 0 stretch;
}
:is([data-scroll="evocation"], [data-scroll="illusion"], [data-scroll="abjuration"], [data-scroll="divination"], [data-scroll="enchantment"], [data-scroll="conjuration"], [data-scroll="necromancy"], [data-scroll="transmutation"]) main::after {
  border-width: 0 var(--roll-bottom-w);
  border-image: var(--art-roll-bottom) 0 var(--roll-bottom-slice) fill / 0 var(--roll-bottom-w) / 0 0 calc(var(--roll-h) * var(--roll-bottom-ext) / 120) stretch;
}

/* Abjuration: silver end caps and glowing blue ward-runes down the edges */
[data-scroll="abjuration"] main {
  --art-middle: url("img/abjuration/middle.webp");      --middle-slice: 120;      --edge-w: 60px;
  --art-roll-top: url("img/abjuration/roll-top.webp");       --roll-top-slice: 172;    --roll-top-w: 75px;
  --art-roll-bottom: url("img/abjuration/roll-bottom.webp"); --roll-bottom-slice: 225; --roll-bottom-w: 98px;
  --art-sigil: url("img/abjuration/sigil.webp");
}

/* Divination: gold end caps and holy-lit constellations down the edges */
[data-scroll="divination"] main {
  --art-middle: url("img/divination/middle.webp");      --middle-slice: 130;      --edge-w: 65px;
  --art-roll-top: url("img/divination/roll-top.webp");       --roll-top-slice: 230;    --roll-top-w: 100px;
  --art-roll-bottom: url("img/divination/roll-bottom.webp"); --roll-bottom-slice: 240; --roll-bottom-w: 104px;
  --roll-top-ext: 47; --roll-bottom-ext: 45;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/divination/sigil.webp");
}

/* Enchantment: rose-gold end caps and pink smoke winding down the edges */
[data-scroll="enchantment"] main {
  --art-middle: url("img/enchantment/middle.webp");      --middle-slice: 135;      --edge-w: 68px;
  --art-roll-top: url("img/enchantment/roll-top.webp");       --roll-top-slice: 180;    --roll-top-w: 78px;
  --art-roll-bottom: url("img/enchantment/roll-bottom.webp"); --roll-bottom-slice: 182; --roll-bottom-w: 79px;
  --roll-top-ext: 34; --roll-bottom-ext: 44;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/enchantment/sigil.webp");
}

/* Conjuration: gold end caps set with teal crystals, portal light spiralling down the edges */
[data-scroll="conjuration"] main {
  --art-middle: url("img/conjuration/middle.webp");      --middle-slice: 148;      --edge-w: 74px;
  --art-roll-top: url("img/conjuration/roll-top.webp");       --roll-top-slice: 205;    --roll-top-w: 89px;
  --art-roll-bottom: url("img/conjuration/roll-bottom.webp"); --roll-bottom-slice: 220; --roll-bottom-w: 95px;
  --roll-top-ext: 39; --roll-bottom-ext: 75;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/conjuration/sigil.webp");
}

/* Necromancy: skull end caps and a spine of bone down each edge */
[data-scroll="necromancy"] main {
  --art-middle: url("img/necromancy/middle.webp");      --middle-slice: 100;      --edge-w: 50px;
  --art-roll-top: url("img/necromancy/roll-top.webp");       --roll-top-slice: 175;    --roll-top-w: 76px;
  --art-roll-bottom: url("img/necromancy/roll-bottom.webp"); --roll-bottom-slice: 185; --roll-bottom-w: 80px;
  --roll-top-ext: 29; --roll-bottom-ext: 51;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/necromancy/sigil.webp");
}

/* Transmutation: crumbling stone end caps veined with gold, stone chips turning to gold down the edges */
[data-scroll="transmutation"] main {
  --art-middle: url("img/transmutation/middle.webp");      --middle-slice: 132;      --edge-w: 66px;
  --art-roll-top: url("img/transmutation/roll-top.webp");       --roll-top-slice: 152;    --roll-top-w: 66px;
  --art-roll-bottom: url("img/transmutation/roll-bottom.webp"); --roll-bottom-slice: 162; --roll-bottom-w: 70px;
  --roll-top-ext: 9; --roll-bottom-ext: 40;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/transmutation/sigil.webp");
}

/* Evocation: a scroll that's been set alight */
[data-scroll="evocation"] main {
  --art-middle: url("img/evocation/middle.webp");      --middle-slice: 100;      --edge-w: 52px;
  --art-roll-top: url("img/evocation/roll-top.webp");       --roll-top-slice: 152;    --roll-top-w: 66px;
  --art-roll-bottom: url("img/evocation/roll-bottom.webp"); --roll-bottom-slice: 160; --roll-bottom-w: 69px;
  --art-sigil: url("img/evocation/sigil.webp");
  --art-hole: url("img/evocation/sigil-hole.webp");
}

/* Illusion: the edges dissolve into lavender mist */
[data-scroll="illusion"] main {
  --art-middle: url("img/illusion/middle.webp");      --middle-slice: 180;      --edge-w: 90px;
  --art-roll-top: url("img/illusion/roll-top.webp");       --roll-top-slice: 160;    --roll-top-w: 69px;
  --art-roll-bottom: url("img/illusion/roll-bottom.webp"); --roll-bottom-slice: 151; --roll-bottom-w: 65px;
  --roll-top-ext: 27; --roll-bottom-ext: 32;   /* glow past the rollers, from tools/scroll_assets.py */
  --art-sigil: url("img/illusion/sigil.webp");
}
@media (max-width: 700px) {
  [data-scroll="illusion"] main { --edge-w: 54px; }   /* the mist takes too much of a phone screen */
}

/* scroll-edges:start (generated by tools/scroll_edges.py, don't edit by hand) */
[data-scroll] .paper {
  --tear-w: 46px;
  --tear-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='613'%3E%3Cpath d='M46,0 L2.7,0 L2.5,5 L2.4,10 L2.2,15 L2.5,20 L2.6,25 L2.6,30 L2.4,35 L2.3,40 L2.4,45 L2.6,50 L2.6,55 L2.5,57 L3.4,59 L4.4,61 L4.7,63 L4.7,65 L4.3,67 L3.9,69 L4.1,71 L3.8,73 L3.6,75 L3.3,77 L3.2,79 L3.1,81 L3.4,83 L3.2,88 L3.5,93 L3.5,98 L3.9,103 L3.7,108 L3.9,113 L4,118 L4.3,123 L4.1,128 L4.3,133 L4.2,138 L4.3,143 L4.4,148 L4.6,153 L4.3,158 L4.4,163 L3.9,168 L4.2,173 L3.8,178 L3.6,183 L3.7,188 L3.7,193 L3.1,198 L3,203 L3.1,208 L2.8,213 L2.6,218 L2.3,223 L2.2,228 L2.4,233 L3.1,235 L4.8,237 L6.4,239 L5.9,241 L5.7,243 L5.7,245 L4.4,247 L2.7,249 L2,251 L2.1,253 L2.1,258 L2.2,263 L2,268 L2.4,273 L2.5,278 L2.2,283 L2.3,288 L2.7,293 L2.6,298 L3,303 L2.9,308 L3.1,313 L3.3,318 L3.1,323 L3.3,328 L3.4,333 L3.7,338 L3.8,343 L3.6,348 L4,353 L3.8,358 L3.7,363 L3.8,368 L4.1,373 L3.9,378 L3.9,383 L4,388 L3.9,393 L3.8,398 L3.5,403 L3.5,408 L3.6,413 L3.5,418 L11.2,423 L17.6,425 L16.5,427 L15.8,429 L14.7,431 L10.9,433 L6.2,435 L3.3,437 L3.2,439 L3.2,444 L3.2,449 L3,454 L3.1,459 L2.9,464 L2.8,469 L2.9,474 L3,479 L3.3,484 L3.2,489 L3.2,494 L3.3,499 L3.1,504 L3.4,509 L3.5,514 L3.4,519 L3.4,524 L3.5,529 L3.4,534 L3.6,539 L3.4,544 L3.3,549 L3.4,554 L3.6,559 L3.6,564 L3.4,569 L3.5,574 L3.2,579 L2.9,584 L3,589 L2.9,594 L2.7,599 L2.9,604 L2.7,613 L46,613 Z'/%3E%3C/svg%3E");
  --tear-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='787'%3E%3Cpath d='M0,0 L43.7,0 L43.8,5 L43.5,10 L43.6,15 L43.5,20 L43.5,25 L43.7,30 L43.7,35 L43.7,40 L43.5,45 L43.6,50 L43.6,55 L43.3,60 L43.5,65 L43.6,70 L43.3,75 L43.2,80 L43.3,85 L40,90 L36.6,92 L36,94 L35.1,96 L36.6,98 L39.5,100 L42.2,102 L43.4,104 L43.4,106 L43.1,111 L43.1,116 L43.3,121 L43,126 L43.4,131 L43.4,136 L43.3,141 L43.1,146 L43.2,151 L43.5,156 L43.6,161 L43.5,166 L43.6,171 L43.8,176 L43.6,181 L44.1,186 L43.9,191 L44.1,196 L43.9,201 L44.3,206 L44.1,211 L44.1,216 L44.2,221 L44.3,226 L43.8,228 L43.5,230 L43.1,232 L42.3,234 L41.5,236 L41.2,238 L40.1,240 L40.3,242 L40.6,244 L41.8,246 L43.5,248 L44.5,250 L44.3,252 L44.1,257 L44.1,262 L44,267 L44.2,272 L43.7,277 L43.9,282 L43.4,287 L43.4,292 L43.3,297 L43.3,302 L43.3,307 L43.1,312 L42.8,317 L42.7,322 L42.1,327 L42,332 L42.2,337 L41.7,342 L41.5,347 L41.7,352 L41.2,357 L41.5,362 L41.2,367 L41.3,372 L40.8,377 L41,382 L40.9,387 L41,392 L40.8,397 L40.9,402 L40.7,407 L40.6,412 L40.9,417 L41.1,422 L41.1,427 L41.2,432 L41.1,437 L41.5,442 L41.6,447 L41.4,452 L41.8,457 L39.7,459 L37.4,461 L38.1,463 L38.2,465 L38.9,467 L39.6,469 L40.1,471 L41.2,473 L41.5,475 L42.3,477 L42.4,479 L42.5,484 L42.3,489 L42.6,494 L42.8,499 L42.8,504 L43.1,509 L42.7,514 L43.2,519 L43.1,524 L43.1,529 L43.2,534 L42.9,539 L43.3,544 L43.2,549 L42.9,554 L42.9,559 L43.1,564 L43.2,569 L43.1,574 L43,579 L42.5,584 L42.5,589 L42.7,594 L42.4,599 L42.6,604 L42.2,609 L42.4,614 L42,619 L42,621 L36.8,623 L35.4,625 L36.1,627 L36.7,629 L35,631 L42,633 L42.2,635 L41.7,640 L41.8,645 L41.7,650 L41.8,655 L42,660 L42,665 L41.9,670 L41.7,675 L42,680 L42.1,685 L41.9,690 L42.2,695 L42,700 L42.5,705 L42.3,710 L42.7,715 L42.4,720 L42.8,725 L42.8,730 L42.9,735 L43.1,740 L43.2,745 L43.1,750 L43.1,755 L43.5,760 L43.3,765 L43.7,770 L43.4,775 L43.4,780 L43.7,787 L0,787 Z'/%3E%3C/svg%3E");
  --rim-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' width='46' height='613'%3E%3Cfilter id='b' x='-50%25' y='-10%25' width='200%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3Cg filter='url%28%23b%29'%3E%3Cpath id='p' d='M66,0 L6.6,0 L6.7,5 L6.5,10 L6.3,15 L6.6,20 L6.7,25 L6.7,30 L6.6,35 L6.6,40 L6.7,45 L7.1,50 L7.1,55 L6.9,57 L8,59 L9,61 L9.3,63 L9.3,65 L9.1,67 L8.8,69 L9,71 L8.6,73 L8.6,75 L8.2,77 L8.2,79 L8.2,81 L8.5,83 L8.4,88 L8.8,93 L8.7,98 L9.1,103 L8.8,108 L9.1,113 L9.1,118 L9.3,123 L9,128 L9.1,133 L9.1,138 L9,143 L9,148 L9.3,153 L9,158 L9.3,163 L8.9,168 L9.1,173 L8.8,178 L8.7,183 L8.8,188 L8.6,193 L8.1,198 L8.1,203 L8.3,208 L8,213 L7.7,218 L7.5,223 L7.3,228 L7.5,233 L8.1,235 L9.8,237 L11.3,239 L11,241 L10.7,243 L10.5,245 L9.2,247 L7.7,249 L6.9,251 L6.9,253 L7,258 L7.2,263 L7.2,268 L7.5,273 L7.6,278 L7.3,283 L7.3,288 L7.8,293 L7.7,298 L8.1,303 L8.1,308 L8.2,313 L8.2,318 L8,323 L8,328 L8,333 L8.4,338 L8.5,343 L8.2,348 L8.5,353 L8.3,358 L8.4,363 L8.6,368 L8.7,373 L8.6,378 L8.6,383 L8.7,388 L8.7,393 L8.6,398 L8.5,403 L8.5,408 L8.6,413 L8.5,418 L16.3,423 L22.6,425 L21.5,427 L20.7,429 L19.8,431 L15.9,433 L11.4,435 L8.4,437 L8.4,439 L8.5,444 L8.6,449 L8.4,454 L8.5,459 L8.2,464 L8.1,469 L8.3,474 L8.4,479 L8.6,484 L8.3,489 L8.2,494 L8.2,499 L7.8,504 L7.9,509 L8,514 L7.8,519 L7.9,524 L8.1,529 L8.3,534 L8.6,539 L8.4,544 L8.5,549 L8.4,554 L8.5,559 L8.6,564 L8.5,569 L8.5,574 L8.2,579 L7.9,584 L8.1,589 L7.9,594 L7.6,599 L7.6,604 L7.5,613 L66,613 Z'/%3E%3Cuse x:href='%23p' y='-613'/%3E%3Cuse x:href='%23p' y='613'/%3E%3C/g%3E%3C/svg%3E");
  --rim-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' width='46' height='787'%3E%3Cfilter id='b' x='-50%25' y='-10%25' width='200%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3Cg filter='url%28%23b%29'%3E%3Cpath id='p' d='M-20,0 L39.3,0 L39.2,5 L38.9,10 L39.1,15 L39.1,20 L39.1,25 L39.1,30 L39.2,35 L39.1,40 L38.9,45 L38.9,50 L39,55 L38.5,60 L38.7,65 L38.8,70 L38.4,75 L38.2,80 L38.2,85 L35,90 L31.8,92 L31.1,94 L30.2,96 L31.6,98 L34.4,100 L37.2,102 L38.3,104 L38.2,106 L37.9,111 L37.8,116 L38,121 L37.6,126 L38.2,131 L38.1,136 L38.1,141 L37.8,146 L38,151 L38.4,156 L38.4,161 L38.4,166 L38.5,171 L38.9,176 L38.5,181 L39.1,186 L38.9,191 L39,196 L38.8,201 L39.4,206 L39.3,211 L39.2,216 L39.3,221 L39.5,226 L38.9,228 L38.7,230 L38.1,232 L37.5,234 L36.7,236 L36.4,238 L35.5,240 L35.5,242 L35.6,244 L37,246 L38.7,248 L39.6,250 L39.3,252 L39.2,257 L39.2,262 L39.2,267 L39.3,272 L38.9,277 L38.9,282 L38.6,287 L38.5,292 L38.4,297 L38.3,302 L38.1,307 L38.1,312 L37.9,317 L37.7,322 L37.2,327 L37,332 L37.2,337 L36.5,342 L36.2,347 L36.5,352 L36,357 L36.2,362 L35.8,367 L35.9,372 L35.6,377 L35.8,382 L35.7,387 L35.9,392 L35.7,397 L35.9,402 L35.8,407 L35.8,412 L35.9,417 L36.1,422 L35.9,427 L36.2,432 L36.2,437 L36.7,442 L37,447 L36.8,452 L37.2,457 L34.9,459 L32.7,461 L33.3,463 L33.5,465 L34.1,467 L35,469 L35.3,471 L36.5,473 L36.9,475 L37.5,477 L37.6,479 L37.6,484 L37.4,489 L37.8,494 L38.1,499 L38.3,504 L38.3,509 L38.1,514 L38.7,519 L38.6,524 L38.4,529 L38.4,534 L38,539 L38.5,544 L38.4,549 L38,554 L37.9,559 L37.9,564 L37.8,569 L37.7,574 L37.7,579 L37.3,584 L37.2,589 L37.6,594 L37.4,599 L37.7,604 L37.3,609 L37.6,614 L37.2,619 L37.2,621 L32,623 L30.7,625 L31.3,627 L32,629 L30.3,631 L37.4,633 L37.7,635 L37.1,640 L37,645 L37,650 L37,655 L37,660 L37.1,665 L37.1,670 L37,675 L37,680 L37,685 L36.9,690 L37.2,695 L37.1,700 L37.6,705 L37.3,710 L37.8,715 L37.6,720 L38.1,725 L38,730 L38.2,735 L38.3,740 L38.5,745 L38.3,750 L38.3,755 L38.7,760 L38.5,765 L39,770 L38.7,775 L38.7,780 L38.9,787 L-20,787 Z'/%3E%3Cuse x:href='%23p' y='-787'/%3E%3Cuse x:href='%23p' y='787'/%3E%3C/g%3E%3C/svg%3E");
}
/* scroll-edges:end */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--texture), var(--night);
  background-attachment: fixed;
  color: var(--parchment);
  font: 500 17px/1.5 var(--body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Header ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px clamp(12px, 4vw, 40px) 4px;
}

.title {
  margin: 0;
  font: 800 clamp(2rem, 6vw, 3.4rem)/1 var(--display);
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px var(--title-glow);
  /* the "D" is clicked repeatedly for an easter egg: don't highlight the title */
  -webkit-user-select: none;
  user-select: none;
}
#egg-d { touch-action: manipulation; }   /* rapid taps shouldn't double-tap zoom on phones */

.next { justify-self: end; text-align: right; font-size: 0.85rem; color: var(--muted); }
.next strong { display: block; color: var(--parchment); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.icon-btn {
  justify-self: start;
  background: var(--panel);
  color: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  font: 700 0.95rem var(--body);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--gold); }

/* ---------- Mode selector ---------- */
.modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 0 12px;
}
.mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 118px;
  padding: 8px 14px 7px;
  color: var(--parchment);
  background: var(--panel);   /* solid, so the label reads over a textured background */
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font: 700 0.95rem/1.2 var(--body);
  cursor: pointer;
}
.mode small { font-weight: 500; font-size: 0.75rem; color: var(--muted); }
.mode:hover { border-color: var(--gold); }
.mode[aria-pressed="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.mode[aria-pressed="true"] small { color: inherit; }
.mode .done { margin-left: 4px; }

/* ---------- Main column ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 32px);
}

.meta { text-align: center; color: var(--muted); margin: 10px 0 18px; }
.meta strong { color: var(--parchment); }
.sep { display: inline-block; width: 1px; height: 1em; background: var(--line); margin: 0 12px; vertical-align: middle; }

/* ---------- Guess bar ---------- */
.guess-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  max-width: 760px;
  margin: 0 auto;
}

.combo { position: relative; flex: 1; }

#guess-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font: 500 1.1rem var(--body);
  color: #1a1a1a;
  background: #faf6ec;
  border: 2px solid transparent;
  border-radius: 6px;
}
#guess-input:focus { outline: none; border-color: var(--gold); }

#suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  max-height: 320px;
  overflow-y: auto;
}
#suggestions li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#suggestions li small { color: var(--muted); }
#suggestions li[aria-selected="true"], #suggestions li:hover { background: var(--line); }

.guess-btn {
  min-width: 130px;
  font: 800 1.1rem var(--display);
  color: var(--on-gold);
  background: var(--gold);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.guess-btn:hover { filter: brightness(1.1); }
.guess-btn:disabled { opacity: 0.4; cursor: default; filter: none; }

.clue-btn {
  width: 128px;
  font: 700 0.85rem/1.2 var(--body);
  color: var(--parchment);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.clue-btn:disabled { color: var(--muted); cursor: default; }
.clue-btn:not(:disabled) { border-color: var(--gold); }

.clue {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 12px 16px;
  background: var(--panel);
  border-left: 3px solid var(--gold);
  font-style: italic;
}

/* ---------- Spell slots (lives) ---------- */
.slots-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 0.95rem;
}
.slots { display: flex; gap: 9px; }
.slot {
  width: 14px; height: 14px;
  transform: rotate(45deg);
  border: 2px solid var(--gold);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217, 169, 63, 0.5);
  transition: background 0.3s, box-shadow 0.3s;
}
.slot.spent { background: transparent; box-shadow: none; opacity: 0.5; }

.message { text-align: center; min-height: 1.5em; margin: 6px 0; color: var(--gold); }

/* ---------- Result banner ---------- */
.result {
  max-width: 760px;
  margin: 8px auto 18px;
  padding: 20px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 8px;
}
.result h2 { margin: 0 0 6px; font: 800 1.6rem var(--display); color: var(--gold); }
.result p { margin: 4px 0 14px; }
.result button {
  padding: 10px 22px;
  font: 800 1rem var(--display);
  color: var(--on-gold);
  background: var(--gold);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Spell card after a win: styled like a sourcebook stat block */
.spell-card {
  --card-ink: #2b1d10;
  --card-red: #6b1d0e;
  margin: 18px auto 0;
  padding: 18px 22px 16px;
  text-align: left;
  color: var(--card-ink);
  background: #f6ecd4;
  border: 1px solid rgba(107, 29, 14, 0.35);
  border-radius: 4px;
  box-shadow: inset 0 0 24px rgba(140, 95, 40, 0.18), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.spell-card header { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, var(--card-red), transparent) 1; }
.spell-card h3 { margin: 0; font: 800 1.5rem/1.15 var(--display); color: var(--card-red); letter-spacing: 0.02em; }
.result .spell-card .spell-kind { margin: 2px 0 0; font-style: italic; }
.spell-card dl { margin: 0; }
.spell-card dt { display: inline; font-weight: 800; color: var(--card-red); }
.spell-card dt::after { content: ": "; }
.spell-card dd { display: inline; margin: 0; }
.spell-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 3px 18px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(107, 29, 14, 0.3); }
.spell-desc { line-height: 1.5; }
.result .spell-card .spell-desc p { margin: 0 0 9px; }
.spell-desc table { width: 100%; margin: 4px 0 12px; border-collapse: collapse; font-size: 0.92em; }
.spell-desc th, .spell-desc td { padding: 4px 8px; text-align: left; vertical-align: top; }
.spell-desc th:first-child, .spell-desc td:first-child { white-space: nowrap; }
.spell-desc th { color: var(--card-red); border-bottom: 1px solid rgba(107, 29, 14, 0.4); }
.spell-desc tbody tr:nth-child(odd) { background: rgba(140, 95, 40, 0.1); }
.result .spell-card .spell-note { font-style: italic; color: #6a5238; }
.result .spell-card .spell-credit { margin: 10px 0 0; font-size: 0.75rem; color: #7a6346; }
.spell-extras { display: grid; gap: 2px; padding-top: 10px; margin-top: 4px; font-size: 0.92rem;
  border-top: 1px solid rgba(107, 29, 14, 0.3); }

/* ---------- How to play ---------- */
.how {
  max-width: 760px;
  margin: 10px auto 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 16px;
}
.how summary { cursor: pointer; padding: 12px 0; font-weight: 700; text-align: center; }
.how ul { padding-left: 20px; }
.how li { margin-bottom: 6px; }
.chip { padding: 1px 8px; border-radius: 4px; font-weight: 700; color: #fff; }
.chip.good { background: var(--good); }
.chip.part { background: var(--part); }
.chip.bad { background: var(--bad); }

/* ---------- Board ---------- */
.board-wrap { overflow-x: auto; padding-bottom: 12px; }

.board { border-collapse: separate; border-spacing: 5px; margin: 0 auto; table-layout: fixed; }
.board th, .board td { width: var(--tile-w); min-width: var(--tile-w); max-width: var(--tile-w); hyphens: auto; }
.board .name-col, .board .name, .board .label { width: var(--name-w); min-width: var(--name-w); max-width: var(--name-w); }

.board th {
  width: var(--tile-w);
  padding: 6px 4px 8px;
  font: 700 0.85rem/1.2 var(--body);
  color: var(--parchment);
  border-bottom: 2px solid var(--line);
  vertical-align: bottom;
}
.board th.name-col { font-family: var(--display); }

.tile {
  position: relative;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 6px 3px;
  text-align: center;
  vertical-align: middle;
  font: 700 0.85rem/1.2 var(--body);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  overflow: hidden;
}
.tile span { position: relative; z-index: 1; }
.tile.good { background: var(--good); }
.tile.part { background: var(--part); }
.tile.bad  { background: var(--bad); }
.tile.blessed { background: var(--divine); box-shadow: 0 0 10px rgba(160, 110, 230, 0.55); }

/* Big faded arrow behind the text, like the higher/lower hints in the reference game */
.tile.up::before, .tile.down::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4.2rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.32);
  text-shadow: none;
}
.tile.up::before   { content: "▲"; }
.tile.down::before { content: "▼"; }

.tile.name {
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--parchment);
}

.summary td {
  height: 44px;
  font-size: 0.8rem;
}
.summary td.empty { background: transparent; border: 1px dashed var(--line); }
.summary td.label {
  font: 800 0.95rem var(--display);
  color: var(--parchment);
  background: var(--panel);
  text-shadow: none;
}
.summary td.bounds { background: var(--panel); color: var(--parchment); border: 1px solid var(--line); text-shadow: none; }

/* Reveal: each tile of a new guess flips in, one after another */
.tile.reveal { animation: flip 0.45s ease-out both; }
@keyframes flip {
  from { transform: rotateX(90deg); opacity: 0; }
  to   { transform: rotateX(0); opacity: 1; }
}
.shake { animation: shake 0.35s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tile.reveal, .shake { animation: none; }
}

/* ---------- Stats dialog ---------- */
.stats {
  width: min(420px, 92vw);
  background: var(--panel);
  color: var(--parchment);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 22px 24px;
}
.stats::backdrop { background: rgba(5, 8, 18, 0.7); }
.stats h2 { margin: 0 0 14px; font: 800 1.4rem var(--display); color: var(--gold); text-align: center; }
.stats h3 { margin: 20px 0 8px; font-size: 1rem; }
.close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; cursor: pointer;
}
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat-grid strong { display: block; font: 800 1.6rem var(--display); }
.stat-grid span { font-size: 0.8rem; color: var(--muted); }
.dist { list-style: none; margin: 0; padding: 0; }
.dist li { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 0.85rem; }
.dist li b { width: 1.5em; text-align: right; }
.dist .bar { background: var(--line); color: var(--parchment); padding: 1px 8px; border-radius: 3px; min-width: 24px; text-align: right; }
.dist .bar.today { background: var(--good); }

/* ---------- Footer ---------- */
footer {
  max-width: 760px;
  margin: 30px auto 0;
  padding: 16px 20px 28px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* "Buy me a coffee": links to /support, which forwards to the donation page */
.support a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.support a:hover { text-decoration: underline; }
footer .support { font-size: 0.9rem; color: var(--parchment); }
.result .support { margin: 12px 0 0; font-size: 0.9rem; color: var(--muted); }
.result .support a { color: var(--gold); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  :root { --tile-w: 86px; --tile-h: 66px; --name-w: 96px; }
  .top { grid-template-columns: auto 1fr auto; gap: 8px; }
  .title { text-align: center; }
  .guess-bar { flex-wrap: wrap; }
  .combo { flex-basis: 100%; order: -1; }
  .clue-btn, .guess-btn { flex: 1; height: 44px; }
  .tile { font-size: 0.8rem; }
}

/* Keep the spell name visible while scrolling the board sideways on phones */
.board .name, .board .name-col, .summary .label { position: sticky; left: 0; z-index: 2; }
.board .name-col { background: var(--night); }

/* ---------- Easter egg: divine intervention ----------
   The die is ported from the tavern dice tray (clipped shape, tumble, pop). */
.divine {
  position: fixed;
  top: 74px;
  right: clamp(12px, 3vw, 40px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 12px 12px;
  color: var(--parchment);
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.divine-text { display: flex; flex-direction: column; line-height: 1.2; }
.divine-text strong { font: 700 0.95rem var(--display); color: var(--gold); }
.divine-text span { font-size: 0.8rem; color: var(--muted); }
.divine-result { min-height: 1.3em; margin-top: 3px; font: 800 1rem var(--display); }
.divine-result.success { color: #6fd08c; text-shadow: 0 0 10px rgba(111, 208, 140, 0.6); }
.divine-result.failed { color: #e07b6a; }

.divine-die {
  --die: #3a2f22; --edge: #d8b45a;
  position: relative;
  width: 56px; height: 56px;
  display: inline-grid;
  place-items: center;
}
.divine-shape {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--edge) 55%, var(--die)), var(--die) 60%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  clip-path: polygon(50% 0%, 92% 34%, 74% 100%, 26% 100%, 8% 34%);   /* d10 silhouette */
}
.divine-face {
  position: relative; z-index: 1;
  transform: translateY(6%);
  font: 800 1rem var(--body);
  color: #fbf1da;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
.divine-kind {
  position: absolute; bottom: -15px; z-index: 1;
  font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.divine-die.rolling { animation: divine-tumble 0.28s linear infinite; }
.divine-die.settled { animation: divine-pop 0.3s ease-out; }
@keyframes divine-tumble {
  0%   { transform: translateY(0) rotate(-7deg); }
  25%  { transform: translateY(-5px) rotate(5deg); }
  50%  { transform: translateY(0) rotate(-4deg); }
  75%  { transform: translateY(-3px) rotate(6deg); }
  100% { transform: translateY(0) rotate(-7deg); }
}
@keyframes divine-pop {
  0%   { transform: scale(1.28); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* The snap: a fade that sweeps left to right while dust drifts off */
.divine.dissolving {
  -webkit-mask: linear-gradient(to right, transparent 40%, #000 60%) 100% 0 / 250% 100% no-repeat;
  mask: linear-gradient(to right, transparent 40%, #000 60%) 100% 0 / 250% 100% no-repeat;
  animation: divine-snap 1.8s ease-in forwards;
}
@keyframes divine-snap {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(1px); }
}
.dust {
  position: fixed;
  z-index: 31;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0;
  animation: dust-drift 1.6s ease-out forwards;
}
@keyframes dust-drift {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(160deg) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .divine-die.rolling, .divine-die.settled { animation: none; }
}
/* Narrower screens: sit over the top-right corner instead of beside the mode buttons */
@media (max-width: 1340px) {
  .divine { top: 8px; right: 8px; }
}

/* Local-testing reset button (only added on localhost / file://) */
.dev-reset {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  padding: 6px 12px;
  font: 700 0.8rem var(--body);
  color: #fff;
  background: var(--bad);
  border: 1px dashed #fff;
  border-radius: 6px;
  opacity: 0.8;
  cursor: pointer;
}
.dev-reset:hover { opacity: 1; }
.dev-look { left: auto; right: 12px; background: #444; }