:root {
    --felt: #15604a;
    --felt-dark: #0e3f31;
    --felt-light: #1b7a5e;
    --gold: #e7c463;
    --gold-dark: #b8862b;
    --cream: #f5efdd;
    --ink: #1c1c1c;
    --red: #c2362f;
    --black: #1c1c1c;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--cream);
    background: radial-gradient(ellipse at top, var(--felt-light), var(--felt) 45%, var(--felt-dark) 100%);
    -webkit-tap-highlight-color: transparent;
}

#app, .app-shell { min-height: 100%; }

h1, h2 { font-weight: 800; letter-spacing: .02em; margin: 0; }

button {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--gold-dark);
    background: #1d2a25;
    color: var(--cream);
    padding: 8px 16px;
    border-radius: 9px;
    transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
}
button:hover { background: #25382f; }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #2a1d05; border-color: var(--gold-dark); font-weight: 800; }
button.primary:hover { filter: brightness(1.06); }
/* Disabled controls must clearly read as unavailable (e.g. a peek button once its pile
   is fully revealed): muted, no hover/lift, not-allowed cursor. */
button:disabled {
    background: #2a2a2a; color: #ffffff55; border-color: #ffffff22;
    cursor: not-allowed; opacity: .55; filter: none; transform: none;
}
button:disabled:hover { background: #2a2a2a; filter: none; }
button.big { padding: 12px 26px; font-size: 17px; }
button.link { background: none; border: none; color: var(--gold); text-decoration: underline; padding: 6px; }

/* ---------------- Setup screen ---------------- */
.setup {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}
.setup h1 { font-size: 56px; color: var(--gold); text-shadow: 0 2px 0 #00000040; }
.tagline { color: #d8e8df; margin-top: -4px; }
.setup-card {
    background: #ffffff10;
    border: 1px solid #ffffff22;
    border-radius: 16px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    backdrop-filter: blur(4px);
}
.setup-card label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: #cfe3da; }
.opp-pick { display: flex; gap: 8px; }
.opp-pick button { width: 44px; height: 44px; padding: 0; font-weight: 800; }
.opp-pick button.active { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #2a1d05; }
.variant-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.variant-pick button { padding: 9px 14px; font-weight: 700; font-size: 13px; }
.variant-pick button.active { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #2a1d05; }
.hint { font-size: 13px; color: #bcd4ca; margin: 0; }
.rules { max-width: 560px; background: #ffffff10; border-radius: 12px; padding: 16px 20px; font-size: 14px; line-height: 1.5; text-align: left; }
.rules p { margin: 0 0 10px; }

/* ---------------- Table ---------------- */
.table {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10px 14px 16px;
    gap: 8px;
    position: relative;
}
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 800; color: var(--gold); font-size: 20px; letter-spacing: .04em; }
.status { font-size: 14px; color: #d8e8df; background: #00000030; padding: 4px 12px; border-radius: 20px; }
.topbar-actions { display: flex; gap: 4px; align-items: center; }

/* ---------------- 3-card-poker legend ---------------- */
.legend {
    position: fixed;
    top: 58px;
    right: 12px;
    width: 236px;
    z-index: 30;
    background: #0e3f31f2;
    border: 1px solid var(--gold-dark);
    border-radius: 12px;
    padding: 10px 13px 12px;
    box-shadow: 0 10px 28px #0008;
}
.legend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.legend-head h3 { font-size: 12.5px; font-weight: 800; color: var(--gold); letter-spacing: .02em; text-transform: uppercase; }
.legend-close { background: none; border: none; color: #cfe3da; font-size: 20px; line-height: 1; padding: 0 4px; }
.legend-close:hover { background: none; color: var(--gold); }
.legend .lrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed #ffffff1f; }
.legend .lrow:first-of-type { border-top: none; }
.legend .lname { flex: 0 0 74px; font-size: 12px; font-weight: 700; color: var(--cream); }
.legend .lex { display: flex; gap: 3px; }
.legend .mini {
    background: linear-gradient(160deg, #fffdf6, #f1e9d2);
    color: var(--black);
    border: 1px solid #0003;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.1;
}
.legend .mini.red { color: var(--red); }
.legend-foot { margin-top: 8px; font-size: 10.5px; line-height: 1.45; color: #bcd4ca; }
.legend-foot b { color: var(--gold); }

/* Wide five-card variant (Lucky Sevens, Bullseye, Lowe-Mac, Raz): more room for five
   mini-cards per row, and pinned to the LEFT so it clears the right-hand recap panel. */
.legend.legend-wide { width: 300px; left: 12px; right: auto; }
.legend.legend-wide .lname { flex: 0 0 66px; }

@media (max-width: 720px) {
    .legend { position: static; width: auto; margin: 0 auto; box-shadow: none; }
    .legend.legend-wide { width: auto; }
}

.opponents {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
}
.pot { font-size: 18px; background: #00000035; padding: 6px 18px; border-radius: 22px; border: 1px solid var(--gold-dark); }
.pot b { color: var(--gold); }
.narration { font-size: 13.5px; color: #cfe3da; min-height: 18px; text-align: center; max-width: 680px; }

/* Raise counter for the current betting round — shared by every playable game.
   Turns gold/“capped” when the 3-raise limit is reached. */
.raise-meter { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #cfe3da;
    background: #00000035; border: 1px solid #ffffff22; border-radius: 14px; padding: 3px 12px; }
.raise-meter.capped { color: #ffd9a8; border-color: var(--gold-dark);
    background: #3a2a0d66; box-shadow: 0 0 0 1px var(--gold-dark) inset; }

.hero-area {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; min-height: 44px; }
.prompt { font-size: 14px; color: var(--cream); }
.prompt.muted { color: #9fb8ae; font-style: italic; }

/* ---------------- Seats ---------------- */
.seat {
    background: #00000022;
    border: 1px solid #ffffff1a;
    border-radius: 12px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 120px;
    transition: box-shadow .2s, border-color .2s, opacity .2s;
}
.seat.hero { background: #00000033; padding: 12px 16px 8px; }
.seat.current { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 18px #e7c46355; }
.seat.folded { opacity: .42; }
.seat.out { opacity: .5; }
/* Busted player: no pyramid is dealt — show a placeholder in its place. */
.pyramid-out {
    display: flex; align-items: center; justify-content: center;
    min-height: 96px; padding: 8px 10px; text-align: center;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #9fb8ae;
    border: 1px dashed #ffffff26; border-radius: 10px; background: #00000018;
}
.seat-head { display: flex; justify-content: space-between; width: 100%; gap: 12px; font-size: 13px; }
.seat-name { font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.dealer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fffdf6, #e7c463);
    color: #2a1d05;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 1px 2px #0006;
}
.seat-stack { color: var(--gold); font-weight: 700; }
.seat-foot { min-height: 20px; }
.badge { font-size: 11px; font-weight: 700; background: #ffffff1f; border-radius: 6px; padding: 2px 8px; }
.badge.win { background: var(--gold); color: #2a1d05; }
.badge.fold { background: #00000040; color: #cbb; }

.pyramid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prow { display: flex; gap: 4px; justify-content: center; }

/* ---------------- Cards ---------------- */
.card {
    --w: 46px;
    --rk: 13px;
    --pip: 26px;
    position: relative;
    width: var(--w);
    height: calc(var(--w) * 1.42);
    background: linear-gradient(160deg, #fffdf6, #f1e9d2);
    border-radius: 7px;
    border: 1px solid #0000001f;
    box-shadow: 0 2px 4px #00000055, inset 0 0 0 1px #ffffffaa;
    user-select: none;
    color: var(--ink);
    flex: none;
}
.card.sz-sm { --w: 38px; --rk: 11px; --pip: 21px; }
.card.sz-md { --w: 46px; --rk: 13px; --pip: 26px; }
.card.sz-lg { --w: 62px; --rk: 16px; --pip: 34px; }

.card .corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-weight: 800;
}
.card .corner .rk { font-size: var(--rk); letter-spacing: -0.04em; }
.card .corner .st { font-size: calc(var(--rk) * 0.82); margin-top: 1px; }
.card .corner.tl { top: 3px; left: 4px; }
.card .corner.br { bottom: 3px; right: 4px; transform: rotate(180deg); }

.card .pip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pip);
    opacity: .92;
    pointer-events: none;
}
.card .red, .card.red { color: var(--red); }
.card .black, .card.black { color: var(--black); }

.card.facedown {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 5px, #ffffff14 5px, #ffffff14 10px),
        linear-gradient(160deg, #2d5a9e, #1b3a73);
    border: 1px solid #ffffff40;
    box-shadow: 0 2px 4px #00000055, inset 0 0 0 2px #ffffff22;
}
.card.facedown .back {
    position: absolute;
    inset: 4px;
    border: 1px solid #ffffff44;
    border-radius: 4px;
}

.card.selected { outline: 3px solid var(--gold); outline-offset: 1px; transform: translateY(-5px); z-index: 2; }

/* A face-down deck pinned to the lower-left corner of the table. The flying-deal
   animation (card-deal.js) deals cards out from here and shrinks them to the seat
   size. Shared by every playable game (Pyramid, ThreeFour War, …). */
.card-deck { position: fixed; left: 22px; bottom: 22px; width: 84px; height: 119px; z-index: 5; }
.card-deck .pile {
    position: absolute; inset: 0; border-radius: 9px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 4px, #ffffff14 4px, #ffffff14 8px),
        linear-gradient(160deg, #2d5a9e, #1b3a73);
    border: 1px solid #ffffff40; box-shadow: 0 2px 4px #00000055, inset 0 0 0 2px #ffffff22;
}
.card-deck .pile:nth-child(2) { transform: translate(3px, -3px); }
.card-deck .pile:nth-child(3) { transform: translate(6px, -6px); }
.card-deck .deck-label {
    position: absolute; bottom: -17px; left: -4px; right: -4px; text-align: center;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #ffffff66;
}
.card-deck.dealing { animation: deck-deal .4s ease; }
@keyframes deck-deal { 30% { transform: translateY(-2px) rotate(-2.5deg); } }
@media (prefers-reduced-motion: reduce) { .card-deck.dealing { animation: none; } }
@media (max-width: 720px) {
    .card-deck { left: 10px; bottom: 10px; width: 60px; height: 85px; }
}

/* Bench: extra dealt cards under a burn variant, waiting to be placed or discarded. */
.bench { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px;
    padding: 12px 14px; border: 1px dashed #ffffff2e; border-radius: 14px; background: #ffffff0d; }
.bench-label { font-size: 12.5px; color: #bcd4ca; text-align: center; }
.bench-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bench-row .card.selected { outline: 3px solid var(--gold); outline-offset: 1px; transform: translateY(-5px); z-index: 2; }
/* A winning row's cards glow gold and lean toward the table middle so it's clear which cards took the
   third. The pyramid is stacked vertically with tight row gaps, so the lean stays small (unlike the
   bigger stud-row nudge): the hero (bottom) lifts UP toward centre, opponents (top) lean DOWN toward it. */
.card.win { box-shadow: 0 0 0 2px var(--gold), 0 0 16px #e7c463cc; transform: translateY(-3px); z-index: 2; }
.seat:not(.hero) .card.win { transform: translateY(3px); }
/* The hero's own cards that aren't turned up yet: shown so you can plan, but overlaid
   with the blue "face-down" wash so it's unmistakable the table can't see them — one
   of these stays hidden until the final round, exactly like every opponent's. */
.card.dim::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 1px solid #ffffff55;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 5px, #ffffff10 5px, #ffffff10 10px),
        linear-gradient(160deg, #2d5a9e73, #1b3a738f);
}
.card.dim .corner, .card.dim .pip { opacity: .85; }   /* still legible under the wash */
.card[role="button"] { cursor: pointer; transition: transform .08s ease, box-shadow .12s ease; }
.card[role="button"]:hover { transform: translateY(-4px); box-shadow: 0 5px 10px #0008; }
.card.grab { cursor: grab; }
.card.grab:active { cursor: grabbing; }
.card.dragging { opacity: .35; transform: scale(.94); }

/* Swap target: the card you're hovering while dragging pulses to show it'll swap. */
.card.dragover {
    outline: 3px dashed var(--gold);
    outline-offset: 2px;
    z-index: 4;
    animation: swap-hint .5s ease-in-out infinite;
}
@keyframes swap-hint {
    0%, 100% { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 14px #0009, 0 0 0 2px #e7c46355; }
    50%      { transform: translateY(-3px) scale(1.12); box-shadow: 0 10px 20px #000a, 0 0 0 3px #e7c46399; }
}
@media (prefers-reduced-motion: reduce) {
    .card.dragover { animation: none; transform: translateY(-3px) scale(1.06); }
}

/* ---------------- Showdown overlay ---------------- */
.overlay {
    position: fixed;
    inset: 0;
    background: #000000aa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 20;
}
.result {
    background: linear-gradient(180deg, #1b3a30, #11271f);
    border: 1px solid var(--gold-dark);
    border-radius: 16px;
    padding: 22px 26px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px #000a;
}
.result h2 { color: var(--gold); margin-bottom: 14px; }

/* "Study the board": minimize the result panel after a hand, plus a floating button
   to bring it back, so the final table stays visible. Shared by every playable game. */
.result .studyboard { display: block; margin: 10px auto 0; }
.show-result {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #2a1d05;
    border: 1px solid var(--gold-dark); border-radius: 10px; font-weight: 800;
    padding: 10px 18px; box-shadow: 0 4px 12px #0007;
}
.rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rrow {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "label win amt" "label desc amt";
    gap: 0 10px;
    background: #ffffff10;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: left;
    align-items: center;
}
.rlabel { grid-area: label; font-weight: 800; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.rwin { grid-area: win; font-weight: 700; }
.ramt { grid-area: amt; font-weight: 800; color: var(--gold); }
.rdesc { grid-area: desc; font-size: 12px; color: #bcd4ca; }
.net { font-size: 15px; margin: 6px 0 14px; }
.net.up b { color: var(--gold); }
.bust { color: #ff9b8f; font-weight: 700; }
.win { color: var(--gold); font-weight: 800; font-size: 17px; margin: 6px 0 14px; }

/* ---------------- Blazor framework bits ---------------- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

#blazor-error-ui {
    background: #2a1d05;
    color: var(--cream);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.8rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -1px 2px #0006;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .75rem; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 30vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #ffffff33;
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--gold);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--cream);
    inset: calc(30vh + 3.25rem) 0 auto 0;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ---------------- Not-yet-interactive gate ---------------- */
/* A prerendered /play page is fully drawn but cannot respond to a click until the WebAssembly
   runtime has loaded. Instead of letting controls silently swallow input, block the whole table
   and mute every control so it plainly reads as unavailable — same muted treatment as a genuinely
   disabled button above — then clear the moment the game goes interactive. */
.game-gate-waiting {
    pointer-events: none;
    user-select: none;
}
.game-gate-waiting button,
.game-gate-waiting input,
.game-gate-waiting select,
.game-gate-waiting textarea {
    background: #2a2a2a; color: #ffffff55; border-color: #ffffff22;
    cursor: not-allowed; opacity: .55; filter: none; transform: none;
}
.game-gate-waiting a { opacity: .55; cursor: not-allowed; }

.game-gate-banner {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #14201bee;
    border-bottom: 1px solid var(--gold-dark);
    color: var(--cream);
    font-weight: 700;
    letter-spacing: .2px;
}
.game-gate-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid #ffffff33;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: game-gate-spin .8s linear infinite;
}
@keyframes game-gate-spin { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference — hold a static ring rather than spinning. */
@media (prefers-reduced-motion: reduce) {
    .game-gate-spinner { animation: none; }
}