/* ─────────────────────────────────────────────────────────────────────────────
   games/poker/assets/poker.css — shared look for the Fuego Poker Room.
   Same palette and fonts as the other Fuego Arcade games (Bebas Neue + Rubik).
   Playing cards come from FuegoPoker.cardEl(); size them with --fp-w.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --bg1: #05060e; --bg2: #0e0418; --neon: #ff5a1f; --neon2: #ffd166;
    --ui: #0a0c18ee; --text: #e9f1ff; --muted: #9aa3bb; --good: #32d296; --bad: #ff4d6d;
    --green: #39ff14;
    --felt1: #0f4d38; --felt2: #072a1f; --rail: #24110a;
    --fp-w: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg1); color: var(--text);
    font-family: 'Rubik', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }

/* ── Top bar ── */
.fp-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .55rem .9rem; background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35));
    border-bottom: 1px solid rgba(255,90,31,.18); position: relative; z-index: 10; }
.fp-top-left, .fp-top-right { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fp-logo { font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 1.35rem; line-height: 1;
    color: var(--neon); text-shadow: 0 0 14px #ff7a3a, 0 0 40px #ff5a1f; white-space: nowrap; }
.fp-back-link { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--text);
    font-weight: 700; font-size: .8rem; padding: .35rem .65rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); white-space: nowrap; }
.fp-back-link:hover { border-color: var(--neon); }
.fp-icon-btn { cursor: pointer; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
    color: var(--text); border-radius: 999px; padding: .35rem .6rem; font-size: .8rem; font-weight: 700; }
.fp-icon-btn:hover { border-color: var(--neon); }
.fp-icon-btn[aria-pressed="false"] { opacity: .6; }

/* ── Pills, keys ── */
.fp-pill { display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .22rem .7rem;
    font-size: .82rem; font-weight: 700; white-space: nowrap; }
.fp-pill strong { color: var(--neon2); }
.fp-kbd { font-family: ui-monospace, monospace; background: #00000055; padding: .08rem .32rem; border-radius: .25rem;
    border: 1px solid rgba(255,255,255,.25); font-size: .72rem; }

/* ── Buttons ── */
.fp-btn { cursor: pointer; padding: .65rem 1.15rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
    background: linear-gradient(160deg, rgba(255,90,31,.18), rgba(0,0,0,.3)); color: var(--text);
    font-weight: 800; font-size: .95rem; letter-spacing: .04em; transition: transform .08s, filter .08s, opacity .15s;
    touch-action: manipulation; }
.fp-btn:hover:not(:disabled) { filter: brightness(1.25); transform: translateY(-1px); }
.fp-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.fp-btn:disabled { opacity: .4; cursor: default; }
.fp-btn:focus-visible, .fp-icon-btn:focus-visible, .fp-back-link:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; }
.fp-btn-primary { background: linear-gradient(45deg, #cc3300, #ff5a1f); box-shadow: 0 4px 24px rgba(255,90,31,.35); border-color: transparent; }
.fp-btn-gold { background: linear-gradient(45deg, #c98a00, #ffd166); color: #1a1000; border-color: transparent; }
.fp-btn-ghost { background: rgba(255,255,255,.04); }

/* ── Overlay + panel (start / results screens) ── */
.fp-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 1.2rem;
    background: rgba(5,6,14,.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 50; overflow-y: auto; }
.fp-overlay[hidden] { display: none; }
.fp-panel { background: linear-gradient(160deg, #0e0f1e, #0a0c18); border: 1px solid rgba(255,90,31,.25);
    border-radius: 20px; padding: 1.5rem 1.8rem; width: 100%; max-width: 620px; text-align: center;
    box-shadow: 0 0 60px rgba(255,90,31,.12), 0 20px 50px rgba(0,0,0,.6); }
.fp-panel h1, .fp-panel h2 { margin: 0 0 .4rem; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
    letter-spacing: .1em; line-height: 1; font-size: clamp(2.1rem, 6vw, 3rem); text-shadow: 0 0 20px rgba(255,90,31,.5); }
.fp-panel h1 em, .fp-panel h2 em { font-style: normal; color: var(--neon); text-shadow: 0 0 20px #ff7a3a, 0 0 50px #ff5a1f; }
.fp-sub { font-family: 'Bebas Neue', sans-serif; letter-spacing: .25em; color: var(--neon2); font-size: 1rem; margin-bottom: .8rem; }
.fp-panel p { color: #c9d1e6; line-height: 1.55; font-size: .92rem; margin: .4rem 0; }
.fp-row { display: flex; flex-wrap: wrap; gap: .5rem .7rem; justify-content: center; margin: .9rem 0 .2rem; }

/* ── Free-play note ── */
.fp-note { font-size: .74rem; color: #77809a; text-align: center; line-height: 1.5; margin: .9rem auto 0; max-width: 520px; }
.fp-note::before { content: '\24D8\00A0'; }

/* ── Toast ── */
.fp-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px); opacity: 0;
    background: rgba(10,12,24,.95); border: 1px solid rgba(255,209,102,.35); color: var(--text);
    padding: .55rem 1rem; border-radius: 12px; font-weight: 700; font-size: .88rem; z-index: 80;
    transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 2rem); text-align: center; }
.fp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Felt (table surface) ── */
.fp-felt { background: radial-gradient(ellipse at 50% 40%, var(--felt1), var(--felt2) 75%);
    border: 10px solid var(--rail); box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 0 0 2px rgba(255,90,31,.35), 0 20px 60px rgba(0,0,0,.6); }

/* ── Chip ── */
.fp-chip { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.15em;
    background: radial-gradient(circle, #ff5a1f 0 38%, #fff 39% 46%, #ff5a1f 47%);
    box-shadow: 0 0 0 2px #fff3 inset, 0 1px 2px rgba(0,0,0,.5); }

/* ── Playing cards ── */
.fp-card { position: relative; flex: none; width: var(--fp-w); height: calc(var(--fp-w) * 1.4);
    border-radius: calc(var(--fp-w) * .1); background: linear-gradient(160deg, #ffffff, #efe9dd);
    box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 5px 14px rgba(0,0,0,.45); color: #12141c; user-select: none;
    overflow: hidden; font-family: 'Rubik', system-ui, sans-serif; transition: transform .18s, opacity .18s, box-shadow .18s; }
.fp-card.fp-red { color: #d7263d; }
.fp-4c .fp-card.fp-d { color: #1d6fe0; }
.fp-4c .fp-card.fp-c { color: #138a3c; }
.fp-card .fp-tl, .fp-card .fp-br { position: absolute; display: flex; flex-direction: column; align-items: center;
    line-height: .92; font-size: calc(var(--fp-w) * .25); }
.fp-card .fp-tl { top: 5%; left: 7%; }
.fp-card .fp-br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.fp-card b { font-weight: 900; letter-spacing: -.05em; }
.fp-card i { font-style: normal; font-size: .9em; }
.fp-card .fp-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .02em;
    font-size: calc(var(--fp-w) * .56); line-height: 1; }
.fp-card .fp-mid b { font-size: .62em; font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 0; }
.fp-card.fp-sm { --fp-w: 42px; }
.fp-card.fp-sm .fp-br { display: none; }
.fp-card.fp-sm .fp-mid { font-size: calc(var(--fp-w) * .5); padding-top: 22%; }
.fp-card.fp-sm .fp-mid b { display: none; }
.fp-card.fp-lg { --fp-w: 96px; }
.fp-card.fp-back { border: 2px solid rgba(255,255,255,.85);
    background: radial-gradient(circle at 50% 50%, rgba(255,209,102,.5) 0 12%, transparent 13%),
                repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 3px, transparent 3px 8px),
                repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 3px, transparent 3px 8px),
                linear-gradient(160deg, #ff5a1f, #8a1c00); }
.fp-card.fp-back::after { content: ''; position: absolute; inset: 7%; border-radius: calc(var(--fp-w) * .06);
    border: 1.5px solid rgba(255,255,255,.45); }
.fp-card.fp-back::before { content: '\1F525'; position: absolute; inset: 0; display: grid; place-items: center;
    font-size: calc(var(--fp-w) * .34); filter: saturate(1.2); }
/* states */
.fp-card.fp-win { box-shadow: 0 0 0 3px var(--neon2), 0 0 22px rgba(255,209,102,.75), 0 5px 14px rgba(0,0,0,.45); transform: translateY(-4px); }
.fp-card.fp-dim { opacity: .42; }
.fp-card.fp-held { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--good), 0 8px 20px rgba(0,0,0,.5); }
.fp-card.fp-deal { animation: fpDeal .32s cubic-bezier(.2,.9,.3,1.2) both; }
.fp-card.fp-flip { animation: fpFlip .3s ease both; }
@keyframes fpDeal { from { opacity: 0; transform: translateY(-36px) rotate(-8deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fpFlip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

@media (max-width: 600px) {
    :root { --fp-w: 52px; }
    .fp-panel { padding: 1.1rem 1.1rem; }
    .fp-logo { font-size: 1.15rem; }
    .fp-desktop-only { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .fp-card, .fp-btn, .fp-toast { transition: none; }
    .fp-card.fp-deal, .fp-card.fp-flip { animation: none; }
}