/* Liar's Dice dice: styles, the 3D die, the set-aside row and the style picker. Moved verbatim
   from style.css; loaded after it. Dice colours are dice data, not skin, so the hex-colour-in-
   :root rule for style.css does not apply here. */

/* ---- dice styles (CSS pips, no images) ----
   A style class (on <body>, or on a preview) sets the die's shape as fractions of its size
   (--rf corner radius, --pad face padding, --pip / --pip1 pip sizes) and its paint. Every die
   sets font-size to its own size, so 0.02em inside the paint is 2% of that die.
   --mat is the body colour of the rounded edges; --shade-color/--shade-k and
   --glint-color/--glint-k are how far an edge turned from or toward the light is mixed. */
.dice-ivory {
  --rf: 0.12; --pad: 0.03; --pip: 0.175; --pip1: 0.25;
  --mat: #f2e9cf;
  --face-bg: radial-gradient(circle at 35% 30%, #fbf7ea 0%, #f2e9cf 75%);
  --face-ring: 0 0 0 transparent;
  --pip-bg: radial-gradient(circle at 38% 32%, #4a4a4a 0%, #121212 55%, #000 100%);
  --pip-shadow: inset 0 0.025em 0.035em rgba(0, 0, 0, 0.9), 0 0.018em 0 rgba(255, 255, 255, 0.95);
  --pip1-bg: radial-gradient(circle at 38% 32%, #ff7a6b 0%, #c4231a 58%, #6e0c08 100%);
  --shade-color: #b29a63; --shade-k: 0.6; --glint-color: #fffdf6; --glint-k: 0.5;
}
.dice-ruby {
  --rf: 0.06; --pad: 0.09; --pip: 0.16; --pip1: 0.18;
  --mat: #c9142f;
  --face-bg: radial-gradient(circle at 30% 25%, #da223b 0%, #c9142f 60%, #b70e28 100%);
  --face-ring: 0 0 0 transparent;
  --pip-bg: radial-gradient(circle at 40% 35%, #ffffff 0%, #f2eded 70%, #d9cccc 100%);
  --pip-shadow: inset 0 0.015em 0.025em rgba(0, 0, 0, 0.35), 0 0 0 0.012em rgba(110, 0, 18, 0.55);
  --pip1-bg: var(--pip-bg);
  --shade-color: #4a0012; --shade-k: 0.55; --glint-color: #ff6a7e; --glint-k: 0.45;
}
.dice-obsidian {
  --rf: 0.11; --pad: 0.04; --pip: 0.17; --pip1: 0.25;
  --mat: #1d2025;
  --face-bg: radial-gradient(circle at 32% 28%, #2a2e35 0%, #1d2025 70%);
  --face-ring: inset 0 0 0 max(1px, 0.016em) rgba(228, 184, 77, 0.75);
  --pip-bg: radial-gradient(circle at 32% 28%, #fff6cf 0%, #f1c95b 35%, #b8861f 75%, #6e4b0c 100%);
  --pip-shadow: 0 0 0.06em rgba(228, 184, 77, 0.5), inset 0 -0.018em 0.018em rgba(0, 0, 0, 0.4);
  --pip1-bg: var(--pip-bg);
  --shade-color: #000; --shade-k: 0.6; --glint-color: #8e96a3; --glint-k: 0.5;
}

.dice-studio {
  --rf: 0.14; --pad: 0.04; --pip: 0.17; --pip1: 0.24;
  --mat: #f4f4ef;
  --face-bg: radial-gradient(circle at 32% 26%, #ffffff 0%, #f4f4ef 72%);
  --face-ring: 0 0 0 transparent;
  --pip-bg: radial-gradient(circle at 38% 32%, #3a3c42 0%, #0f1012 60%);
  --pip-shadow: inset 0 0.02em 0.03em rgba(0, 0, 0, 0.85);
  --pip1-bg: radial-gradient(circle at 38% 32%, #ff9a6b 0%, #ff5a1f 55%, #a83300 100%);
  --shade-color: #9a9a90; --shade-k: 0.55; --glint-color: #ffffff; --glint-k: 0.5;
}

/* Every pip on a die is the same whole-pixel circle. A fractional diameter (0.175 x 56px = 9.8px)
   anti-aliases differently depending on where the pip lands, so neighbouring pips looked like
   different sizes and shapes. The plain calc() is the fallback for browsers without round(). */
[data-face] > i {
  --pip-d: calc(var(--pip) * 1em);
  width: var(--pip-d); height: var(--pip-d); aspect-ratio: 1; border-radius: 50%; place-self: center; opacity: 0;
  background: var(--pip-bg); box-shadow: var(--pip-shadow);
}
[data-face="1"] > i { --pip-d: calc(var(--pip1) * 1em); background: var(--pip1-bg); }
@supports (width: round(nearest, 1.5px, 1px)) {
  [data-face] > i { --pip-d: round(nearest, calc(var(--pip) * 1em), 2px); }
  [data-face="1"] > i { --pip-d: round(nearest, calc(var(--pip1) * 1em), 2px); }
}
[data-face="1"] > i:nth-child(5),
[data-face="2"] > i:nth-child(1), [data-face="2"] > i:nth-child(9),
[data-face="3"] > i:nth-child(1), [data-face="3"] > i:nth-child(5), [data-face="3"] > i:nth-child(9),
[data-face="4"] > i:nth-child(1), [data-face="4"] > i:nth-child(3), [data-face="4"] > i:nth-child(7), [data-face="4"] > i:nth-child(9),
[data-face="5"] > i:nth-child(1), [data-face="5"] > i:nth-child(3), [data-face="5"] > i:nth-child(5), [data-face="5"] > i:nth-child(7), [data-face="5"] > i:nth-child(9),
[data-face="6"] > i:nth-child(1), [data-face="6"] > i:nth-child(3), [data-face="6"] > i:nth-child(4), [data-face="6"] > i:nth-child(6), [data-face="6"] > i:nth-child(7), [data-face="6"] > i:nth-child(9) { opacity: 1; }

/* The gold "odd die" (house rule) in any style. */
.die-odd {
  --mat: #e0b04a;
  --face-bg: radial-gradient(circle at 35% 30%, #f8dc86 0%, #e4b84d 75%);
  --face-ring: 0 0 0 transparent;
  --pip-bg: #2b1f00; --pip1-bg: #2b1f00; --pip-shadow: inset 0 0.02em 0.03em rgba(0, 0, 0, 0.6);
  --shade-color: #7a5410; --glint-color: #fff6d8;
}

/* A flat die: the set-aside row, the header and the style previews. */
.die-mini {
  --s: 22px;
  display: inline-grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); flex: none;
  width: var(--s); height: var(--s); font-size: var(--s); padding: calc(var(--s) * 0.13);
  border-radius: calc(var(--rf) * 100%);
  background: var(--face-bg);
  box-shadow: var(--face-ring),
    inset -0.05em -0.06em 0.06em color-mix(in srgb, var(--mat), var(--shade-color) calc(var(--shade-k) * 100%)),
    0 0.04em 0.1em rgba(0, 0, 0, 0.45);
}
.die-brand { --s: 30px; }
/* A revealed die that counts toward the total (the face bid or a wild) gets one solid yellow ring;
   a die that does not count is dimmed a little. Wild keeps a small "WILD" tag (see .die-mark). */
.die-mini.die-match, .die-mini.die-wild { outline: 3px solid var(--select); outline-offset: 2px; }
.die-mini.die-out { filter: brightness(0.7); }

.dice-tray {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 84px;
  padding: 14px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tray-empty { margin: auto; color: var(--muted); }
.die-wrap { position: relative; display: inline-block; }

/* 3D die: button > shadow + halo + toss > lift > (cube | flat). The cube (six faces plus the
   rounded-edge strips and corner triangles dice.js adds) only shows while the die is in the
   air; a landed die (.at-rest) shows the flat drawing of its top face, which lines up with the
   cube's front face pixel for pixel. */
body.dice-size-small { --die-tray: 46px; }
body.dice-size-large { --die-tray: 68px; }
body.dice-size-xlarge { --die-tray: 80px; }
.die3d {
  --s: var(--die-tray, 56px);
  position: relative; display: block; width: var(--s); height: var(--s); padding: 0; border: 0;
  background: none; color: inherit; font-size: var(--s); cursor: pointer;
  perspective: calc(var(--s) * 5); border-radius: calc(var(--rf) * 100%);
  -webkit-tap-highlight-color: transparent;
}
.die3d[aria-disabled="true"] { cursor: default; }
.d-shadow {
  position: absolute; inset: 4%; border-radius: calc(var(--rf) * 100% + 6%); background: rgba(0, 0, 0, 0.55);
  transform: translate(0.07em, 0.09em); filter: blur(0.06em);
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}
.d-halo {
  position: absolute; inset: -0.12em; border-radius: calc(var(--rf) * 100% + 10%);
  border: 3px solid var(--select); box-shadow: 0 0 14px var(--select), inset 0 0 10px var(--select);
  opacity: 0; transform: scale(0.8); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.d-toss, .d-lift, .d-cube, .d-flat { position: absolute; inset: 0; }
.d-toss, .d-lift, .d-cube { transform-style: preserve-3d; }
.d-lift { transform: translateZ(-0.5em); transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.die3d.at-rest .d-cube, .die3d:not(.at-rest) .d-flat { display: none; }

/* Edge strips and corner triangles: a --tile square mapped onto its piece by matrix3d, lit by
   a blend between two light values (--la, --lb) so the curves read smooth, not faceted. */
.d-poly {
  position: absolute; left: 0; top: 0; width: var(--tile, 20px); height: var(--tile, 20px);
  transform-origin: 0 0; backface-visibility: hidden;
  --ca: color-mix(in srgb,
    color-mix(in srgb, var(--mat), var(--shade-color) calc(max(0, -1 * var(--la, 0)) * var(--shade-k) * 100%)),
    var(--glint-color) calc(max(0, var(--la, 0)) * var(--glint-k) * 60%));
  --cb: color-mix(in srgb,
    color-mix(in srgb, var(--mat), var(--shade-color) calc(max(0, -1 * var(--lb, 0)) * var(--shade-k) * 100%)),
    var(--glint-color) calc(max(0, var(--lb, 0)) * var(--glint-k) * 60%));
}
.d-edge { background: linear-gradient(to right, var(--ca), var(--cb)); }
.d-edge.d-gv { background: linear-gradient(to bottom, var(--ca), var(--cb)); }
/* The tile's top-left half is the triangle; a hard stop composites far cheaper than clip-path. */
.d-tri { background: linear-gradient(to bottom right, var(--ca) 0%, var(--cb) calc(50% - 0.8px), transparent 50%); }

.d-face, .d-flat-face {
  position: absolute; display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  left: calc(var(--s) * var(--rf) - 0.5px); top: calc(var(--s) * var(--rf) - 0.5px);
  width: calc(var(--s) * (1 - 2 * var(--rf)) + 1px); height: calc(var(--s) * (1 - 2 * var(--rf)) + 1px);
  padding: calc(var(--s) * var(--pad)); background: var(--face-bg); box-shadow: var(--face-ring);
}
.d-face { backface-visibility: hidden; }
.d-face::before, .d-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.d-face::before { background: var(--glint-color); opacity: calc(max(0, var(--l, 0)) * var(--glint-k) * 0.6); }
.d-face::after { background: var(--shade-color); opacity: calc(max(0, -1 * var(--l, 0)) * var(--shade-k)); }
/* Faces sit 0.3px proud of the shell so their overlap with the first edge strip never z-fights. */
.d-front { transform: translateZ(calc(0.5em + 0.3px)); }
.d-back { transform: rotateY(180deg) translateZ(calc(0.5em + 0.3px)); }
.d-right { transform: rotateY(90deg) translateZ(calc(0.5em + 0.3px)); }
.d-left { transform: rotateY(-90deg) translateZ(calc(0.5em + 0.3px)); }
.d-top { transform: rotateX(90deg) translateZ(calc(0.5em + 0.3px)); }
.d-bottom { transform: rotateX(-90deg) translateZ(calc(0.5em + 0.3px)); }

/* The landed die seen straight down: the top face, framed by its rounded edges (lit from the
   upper left like the shell) and slightly inset, as perspective shrinks the cube's outline. */
.d-flat { transform: translateZ(0.5em) rotate(var(--turn, 0deg)); }
.d-rim {
  position: absolute; inset: calc(var(--s) * var(--rf) / (10 + 2 * var(--rf)));
  border-radius: calc(var(--s) * var(--rf));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mat), var(--glint-color) calc(var(--glint-k) * 30%)) 0%, var(--mat) 45%,
    color-mix(in srgb, var(--mat), var(--shade-color) calc(var(--shade-k) * 55%)) 100%);
  box-shadow: inset -0.035em -0.045em 0.05em color-mix(in srgb, transparent, var(--shade-color) calc(var(--shade-k) * 60%));
}

.die-selected .d-halo { opacity: 1; transform: scale(1); }
.die-selected .d-lift { transform: translateZ(-0.18em); }
.die-selected .d-shadow { transform: translate(0.16em, 0.2em) scale(1.06); filter: blur(0.11em); opacity: 0.7; }
/* hover: a die lifts toward the viewer the way a selected one does, only less (desktop pointers) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .die3d.at-rest:not(.die-selected):not([aria-disabled="true"]):hover .d-lift { transform: translateZ(-0.34em); }
  .die3d.at-rest:not(.die-selected):not([aria-disabled="true"]):hover .d-halo { opacity: 0.4; transform: scale(0.95); }
}
.die-dim { opacity: 0.45; }
.die-kept { opacity: 0.4; filter: grayscale(0.6); }
/* .die-tip, not .tip: the rule tooltip in style.css owns .tip, and this sheet loads after it */
.die-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5;
  width: max-content; max-width: 180px; padding: 6px 10px; border-radius: 8px; font-size: 0.85rem;
  background: var(--select); color: var(--on-select); font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  visibility: hidden; opacity: 0; pointer-events: none;
}
.die-wrap:focus-within .die-tip, .die-wrap.tip-open .die-tip { visibility: visible; opacity: 1; }

.set-aside { margin-top: 12px; }
.set-aside-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-family: inherit; }
.aside-roll { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.aside-group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.aside-dice { display: inline-flex; gap: 3px; }
.aside-label { font-size: 0.85rem; font-weight: 600; }

/* ---- dice style picker ---- */
.dice-style-list { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dice-style-list legend { padding: 0; margin-bottom: 4px; }
.dice-style-option {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 0; background: var(--panel-2);
}
.dice-style-option:has(input:checked) { border-color: var(--select); background: var(--panel); }
.dice-style-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--signal); }
.dice-style-preview { display: inline-flex; gap: 6px; flex: none; }
.dice-style-preview .die-mini { --s: 34px; }
.dice-size-swatch { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 80px; }
.dice-size-swatch-small .die-mini { --s: 46px; }
.dice-size-swatch-medium .die-mini { --s: 56px; }
.dice-size-swatch-large .die-mini { --s: 68px; }
.dice-size-swatch-xlarge .die-mini { --s: 80px; }
.dice-style-text { display: grid; min-width: 0; }
.dice-style-name { font-weight: 700; }
.dice-style-desc { color: var(--muted); font-size: 0.88rem; }

@media (hover: hover) and (pointer: fine) {
  .die-wrap:hover .die-tip { visibility: visible; opacity: 1; }
  .die3d:not([aria-disabled="true"]):hover .d-lift { transform: translateZ(-0.4em); }
  .die3d.die-selected:not([aria-disabled="true"]):hover .d-lift { transform: translateZ(-0.18em); }
  .dice-style-option:hover { background: rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .d-lift, .d-halo, .d-shadow { transition: none; }
}

/* ---- moment states: the stage's data-moment tints the dice while a moment plays ---- */
.stage[data-moment="bust"] .die3d, .stage[data-moment="disaster"] .die3d { filter: grayscale(1) brightness(0.55); }
.stage[data-moment="hot_dice"] .die3d .d-halo {
  opacity: 1; transform: scale(1); border-color: var(--signal); box-shadow: 0 0 14px var(--signal), inset 0 0 10px var(--signal);
}

/* the SHOW tag under a die picked to show, and SHOWN once it is public (both sit on the .die3d button) */
.die-exposed::after {
  content: "SHOWN"; position: absolute; left: 50%; top: calc(100% + 6px); z-index: 2; padding: 0 8px; pointer-events: none;
  transform: translateX(-50%) skewX(-12deg); background: var(--panel-2); color: var(--text);
  font: 900 0.72rem / 1.5 var(--display); letter-spacing: 0.1em;
}
.die-selected::after {
  content: "SHOW"; position: absolute; left: 50%; top: calc(100% + 6px); z-index: 2; padding: 0 8px; pointer-events: none;
  transform: translateX(-50%) skewX(-12deg); background: var(--select); color: var(--on-select);
  font: 900 0.72rem / 1.5 var(--display); letter-spacing: 0.1em;
}