@font-face {
    font-family: "Titan One";
    src: url("assets/fonts/titan-one.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Archivo Black";
    src: url("assets/fonts/archivo-black.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Anton";
    src: url("assets/fonts/anton.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Card Characters";
    src: url("cardc___.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    color-scheme: dark;
    --ink: #f7fbff;
    --muted: #9aa8c8;
    --screen-blue: #063cdf;
    --screen-deep: #011a7c;
    --cyan: #0ff5ff;
    --gold: #ffd92f;
    --orange: #ff9e00;
    --red: #ff334d;
    --green: #42ff9a;
    --panel: #080d21;
    --chrome-light: #d7dce8;
    --chrome-mid: #6b7284;
    --chrome-dark: #1c2231;
    --card-ratio: 0.7143;
    --focus: #fff35c;
    font-family: "Archivo Black", Impact, sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: #02040a;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 50% -10%, rgba(37, 59, 108, .7), transparent 42rem),
        linear-gradient(145deg, #111725, #02040a 48%, #080b12);
    overflow-x: hidden;
}

button,
select,
input {
    font: inherit;
}

button,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

:where(button, select, input, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    inset: .75rem auto auto .75rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    color: #071026;
    background: white;
    font-weight: 800;
    translate: 0 -200%;
}

.skip-link:focus {
    translate: 0;
}

.visually-hidden {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.cabinet {
    width: min(100%, 1500px);
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(.45rem, 1.4vw, 1.25rem);
    background:
        linear-gradient(90deg, rgba(255,255,255,.1), transparent 4%, transparent 96%, rgba(255,255,255,.08)),
        #05070d;
}

.cabinet-top {
    min-height: 4.2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .55rem clamp(.65rem, 2vw, 1.5rem);
    border: 1px solid #343b4d;
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%, rgba(0,0,0,.5)),
        #111724;
    box-shadow: inset 0 0 0 2px #05070c, 0 -8px 30px rgba(0,0,0,.5);
}

.brand {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1.1rem 1.4rem;
    width: max-content;
    line-height: .9;
    text-shadow: 0 2px 0 #111c7e, 0 0 12px rgba(28, 109, 255, .55);
}

.brand-count {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--gold);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: -.08em;
    -webkit-text-stroke: 2px #ee4b18;
}

.brand-play {
    align-self: end;
    color: #ffea45;
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .18em;
}

.brand-name {
    color: white;
    font-size: clamp(.85rem, 1.5vw, 1.25rem);
    font-weight: 1000;
    font-style: italic;
    letter-spacing: .07em;
}

.top-readout {
    min-width: 11rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .6rem .9rem .45rem;
    border: 2px solid #7b8496;
    border-radius: .55rem;
    background: #02050d;
    box-shadow: inset 0 2px 8px black;
}

.readout-label,
.meter span {
    color: #cad2e2;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.top-readout strong {
    color: #fff68a;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.top-actions {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
}

.icon-button {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: .65rem;
    border: 1px solid #555e73;
    border-radius: 50%;
    background: linear-gradient(#2a3246, #0b1020);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(0,0,0,.35);
    cursor: pointer;
}

.icon-button:hover {
    border-color: #99a7c5;
    background: linear-gradient(#35415c, #10172a);
}

.icon-button svg {
    width: 100%;
    fill: #dbe5ff;
}

.icon-button[aria-pressed="false"] svg {
    opacity: .45;
}

.machine {
    position: relative;
    overflow: hidden;
    border: clamp(.3rem, .8vw, .65rem) solid;
    border-color: #242a38 #090c13 #05070b #3d4556;
    background: #010514;
    box-shadow:
        inset 0 0 0 2px #778093,
        inset 0 0 30px black,
        0 15px 60px rgba(0,0,0,.7);
}

#fxCanvas,
.win-wash {
    position: absolute;
    z-index: 20;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.win-wash {
    z-index: 5;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,236,92,.28), transparent 62%);
}

.win-wash.active {
    animation: win-wash 1s ease-out 2;
}

.game-screen {
    position: relative;
    min-height: calc(100vh - 9.7rem);
    display: grid;
    grid-template-rows: auto minmax(15rem, 1fr) auto auto auto;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(13, 101, 255, .7), transparent 65%),
        linear-gradient(180deg, #031886 0%, var(--screen-blue) 48%, #052ab0 100%);
    isolation: isolate;
}

.game-screen::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .18;
    background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 3px 4px);
    pointer-events: none;
}

.screen-header {
    min-height: 3rem;
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .4rem .7rem;
    border-bottom: 2px solid rgba(191, 229, 255, .7);
    background: linear-gradient(180deg, rgba(0,5,58,.95), rgba(1,25,112,.86));
}

.game-picker {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.game-picker > span {
    color: #9eeeff;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.game-picker select {
    max-width: 100%;
    padding: .43rem 2rem .43rem .65rem;
    border: 1px solid #5ba8ff;
    border-radius: .35rem;
    color: white;
    background: #071b72;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.game-message {
    overflow: hidden;
    color: #fff452;
    font-size: clamp(.75rem, 1.5vw, 1.1rem);
    font-weight: 1000;
    letter-spacing: .1em;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 2px #06114d;
    white-space: nowrap;
}

.pays-button,
.help-button {
    min-height: 2rem;
    padding: .35rem .65rem;
    border: 2px solid #e4edf8;
    border-radius: 999px;
    color: white;
    background: linear-gradient(#ff5368, #ad0f25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #5e0714;
    font-size: .68rem;
    font-weight: 1000;
    cursor: pointer;
}

.hundred-zone {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(.4rem, 1.2vw, .85rem) clamp(.45rem, 2vw, 1.2rem) .3rem;
    container: hundred-grid / inline-size;
}

.grid-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: .3rem;
    color: #b8d3ff;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.grid-meta strong,
#gridResult {
    color: #fff162;
}

.hands-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(10, minmax(4.6rem, 1fr));
    grid-template-rows: repeat(10, minmax(1.5rem, 1fr));
    gap: clamp(.18rem, .4vw, .38rem) clamp(.28rem, .65vw, .65rem);
    contain: layout style paint;
}

.hands-renderer {
    min-height: 0;
    position: relative;
    flex: 1;
}

#handsCanvas {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
}

body.pixi-grid-ready #handsCanvas {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

body.pixi-grid-ready .hands-grid {
    opacity: 0;
    pointer-events: none;
}

.mini-hand {
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 1px;
    padding: 2px;
    border: 1px solid rgba(177, 221, 255, .5);
    border-radius: 3px;
    background: rgba(0, 19, 93, .58);
    box-shadow: 0 1px 2px rgba(0,0,0,.55);
    transition: filter .18s ease, box-shadow .18s ease, translate .18s ease;
}

.mini-hand::before {
    content: attr(data-number);
    position: absolute;
    z-index: 2;
    inset: 1px auto auto 2px;
    color: rgba(255,255,255,.9);
    font-size: clamp(.28rem, .42vw, .45rem);
    font-weight: 900;
    text-shadow: 0 1px 1px black;
    pointer-events: none;
}

.mini-hand.winner {
    z-index: 2;
    border-color: #44f7ff;
    box-shadow: 0 0 7px #20eaff, inset 0 0 5px rgba(54,234,255,.65);
    animation: mini-pulse .85s ease-in-out 2;
}

.mini-hand.win-high {
    border-color: #ffe553;
    box-shadow: 0 0 10px #ffb800, 0 0 18px rgba(255,220,35,.8);
}

.mini-hand.win-rare {
    border-color: #ff90ff;
    box-shadow: 0 0 12px #d91bff, 0 0 24px rgba(255,73,255,.85);
}

.mini-hand.winner[data-result-key="two_pair"] {
    border-color: #28ff42;
    box-shadow: 0 0 9px #28ff42, inset 0 0 6px rgba(40,255,66,.72);
}

.mini-hand.winner[data-result-key="three_kind"] {
    border-color: #2586ff;
    box-shadow: 0 0 10px #2586ff, inset 0 0 6px rgba(37,134,255,.72);
}

.mini-hand.winner[data-result-key="four_kind"],
.mini-hand.winner[data-result-key="four_aces_kicker"],
.mini-hand.winner[data-result-key="four_2_4_kicker"],
.mini-hand.winner[data-result-key="four_aces"],
.mini-hand.winner[data-result-key="four_2_4"],
.mini-hand.winner[data-result-key="four_5_k"],
.mini-hand.winner[data-result-key="four_deuces"],
.mini-hand.winner[data-result-key="four_deuces_ace"],
.mini-hand.winner[data-result-key="five_kind"],
.mini-hand.winner[data-result-key="five_aces"],
.mini-hand.winner[data-result-key="five_3_5"],
.mini-hand.winner[data-result-key="five_6_k"],
.mini-hand.winner[data-result-key="wild_royal"] {
    border-color: #ffd525;
    box-shadow: 0 0 11px #ffd525, 0 0 20px rgba(255,213,37,.82);
}

.mini-hand.winner[data-result-key="royal_flush"],
.mini-hand.winner[data-result-key="natural_royal"] {
    border-color: #ffed26;
    box-shadow: 0 0 12px #ffed26, 0 0 24px rgba(255,237,38,.88);
}

.mini-card {
    min-width: 0;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 1px;
    color: #111827;
    background: linear-gradient(105deg, #fffef0, #eef1ee);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(.36rem, .65vw, .7rem);
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(20,35,59,.18);
}

.mini-card.red {
    color: #df1733;
}

.mini-card.joker {
    color: #6336bd;
    font-size: clamp(.28rem, .46vw, .5rem);
}

.mini-card.held-mini {
    box-shadow: inset 0 0 0 1px #ffeb3d, 0 0 3px #ffeb3d;
}

.mini-card.card-back {
    color: transparent;
    background-color: #173b9e;
}

.focus-zone {
    min-height: clamp(8rem, 18vw, 13rem);
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(24rem, 2.8fr) minmax(8rem, 1fr);
    align-items: end;
    gap: clamp(.35rem, 1.2vw, 1rem);
    padding: .15rem clamp(.45rem, 1.5vw, 1rem) .45rem;
}

.main-stage {
    min-width: 0;
}

.hold-instruction {
    height: 1.3rem;
    color: #cbdfff;
    font-size: clamp(.58rem, .85vw, .78rem);
    font-weight: 800;
    letter-spacing: .05em;
    text-align: center;
}

.main-hand {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.28rem, .8vw, .7rem);
    max-width: 42rem;
    margin: 0 auto;
}

.playing-card {
    aspect-ratio: var(--card-ratio);
    min-width: 0;
    position: relative;
    isolation: isolate;
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: clamp(.3rem, .7vw, .6rem);
    color: #111725;
    background: linear-gradient(115deg, #fffef4, #f5f5ed 65%, #dcded8);
    box-shadow:
        inset 0 0 0 1px #fff,
        inset 0 0 0 2px rgba(20,29,48,.18),
        0 .28rem .45rem rgba(0,0,0,.45);
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: translate .16s ease, filter .16s ease, box-shadow .16s ease;
}

.playing-card:disabled {
    cursor: default;
}

.playing-card:not(:disabled):hover {
    translate: 0 -.18rem;
    filter: brightness(1.04);
}

.playing-card.held {
    translate: 0 -.62rem;
    box-shadow:
        inset 0 0 0 3px #fff36a,
        0 0 0 3px #1738b2,
        0 .45rem .85rem rgba(0,0,0,.6),
        0 0 16px rgba(255,233,72,.65);
}

.playing-card.winning-card {
    box-shadow:
        inset 0 0 0 3px #fff8a1,
        0 0 0 3px #f0a600,
        0 0 22px rgba(255,213,46,.85);
}

.playing-card .corner {
    position: absolute;
    z-index: 2;
    inset: 5% auto auto 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.9rem, 2.5vw, 2rem);
    font-weight: 900;
    line-height: .82;
}

.playing-card .corner.bottom {
    inset: auto 7% 5% auto;
    rotate: 180deg;
}

.playing-card .corner-suit {
    margin-top: .12em;
    font-size: .68em;
}

.playing-card .center-suit {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    translate: -50% -48%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 7vw, 5.9rem);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.playing-card.red {
    color: #e11c37;
}

.playing-card.joker {
    color: #5b2cb5;
}

.playing-card.joker .center-suit {
    font-size: clamp(1.1rem, 3vw, 2.4rem);
    font-weight: 1000;
    letter-spacing: -.08em;
    rotate: -20deg;
}

.hold-flag {
    position: absolute;
    z-index: 5;
    inset: auto 8% .28rem;
    padding: .18rem .2rem;
    border: 2px solid #18309a;
    border-radius: .18rem;
    color: #0a1662;
    background: #fff266;
    box-shadow: 0 2px 0 rgba(0,0,0,.35);
    font-size: clamp(.5rem, 1.1vw, .82rem);
    font-weight: 1000;
    letter-spacing: .08em;
    text-align: center;
    opacity: 0;
    translate: 0 .4rem;
    transition: opacity .15s ease, translate .15s ease;
}

.playing-card.held .hold-flag {
    opacity: 1;
    translate: 0;
}

.card-back,
.back-preview {
    --back-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
        linear-gradient(145deg, #1e68df, #061f80);
    background: var(--back-image);
}

.playing-card.card-back {
    overflow: hidden;
    background: #eee9d5;
}

.playing-card.card-back::before {
    content: "";
    position: absolute;
    inset: 5%;
    border: max(2px, .18vw) solid #eff8ff;
    border-radius: .28rem;
    background: var(--back-image);
    box-shadow: inset 0 0 0 2px #0a164a, inset 0 0 0 4px rgba(255,255,255,.35);
}

body[data-card-back="neon"] .card-back,
.back-neon {
    --back-image:
        radial-gradient(circle at center, transparent 0 22%, #20fff2 23% 25%, transparent 26%),
        repeating-linear-gradient(135deg, rgba(255,23,196,.48) 0 2px, transparent 2px 8px),
        linear-gradient(145deg, #071040, #d20eaa);
}

body[data-card-back="royal"] .card-back,
.back-royal {
    --back-image:
        radial-gradient(circle, #fff1a2 0 4%, transparent 5%),
        repeating-conic-gradient(from 45deg, #8f5500 0 25%, #f6c63e 0 50%) 50% / 18px 18px;
}

body[data-card-back="onyx"] .card-back,
.back-onyx {
    --back-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,.65) 0 2px, transparent 2px 6px),
        #151922;
}

body[data-card-back="dragon"] .card-back,
.back-dragon {
    --back-image:
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.8), transparent 13%),
        conic-gradient(from 45deg, #ff173d, #ffb000, #64ff92, #1b8cff, #c426ff, #ff173d);
}

body[data-card-back="custom"] .card-back,
.back-custom {
    --back-image: var(--custom-back-image), linear-gradient(#173a9b, #071c70);
    background-position: center;
    background-size: cover;
}

.mini-card.reveal-card,
.playing-card.reveal-card {
    animation: card-flip .42s cubic-bezier(.22,.9,.35,1.28) both;
    animation-delay: var(--reveal-delay, 0ms);
}

.result-stack {
    min-height: 6.6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
    padding-bottom: .15rem;
}

.result-pill {
    min-width: 0;
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    overflow: hidden;
    border: 2px solid #f1c55d;
    border-radius: .28rem;
    background: rgba(5, 14, 62, .88);
    box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 0 8px rgba(255,255,255,.1);
}

.result-pill strong {
    align-self: stretch;
    display: grid;
    place-items: center;
    color: #fff765;
    background: rgba(0,0,0,.38);
    font-size: .72rem;
}

.result-pill span {
    overflow: hidden;
    padding: .22rem .3rem;
    font-size: clamp(.48rem, .72vw, .66rem);
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-pill small {
    padding-right: .25rem;
    color: #74f6ff;
    font-size: .55rem;
    font-weight: 900;
}

.result-empty {
    align-self: center;
    padding: .45rem;
    color: rgba(226,238,255,.55);
    font-size: .65rem;
    font-weight: 800;
    text-align: center;
}

.status-rail {
    min-height: 2.55rem;
    display: grid;
    grid-template-columns: minmax(6.5rem, .65fr) auto minmax(13rem, 3fr) auto minmax(5.5rem, .6fr);
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border-top: 3px ridge #e5e9f1;
    border-bottom: 2px solid #111827;
    background: linear-gradient(#353c49, #111722 55%, #252c38);
}

.meter {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem .45rem;
    border: 2px solid #d5d9e0;
    border-radius: .25rem;
    background: #260c19;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.8);
}

.meter strong {
    color: #fff052;
    font-size: clamp(.85rem, 1.4vw, 1.2rem);
    font-variant-numeric: tabular-nums;
}

.variant-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 0 .4rem;
}

.variant-status strong {
    overflow: hidden;
    color: var(--cyan);
    font-size: clamp(.72rem, 1.4vw, 1.1rem);
    letter-spacing: .03em;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(0,255,255,.55);
    white-space: nowrap;
}

.variant-status span {
    color: #fff070;
    font-size: clamp(.65rem, 1.1vw, .9rem);
    font-weight: 900;
    white-space: nowrap;
}

.denom-chip {
    width: 4.2rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border: 3px double #fff2a1;
    border-radius: 50%;
    color: #bd330b;
    background: radial-gradient(circle, #fff65d, #d89500);
    box-shadow: 0 0 0 2px #7b4b00, inset 0 0 8px white;
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 1000;
    font-style: italic;
    text-shadow: 0 1px white;
}

.control-deck {
    display: grid;
    grid-template-columns: repeat(2, minmax(4.2rem, .75fr)) repeat(5, minmax(5rem, 1fr)) minmax(7rem, .85fr);
    align-items: stretch;
    gap: clamp(.22rem, .5vw, .48rem);
    padding: .5rem;
    background:
        linear-gradient(100deg, rgba(255,255,255,.28), transparent 12%, transparent 85%, rgba(255,255,255,.18)),
        linear-gradient(#6d7480, #242a33 48%, #444b56);
}

.deck-button {
    min-height: 3.25rem;
    position: relative;
    padding: .35rem .4rem;
    border: 2px solid #fff4ad;
    border-radius: 999px;
    color: #20212d;
    background: linear-gradient(#fff86d 0%, #f1be16 48%, #d89100 100%);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.8),
        inset 0 -2px 3px rgba(133,70,0,.5),
        0 2px 0 #171b26;
    font-size: clamp(.56rem, .75vw, .72rem);
    font-weight: 1000;
    line-height: 1.05;
    text-shadow: 0 1px rgba(255,255,255,.55);
    cursor: pointer;
}

.deck-button:hover:not(:disabled) {
    filter: brightness(1.12);
}

.deck-button:active:not(:disabled) {
    translate: 0 2px;
    box-shadow: inset 0 2px 4px rgba(90,48,0,.45);
}

.deck-button:disabled {
    filter: grayscale(.75) brightness(.7);
    cursor: not-allowed;
}

.deck-button-secondary {
    border-color: #dbeeff;
    color: #eaffff;
    background: linear-gradient(#7d9fb4, #346680 48%, #1e3c55);
    text-shadow: 0 1px #082c44;
}

.deck-button[aria-pressed="false"] {
    filter: saturate(.5);
}

.deal-button {
    border-color: #f7ffe9;
    color: #082d26;
    background: linear-gradient(#a4ffb7, #37e07a 48%, #0a9952);
    font-size: clamp(.75rem, 1vw, 1rem);
    letter-spacing: .06em;
}

.button-value {
    display: block;
    color: #9b180b;
    font-size: 1rem;
}

.button-small {
    display: block;
    font-size: .55rem;
}

.speed-lamp {
    display: block;
    width: 1.8rem;
    height: .22rem;
    margin: .25rem auto 0;
    border-radius: 99px;
    background: #842535;
}

.deck-button[aria-pressed="true"] .speed-lamp {
    background: #ff3552;
    box-shadow: 0 0 8px #ff3552;
}

.meter-credits {
    min-height: 3.25rem;
    flex-direction: column;
    justify-content: center;
    gap: .05rem;
}

.meter-credits strong {
    font-size: clamp(.85rem, 1.45vw, 1.25rem);
}

.cabinet-footer {
    min-height: 3.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: .45rem clamp(.55rem, 1.5vw, 1rem);
    border: 1px solid #343b4d;
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 22%, rgba(0,0,0,.55)),
        #151a23;
}

.footer-status,
.rng-note {
    color: #a9b6cc;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.status-light {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #43ff95;
    box-shadow: 0 0 8px #43ff95;
}

.rng-note {
    justify-self: end;
}

.denominations {
    display: flex;
    gap: .3rem;
}

.denominations button {
    min-width: 3.2rem;
    min-height: 2.2rem;
    padding: .3rem .55rem;
    border: 2px solid #7c8daf;
    border-radius: 50%;
    color: #6ee8ff;
    background: radial-gradient(circle, #23568f, #0a1a3b 68%);
    box-shadow: inset 0 0 6px rgba(255,255,255,.25);
    font-family: Georgia, serif;
    font-weight: 1000;
    cursor: pointer;
}

.denominations button.active {
    border-color: #fff4a1;
    color: #bd2c12;
    background: radial-gradient(circle, #fff86b, #d59a00 70%);
    box-shadow: 0 0 9px rgba(255,225,70,.7);
}

dialog {
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
}

dialog::backdrop {
    background: rgba(0, 2, 10, .76);
    backdrop-filter: blur(7px);
}

.drawer {
    width: min(31rem, 100%);
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0 0 0 auto;
}

.drawer-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #090e1d;
    box-shadow: -20px 0 70px rgba(0,0,0,.55);
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.3rem 1rem;
    border-bottom: 1px solid #27324a;
}

.dialog-header h2 {
    margin: .2rem 0 0;
    font-size: clamp(1.35rem, 4vw, 2rem);
    letter-spacing: -.03em;
}

.eyebrow {
    color: #55e7ff;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .18em;
}

.close-button {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0 0 .15rem;
    border: 1px solid #3f4a62;
    border-radius: 50%;
    color: #dce7ff;
    background: #161e31;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.settings-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.setting-section {
    padding: 1.25rem 1.3rem;
    border-bottom: 1px solid #222c40;
}

.setting-section h3 {
    margin: 0 0 1rem;
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.field-label,
.range-heading label {
    color: #c5d0e6;
    font-size: .78rem;
    font-weight: 700;
}

.settings-select {
    width: 100%;
    min-height: 3rem;
    margin: .45rem 0 1.25rem;
    padding: .7rem .8rem;
    border: 1px solid #3b4965;
    border-radius: .55rem;
    color: white;
    background: #111a2e;
}

.range-heading,
.setting-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.range-heading output,
.setting-title-row span {
    color: #51e9ff;
    font-size: .72rem;
    font-weight: 800;
}

#speedRange {
    width: 100%;
    height: 2rem;
    accent-color: #45ebff;
}

.range-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: -.25rem;
    color: #71809e;
    font-size: .62rem;
}

.switch-row {
    min-height: 3.8rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #1f2a40;
    cursor: pointer;
}

.switch-row > span:first-child {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.switch-row strong {
    font-size: .83rem;
}

.switch-row small {
    max-width: 21rem;
    color: #7f8ca6;
    font-size: .68rem;
    line-height: 1.35;
}

.switch-row input {
    position: absolute;
    opacity: 0;
}

.switch {
    width: 2.8rem;
    height: 1.55rem;
    flex: 0 0 auto;
    position: relative;
    border-radius: 999px;
    background: #313b50;
    transition: background .2s;
}

.switch::after {
    content: "";
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    inset: .2rem auto auto .22rem;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    transition: translate .2s;
}

.switch-row input:checked + .switch {
    background: #16b978;
}

.switch-row input:checked + .switch::after {
    translate: 1.2rem 0;
}

.switch-row input:focus-visible + .switch {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.card-back-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}

.card-back-options button {
    min-height: 7.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .55rem;
    border: 1px solid #34415c;
    border-radius: .65rem;
    color: #aebbd3;
    background: #10182a;
    cursor: pointer;
}

.card-back-options button.selected {
    border-color: #53ebff;
    color: white;
    box-shadow: 0 0 0 1px #53ebff, 0 0 14px rgba(50,228,255,.22);
}

.back-preview {
    width: 3.2rem;
    aspect-ratio: var(--card-ratio);
    display: block;
    border: 3px double rgba(255,255,255,.8);
    border-radius: .28rem;
    box-shadow: 0 3px 8px rgba(0,0,0,.55);
}

.card-back-options small {
    font-size: .67rem;
    font-weight: 800;
}

.upload-zone {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .8rem;
    padding: .8rem;
    border: 1px dashed #52617e;
    border-radius: .65rem;
    color: #cbd6e9;
    background: #0c1426;
    cursor: pointer;
}

.upload-zone.dragging {
    border-color: #53ebff;
    background: #10233b;
}

.upload-zone svg {
    width: 1.8rem;
    fill: none;
    stroke: #50e7ff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.upload-zone span {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.upload-zone strong {
    font-size: .78rem;
}

.upload-zone small {
    color: #7887a5;
    font-size: .65rem;
}

.upload-zone input {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
}

.upload-status {
    min-height: 1rem;
    margin: .5rem 0 0;
    color: #66f0b1;
    font-size: .68rem;
}

.session-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin: 0;
}

.session-stats div {
    padding: .7rem;
    border-radius: .5rem;
    background: #111a2c;
}

.session-stats dt {
    color: #7786a2;
    font-size: .62rem;
    text-transform: uppercase;
}

.session-stats dd {
    margin: .2rem 0 0;
    color: #f3f7ff;
    font-size: .9rem;
    font-weight: 900;
}

.reset-button {
    width: 100%;
    min-height: 2.8rem;
    margin-top: .8rem;
    border: 1px solid #84364a;
    border-radius: .5rem;
    color: #ffb0bd;
    background: #28121b;
    font-weight: 800;
    cursor: pointer;
}

.settings-pays-button {
    border-color: #38c8ef;
    color: #9df2ff;
    background: #0b2944;
}

.info-dialog {
    width: min(36rem, calc(100% - 1.2rem));
    max-height: min(44rem, calc(100% - 1.2rem));
    border-radius: 1rem;
}

.info-panel {
    overflow: hidden;
    border: 1px solid #43516e;
    border-radius: 1rem;
    background: #0b1121;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.paytable-wrap {
    max-height: min(28rem, 60vh);
    overflow-y: auto;
}

.paytable {
    width: 100%;
    border-collapse: collapse;
}

.paytable th,
.paytable td {
    padding: .7rem 1.3rem;
    border-bottom: 1px solid #222d43;
    text-align: left;
}

.paytable th:last-child,
.paytable td:last-child {
    text-align: right;
}

.paytable th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #8695b1;
    background: #10182a;
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.paytable td {
    font-size: .83rem;
    font-weight: 800;
}

.paytable td:last-child {
    color: #fff057;
    font-variant-numeric: tabular-nums;
}

.paytable tr.active {
    background: rgba(42,218,255,.13);
    box-shadow: inset 3px 0 #37eaff;
}

.dialog-note,
.keyboard-help {
    margin: 0;
    padding: 1rem 1.3rem;
    color: #8492ad;
    font-size: .7rem;
    line-height: 1.5;
}

.help-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.3rem;
    list-style: none;
}

.help-steps li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: .8rem;
}

.help-steps li > span {
    color: #55e9ff;
    font-size: 1.2rem;
    font-weight: 1000;
}

.help-steps strong {
    font-size: .88rem;
}

.help-steps p {
    margin: .25rem 0 0;
    color: #91a0ba;
    font-size: .75rem;
    line-height: 1.45;
}

.keyboard-help {
    border-top: 1px solid #263149;
}

.keyboard-help strong {
    color: #dce8fc;
}

.drawer[open] .drawer-panel {
    animation: drawer-in .28s ease-out both;
}

.info-dialog[open] .info-panel {
    animation: dialog-in .22s ease-out both;
}

@starting-style {
    .drawer[open] .drawer-panel {
        opacity: 0;
        translate: 100% 0;
    }

    .info-dialog[open] .info-panel {
        opacity: 0;
        scale: .94;
        translate: 0 .6rem;
    }
}

.cabinet.shake {
    animation: screen-shake .42s ease-out;
}

.fallback-particle {
    width: .55rem;
    height: 1rem;
    position: fixed;
    z-index: 100;
    inset: 72% auto auto 50%;
    border-radius: 2px;
    pointer-events: none;
    animation: fallback-burst var(--d) cubic-bezier(.1,.75,.35,1) var(--delay) both;
}

@keyframes card-flip {
    0% { opacity: .45; transform: perspective(600px) rotateY(0) scaleX(1); }
    43% { opacity: .7; transform: perspective(600px) rotateY(88deg) scaleX(.03); }
    100% { opacity: 1; transform: perspective(600px) rotateY(0) scaleX(1); }
}

@keyframes mini-pulse {
    50% { filter: brightness(1.45); translate: 0 -1px; }
}

@keyframes win-wash {
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes screen-shake {
    15% { translate: -4px 1px; }
    30% { translate: 3px -2px; }
    48% { translate: -2px 2px; }
    66% { translate: 2px -1px; }
    82% { translate: -1px 0; }
    100% { translate: 0; }
}

@keyframes fallback-burst {
    0% { opacity: 1; translate: -50% 0; rotate: 0; }
    100% { opacity: 0; translate: var(--x) -75vh; rotate: var(--r); }
}

@keyframes drawer-in {
    from { opacity: 0; translate: 100% 0; }
}

@keyframes dialog-in {
    from { opacity: 0; scale: .94; translate: 0 .6rem; }
}

@container hundred-grid (max-width: 760px) {
    .hands-grid {
        grid-template-columns: repeat(5, minmax(3.3rem, 1fr));
        grid-template-rows: repeat(20, minmax(1.15rem, 1fr));
    }

    .mini-hand::before {
        display: none;
    }
}

@media (max-width: 800px) {
    .cabinet {
        padding: 0;
    }

    .cabinet-top,
    .cabinet-footer,
    .machine {
        border-radius: 0;
    }

    .cabinet-top {
        min-height: 3.6rem;
        grid-template-columns: 1fr auto auto;
        gap: .5rem;
    }

    .brand {
        grid-template-rows: .85rem 1.1rem;
    }

    .brand-count {
        font-size: 2rem;
        -webkit-text-stroke-width: 1px;
    }

    .brand-play {
        font-size: .58rem;
    }

    .brand-name {
        font-size: .7rem;
    }

    .top-readout {
        min-width: 7.2rem;
        display: grid;
        gap: .05rem;
        padding: .35rem .55rem;
    }

    .readout-label {
        font-size: .48rem;
    }

    .top-readout strong {
        font-size: .86rem;
    }

    .icon-button {
        width: 2.35rem;
        height: 2.35rem;
    }

    #soundButton {
        display: none;
    }

    .game-screen {
        min-height: calc(100vh - 7.2rem);
        grid-template-rows: auto minmax(18rem, 1fr) auto auto auto;
    }

    .screen-header {
        grid-template-columns: minmax(0, 1fr) minmax(5rem, auto) auto;
    }

    .game-picker > span {
        display: none;
    }

    .game-message {
        text-align: right;
    }

    .pays-button {
        min-width: 3.6rem;
        padding-inline: .35rem;
        font-size: .52rem;
    }

    .focus-zone {
        min-height: 8.2rem;
        grid-template-columns: 1fr;
        padding-inline: .55rem;
    }

    .result-stack {
        display: none;
    }

    .main-hand {
        gap: .3rem;
    }

    .hold-instruction {
        height: 1rem;
        font-size: .55rem;
    }

    .status-rail {
        grid-template-columns: minmax(5rem, .7fr) auto minmax(8rem, 2fr) auto minmax(4rem, .6fr);
        gap: .2rem;
        padding-inline: .3rem;
    }

    .variant-status {
        display: block;
        text-align: center;
    }

    .variant-status strong,
    .variant-status span {
        display: block;
    }

    .variant-status strong {
        font-size: .65rem;
    }

    .variant-status span {
        margin-top: .12rem;
        font-size: .53rem;
    }

    .denom-chip {
        width: 3.2rem;
        height: 2rem;
        font-size: .95rem;
    }

    .meter {
        display: grid;
        gap: 0;
        padding: .2rem .3rem;
    }

    .meter span {
        font-size: .48rem;
    }

    .meter strong {
        font-size: .75rem;
    }

    .control-deck {
        grid-template-columns: repeat(5, 1fr);
        gap: .22rem;
        padding: .35rem;
    }

    .deck-button {
        min-width: 0;
        min-height: 2.9rem;
        padding-inline: .2rem;
        font-size: .52rem;
    }

    .deck-button-secondary,
    #seePaysButton {
        display: none;
    }

    .deal-button {
        font-size: .66rem;
    }

    .meter-credits {
        min-height: 2.9rem;
    }

    .cabinet-footer {
        min-height: 3.1rem;
        grid-template-columns: auto 1fr;
    }

    .footer-status {
        display: none;
    }

    .denominations {
        justify-self: start;
    }

    .denominations button {
        min-width: 2.6rem;
        min-height: 2rem;
        padding: .2rem;
        font-size: .72rem;
    }

    .rng-note {
        font-size: .48rem;
    }
}

@media (max-width: 480px) {
    .cabinet-top {
        padding-inline: .45rem;
    }

    .game-picker select {
        width: 10.5rem;
        padding-right: .4rem;
        font-size: .62rem;
    }

    .game-message {
        font-size: .55rem;
    }

    .hundred-zone {
        padding-inline: .3rem;
    }

    .grid-meta {
        font-size: .48rem;
    }

    .status-rail {
        grid-template-columns: minmax(3.5rem, .55fr) auto minmax(6.2rem, 2fr) auto minmax(3.2rem, .55fr);
    }

    .meter span {
        font-size: .46rem;
    }

    .help-button {
        width: 2.2rem;
        padding-inline: .2rem;
        font-size: .48rem;
    }

    .denom-chip {
        width: 2.65rem;
        font-size: .78rem;
    }

    .control-deck {
        grid-template-columns: repeat(4, 1fr);
    }

    #autoHoldButton {
        display: none;
    }

    .playing-card .corner {
        font-size: clamp(.8rem, 5.2vw, 1.4rem);
    }

    .playing-card .center-suit {
        font-size: clamp(1.8rem, 12vw, 3.2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Google Play cabinet reference: full-bleed 16:9 IGT-style presentation. */
@media (min-width: 801px) {
    html,
    body {
        width: 100%;
        height: 100%;
    }

    body {
        display: grid;
        place-items: center;
        background: #000;
    }

    .cabinet {
        width: min(100vw, calc(100dvh * 16 / 9));
        height: min(100dvh, calc(100vw * 9 / 16));
        min-height: 0;
        padding: 0;
        background: #000;
    }
}

.cabinet-top,
.cabinet-footer {
    display: none;
}

.machine {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #050505;
    border-radius: 0;
    background: #0738b9;
    box-shadow: none;
}

.game-screen {
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 55.5fr) minmax(0, 28.5fr) minmax(0, 9fr) minmax(0, 7fr);
    background: #0738b9;
}

.credit-alert {
    position: absolute;
    z-index: 18;
    inset: 8% auto auto 50%;
    width: max-content;
    max-width: 88%;
    padding: .45rem 1rem;
    border: 4px solid #fff;
    border-radius: .45rem;
    color: #fff500;
    background: #090909;
    box-shadow: 0 0 0 4px #e91520, 0 0 20px rgba(255, 28, 45, .9);
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(.72rem, 1.65vw, 1.45rem);
    line-height: 1;
    text-align: center;
    translate: -50% 0;
    white-space: nowrap;
    pointer-events: none;
}

.qa-overlay {
    position: fixed;
    z-index: 1000;
    inset: .35rem .35rem auto auto;
    padding: .3rem .45rem;
    border: 1px solid #58ff9b;
    border-radius: .25rem;
    color: #58ff9b;
    background: rgba(0, 0, 0, .86);
    font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    pointer-events: none;
}

.game-screen::after {
    display: none;
}

.screen-header {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
}

.hundred-zone {
    min-height: 0;
    position: relative;
    padding: .35% 1.45% .45%;
}

.rebuy-banner {
    position: absolute;
    z-index: 12;
    inset: -.9% auto auto 50%;
    width: max-content;
    max-width: 92%;
    color: #fff218;
    font-family: "Titan One", "Archivo Black", sans-serif;
    font-size: clamp(2rem, 5vw, 4.55rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 3px 3px 0 #101010, 5px 5px 0 #101010, 7px 7px 0 rgba(0, 0, 0, .7);
    white-space: nowrap;
    -webkit-text-stroke: clamp(3px, .48vw, 7px) #f31213;
    paint-order: stroke fill;
    pointer-events: none;
    transform: translateX(-50%) rotate(-1deg) scaleX(1.14);
}

.grid-meta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
}

.hands-renderer {
    width: 100%;
    height: 100%;
    flex: none;
}

.hands-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));
    column-gap: clamp(.35rem, 1.2vw, 1.1rem);
    row-gap: clamp(.12rem, .45vh, .3rem);
}

.mini-hand {
    gap: 1px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mini-hand::before {
    display: none;
}

.mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid #111827;
    border-radius: 0;
    color: #080d15;
    background: #fff;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    line-height: .72;
    box-shadow: none;
}

.mini-rank {
    font-family: "Card Characters", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(.58rem, 1.16vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0;
    transform: none;
    transform-origin: center;
}

.mini-suit {
    width: clamp(.55rem, 1.08vw, .98rem);
    height: clamp(.55rem, 1.08vw, .98rem);
}

.mini-suit svg,
.corner-suit svg,
.center-suit svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.mini-card.red {
    color: #ed102f;
}

.mini-card.held-mini {
    box-shadow: inset 0 0 0 2px #28ff46;
}

.mini-hand.is-highlighted {
    z-index: 5;
    outline: 4px solid #fff;
    outline-offset: 2px;
}

.focus-zone {
    min-height: 0;
    position: relative;
    grid-template-columns: minmax(0, 19fr) minmax(0, 62fr) minmax(0, 19fr);
    align-items: stretch;
    gap: .35%;
    padding: .3% .35% .25%;
    border: 0;
    background: #0738b9;
}

.main-stage {
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.hold-instruction {
    position: absolute;
    z-index: 8;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.main-hand {
    width: 100%;
    max-width: none;
    height: 100%;
    align-items: end;
    gap: clamp(.18rem, .35vw, .32rem);
    margin: 0;
}

.playing-card {
    width: 100%;
    max-height: 100%;
    aspect-ratio: .815;
    overflow: hidden;
    border: 2px solid #080d18;
    border-radius: clamp(.28rem, .52vw, .48rem);
    color: #05080d;
    background: linear-gradient(145deg, #fff 0 68%, #f3f5f8 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .95),
        inset 0 0 10px rgba(23, 37, 61, .08),
        0 2px 2px rgba(0, 0, 0, .7);
}

.playing-card:not(.card-back)::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: 2px;
    border: 1px solid rgba(15, 25, 42, .09);
    border-radius: calc(clamp(.28rem, .52vw, .48rem) - 2px);
    pointer-events: none;
}

.playing-card.held {
    translate: 0 -.2rem;
    box-shadow: inset 0 0 0 4px #ffe600, 0 2px 2px rgba(0, 0, 0, .7);
}

.playing-card.winning-card {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .7);
}

.playing-card .corner {
    inset: 2.5% auto auto 4.5%;
    align-items: flex-start;
    color: inherit;
    font-family: "Anton", Impact, sans-serif;
    font-size: clamp(1.95rem, 3.75vw, 3.45rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .82;
}

.playing-card .corner > span:first-child {
    display: inline-block;
    font-family: "Card Characters", "Arial Narrow", Arial, sans-serif;
    font-weight: 400;
    transform: none;
    transform-origin: left center;
}

.playing-card .corner.bottom {
    display: none;
}

.playing-card .corner-suit {
    align-self: center;
    width: .64em;
    height: .64em;
    margin-top: .16em;
    letter-spacing: 0;
}

.playing-card .center-suit {
    inset: 64% auto auto 55%;
    width: clamp(3.75rem, 7.15vw, 6.55rem);
    height: clamp(3.75rem, 7.15vw, 6.55rem);
    translate: -50% -50%;
    text-shadow: none;
}

.playing-card[data-rank="10"] .corner > span:first-child {
    transform: scaleX(.88);
    transform-origin: left center;
}

.court-art {
    position: absolute;
    z-index: 1;
    inset: 4% 4% 6% 24%;
    overflow: hidden;
    border-radius: .12rem;
}

.court-art img {
    position: absolute;
    inset: -11% auto auto -18%;
    width: 135%;
    max-width: none;
    height: 122%;
    object-fit: fill;
    user-select: none;
}

.playing-card.joker .center-suit {
    font-size: clamp(1.2rem, 2.7vw, 2.5rem);
}

.hold-flag {
    z-index: 9;
    inset: auto 5% .22rem;
    padding: .12rem;
    border: 3px solid #e01020;
    border-radius: .12rem;
    color: #000;
    background: #fff500;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75),
        0 2px 0 rgba(0,0,0,.65),
        0 0 7px rgba(255,235,0,.8);
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(.6rem, 1vw, .9rem);
    font-weight: 400;
    line-height: 1;
}

.result-stack {
    min-height: 0;
    height: 100%;
    justify-content: center;
    gap: 7%;
    padding: 0;
}

.result-pill {
    min-height: 19%;
    grid-template-columns: 17% 1fr;
    grid-template-rows: 1fr auto;
    border: 3px solid var(--result-color, #20f5ff);
    border-radius: .45rem;
    color: #fff;
    background: #050505;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--result-color, #20f5ff) 50%, #222),
        0 0 5px color-mix(in srgb, var(--result-color, #20f5ff) 75%, transparent),
        0 1px 2px #000;
    transition: filter .12s ease, scale .12s ease, box-shadow .12s ease;
}

.result-pill strong {
    grid-row: 1 / 3;
    color: #fff;
    background: #101010;
    font-size: clamp(.85rem, 1.6vw, 1.45rem);
}

.result-pill span {
    align-self: center;
    padding: .15rem .2rem 0;
    font-size: clamp(.58rem, 1.05vw, 1rem);
    font-family: "Archivo Black", Impact, sans-serif;
    font-weight: 400;
}

.result-pill small {
    min-height: 1rem;
    padding: .02rem .2rem;
    color: #fff;
    background: var(--result-color, #00eaff);
    font-size: clamp(.55rem, .9vw, .85rem);
    text-align: center;
}

.result-pill.is-highlighted {
    z-index: 2;
    filter: brightness(1.35);
    scale: 1.055;
    box-shadow:
        inset 0 0 0 2px #fff,
        0 0 12px var(--result-color, #20f5ff),
        0 0 0 3px #fff;
}

.result-empty {
    opacity: 0;
}

.hold-instruction.result-banner {
    width: clamp(10rem, 18vw, 16rem);
    height: auto;
    inset: 44% auto auto 50%;
    overflow: visible;
    padding: .32rem .65rem .18rem;
    border: 4px solid #f22b2b;
    border-radius: .3rem;
    clip-path: none;
    color: #fff;
    background: #050505;
    box-shadow: inset 0 0 0 2px #fff, 0 2px 2px #000;
    font-size: clamp(.78rem, 1.45vw, 1.3rem);
    font-weight: 1000;
    line-height: 1.05;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    white-space: normal;
    translate: -50% -50%;
}

.hold-instruction.result-banner span {
    font-family: "Archivo Black", Impact, sans-serif;
}

.hold-instruction.result-banner strong {
    color: #fff400;
    font-family: "Anton", Impact, sans-serif;
    font-size: 1.25em;
}

.status-rail {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: 1fr;
    align-items: center;
    gap: .25rem;
    padding: .35% .55%;
    border-top: 3px solid #929292;
    border-bottom: 0;
    background: #030303;
}

.meter {
    min-height: 2.35rem;
    height: 66%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .22rem .35rem .05rem;
    border: 4px solid #f8f8f8;
    border-radius: .9rem;
    color: #fff;
    background: #050505;
    box-shadow: none;
}

.meter span {
    position: absolute;
    inset: -.58em auto auto 10%;
    padding: 0 .12rem;
    color: #fff;
    background: #030303;
    font-size: clamp(.58rem, 1.05vw, .9rem);
    font-weight: 1000;
    letter-spacing: -.04em;
    line-height: 1;
}

.meter strong {
    color: #f5ff00;
    font-family: "Anton", Impact, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    line-height: .9;
    translate: 0 .12rem;
}

.meter-win {
    grid-column: 1 / 4;
}

.meter-bet {
    grid-column: 5 / 7;
}

.variant-status {
    grid-column: 7 / 12;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    text-align: center;
}

.variant-status span {
    order: 0;
    color: #fff;
    font-size: clamp(.85rem, 1.8vw, 1.65rem);
    letter-spacing: 0;
    line-height: 1;
    font-family: "Archivo Black", Impact, sans-serif;
}

.variant-status strong {
    order: 1;
    color: #fff;
    font-size: clamp(.6rem, 1.2vw, 1.05rem);
    font-family: "Archivo Black", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: none;
}

.meter-hands {
    grid-column: 12 / 14;
}

.meter-coins {
    grid-column: 15 / 17;
}

.denom-chip {
    grid-column: 18 / 20;
    justify-self: center;
    width: clamp(3.2rem, 6vw, 5.4rem);
    height: clamp(2.4rem, 5vw, 4.2rem);
    border: 4px ridge #cdd0da;
    color: #252525;
    background:
        radial-gradient(circle at 35% 25%, #fff 0 7%, transparent 8%),
        radial-gradient(circle, #f4f4f4 0 46%, #9aa0ab 60%, #edf0f4 66%, #696d76 78%, #e9ebee 100%);
    box-shadow: inset 0 0 0 2px #222, 0 1px 2px #000;
    font-family: "Titan One", "Archivo Black", sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.65rem);
    text-shadow: 0 1px #fff;
}

.meter-credits {
    grid-column: 21 / 25;
    flex-direction: row;
}

.meter-credits strong {
    font-size: clamp(1rem, 1.8vw, 1.6rem);
}

.control-deck {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.45%;
    padding: .18rem .7% .12rem;
    background: #030303;
}

.deck-button,
.deal-button {
    min-width: 0;
    min-height: 0;
    padding: .2rem;
    border: 2px solid #d6dc00;
    border-radius: .7rem;
    color: #050505;
    background: linear-gradient(#ffff3b, #eeed00);
    box-shadow: inset 0 1px 1px #fff, inset 0 -2px 2px #a7a800, 0 1px 1px #000;
    font-size: clamp(.62rem, 1.45vw, 1.3rem);
    font-family: "Anton", Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(.58rem, 1.25vw, 1.05rem);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
}

.deck-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.deck-button:disabled {
    color: #383838;
    filter: grayscale(.25) brightness(.75);
}

@media (max-width: 800px) {
    body {
        background: #000;
    }

    .cabinet {
        width: 100%;
        min-height: 100dvh;
        height: 100dvh;
        padding: 0;
    }

    .machine {
        border: 0;
    }

    .game-screen {
        min-height: 100dvh;
        grid-template-rows: minmax(0, 55fr) minmax(0, 17fr) minmax(0, 13fr) minmax(0, 15fr);
    }

    .hundred-zone {
        padding: .35rem .3rem;
    }

    .rebuy-banner {
        display: none;
    }

    .hands-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(20, minmax(0, 1fr));
        column-gap: .3rem;
        row-gap: 2px;
    }

    .focus-zone {
        grid-template-columns: 1fr;
        padding: .15rem .3rem;
    }

    .result-stack {
        display: none;
    }

    .credit-alert {
        top: 5%;
        max-width: 94%;
        border-width: 2px;
        font-size: .65rem;
        white-space: normal;
    }

    .main-hand {
        gap: .2rem;
    }

    .playing-card {
        aspect-ratio: .72;
    }

    .playing-card .corner {
        font-size: clamp(1.65rem, 9vw, 2.8rem);
    }

    .playing-card .center-suit {
        inset: 62% auto auto 54%;
        width: 70%;
        height: auto;
        aspect-ratio: 1;
    }

    .status-rail {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(2, 1fr);
        gap: .18rem;
        padding: .35rem .3rem .2rem;
    }

    .meter {
        min-height: 0;
        border-width: 2px;
        border-radius: .45rem;
    }

    .meter span {
        inset: -.5em auto auto 8%;
        font-size: .52rem;
    }

    .meter strong {
        font-size: .9rem;
    }

    .meter-win {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .meter-bet {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .meter-hands {
        grid-column: 5 / 7;
        grid-row: 1;
    }

    .meter-coins {
        grid-column: 7 / 9;
        grid-row: 1;
    }

    .variant-status {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    .variant-status span {
        font-size: .75rem;
    }

    .variant-status strong {
        font-size: .52rem;
    }

    .denom-chip {
        grid-column: 4 / 6;
        grid-row: 2;
        width: 2.8rem;
        height: 2rem;
        border-width: 2px;
        font-size: .8rem;
    }

    .meter-credits {
        grid-column: 6 / 9;
        grid-row: 2;
    }

    .control-deck {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: .3rem;
        padding: .3rem;
    }

    .deck-button,
    .deal-button {
        display: block;
        min-height: 0;
        border-radius: .45rem;
        font-size: .68rem;
    }

    #autoHoldButton {
        display: block;
    }

    #dealButton {
        grid-column: 3 / 5;
    }
}

@media (max-width: 480px) {
    .meter span {
        font-size: .46rem;
    }
}

@media (max-width: 360px) {
    .mini-rank {
        font-size: .38rem;
    }

    .mini-suit {
        width: .38rem;
        height: .38rem;
    }
}

/* Reference-machine overlays */
.games-dialog,
.options-dialog,
.rebuy-dialog {
    max-width: none;
    max-height: none;
    margin: auto;
}

.games-dialog {
    width: min(70rem, 96vw);
    border: 2px solid #061d73;
    background: #0a3cbd;
    box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, .7);
}

.games-panel {
    min-height: min(37rem, 90vh);
    padding: clamp(1.1rem, 2.4vw, 2rem);
    background: #0a3cbd;
}

.games-panel .dialog-header {
    padding: 0 0 .7rem;
    border-bottom-color: rgba(255, 255, 255, .8);
}

.games-panel .dialog-header h2 {
    color: #fff62a;
    font-family: "Titan One", "Archivo Black", sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.games-panel .eyebrow {
    color: white;
}

.games-intro {
    margin: .75rem 0 1.45rem;
    color: rgba(255, 255, 255, .9);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .85rem;
}

.variant-menu {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.15rem, 3vw, 2.7rem) clamp(.7rem, 1.7vw, 1.45rem);
}

.variant-menu > button {
    min-width: 0;
    grid-column: span 2;
    padding: 0;
    border: 0;
    color: white;
    background: transparent;
    cursor: pointer;
}

.variant-menu > button:nth-child(5) {
    grid-column: 2 / span 2;
}

.variant-menu > button:nth-child(6) {
    grid-column: 4 / span 2;
}

.variant-menu > button:nth-child(7) {
    grid-column: 6 / span 2;
}

.game-logo {
    width: 100%;
    aspect-ratio: 4 / 1.28;
    position: relative;
    display: grid;
    grid-template-rows: .45fr 1fr .75fr;
    place-items: center;
    overflow: hidden;
    padding: .16rem .45rem .22rem;
    border: clamp(3px, .36vw, 5px) ridge #b9bec6;
    color: #fff331;
    background: #080808;
    box-shadow:
        inset 0 0 0 3px #eff523,
        inset 0 0 0 6px #101010,
        0 .28rem .18rem rgba(0, 0, 0, .55);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 1000;
    line-height: .78;
    text-align: center;
    text-shadow: .08em .08em 0 #000;
}

.game-logo small {
    align-self: end;
    font-size: clamp(.42rem, .93vw, .83rem);
    letter-spacing: .035em;
    white-space: nowrap;
}

.game-logo b {
    align-self: center;
    font-size: clamp(.78rem, 1.65vw, 1.5rem);
    letter-spacing: .03em;
    white-space: nowrap;
}

.game-logo i {
    align-self: start;
    color: #fff;
    font-size: clamp(.6rem, 1.28vw, 1.16rem);
    font-style: normal;
    letter-spacing: .02em;
    white-space: nowrap;
}

.variant-menu > button:nth-child(2) .game-logo i,
.variant-menu > button:nth-child(4) .game-logo i,
.variant-menu > button:nth-child(6) .game-logo i,
.variant-menu > button:nth-child(7) .game-logo i {
    color: #42ff5c;
    font-size: clamp(.72rem, 1.55vw, 1.38rem);
    font-style: italic;
}

.variant-menu > button > strong {
    display: block;
    margin-top: .55rem;
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(.67rem, 1.25vw, 1.05rem);
    font-weight: 400;
    letter-spacing: .045em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

.variant-menu > button:hover .game-logo,
.variant-menu > button:focus-visible .game-logo,
.variant-menu > button.selected .game-logo {
    filter: brightness(1.14);
    box-shadow:
        inset 0 0 0 3px #ffff33,
        inset 0 0 0 6px #101010,
        0 0 0 3px #fff,
        0 0 1.2rem #51dcff;
}

.options-dialog {
    width: min(23.94rem, 92vw, calc(92vh * .664));
    height: min(36.06rem, 92vh, calc(92vw / .664));
    overflow: hidden;
    border: 1px solid #002a97;
    background: #0a3cbd;
    box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, .72);
}

.options-dialog.stats-open {
    width: min(35.63rem, 92vw, calc(92vh * .599));
    height: min(59.5rem, 92vh, calc(92vw / .599));
}

.options-shell {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: white;
    background: #0a3cbd;
    font-family: Arial, Helvetica, sans-serif;
}

.options-view {
    width: 100%;
    height: 100%;
}

.options-close {
    width: 1.75rem;
    height: 1.75rem;
    position: absolute;
    z-index: 10;
    inset: .35rem .35rem auto auto;
    display: grid;
    place-items: center;
    padding: 0 0 .1rem;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .62);
    background: rgba(1, 24, 112, .28);
    font: 1.35rem/1 Arial, sans-serif;
    cursor: pointer;
}

.options-close:hover,
.options-close:focus-visible {
    color: #fff52a;
    background: rgba(0, 0, 0, .32);
}

.options-home {
    padding: .2rem 1.85rem 1.4rem;
}

.options-home h2 {
    margin: 0;
    padding: 0 0 .55rem;
    border-bottom: 1px solid white;
    color: #fff41c;
    font-family: "Titan One", "Archivo Black", sans-serif;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.32;
    text-align: center;
    text-shadow: 1px 2px 0 #0a165d;
}

.options-home h2 span {
    display: block;
    font-size: 1.27rem;
    white-space: nowrap;
}

.options-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.95rem;
    padding-top: 2.55rem;
}

.machine-menu-button {
    width: 9.95rem;
    min-height: 3.35rem;
    display: grid;
    place-items: center;
    padding: .25rem .6rem;
    border: 2px solid #858600;
    border-radius: .78rem;
    color: #080808;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .28), transparent 34%),
        linear-gradient(#ffff3a, #e5e70b);
    box-shadow:
        inset 0 1px 1px white,
        inset 0 -3px 2px rgba(105, 109, 0, .36),
        0 2px 2px rgba(0, 0, 0, .55);
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: 1.22rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.machine-menu-button:hover,
.machine-menu-button:focus-visible {
    filter: brightness(1.12);
}

.sound-menu-button svg {
    width: 4.6rem;
    height: 2.5rem;
    overflow: visible;
    fill: #f4514d;
    stroke: #7d4513;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.sound-menu-button .sound-wave {
    fill: none;
    stroke: #f4514d;
    stroke-width: 5;
}

.sound-menu-button.muted .sound-wave {
    display: none;
}

.speed-menu-button {
    grid-template-columns: auto auto;
    gap: .45rem;
}

.speed-menu-button strong {
    font-size: 1.12rem;
}

.speed-chevrons {
    display: flex;
    gap: 1px;
}

.speed-chevrons i {
    width: 1rem;
    height: 1.75rem;
    display: block;
    clip-path: polygon(0 0, 43% 0, 100% 50%, 43% 100%, 0 100%, 57% 50%);
    background: #c7c8bd;
    box-shadow: inset 0 0 0 1px #515151;
}

.speed-menu-button[data-speed="3"] .speed-chevrons i:nth-child(-n+2),
.speed-menu-button[data-speed="5"] .speed-chevrons i {
    background: #f2402f;
}

.speed-menu-button[data-speed="1"] .speed-chevrons i:first-child {
    background: #f2402f;
}

.options-detail {
    position: relative;
    overflow: hidden;
}

.options-detail-header {
    min-height: 4.8rem;
    position: relative;
    display: flex;
    align-items: center;
    padding: .4rem 1.35rem 0;
    border-bottom: 1px solid white;
}

.options-detail-header h2 {
    margin: 0;
    color: #fff424;
    font: 400 1.45rem/1.1 "Titan One", "Archivo Black", sans-serif;
}

.options-back {
    width: 2.1rem;
    height: 2.1rem;
    position: absolute;
    z-index: 2;
    inset: 1.1rem 2.85rem auto auto;
    display: grid;
    place-items: center;
    padding: 0 .1rem .2rem 0;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    color: white;
    background: rgba(0, 22, 105, .44);
    font: 2rem/1 Arial, sans-serif;
    cursor: pointer;
}

.options-detail-body {
    padding: .8rem 1.35rem 1.2rem;
}

.options-detail .switch-row {
    min-height: 5rem;
    border-color: rgba(255, 255, 255, .32);
}

.options-detail .switch-row strong {
    color: white;
    font-size: .92rem;
}

.options-detail .switch-row small {
    color: rgba(255, 255, 255, .72);
}

.options-detail .switch {
    background: #08247f;
}

.stats-scroll,
.about-scroll {
    height: calc(100% - 4.8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #fff42a #082a94;
}

.stats-ledger {
    margin: .2rem 1.9rem 1.15rem;
    font: 1.18rem/1.38 Arial, Helvetica, sans-serif;
}

.stats-ledger div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .8rem;
}

.stats-ledger dt,
.stats-ledger dd {
    margin: 0;
}

.stats-ledger dd {
    min-width: 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stats-ledger .stats-sub dt {
    padding-left: 1.85rem;
}

.stats-ledger .stats-sub {
    font-size: 1.08rem;
}

.detail-action {
    width: calc(50% - .5rem);
    min-height: 2.75rem;
    display: inline-grid;
    margin: .25rem;
    font-size: .82rem;
}

.secondary-action {
    color: white;
    border-color: #163c85;
    background: linear-gradient(#4165a9, #153776);
}

.about-copy {
    margin: .2rem 0 .8rem;
    font: .82rem/1.45 Arial, sans-serif;
}

.choice-fieldset {
    margin: .9rem 0;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: .5rem;
}

.choice-fieldset legend {
    padding: 0 .35rem;
    color: #fff52a;
    font: .78rem "Archivo Black", sans-serif;
}

.segmented-options,
.felt-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.segmented-options input,
.felt-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
}

.segmented-options label,
.felt-options label {
    min-height: 2.8rem;
    display: grid;
    place-items: center;
    gap: .2rem;
    padding: .4rem;
    border: 2px solid #193a8f;
    border-radius: .35rem;
    background: #082574;
    font-size: .68rem;
    text-align: center;
    cursor: pointer;
}

.segmented-options input:checked + label,
.felt-options input:checked + label {
    border-color: #fff52a;
    box-shadow: 0 0 .6rem rgba(255, 245, 42, .6);
}

.segmented-options input:focus-visible + label,
.felt-options input:focus-visible + label {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.suit-swatch {
    font: 1.15rem Georgia, serif;
}

.two-color {
    color: #ff2c3e;
    text-shadow: 1.7em 0 #fff;
}

.four-color {
    color: #ff2c3e;
    word-spacing: .18em;
}

.felt-swatch {
    width: 1.5rem;
    height: 1rem;
    border: 1px solid white;
    border-radius: .2rem;
}

.felt-blue { background: #0738b9; }
.felt-emerald { background: #087044; }
.felt-burgundy { background: #7d1739; }
.felt-midnight { background: #151d39; }

.rebuy-dialog {
    width: min(29.6rem, 94vw, 94vh);
    height: min(29.6rem, 94vw, 94vh);
    overflow: hidden;
    background: #000;
    box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, .8);
}

.rebuy-panel {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    padding: .3rem 1.3rem .2rem;
    color: white;
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.rebuy-panel h2 {
    margin: 0;
    padding-bottom: .15rem;
    border-bottom: 1px solid white;
    color: #fff719;
    font-size: 1.78rem;
    font-style: italic;
    line-height: 1.12;
    text-align: center;
}

.rebuy-panel > p {
    margin: .2rem 0 0;
    font-size: 1.15rem;
    font-style: italic;
    text-align: center;
}

.rebuy-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 2rem;
    padding: 1.8rem 2.8rem .75rem;
}

.rebuy-amounts > button {
    padding: .25rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.play-bill {
    width: 7.25rem;
    height: 16.15rem;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #dbe3b0;
    color: #fff;
    background:
        radial-gradient(circle at 50% 36%, rgba(72, 76, 51, .75) 0 16%, transparent 17%),
        repeating-linear-gradient(45deg, rgba(59, 85, 57, .19) 0 2px, transparent 2px 5px),
        #c8d5a2;
    box-shadow: inset 0 0 0 2px #697256, 0 .15rem .3rem #000;
}

.play-bill::before {
    content: "$";
    position: absolute;
    color: rgba(60, 77, 56, .55);
    font: 7rem/1 Georgia, serif;
    rotate: -12deg;
}

.play-bill small {
    position: absolute;
    inset: .4rem auto auto;
    color: #34442e;
    font: .5rem "Archivo Black", sans-serif;
}

.play-bill strong {
    z-index: 1;
    font: 3.15rem/1 "Anton", Impact, sans-serif;
    letter-spacing: -.05em;
    text-shadow:
        -2px -2px 0 #304f51,
        2px -2px 0 #304f51,
        -2px 2px 0 #304f51,
        2px 2px 0 #304f51;
}

.play-bill-gold {
    border-color: #ead9a8;
    background:
        radial-gradient(circle at 50% 36%, rgba(100, 76, 42, .65) 0 16%, transparent 17%),
        repeating-linear-gradient(45deg, rgba(105, 77, 44, .16) 0 2px, transparent 2px 5px),
        #dac795;
}

.rebuy-amounts > button.selected .play-bill,
.rebuy-amounts > button:hover .play-bill,
.rebuy-amounts > button:focus-visible .play-bill {
    outline: 4px solid #fff719;
    box-shadow: 0 0 1rem #fff719;
}

.rebuy-actions {
    display: flex;
    justify-content: space-around;
    padding: 0 2.9rem;
}

.rebuy-actions button {
    width: 6.7rem;
    min-height: 5.7rem;
    padding: .35rem;
    border: .42rem ridge #565a5e;
    color: #181818;
    background: linear-gradient(#f2f0d9, #d8d7c5);
    box-shadow: inset 0 0 0 2px #777, 0 .2rem .3rem #000;
    font: 1.25rem/1.05 "Anton", Impact, sans-serif;
    cursor: pointer;
}

body[data-card-colors="four"] .playing-card[data-suit="diamonds"],
body[data-card-colors="four"] .mini-card[data-suit="diamonds"] {
    color: #1768d5;
}

body[data-card-colors="four"] .playing-card[data-suit="clubs"],
body[data-card-colors="four"] .mini-card[data-suit="clubs"] {
    color: #07894f;
}

body[data-card-colors="four"] .playing-card[data-suit="hearts"],
body[data-card-colors="four"] .mini-card[data-suit="hearts"] {
    color: #e41d36;
}

body[data-felt="blue"] {
    --active-felt: #0738b9;
}

body[data-felt="emerald"] {
    --active-felt: #087044;
}

body[data-felt="burgundy"] {
    --active-felt: #7d1739;
}

body[data-felt="midnight"] {
    --active-felt: #151d39;
}

body[data-felt] .machine,
body[data-felt] .game-screen,
body[data-felt] .focus-zone {
    background-color: var(--active-felt);
}

body[data-felt]:not([data-felt="blue"]) .game-screen {
    background-image:
        radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .08), transparent 62%),
        linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 50%, rgba(0, 0, 0, .18));
}

.games-dialog[open] .games-panel,
.options-dialog[open] .options-shell,
.rebuy-dialog[open] .rebuy-panel {
    animation: dialog-in .22s ease-out both;
}

@media (max-width: 720px) {
    .games-dialog {
        width: min(34rem, 94vw);
        max-height: 92vh;
        overflow-y: auto;
    }

    .games-panel {
        min-height: 0;
        padding: 1rem;
    }

    .games-intro {
        margin-bottom: 1rem;
    }

    .variant-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem .75rem;
    }

    .variant-menu > button,
    .variant-menu > button:nth-child(5),
    .variant-menu > button:nth-child(6),
    .variant-menu > button:nth-child(7) {
        grid-column: auto;
    }

    .game-logo small {
        font-size: clamp(.34rem, 2.05vw, .72rem);
    }

    .game-logo b {
        font-size: clamp(.6rem, 3.5vw, 1.22rem);
    }

    .game-logo i {
        font-size: clamp(.5rem, 2.8vw, 1rem);
    }

    .options-home {
        padding-inline: 1.45rem;
    }

    .options-home h2 {
        font-size: clamp(1.22rem, 6vw, 1.55rem);
    }

    .options-home h2 span {
        font-size: clamp(1rem, 5vw, 1.27rem);
    }

    .options-menu {
        gap: clamp(1.2rem, 5vh, 1.95rem);
        padding-top: clamp(1.4rem, 6vh, 2.55rem);
    }

    .rebuy-panel {
        padding-inline: .75rem;
    }

    .rebuy-panel h2 {
        font-size: clamp(1.2rem, 6vw, 1.78rem);
    }

    .rebuy-panel > p {
        font-size: clamp(.78rem, 4vw, 1.15rem);
    }

    .rebuy-amounts {
        gap: 1rem;
        padding: 1rem 1.3rem .5rem;
    }

    .play-bill {
        width: min(7.25rem, 25vw);
        height: min(16.15rem, 48vw);
    }

    .play-bill strong {
        font-size: clamp(1.8rem, 10vw, 3.15rem);
    }

    .rebuy-actions {
        padding-inline: 1.5rem;
    }

    .rebuy-actions button {
        width: min(6.7rem, 27vw);
        min-height: min(5.7rem, 22vw);
        font-size: clamp(.8rem, 5vw, 1.25rem);
    }
}

@media (max-height: 650px) and (min-width: 721px) {
    .options-menu {
        gap: 1.15rem;
        padding-top: 1.35rem;
    }

    .machine-menu-button {
        min-height: 2.85rem;
    }
}