/* Gaming Bureau — Treasure Drawers. Scoped under .bx-eng--drawers. */

.bx-eng--drawers .bx-board {
    margin: 0;
    position: relative;
    padding: 0;
    --dr-wood-hi: #4d2f5f;
    --dr-wood: #321d42;
    --dr-wood-lo: #1f1229;
    --dr-brass-hi: #ffe7a3;
    --dr-brass: #d9a441;
    --dr-brass-lo: #8a5f1c;
}

.bx-eng--drawers .bx-dr,
.bx-eng--drawers .bx-dr * { box-sizing: border-box; }

.bx-eng--drawers .bx-dr__fit {
    position: absolute;
    inset: 14px;
    display: grid;
    place-items: center;
    container-type: size;
}

.bx-eng--drawers .bx-dr__layout {
    --size: min(100cqh - 8px, 100cqw - 250px, 480px);
    display: grid;
    grid-template-columns: auto 200px;
    align-items: center;
    gap: 26px;
}

/* ------------------------------------------------------------ cabinet */

.bx-eng--drawers .bx-dr__cabinet {
    position: relative;
    width: var(--size);
    height: var(--size);
    padding: calc(var(--size) * .055);
    border-radius: calc(var(--size) * .045);
    background:
        repeating-linear-gradient(97deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
        radial-gradient(120% 80% at 30% 0%, var(--dr-wood-hi), var(--dr-wood) 55%, var(--dr-wood-lo));
    box-shadow:
        inset 0 0 0 2px rgba(245, 196, 81, .55),
        inset 0 0 0 7px rgba(18, 13, 28, .55),
        inset 0 0 0 8px rgba(245, 196, 81, .22),
        inset 0 2px 0 9px rgba(255, 255, 255, .06),
        0 30px 60px -24px rgba(0, 0, 0, .85),
        0 0 0 1px rgba(0, 0, 0, .5);
}

.bx-eng--drawers .bx-dr__cabinet::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, .7), 0 0 48px 6px rgba(245, 196, 81, .45);
    opacity: 0;
    pointer-events: none;
}

.bx-eng--drawers .bx-dr--glow .bx-dr__cabinet::after {
    animation: bx-dr-glow 1.1s ease-out both;
}

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

.bx-eng--drawers .bx-dr__crest {
    position: absolute;
    top: calc(var(--size) * -.018);
    left: 50%;
    width: calc(var(--size) * .11);
    height: calc(var(--size) * .036);
    transform: translateX(-50%);
    border-radius: 0 0 999px 999px;
    background: linear-gradient(180deg, var(--dr-brass-hi), var(--dr-brass) 60%, var(--dr-brass-lo));
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

.bx-eng--drawers .bx-dr__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), 1fr);
    gap: calc(var(--size) * .022);
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------ drawer */

.bx-eng--drawers .bx-dr__drawer {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--size) * .02);
    font: inherit;
    color: inherit;
    background:
        radial-gradient(90% 90% at 50% 40%, #2b1a3a, #0e0816 80%);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .6);
    perspective: 320px;
    cursor: pointer;
}

.bx-eng--drawers .bx-dr__drawer:disabled { cursor: default; }

.bx-eng--drawers .bx-dr__front {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #5e3c72, #432a56 55%, #2f1d3e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        inset 0 0 0 1px rgba(245, 196, 81, .16),
        0 3px 5px rgba(0, 0, 0, .45);
    transform-origin: 50% 100%;
    transition: transform .26s ease-out, opacity .22s ease-out;
}

.bx-eng--drawers .bx-dr__front::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(63, 224, 176, .7), 0 0 14px rgba(63, 224, 176, .35);
    opacity: 0;
    transition: opacity .15s ease-out;
}

.bx-eng--drawers .bx-dr__plate {
    position: absolute;
    top: 15%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 46%;
    height: 24%;
    transform: translateX(-50%);
    border-radius: 3px;
    font-size: calc(var(--size) * .026);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #3a2347;
    background: linear-gradient(180deg, #fff6dc, #e6d2a6);
    box-shadow: 0 0 0 1.5px var(--dr-brass), 0 0 0 2.5px var(--dr-brass-lo), 0 2px 3px rgba(0, 0, 0, .4);
}

.bx-eng--drawers .bx-dr__pull {
    position: absolute;
    bottom: 17%;
    left: 50%;
    width: 44%;
    height: 15%;
    transform: translateX(-50%);
    border-radius: 3px 3px 999px 999px;
    background: linear-gradient(180deg, var(--dr-brass-hi), var(--dr-brass) 45%, var(--dr-brass-lo));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 4px rgba(0, 0, 0, .5);
}

.bx-eng--drawers .bx-dr__drawer:not(:disabled):hover .bx-dr__front {
    transform: translateY(-2px) scale(1.03);
}

.bx-eng--drawers .bx-dr__drawer:not(:disabled):hover .bx-dr__front::after,
.bx-eng--drawers .bx-dr__drawer:focus-visible .bx-dr__front::after {
    opacity: 1;
}

.bx-eng--drawers .bx-dr__drawer:not(:disabled):active .bx-dr__front {
    transform: scale(.97);
}

.bx-eng--drawers .bx-dr__inside {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12%;
    border-radius: inherit;
}

.bx-eng--drawers .bx-dr__inside > * {
    width: 100%;
    height: 100%;
    animation: bx-dr-pop .28s ease-out .06s both;
}

.bx-eng--drawers .bx-dr__img {
    object-fit: contain;
    user-select: none;
}

.bx-eng--drawers .bx-dr__svg {
    display: block;
}

.bx-eng--drawers .bx-dr__svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes bx-dr-pop {
    from { opacity: 0; transform: scale(.7) translateY(8%); }
    to { opacity: 1; transform: none; }
}

/* Opened drawers: the front drops forward on its bottom edge. */
.bx-eng--drawers .bx-dr__drawer[data-state] .bx-dr__front {
    transform: rotateX(-64deg) translateY(6%);
    opacity: 0;
}

.bx-eng--drawers .bx-dr__drawer[data-state="gem"] {
    background: radial-gradient(80% 80% at 50% 45%, rgba(63, 224, 176, .45), #0f2a26 60%, #0a0912);
    box-shadow: inset 0 0 0 2px rgba(63, 224, 176, .75), inset 0 3px 10px rgba(0, 0, 0, .6), 0 0 18px -4px rgba(63, 224, 176, .6);
}

.bx-eng--drawers .bx-dr__drawer[data-state="blot"] {
    background: radial-gradient(80% 80% at 50% 45%, rgba(255, 107, 87, .5), #2e1016 60%, #0a0912);
    box-shadow: inset 0 0 0 2px rgba(255, 107, 87, .85), inset 0 3px 10px rgba(0, 0, 0, .6), 0 0 18px -4px rgba(255, 107, 87, .6);
}

/* Blots shown plainly after the round. */
.bx-eng--drawers .bx-dr__drawer[data-state="shown"] {
    background: radial-gradient(80% 80% at 50% 45%, rgba(255, 107, 87, .16), #120b19 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 87, .45), inset 0 3px 8px rgba(0, 0, 0, .7);
}

.bx-eng--drawers .bx-dr__drawer[data-state="shown"] .bx-dr__front {
    transform: none;
    opacity: 0;
}

.bx-eng--drawers .bx-dr__drawer[data-state="shown"] .bx-dr__inside {
    padding: 22%;
    opacity: .75;
}

.bx-eng--drawers .bx-dr__drawer[data-state="shown"] .bx-dr__inside > * {
    animation: none;
}

/* ------------------------------------------------------------ meter */

.bx-eng--drawers .bx-dr__meter {
    display: grid;
    gap: 12px;
}

.bx-eng--drawers .bx-dr__read {
    display: grid;
    gap: 2px;
    padding: 12px 16px 13px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 60%),
        rgba(23, 15, 34, .78);
    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--drawers .bx-dr__lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-eng--drawers .bx-dr__val {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

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

.bx-eng--drawers .bx-dr__read--now .bx-dr__val {
    color: var(--bx-gold);
    text-shadow: 0 0 18px rgba(245, 196, 81, .35);
}

.bx-eng--drawers .bx-dr__read--next .bx-dr__val { color: var(--bx-jade); }

.bx-eng--drawers .bx-dr[data-hot="yes"] .bx-dr__read--now {
    box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .6), inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 30px -14px rgba(245, 196, 81, .45);
}

/* ------------------------------------------------------------ deck */

.bx-eng--drawers .bx-play.bx-dr__collect:not(:disabled) {
    color: #2a1a05;
    background: linear-gradient(180deg, #ffe39a, var(--bx-gold));
    box-shadow: 0 10px 24px -10px rgba(245, 196, 81, .75), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------ narrow stage */

@container (max-width: 620px) {
    .bx-eng--drawers .bx-dr__layout {
        --size: min(100cqw - 4px, 100cqh - 82px, 480px);
        grid-template-columns: auto;
        justify-items: center;
        gap: 10px;
    }

    .bx-eng--drawers .bx-dr__meter {
        order: -1;
        width: min(100%, 420px);
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .bx-eng--drawers .bx-dr__read {
        padding: 6px 8px 7px;
        border-radius: 10px;
        text-align: center;
    }

    .bx-eng--drawers .bx-dr__lbl { font-size: .6rem; letter-spacing: .06em; }
    .bx-eng--drawers .bx-dr__val { font-size: 1.05rem; }
    .bx-eng--drawers .bx-dr__note { font-size: .66rem; }
}

@media (max-width: 560px) {
    .bx-eng--drawers .bx-dr__fit { inset: 8px; }
    .bx-eng--drawers .bx-stake__label,
    .bx-eng--drawers .bx-seg__label { display: none; }
    .bx-eng--drawers .bx-seg__opt { padding: 0 13px; }
}

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