/* ═══════════════════════════════════════════
   POKER — IceC Originals
   Mirrors the keno + blackjack frame layout: max-width 1100,
   260px absolute-positioned left sidebar, fixed-height game frame
   containing the felt and seats.
   ═══════════════════════════════════════════ */

/* ── Page Layout (matches .bj-page) ──────────── */
.poker-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 24px 60px;
  min-height: 80vh;
  width: 100%;
  box-sizing: border-box;
}

/* ── Title Row ───────────────────────────────── */
.poker-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.poker-back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  transition: all 0.2s;
  text-decoration: none;
}
.poker-back-arrow:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.poker-title {
  font-family: 'Bungee', cursive;
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.poker-stakes-pill {
  margin-left: auto;
  background: rgba(245,119,226,0.12);
  border: 1px solid rgba(245,119,226,0.3);
  color: var(--pink, #F577E2);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════
   FRAME — mirrors .bj-frame / .keno-frame
   ═══════════════════════════════════════════ */
.poker-frame {
  display: flex;
  gap: 0;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  /* overflow hidden keeps the sidebar + felt clipped to the rounded corners.
     With the taller height + bottom-seat inset below, the action timer chip
     stays comfortably inside this clip rect now. */
  overflow: hidden;
  /* Taller frame so the bottom-center seat + its timer chip both fit
     comfortably inside, without shrinking the cards or seats themselves. */
  height: 780px;
  min-height: 780px;
  max-height: 780px;
  position: relative;
}

/* ── Sidebar (absolute, same shape as .bj-sidebar) ── */
.poker-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0,0,0,0.15);
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 3;
}
.poker-sidebar-spacer { flex: 1; }

.poker-side-stakes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.poker-side-stakes-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.poker-side-stakes-label {
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
}
.poker-side-stakes-val {
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.poker-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Same trick the modals need — author rules win over the user-agent
   [hidden]{display:none} by source order, so toggling el.hidden silently
   does nothing without this override. Without it, all three panels
   (Buy-In, Action, Wait) paint at the same time. */
.poker-panel[hidden] {
  display: none !important;
}
.poker-control-group { display: flex; flex-direction: column; gap: 0.4rem; }
.poker-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

.poker-bet-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.poker-bet-adj {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.poker-bet-adj:hover { background: rgba(255,255,255,0.12); color: #fff; }
.poker-bet-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0 10px;
}
.poker-bet-gem-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Pink gem icon ─────────────────────────────────────────
   Renders the cave's pink gem via a CSS mask over /assets/icons/gems.png
   plus a solid pink background. Replaces 💎 emojis everywhere on the page
   so the visual matches the rest of the site instead of relying on each
   OS's emoji font. Use <span class="pgem"></span>; .pgem-lg for the
   bigger size used in bet inputs. */
.pgem {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  background-color: var(--pink, #F577E2);
  -webkit-mask-image: url(/assets/icons/gems.png);
          mask-image: url(/assets/icons/gems.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  flex-shrink: 0;
}
.pgem-lg { width: 18px; height: 18px; vertical-align: -4px; }
.poker-bet-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 6px;
  outline: none;
  width: 100%;
}
.poker-bet-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}
.poker-bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--pink, #F577E2);
  border-radius: 50%;
  cursor: pointer;
}

.poker-side-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}
.poker-side-error {
  font-size: 11px;
  color: #ff7878;
  min-height: 14px;
}

/* Action panel */
.poker-action-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pink, #F577E2);
  text-align: center;
}
.poker-action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.poker-act {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 10px 8px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s;
}
.poker-act:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.poker-act:disabled { opacity: 0.3; cursor: not-allowed; }
.poker-act-fold  { background: rgba(255,80,80,0.18); border-color: rgba(255,80,80,0.4); color: #ff8080; }
.poker-act-check, .poker-act-call { background: rgba(80,235,150,0.15); border-color: rgba(80,235,150,0.35); color: #50EB96; }
.poker-act-bet, .poker-act-raise { background: rgba(245,119,226,0.18); border-color: rgba(245,119,226,0.4); color: var(--pink, #F577E2); }
.poker-act-allin { background: rgba(255,206,43,0.18); border-color: rgba(255,206,43,0.4); color: #FFCE2B; }
.poker-act-extend {
  width: 100%;
  background: rgba(80,180,255,0.12);
  border: 1px solid rgba(80,180,255,0.3);
  color: #50B4FF;
  padding: 8px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
/* Call amount inside the green Call button. Bumped from 9px → 13px with
   full opacity + matching weight so the number reads as cleanly as the
   gem icon next to it. */
.poker-act-sub {
  font-size: 13px;
  font-weight: 700;
  opacity: 1;
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
}

.poker-wait-panel { text-align: center; padding: 20px 8px; }
.poker-wait-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
}

/* Side foot buttons (Provably Fair + History) */
.poker-side-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poker-side-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.poker-side-btn:hover { color: #fff; border-color: rgba(255,255,255,0.2); }

.poker-side-primary {
  background: var(--pink, #F577E2);
  color: #1a1a2e;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s;
}
.poker-side-primary:hover { filter: brightness(1.1); }
.poker-side-leave {
  background: transparent;
  border: 1px solid rgba(255,80,80,0.4);
  color: #ff7878;
}
.poker-side-leave:hover { background: rgba(255,80,80,0.15); color: #fff; filter: none; }

/* ═══════════════════════════════════════════
   GAME AREA — felt occupies remaining width
   ═══════════════════════════════════════════ */
.poker-game-area {
  flex: 1;
  margin-left: 260px;       /* sidebar width */
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.poker-felt {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 720px;
  /* Bumped from 540 → 640 alongside the taller frame so the felt fills more
     of the available vertical space and the seats sit comfortably inside
     with their bottom timers visible. */
  max-height: 640px;
  background:
    radial-gradient(ellipse at center, #0d4a3a 0%, #082e22 70%, #061d17 100%);
  border-radius: 50%;
  border: 8px solid #4a2818;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    0 20px 60px rgba(0,0,0,0.6);
}
.poker-felt::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(245,119,226,0.04) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.poker-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 60%;
  pointer-events: none;
}
.poker-pot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.poker-pot-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFCE2B;
  text-shadow: 0 0 12px rgba(255,206,43,0.4);
  margin-bottom: 10px;
}
.poker-community {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
  min-height: 100px;
  align-items: center;
}
.poker-phase-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ── Seats (positioned absolutely around the felt) ── */
/* 160px wide accommodates two 50x70 hole cards + the 3px gap + 12px padding
   each side, with some breathing room for username + stack text. */
.poker-seat {
  position: absolute;
  width: 160px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.poker-seat-empty,
.poker-seat-card {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  backdrop-filter: blur(4px);
  position: relative;
}
.poker-seat-empty {
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  border-style: dashed;
  transition: border-color 0.15s, color 0.15s;
}
.poker-seat-empty:hover {
  border-color: var(--pink, #F577E2);
  color: var(--pink, #F577E2);
}
.poker-seat-card.is-acting {
  border-color: var(--pink, #F577E2);
  box-shadow: 0 0 16px rgba(245,119,226,0.6);
  animation: poker-pulse 1.4s infinite;
}
@keyframes poker-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(245,119,226,0.6); }
  50%      { box-shadow: 0 0 28px rgba(245,119,226,0.9); }
}
.poker-seat-card.is-folded  { opacity: 0.4; }
.poker-seat-card.is-allin   { border-color: #FFCE2B; box-shadow: 0 0 12px rgba(255,206,43,0.45); }
.poker-seat-card.is-me      { background: rgba(20,15,30,0.85); }

/* Showdown winner — pulsing gold glow that overrides any other state border
   (acting/all-in/etc.) since the hand is over and there's nothing else to
   draw attention to. */
.poker-seat-card.is-winner {
  border-color: #FFCE2B;
  box-shadow: 0 0 24px rgba(255,206,43,0.65), 0 0 12px rgba(255,206,43,0.45);
  animation: pkr-winner-pulse 1.6s ease-in-out infinite;
}
@keyframes pkr-winner-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255,206,43,0.55), 0 0 10px rgba(255,206,43,0.4); }
  50%      { box-shadow: 0 0 38px rgba(255,206,43,1),    0 0 18px rgba(255,206,43,0.7); }
}
/* Showdown loser — non-folded seats who got beaten at the river. We grey
   them out (less aggressive than the folded fade) and desaturate so the
   eye lands on the winner. Folded seats keep their .is-folded fade
   instead — we skip applying is-loser to them to avoid double-dimming. */
.poker-seat-card.is-loser {
  opacity: 0.45;
  filter: grayscale(0.7);
  transition: opacity 0.4s, filter 0.4s;
}

/* Avatar — sits above the name. 40px reads as a clear profile pic without
   crowding the card slots underneath. The is-me background already tints
   the local player's whole seat, so the avatar border picks up extra
   contrast there naturally. */
.poker-seat-avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  object-fit: cover;
  margin: 0 auto 4px;
  background: #1a1a2e;
}
.poker-seat-card.is-acting .poker-seat-avatar  { border-color: var(--pink, #F577E2); }
.poker-seat-card.is-winner .poker-seat-avatar  { border-color: #FFCE2B; }
.poker-seat-card.is-allin  .poker-seat-avatar  { border-color: #FFCE2B; }

.poker-seat-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.poker-seat-stack {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 5px;
}
.poker-seat-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 72px;
  margin: 4px 0;
}
.poker-seat-bet {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #50EB96;
  margin-top: 4px;
  min-height: 14px;
}
.poker-seat-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
  color: rgba(255,255,255,0.5);
}
.poker-seat-status.fold { color: rgba(255,255,255,0.35); }
.poker-seat-status.allin { color: #FFCE2B; }
.poker-seat-dealer-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px; height: 20px;
  background: #fff;
  color: #1a1a2e;
  border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.poker-seat-timer {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--pink, #F577E2);
  font-weight: 700;
  background: rgba(0,0,0,0.7);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Card images (matches blackjack /assets/cards/*.svg) ─── */
/* Hole cards (rendered inside seat boxes) — seat is 130px wide minus 20px
   padding leaves ~110px for two cards + a 3px gap. 50x70 reads clean at
   normal screen sizes. */
.poker-card {
  width: 50px;
  height: 70px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}
/* Community cards in the felt centre — bigger since they're the focal point */
.poker-card.large {
  width: 70px;
  height: 98px;
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.poker-card.back {
  background: #1a1a2e;
}

/* ── Card deal + flip animation (community board) ───────────
   Two-layer card: a back-face + front-face stacked with
   backface-visibility hidden. The outer element animates a small
   "deal" motion (slide in + fade in). After it lands, the inner
   element flips 180° to swap the back for the front. Driven by JS
   via the --deal-delay custom property so we can stagger 3 cards
   on the flop without writing 3 separate CSS rules. */
.pkr-flip {
  position: relative;
  width: 50px; height: 70px;
  perspective: 800px;
  /* Outer animation handles the "card lands on the felt" motion */
  animation: pkr-deal 380ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--deal-delay, 0ms);
}
.pkr-flip.large { width: 70px; height: 98px; }

.pkr-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Flip kicks in after the deal completes (delay = deal + 100ms gap).
     `animation-fill-mode: both` is set explicitly because the shorthand
     `backwards forwards` is ambiguous (only one fill-mode value is valid),
     and we need BOTH:
       - backwards: keep rotateY(0) (back face) BEFORE the delay elapses
       - forwards:  keep rotateY(180) (front face) AFTER the animation ends
     Without `both`, the card would flip to front then snap back to back. */
  animation-name: pkr-flip-rot;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-fill-mode: both;
  animation-delay: calc(var(--deal-delay, 0ms) + 480ms);
}

.pkr-flip-face {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  object-fit: contain;
}
.pkr-flip.large .pkr-flip-face { border-radius: 7px; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.pkr-flip-back  { transform: rotateY(0deg);   background: #1a1a2e; }
.pkr-flip-front { transform: rotateY(180deg); }

@keyframes pkr-deal {
  0% {
    opacity: 0;
    transform: translate(0, -80px) scale(0.85) rotate(-6deg);
  }
  60% {
    opacity: 1;
    transform: translate(0, 4px) scale(1.04) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}
@keyframes pkr-flip-rot {
  from { transform: rotateY(0deg);   }
  to   { transform: rotateY(180deg); }
}

/* ── Hole-card showdown reveal (flip-only, no deal slide-in) ─────────
   Used for the showdown reveal of player hole cards. The cards are
   already on the table as backs; we just flip them over in place along
   the long (vertical) edge — no "fly in from above" deal animation,
   which read as the cards being re-dealt.

   Structure mirrors .pkr-flip but the outer element has no animation —
   the back face is visible from the moment the element enters the DOM.
   The inner flip-rot animation has `backwards` fill so the card stays
   showing the BACK until `--flip-delay` elapses, then it rotates 180°
   to reveal the front. */
.pkr-hole-flip {
  position: relative;
  width: 50px; height: 70px;
  perspective: 800px;
  display: inline-block;
  vertical-align: middle;
}
.pkr-hole-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* fill-mode: both — see comment on .pkr-flip-inner. Keeps the back face
     showing through the delay, then locks the front face after the flip. */
  animation-name: pkr-hole-flip-rot;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-fill-mode: both;
  animation-delay: var(--flip-delay, 0ms);
}
.pkr-hole-flip-face {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  object-fit: contain;
}
.pkr-hole-flip-back  { transform: rotateY(0deg);   background: #1a1a2e; }
.pkr-hole-flip-front { transform: rotateY(180deg); }
@keyframes pkr-hole-flip-rot {
  from { transform: rotateY(0deg);   }
  to   { transform: rotateY(180deg); }
}

/* ── Modals (same shape as Phase 1 — text-glyph version is replaced) ── */
.poker-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.poker-modal-overlay[hidden] {
  /* Important to override display:flex above when toggling el.hidden */
  display: none !important;
}
.poker-modal {
  background: #15131f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  position: relative;
}
.poker-modal-wide-card {
  max-width: 720px;
  max-height: 80vh;
  overflow-y: auto;
}
.poker-modal h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}
.poker-modal p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 12px;
}
.poker-modal-sub { font-size: 12px !important; color: rgba(255,255,255,0.45) !important; }
.poker-modal-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.poker-modal-gem { font-size: 18px; }
.poker-modal-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  outline: none;
}
.poker-modal-error {
  font-size: 12px;
  color: #ff7878;
  min-height: 16px;
  margin-bottom: 10px;
}
.poker-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.poker-modal-cancel,
.poker-modal-confirm {
  padding: 9px 18px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
}
.poker-modal-cancel {
  background: transparent;
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
}
.poker-modal-cancel:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.poker-modal-confirm {
  background: var(--pink, #F577E2);
  border-color: var(--pink, #F577E2);
  color: #1a1a2e;
}
.poker-modal-confirm:hover { filter: brightness(1.1); }
.poker-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.poker-modal-close:hover { color: #fff; }

.poker-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.poker-history-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.poker-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.poker-history-handnum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.poker-history-pot {
  color: #FFCE2B;
  font-weight: 700;
}
.poker-history-winners {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.poker-verify-form {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.poker-verify-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-family: 'JetBrains Mono', monospace;
}
.poker-verify-form input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
}
.poker-verify-out {
  margin-top: 16px;
  background: #000;
  border-radius: 8px;
  padding: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Responsive (sidebar collapses below the felt on narrow viewports) ── */
@media (max-width: 800px) {
  .poker-page { padding: 90px 12px 40px; }
  .poker-frame {
    height: auto;
    min-height: 0;
    max-height: none;
    flex-direction: column;
  }
  .poker-sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .poker-game-area {
    margin-left: 0;
    padding: 16px;
    min-height: 480px;
  }
  .poker-felt { max-height: 460px; }
  .poker-seat { width: 140px; }
  .poker-card { width: 42px; height: 58px; border-radius: 4px; }
  .poker-card.large { width: 56px; height: 78px; border-radius: 6px; }
  .poker-seat-cards { min-height: 60px; }
  .poker-community { min-height: 84px; }
}