/* Dice roller (wave 2, agent B) — spec §5.7. Uses the tokens of app.css / wheel.css (.lh-app scope).
   The dice are never mirrored in RTL (spec §9.9): the stage is dir="ltr". */

/* ---------- Layout: dice column + side column (≥ 768 px) ---------- */
.lh-dc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; }
.lh-dc-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lh-dc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 768px) { .lh-dc-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
@media (min-width: 1024px) { .lh-dc-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; } }
html:not(.js) .lh-tl-js, html:not(.js) .lh-step__b { display: none !important; }

/* ---------- Cards, history, stepper (same look as the coin tool) ---------- */
.lh-tl-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 16px; box-shadow: var(--lh-shadow-sm); }
.lh-tl-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.lh-tl-card__h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-tl-card__h { letter-spacing: 0; font-size: .875rem; }
.lh-tl-card__acts { display: inline-flex; gap: 2px; }
.lh-tl-card .lh-btn--sm.lh-btn--icon { width: 44px; min-width: 44px; min-height: 44px; }
.lh-tl-card .lh-set__row { padding-block: 6px; }
.lh-tl-hist { list-style: none; margin: 0; padding: 0 4px; block-size: 300px; overflow: auto; overscroll-behavior: contain; border-radius: 12px; }
.lh-tl-hist:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 2px; }
.lh-tl-hist__i { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 8px 2px; border-block-end: 1px solid var(--lh-border); }
.lh-tl-hist__i:last-child { border-block-end: 0; }
.lh-tl-hist__t { flex: none; color: var(--lh-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; direction: ltr; }
.lh-tl-hist__v { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; overflow-wrap: anywhere; }
.lh-tl-hist__v b { font-weight: 800; color: var(--lh-brand-soft-ink); }
.lh-tl-hist__v span { color: var(--lh-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.lh-tl-hist__v strong { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.lh-tl-hist__empty { display: grid; place-items: center; block-size: 100%; padding: 16px; color: var(--lh-muted); font-size: .9375rem; text-align: center; }
.lh-cn-count { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 10px; }
.lh-cn-count__l { font-weight: 650; font-size: .9375rem; }
.lh-tl-step .lh-step__b { inline-size: 48px; block-size: 48px; font-size: 1.25rem; }
.lh-tl-step .lh-num { inline-size: 64px; block-size: 48px; font-size: 1.0625rem; }
.lh-dc .lh-bar { justify-content: center; }
@media (min-width: 768px) { .lh-dc .lh-bar { max-inline-size: 360px; } }

/* ---------- Stage (fixed height: changing the number of dice never shifts the page) ---------- */
.lh-dc-stage {
  display: grid; place-items: center; inline-size: 100%; max-inline-size: 680px; block-size: 196px; padding: 8px; margin: 0;
  border: 0; border-radius: 24px; background: none; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (min-width: 768px) { .lh-dc-stage { block-size: 300px; } }
.lh-dc-stage:focus-visible { outline: 3px solid var(--lh-focus); outline-offset: 2px; }
.lh-dc-dice { --d: 112px; --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), var(--d)); gap: 12px; justify-content: center; align-content: center; }
.lh-dc-dice[data-n="1"] { --cols: 1; }
.lh-dc-dice[data-n="2"] { --cols: 2; }
.lh-dc-dice[data-n="3"] { --cols: 3; --d: 88px; }
.lh-dc-dice[data-n="4"] { --cols: 4; --d: 70px; }
.lh-dc-dice[data-n="5"], .lh-dc-dice[data-n="6"], .lh-dc-dice[data-n="7"], .lh-dc-dice[data-n="8"], .lh-dc-dice[data-n="9"], .lh-dc-dice[data-n="10"] { --cols: 5; --d: 54px; }
.lh-die { display: block; inline-size: var(--d); block-size: var(--d); }

/* d6: ivory cube with CSS pips (3 × 3 grid) */
.lh-die--6 {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; border-radius: 20%;
  background: linear-gradient(145deg, #FFFFFF, #F1EEE6); box-shadow: inset 0 -4px 0 rgba(20, 21, 26, .12), inset 0 0 0 1px rgba(20, 21, 26, .14), 0 6px 14px rgba(20, 21, 26, .18);
}
.lh-pip { place-self: center; inline-size: 76%; block-size: 76%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3A3D48, #14151A); visibility: hidden; }
.lh-die--6[data-v="1"] .lh-pip:nth-child(5),
.lh-die--6[data-v="2"] :is(.lh-pip:nth-child(3), .lh-pip:nth-child(7)),
.lh-die--6[data-v="3"] :is(.lh-pip:nth-child(3), .lh-pip:nth-child(5), .lh-pip:nth-child(7)),
.lh-die--6[data-v="4"] :is(.lh-pip:nth-child(1), .lh-pip:nth-child(3), .lh-pip:nth-child(7), .lh-pip:nth-child(9)),
.lh-die--6[data-v="5"] :is(.lh-pip:nth-child(1), .lh-pip:nth-child(3), .lh-pip:nth-child(5), .lh-pip:nth-child(7), .lh-pip:nth-child(9)),
.lh-die--6[data-v="6"] :is(.lh-pip:nth-child(1), .lh-pip:nth-child(3), .lh-pip:nth-child(4), .lh-pip:nth-child(6), .lh-pip:nth-child(7), .lh-pip:nth-child(9)) { visibility: visible; }
.lh-die--6[data-v="1"] .lh-pip:nth-child(5) { background: radial-gradient(circle at 40% 35%, #E0483F, #A91E1E); }

/* other dice: SVG polygon + number */
.lh-die--poly svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; filter: drop-shadow(0 5px 8px rgba(20, 21, 26, .22)); }
.lh-die--poly polygon { fill: var(--die); stroke: color-mix(in srgb, var(--die) 70%, #000000); stroke-width: 2.5; stroke-linejoin: round; }
.lh-die--poly path { fill: none; stroke: color-mix(in srgb, var(--die) 55%, #FFFFFF); stroke-width: 1.6; stroke-linejoin: round; opacity: .8; }
.lh-die--poly text { fill: var(--ink, #FFFFFF); font: 850 var(--fs, 30px)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-anchor: middle; dominant-baseline: central; letter-spacing: -.02em; }
.lh-die--poly text.is-3 { font-size: calc(var(--fs, 30px) * .8); }
.lh-dc-dice.is-small .lh-die--poly path { display: none; }
.lh-dc-dice.is-small .lh-die--poly text { font-size: 40px; }
.lh-dc-dice.is-small .lh-die--poly text.is-3 { font-size: 31px; }
.lh-dc-dice.is-small .lh-die--d4 text { font-size: 34px; }
.lh-die--d4 { --die: #C8372B; }
.lh-die--d8 { --die: #7E3BB5; }
.lh-die--d10 { --die: #0E7C79; }
.lh-die--d12 { --die: #F2A33A; --ink: #1B1407; }
.lh-die--d20 { --die: #5B3DF5; }
.lh-die--d100 { --die: #1E63D6; }

/* ---------- Result line (fixed height) ---------- */
.lh-dc-res { display: flex; align-items: center; justify-content: center; inline-size: 100%; max-inline-size: 560px; block-size: 92px; margin-block-start: 2px; overflow: hidden; text-align: center; }
.lh-dc-hint { margin: 0; color: var(--lh-muted); font-size: .9375rem; }
.lh-dc-hint--err { color: var(--lh-danger); font-weight: 650; }
.lh-dc-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; }
.lh-dc-expr { flex: 1 1 100%; }
.lh-dc-total { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 20px; border-radius: 999px; background: var(--lh-brand-soft); }
.lh-dc-total__k { color: var(--lh-muted); font-weight: 650; font-size: .9375rem; }
.lh-dc-total strong { font-size: 2rem; font-weight: 850; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lh-dc-expr { color: var(--lh-muted); font-weight: 650; font-size: .9375rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lh-dc-badge { padding: 3px 12px; border-radius: 999px; background: var(--lh-accent); color: #14151A; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.lh-dc-badge--low { background: var(--lh-surface-2); color: var(--lh-text); }
.lh-dc-out.is-pop .lh-dc-total { animation: lh-dc-pop .32s var(--lh-ease); }
@keyframes lh-dc-pop { 0% { transform: scale(.86); opacity: .4; } 60% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lh-dc-out.is-pop .lh-dc-total { animation: none; } }
.lh-reduced .lh-dc-out.is-pop .lh-dc-total { animation: none; }

/* ---------- Die type: 7 equal segments (fits 320 px) ---------- */
.lh-dc-types { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; inline-size: 100%; max-inline-size: 460px; margin: 6px 0 0; padding: 3px; border: 0; border-radius: 14px; background: var(--lh-surface-2); }
.lh-dc-type { position: relative; min-width: 0; }
.lh-dc-type input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lh-dc-type > span[dir] { display: grid; place-items: center; min-block-size: 46px; border-radius: 11px; color: var(--lh-muted); font-weight: 750; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.lh-dc-type input:checked + span { background: var(--lh-surface); color: var(--lh-text); box-shadow: var(--lh-shadow-sm), 0 0 0 1px var(--lh-border); }
.lh-dc-type input:focus-visible + span { outline: 2px solid var(--lh-focus); outline-offset: 1px; }
@media (max-width: 359.98px) { .lh-dc-type > span[dir] { font-size: .8125rem; } }

@media print { .lh-dc-side, .lh-dc .lh-bar, .lh-dc-types, .lh-cn-count { display: none !important; } }