:root {
    /* ── V2 Brand Palette ── */
    --bg:       #0B0706;
    --surface:  #160C0E;
    --surface2: #1F1014;
    --border:   #2E1A1F;
    --gold:     #C9A227;
    --gold-hi:  #EDD06A;
    --red:      #B51E1E;
    --green:    #4caf7d;
    --felt-deep:#071E17;
    --felt-mid: #0C4030;
    --text:     #F0E5CC;
    --muted:    #8a7a6a;
    /* ── Card sizes (unchanged) ── */
    --card-w:  clamp(54px, 9vw, 80px);
    --card-h:  clamp(76px, 12.5vw, 112px);
    --board-w: clamp(68px, 11vw, 96px);
    --board-h: clamp(96px, 15vw, 134px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; overflow: hidden; user-select: none; overscroll-behavior: none; }
  .screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .screen.hidden { display: none; }
  .hidden { display: none !important; }

  /* ── LOBBY ── */
  #lobby {
    background:
      radial-gradient(ellipse at 35% 15%, rgba(107,23,40,0.55) 0%, transparent 55%),
      radial-gradient(ellipse at 75% 80%, rgba(61,10,21,0.4) 0%, transparent 50%),
      var(--bg);
  }
  .lobby-inner { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
  .game-title { font-family: 'Cinzel', serif; font-size: clamp(2.8rem,9vw,4rem); font-weight: 700; color: var(--gold); letter-spacing: 0.18em; line-height: 1; text-shadow: 0 2px 24px rgba(201,162,39,0.25); }
  .game-subtitle { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 7px; }
  .suit-row { display: flex; gap: 10px; justify-content: center; margin: 14px 0 22px; font-size: 1.6rem; }
  .suit-row span { opacity: 0.5; animation: floatPulse 3s ease-in-out infinite; }
  .suit-row span:nth-child(2){animation-delay:.5s}.suit-row span:nth-child(3){animation-delay:1s}.suit-row span:nth-child(4){animation-delay:1.5s}
  @keyframes floatPulse { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:0.9;transform:translateY(-4px)} }
.form-group { margin-bottom: 14px; text-align: left; }
  .form-group label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 6px; }
  .form-group input, .form-group select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text); font-size: 0.95rem; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; }
  .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7a6a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
  .form-group input:focus, .form-group select:focus { border-color: var(--gold); }
  .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7e8e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
  .settings-row { display: flex; gap: 10px; }
  .settings-row .form-group { flex: 1; }
  .btn { width: 100%; padding: 14px; border-radius: 8px; border: none; cursor: pointer; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; transition: all 0.2s; }
  .btn-primary { background: linear-gradient(135deg, var(--gold) 0%, #8B6A10 100%); color: #0B0706; border: none; font-weight: 700; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,162,39,0.3); filter: brightness(1.08); }
  .btn-ghost { background: transparent; color: rgba(240,229,204,0.65); border: 1px solid rgba(201,162,39,0.28); margin-top: 10px; }
  .btn-ghost:hover { border-color: rgba(201,162,39,0.55); color: var(--text); }

  /* ── DEALING SCREEN ── */
  #dealing-screen { background: radial-gradient(ellipse at center, #1a2e1a 0%, #0a150a 100%); z-index: 20; }
  .dealing-inner { text-align: center; padding: 24px; max-width: 500px; width: 100%; }
  .dealing-title { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 700; color: var(--gold); margin-bottom: 6px; letter-spacing: 0.04em; text-shadow: 0 2px 20px rgba(201,162,39,0.3); }
  .dealing-sub { color: var(--muted); font-size: 0.82rem; margin-bottom: 28px; line-height: 1.5; }
  .flip-cards-row { display: flex; gap: 0; justify-content: center; margin-bottom: 24px; align-items: flex-start; }
  .team-flip-group { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 22px; }
  .team-flip-header { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; background: rgba(255,255,255,0.06); padding: 3px 12px; border-radius: 20px; }
  .team-flip-cards { display: flex; gap: 14px; }
  .team-flip-divider { width: 1px; background: rgba(255,255,255,0.1); align-self: stretch; margin: 4px 0; }
  .flip-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .flip-wrap .p-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.4s; }
  .flip-wrap.winner .p-label { color: var(--gold); font-weight: 600; }
  /* trump display block */
  .trump-block { text-align: center; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .trump-label-sm { font-size: 0.52rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 8px; }
  .trump-sym-big { font-size: 3.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: 0 auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); transition: color 0.3s, background 0.3s, border-color 0.3s; }
  .trump-sym-big.is-red   { background: rgba(181,30,30,0.18); border-color: rgba(181,30,30,0.35); box-shadow: 0 0 22px rgba(181,30,30,0.2); }
  .trump-sym-big.is-black { background: rgba(201,162,39,0.10); border-color: rgba(201,162,39,0.28); box-shadow: 0 0 22px rgba(201,162,39,0.1); }
  .trump-name { display: none; }
  .dealing-msg { color: var(--text); font-size: 0.95rem; margin-bottom: 20px; min-height: 24px; line-height: 1.5; }
  .dealing-msg .hl { color: var(--gold); font-weight: 600; }
  .pees-banner { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 10px; padding: 10px 16px; font-size: 0.82rem; color: var(--gold); margin-bottom: 20px; }
  .pees-banner.hidden { display: none; }

  /* ── GAME TABLE ── */
  #game { background: radial-gradient(ellipse at center, rgba(12,64,48,0.4) 0%, var(--felt-deep) 100%); }
  .felt { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--felt-mid) 0%, var(--felt-deep) 100%); }
  .felt::before { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,0.035); border-radius: 50%; pointer-events: none; }

  .player-zone { position: absolute; display: flex; align-items: center; justify-content: center; gap: 3px; }
  .zone-top   { top: 95px; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; }
  .zone-left  { left: 8px;  top: calc(50% + 28px); flex-direction: column; align-items: center; }
  .zone-right { right: 8px; top: calc(50% + 28px); flex-direction: column; align-items: center; }
  /* count badge on the single face-down bot card */
  .bot-card-count { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.5); line-height: 1; pointer-events: none; }

  /* player name label above each bot's card pile */

  .pinfo { position: absolute; background: rgba(7,5,5,0.82); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 10px; padding: 7px 14px; font-size: 0.82rem; line-height: 1; white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: border-color 0.3s; }
  .pinfo.active { border-color: var(--gold); }
  .pinfo.partner { border-color: #2d7a59; }
  .pinfo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background 0.3s; }
  .pinfo.active .dot { background: var(--gold); animation: blink 1s ease-in-out infinite; }
  .pinfo.partner .dot { background: var(--green); }
  .pinfo.offline .dot { background: #ff6b6b !important; animation: staleBlink 1.5s ease-in-out infinite !important; }
  .pinfo.offline { border-color: rgba(255,107,107,0.45) !important; opacity: 0.72; }
  .pinfo.offline .pname::after { content: ' 📵'; font-size: 0.75em; }
  @keyframes staleBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }
  .pinfo .pname { font-weight: 600; }
  .pinfo .psep  { color: var(--muted); }
  .pinfo .psars { color: var(--muted); }
  .pinfo .pcrown { display: none; font-size: 1rem; line-height: 1; margin-right: 1px; }
  .pinfo.is-caller .pcrown { display: inline; }
  .pinfo .psenior { display: none; font-size: 0.68rem; background: rgba(201,162,39,0.12); color: var(--gold); border: 1px solid rgba(201,162,39,0.35); border-radius: 6px; padding: 1px 6px; letter-spacing: 0.04em; }
  .pinfo.is-senior .psenior { display: inline; animation: seniorPulse 1.4s ease-in-out infinite; }
  @keyframes seniorPulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

  .pos-top    { top: 56px; left: 50%; transform: translateX(-50%); }
  .pos-left   { left: 8px; top: 50%; transform: translateY(-50%); }
  .pos-right  { right: 8px; top: 50%; transform: translateY(-50%); }
  .pos-bottom { bottom: clamp(120px, 20vw, 158px); left: 50%; transform: translateX(-50%); }

  /* play area */
  .play-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(260px, 48vw, 380px); height: clamp(220px, 38vw, 320px); }
  .pslot { position: absolute; width: var(--board-w); height: var(--board-h); }
  .pslot.top    { top: 0; left: 50%; transform: translateX(-50%); }
  .pslot.bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
  .pslot.left   { left: 0; top: 50%; transform: translateY(-50%); }
  .pslot.right  { right: 0; top: 50%; transform: translateY(-50%); }
  /* board cards are larger than hand cards */
  .pslot .card { width: var(--board-w); height: var(--board-h); }
  .pslot .card .csb { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }
  .pslot .card .cc  { font-size: clamp(0.65rem, 1.4vw, 0.88rem); }

  /* cards */
  .card { width: var(--card-w); height: var(--card-h); border-radius: 6px; border: 1px solid rgba(201,162,39,0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; position: relative; font-size: 1rem; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.6); flex-shrink: 0; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; cursor: default; -webkit-touch-callout: none; touch-action: manipulation; }
  .card.fup { background: #F0E5CC; }
  /* Card back: phulkari — single centred motif */
  .card.fdown {
    background-color: #2A0810;
    background-image:
      linear-gradient(145deg, #3A0A14 0%, #190509 100%);
    border-color: rgba(201,162,39,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    overflow: hidden;
  }
  .card.fdown::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30 Z' fill='none' stroke='%23C9A227' stroke-width='0.8' opacity='0.25'/%3E%3Cline x1='30' y1='14' x2='30' y2='46' stroke='%23C9A227' stroke-width='0.6' opacity='0.18'/%3E%3Cline x1='14' y1='30' x2='46' y2='30' stroke='%23C9A227' stroke-width='0.6' opacity='0.18'/%3E%3Cline x1='16' y1='16' x2='44' y2='44' stroke='%23C9A227' stroke-width='0.45' opacity='0.1'/%3E%3Cline x1='44' y1='16' x2='16' y2='44' stroke='%23C9A227' stroke-width='0.45' opacity='0.1'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23C9A227' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .card.fdown::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201,162,39,0.1); border-radius: 4px; pointer-events: none; }
  .card.red { color: var(--red); }
  .card.black { color: #2a1a18; }
  .card.playable { cursor: pointer; touch-action: manipulation; }
  .card.playable:hover { transform: translateY(-18px) scale(1.04); box-shadow: 0 18px 38px rgba(0,0,0,0.75); border-color: rgba(201,162,39,0.65); z-index: 5; }
  @media (hover: none) { .card.playable:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.5); border-color: rgba(201,162,39,0.2); } }
  .card.sel { transform: translateY(-22px) scale(1.05) !important; box-shadow: 0 22px 44px rgba(201,162,39,0.55) !important; border-color: var(--gold) !important; z-index: 20 !important; }
  .card.landed { animation: land 0.28s ease-out; }
  @keyframes land { from{transform:scale(0.65);opacity:0} to{transform:scale(1);opacity:1} }
  .cc { position: absolute; font-size: clamp(0.58rem, 1.2vw, 0.78rem); line-height: 1.1; }
  .cc.tl { top: 4px; left: 6px; }
  .cc.br { bottom: 4px; right: 6px; transform: rotate(180deg); }
  .csb { font-size: clamp(1.5rem, 3.2vw, 2rem); }

  /* human hand — cards sit flush at bottom; confirm button floats above without displacing cards */
  .hand-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: clamp(115px, 19vw, 150px); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
  .hand-cards { display: flex; align-items: flex-end; justify-content: center; height: clamp(105px, 17vw, 140px); }
  #play-confirm-btn { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; white-space: nowrap; background: var(--gold); color: #1a1a0e; border: none; border-radius: 10px; padding: 12px 44px; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 4px 18px rgba(201,168,76,0.45); transition: transform 0.12s ease, box-shadow 0.12s ease; touch-action: manipulation; }
  #play-confirm-btn:active { transform: translateX(-50%) scale(0.95); box-shadow: 0 2px 8px rgba(201,168,76,0.3); }
  .hand-cards .card { margin-left: clamp(-28px, -4.5vw, -18px); transition: transform 0.15s ease-out, box-shadow 0.15s ease, border-color 0.15s ease; will-change: transform; }
  .hand-cards .card.playable:hover, .hand-cards .card.sel { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, border-color 0.15s ease; }
  .hand-cards .card:first-child { margin-left: 0; }
  /* no margin change on sel — layout stays stable so re-tapping a different card lands accurately */

  /* score panel */
  .score-panel { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.78); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 116px; }
  .tricks-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .tricks-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
  .tricks-val { font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 600; color: var(--text); }
  .score-divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 8px 0 8px; }
  .score-row { display: flex; justify-content: space-between; align-items: center; border-radius: 6px; padding: 10px 14px; margin-bottom: 6px; gap: 12px; }
  .score-row:last-of-type { margin-bottom: 0; }
  .score-us   { background: rgba(201,162,39,0.06);  border: 1px solid rgba(201,162,39,0.16); }
  .score-them { background: rgba(107,23,40,0.12);   border: 1px solid rgba(107,23,40,0.28); }
  .score-team { font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--gold); letter-spacing: 0.1em; flex: 1; }
  .score-team.them { color: #E08080; }
  .score-n { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--gold); min-width: 2ch; text-align: right; }
  .score-them .score-n { color: #E08080; }
  .score-label { display: none; }
  /* keep .steam for any legacy uses */
  .steam { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
  .steam .sname { color: var(--muted); font-size: 0.72rem; }
  .steam .sval  { font-weight: 700; font-family: 'Cinzel', serif; font-size: 0.85rem; }

  /* turn timer bar */
  .timer-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.06); z-index: 5; pointer-events: none; }
  .timer-bar { height: 100%; width: 100%; background: var(--gold); transform-origin: left; }
  .timer-bar.urgent { background: var(--red); }

  /* quit button */
  .quit-btn { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 7px 13px; font-size: 0.7rem; font-family: inherit; cursor: pointer; transition: border-color 0.2s, color 0.2s; z-index: 10; }
  .quit-btn:hover { border-color: rgba(224,85,85,0.6); color: var(--red); }

  /* top bar */

  /* trump picker modal */
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.87); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); }
  .overlay.hidden { display: none; }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 28px; text-align: center; max-width: 340px; width: 92%; animation: mIn 0.28s ease-out; }
  @keyframes mIn { from{transform:scale(0.88);opacity:0} to{transform:scale(1);opacity:1} }
  .modal h2 { font-family: 'Cinzel', serif; font-size: 1.55rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; letter-spacing: 0.06em; }
  .modal p  { color: var(--muted); font-size: 0.82rem; margin-bottom: 18px; line-height: 1.55; }
  .modal-hand { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
  .suit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sbtn { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 16px 10px; cursor: pointer; font-family: inherit; color: var(--text); transition: all 0.18s; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .sbtn:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(201,162,39,0.06); }
  .sbtn .si { font-size: 2rem; }
  .sbtn .sn { font-size: 0.78rem; color: var(--muted); }
  .sbtn.red .si { color: var(--red); }

  /* toast */
  .toast { position: fixed; top: 46%; left: 50%; transform: translate(-50%,-50%); background: rgba(8,10,16,0.95); border: 1px solid var(--border); border-radius: 12px; padding: 13px 24px; font-size: 0.92rem; font-weight: 600; text-align: center; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.25s; max-width: 82vw; }
  .toast.show { opacity: 1; }
  .toast.gold  { border-color: var(--gold);  color: var(--gold); }
  .toast.green { border-color: var(--green); color: var(--green); }
  .toast.red   { border-color: var(--red);   color: var(--red); }

  /* end screen */
  #end-screen { background: radial-gradient(ellipse at center, #220A10 0%, var(--bg) 70%); z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; }
  .end-inner  { text-align: center; padding: 32px 24px; max-width: 380px; width: 100%; margin: auto; }
  .end-outcome { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 8px; }
  .end-outcome.court     { color: var(--gold); }
  .end-outcome.gooncourt { color: var(--red); }
  .end-outcome.pees      { color: var(--muted); }
  .end-title { font-family: 'Cinzel', serif; font-size: 2.6rem; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.05em; }
  .end-title.win  { color: var(--gold); }
  .end-title.lose { color: var(--text); }
  .end-shame { font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; padding: 6px 14px; border-radius: 20px; display: inline-block; }
  .end-shame.court     { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.35); }
  .end-shame.gooncourt { background: rgba(224,85,85,0.12);  color: var(--red);  border: 1px solid rgba(224,85,85,0.35); }
  .end-shame.pees      { background: rgba(122,126,142,0.12);color: var(--muted);border: 1px solid rgba(122,126,142,0.25); }
  .end-sub  { color: var(--muted); margin: 10px 0 20px; font-size: 0.85rem; line-height: 1.6; }
  .end-scores { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
  .eteam { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .eteam:last-child { border-bottom: none; }
  .eteam .etname { color: var(--muted); font-size: 0.82rem; }
  .eteam .etval  { font-size: 1.7rem; font-weight: 700; }
  .eteam.won .etval { color: var(--gold); }
  .eteam.court-loss .etname::after { content: ' · Court'; color: var(--gold); font-size: 0.7rem; }
  .eteam.goon-loss  .etname::after { content: ' · Goon Court'; color: var(--red); font-size: 0.7rem; }
  .pees-note { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 8px; }
  .pees-note strong { color: var(--text); }

  /* ── RULES MODAL ── */
  .rules-modal { max-width: 340px; max-height: 78vh; overflow-y: auto; padding: 0; text-align: left; }
  .rules-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); border-radius: 14px 14px 0 0; }
  .rules-header h3 { font-size: 1rem; font-weight: 700; color: var(--gold); margin: 0; font-family: 'Cinzel', serif; letter-spacing: 0.05em; }
  .rules-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
  .rules-body { padding: 14px 20px 20px; }
  .rules-section { margin-bottom: 13px; }
  .rules-section:last-child { margin-bottom: 0; }
  .rules-stitle { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
  .rules-section p { font-size: 0.81rem; color: var(--muted); line-height: 1.55; }
  .rules-section p strong { color: var(--text); }
  /* Rules button in game top-right */
  .rules-btn { position: absolute; top: 12px; right: 78px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 7px 11px; font-size: 0.7rem; font-family: inherit; cursor: pointer; z-index: 10; transition: border-color 0.2s, color 0.2s; }
  .rules-btn:hover { border-color: var(--gold); color: var(--gold); }
  /* ── Voice / Reaction labeled pill buttons ── */
  .v-label { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; display: block; color: var(--muted); }
  .voice-btn { position: fixed; bottom: 205px; right: 8px; background: var(--surface); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; width: auto; height: auto; padding: 9px 12px; color: rgba(255,255,255,0.7); cursor: pointer; z-index: 30; box-shadow: 0 2px 12px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; }
  .voice-btn:hover  { color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.35); }
  .voice-btn.v-active { color: #4ade80; border-color: rgba(74,222,128,0.5); box-shadow: 0 0 12px rgba(74,222,128,0.25); }
  .voice-btn.v-active .v-label { color: #4ade80; }
  .voice-btn.v-muted  { color: #F59E0B; border-color: rgba(245,158,11,0.45); }
  .voice-btn.v-muted .v-label  { color: #F59E0B; }
  /* Voice indicator on player labels */
  .vind { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; line-height: 1; }
  .vind.hidden { display: none !important; }
  .vind.vi-on    { color: #4ade80; }
  .vind.vi-muted { color: #F59E0B; }
  /* Pot inline badge next to Trick count */
  .pot-badge { font-size: 0.6rem; font-weight: 700; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.28); border-radius: 4px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
  /* sarTurn target arrow (before unlock) */
  .sar-target { font-size: 0.6rem; color: var(--muted); margin-left: 3px; }

  @media (max-width: 520px) {
    /* Taller, slightly wider hand cards for easier reading on mobile */
    .hand-cards .card             { width: 58px; height: 100px; margin-left: clamp(-38px, calc(100vw / 12 - 63px), -20px); }
    .hand-cards .card:first-child { margin-left: 0; }
    /* sel card keeps same margin — no layout shift on mobile */
    /* Scale up centre suit symbol and corner rank/suit for the player's hand */
    .hand-cards .card .csb        { font-size: 2.5rem; }
    .hand-cards .card .cc         { font-size: 0.78rem; }
    /* Taller mobile cards — hand-wrap just fits them flush at bottom */
    .hand-wrap                    { height: 110px; }
    .hand-cards                   { height: 106px; }
    /* Compact trump/score panel — label visible, symbol slightly larger */
    .trump-sym-big  { font-size: 2.4rem; width: 54px; height: 54px; }
    .trump-block    { padding-bottom: 8px; margin-bottom: 6px; }
    .score-panel    { min-width: 90px; padding: 10px 10px; font-size: 0.68rem; }
    .score-row      { padding: 7px 8px; }
    .score-n        { font-size: 1.6rem; }
    /* Hide caller crown on self pill — reduces pill width on mobile */
    #pi0 .pcrown                  { display: none !important; }
    /* Name pill sits just above the hand */
    .pos-bottom                   { bottom: 118px; }
  }

  /* ── MODE TABS ── */
  .mode-tabs { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
  .mode-tab { flex: 1; padding: 10px; border: none; background: none; color: var(--muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.18s; letter-spacing: 0.03em; }
  .mode-tab.active { background: rgba(201,162,39,0.1); color: var(--text); border-bottom: 2px solid var(--gold); }
  /* ── FRIENDS SECTION ── */
  #bots-section { display: none; }
  .or-divider { text-align: center; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 10px 0; }
  .join-row { display: flex; gap: 8px; }
  .join-row input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; }
  .join-row input:focus { border-color: var(--gold); }
  .join-row input::placeholder { color: var(--muted); }
  .join-row .btn-join { width: auto; padding: 12px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 1rem; font-weight: 700; background: linear-gradient(135deg, var(--gold) 0%, #8B6A10 100%); color: #0B0706; flex-shrink: 0; }
  /* ── WAITING ROOM ── */
  #waiting-screen { background: radial-gradient(ellipse at 30% 20%, #220A10 0%, var(--bg) 70%); }
  .waiting-inner { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
  .waiting-code-wrap { margin-bottom: 6px; color: var(--muted); font-size: 0.82rem; }
  .waiting-code-big { font-family: 'Cinzel', serif; font-size: 2.4rem; font-weight: 700; color: var(--gold); letter-spacing: 0.3em; display: block; margin: 4px 0 2px; }
  .copy-hint { font-size: 0.68rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .waiting-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
  .seat-slot { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; text-align: center; transition: border-color 0.25s; min-height: 62px; display: flex; flex-direction: column; justify-content: center; position: relative; }
  .seat-slot.filled { border-color: rgba(201,162,39,0.38); }
  .seat-slot.me     { border-color: var(--gold); box-shadow: 0 0 10px rgba(201,162,39,0.1); }
  .seat-name { font-weight: 600; font-size: 0.88rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seat-name.empty  { color: rgba(240,229,204,0.45); font-weight: 400; font-style: italic; }
  .seat-tag  { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
  .waiting-hint { color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; min-height: 18px; }
  /* ── WAITING ROOM — TEAM LAYOUT ── */
  .team-col { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
  .team-col:first-child { padding-left: 0; border-right: 1px solid var(--border); padding-right: 14px; }
  .team-col:last-child  { padding-right: 0; padding-left: 14px; }
  .team-col-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 2px; }
  .team-col-label.team-a { color: var(--gold); }
  .team-col-label.team-b { color: rgba(201,162,39,0.8); }
  .team-join-btn { margin-top: 4px; padding: 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.18s; }
  .team-join-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--text); }
  .team-join-btn:disabled { opacity: 0.35; cursor: default; }
  .team-join-btn.team-b:hover:not(:disabled) { border-color: #7eb8f7; }
  .seat-name-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
  .host-badge { font-size: 0.58rem; font-weight: 700; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.35); border-radius: 6px; padding: 1px 5px; letter-spacing: 0.04em; white-space: nowrap; line-height: 1.4; vertical-align: middle; }
  .bot-badge { font-size: 0.58rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 1px 5px; white-space: nowrap; line-height: 1.4; vertical-align: middle; }
  .stale-badge { font-size: 0.55rem; font-weight: 700; color: #ff6b6b; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.3); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
  .seat-slot.stale { opacity: 0.6; }
  .remove-bot-btn { font-size: 0.72rem; color: var(--muted); background: transparent; border: none; cursor: pointer; padding: 0 2px; position: absolute; top: 8px; right: 8px; line-height: 1; transition: color 0.15s; }
  .remove-bot-btn:hover { color: #ff6b6b; }
  .add-bot-btn { font-size: 0.68rem; color: rgba(201,162,39,0.65); background: transparent; border: 1px dashed rgba(201,162,39,0.3); border-radius: 7px; padding: 4px 0; cursor: pointer; margin-top: 5px; width: 100%; font-family: inherit; transition: color 0.15s, border-color 0.15s; }
  .add-bot-btn:hover { color: var(--gold); border-color: rgba(201,162,39,0.65); }
  /* ── SETTINGS POPUP MODAL ── */
  .settings-btn { display: flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid rgba(201,162,39,0.35); border-radius: 10px; padding: 7px 14px; color: rgba(240,229,204,0.75); font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: border-color 0.18s, color 0.18s; margin: 0 auto 14px; }
  .settings-btn:hover { border-color: var(--gold); color: var(--text); }
  .settings-btn svg { width: 13px; height: 13px; fill: currentColor; }
  #settings-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 380px; padding: 22px 20px 18px; }
  .settings-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .settings-card-title { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
  .settings-close-btn { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 2px; line-height: 1; }
  .settings-close-btn:hover { color: var(--text); }
  .settings-row { display: flex; gap: 12px; margin-bottom: 14px; }
  .settings-item { flex: 1; }
  .settings-item label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 5px; }
  .settings-item select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; color: var(--text); font-size: 0.82rem; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.18s; }
  .settings-item select:focus { border-color: var(--gold); }
  .settings-item select:disabled { opacity: 0.45; cursor: default; }
  .settings-host-note { font-size: 0.65rem; color: var(--muted); text-align: center; margin-top: 6px; font-style: italic; }

  /* ── Reaction system ── */
  .react-btn { position: fixed; bottom: 147px; right: 8px; background: var(--surface); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; width: auto; height: auto; padding: 9px 12px; font-size: 1.15rem; cursor: pointer; z-index: 30; box-shadow: 0 2px 12px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.12s; }
  .react-btn:active { transform: scale(0.88); }
  #react-picker { position: fixed; bottom: 270px; right: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; z-index: 31; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; box-shadow: 0 4px 22px rgba(0,0,0,0.5); min-width: 210px; }
  .react-opt { background: none; border: none; border-radius: 10px; padding: 7px 6px; cursor: pointer; text-align: center; transition: background 0.12s; }
  .react-opt:hover, .react-opt:active { background: var(--surface2); }
  .react-opt .re { font-size: 1.65rem; display: block; }
  .react-opt .rt { font-size: 0.5rem; color: var(--muted); display: block; line-height: 1.3; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68px; }
  .react-bubble { position: fixed; background: rgba(22,22,28,0.93); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 0.78rem; color: var(--text); white-space: nowrap; z-index: 28; pointer-events: none; transform: translateX(-50%); animation: rPop 0.18s ease; }
  @keyframes rPop { from { opacity:0; transform: translateX(-50%) scale(0.75); } to { opacity:1; transform: translateX(-50%) scale(1); } }
  .react-bubble.react-out { opacity: 0; transform: translateX(-50%) scale(0.85); transition: opacity 0.4s ease, transform 0.4s ease; }
  .spec-badge { font-size: 0.58rem; color: var(--muted); margin-top: 3px; text-align: center; letter-spacing: 0.03em; }
  .wait-spec-list { font-size: 0.72rem; color: var(--muted); margin-top: 10px; text-align: center; line-height: 1.5; }
  /* ── COUNTDOWN OVERLAY ── */
  .countdown-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 200; backdrop-filter: blur(6px); }
  .countdown-overlay.hidden { display: none; }
  .countdown-num { font-family: 'Cinzel', serif; font-size: 5rem; font-weight: 700; color: var(--gold); line-height: 1; }
  .countdown-label { color: var(--muted); font-size: 0.85rem; margin-top: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── GAME LOG PANEL ── */
.log-btn { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-size: 0.8rem; padding: 5px 12px; border-radius: 20px; cursor: pointer; z-index: 60; letter-spacing: 0.05em; transition: background 0.2s; }
.log-btn:hover { background: rgba(255,255,255,0.13); }
.snd-btn { position: fixed; top: 12px; left: calc(50% + 60px); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-size: 0.85rem; padding: 5px 10px; border-radius: 20px; cursor: pointer; z-index: 60; transition: background 0.2s; }
.snd-btn:hover { background: rgba(255,255,255,0.13); }

.log-panel { position: fixed; top: 0; right: 0; width: min(320px, 90vw); height: 100dvh; background: var(--surface); border-left: 1px solid var(--border); z-index: 120; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,0.4); }
.log-panel.hidden { display: none; }
.log-panel-hdr { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; color: var(--gold); flex-shrink: 0; }
.log-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.log-close:hover { color: var(--text); }
.log-content { flex: 1; overflow-y: auto; padding: 12px; font-size: 0.75rem; }

.lg-rhdr { font-size: 0.7rem; color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 8px 0 4px; }
.lg-rscore { font-size: 0.75rem; padding: 3px 0; }
.lg-sep { border-top: 1px solid var(--border); margin: 8px 0; }
.lg-trick { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 6px 8px; margin-bottom: 5px; }
.lg-trick-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.lg-tnum { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.lg-winner { font-size: 0.7rem; font-weight: 600; }
.lg-void { font-size: 0.68rem; color: var(--muted); font-style: italic; }
.lg-plays { color: var(--muted); line-height: 1.6; }
.lg-plays b { color: var(--text); }
.lg-win  { color: #5cb85c; }
.lg-lose { color: var(--red); }
.lg-empty { color: var(--muted); font-style: italic; text-align: center; padding: 20px 0; font-size: 0.75rem; }

/* ── END SCREEN LOG ACCORDION ── */
.end-log-wrap { margin-top: 18px; width: 100%; }
.end-log-toggle { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; padding: 9px 14px; border-radius: 8px; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; font-family: inherit; letter-spacing: 0.04em; transition: background 0.2s; }
.end-log-toggle:hover, .end-log-toggle.open { background: rgba(255,255,255,0.09); color: var(--text); }
.end-log-arrow { transition: transform 0.2s; }
.end-log-toggle.open .end-log-arrow { transform: rotate(180deg); }
.end-log-body { margin-top: 8px; max-height: 55vh; overflow-y: auto; scroll-behavior: smooth; }
.end-log-close-btn { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; margin-top: 8px; transition: background 0.2s; }
.end-log-close-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.elr-round { margin-bottom: 14px; }
.elr-hdr { font-size: 0.7rem; color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }
.elr-trick { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.72rem; flex-wrap: wrap; }
.elr-tnum { color: var(--muted); font-size: 0.65rem; min-width: 22px; flex-shrink: 0; }
.elr-plays { flex: 1; color: var(--muted); }
.elr-plays b { color: var(--text); }
.elr-win  { color: #5cb85c; font-size: 0.68rem; font-weight: 600; flex-shrink: 0; }
.elr-lose { color: var(--red); font-size: 0.68rem; font-weight: 600; flex-shrink: 0; }
.elr-void { color: var(--muted); font-size: 0.68rem; font-style: italic; flex-shrink: 0; }
.elr-score { font-size: 0.75rem; margin-top: 6px; font-weight: 600; padding-top: 4px; }

/* ── LOG — trump / auto / pot additions ── */
.lg-trump { font-size: 0.6rem; color: var(--gold); font-weight: 700; letter-spacing: 0.03em; margin-left: 2px; vertical-align: middle; }
.lg-auto  { font-size: 0.6rem; color: var(--red);  font-weight: 600; margin-left: 2px; vertical-align: middle; }
.lg-pot   { font-size: 0.7rem; color: var(--gold); font-weight: 600; margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(212,175,55,0.2); }

.elr-trump { color: var(--gold); font-weight: 700; font-size: 0.65rem; }
.elr-auto  { color: var(--red);  font-size: 0.65rem; margin-left: 1px; }
.elr-pot   { font-size: 0.68rem; color: var(--gold); padding: 2px 0 2px 22px; font-weight: 600; }