/* Gaming Bureau — scratch card engine. Scoped to .bx-eng--scratch. */

.bx-eng--scratch [hidden] { display: none !important; }

.bx-eng--scratch .bx-deck .bx-btn2 { min-height: 56px; min-width: 168px; justify-content: center; padding: 0 24px; font-size: 1rem; }

/* bureau.css gives a site-wide .bx-board a vertical margin; the stage needs none. */
.bx-eng--scratch .bx-tkt__board {
    margin: 0;
    container-type: size;
    padding: 14px 16px 10px;
}

.bx-eng--scratch .bx-tkt__wrap {
    filter: drop-shadow(0 22px 26px rgba(5, 2, 10, .65)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}

/* The card. --cell sets the panel size from the board's free space. */
.bx-eng--scratch .bx-tkt {
    --cell: min(calc((100cqh - 112px) / 3), calc((100cqw - 300px) / 3), 132px);
    --gap: max(8px, calc(var(--cell) * .09));
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px 22px 22px;
    border-radius: 6px;
    color: #f8ecd2;
}

.bx-eng--scratch .bx-tkt::before,
.bx-eng--scratch .bx-tkt::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

/* Stamp tone: a deep plum stamp sheet with perforated edges and a gold frame. */
.bx-eng--scratch .bx-tkt--stamp {
    --r: 6px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 140, .16), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, #5a1f4f, #3a1238 55%, #26092a);
    -webkit-mask:
        radial-gradient(var(--r) at 50% 50%, #0000 96%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 3) calc(var(--r) * 3) round,
        linear-gradient(#000 0 0) 50% / calc(100% - var(--r) * 3) calc(100% - var(--r) * 3) no-repeat;
    mask:
        radial-gradient(var(--r) at 50% 50%, #0000 96%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 3) calc(var(--r) * 3) round,
        linear-gradient(#000 0 0) 50% / calc(100% - var(--r) * 3) calc(100% - var(--r) * 3) no-repeat;
}

.bx-eng--scratch .bx-tkt--stamp::before {
    inset: 12px;
    border: 2px solid rgba(245, 196, 81, .75);
    border-radius: 4px;
    box-shadow: inset 0 0 0 4px rgba(38, 9, 42, .9), inset 0 0 0 5px rgba(245, 196, 81, .35);
}

/* Sapphire tone: a cobalt card with a silver double rule and a faceted sheen. */
.bx-eng--scratch .bx-tkt--sapphire {
    border-radius: 18px;
    background:
        radial-gradient(90% 70% at 20% 0%, rgba(150, 190, 255, .25), transparent 60%),
        linear-gradient(165deg, #1d3b8f, #142a6a 50%, #0b1641);
    box-shadow: inset 0 1px 0 rgba(220, 232, 255, .4), inset 0 0 0 1px rgba(200, 215, 245, .3);
}

.bx-eng--scratch .bx-tkt--sapphire::before {
    inset: 8px;
    border: 1px solid rgba(214, 226, 250, .55);
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px rgba(11, 22, 65, .6), inset 0 0 0 4px rgba(214, 226, 250, .25);
}

.bx-eng--scratch .bx-tkt::after {
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, .8), 0 0 42px 8px rgba(245, 196, 81, .45);
    opacity: 0;
    transition: opacity .25s ease-out;
}

.bx-eng--scratch .bx-tkt.is-glow::after { opacity: 1; }

.bx-eng--scratch .bx-tkt__head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 6px 0;
}

.bx-eng--scratch .bx-tkt__name {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff3c9, #f5c451 55%, #c98f2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__name {
    background-image: linear-gradient(180deg, #ffffff, #cfdcf7 55%, #8fa4d4);
}

.bx-eng--scratch .bx-tkt__tag {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(248, 236, 210, .72);
}

.bx-eng--scratch .bx-tkt__body {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 18px;
}

.bx-eng--scratch .bx-tkt__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, var(--cell));
    grid-auto-rows: var(--cell);
    gap: var(--gap);
    padding: var(--gap);
    border-radius: 14px;
    background: rgba(12, 4, 16, .45);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 236, 190, .14);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.bx-eng--scratch.is-live .bx-tkt__grid,
.bx-eng--scratch .is-live .bx-tkt__grid {
    touch-action: none;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23f5c451' stroke='%237a4f17' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='8' fill='none' stroke='%23fff3c9' stroke-width='1.5' opacity='.8'/%3E%3C/svg%3E") 16 16, crosshair;
}

.bx-eng--scratch .bx-tkt__cell {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: inherit;
    font: inherit;
    color: inherit;
    transition: transform .2s ease-out, opacity .25s ease-out;
}

.bx-eng--scratch .bx-tkt--stamp .bx-tkt__cell {
    background:
        radial-gradient(80% 80% at 50% 40%, #fff8e8, #f1e2c2 70%, #e2cc9f);
    box-shadow: inset 0 0 0 1px rgba(122, 79, 23, .35);
}

.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__cell {
    background: radial-gradient(80% 80% at 50% 35%, #2a4cae, #13286a 65%, #0a1540);
    box-shadow: inset 0 0 0 1px rgba(200, 215, 245, .3);
}

.bx-eng--scratch .bx-tkt__pic {
    position: absolute;
    inset: 9%;
    display: grid;
    place-items: center;
}

.bx-eng--scratch .bx-tkt__pic .bx-sym--text { color: #3a1238; font-size: .8rem; }
.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__pic .bx-sym--text { color: #e7eeff; }

.bx-eng--scratch .bx-tkt__foil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: opacity .28s ease-out;
}

.bx-eng--scratch .bx-tkt__cell.is-open .bx-tkt__foil { opacity: 0; }

.bx-eng--scratch .bx-tkt__cell:disabled { cursor: default; }

.bx-eng--scratch .bx-tkt__cell.is-match {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px #f5c451, 0 0 22px 2px rgba(245, 196, 81, .55);
    z-index: 1;
}

.bx-eng--scratch .bx-tkt__cell.is-dim { opacity: .45; }

.bx-eng--scratch .bx-tkt__flake {
    position: absolute;
    width: 6px;
    height: 4px;
    margin: -2px 0 0 -3px;
    border-radius: 1px;
    background: linear-gradient(135deg, #fff6d6, #c8963f);
    pointer-events: none;
}

.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__flake { background: linear-gradient(135deg, #ffffff, #8f9ab4); }

/* Side paytable. */
.bx-eng--scratch .bx-tkt__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 168px;
}

.bx-eng--scratch .bx-tkt__side-h {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(248, 236, 210, .7);
}

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

.bx-eng--scratch .bx-tkt__pay {
    display: grid;
    grid-template-columns: 34px auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .1);
}

.bx-eng--scratch .bx-tkt__payimg {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
}

.bx-eng--scratch .bx-tkt__payimg .bx-sym--text { font-size: .55rem; }
.bx-eng--scratch .bx-tkt__payx { font-size: .75rem; color: rgba(248, 236, 210, .7); }

.bx-eng--scratch .bx-tkt__pay b {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    color: #f5c451;
}

.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__pay b { color: #f3ecdf; }
.bx-eng--scratch .bx-tkt--sapphire .bx-tkt__pay:first-child b { color: #f5c451; }

/* Narrow boards: the panels take the whole width, the paytable lives in the rules tab. */
@container (max-width: 600px) {
    .bx-eng--scratch .bx-tkt {
        --cell: min(calc((100cqh - 126px) / 3), calc((100cqw - 78px) / 3), 132px);
        padding: 14px 16px 18px;
        gap: 8px;
    }
    .bx-eng--scratch .bx-tkt__side { display: none; }
    .bx-eng--scratch .bx-tkt__head { flex-direction: column; align-items: center; gap: 2px; }
    .bx-eng--scratch .bx-tkt__tag { font-size: .62rem; }
    .bx-eng--scratch .bx-tkt__name { font-size: 1rem; }
}

@media (max-width: 560px) {
    .bx-eng--scratch .bx-stake__label { display: none; }
    .bx-eng--scratch .bx-deck .bx-status { min-height: 2.6em; }
    .bx-eng--scratch .bx-stake__val { min-width: 60px; }
    .bx-eng--scratch .bx-deck .bx-play,
    .bx-eng--scratch .bx-deck .bx-btn2 { min-width: 0; min-height: 52px; padding: 0 18px; }
    .bx-eng--scratch .bx-deck { gap: 8px 10px; }
    .bx-eng--scratch .bx-tkt__board { padding: 10px 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .bx-eng--scratch .bx-tkt__foil,
    .bx-eng--scratch .bx-tkt__cell { transition: none !important; }
}