/* Gaming Bureau — peg drop engine (Pneumatic Post). Scoped to .bx-eng--drop. */

/* bureau.css gives a site-wide .bx-board a vertical margin; the stage needs none. */
.bx-eng--drop .bx-pp__board {
    margin: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 12px 16px 8px;
}

.bx-eng--drop .bx-pp__stage {
    width: min(100cqw - 170px, 100cqh * var(--ar, 1.2), 680px);
    aspect-ratio: var(--ar, 1.2);
    filter: drop-shadow(0 18px 26px rgba(5, 2, 10, .6));
}

.bx-eng--drop .bx-pp__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bx-eng--drop .bx-pp__glow {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.bx-eng--drop .bx-pp__cap,
.bx-eng--drop .bx-pp__body { will-change: transform; }

/* Trays: colour family plus the printed multiplier. */
.bx-eng--drop .bx-pp__slot {
    transform-box: fill-box;
    transform-origin: center;
}

.bx-eng--drop .bx-pp__tray { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.bx-eng--drop .bx-pp__slot--low .bx-pp__tray { fill: #3a2160; }
.bx-eng--drop .bx-pp__slot--mid .bx-pp__tray { fill: #128a6d; }
.bx-eng--drop .bx-pp__slot--coral .bx-pp__tray { fill: #d9493a; }
.bx-eng--drop .bx-pp__slot--amber .bx-pp__tray { fill: #e2862b; }
.bx-eng--drop .bx-pp__slot--gold .bx-pp__tray { fill: #f0bf4c; }

.bx-eng--drop .bx-pp__lit {
    fill: none;
    stroke: #fff2c4;
    stroke-width: 2.5;
    opacity: 0;
    transition: opacity .2s ease-out;
}

.bx-eng--drop .bx-pp__slot.is-on .bx-pp__lit { opacity: 1; }

.bx-eng--drop .bx-pp__lbl {
    font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -.02em;
    fill: #fbf4e6;
    paint-order: stroke;
    stroke: rgba(10, 4, 16, .45);
    stroke-width: 2px;
}

.bx-eng--drop .bx-pp__slot--low .bx-pp__lbl { fill: #cdbfe6; stroke-width: 0; }
.bx-eng--drop .bx-pp__slot--gold .bx-pp__lbl { fill: #2b1606; stroke: rgba(255, 246, 214, .6); }

/* Recent drops. */
.bx-eng--drop .bx-pp__side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 120px;
    padding: 12px;
    border: 1px solid rgba(245, 196, 81, .2);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(42, 20, 54, .78), rgba(18, 10, 26, .82));
    box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}

.bx-eng--drop .bx-pp__side-h {
    margin: 0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-muted, #b9aecb);
}

.bx-eng--drop .bx-pp__log {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bx-eng--drop .bx-pp__none { font-size: .8rem; color: var(--bx-muted, #b9aecb); }

.bx-eng--drop .bx-pp__chip {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: #fbf4e6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.bx-eng--drop .bx-pp__chip:first-child { outline: 1px solid rgba(255, 242, 196, .6); }
.bx-eng--drop .bx-pp__chip--low { background: #3a2160; color: #cdbfe6; }
.bx-eng--drop .bx-pp__chip--mid { background: #128a6d; }
.bx-eng--drop .bx-pp__chip--coral { background: #d9493a; }
.bx-eng--drop .bx-pp__chip--amber { background: #e2862b; }
.bx-eng--drop .bx-pp__chip--gold { background: #f0bf4c; color: #2b1606; }

.bx-eng--drop .bx-pp__board::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 50% 90%, rgba(245, 196, 81, .22), transparent 70%);
    opacity: 0;
    transition: opacity .25s ease-out;
    pointer-events: none;
}

.bx-eng--drop .bx-pp__board { position: relative; }
.bx-eng--drop .bx-pp__board.is-glow::after { opacity: 1; }

@container (max-width: 620px) {
    .bx-eng--drop .bx-pp__side { display: none; }
    .bx-eng--drop .bx-pp__stage { width: min(100cqw, 100cqh * var(--ar, 1.2)); }
}

@media (max-width: 560px) {
    .bx-eng--drop .bx-deck { gap: 8px 10px; }
    .bx-eng--drop .bx-deck .bx-seg { order: -1; flex-basis: 100%; justify-content: center; }
    .bx-eng--drop .bx-stake__label { display: none; }
    .bx-eng--drop .bx-pp__board { padding: 8px 6px 4px; }
}