/* Gaming Bureau — Hi-Lo ladder. Scoped under .bx-eng--hilo. */

.bx-eng--hilo .bx-hl,
.bx-eng--hilo .bx-hl * { box-sizing: border-box; }

.bx-eng--hilo .bx-board {
    margin: 0;
    padding: 14px 16px;
    --cw: 132px;
}

.bx-eng--hilo .bx-hl__fit {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(100%, 720px);
}

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

.bx-eng--hilo .bx-hl__meter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: min(100%, 470px);
}

.bx-eng--hilo .bx-hl__read {
    display: grid;
    gap: 1px;
    padding: 10px 16px 11px;
    border-radius: 14px;
    text-align: center;
    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--hilo .bx-hl__lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-eng--hilo .bx-hl__val {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

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

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

/* ------------------------------------------------------------ table */

.bx-eng--hilo .bx-hl__table {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 30px;
}

.bx-eng--hilo .bx-hl__shoe {
    position: relative;
    width: calc(var(--cw) * .78);
    aspect-ratio: 5 / 7;
}

.bx-eng--hilo .bx-hl__back--stack {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--cw) * .07);
}

.bx-eng--hilo .bx-hl__back--stack:nth-child(1) { transform: translate(-6px, 6px); filter: brightness(.6); }
.bx-eng--hilo .bx-hl__back--stack:nth-child(2) { transform: translate(-3px, 3px); filter: brightness(.8); }

.bx-eng--hilo .bx-hl__left {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #2a1a05;
    background: linear-gradient(180deg, #ffe39a, var(--bx-gold));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}

.bx-eng--hilo .bx-hl__slot {
    position: relative;
    width: var(--cw);
    aspect-ratio: 5 / 7;
    perspective: 900px;
}

.bx-eng--hilo .bx-hl__slot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: calc(var(--cw) * .1);
    box-shadow: 0 0 0 2px rgba(245, 196, 81, .85), 0 0 44px 6px rgba(245, 196, 81, .5);
    opacity: 0;
    pointer-events: none;
}

.bx-eng--hilo .bx-hl--glow .bx-hl__slot::after { animation: bx-hl-glow 1.1s ease-out both; }

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

/* ------------------------------------------------------------ cards */

.bx-eng--hilo .bx-hl__card {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: calc(var(--cw) * .08);
    transform-style: preserve-3d;
}

.bx-eng--hilo .bx-hl__front,
.bx-eng--hilo .bx-hl__back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backface-visibility: hidden;
}

.bx-eng--hilo .bx-hl__front {
    overflow: hidden;
    background: linear-gradient(160deg, #fffdf8 0%, #f6eedd 55%, #eadcc1 100%);
    box-shadow:
        inset 0 0 0 1px rgba(60, 35, 10, .12),
        0 18px 34px -14px rgba(0, 0, 0, .85),
        0 2px 5px rgba(0, 0, 0, .45);
}

.bx-eng--hilo .bx-hl__front::before {
    content: "";
    position: absolute;
    inset: 4.5%;
    border: 1px solid rgba(190, 145, 55, .45);
    border-radius: calc(var(--cw) * .05);
}

.bx-eng--hilo .bx-hl__front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 38%);
    opacity: .55;
    pointer-events: none;
}

.bx-eng--hilo .bx-hl__card > .bx-hl__back { transform: rotateY(180deg); }
.bx-eng--hilo .bx-hl__card--idle > .bx-hl__back { transform: none; }

.bx-eng--hilo .bx-hl__back {
    background:
        radial-gradient(circle at 50% 50%, #ffe39a 0 6%, var(--bx-gold) 6.5% 9%, transparent 9.5%),
        radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(245, 196, 81, .55) 15.5% 16.5%, transparent 17%),
        repeating-linear-gradient(45deg, rgba(245, 196, 81, .2) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(-45deg, rgba(245, 196, 81, .2) 0 1px, transparent 1px 8px),
        linear-gradient(160deg, #61347c, #2e1743);
    box-shadow:
        inset 0 0 0 calc(var(--cw) * .045) #2a1438,
        inset 0 0 0 calc(var(--cw) * .045 + 1.5px) rgba(245, 196, 81, .7),
        0 16px 30px -14px rgba(0, 0, 0, .85),
        0 2px 5px rgba(0, 0, 0, .45);
}

.bx-eng--hilo .bx-hl__card.is-red { color: #cf2f45; }
.bx-eng--hilo .bx-hl__card.is-black { color: #2a1d3a; }

.bx-eng--hilo .bx-hl__idx {
    position: absolute;
    top: 6%;
    left: 8%;
    display: grid;
    justify-items: center;
    gap: 2px;
    line-height: 1;
}

.bx-eng--hilo .bx-hl__idx b {
    font-size: calc(var(--cw) * .18);
    font-weight: 800;
    letter-spacing: -.04em;
}

.bx-eng--hilo .bx-hl__idx--br {
    top: auto;
    left: auto;
    right: 8%;
    bottom: 6%;
    transform: rotate(180deg);
}

.bx-eng--hilo .bx-hl__pip,
.bx-eng--hilo .bx-hl__big {
    display: block;
}

.bx-eng--hilo .bx-hl__pip { width: calc(var(--cw) * .12); }

.bx-eng--hilo .bx-hl__pip svg,
.bx-eng--hilo .bx-hl__big svg {
    display: block;
    width: 100%;
    height: auto;
}

.bx-eng--hilo .bx-hl__big {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
}

.bx-eng--hilo .bx-hl__big--ace { width: 56%; }

.bx-eng--hilo .bx-hl__court {
    position: absolute;
    inset: 24% 21%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: calc(var(--cw) * .04);
    background:
        repeating-linear-gradient(45deg, rgba(190, 145, 55, .12) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #fff8e8, #f0dfba);
    box-shadow: inset 0 0 0 1.5px rgba(190, 145, 55, .8), inset 0 0 0 4px rgba(255, 250, 238, .9), inset 0 0 0 5px rgba(190, 145, 55, .45);
}

.bx-eng--hilo .bx-hl__court b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(var(--cw) * .34);
    font-weight: 700;
    line-height: 1;
}

.bx-eng--hilo .bx-hl__card.is-dealt { animation: bx-hl-deal .32s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes bx-hl-deal {
    from { transform: translateX(calc(var(--cw) * -1.2)) rotateY(-180deg); }
    to { transform: none; }
}

.bx-eng--hilo .bx-hl__card.is-wrong .bx-hl__front {
    box-shadow:
        inset 0 0 0 3px var(--bx-coral),
        0 0 26px -4px rgba(255, 107, 87, .7),
        0 18px 34px -14px rgba(0, 0, 0, .85);
}

/* ------------------------------------------------------------ calls */

.bx-eng--hilo .bx-hl__calls {
    display: grid;
    gap: 10px;
}

.bx-eng--hilo .bx-hl__call {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    min-height: 66px;
    padding: 0 18px 0 12px;
    border: 0;
    border-radius: 18px;
    font: inherit;
    text-align: left;
    color: var(--bx-ink);
    cursor: pointer;
    transition: transform .14s ease-out, opacity .15s ease-out;
}

.bx-eng--hilo .bx-hl__call--higher {
    background: linear-gradient(180deg, rgba(63, 224, 176, .26), rgba(63, 224, 176, .07));
    box-shadow: inset 0 0 0 1px rgba(63, 224, 176, .6), inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 24px -14px rgba(63, 224, 176, .7);
}

.bx-eng--hilo .bx-hl__call--lower {
    background: linear-gradient(180deg, rgba(255, 107, 87, .26), rgba(255, 107, 87, .07));
    box-shadow: inset 0 0 0 1px rgba(255, 107, 87, .6), inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 24px -14px rgba(255, 107, 87, .7);
}

.bx-eng--hilo .bx-hl__calli {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #160e20;
}

.bx-eng--hilo .bx-hl__call--higher .bx-hl__calli { background: linear-gradient(180deg, #8ff5d6, var(--bx-jade)); }
.bx-eng--hilo .bx-hl__call--lower .bx-hl__calli { background: linear-gradient(180deg, #ffa494, var(--bx-coral)); }

.bx-eng--hilo .bx-hl__calltxt {
    display: grid;
    line-height: 1.2;
}

.bx-eng--hilo .bx-hl__calltxt b { font-size: 1.08rem; font-weight: 800; }

.bx-eng--hilo .bx-hl__callsub {
    font-size: .82rem;
    font-weight: 700;
    color: var(--bx-muted);
    font-variant-numeric: tabular-nums;
}

.bx-eng--hilo .bx-hl__call:not(:disabled) .bx-hl__callsub { color: var(--bx-ink); }
.bx-eng--hilo .bx-hl__call:hover:not(:disabled) { transform: translateY(-2px); }
.bx-eng--hilo .bx-hl__call:active:not(:disabled) { transform: scale(.97); }
.bx-eng--hilo .bx-hl__call:disabled { opacity: .42; cursor: default; }

.bx-eng--hilo .bx-hl__skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bx-muted);
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.bx-eng--hilo .bx-hl__skip .bx-i svg { width: 16px; height: 16px; }
.bx-eng--hilo .bx-hl__skip:hover:not(:disabled) { background: rgba(243, 236, 223, .08); color: var(--bx-ink); }
.bx-eng--hilo .bx-hl__skip:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ trail */

.bx-eng--hilo .bx-hl__trail {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    min-height: calc(42px * 1.4 + 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bx-eng--hilo .bx-hl__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    animation: bx-hl-step .22s ease-out both;
}

.bx-eng--hilo .bx-hl__card--mini {
    --cw: 42px;
    position: relative;
    width: 42px;
    height: calc(42px * 1.4);
}

.bx-eng--hilo .bx-hl__card--mini .bx-hl__idx--br,
.bx-eng--hilo .bx-hl__card--mini .bx-hl__court,
.bx-eng--hilo .bx-hl__card--mini .bx-hl__big { display: none; }

.bx-eng--hilo .bx-hl__card--mini .bx-hl__idx { top: 10%; left: 50%; transform: translateX(-50%); }
.bx-eng--hilo .bx-hl__card--mini .bx-hl__idx b { font-size: 15px; }
.bx-eng--hilo .bx-hl__card--mini .bx-hl__pip { width: 14px; }
.bx-eng--hilo .bx-hl__card--mini .bx-hl__front { box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .8); }

.bx-eng--hilo .bx-hl__step::after {
    min-width: 22px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #160e20;
}

.bx-eng--hilo .bx-hl__step[data-mark="higher"]::after { content: "\25B2"; background: var(--bx-jade); }
.bx-eng--hilo .bx-hl__step[data-mark="lower"]::after { content: "\25BC"; background: var(--bx-jade); }
.bx-eng--hilo .bx-hl__step[data-mark="push"]::after { content: "="; background: var(--bx-gold); }
.bx-eng--hilo .bx-hl__step[data-mark="fresh"]::after { content: "new"; color: var(--bx-ink); background: rgba(243, 236, 223, .14); }
.bx-eng--hilo .bx-hl__step[data-mark="start"]::after { content: "1st"; color: var(--bx-muted); background: rgba(243, 236, 223, .08); }
.bx-eng--hilo .bx-hl__step[data-skipped] .bx-hl__card--mini { opacity: .45; }
.bx-eng--hilo .bx-hl__step[data-skipped]::before {
    content: "";
    position: absolute;
    top: 21px;
    left: -3px;
    right: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--bx-muted);
    transform: rotate(-24deg);
}

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

/* ------------------------------------------------------------ gold collect */

.bx-eng--hilo .bx-play.bx-hl__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);
}

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

@media (max-width: 560px) {
    .bx-eng--hilo .bx-board { padding: 10px 8px; --cw: 100px; }
    .bx-eng--hilo .bx-hl__fit { gap: 12px; }
    .bx-eng--hilo .bx-hl__read { padding: 7px 10px 8px; border-radius: 11px; }
    .bx-eng--hilo .bx-hl__lbl { font-size: .6rem; }
    .bx-eng--hilo .bx-hl__val { font-size: 1.2rem; }
    .bx-eng--hilo .bx-hl__note { font-size: .7rem; }
    .bx-eng--hilo .bx-hl__table { gap: 14px; }
    .bx-eng--hilo .bx-hl__shoe { width: calc(var(--cw) * .55); }
    .bx-eng--hilo .bx-hl__left { bottom: -12px; padding: 1px 7px; font-size: .66rem; }
    .bx-eng--hilo .bx-hl__calls { gap: 8px; }
    .bx-eng--hilo .bx-hl__call { min-width: 138px; min-height: 54px; gap: 8px; padding: 0 10px 0 8px; border-radius: 14px; }
    .bx-eng--hilo .bx-hl__calli { width: 32px; height: 32px; }
    .bx-eng--hilo .bx-hl__calltxt b { font-size: .95rem; }
    .bx-eng--hilo .bx-hl__callsub { font-size: .74rem; }
    .bx-eng--hilo .bx-hl__trail { gap: 5px; }
    .bx-eng--hilo .bx-hl__step:nth-last-child(n + 7) { display: none; }
    .bx-eng--hilo .bx-stake__label { display: none; }
    .bx-eng--hilo .bx-play { min-width: 0; padding: 0 22px; }
}

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