/* dice.css — the real die's committed defaults and its canvas.
   The numbers below are Dave's, dialled on the lab bench 2026-09-06 and exported from the
   panel; the light now sits high to the upper-right and the camera is closer than the
   app's (19.5 vs 28), so the die reads at ~145 px on a desktop.
   Every number a human has to eyeball on the throw, the table light and the shadow is a
   custom property here, read by dice/dice.js at throw time (and per frame under ?tune).
   The panel only overrides these; dice.js's DIAL_DEFAULTS repeats them as the fallback
   for a page that has not loaded this sheet. Change one, change both.

   Load order: tokens.css, the page's sheets, then this. Nothing here is a colour — the
   die's own materials are the one place the site shows the app's palettes, and the
   shadow is the site's ink at the weight every drawn shape on the site already uses. */

/* Two numeral faces copied from the app for the dice alone (the rest of the family is
   declared in tokens.css). Fetched only when a die is baked in them. */
@font-face{font-family:'BN Blacklettra';src:url('../fonts/BNBlacklettra.otf') format('opentype');font-display:swap}
@font-face{font-family:'BN Rendall';src:url('../fonts/BNRendallScript-Cursive.otf') format('opentype');font-display:swap}

:root{
  /* the throw — units are the engine's (a die is 1.3 across its radius; the app throws at 18–24) */
  --dice-throw-speed:22;
  --dice-throw-lift:12;
  --dice-spin:22;
  --dice-gravity:-46;
  --dice-restitution:0.45;
  --dice-friction:0.66;
  --dice-settle:0.009;
  /* the table */
  --dice-camera-height:19.5;
  /* the shadow: ink at the drop-shadow weight the drawn d20 uses (rgba(28,19,10,.3)),
     cast down-right by a key light high to the upper-left */
  --dice-shadow-opacity:0.34;
  --dice-shadow-radius:2.4;
  --dice-contact-ink:0.55;
  --dice-light-x:5;
  --dice-light-y:10.5;
  --dice-light-z:-6;
  --dice-key:1.4;
  --dice-ambient:0.52;
  --dice-exposure:1.0;
  /* the faces (multipliers on the skin's own numbers, as in the app) and the clatter */
  --dice-legibility:1.05;
  --dice-material-intensity:0.55;
  --dice-material-scale:1.35;
  --dice-face-size:320;
  --dice-impact-strength:1;
  --dice-impact-spread:1;
  --dice-impact-linger:2.3;
  --dice-impact-secondary:0.45;
  --dice-impact-contrast:0.9;
  --dice-spark-count:6;
  --dice-frost-shards:5;
  --dice-twenty-size:1.5;
  --dice-twenty-ink:0.58;
  --dice-sound-gain:0.4;
}

/* The table: the whole viewport while a die is in the air; pinned to the page (inline
   top) while it rests, so it scrolls away with the sheet. Under the masthead (z 62),
   over everything else, and never in the way of a pointer. */
.qc-dice{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;pointer-events:none;z-index:60}

/* A result and its roll control stay readable when the table crosses them. */
#reaction,#roll,#d20Btn{isolation:isolate}

/* The Workshop roll answers in its open right margin, clear of the product copy.
   Only the dice response is restyled; the shared hero layout and tokens stay intact. */
.reaction.reaction--dice-caption{
  inset:auto 5vw 7.8rem auto;width:min(31rem,38vw);height:auto;min-height:6rem;
  padding:0;gap:.65rem;z-index:61;justify-content:flex-end;align-items:flex-end;text-align:right;
}
.reaction--dice-caption .reaction__phrase{font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.08;text-shadow:none}
.reaction--dice-caption .reaction__num{font-size:1rem;letter-spacing:.22em;color:var(--ink-900)}
.reaction--dice-caption .reaction__die{margin-top:0;line-height:1.4;font-size:.68rem;letter-spacing:.08em}
.reaction--dice-caption .ltr{animation:none;opacity:1;transform:none}
@media(max-width:640px){
  /* The real result lives in the existing roll control; the longer aria-live phrase
     remains available to a screen reader without covering forms or product copy. */
  .reaction.reaction--dice-caption{
    position:absolute;width:1px;height:1px;min-height:0;padding:0;inset:auto;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}

/* Dice left lying in the margins (restDice): a picture each, in document space, never in
   the column. Set down with a short fade — and no fade at all under reduced motion. */
.qc-rest-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:1;pointer-events:none}
.qc-rest-die{position:absolute;display:block;pointer-events:none;user-select:none;opacity:0;transition:opacity .5s ease-out}
.qc-rest-die.is-set{opacity:1}
.qc-rest-die[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.qc-rest-die{transition:none}}