/* ============================================================
   EUCHRE — 4-player partnership trick-taking (partner sits across
   the table, same shape as Spades). A fresh trump suit is bid each
   hand, with the right/left bower mechanic promoting two specific
   Jacks above every other card. Card style (court-card SVG
   illustrations, red/white ornamental card back) reused directly
   from the Rummy family, per the catalog-wide consistent card style.
   Felt is a bright, vibrant burnt-orange/amber — deliberately NOT
   dark or muddy, matching the standing catalog-wide principle, and
   distinct from Hearts (ruby), Crazy Eights (purple), and Cribbage
   (teal).
   ============================================================ */
:root{
  --black:#050403;
  --black-2:#0c0a07;
  --felt-1:#e8791f;
  --felt-2:#8a3f08;
  --felt-3:#c4590f;
  --gold:#e0b95e;
  --gold-bright:#f3d488;
  --gold-dim:#8a6d2f;
  --gold-line: rgba(224,185,94,.4);
  --cream:#f5efdf;
  --ink:#20180f;
  --crimson:#a4283a;
  --win:#6fd17f;
  --lose:#e0697a;
  --wood-1:#6b4423;
  --wood-2:#2c1a0d;
  --wood-hi:#8a5a34;
  --wood-shadow:#140b05;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --team-a:#7fb8e0;
  --team-b:#e0a87f;
  /* Traditional red/white ornamental card back, matching the Rummy family exactly. */
  --back-red:#a6142b;
  --back-red-deep:#7d0e20;
  --back-white:#f7f1e6;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 0%, #14100a 0%, var(--black) 60%),
    var(--black);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.mono{ font-family:'IBM Plex Mono',monospace; }
.serif{ font-family:'Playfair Display',serif; }

.game-frame{
  width:100%; max-width:1100px;
  display:flex; flex-direction:column; align-items:center;
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #14100a 0%, var(--black) 60%),
    var(--black);
  box-shadow:0 30px 90px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
}
@media (max-width:640px){
  body{ padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .game-frame{ border-radius:18px; }
}

/* ================= Header ================= */
header{
  width:100%; max-width:1100px;
  padding:16px 16px 8px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; position:relative;
}
header > *{ margin-top:8px; }
header > * + *{ margin-left:10px; }
@media (max-width:640px){
  header{ padding:10px 10px 6px; }
}
.brand-cluster{ display:flex; align-items:center; }
.brand-cluster > * + *{ margin-left:12px; }
.wordmark{ text-align:left; line-height:1; }
.wordmark .eyebrow{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  color:var(--gold); text-transform:uppercase;
}
.wordmark .title{
  font-family:'Playfair Display',serif; font-weight:700; font-size:26px; letter-spacing:.06em;
  color:var(--gold-bright); text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.wordmark .variant-badge{
  display:inline-block; margin-left:9px; vertical-align:middle; position:relative; top:-2px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold); background:rgba(224,185,94,.08); border:1px solid var(--gold-line);
  border-radius:999px; padding:3px 9px;
}
@media (max-width:640px){
  .wordmark .variant-badge{ font-size:9.5px; padding:2px 7px; margin-left:6px; top:-1px; }
}
.gold-icon-btn{
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(155deg,#171310,#0a0806);
  border:1px solid var(--gold-line);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px;
  transition:.15s ease;
}
.gold-icon-btn:hover{ border-color:var(--gold); background:#1c1712; }

.score-strip{ display:flex; }
.score-strip > * + *{ margin-left:10px; }
.stat-box{
  position:relative;
  background:linear-gradient(155deg, rgba(24,19,12,.78), rgba(8,6,4,.88));
  border:1px solid var(--gold-line);
  border-radius:10px;
  padding:6px 14px;
  min-width:88px; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 14px rgba(0,0,0,.35);
}
.stat-box label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:#a89a86; margin-bottom:2px;
}
.stat-box.team-a .team-score{ color:var(--team-a); }
.stat-box.team-b .team-score{ color:var(--team-b); }
.stat-box .team-score{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:18px; }
.stat-box .team-sub{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#a89a86; margin-top:1px; }
.hand-badge{
  text-align:center; padding:0 6px;
}
.hand-badge .gold-icon-btn{
  position:static; display:block; margin:5px auto 0;
  width:26px; height:26px; border-radius:8px; font-size:13px;
}
.hand-badge .hand-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#a89a86; }
.rules-link{
  display:block; margin:4px auto 0; padding:1px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--gold-line); color:#a89a86; border-radius:8px; cursor:pointer;
}
.rules-link:hover{ border-color:var(--gold); color:var(--gold); }
.overlay-panel.rules-panel{ max-width:460px; max-height:85%; overflow-y:auto; text-align:left; }
.overlay-panel.rules-panel h2, .overlay-panel.rules-panel p.sub{ text-align:center; }
.rules-list{ list-style:none; margin:0 0 18px; padding:0; }
.rules-list li{
  font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.5; color:var(--cream);
  padding:7px 0; border-bottom:1px solid rgba(224,185,94,.14);
}
.rules-list li:last-child{ border-bottom:none; }
.panel-close{ display:block; margin-top:10px; width:100%; padding:10px; border-radius:999px; border:1px solid var(--gold-line); background:transparent; color:var(--cream); cursor:pointer; font-weight:700; font-family:'Inter',sans-serif; font-size:14px; }
.panel-close:hover{ background:rgba(224,185,94,.12); }

/* ================= Table: wood rail + gold trim + textured felt ================= */
.table-wrap{ width:100%; padding:18px 18px 4px; display:flex; justify-content:center; }
.table-wrap > .felt{
  position:relative;
  width:100%; max-width:900px;
  padding:20px 20px 16px;
  border-radius:30px;
  /* mahogany rail: base gradient + two grain layers + a soft sheen —
     matches Blackjack/Baccarat's proven construction exactly. */
  background:
    linear-gradient(102deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 52%),
    repeating-linear-gradient(129deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(131deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 10px),
    radial-gradient(ellipse at 30% 15%, var(--wood-hi) 0%, transparent 45%),
    linear-gradient(165deg, var(--wood-1) 0%, var(--wood-2) 78%, var(--wood-shadow) 100%);
  box-shadow:var(--shadow), inset 0 2px 3px rgba(255,255,255,.12), inset 0 -8px 18px rgba(0,0,0,.6);
}
.table-wrap > .felt::before{
  content:"";
  position:absolute; top:9px; right:9px; bottom:9px; left:9px;
  border-radius:22px;
  /* layered box-shadow rings stand in for a metallic double gold trim */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 0 0 2.5px var(--gold-dim),
    0 0 0 3px rgba(0,0,0,.35),
    0 0 12px rgba(224,185,94,.12),
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.35);
  pointer-events:none;
  z-index:1;
}
.felt-surface{
  position:relative;
  min-height:520px;
  background:
    repeating-linear-gradient(47deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-43deg, rgba(0,0,0,.03) 0, rgba(0,0,0,.03) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 16%, var(--felt-1) 0%, var(--felt-3) 55%, var(--felt-2) 100%);
  border-radius:16px;
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5), inset 0 10px 24px rgba(0,0,0,.4);
}
.felt-surface::before{
  content:"";
  position:absolute; top:12px; right:12px; bottom:12px; left:12px;
  border:1px solid rgba(224,185,94,.16);
  border-radius:10px;
  pointer-events:none;
}
@media (max-width:640px){ .felt-surface{ min-height:400px; } }

.center-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; opacity:.08;
}
.center-watermark .suit{ font-size:60px; line-height:1; color:var(--gold-bright); }
.center-watermark .label{
  font-family:'Playfair Display',serif; font-size:18px; letter-spacing:.32em; color:var(--gold-bright);
  margin-top:2px;
}

/* ---- player positions ---- */
.player-pos{
  position:absolute; z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.player-pos > * + *{ margin:4px; }
.player-pos.pos-north{ top:16px; left:50%; transform:translateX(-50%); }
.player-pos.pos-west{ left:16px; top:50%; transform:translateY(-50%); flex-direction:row; }
.player-pos.pos-east{ right:16px; top:50%; transform:translateY(-50%); flex-direction:row-reverse; }
.player-pos.pos-south{ display:none; }
@media (max-width:640px){
  .player-pos.pos-north{ top:10px; }
  .player-pos.pos-west{ left:6px; top:44%; }
  .player-pos.pos-east{ right:6px; top:44%; }
  .opp-hand-fan .card-back{ margin-left:-16px; }
  .pos-west .opp-hand-fan, .pos-east .opp-hand-fan{ max-height:120px; }
  .pos-west .opp-hand-fan .card-back, .pos-east .opp-hand-fan .card-back{ margin-top:-35px; }
  .pos-north .opp-hand-fan{ max-width:160px; }
  .pos-north .opp-hand-fan .card-back{ margin-left:-21px; }
}

.avatar-wrap{ display:flex; flex-direction:column; align-items:center; }
.avatar-wrap > * + *{ margin-top:4px; }
.avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(155deg,#2a221a,#171310);
  border:2px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:700; font-size:15px; color:var(--gold-bright);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.avatar.acting{ border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(243,212,136,.25); }
.player-label{
  background:rgba(0,0,0,.5); border:1px solid var(--gold-line); border-radius:6px; padding:2px 8px;
  font-size:11px; white-space:nowrap;
}
.player-label .pname{ font-weight:600; color:var(--cream); }
.player-label .pbid{ color:var(--gold); margin-left:4px; font-family:'IBM Plex Mono',monospace; }
.player-label .pbid.nil{ color:var(--lose); }
.player-label .pbid.nil-ok{ color:var(--win); }

.opp-hand-fan{ display:flex; }
.opp-hand-fan .card-back{ margin-left:-27px; }
.opp-hand-fan .card-back:first-child{ margin-left:0; }
.pos-west .opp-hand-fan, .pos-east .opp-hand-fan{ flex-direction:column; max-height:320px; }
.pos-west .opp-hand-fan .card-back, .pos-east .opp-hand-fan .card-back{ margin-left:0; margin-top:-50px; }
.pos-west .opp-hand-fan .card-back:first-child, .pos-east .opp-hand-fan .card-back:first-child{ margin-top:0; }
/* North needs up to 13 cards to fit horizontally within a width that
   leaves room for West/East on the sides — a much tighter overlap
   than the generic rule, since it's the only position stacking cards
   horizontally rather than vertically. */
.pos-north .opp-hand-fan{ max-width:260px; justify-content:center; }
.pos-north .opp-hand-fan .card-back{ margin-left:-35px; }
.pos-north .opp-hand-fan .card-back:first-child{ margin-left:0; }

/* Traditional red/white ornamental card back, matching the Rummy family exactly, per direct request to keep a consistent card style across the catalog. Desktop gets a properly-proportioned size (roughly 80% of the 62x88px hand card) — the previous 30x42px was tuned specifically to solve a mobile-only overlap issue and was incorrectly being applied on desktop too, where it looked disproportionately tiny. */
.card-back{
  width:50px; height:70px; border-radius:6px;
  background:var(--back-red);
  background-image:
    repeating-linear-gradient(45deg, var(--back-white) 0px, var(--back-white) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, var(--back-white) 0px, var(--back-white) 1px, transparent 1px, transparent 5px);
  background-blend-mode:normal;
  border:1.5px solid var(--back-white);
  box-shadow:0 3px 6px rgba(0,0,0,.45);
  position:relative;
}
.card-back::before{
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--back-white);
  box-shadow:0 0 0 1.5px var(--back-red-deep);
  opacity:.9;
}

/* ---- trick center ---- */
.trick-center{
  position:absolute; top:54%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; z-index:2;
}
.trick-slot{ position:absolute; width:56px; height:78px; }
.trick-slot.pos-top{ top:0; left:50%; transform:translate(-50%,-8%); }
.trick-slot.pos-left{ left:0; top:50%; transform:translate(-8%,-50%); }
.trick-slot.pos-right{ right:0; top:50%; transform:translate(8%,-50%); }
.trick-slot.pos-bottom{ bottom:0; left:50%; transform:translate(-50%,8%); }
@media (max-width:640px){
  /* Narrower and shorter so the side cards no longer reach far
     enough left/right to sit on top of the West/East avatar labels —
     confirmed as a real collision directly from a device screenshot.
     Also shifted up slightly to match West/East's rebalanced vertical
     position (see .player-pos mobile override), since the bottom half
     of the felt has no content at all (pos-south is hidden). */
  .trick-center{ width:110px; height:150px; top:52%; }
  .trick-slot{ width:38px; height:54px; }
  .trick-slot .card{ width:38px; height:54px; }
  .trick-slot .card-corner{ font-size:8px; }
  .trick-slot .card-centre-suit{ font-size:13px; }
  .card-back{ width:30px; height:42px; border-radius:5px; border-width:1.5px; }
  .card-back::before{ width:10px; height:10px; }
}
@media (max-width:359px){
  /* At the narrowest common device width (320px), the side trick
     slots still reach far enough in to collide with West/East's own
     card-back stack — confirmed via direct measurement (30px
     overlap). Not an issue at 390px, so scoped to this tighter
     breakpoint specifically rather than shrinking trick-center
     everywhere. */
  .trick-center{ width:44px; }
}
.trick-winner-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Playfair Display',serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-bright); background:rgba(0,0,0,.6); border:1px solid var(--gold-line);
  border-radius:20px; padding:4px 12px; opacity:0; pointer-events:none;
  transition:opacity .2s ease; white-space:nowrap;
}
.trick-winner-badge.show{ opacity:1; }

/* ---- trump indicator (during play) + up-card area (during bidding) ----
   Mutually exclusive in time (bidding always finishes before any
   trick is played), so both can safely share the same position below
   the trick center without ever colliding with each other or with
   active trick cards. */
.trump-indicator{
  position:absolute; left:50%; top:calc(54% + 108px); transform:translateX(-50%);
  display:flex; align-items:center; z-index:3;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  color:var(--gold-bright); background:rgba(0,0,0,.5); border:1px solid var(--gold-line);
  border-radius:8px; padding:4px 12px; white-space:nowrap;
}
.trump-indicator .trump-suit-symbol{ margin-left:6px; font-size:15px; }
.trump-indicator .trump-suit-symbol.red{ color:var(--back-red); }
.upcard-area{
  position:absolute; left:50%; top:calc(54% + 90px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; z-index:3;
}
.upcard-area > * + *{ margin-top:6px; }
.upcard-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; color:#c9bfa8; }
.upcard-area .card{ width:52px; height:73px; }
@media (max-width:640px){
  .trump-indicator{ top:calc(52% + 82px); font-size:9.5px; padding:3px 9px; }
  .trump-indicator .trump-suit-symbol{ font-size:13px; }
  .upcard-area{ top:calc(52% + 66px); }
  .upcard-area .card{ width:40px; height:56px; }
}

/* ---- bidding overlay ---- */
.bidding-panel{ max-width:400px; }
.bidding-btn-row{ display:flex; margin-top:10px; }
.bidding-btn-row > * + *{ margin-left:10px; }
.bidding-btn-row .ctrl-btn{ flex:1; }
.alone-toggle{
  display:flex; align-items:center; justify-content:center; margin:10px 0 0;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--cream); cursor:pointer;
}
.alone-toggle input{ margin-right:8px; width:16px; height:16px; }
.suit-choice-grid{ display:flex; flex-wrap:wrap; margin:-4px; margin-bottom:6px; }
.suit-choice-btn{
  flex:1 1 calc(50% - 8px); margin:4px; min-width:100px;
  display:flex; align-items:center; justify-content:center;
  padding:16px 0; border-radius:12px; cursor:pointer;
  background:linear-gradient(155deg,#fffdf7,var(--cream)); border:1px solid var(--gold-line);
  font-size:28px; transition:border-color .15s, box-shadow .15s;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.suit-choice-btn:hover{ border-color:var(--gold-bright); box-shadow:0 5px 12px rgba(0,0,0,.4); }
.suit-choice-btn.suit-red{ color:var(--back-red); }
.suit-choice-btn.suit-black{ color:var(--ink); }

/* ================= Cards (player hand) ================= */
.card{
  position:relative;
  width:62px; height:88px;
  background:linear-gradient(155deg,#fffdf7,var(--cream));
  border-radius:8px;
  box-shadow:
    0 5px 12px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--ink);
  font-family:'Inter',sans-serif; font-weight:800;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease;
  outline:2px solid transparent; outline-offset:0;
}
.card::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 58%);
  opacity:.5;
}
.card.red{ color:var(--back-red); }
.court-figure{ position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:70%; height:60%; display:block; }
.card-corner{ position:absolute; z-index:1; font-size:12px; line-height:1.08; text-align:center; }
.card-corner-top{ top:5px; left:5px; }
.card-corner-bottom{ right:5px; bottom:5px; transform:rotate(180deg); }
/* Counter-rotates just the suit symbol so it stays upright and
   clearly recognizable — a spade's thin stem becomes visually
   indistinct when the whole corner is flipped 180°, making it look
   like a heart at small sizes. The rank letter above it keeps the
   standard rotated orientation. */
.corner-suit-upright{ display:inline-block; transform:rotate(180deg); }
.card-centre-suit{
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:21px; opacity:.9;
}
.card.playable{ cursor:pointer; }
.card.playable:hover{ transform:translateY(-6px); box-shadow:0 10px 18px rgba(0,0,0,.5); }
.card.selected{ transform:translateY(-14px); outline-color:var(--gold-bright); box-shadow:0 12px 22px rgba(0,0,0,.55), 0 0 0 1px var(--gold-bright); }
.card.illegal{ filter:grayscale(.6) brightness(.6); cursor:not-allowed; }

.hand-fan{ display:flex; justify-content:center; align-items:flex-end; min-height:100px; padding:4px 0; }
.hand-fan .card{ margin-left:-31px; }
.hand-fan .card:first-child{ margin-left:0; }
/* The center suit symbol sits at its natural, true-center position on
   EVERY card, including overlapped ones — the next card's natural
   DOM stacking (later siblings paint on top) clips the covered half,
   which is exactly how a real fanned hand of cards looks: half a pip
   peeking out from behind the next card, not a separate small symbol
   crowded into a corner. */
/* Confirmed via direct DOM inspection (not assumed): every card's own
   top-left and bottom-right corner values always matched exactly —
   there was never a data bug. But because the fan overlaps most of
   each card, a card's bottom-right label can visually appear to sit
   within the NEXT card's visible slice, creating the illusion of a
   mismatched/wrong number even though the underlying data was always
   correct. Hidden here for that reason — the top-left corner alone
   already conveys everything needed and isn't subject to this
   illusion. */
/* Scoped to :not(:last-child) — the LAST card in the fan isn't
   overlapped by anything, so its own bottom-right label was never at
   risk of the "looks like it belongs to the next card" illusion this
   rule exists to prevent. Hiding it unconditionally (the original,
   too-broad version of this rule) left that one fully-visible card
   looking incomplete/blank in its bottom-right corner instead —
   confirmed directly from a device screenshot as a real, separate bug. */
.hand-fan .card:not(:last-child) .card-corner-bottom{ display:none; }
@media (max-width:640px){
  .hand-fan .card{ width:48px; height:68px; margin-left:-24px; }
  .card-corner{ font-size:10px; }
  .card-centre-suit{ font-size:15px; }
}

/* ================= Turn indicator + bottom control bar ================= */
.turn-indicator{
  text-align:center; font-family:'Playfair Display',serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin:4px 0 2px;
}
@media (max-width:640px){ .turn-indicator{ margin:2px 0; font-size:11px; } }
.control-bar{
  width:100%; max-width:640px;
  display:flex; justify-content:center; margin-top:8px;
}
.control-bar > * + *{ margin-left:8px; }
.ctrl-btn{
  flex:1; padding:12px 0; border-radius:12px; border:1px solid var(--gold-line);
  background:linear-gradient(155deg,#171310,#0a0806); color:var(--gold);
  font-family:'Playfair Display',serif; font-weight:700; font-size:13px; letter-spacing:.03em; cursor:pointer;
  min-height:44px; transition:.15s ease;
}
.ctrl-btn:hover:not(:disabled){ border-color:var(--gold); background:#1c1712; }
.ctrl-btn:disabled{ opacity:.4; cursor:not-allowed; }
.ctrl-btn.primary{
  background:linear-gradient(155deg,var(--gold-bright),var(--gold)); color:var(--ink); border-color:var(--gold-bright);
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.ctrl-btn.primary:hover:not(:disabled){ filter:brightness(1.06); }

/* ================= Integrated bidding bar (bottom of table, not a popup) ================= */
.pass-bar{
  width:100%; max-width:640px; margin-top:10px; display:none;
  background:linear-gradient(155deg, rgba(24,19,12,.9), rgba(8,6,4,.94));
  border:1px solid var(--gold-line); border-radius:16px; padding:16px 16px 14px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.pass-bar.open{ display:block; }
.pass-bar .pass-title{
  text-align:center; font-family:'Playfair Display',serif; font-style:italic; font-size:14px; letter-spacing:.02em;
  color:var(--gold-bright); margin-bottom:12px;
}
.btn-confirm-bid{
  width:100%; padding:12px; border-radius:12px; border:none;
  background:linear-gradient(155deg,var(--gold-bright),var(--gold)); color:var(--ink);
  font-family:'Playfair Display',serif; font-weight:700; font-size:14px; letter-spacing:.02em; cursor:pointer;
  min-height:44px; box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-confirm-bid:disabled{ opacity:.4; cursor:not-allowed; }

/* ================= Hand summary / win overlay ================= */
.overlay{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:20;
  display:none; align-items:center; justify-content:center;
  background:rgba(5,4,3,.78);
}
.overlay.open{ display:flex; }
.overlay-panel{
  background:linear-gradient(165deg, var(--wood-1) 0%, var(--wood-2) 78%, var(--wood-shadow) 100%);
  border:1px solid var(--gold-line); border-radius:18px;
  box-shadow:var(--shadow); padding:24px; max-width:420px; width:90%; text-align:center;
}
.overlay-panel h2{ font-family:'Playfair Display',serif; color:var(--gold-bright); margin:0 0 6px; font-size:22px; }
.overlay-panel p.sub{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#c9bfa8; margin:0 0 18px; }
.summary-table{ width:100%; border-collapse:collapse; margin-bottom:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.summary-table th{ text-align:left; color:var(--gold); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--gold-line); }
.summary-table td{ padding:4px 8px; color:var(--cream); }
.summary-table td.pos{ color:var(--win); }
.summary-table td.neg{ color:var(--lose); }

/* ================= Hearts-specific additions ================= */

.mode-select-panel{ max-width:460px; }
.mode-choice-row{ display:flex; }
.mode-choice-btn{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:16px 10px; border-radius:14px; cursor:pointer;
  background:rgba(0,0,0,.4); border:1px solid var(--gold-line);
  transition:border-color .15s, background .15s;
}
.mode-choice-btn:hover{ border-color:var(--gold-bright); background:rgba(224,185,94,.1); }
.mode-choice-title{
  font-family:'Playfair Display',serif; font-weight:800; font-size:17px; color:var(--gold-bright);
  margin-bottom:6px;
}
.mode-choice-sub{
  font-family:'Inter',sans-serif; font-size:10.5px; color:#c9bfa8; line-height:1.4;
}

.pscore{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#a89a86; margin-left:6px; }

footer{
  margin-top:14px; text-align:center; font-family:'Inter',sans-serif; font-size:10.5px;
  color:#7a7266; max-width:760px; line-height:1.5; padding:0 12px;
}