/* Video Poker table. Loads on top of ../casino.css. */

.poker-table {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: 1.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

.poker-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.8rem;
}

.poker-title {
    font-size: clamp(3.1rem, 8.7vw, 4.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 2px 0 var(--gold-deep);
    line-height: 1;
    justify-self: center;
    transform: translateY(1.1rem);
}

.poker-metrics {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-self: end;
}

.poker-top .back-link {
    justify-self: start;
}

/* === Paytable === */
.paytable-card {
    background:
        linear-gradient(135deg, rgba(251, 191, 36, 0.08), transparent 45%),
        var(--panel);
    border: 2px solid var(--panel-edge);
    border-radius: 18px;
    padding: 0.8rem 1rem;
}

.paytable-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    align-items: flex-start;
}

.paytable-eyebrow {
    display: block;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.paytable-heading h2 {
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.paytable-heading p {
    color: var(--ink-dim);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.rules-help {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    color: var(--ink);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--panel-edge);
    border-radius: 999px;
    padding: 0.45em 0.75em;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
}

.rules-help > span {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--felt-deep);
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.72rem;
}

.rules-help:hover,
.rules-help:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
}

.paytable {
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    margin-top: 0.65rem;
}

.paytable-body {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
}

.pay-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    min-height: 5.25rem;
    padding: 0.75rem 0.35rem 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pay-row:first-child {
    border-left: 0;
}

.pay-row.is-winner {
    background: rgba(251, 191, 36, 0.16);
    box-shadow: inset 0 -3px 0 var(--gold);
}

.pay-hand {
    order: 2;
    min-height: 2.35em;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.15;
    font-weight: 700;
}

.pay-multiplier {
    order: 1;
    color: var(--gold);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.pay-win-marker {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rules-dialog {
    width: min(980px, calc(100vw - 2rem));
    max-height: min(680px, calc(100dvh - 2rem));
    padding: 1.6rem;
    position: relative;
    color: var(--ink);
    background:
        radial-gradient(ellipse at top, var(--felt-mid), var(--felt-deep) 70%);
    border: 2px solid var(--gold-dim);
    border-radius: 16px;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.72);
    scrollbar-width: none;
}

.rules-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.rules-dialog::-webkit-scrollbar,
.hand-scroll::-webkit-scrollbar {
    display: none;
}

.rules-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.out-of-chips-dialog {
    width: min(420px, calc(100vw - 2rem));
    padding: 1.6rem;
    color: var(--ink);
    text-align: center;
    background:
        radial-gradient(ellipse at top, var(--felt-mid), var(--felt-deep) 70%);
    border: 2px solid var(--gold-dim);
    border-radius: 16px;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.72);
}

.out-of-chips-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
}

.out-of-chips-close {
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    width: auto;
    height: auto;
    padding: 0.1rem 0.25rem;
    border: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.out-of-chips-close:hover,
.out-of-chips-close:focus-visible {
    color: var(--danger);
    outline: none;
}

.out-of-chips-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.out-of-chips-dialog h2 {
    color: var(--gold);
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.out-of-chips-dialog p {
    margin: 0.8rem 0 1.25rem;
    color: var(--ink-dim);
}

.out-of-chips-dialog .btn {
    display: inline-block;
    text-decoration: none;
}

.out-of-chips-dialog .btn:focus-visible {
    outline: none;
}

.rules-dialog-top {
    padding-right: 2.25rem;
}

.rules-dialog h2 {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rules-close {
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    width: auto;
    height: auto;
    padding: 0.1rem 0.25rem;
    border: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.rules-close:hover,
.rules-close:focus-visible {
    color: var(--danger);
    outline: none;
}

.rules-explainer {
    color: var(--ink-dim);
    font-size: 0.87rem;
    margin: 1.1rem 0 1.45rem;
}

.hand-examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0;
}

.hand-example {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.hand-example h3 {
    color: var(--gold);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.example-cards {
    display: flex;
    gap: 2px;
    margin: 0.45rem 0;
    overflow: hidden;
}

.example-cards .card-face {
    --scale: 1;
}

.hand-example p {
    color: var(--ink-dim);
    font-size: 0.7rem;
    line-height: 1.3;
}

/* === The hand === */
.hand-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.hand-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0.5rem 0.5rem;
    scrollbar-width: none;
}

.hand-row {
    display: flex;
    gap: calc(3px * var(--scale));
    justify-content: center;
    margin: 0 auto;
    width: max-content;
    list-style: none;
}

.card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

.hold-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--felt-deep);
    background: var(--gold);
    border-radius: 4px;
    padding: 0.15em 0.6em;
    /* Reserve the row so the cards don't jump when a tag appears. */
    visibility: hidden;
}

.card-slot[aria-pressed='true'] .hold-tag {
    visibility: visible;
}

.card-frame {
    position: relative;
    border-radius: 5px;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
}

.card-slot[aria-pressed='true'] .card-frame {
    transform: translateY(calc(-3px * var(--scale)));
    box-shadow:
        0 calc(6px * var(--scale)) calc(6px * var(--scale)) rgba(0, 0, 0, 0.5),
        0 0 0 3px var(--gold);
}

.card-slot:not(:disabled):hover .card-frame {
    transform: translateY(calc(-1px * var(--scale)));
}

/* Cards that made the winning hand. Needs to outrank the held outline above —
   once the hand is resolved, "this card scored" is the more useful signal than
   "you held it", and every scoring card is usually held too. Matching that
   rule's specificity and coming later is what makes it win. */
.card-slot .card-frame.is-scoring {
    box-shadow: 0 0 0 3px var(--win), 0 0 24px rgba(52, 211, 153, 0.6);
}

.card-hotkey {
    font-size: 0.7rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* Deal / draw animation. */
@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(-14px) rotateX(45deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.card-frame.is-entering {
    animation: card-in 0.22s ease-out both;
}

/* === Result === */
.result {
    min-height: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
}

.result-hand {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}

.result-amount {
    font-size: 1.05rem;
    color: var(--win);
    font-variant-numeric: tabular-nums;
}

.result.is-loss .result-hand {
    color: var(--ink-dim);
}

.result.is-big-win {
    border-radius: 12px;
    animation: rare-win 0.8s ease-out;
}

@keyframes rare-win {
    0% {
        background: rgba(251, 191, 36, 0.32);
        box-shadow: 0 0 32px rgba(251, 191, 36, 0.5);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

.result-hint {
    color: var(--ink-dim);
    font-size: 0.9rem;
}

/* === Controls === */
.controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.wager-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.wager-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.wager-input {
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    width: 8ch;
    text-align: right;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--panel-edge);
    border-radius: 8px;
    padding: 0.45em 0.6em;
    -webkit-user-select: none;
    user-select: none;
}

.wager-input:disabled {
    opacity: 0.5;
}

.wager-input.is-invalid {
    border-color: var(--danger);
    color: var(--danger);
}

.wager-error {
    color: #fecaca;
    font-size: 0.78rem;
    text-align: center;
    margin-top: -0.5rem;
}

.wager-error[hidden] {
    display: none;
}

.wager-quick {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: transparent;
    border: 2px solid var(--ink-faint);
    border-radius: 8px;
    padding: 0.45em 0.75em;
    cursor: pointer;
}

.wager-quick:hover:not(:disabled),
.wager-quick:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
}

.wager-quick:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.action-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-deal {
    font-size: 1.15rem;
    padding: 0.75em 2.4em;
}

/* === Responsive =========================================================
   Scale steps stay integers so the pixel art never resamples.

   The hand row is 5 * 48px * scale plus 4 gaps of 3px * scale = 252px * scale,
   and .table adds 32px of padding. Each breakpoint therefore engages just
   BEFORE the previous scale would overflow:
       scale 5 -> 1292px    scale 4 -> 1040px    scale 3 -> 788px
       scale 2 ->  536px    scale 1 -> 284px
   Being able to see all five cards at once is the whole game — a scrolling
   hand would mean choosing holds blind — so the last step goes down to 1x
   (native art size) rather than letting the row scroll. .hand-scroll stays as
   a safety net for anything narrower still, and keeps the sideways scroll
   inside the row so the page itself never scrolls horizontally. */
@media (min-width: 1400px) and (min-height: 900px) {
    :root {
        --scale: 5;
    }
}

@media (max-width: 1060px) {
    :root {
        --scale: 3;
    }
}

@media (max-width: 800px) {
    :root {
        --scale: 2;
    }

    .poker-table {
        gap: 1rem;
    }
}

@media (max-width: 700px) {
    .poker-top {
        grid-template-columns: 1fr auto;
    }

    .poker-title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .poker-top .back-link,
    .poker-metrics {
        grid-row: 2;
    }
}

@media (min-width: 700px) and (min-height: 800px) {
    .poker-table {
        height: 100dvh;
        overflow: hidden;
        gap: 1.2rem;
    }

    .hand-area {
        gap: 0.55rem;
    }

    .controls {
        gap: 0.65rem;
    }
}

@media (max-width: 760px) {
    .paytable-body,
    .hand-examples {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    :root {
        --scale: 1;
    }

    /* At native size the cards are small, so give the tap targets some room. */
    .hand-row {
        gap: 8px;
    }

    .hold-tag {
        font-size: 0.6rem;
        padding: 0.1em 0.4em;
    }
}

@media (prefers-reduced-motion: reduce) {

    .card-frame,
    .card-frame.is-entering {
        animation: none;
        transition: none;
    }

    .result.is-big-win {
        animation: none;
    }
}