/* ═══════════════════════════════════════════════════════════════
   BRIDGE — Material 3 Expressive · Jade accent
   Seed #006B56 · Font: Plus Jakarta Sans
   Shapes 28px/20px/12px/pill · Dark default + Light mode
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens (dark default) ────────────────────────── */
:root {
  --pri:        #6CF2D3;
  --pri-con:    #005143;
  --on-pri:     #003731;
  --on-pri-con: #88FFDF;
  --bg:    #0E1512; --surf: #161D1A; --surf2: #1F2622;
  --surf3: #262E2A; --surf4: #2F3835; --felt: #091F14;
  --text: #DDE3DF; --text2: #BEC9C3; --text3: #89938E;
  --border:  rgba(190,201,195,.16);
  --border2: rgba(190,201,195,.34);
  --heart:#FF8585; --diamond:#FF8585; --club:#DDE3DF; --spade:#DDE3DF;
  --amber: #6CF2D3; --amber-dk: #003731;
  --red:#FFB4AB; --red-lt:rgba(255,180,171,.12); --red-bd:rgba(255,180,171,.30);
  --blue-lt:rgba(108,242,211,.12); --blue-bd:rgba(108,242,211,.30);
  --r:28px; --r-sm:20px; --r-xs:12px;
  --sh-lg:0 2px 8px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.35);
  --sh-sm:0 1px 3px rgba(0,0,0,.25);
  --font:'Plus Jakarta Sans','Nunito',system-ui,sans-serif;
}

/* Light tokens via media query (system) */
@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) {
    --pri:#006B56; --pri-con:#88FFDF; --on-pri:#FFFFFF; --on-pri-con:#002117;
    --bg:#F4FBF7; --surf:#EEF5F0; --surf2:#E7EEE9;
    --surf3:#E0E8E3; --surf4:#D9E1DC; --felt:#1A3D2B;
    --text:#171D1A; --text2:#3F4945; --text3:#6F7974;
    --border:rgba(111,121,116,.18); --border2:rgba(111,121,116,.38);
    --heart:#B91C1C; --diamond:#B91C1C; --club:#171D1A; --spade:#171D1A;
    --amber:#006B56; --amber-dk:#002117;
    --red:#BA1A1A; --red-lt:rgba(186,26,26,.10); --red-bd:rgba(186,26,26,.30);
    --blue-lt:rgba(0,107,86,.10); --blue-bd:rgba(0,107,86,.30);
  }
}
/* Manual dark override */
[data-theme="dark"] {
  --pri:#6CF2D3; --pri-con:#005143; --on-pri:#003731; --on-pri-con:#88FFDF;
  --bg:#0E1512; --surf:#161D1A; --surf2:#1F2622;
  --surf3:#262E2A; --surf4:#2F3835; --felt:#091F14;
  --text:#DDE3DF; --text2:#BEC9C3; --text3:#89938E;
  --border:rgba(190,201,195,.16); --border2:rgba(190,201,195,.34);
  --heart:#FF8585; --diamond:#FF8585; --club:#DDE3DF; --spade:#DDE3DF;
  --amber:#6CF2D3; --amber-dk:#003731;
  --red:#FFB4AB; --red-lt:rgba(255,180,171,.12); --red-bd:rgba(255,180,171,.30);
  --blue-lt:rgba(108,242,211,.12); --blue-bd:rgba(108,242,211,.30);
}
/* Manual light override */
[data-theme="light"] {
  --pri:#006B56; --pri-con:#88FFDF; --on-pri:#FFFFFF; --on-pri-con:#002117;
  --bg:#F4FBF7; --surf:#EEF5F0; --surf2:#E7EEE9;
  --surf3:#E0E8E3; --surf4:#D9E1DC; --felt:#1A3D2B;
  --text:#171D1A; --text2:#3F4945; --text3:#6F7974;
  --border:rgba(111,121,116,.18); --border2:rgba(111,121,116,.38);
  --heart:#B91C1C; --diamond:#B91C1C; --club:#171D1A; --spade:#171D1A;
  --amber:#006B56; --amber-dk:#002117;
  --red:#BA1A1A; --red-lt:rgba(186,26,26,.10); --red-bd:rgba(186,26,26,.30);
  --blue-lt:rgba(0,107,86,.10); --blue-bd:rgba(0,107,86,.30);
}

/* ── 2. Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--font);-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);transition:background .3s,color .3s}

/* ── 3. Screens ──────────────────────────────────────────────── */
.screen{display:none;position:fixed;inset:0;overflow:hidden;background:var(--bg)}
.screen.active{display:flex;flex-direction:column;height:100%;width:100%}
#s-lobby.active,#s-wait.active,#s-pass.active{overflow-y:auto;padding:28px 20px 48px;background:var(--bg)}
#s-game{background:var(--felt);overflow:hidden;position:relative;min-height:0;flex:1;display:flex;flex-direction:column}
.screen{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.screen.active{opacity:1;transform:translateY(0);pointer-events:all}

/* ── 4. Common lobby elements ────────────────────────────────── */
.tagline{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);text-align:center;margin-bottom:28px}
.field-lbl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.btn{width:100%;padding:16px;border:none;border-radius:var(--r-sm);font-family:var(--font);font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation;transition:opacity .15s,transform .1s}
.btn:active{filter:brightness(.88);transform:scale(.98)}
.btn-outline{background:transparent;color:var(--text2);border:1.5px solid var(--border2)}
.btn-share{flex:1;padding:12px;background:var(--surf3);border:1.5px solid var(--border2);border-radius:var(--r-xs);color:var(--text2);font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer;touch-action:manipulation;text-align:center}
.btn-bots{flex:1;padding:12px;background:var(--pri-con);border:none;border-radius:var(--r-xs);color:var(--on-pri-con);font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer;touch-action:manipulation;text-align:center;display:none}
input[type=text]{width:100%;padding:14px 16px;background:var(--surf2);border:1.5px solid var(--border2);border-radius:var(--r-xs);color:var(--text);font-family:var(--font);font-size:16px;font-weight:600;outline:none;transition:border-color .2s}
input[type=text]:focus{border-color:var(--pri)}
input[type=text]::placeholder{color:var(--text3)}

/* ── 5. Score Bar ────────────────────────────────────────────── */
.score-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;padding:8px 10px 6px;background:var(--surf);border-bottom:1px solid var(--border);flex-shrink:0;position:relative;z-index:10}
.sb-team{display:flex;flex-direction:column;gap:2px}
.sb-team.t2{align-items:flex-end;min-width:0}
.sb-name{font-size:8px;font-weight:800;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.sb-score{font-size:24px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-1px}
.sb-dots{display:flex;gap:5px;margin-top:3px}
.g-dot{width:8px;height:8px;border-radius:2px;background:var(--surf4);border:1.5px solid var(--border2);transition:background .3s,border-color .3s}
.g-dot.won{background:var(--pri);border-color:transparent}
.sb-mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.sb-mid-primary{display:flex;align-items:baseline;justify-content:center;gap:4px;flex-wrap:nowrap}
.sb-round-lbl{font-size:8px;font-weight:800;color:var(--text3);letter-spacing:2px;text-transform:uppercase}
.sb-round{font-size:18px;font-weight:800;color:var(--text);line-height:1}
.sb-mid-toolbar{display:inline-flex;align-items:center;gap:4px;margin-top:2px;justify-content:center;flex-wrap:nowrap;flex-shrink:0}
.sb-chip-btn{background:rgba(255,255,255,.1);border:none;border-radius:99px;padding:2px 7px;font-size:10px;font-weight:800;color:rgba(255,255,255,.55);cursor:pointer;letter-spacing:.5px;touch-action:manipulation}
.sb-chip-btn:active{filter:brightness(.88)}
@keyframes scoreUp{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.sb-score.score-changed{animation:scoreUp .4s cubic-bezier(.34,1.56,.64,1)}

/* Status pill pop */
@keyframes statusPop{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.15);filter:brightness(1.35)}100%{transform:scale(1);filter:brightness(1)}}
.status-pop{animation:statusPop .4s cubic-bezier(.34,1.56,.64,1);display:block}

/* Theme toggle (compact when nested in score bar) */
.theme-toggle{background:var(--surf3);border:1px solid var(--border);width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:14px;touch-action:manipulation;flex-shrink:0}
.theme-toggle:hover{background:var(--surf4)}
.theme-toggle:active{filter:brightness(.88)}
.theme-toggle--sb{width:24px;height:24px;font-size:11px;margin:0;border-width:1px}

/* ── 6. Table Area ───────────────────────────────────────────── */
.table-area{flex:1;position:relative;overflow:hidden;min-height:0;transition:height .25s cubic-bezier(.34,1.56,.64,1);background:var(--felt)}
#s-game.mode-bidding .table-area{flex:none !important;height:18vh;min-height:80px;max-height:180px}
#s-game.mode-playing .table-area{flex:1 !important;height:auto !important;min-height:160px}
#s-game.mode-scoring .table-area{flex:none !important;height:26vh;min-height:90px;max-height:200px}
#s-game.mode-game_over .table-area{flex:1;min-height:0}
#s-game.mode-scoring .hand-area,
#s-game.mode-game_over .hand-area{display:none !important}

/* ── 7. Player Badges (M3 Chips) ─────────────────────────────── */
.p-badge{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:5px 10px 5px 8px;display:inline-flex;align-items:center;gap:5px;max-width:100%}
.p-badge.is-turn{background:var(--pri-con);border-color:var(--pri);box-shadow:0 0 0 2px var(--pri)}
.p-badge.disconnected{opacity:.5}
.p-north{position:absolute;top:6px;left:50%;transform:translateX(-50%);text-align:center;z-index:4}
.p-west{position:absolute;left:4px;top:50%;transform:translateY(-50%);text-align:center;z-index:4;max-width:72px}
.p-east{position:absolute;right:4px;top:50%;transform:translateY(-50%);text-align:center;z-index:4;max-width:72px}

/* ── 8. Card backs ───────────────────────────────────────────── */
.backs{
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:4px 2px;
}
.backs.vert{flex-direction:column;align-items:center}

/* premium playing card back */
.back-card{
  width:32px;
  height:46px;
  border-radius:4px;
  border:2px solid #fff;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);

  /* layered pattern: subtle border + diamond weave */
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, rgba(255,255,255,0) 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, rgba(0,0,0,0) 2px 8px),
    linear-gradient(180deg, #1d4ed8, #0b3aa6);
}
.back-card::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.45);
}
.back-card::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.22);
}

/* Horizontal fan (North) */
.back-card + .back-card{margin-left:-20px}

/* Vertical fan (East/West) */
.backs.vert .back-card + .back-card{
  margin-left:0;
  margin-top:-34px;
}

/* ── 9. Trick area ───────────────────────────────────────────── */
.trick-area{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;z-index:5}
.trick-slot{position:absolute;width:44px;height:60px}
/* Trick slots — percentage positioning, HTML uses .n/.e/.s/.w */
.trick-slot{position:absolute;display:flex;flex-direction:column;align-items:center;
  justify-content:center;transform:translate(-50%,-50%)}
.trick-slot.n{top:18%;left:50%}
.trick-slot.s{top:82%;left:50%}
.trick-slot.w{top:50%;left:18%}
.trick-slot.e{top:50%;left:82%}

/* ── 10. Trick bar / Info pill ───────────────────────────────── */
.contract-info{position:absolute;top:10px;left:10px;transform:none;background:rgba(0,0,0,.6);border-radius:var(--r-xs);padding:6px 12px;text-align:center;z-index:3;pointer-events:none;white-space:nowrap}
.turn-indicator{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:var(--pri-con);color:var(--on-pri-con);font-size:11px;font-weight:800;letter-spacing:.5px;border-radius:99px;padding:5px 16px;z-index:8;white-space:nowrap;pointer-events:none;display:none}
.trick-bar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:40;background:rgba(0,0,0,.55);border-radius:99px;padding:5px 10px 5px 12px;white-space:nowrap;max-width:calc(100vw - 20px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}
.tb-team{display:flex;flex-direction:column;align-items:center;min-width:32px}
.tb-tn{font-size:9px;font-weight:800;color:var(--text3);letter-spacing:.5px}
.tb-tc{font-size:16px;font-weight:800;color:var(--text2)}
.tb-mid{background:rgba(255,255,255,.10);border:none;border-radius:99px;padding:5px 14px;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.tb-mid:active{background:rgba(255,255,255,.18)}
.tb-mid-line1{font-size:12px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb-mid-line2{font-size:10px;font-weight:600;color:var(--text3);white-space:nowrap}
.tb-last-btn{background:var(--surf3);border:1px solid var(--border2);border-radius:99px;padding:4px 10px;cursor:pointer;font-size:10px;font-weight:800;color:var(--text2);touch-action:manipulation;display:flex;align-items:center;gap:3px;white-space:nowrap}
.tb-div{width:1px;height:22px;background:rgba(255,255,255,.12);flex-shrink:0}

/* ── 11. Auction overlay ─────────────────────────────────────── */
.auction-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:30;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}
.ao-box{background:var(--surf2);border-radius:var(--r) var(--r) 0 0;width:100%;max-width:400px;max-height:65vh;overflow-y:auto;padding:20px 18px 24px}
.ao-hdr{font-size:16px;font-weight:800;color:var(--text);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ao-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.ao-player{font-size:13px;font-weight:700;color:var(--text2)}
.ao-bid{font-size:14px;font-weight:800}
.ao-bid.pass{color:var(--text3)}.ao-bid.dbl{color:var(--red)}
.ao-bid.s-C{color:var(--club)}.ao-bid.s-D{color:var(--diamond)}
.ao-bid.s-H{color:var(--heart)}.ao-bid.s-S{color:var(--spade)}.ao-bid.s-N{color:var(--amber)}
.ao-contract{font-size:12px;font-weight:700;color:var(--pri);padding-top:10px;text-align:center}

/* ── 12. Dummy area ──────────────────────────────────────────── */
.dummy-area{
  position:absolute;
  top:72px;left:50%;transform:translateX(-50%);
  z-index:6;
  text-align:center;
  background:rgba(0,0,0,.45);
  border-radius:var(--r-xs);
  padding:6px 12px 8px;
  max-width:calc(100vw - 20px);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(6px);

  display:flex;
  flex-direction:column;

  /* Make the "empty chip" space click-through, but keep cards clickable */
  pointer-events:none;
}
.dummy-area > *{pointer-events:auto}

/* Dummy position-aware layout (set by JS on .dummy-area) */
.dummy-area.dummy-pos-0{
  top:15px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  flex-direction:column;
  align-items:center;
}
.dummy-area.dummy-pos-1{
  top:50%;
  right:8px;
  left:auto;
  transform:translateY(-50%);
  flex-direction:column;
  align-items:flex-end;
}
.dummy-area.dummy-pos-3{
  top:50%;
  left:8px;
  right:auto;
  transform:translateY(-50%);
  flex-direction:column;
  align-items:flex-start;
}
.dummy-area.dummy-pos-1 .dummy-pos,
.dummy-area.dummy-pos-3 .dummy-pos{display:none}

.dummy-lbl{font-size:9px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.dummy-cards{display:flex;justify-content:center;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.dummy-tag{display:inline-block;background:var(--pri-con);color:var(--on-pri-con);font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;border-radius:4px;padding:2px 5px;margin-left:4px}

/* ── 13. Hand area ───────────────────────────────────────────── */
.hand-area{flex-shrink:0;background:var(--surf);padding:8px 0 max(24px,env(safe-area-inset-bottom,24px));position:relative;z-index:30;overflow:visible;border-top:1px solid var(--border)}
.hand-lbl{font-size:9px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-bottom:6px}
.hand-fan{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:72px;margin:0 auto}
@keyframes turnPulse{0%,100%{background:var(--surf)}50%{background:var(--surf2)}}
.hand-area.is-your-turn{animation:turnPulse 2s ease-in-out infinite}
.hand-area.is-your-turn .hand-lbl{color:var(--pri)}

/* ── 14. Fan cards ───────────────────────────────────────────── */
.fan-card{position:absolute;bottom:0;transform-origin:bottom center;transition:transform .12s ease-out;cursor:pointer;touch-action:manipulation}
.fan-card:not(.is-playable){cursor:default}
/* selection: see end of file */

/* ── 15. Play cards — single base (sizes: .sz-* below; responsive tweaks in @media only) ── */
.play-card{
  border-radius:8px;
  background:#fff;
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--sh-sm);
  transition:box-shadow .15s,transform .15s;
  user-select:none;
}
[data-theme="dark"] .play-card{box-shadow:none;border-color:rgba(255,255,255,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .play-card{box-shadow:none;border-color:rgba(255,255,255,.08)}}
@keyframes cardSlideIn{0%{opacity:0;transform:translateY(-16px) scale(.88)}60%{transform:translateY(3px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
.card-pop{animation:cardSlideIn .28s cubic-bezier(.34,1.56,.64,1)}

/* ── 16. Bid panel (M3 bottom sheet) ────────────────────────── */
.bid-panel{flex:1;background:var(--surf);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.bid-actions{flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 8px}
.bid-btn-pass{padding:18px 8px;border-radius:var(--r-sm);border:none;font-family:var(--font);font-size:18px;font-weight:800;cursor:pointer;touch-action:manipulation;background:var(--pri);color:var(--on-pri);transition:opacity .15s}
.bid-btn-pass:active{filter:brightness(.88)}
.bid-btn-dbl{padding:18px 8px;border-radius:var(--r-sm);border:1.5px solid var(--border2);font-family:var(--font);font-size:18px;font-weight:800;cursor:pointer;touch-action:manipulation;background:transparent;color:var(--text2);transition:opacity .15s}
.bid-btn-dbl.disabled{opacity:.3;cursor:not-allowed}
.bid-info{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 14px 8px;min-height:38px}
.bid-turn-txt{font-size:12px;font-weight:800;color:var(--text3);white-space:nowrap;flex-shrink:0;letter-spacing:.3px}
.bid-turn-txt.your-turn{color:var(--pri)}
.bid-auction{flex:1;min-width:0;background:var(--surf2);border-radius:var(--r-xs);padding:6px 8px;overflow-y:auto;max-height:90px}
.bid-grid{flex:1;overflow-y:auto;padding:4px 14px 8px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;min-height:0}

/* Auction grid */
.auction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;text-align:center;font-size:13px}
.ag-hdr{font-weight:800;color:var(--text3);border-bottom:1px solid var(--border);padding-bottom:3px;margin-bottom:4px;font-size:10px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-call{font-weight:800;padding:4px 0;background:var(--surf3);border-radius:6px;border:1px solid var(--border)}
.ag-call.pass{color:var(--text3);font-weight:600;font-size:11px}
.ag-call.dbl{color:var(--red)}
.ag-call.s-C{color:var(--club)}.ag-call.s-D{color:var(--diamond)}
.ag-call.s-H{color:var(--heart)}.ag-call.s-S{color:var(--spade)}.ag-call.s-N{color:var(--amber)}

/* ── 17. Score panel ─────────────────────────────────────────── */
.score-panel{flex:1;background:var(--surf);overflow-y:auto;padding:16px 16px max(16px,env(safe-area-inset-bottom));scrollbar-width:none;border-radius:var(--r) var(--r) 0 0;border-top:1.5px solid var(--pri)}
.sp-result-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sp-result-icon{font-size:36px;flex-shrink:0}
@keyframes panelIn{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}
.score-panel-enter{animation:panelIn .35s cubic-bezier(.34,1.56,.64,1)}

/* ── 18. Game over ───────────────────────────────────────────── */
.gameover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;backdrop-filter:blur(12px)}
.gameover-box{background:var(--surf2);border-radius:var(--r);padding:28px 22px;text-align:center;width:100%;max-width:320px;border:1px solid var(--border2)}
.go-title{font-size:24px;font-weight:800;color:var(--pri);margin-bottom:6px}

/* ── 19. History drawer ──────────────────────────────────────── */
.hist-drawer{position:absolute;inset:0;background:var(--bg);z-index:25;overflow-y:auto;padding:0 0 16px}
.hist-hdr{position:sticky;top:0;background:var(--surf);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;z-index:1}
.hist-title{font-size:15px;font-weight:800;color:var(--text)}
.hist-close{background:none;border:none;color:var(--text2);font-size:22px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hist-close:hover{background:var(--surf2)}

/* ── 20. Modal (M3 dialog) ───────────────────────────────────── */
.dc-banner{position:fixed;top:0;left:0;right:0;background:#7c2d12;color:#fff;text-align:center;padding:10px;font-size:12px;font-weight:800;z-index:200;display:none}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .25s;padding:20px}
.modal-ov.show{opacity:1;pointer-events:all}
.modal-box{background:var(--surf2);border-radius:var(--r);padding:28px 22px;text-align:center;width:100%;max-width:320px;transform:scale(.92);transition:transform .3s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--border2)}
.modal-ov.show .modal-box{transform:scale(1)}
.m-icon{font-size:44px;margin-bottom:12px}
.m-title{font-size:22px;font-weight:800;color:var(--pri);margin-bottom:7px}
.m-sub{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:20px;line-height:1.55}
.m-ok{flex:1;background:var(--pri);color:var(--on-pri);border:none;border-radius:var(--r-sm);padding:14px;font-family:var(--font);font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation}
.m-ok:active{filter:brightness(.88)}
.m-cancel{flex:1;background:transparent;color:var(--text2);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:14px;font-family:var(--font);font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation}

/* ── 22. FABs (siblings of .hand-area under #s-game; position via --fab-stack-gap from JS) ── */
.claim-fab,.end-game-fab{
  position:fixed;
  z-index:35;
  bottom:max(12px,var(--fab-stack-gap,112px));
  padding:6px 12px;
  font-size:11px;
  font-weight:800;
  border-radius:99px;
  cursor:pointer;
  touch-action:manipulation;
  letter-spacing:.3px;
  backdrop-filter:blur(8px);
  transition:background .15s,bottom .2s ease;
}
.end-game-fab{right:calc(12px + env(safe-area-inset-right,0px));background:rgba(255,180,171,.12);border:1.5px solid rgba(255,180,171,.30);color:var(--red)}
.claim-fab{right:calc(96px + env(safe-area-inset-right,0px));background:rgba(108,242,211,.12);border:1.5px solid rgba(108,242,211,.30);color:var(--pri)}
.claim-fab:hover{background:rgba(108,242,211,.22)}
.end-game-fab:hover{background:rgba(255,180,171,.22)}

/* ── 23. Claim modals ────────────────────────────────────────── */
.claim-modal-ov{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:90;padding:20px}
.claim-modal-box{background:var(--surf2);border-radius:var(--r);padding:24px 20px;width:100%;max-width:320px;text-align:center;border:1px solid var(--border2)}
.claim-modal-title{font-size:20px;font-weight:800;color:var(--pri);margin-bottom:8px}
.claim-modal-sub{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:16px;line-height:1.5}
.claim-picker{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
.claim-val{font-size:32px;font-weight:800;color:var(--text);min-width:40px;text-align:center}
.claim-adj{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surf3);color:var(--text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;font-family:var(--font)}
.claim-remaining{font-size:12px;font-weight:600;color:var(--text3);margin-bottom:16px;line-height:1.45}
.claim-modal-btns{display:flex;gap:10px}
.claim-btn-accept{flex:1;background:var(--pri);color:var(--on-pri);border:none;border-radius:var(--r-sm);padding:13px;font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;touch-action:manipulation}
.claim-btn-cancel{flex:1;background:transparent;color:var(--text2);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:13px;font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;touch-action:manipulation}

/* ── 24. Bid reminder bar ────────────────────────────────────── */
#bid-reminder{display:none;position:fixed;bottom:0;left:0;right:0;z-index:28;background:var(--pri);color:var(--on-pri);font-family:var(--font);font-size:14px;font-weight:800;padding:14px 20px max(14px,env(safe-area-inset-bottom));align-items:center;justify-content:center;gap:8px;cursor:pointer;touch-action:manipulation}

/* ── 25. Mobile bid-panel slide-up ───────────────────────────── */
@media (max-width:767px) {
  .bid-panel{position:fixed !important;bottom:0;left:0;right:0;z-index:30;border-radius:var(--r) var(--r) 0 0;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);max-height:74vh}
  .bid-panel::before{content:'';display:block;width:36px;height:4px;background:var(--border2);border-radius:99px;margin:10px auto 4px;flex-shrink:0}
  .bid-panel.panel-open{transform:translateY(0)}
  .bid-backdrop{position:fixed;top:0;left:0;right:0;background:rgba(0,0,0,.35);z-index:29;display:none}
  .bid-backdrop.show{display:block}
  /* Height calc: screen minus hand-area height (~100px) minus bid panel (~74vh)
     Actually just cover from top to where bid panel starts — skip hand entirely */
  #s-game.bid-open .hand-area{pointer-events:none;overflow:hidden}
  #s-game.bid-open .table-area{pointer-events:none;overflow:hidden}
}

/* ── 26. Desktop layout ──────────────────────────────────────── */
@media (min-width:768px) {
  #s-game.mode-bidding .table-area,
  #s-game.mode-scoring .table-area{flex:1 !important;height:auto !important;max-height:none !important}
  .bid-panel,.score-panel{flex:none !important;max-height:56vh}
  .table-area{width:100%;max-width:100%;margin:0}
  .hand-area{width:100%;max-width:1200px;margin:0 auto;border-radius:var(--r) var(--r) 0 0}
  .p-west{left:20px}.p-east{right:20px}
  .bid-panel,.score-panel{width:100%;max-width:460px;margin:0 auto;border-radius:var(--r) var(--r) 0 0;border-left:1px solid var(--border);border-right:1px solid var(--border)}
}
@media (min-width:1024px) and (min-height:700px) {
  .trick-area{width:320px;height:280px}
  .trick-slot{width:80px;height:112px}
  .play-card{width:80px !important;height:112px !important}
  .bid-panel,.score-panel{max-width:600px}
}

/* ── 27. Confetti ────────────────────────────────────────────── */
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(80px) rotate(720deg);opacity:0}}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:confettiFall 1.2s ease-in forwards}

/* ── 28. Accessibility ───────────────────────────────────────── */
button:focus-visible,input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ── CARD RENDERING — suit ink + .cr layout; sizes via .sz-* only ──── */
.play-card.suit-H .cr,.play-card.suit-D .cr{color:#ef4444}
.play-card.suit-S .cr,.play-card.suit-C .cr{color:#1a1a1a}
.cr-top{font-weight:900;line-height:1.1;text-align:left}
.cr-mid{text-align:center;line-height:1;flex:1;display:flex;align-items:center;justify-content:center}
.cr-bot{font-weight:900;line-height:1.1;text-align:right;transform:rotate(180deg)}

/* Mobile base (<768px; tablet/desktop use media queries below) */
.play-card.sz-hand   {width:52px;height:82px;padding:4px 3px}
.play-card.sz-hand    .cr-top,.play-card.sz-hand    .cr-bot{font-size:12px}
.play-card.sz-hand    .cr-mid{font-size:24px}
.play-card.sz-hand-sm{width:38px;height:60px;padding:3px 2px}
.play-card.sz-hand-sm .cr-top,.play-card.sz-hand-sm .cr-bot{font-size:9px}
.play-card.sz-hand-sm .cr-mid{font-size:17px}
.play-card.sz-trick  {width:44px;height:72px;padding:4px 2px}
.play-card.sz-trick   .cr-top,.play-card.sz-trick   .cr-bot{font-size:10px}
.play-card.sz-trick   .cr-mid{font-size:20px}

.card-winner{outline:2.5px solid var(--pri);outline-offset:1px}
@keyframes fan-card-enter{0%{opacity:0;transform:translateY(20px) scale(.85)}100%{opacity:1;transform:translateY(0) scale(1)}}
.fan-card-enter{animation:fan-card-enter .35s cubic-bezier(.34,1.56,.64,1) both}

/* Desktop large */
@media (min-width:1200px) and (min-height:700px) {
  .trick-area{width:360px;height:360px}
  .play-card.sz-hand   {width:90px !important;height:136px !important;padding:8px;border-radius:9px;border-width:2px}
  .play-card.sz-hand    .cr-top,.play-card.sz-hand    .cr-bot{font-size:18px}
  .play-card.sz-hand    .cr-mid{font-size:46px}
  .play-card.sz-hand-sm{width:64px !important;height:96px !important;padding:5px}
  .play-card.sz-hand-sm .cr-top,.play-card.sz-hand-sm .cr-bot{font-size:13px}
  .play-card.sz-hand-sm .cr-mid{font-size:28px}
  .play-card.sz-trick  {width:80px !important;height:120px !important;padding:6px;border-radius:8px;border-width:2px}
  .play-card.sz-trick   .cr-top,.play-card.sz-trick   .cr-bot{font-size:16px}
  .play-card.sz-trick   .cr-mid{font-size:40px}
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px) {
  .play-card.sz-hand   {width:70px !important;height:106px !important;padding:5px;border-radius:7px}
  .play-card.sz-hand    .cr-top,.play-card.sz-hand    .cr-bot{font-size:13px}
  .play-card.sz-hand    .cr-mid{font-size:30px}
  .play-card.sz-hand-sm{width:50px !important;height:76px !important}
  .play-card.sz-trick  {width:60px !important;height:92px !important;padding:4px}
  .play-card.sz-trick   .cr-top,.play-card.sz-trick   .cr-bot{font-size:13px}
  .play-card.sz-trick   .cr-mid{font-size:28px}
}

/* ── HISTORY DRAWER (hd classes) ─────────────────────────────── */
.hd-card{background:var(--surf3);border-radius:var(--r-xs);padding:10px 12px;margin-bottom:8px;border-left:3px solid var(--border2)}
.hd-card.made{border-left-color:var(--pri)}.hd-card.set{border-left-color:var(--red)}
.hd-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hd-card-left{flex:1;min-width:0}
.hd-card-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.hd-dec{font-size:11px;font-weight:600;color:var(--text3)}
.hd-card-sub{font-size:11px;color:var(--text3);margin-bottom:2px}
.hd-card-rubber{font-size:11px;color:var(--pri);font-weight:700;margin-top:2px}
.hd-card-right{flex-shrink:0;text-align:right}
.hd-score{font-size:22px;font-weight:800}
.hd-score.t1{color:var(--pri)}.hd-score.t2{color:var(--red)}.hd-score.zero{color:var(--text3);font-size:16px}
.hd-badge{display:inline-block;font-size:9px;font-weight:800;border-radius:4px;padding:2px 6px;margin-left:4px}
.hd-badge.game{background:rgba(108,242,211,.15);color:var(--pri);border:1px solid rgba(108,242,211,.3)}
.hd-badge.rubber{background:rgba(108,242,211,.25);color:var(--pri);border:1px solid rgba(108,242,211,.4)}
.hd-card-totals{display:flex;gap:4px;font-size:10px;margin-top:4px;align-items:center}
.hd-tot-lbl{color:var(--text3);font-weight:600}.hd-tot{font-weight:800}
.hd-tot.t1{color:var(--pri)}.hd-tot.t2{color:var(--red)}.hd-tot-sep{color:var(--text3)}

/* ── PASS SCREEN ─────────────────────────────────────────────── */
.pass-box{background:var(--surf2);border-radius:var(--r);padding:28px 22px;max-width:340px;margin:40px auto 0;border:1px solid var(--border2)}

/* ── DUMMY AREA LABEL ROW ─────────────────────────────────────── */
.dummy-lbl-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.dummy-who{font-size:11px;font-weight:800;color:var(--text)}
.dummy-pos{font-size:10px;font-weight:700;color:var(--pri)}
.dummy-cards::-webkit-scrollbar{display:none}

/* Desktop: larger dummy */
@media (min-width:1200px) and (min-height:700px){
  .dummy-area{top:60px;padding:12px 24px 16px;max-width:1000px}
  .dummy-who{font-size:16px}
  .dummy-pos{font-size:12px}
}
@media (min-width:768px) and (max-width:1199px){
  .dummy-area{top:50px;padding:10px 20px 14px;max-width:860px}
  .dummy-who{font-size:14px}
}

/* Mobile: absolute dummy fallback when table is not playing-mode flex */
@media (max-width:767px){
  #s-game:not(.mode-playing) .dummy-area{
    top:44px;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100vw - 16px);
    padding:3px 8px 5px;
    width:auto;
  }
  #s-game:not(.mode-playing) .dummy-lbl-row{margin-bottom:1px}
  #s-game:not(.mode-playing) .dummy-cards{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    max-width:calc(100vw - 32px);
  }
  #s-game:not(.mode-playing) .dummy-who{font-size:10px}
  #s-game:not(.mode-playing) .dummy-pos{font-size:9px}
  .p-north{top:2px}
}

/* ── WAIT SCREEN / SEAT GRID ─────────────────────────────────── */
.seats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px;margin-bottom:14px}
.room-code{font-size:52px;font-weight:800;color:var(--pri);text-align:center;letter-spacing:8px;margin:8px 0 14px}

/* ── AUCTION OVERLAY INTERNALS ───────────────────────────────── */
.ao-title{font-size:12px;font-weight:800;color:var(--text2);letter-spacing:1px;text-transform:uppercase}
.ao-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text3);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ao-close:hover{background:var(--surf3)}
.ao-content{font-size:13px;font-weight:700;line-height:2;color:var(--text2)}

/* ── CONTRACT INFO (centre of table) ─────────────────────────── */
.ci-contract{font-size:16px;font-weight:900;color:var(--text);line-height:1}
.ci-by{font-size:9px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.ci-tricks{font-size:10px;font-weight:800;color:var(--pri);margin-top:3px}

/* ── DESKTOP CONTRACT INFO REPOSITIONING ─────────────────────── */
@media (min-width:1200px) and (min-height:700px){
  .contract-info{top:20px;left:20px;padding:10px 18px;border-radius:14px}
  .ci-contract{font-size:22px}
  .ci-by{font-size:11px}
}

/* Mobile score bar: one row, capped height */
@media (max-width:767px) {
  .score-bar {
    padding: 5px 6px;
    align-items: center;
    box-sizing: border-box;
  }
  .sb-dots { margin-top: 1px; }
  .sb-mid {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: min(50vw, 240px);
  }
  .sb-mid-primary { flex: 0 0 auto; gap: 3px; }
  .sb-mid-toolbar { margin-top: 0; flex-shrink: 1; min-width: 0; }
  .sb-round-lbl { font-size: 7px; letter-spacing: 1px; }
  .sb-round { font-size: 15px; }
  .sb-chip-btn { padding: 2px 5px; font-size: 9px; }
  .theme-toggle--sb { width: 22px; height: 22px; font-size: 10px; flex-shrink: 0; }
}
@media (max-width:480px) {
  .sb-score { font-size: 20px; }
  .sb-name  { font-size: 7px; max-width: 70px; }
  .score-bar { gap: 2px; padding: 5px 4px; }
  .theme-toggle--sb { width: 20px; height: 20px; font-size: 9px; }
}

/* ── Mobile playing: column flex — tight stack, no huge felt void ─ */
@media (max-width:767px) {
  /* Mobile: opponent hidden card backs (avoid solid-block look) */
  .back-card{
    width:22px;
    height:32px;
  }
  .backs{justify-content:center}
  .backs:not(.vert) .back-card + .back-card{margin-left:-14px}
  .backs.vert .back-card + .back-card{margin-top:-24px;margin-left:0}

  #s-game.mode-playing .table-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 6px 2px;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    flex: 1 1 auto;
  }
  #s-game.mode-playing .p-north {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex: 0 0 auto;
    z-index: 4;
    text-align: center;
  }
  /* North Dummy (Mobile) - Horizontal Top */
  #s-game.mode-playing .dummy-area.dummy-pos-0 {
    position: relative;
    top: auto; left: auto; transform: none;
    margin: 2px auto 0;
    flex: 0 0 auto;
    width: calc(100vw - 12px); max-width: 100%;
    padding: 4px 8px 6px;
    display: flex; flex-direction: column;
    align-items: center;
    overflow: visible;
  }
  /* East & West Dummies (Mobile) - Vertical Sides */
  #s-game.mode-playing .dummy-area.dummy-pos-1,
  #s-game.mode-playing .dummy-area.dummy-pos-3 {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: auto;
    max-width: 50px; /* Tighter to match smaller mobile cards */
    padding: 4px 4px 8px 4px;
    margin: 0;
    display: flex; flex-direction: column;
    overflow: visible; /* Never scroll — JS fits the column to budget */
    z-index: 10;
    background: rgba(0,0,0,0.65);
  }
  /* Pin East to Right */
  #s-game.mode-playing .dummy-area.dummy-pos-1 {
    right: 4px;
    left: auto;
    align-items: flex-end;
  }
  /* Pin West to Left */
  #s-game.mode-playing .dummy-area.dummy-pos-3 {
    left: 4px;
    right: auto;
    align-items: flex-start;
  }
  /* Stack Name and Dummy Tag vertically on mobile side dummies */
  #s-game.mode-playing .dummy-area.dummy-pos-1 .dummy-lbl-row,
  #s-game.mode-playing .dummy-area.dummy-pos-3 .dummy-lbl-row {
    flex-direction: column;
    text-align: center;
    gap: 3px;
    margin-bottom: 6px;
    background: transparent;
    border: none;
    padding: 0;
  }
  #s-game.mode-playing .dummy-lbl-row {
    flex: 0 0 auto;
    margin: 0 0 3px;
    justify-content: flex-start;
    flex-wrap: nowrap; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; gap: 4px; line-height: 1.15;
  }
  #s-game.mode-playing .dummy-who,
  #s-game.mode-playing .dummy-pos { font-size: 9px !important; font-weight: 700; }
  #s-game.mode-playing .dummy-tag { font-size: 7px !important; padding: 1px 4px; margin-left: 2px; }
  #s-game.mode-playing .dummy-cards { 
    flex: 0 0 auto; 
    display: block; 
    position: relative; 
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto; 
  }
  #s-game.mode-playing .dummy-cards::-webkit-scrollbar { display: none; }
  #s-game.mode-playing.dummy-partner-west .p-west {
    max-width: 60px;
    overflow: hidden;
  }
  #s-game.mode-playing.dummy-partner-west .p-west .p-card-count {
    display: none !important;
  }

  .tb-last-btn {
    font-size: 9px;
    padding: 3px 8px;
    gap: 2px;
  }
  #s-game.mode-playing .trick-area {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex: 1 1 auto;
    min-height: min(200px, 36vh);
    width: 100%;
    max-width: min(260px, 92vw);
    margin: 2px auto;
    align-self: center;
  }

  #s-game.mode-playing .trick-bar {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    flex: 0 0 auto;
    margin: 4px auto 2px;
    align-self: center;
    max-width: calc(100vw - 12px);
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  #s-game.mode-playing .hand-area {
    margin-top: -2px;
  }
  #s-game.mode-playing .p-west,
  #s-game.mode-playing .p-east {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
  }
  #s-game.mode-playing .contract-info {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 3;
  }
  .tb-mid {
    min-width: 0;
    max-width: min(220px, 52vw);
    padding: 6px 10px;
  }
  .tb-mid-line1 { font-size: 11px; }
  .hand-area.is-your-turn .hand-lbl { font-size: 13px; letter-spacing: 1px; }
  #s-game.mode-bidding .hand-area {
    border-top-color: transparent;
    background: var(--surf);
  }
  #s-game.mode-bidding .bid-panel.panel-open {
    margin-top: -1px;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
  }
}

/* ════════════════════════════════════════════════════════════════
   LOBBY / PASS / WAIT SCREENS — missing from M3 rewrite
   ════════════════════════════════════════════════════════════════ */

/* Logo */
.logo{font-size:32px;font-weight:800;color:var(--pri);text-align:center;letter-spacing:-.5px;margin-bottom:4px}

/* Card block (form container) */
.card-block{width:100%;max-width:380px;background:var(--surf2);border-radius:var(--r);padding:20px 18px;margin:0 auto 12px;border:1px solid var(--border)}

/* .inp — used by lobby/pass inputs (HTML has class="inp" not type=text) */
.inp{width:100%;background:var(--surf3);border:1.5px solid var(--border2);border-radius:var(--r-xs);padding:14px 13px;color:var(--text);font-family:var(--font);font-size:16px;font-weight:600;outline:none;transition:border-color .2s;margin-bottom:12px;display:block}
.inp:focus{border-color:var(--pri)}
.inp::placeholder{color:var(--text3);font-weight:400}

/* btn-amber = primary action (jade in M3) */
.btn-amber{background:var(--pri);color:var(--on-pri);box-shadow:none}
.btn-amber:active{filter:brightness(.88)}

/* Divider */
.divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text3);font-size:11px;font-weight:700}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Pass error */
.pass-err{font-size:12px;font-weight:700;color:var(--red);text-align:center;padding:4px 0;margin-bottom:8px}

/* Share row */
.share-row{display:flex;gap:8px;width:100%;max-width:380px;margin:0 auto 10px}

/* Wait pending */
.wait-pending{font-size:11px;color:var(--text3);text-align:center;padding:4px 12px;background:rgba(0,0,0,.2);border-radius:99px;margin-bottom:4px}
.wait-status{font-size:12px;font-weight:700;color:var(--text2);text-align:center;margin:4px auto 12px;max-width:380px}

/* ── Wait screen seat panels ─────────────────────────────────── */
#wait-seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:380px;margin:0 auto 12px}
.wait-team-panel{background:var(--surf2);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px;display:flex;flex-direction:column;gap:8px}
.wait-team-panel.my-team{border-color:var(--pri)}
.wait-team-hdr{font-size:11px;font-weight:800;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;gap:4px}
.wt-you{background:var(--pri);color:var(--on-pri);font-size:9px;padding:2px 6px;border-radius:4px;margin-left:4px}
.wait-seat-slot{background:var(--surf3);border-radius:var(--r-xs);padding:10px 10px 8px;display:flex;flex-direction:column;gap:4px}
.wait-seat-slot.is-me{background:var(--pri-con);border:1px solid var(--pri)}
.wss-label{font-size:10px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.wss-name{font-size:14px;font-weight:800;color:var(--text)}
.wait-seat-slot.is-me .wss-name{color:var(--on-pri-con)}
.wss-empty{font-size:12px;color:var(--text3);font-style:italic}
.seat-move-btn{background:var(--pri);color:var(--on-pri);border:none;border-radius:var(--r-xs);padding:8px 10px;font-family:var(--font);font-size:11px;font-weight:800;cursor:pointer;touch-action:manipulation;width:100%;margin-top:2px}
.seat-move-btn:active{filter:brightness(.88)}
.seat-move-btn.partner-slot{background:var(--surf4);color:var(--text2);border:1px solid var(--border2)}
.seat-swap-btn{background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:var(--r-xs);padding:6px 10px;font-family:var(--font);font-size:11px;font-weight:700;cursor:pointer;touch-action:manipulation;width:100%;margin-top:2px}

/* Hide dummy area strip in scoring state — origHands button handles post-round review */
#s-game.mode-scoring .dummy-area { display: none; }

/* ── SCORE PANEL INNER ELEMENTS ─────────────────────────────── */
.sp-title2{font-size:18px;font-weight:800;color:var(--pri);line-height:1.2}
.sp-sub2{font-size:12px;color:var(--text3);margin-top:2px}
.sp-rubber2{background:rgba(108,242,211,.12);border:1px solid rgba(108,242,211,.25);border-radius:var(--r-xs);padding:8px 12px;font-size:13px;font-weight:800;color:var(--pri);text-align:center;margin-bottom:10px}
.sp-breakdown{display:flex;flex-direction:column;gap:2px;margin:12px 0 4px}
.sp-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:var(--r-xs);font-size:13px;background:var(--surf2)}
.sp-row-lbl{color:var(--text2);font-weight:600}
.sp-row-val{font-weight:800;color:var(--text)}
.sp-row-val.hi{color:var(--pri)}
.sp-row-val.neg{color:var(--red)}
.sp-row-val.pos{color:var(--pri);font-size:14px}
.sp-row-val.zero{color:var(--text3)}
.sp-divider{height:1px;background:var(--border);margin:4px 0}
.sp-countdown{text-align:center;font-size:11px;font-weight:800;color:var(--text3);letter-spacing:.5px;padding:8px 0 2px}

/* ── GAME OVER INNER ELEMENTS ─────────────────────────────────── */
.go-winner{font-size:16px;font-weight:800;color:var(--pri);margin-bottom:16px}
.go-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.go-team{border-radius:var(--r-sm);padding:14px;text-align:center;background:var(--surf3);border:1.5px solid var(--border)}
.go-team.winner{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri)}
.go-tname{font-size:10px;font-weight:800;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.go-score{font-size:36px;font-weight:800;color:var(--text);line-height:1}
.go-team.winner .go-score{color:var(--pri)}

/* ── LIGHT MODE FIXES ─────────────────────────────────────────── */
/* Score bar in light mode needs dark text on light surf background */

/* Score bar chips — light mode */
[data-theme="light"] .sb-chip-btn{
  background:rgba(0,0,0,.08) !important;
  color:var(--text2) !important;
}
[data-theme="light"] .theme-toggle--sb{
  background:var(--surf3);
  border-color:var(--border2);
}

/* Light mode: player badges need visible contrast on dark felt */
[data-theme="light"] .p-badge{
  background:rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.2);
}
[data-theme="light"] .p-card-count{color:rgba(255,255,255,.7)}

/* Light mode: trick bar stays dark (it's on the felt) */
[data-theme="light"] .trick-bar{background:rgba(0,0,0,.65)}
[data-theme="light"] .tb-mid{background:rgba(255,255,255,.15)}

/* Light mode: contract info stays dark */
[data-theme="light"] .contract-info{background:rgba(0,0,0,.7)}
[data-theme="light"] .back-card{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.4)}
/* ── Cursor review additions ───────────────────────────────────── */
/* bid-grid-wrap: scrollable container around bid grid */
.bid-grid-wrap{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.bid-grid-wrap::-webkit-scrollbar{display:none}

/* claim respond modal elements */
.claim-respond-txt{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:12px;line-height:1.5;text-align:center}
.claim-respond-waiting{font-size:12px;color:var(--text3);font-style:italic;text-align:center;padding:8px 0}

/* merged from previous session */
/* Score panel mobile animation */
@keyframes panelInMobile{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@media (max-width:767px){.score-panel-enter{animation:panelInMobile .28s cubic-bezier(.22,1,.36,1)}}
@media (prefers-reduced-motion:reduce){.score-panel-enter{animation:none;opacity:1}}

/* Stronger card selection ring — CSS only, no inline JS */
.fan-card.selected .play-card{transform:translateY(-14px) scale(1.02);box-shadow:0 0 0 3px var(--pri),0 0 0 6px rgba(108,242,211,.25),0 12px 28px rgba(0,0,0,.45)}

/* ── TWO-STEP BIDDING BOX ─────────────────────────────────────── */
.bid-step1{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:4px 0}
.bid-lvl-btn{background:var(--surf3);border:1.5px solid var(--border2);border-radius:var(--r-xs);padding:10px 2px 8px;font-family:var(--font);color:var(--text);cursor:pointer;touch-action:manipulation;transition:background .12s,transform .1s;display:flex;flex-direction:column;align-items:center;gap:3px}
.bid-lvl-btn:active{background:var(--pri-con);border-color:var(--pri);transform:scale(.93)}
.bid-lvl-btn.invalid{opacity:.25;cursor:default}
.blb-num{font-size:22px;font-weight:800;line-height:1}
.blb-suits{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-height:12px}
.bid-step2-hdr{font-size:13px;font-weight:700;color:var(--text3);text-align:center;margin-bottom:10px}
.bid-step2{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px 0}
.bid-suit-btn{background:var(--surf3);border:1.5px solid var(--border2);border-radius:var(--r-xs);padding:14px 2px 10px;font-family:var(--font);cursor:pointer;touch-action:manipulation;transition:background .12s,transform .1s;display:flex;flex-direction:column;align-items:center;gap:4px}
.bid-suit-btn:active{transform:scale(.93)}
.bid-suit-btn.invalid{opacity:.25;cursor:default}
.bsb-suit{font-size:28px;font-weight:800;line-height:1}
.bsb-name{font-size:8px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text3)}
.bid-suit-btn.s-H .bsb-suit,.bid-suit-btn.s-D .bsb-suit{color:#ef4444}
.bid-suit-btn.s-S .bsb-suit,.bid-suit-btn.s-C .bsb-suit{color:var(--text)}
.bid-suit-btn.s-N .bsb-suit{color:var(--pri)}
.bid-back-btn{width:100%;margin-top:10px;background:none;border:1px solid var(--border2);border-radius:var(--r-xs);padding:11px;font-family:var(--font);font-size:13px;font-weight:700;color:var(--text3);cursor:pointer;touch-action:manipulation}
.bid-back-btn:active{background:var(--surf3)}

/* ── UNDO FAB ─────────────────────────────────────────────────── */
.undo-fab{position:fixed;bottom:calc(var(--fab-stack-gap,120px) + 44px);left:12px;background:rgba(251,191,36,.15);border:1.5px solid rgba(251,191,36,.4);color:#fbbf24;border-radius:99px;padding:7px 16px;font-size:12px;font-weight:800;cursor:pointer;z-index:25;backdrop-filter:blur(8px);letter-spacing:.3px;touch-action:manipulation;display:none;align-items:center;gap:5px;animation:fadeInUp .2s ease}
.undo-fab:active{filter:brightness(.85)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── TAKEBACK REQUEST BAR ─────────────────────────────────────── */
.takeback-bar{position:fixed;top:68px;left:50%;transform:translateX(-50%);background:rgba(30,30,30,.95);border:1.5px solid rgba(251,191,36,.4);border-radius:99px;padding:8px 12px 8px 16px;display:none;align-items:center;gap:8px;z-index:60;backdrop-filter:blur(10px);font-size:13px;font-weight:700;color:#fff;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.tb-allow{background:var(--pri);color:var(--on-pri);border:none;border-radius:99px;padding:5px 14px;font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer}
.tb-deny{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);border:none;border-radius:99px;padding:5px 14px;font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer}