/* Deep Voice Die (/die/). Builds on landing.css. */

/* ---------- The die's material: one switch ----------
   <html data-die-look="ink|paper|accent"> picks a look. Each look is a face colour, a lettering colour and a
   little light: gloss (highlight), edge (how much the edges catch light) and ambient (how dark the shaded side is).
   The die is an object on the desk, so its colour barely changes with the theme; dark mode only lifts it enough
   to read against the darker page. */
:root {
  --die-ink-face: #2b2926;   /* near --ink, a little warm */
  --die-ink-type: #f4f1ea;   /* paper */
  --die-paper-face: #e9e1d1; /* bone */
  --die-paper-type: #23262a; /* ink */
  --die-accent-face: #2f5b82;/* --accent */
  --die-accent-type: #fcfbf8;
  --die-shadow: rgba(35, 38, 42, 0.34);
}
.die-stage { --die-face: var(--die-ink-face); --die-type: var(--die-ink-type); --die-gloss: 0.45; --die-edge: 0.07; --die-ambient: 0.42; }
[data-die-look="paper"] .die-stage { --die-face: var(--die-paper-face); --die-type: var(--die-paper-type); --die-gloss: 0.22; --die-edge: 0.05; --die-ambient: 0.52; }
[data-die-look="accent"] .die-stage { --die-face: var(--die-accent-face); --die-type: var(--die-accent-type); --die-gloss: 0.4; --die-edge: 0.07; --die-ambient: 0.44; }

/* ---------- Dark theme (landing.css is light only; these follow home.css's dark tokens) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1d20; --chrome: #202124; --margin: #232427; --ink: #e4e2dd; --ink-soft: #c3c1bb; --muted: #9a9892;
    --line: #2f3135; --line-strong: #3b3d42; --accent: #8fb4d8; --accent-ink: #b8d0e8; --accent-wash: #233140; --focus: #8fb4d8;
    --die-ink-face: #3a3632; --die-accent-face: #36678f; --die-shadow: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .die-stage { --die-edge: 0.11; }
  :root:not([data-theme="light"]) .masthead { background: rgba(28, 29, 32, 0.86); }
  :root:not([data-theme="light"]) .lockup { color: var(--ink); }
  :root:not([data-theme="light"]) .lockup-mark { filter: invert(0.9); }
  :root:not([data-theme="light"]) .button { color: #141517; }
  :root:not([data-theme="light"]) .button-quiet { color: var(--accent-ink); }
  :root:not([data-theme="light"]) .skip { color: var(--paper); }
}
:root[data-theme="dark"] {
  --paper: #1c1d20; --chrome: #202124; --margin: #232427; --ink: #e4e2dd; --ink-soft: #c3c1bb; --muted: #9a9892;
  --line: #2f3135; --line-strong: #3b3d42; --accent: #8fb4d8; --accent-ink: #b8d0e8; --accent-wash: #233140; --focus: #8fb4d8;
  --die-ink-face: #3a3632; --die-accent-face: #36678f; --die-shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
:root[data-theme="dark"] .die-stage { --die-edge: 0.11; }
:root[data-theme="dark"] .masthead { background: rgba(28, 29, 32, 0.86); }
:root[data-theme="dark"] .lockup { color: var(--ink); }
:root[data-theme="dark"] .lockup-mark { filter: invert(0.9); }
:root[data-theme="dark"] .button { color: #141517; }
:root[data-theme="dark"] .button-quiet { color: var(--accent-ink); }
:root[data-theme="dark"] .skip { color: var(--paper); }

/* These pages have no nav links, so push the button to the right. */
.masthead-inner > .button { margin-left: auto; }

/* ---------- Page ---------- */
body { overflow-x: clip; }
.die-page [hidden] { display: none !important; }
.die-page { max-width: 46rem; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(56px, 9vw, 104px); text-align: center; }
.die-title { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }

.die-panel { position: relative; padding-top: 4px; max-width: 34rem; margin: 0 auto; }
.die-close {
  position: absolute; top: 12px; right: 0; z-index: 2;
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); color: var(--ink-soft); cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.die-close:hover { border-color: var(--ink-soft); color: var(--ink); }

/* The stage is square; the die sits in its lower part so a hop has room above it. */
.die-stage { position: relative; width: min(420px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; }
.die-hit {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 28px; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.die-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; }
.die-stage[data-state="rolling"] .die-hit { cursor: progress; }
.die-canvas { display: block; width: 100%; height: 100%; transition: opacity 150ms ease; }
.die-stage.is-swapping .die-canvas { opacity: 0; }
.die-shadow {
  --lift: 0;
  position: absolute; z-index: 0; left: 50%; top: 89%; width: 50%; height: 9%;
  transform: translate(-50%, -50%) scale(calc(1 - var(--lift) * 0.38));
  opacity: calc(1 - var(--lift) * 0.6);
  background: radial-gradient(closest-side, var(--die-shadow), transparent);
  pointer-events: none;
}
.die-stage[data-mode="loading"] .die-shadow { opacity: 0; }
.die-stage[data-mode="flat"] .die-shadow { top: 82%; width: 44%; }

/* No WebGL: one flat face, in the same material and lettering. */
.die-flat {
  position: absolute; left: 50%; top: 47%; width: 64%; aspect-ratio: 1 / 0.866;
  transform: translate(-50%, -50%);
  display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 10px 14px var(--die-shadow));
  transition: opacity 220ms ease, transform 220ms var(--ease);
}
.die-flat::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--die-face) 86%, #fff) 0%, var(--die-face) 55%, color-mix(in srgb, var(--die-face) 88%, #000) 100%);
}
.die-flat.is-turning { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
.die-flat-text {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.18em;
  height: 66.7%; justify-content: flex-start; padding-top: 6%;
  color: var(--die-type);
  font-family: "DIN Condensed", "Avenir Next Condensed", "Bahnschrift Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  font-stretch: condensed; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(15px, 4.4vw, 22px); line-height: 0.92;
}

/* ---------- The prompt, beneath the die ---------- */
.die-result { max-width: 34rem; min-height: 10.5rem; margin: 6px auto 0; }
.die-result p { margin: 0; }
.die-result-label { font: 600 13px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px !important; }
.die-result-prompt { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 28px); line-height: 1.36; color: var(--ink); text-wrap: pretty; }
.die-result.is-intro .die-result-label { font: 400 clamp(22px, 2.8vw, 28px)/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 6px !important; }
.die-result.is-intro .die-result-prompt { font: 16px/1.5 var(--sans); color: var(--muted); }
.die-result.is-new { animation: die-reveal 420ms var(--ease) both; }
@keyframes die-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.die-actions { display: flex; justify-content: center; margin-top: 18px; }
.die-actions .button[aria-disabled="true"] { opacity: 0.72; cursor: progress; }
.die-reopen { display: flex; justify-content: center; }
.die-reopen .button:not([hidden]) { margin-top: 32px; }
.die-noscript { color: var(--muted); }

@media (max-width: 560px) {
  .die-close { top: 4px; }
  .die-result { min-height: 12.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .die-result.is-new { animation: none; }
  .die-flat, .die-flat.is-turning { transition: none; transform: translate(-50%, -50%); }
}