/* Liar's Dice — game-specific styles (all classes prefixed ld-).
   The mat, cups and dice are physical materials: identical in light and dark themes.
   Everything outside the mat (header strip, controls) follows the site theme.
   Animations are keyed to event timestamps from JS (negative delays), and every
   element's resting style is its FINAL state, so reduced motion simply skips ahead. */

.ld-root {
  --ld-ivory: var(--paper);
  --ld-ink: #16161b;
  --ld-ease: cubic-bezier(.2, .8, .2, 1);
  --ld-die: 46px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ------------------------------------------------------------ top strip ---- */
.ld-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.ld-player { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ld-player-jev { align-items: flex-end; }
.ld-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
.ld-player-jev .ld-name { flex-direction: row-reverse; }
.ld-turn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.ld-player.on .ld-name { color: var(--text); }
.ld-player.on .ld-turn-dot {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
.ld-round {
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: 6px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.ld-round small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.ld-round b { font-family: var(--font-display); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* remaining-dice indicator */
.ld-minis { display: inline-flex; gap: 5px; }
.ld-player-jev .ld-minis { flex-direction: row-reverse; }
.ld-mini {
  position: relative;
  width: 15px; height: 15px; border-radius: 4px;
  background: radial-gradient(120% 120% at 30% 25%, #fff, var(--ld-ivory) 50%, #e2dbcb);
  box-shadow: inset -1px -1px 2px rgba(110, 90, 60, .35), 0 1px 2px rgba(0, 0, 0, .25);
}
.ld-mini::after { /* a single engraved pip reads as "die" at this size */
  content: ''; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ld-ink);
}
.ld-mini-empty {
  background: transparent; box-shadow: none;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}
.ld-mini-empty::after { display: none; }
.ld-mini-going { /* ends as an empty slot; the die itself (::before) fades away */
  background: transparent; box-shadow: none;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}
.ld-mini-going::after { display: none; }
.ld-mini-going::before {
  content: ''; position: absolute; inset: -1px; border-radius: 4px;
  background: radial-gradient(circle, var(--ld-ink) 0 2px, transparent 2.5px), radial-gradient(120% 120% at 30% 25%, #fff, var(--ld-ivory) 50%, #e2dbcb);
  opacity: 0; transform: scale(.4) rotate(-20deg);
  animation: ld-mini-go .6s var(--ld-ease) both;
  animation-delay: inherit;
}
@keyframes ld-mini-go { from { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- the mat ---- */
.ld-mat {
  position: relative;
  padding: 11px;
  border-radius: 26px;
  background:
    var(--noise),
    linear-gradient(160deg, color-mix(in srgb, var(--rail-1) 88%, #fff 12%) 0%, var(--rail-1) 35%, var(--rail-2) 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(0, 0, 0, .5),
    0 1px 2px rgba(0, 0, 0, .2),
    0 22px 44px -22px rgba(0, 0, 0, .55);
}
.ld-mat::before { /* brass trim between rail and felt */
  content: ''; position: absolute; inset: 8px; border-radius: 19px; pointer-events: none;
  background: linear-gradient(135deg, #7d5a21, var(--gold-2) 30%, var(--gold) 55%, #6f5020 100%);
}
.ld-felt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 18px clamp(12px, 3vw, 28px) 20px;
  border-radius: 16px;
  color: #f3ecdc;
  background:
    var(--noise),
    radial-gradient(55% 45% at 50% 40%, rgba(255, 244, 214, .08), transparent 100%),
    radial-gradient(120% 90% at 50% 42%, var(--felt-1) 0%, color-mix(in srgb, var(--felt-1) 55%, var(--felt-2)) 55%, var(--felt-2) 100%);
  background-blend-mode: overlay, normal, normal;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 10px 30px rgba(0, 0, 0, .35), inset 0 -8px 26px rgba(0, 0, 0, .25);
}
.ld-felt::before { /* stitched inner border line */
  content: ''; position: absolute; inset: 9px; border-radius: 10px; pointer-events: none; z-index: -1;
  border: 1px dashed rgba(236, 217, 166, .2);
}

/* ------------------------------------------------------------- dice ---- */
.ld-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: var(--ld-die);
}
.ld-slot { display: inline-flex; rotate: var(--tilt, 0deg); }

.ld-die {
  --size: var(--ld-die);
  position: relative;
  width: var(--size); height: var(--size);
  display: inline-grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--size) * .15);
  box-sizing: border-box;
  border-radius: 24%;
  flex: none;
  vertical-align: middle;
  background: radial-gradient(130% 130% at 28% 22%, #fff 0%, var(--ld-ivory) 42%, #e9e2d2 80%, #d9d0bc 100%);
  box-shadow:
    inset -2px -3px 5px rgba(120, 96, 60, .28),
    inset 2px 2px 3px rgba(255, 255, 255, .95),
    0 1px 0 rgba(0, 0, 0, .18),
    0 7px 12px -5px rgba(0, 0, 0, .55);
  transition: opacity .3s, box-shadow .3s;
}
.ld-die i { display: block; place-self: center; width: 76%; height: 76%; border-radius: 50%; }
.ld-die i.p {
  background: radial-gradient(circle at 38% 32%, #4b4b56, var(--ld-ink) 68%);
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .7), 0 .5px 0 rgba(255, 255, 255, .8);
}
/* wild 1: a larger red pip with a brass ring */
.ld-die.ld-one i.p {
  width: 118%; height: 118%;
  background: radial-gradient(circle at 38% 32%, #e2555f, var(--card-red) 60%, #8f1d27);
  box-shadow: 0 0 0 calc(var(--size) * .03) var(--gold), inset 0 1px 1.5px rgba(0, 0, 0, .45);
}

.ld-die.ld-die-lg { --size: 50px; }
.ld-die.ld-die-sm { --size: 30px; box-shadow: inset -1px -2px 3px rgba(120, 96, 60, .28), inset 1px 1px 2px #fff, 0 2px 4px -1px rgba(0, 0, 0, .35); }
.ld-die.ld-die-xs { --size: 19px; border-radius: 22%; padding: 3px; box-shadow: inset -1px -1px 2px rgba(120, 96, 60, .3), 0 1px 2px rgba(0, 0, 0, .35); }
.ld-die.ld-die-btn { --size: 22px; padding: 3px; box-shadow: inset -1px -1px 2px rgba(120, 96, 60, .3), 0 1px 1px rgba(0, 0, 0, .25); }

/* roll: dice tumble into the tray at the start of a round */
.ld-slot.ld-roll { animation: ld-tumble .7s var(--ld-ease) var(--roll-delay, 0ms) both; }
@keyframes ld-tumble {
  0% { opacity: 0; transform: translate(var(--drift), -34px) rotate(var(--spin)) scale(.82); }
  55% { opacity: 1; transform: translate(0, 3px) rotate(calc(var(--spin) * -.06)) scale(1); }
  78% { transform: translateY(-2px) rotate(0); }
  100% { transform: none; }
}

/* reveal: Jev's dice spill out from under the cup */
.ld-slot.ld-spill { animation: ld-spill .55s var(--ld-ease) var(--in-delay, 0ms) both; }
@keyframes ld-spill { from { opacity: 0; transform: translateY(-10px) scale(.7) rotate(-40deg); } }

/* count: matching dice rise and glow, the rest recede */
.ld-die.ld-hl {
  translate: 0 -5px;
  box-shadow:
    0 0 0 2px var(--gold), 0 0 18px 2px color-mix(in srgb, var(--gold-2) 55%, transparent),
    inset -2px -3px 5px rgba(120, 96, 60, .25), 0 10px 14px -6px rgba(0, 0, 0, .6);
  animation: ld-hl .45s var(--ld-ease) var(--hl-delay, 0ms) both;
}
.ld-die.ld-hl-wild {
  box-shadow:
    0 0 0 2px #e2555f, 0 0 18px 2px rgba(226, 85, 95, .45),
    inset -2px -3px 5px rgba(120, 96, 60, .25), 0 10px 14px -6px rgba(0, 0, 0, .6);
}
@keyframes ld-hl { from { translate: 0 0; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, inset -2px -3px 5px rgba(120, 96, 60, .28), 0 7px 12px -5px rgba(0, 0, 0, .55); } }
.ld-die.ld-dim { filter: brightness(.58) saturate(.5) sepia(.15); animation: ld-dim .5s ease var(--hl-delay, 0ms) both; }
@keyframes ld-dim { from { filter: none; } }

/* the die that is lost */
.ld-slot.ld-lost { opacity: .12; transform: translateY(10px) scale(.78) rotate(-14deg); filter: grayscale(1); animation: ld-lose .8s ease-in var(--lost-delay, 0ms) both; }
.ld-slot.ld-spill.ld-lost { animation: ld-spill .55s var(--ld-ease) var(--in-delay, 0ms) both, ld-lose .8s ease-in var(--lost-delay, 0ms) both; }
@keyframes ld-lose { from { opacity: 1; transform: none; filter: none; } }

/* ------------------------------------------------------- Jev's seat ---- */
.ld-seat { position: relative; display: flex; justify-content: center; align-items: center; }
.ld-stage {
  position: relative;
  width: 100%;
  height: 124px;
  display: grid;
  place-items: center;
}
.ld-stage .ld-dice { position: relative; z-index: 1; }
.ld-cup {
  position: absolute; left: 50%; top: 2px; z-index: 2;
  width: 132px; margin-left: -66px;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45));
}
.ld-cup svg, .ld-cup-aside svg { display: block; width: 100%; height: auto; }
.ld-cup-shadow {
  position: absolute; left: 50%; top: 92px; width: 150px; height: 22px; margin-left: -75px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}
.ld-cup.ld-shake { animation: ld-shake .75s ease-in-out both; }
@keyframes ld-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-5px, -6px) rotate(-7deg); }
  32% { transform: translate(5px, -9px) rotate(6deg); }
  49% { transform: translate(-4px, -6px) rotate(-5deg); }
  66% { transform: translate(3px, -3px) rotate(3deg); }
  83% { transform: translateY(-1px) rotate(-1deg); }
}
.ld-cup.ld-lifted {
  opacity: 0; transform: translate(26px, -96px) rotate(14deg) scale(.96);
  animation: ld-lift .95s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes ld-lift {
  0% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: translate(4px, -26px) rotate(3deg); }
  100% { opacity: 0; transform: translate(26px, -96px) rotate(14deg) scale(.96); }
}
.ld-cup-shadow.ld-lifted { opacity: 0; transform: scale(1.4); animation: ld-shadow .8s ease both; }
@keyframes ld-shadow { from { opacity: 1; transform: none; } }

.ld-think {
  position: absolute; left: calc(50% + 78px); top: 44px;
  display: inline-flex; gap: 5px; padding: 7px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(236, 217, 166, .25);
}
.ld-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); animation: ld-dot 1.1s ease-in-out infinite; }
.ld-think i:nth-child(2) { animation-delay: .15s; }
.ld-think i:nth-child(3) { animation-delay: .3s; }
@keyframes ld-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ centre ---- */
.ld-center { display: grid; justify-items: center; gap: 12px; padding: 4px 0 6px; }

.ld-placard {
  position: relative;
  display: grid; justify-items: center; gap: 2px;
  min-width: 172px;
  padding: 10px 26px 12px;
  border-radius: 14px;
  background:
    var(--noise),
    linear-gradient(180deg, #3a2416, #1e120a);
  background-blend-mode: soft-light, normal;
  box-shadow:
    0 0 0 1px #7d5a21,
    0 0 0 2px var(--gold),
    inset 0 0 0 4px rgba(0, 0, 0, .25),
    inset 0 0 0 5px rgba(236, 217, 166, .28),
    0 14px 24px -12px rgba(0, 0, 0, .8);
  animation: ld-place .45s var(--ld-ease) both;
}
@keyframes ld-place { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
.ld-placard-cap {
  font-size: 10.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold-2) 80%, transparent);
}
.ld-placard-main { display: flex; align-items: center; gap: 12px; }
.ld-qty {
  font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, #fff6dc, var(--gold-2) 45%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ld-times { font-family: var(--font-display); font-size: 24px; color: var(--gold); opacity: .85; }
.ld-placard-empty {
  animation: none;
  min-height: 84px; place-content: center;
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 0 0 1px rgba(236, 217, 166, .3);
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: color-mix(in srgb, var(--gold-2) 85%, transparent);
}
.ld-seal {
  position: absolute; top: -12px; right: -18px;
  padding: 4px 11px 5px; border-radius: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: #fff4ea; transform: rotate(8deg);
  background: linear-gradient(180deg, #d9434f, var(--card-red) 60%, #8f1d27);
  box-shadow: 0 0 0 1px rgba(236, 217, 166, .7), 0 6px 12px -4px rgba(0, 0, 0, .6);
  animation: ld-stamp .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes ld-stamp { from { opacity: 0; transform: rotate(8deg) scale(1.8); } }

/* reveal tally: faces + wilds = total */
.ld-tally {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(236, 217, 166, .28);
  font-variant-numeric: tabular-nums; font-size: 14px;
  animation: ld-rise .45s var(--ld-ease) both;
}
.ld-tn { font-weight: 650; margin-left: -2px; }
.ld-op { color: color-mix(in srgb, var(--gold-2) 70%, transparent); }
.ld-tsum { font-family: var(--font-display); font-size: 20px; color: var(--gold-2); line-height: 1; }
.ld-tneed { font-size: 12px; color: rgba(243, 236, 220, .7); padding-left: 8px; border-left: 1px solid rgba(236, 217, 166, .3); }
@keyframes ld-rise { from { opacity: 0; transform: translateY(6px); } }

/* bid history timeline */
.ld-timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  max-width: 100%;
}
.ld-tl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(243, 236, 220, .78); }
.ld-tl-more { font-size: 11.5px; color: rgba(243, 236, 220, .55); letter-spacing: .04em; }
.ld-tl-who { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ld-tl-jev .ld-tl-who { color: var(--gold-2); opacity: .9; }
.ld-tl-bid { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .22); }
.ld-tl-x { opacity: .6; }
.ld-tl-now .ld-tl-bid { background: rgba(0, 0, 0, .36); box-shadow: inset 0 0 0 1px var(--gold); color: #fff6e3; }
.ld-tl .ld-die-xs { --size: 17px; }

/* ------------------------------------------------------- your seat ---- */
.ld-seat-you { gap: 18px; }
.ld-tray {
  position: relative;
  padding: 14px 20px;
  border-radius: 16px;
  background:
    var(--noise),
    linear-gradient(180deg, #24150c, #3b2415 60%, #2c1a0f);
  background-blend-mode: soft-light, normal;
  box-shadow:
    0 0 0 1px rgba(236, 217, 166, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 8px 16px rgba(0, 0, 0, .6),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 10px 20px -10px rgba(0, 0, 0, .6);
}
.ld-tray::before { /* stitching */
  content: ''; position: absolute; inset: 5px; border-radius: 12px; pointer-events: none;
  border: 1px dashed rgba(236, 217, 166, .28);
}
.ld-cup-aside { width: 70px; flex: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); rotate: 8deg; }

/* ------------------------------------------------------------ controls ---- */
.ld-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ld-prompt, .ld-callline { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); }
.ld-prompt.ld-waiting { color: var(--muted); font-style: italic; }
.ld-prompt.ld-waiting::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: ld-ellipsis 1.4s steps(4) infinite; }
@keyframes ld-ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.ld-callline { font-size: 15px; color: var(--muted); font-family: var(--font); font-weight: 550; }

.ld-picker {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 14px 30px; transition: opacity .25s;
}
.ld-picker.ld-disabled { opacity: .45; }
.ld-field { display: grid; gap: 8px; justify-items: center; }
.ld-label { font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ld-wildnote { letter-spacing: .06em; text-transform: none; font-weight: 550; }

.ld-stepper {
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.ld-step {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface); color: var(--text); font-size: 18px; line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--border);
  transition: transform .15s, opacity .2s;
}
.ld-step:hover:not(:disabled) { transform: scale(1.06); }
.ld-step:disabled { opacity: .35; cursor: not-allowed; }
.ld-stepval { min-width: 2.2ch; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }

.ld-faces { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ld-face {
  padding: 5px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; line-height: 0;
  transition: transform .15s var(--ld-ease), background .2s, box-shadow .2s;
}
.ld-face:hover:not(:disabled) { transform: translateY(-2px); }
.ld-face.on { background: var(--surface); box-shadow: 0 0 0 2px var(--gold), 0 4px 10px -4px rgba(0, 0, 0, .35); }
.ld-face:disabled { opacity: .28; cursor: not-allowed; }
.ld-face:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ld-hint { margin: -2px 0 0; min-height: 1.4em; font-size: 13px; color: var(--muted); }

.ld-btn-bid, .ld-btn-liar { min-width: 150px; letter-spacing: .01em; }
.ld-btn-bid {
  color: #2a1c06;
  background: linear-gradient(180deg, #f3e3b6, var(--gold) 62%, #a8843f);
  border-color: #9c7a38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -8px rgba(120, 88, 30, .8);
}
.ld-btn-liar {
  color: #fff6ee;
  background: linear-gradient(180deg, #dd4d58, var(--card-red) 60%, #9a2430);
  border-color: #8a1f2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px rgba(140, 30, 40, .8);
}
.ld-btn-bid .ld-die { margin-left: 2px; }

/* verdict banner */
.ld-verdict {
  position: relative;
  display: grid; justify-items: center; gap: 4px;
  width: min(100%, 460px);
  padding: 16px 20px 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: ld-rise .5s var(--ld-ease) both;
}
.ld-verdict-rule { width: 44px; height: 3px; border-radius: 3px; margin-bottom: 6px; background: var(--gold); }
.ld-verdict-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.ld-verdict-sub { font-weight: 650; font-size: 15px; }
.ld-verdict.ld-good .ld-verdict-sub { color: var(--good); }
.ld-verdict.ld-bad .ld-verdict-sub { color: var(--bad); }
.ld-verdict .btn-row { margin-top: 10px; }
.ld-final { display: grid; gap: 2px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; }
.ld-final b { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ld-final span { color: var(--muted); font-size: 14px; }

.ld-caption { margin: 0; text-align: center; font-size: 11.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* ------------------------------------------------------------ responsive ---- */
@media (max-width: 560px) {
  .ld-root { --ld-die: 38px; gap: 14px; }
  .ld-cup-aside { display: none; }
  .ld-dice { gap: 8px; }
  .ld-tray { padding: 12px 14px; }
  .ld-stage { height: 108px; }
  .ld-cup { width: 112px; margin-left: -56px; }
  .ld-cup-shadow { top: 78px; width: 128px; margin-left: -64px; }
  .ld-think { left: calc(50% + 64px); top: 36px; }
  .ld-qty { font-size: 38px; }
  .ld-die.ld-die-lg { --size: 44px; }
  .ld-placard { min-width: 150px; padding: 9px 20px 11px; }
  .ld-picker { gap: 12px; }
  .ld-prompt { font-size: 16.5px; }
}
@media (max-width: 400px) {
  .ld-root { --ld-die: 34px; }
  .ld-felt { padding: 14px 10px 16px; }
  .ld-mat { padding: 9px; border-radius: 22px; }
  .ld-mat::before { inset: 6px; border-radius: 17px; }
  .ld-dice { gap: 6px; }
  .ld-tray { padding: 10px; }
  .ld-faces { gap: 2px; }
  .ld-face { padding: 4px; }
  .ld-die.ld-die-sm { --size: 28px; }
  .ld-btn-bid, .ld-btn-liar { min-width: 0; flex: 1 1 130px; }
  .ld-verdict-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-root *, .ld-root *::before, .ld-root *::after {
    animation: none !important;
    transition: none !important;
  }
}