/* Gaming Bureau — two-dice table. Scoped under .bx-eng--dice. */

.bx-eng--dice .bx-dd,
.bx-eng--dice .bx-dd * { box-sizing: border-box; }

.bx-eng--dice .bx-board {
    margin: 0;
    padding: 14px 16px;
    --d: 98px;
}

.bx-eng--dice .bx-dd__fit {
    display: grid;
    gap: 14px;
    width: min(100%, 640px);
}

/* ------------------------------------------------------------ head */

.bx-eng--dice .bx-dd__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.bx-eng--dice .bx-dd__card {
    display: grid;
    gap: 1px;
    padding: 10px 16px 11px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 60%),
        rgba(23, 15, 34, .8);
    box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .22), inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 26px -16px rgba(0, 0, 0, .9);
}

.bx-eng--dice .bx-dd__card--last {
    min-width: 132px;
    text-align: center;
}

.bx-eng--dice .bx-dd__lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-eng--dice .bx-dd__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.bx-eng--dice .bx-dd__callname {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
}

.bx-eng--dice .bx-dd__pay {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bx-jade);
    font-variant-numeric: tabular-nums;
}

.bx-eng--dice .bx-dd__sum {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--bx-gold);
    font-variant-numeric: tabular-nums;
}

.bx-eng--dice .bx-dd__note {
    font-size: .78rem;
    color: var(--bx-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ tray */

.bx-eng--dice .bx-dd__tray {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--d) * .7);
    height: calc(var(--d) * 2.3);
    border-radius: 22px;
    background: linear-gradient(180deg, #6b4a2a, #3e2615);
    padding: 9px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 231, 163, .35),
        inset 0 2px 0 rgba(255, 255, 255, .18),
        0 0 0 1px rgba(0, 0, 0, .55),
        0 28px 50px -22px rgba(0, 0, 0, .9);
}

.bx-eng--dice .bx-dd__felt {
    position: absolute;
    inset: 9px;
    border-radius: 15px;
    background:
        radial-gradient(70% 90% at 50% 40%, rgba(255, 255, 255, .07), transparent 70%),
        repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #3a1f4c, #24132f);
    box-shadow: inset 0 0 0 2px rgba(245, 196, 81, .45), inset 0 10px 30px rgba(0, 0, 0, .65);
}

.bx-eng--dice .bx-dd__felt::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, .8), 0 0 40px 4px rgba(245, 196, 81, .45);
    opacity: 0;
}

.bx-eng--dice .bx-dd--glow .bx-dd__felt::after {
    animation: bx-dd-glow 1.1s ease-out both;
}

@keyframes bx-dd-glow {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------ dice */

.bx-eng--dice .bx-dd__die {
    position: relative;
    width: var(--d);
    height: var(--d);
    perspective: 700px;
    transition: transform .9s cubic-bezier(.2, .8, .25, 1);
}

.bx-eng--dice .bx-dd__shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -12%;
    height: 26%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent);
}

.bx-eng--dice .bx-dd__lift,
.bx-eng--dice .bx-dd__cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.bx-eng--dice .bx-dd__cube {
    transition: transform 1s cubic-bezier(.15, .75, .25, 1);
}

.bx-eng--dice .bx-dd__face,
.bx-eng--dice .bx-dd__core {
    position: absolute;
    inset: 0;
    border-radius: 17%;
}

.bx-eng--dice .bx-dd__face {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    padding: 15%;
    backface-visibility: hidden;
    background:
        radial-gradient(120% 90% at 28% 18%, var(--hi) 0%, var(--base) 48%, var(--lo) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .28),
        inset 0 -7px 14px rgba(0, 0, 0, .28),
        inset 0 5px 10px rgba(255, 255, 255, .22);
}

.bx-eng--dice .bx-dd__face::after {
    content: "";
    position: absolute;
    top: 6%;
    left: 10%;
    width: 55%;
    height: 32%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    opacity: .55;
    pointer-events: none;
}

.bx-eng--dice .bx-dd__core { background: var(--lo); inset: 3%; }
.bx-eng--dice .bx-dd__core--x { transform: rotateY(90deg); }
.bx-eng--dice .bx-dd__core--y { transform: rotateX(90deg); }

.bx-eng--dice .bx-dd__face--1 { transform: translateZ(calc(var(--d) / 2)); }
.bx-eng--dice .bx-dd__face--6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.bx-eng--dice .bx-dd__face--2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.bx-eng--dice .bx-dd__face--5 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.bx-eng--dice .bx-dd__face--3 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.bx-eng--dice .bx-dd__face--4 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }

.bx-eng--dice .bx-dd__die--coral { --hi: #ffb9a6; --base: #f2553f; --lo: #8e1f2c; }
.bx-eng--dice .bx-dd__die--jade { --hi: #b8ffe8; --base: #24c497; --lo: #0a5e4b; }

.bx-eng--dice .bx-dd__pip {
    place-self: center;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffffff, #f3ecdf 45%, #c9bba2);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .35);
}

/* The toss: a short hop while the cube turns. */
.bx-eng--dice .bx-dd--toss .bx-dd__lift { animation: bx-dd-hop 1s cubic-bezier(.3, .6, .3, 1) both; }
.bx-eng--dice .bx-dd--toss .bx-dd__shadow { animation: bx-dd-shade 1s cubic-bezier(.3, .6, .3, 1) both; }
.bx-eng--dice .bx-dd--toss .bx-dd__die--jade .bx-dd__lift,
.bx-eng--dice .bx-dd--toss .bx-dd__die--jade .bx-dd__shadow { animation-delay: .05s; }

@keyframes bx-dd-hop {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-34%) scale(1.1); }
    62% { transform: translateY(0) scale(1); }
    76% { transform: translateY(-8%) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes bx-dd-shade {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(.6); opacity: .45; }
    62% { transform: scale(1); opacity: 1; }
    76% { transform: scale(.9); opacity: .85; }
    100% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------ totals rail */

.bx-eng--dice .bx-dd__rail {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 5px;
}

.bx-eng--dice .bx-dd__cell {
    position: relative;
    display: grid;
    grid-template-rows: 30px auto;
    align-items: end;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 58px;
    padding: 6px 2px 5px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    color: var(--bx-muted);
    background: rgba(243, 236, 223, .05);
    box-shadow: inset 0 0 0 1px var(--bx-line);
    cursor: pointer;
    transition: background-color .15s ease-out, transform .12s ease-out;
}

.bx-eng--dice .bx-dd__cell:hover:not(:disabled) { background: rgba(243, 236, 223, .11); }
.bx-eng--dice .bx-dd__cell:active:not(:disabled) { transform: scale(.95); }
.bx-eng--dice .bx-dd__cell:disabled { cursor: default; }

.bx-eng--dice .bx-dd__bar {
    width: 58%;
    height: calc(var(--w) * 100%);
    border-radius: 4px 4px 2px 2px;
    background: rgba(185, 174, 203, .35);
}

.bx-eng--dice .bx-dd__num {
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bx-eng--dice .bx-dd__cell[data-zone="yes"] {
    color: var(--bx-ink);
    background: rgba(63, 224, 176, .1);
    box-shadow: inset 0 0 0 1px rgba(63, 224, 176, .45);
}

.bx-eng--dice .bx-dd__cell[data-zone="yes"] .bx-dd__bar {
    background: linear-gradient(180deg, #8ff5d6, var(--bx-jade));
    box-shadow: 0 0 10px rgba(63, 224, 176, .45);
}

.bx-eng--dice .bx-dd__cell[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--bx-gold);
}

.bx-eng--dice .bx-dd__cell[data-hit]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    animation: bx-dd-pop .26s ease-out both;
}

.bx-eng--dice .bx-dd__cell[data-hit="land"]::after { box-shadow: 0 0 0 2px var(--bx-gold), 0 0 16px rgba(245, 196, 81, .55); }
.bx-eng--dice .bx-dd__cell[data-hit="miss"]::after { box-shadow: 0 0 0 2px var(--bx-coral); }

@keyframes bx-dd-pop {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ phones */

@media (max-width: 560px) {
    .bx-eng--dice .bx-board { padding: 10px 8px; --d: 60px; }
    .bx-eng--dice .bx-dd__fit { gap: 10px; }
    .bx-eng--dice .bx-dd__card { padding: 7px 10px 8px; border-radius: 11px; }
    .bx-eng--dice .bx-dd__card--last { min-width: 86px; }
    .bx-eng--dice .bx-dd__callname { font-size: 1.1rem; }
    .bx-eng--dice .bx-dd__pay { font-size: 1rem; }
    .bx-eng--dice .bx-dd__sum { font-size: 1.2rem; }
    .bx-eng--dice .bx-dd__note { font-size: .7rem; }
    .bx-eng--dice .bx-dd__lbl { font-size: .6rem; }
    .bx-eng--dice .bx-dd__tray { border-radius: 16px; }
    .bx-eng--dice .bx-dd__rail { gap: 3px; }
    .bx-eng--dice .bx-dd__cell { grid-template-rows: 20px auto; min-height: 44px; padding: 5px 0 4px; border-radius: 8px; }
    .bx-eng--dice .bx-dd__num { font-size: .8rem; }
    .bx-eng--dice .bx-stake__label,
    .bx-eng--dice .bx-seg__label { display: none; }
    .bx-eng--dice .bx-seg__opt { padding: 0 9px; font-size: .8rem; }
}

/* Animations off (ctx.motion false): nothing moves. */
.bx-eng--dice .bx-dd--still *,
.bx-eng--dice .bx-dd--still *::before,
.bx-eng--dice .bx-dd--still *::after {
    transition: none !important;
    animation: none !important;
}