/* Heat-map sentinels (theme-independent: this is fairness data-viz) */
.ds {
    --ds-neutral: var(--border-strong); /* no data / perfectly even */
    --ds-empty: var(--faint);           /* a face never rolled */
}
.ds-intro { color: var(--muted); max-width: 60ch; margin: 8px 0 24px; }

/* Toolbar */
.ds-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.ds-reset {
    background: var(--accent-weak); color: var(--accent-strong);
    border: 1px solid var(--border-strong); border-radius: 10px;
    padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer;
    transition: border-color .2s, transform .15s;
}
.ds-reset:hover { border-color: var(--accent); }
.ds-reset:active { transform: scale(.97); }

/* Segmented toggle uses the shared .seg (base.css). */

/* Rows */
.ds-rows { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ds-row { display: grid; grid-template-columns: 44px auto 120px 1fr; align-items: center; gap: 10px; }
/* Mobile: keep everything on one line (bar is the flexible, can-be-narrow column)
   and compact the rows so all 1–20 fit on a single phone screen. */
@media (max-width: 560px) {
    .ds-intro { margin: 6px 0 14px; }
    .ds-toolbar { margin-bottom: 14px; gap: 8px; }
    .ds-rows { gap: 4px; }
    .ds-row { grid-template-columns: 26px auto 84px minmax(20px, 1fr); gap: 6px; }
    .ds-num { font-size: 13px; }
    .ds-btns { gap: 3px; }
    .ds-btns button { min-width: 28px; font-size: 12px; padding: 3px 5px; }
    .ds-count { font-size: 12px; }
    .ds-bar { height: 12px; }
}
.ds-num { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.ds-btns { display: inline-flex; gap: 3px; }
.ds-btns button {
    font: inherit; font-size: 13px; min-width: 34px; padding: 4px 6px;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: var(--surface); color: var(--text); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ds-btns button:hover { border-color: var(--accent); }
.ds-btns button:active { background: var(--accent-weak); }
.ds-count { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); white-space: nowrap; }
.ds-count b { color: var(--text); }

/* Diverging bar: a centre line, negative fills left, positive fills right */
.ds-bar { display: grid; grid-template-columns: 1fr 1fr; height: 14px;
    border-radius: 7px; overflow: hidden; background: var(--accent-weak);
    box-shadow: inset 1px 0 0 var(--border-strong); }
.ds-bar-neg { display: flex; justify-content: flex-end; }
.ds-bar-pos { display: flex; justify-content: flex-start; }
.ds-bar i { display: block; height: 100%; width: 0; background: var(--ds-neutral); transition: width .25s ease, background .25s ease; }

/* 3D die */
.ds-die-wrap { margin: 40px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ds-layout-note { font-size: 13px; color: var(--faint); text-align: center; max-width: 46ch; min-height: 1.2em; }

/* ---- ported from mc-web/css/layout.css 312–481 (see notes above for what was dropped) ---- */
.d20-3d-content { margin: auto; position: relative; width: 200px; height: 200px; perspective: 1500px; }
.die {
    position: absolute; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform 0.5s ease-out;
    cursor: grab; transform: rotateX(-53deg); touch-action: none;
}
.die:active { cursor: grabbing; }
.die .face {
    position: absolute; left: 50%; top: 0; margin: 0 -50px;
    border-left: 50px solid transparent; border-right: 50px solid transparent;
    /* Neutral "die material" grey - deliberately theme-independent (a UI border
       token would look washed-out in light mode). The controller overrides
       border-bottom-color per face with the heat-map colour. */
    border-bottom: 86px solid rgba(140, 140, 140, 0.75);
    width: 0; height: 0; transform-style: preserve-3d; backface-visibility: hidden;
}
.die .face b {
    position: absolute; top: 21.5px; left: -100px; width: 200px; height: 86px;
    /* White with a dark halo reads on the heat-mapped faces in both themes -
       intentionally theme-independent, not a token. */
    color: #fff; text-shadow: 0 0 4px #000; font-size: 43px; font-weight: 400;
    text-align: center; line-height: 77.4px; pointer-events: none;
}
.die .face:nth-child(1) {
    transform: rotateY(0deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
}
.die .face:nth-child(7) {
    transform: rotateY(-72deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
}
.die .face:nth-child(17) {
    transform: rotateY(-144deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
}
.die .face:nth-child(3) {
    transform: rotateY(-216deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
}
.die .face:nth-child(19) {
    transform: rotateY(-288deg) translateZ(33.5px) translateY(-12.9px) rotateX(53deg);
}
.die .face:nth-child(13) {
    transform: rotateY(360deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
}
.die .face:nth-child(15) {
    transform: rotateY(288deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
}
.die .face:nth-child(10) {
    transform: rotateY(216deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
}
.die .face:nth-child(16) {
    transform: rotateY(144deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
}
.die .face:nth-child(9) {
    transform: rotateY(72deg) translateZ(75px) translateY(54.18px) rotateZ(180deg) rotateX(-11deg);
}
.die .face:nth-child(12) {
    transform: rotateY(252deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
}
.die .face:nth-child(5) {
    transform: rotateY(324deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
}
.die .face:nth-child(11) {
    transform: rotateY(396deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
}
.die .face:nth-child(6) {
    transform: rotateY(468deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
}
.die .face:nth-child(8) {
    transform: rotateY(540deg) translateZ(75px) translateY(54.18px) rotateX(-11deg);
}
.die .face:nth-child(2) {
    transform: rotateY(-108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
}
.die .face:nth-child(18) {
    transform: rotateY(-36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
}
.die .face:nth-child(4) {
    transform: rotateY(36deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
}
.die .face:nth-child(14) {
    transform: rotateY(108deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
}
.die .face:nth-child(20) {
    transform: rotateY(180deg) translateZ(33.5px) translateY(121.26px) rotateZ(180deg) rotateX(53deg);
}