:root {
  --felt:#1b5e38;--felt-mid:#236b44;--felt-hi:#2d8055;
  --rim:#7a4f2a;--rim-dark:#4e2f12;
  --gold:#c9a84c;--gold-hi:#e8d08a;--gold-glow:rgba(201,168,76,.55);
  --red:#c0392b;--black:#18181e;
  --card-bg:#fdf8f0;--card-shad:rgba(0,0,0,.45);
  --ui-glass:rgba(10,30,18,.72);--ui-border:rgba(201,168,76,.25);
  --text-dim:rgba(255,255,255,.55);
  --team-a:#4fc3a1;--team-b:#e07a5f;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0c1f12;font-family:'Crimson Pro',Georgia,serif}

/* SCREENS */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  transition:opacity .4s,transform .4s;z-index:50}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.97)}
#screen-trump{background:radial-gradient(ellipse at 50% 40%,#1a3d26 0%,#0c1f12 70%)}
#screen-trump h1{font-family:'Cinzel',serif;font-size:clamp(1.6rem,5vw,2.4rem);
  color:var(--gold);text-shadow:0 0 30px var(--gold-glow);letter-spacing:3px}
#screen-trump p{color:var(--text-dim);font-size:1rem;text-align:center}
#trump-preview{display:flex;gap:8px;justify-content:center;margin:6px 0 2px}
#trump-preview .card{width:56px;height:84px;font-size:.85em;cursor:default;pointer-events:none}
#trump-screen-title{font-family:'Cinzel',serif;font-size:.75rem;color:var(--text-dim);
  letter-spacing:1px;text-align:center;margin-top:2px}
.suit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;width:100%;max-width:340px}
.suit-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:20px 10px;border-radius:14px;border:2px solid var(--ui-border);
  background:rgba(255,255,255,.04);cursor:pointer;transition:all .2s;font-family:'Cinzel',serif}
.suit-btn:hover{background:rgba(201,168,76,.12);border-color:var(--gold);
  transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.suit-btn .sym{font-size:3rem;line-height:1}
.suit-btn .name{font-size:.75rem;letter-spacing:1px;color:var(--text-dim)}
.suit-btn.red-suit .sym{color:#d63031}
.suit-btn.black-suit .sym{color:#f0f0f0}

#screen-game{background:transparent;padding:0;gap:0;justify-content:flex-start}
#screen-game.hidden{display:none}
#screen-game:not(.hidden){pointer-events:all}

/* TABLE */
#table-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#table{
  position:relative;
  width:min(80vw,80vh,460px);height:min(80vw,80vh,460px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.07) 0%,transparent 55%),
    radial-gradient(ellipse at center,var(--felt-hi) 0%,var(--felt-mid) 35%,var(--felt) 60%,#0f3a1e 100%);
  box-shadow:0 0 0 10px var(--rim),0 0 0 16px var(--rim-dark),
    0 12px 60px rgba(0,0,0,.8),inset 0 2px 12px rgba(255,255,255,.06);
  flex-shrink:0}
#table::before{content:'';position:absolute;inset:0;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.6' fill='rgba(0,0,0,.08)'/%3E%3C/svg%3E");opacity:.6}

#trump-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.45);border:2px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.8rem;line-height:1;box-shadow:0 0 20px var(--gold-glow),inset 0 0 12px rgba(0,0,0,.5);
  z-index:5;opacity:0;transition:opacity .5s}
#trump-center.show{opacity:1}
#trump-center small{font-size:.5rem;color:var(--gold);font-family:'Cinzel',serif;letter-spacing:1px;margin-top:2px}
#played-zone{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:8}

/* PLAYER ZONES */
.player-zone{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:20}
.player-zone[data-seat="0"]{bottom:-108px;left:50%;transform:translateX(-50%)}
.player-zone[data-seat="2"]{top:-108px;left:50%;transform:translateX(-50%)}
.player-zone[data-seat="1"]{right:-102px;top:50%;transform:translateY(-50%)}
.player-zone[data-seat="3"]{left:-102px;top:50%;transform:translateY(-50%)}

.player-label{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.5px;
  color:rgba(255,255,255,.75);background:var(--ui-glass);border:1px solid var(--ui-border);
  padding:3px 12px;border-radius:20px;white-space:nowrap;
  transition:all .3s;backdrop-filter:blur(6px)}
.player-zone.active .player-label{color:var(--gold-hi);background:rgba(201,168,76,.2);
  border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}
.player-zone.team-a .player-label::before{content:'● ';color:var(--team-a)}
.player-zone.team-b .player-label::before{content:'● ';color:var(--team-b)}

.opp-fan{position:relative;width:86px;height:56px}
.opp-card{position:absolute;width:30px;height:45px;border-radius:5px;
  background:
    radial-gradient(circle at 50% 50%,rgba(232,208,138,.32) 0 18%,transparent 19%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 6px),
    linear-gradient(135deg,#142a63 0%,#29499a 46%,#11235a 100%);
  border:2px solid rgba(255,255,255,.22);box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 0 0 2px rgba(201,168,76,.25)}
.opp-card::before{content:'';position:absolute;inset:5px;border:1px solid rgba(232,208,138,.55);border-radius:3px}
.opp-card::after{content:'K';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Cinzel',serif;font-size:.58rem;color:rgba(232,208,138,.88);letter-spacing:.5px}

/* MY HAND */
#my-hand{position:fixed;bottom:0;left:0;right:0;height:calc(140px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:40;pointer-events:none}
#hand-cards{--hand-overlap:-22px;--hand-scale:1;display:flex;align-items:flex-end;position:relative;pointer-events:all;max-width:calc(100vw - 18px);transform:scale(var(--hand-scale));transform-origin:bottom center}

/* CARDS */
.card{position:relative;width:64px;height:96px;border-radius:8px;
  background:var(--card-bg);border:1px solid rgba(0,0,0,.15);
  box-shadow:0 3px 10px var(--card-shad);cursor:pointer;user-select:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5px 6px;transition:transform .18s cubic-bezier(.2,0,.2,1),box-shadow .18s;flex-shrink:0}
.card.red-card{color:var(--red)}.card.black-card{color:var(--black)}
.card .c-corner{position:relative;z-index:2;width:15px;text-align:center}
.card .c-rank{font-family:'Cinzel',serif;font-size:.8rem;font-weight:700;line-height:1}
.card .c-suit{font-size:.7rem;line-height:1}
.card.pip-card .c-suit{display:none}
.card .c-center{font-size:1.7rem;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;line-height:1}
.card .c-unknown{color:rgba(0,0,0,.35);font-family:'Cinzel',serif}
.card .c-bot{transform:rotate(180deg);align-self:flex-end}
.c-pips{position:absolute;inset:18px 9px 17px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);align-items:center;justify-items:center;font-size:.82rem;line-height:1;pointer-events:none}
.c-pips span{grid-column:2;grid-row:3;text-shadow:0 .2px 0 rgba(0,0,0,.18)}
.pips-1{font-size:1.75rem}
.pips-7,.pips-8,.pips-9,.pips-10{font-size:.62rem}
.pips-7 .pip-1,.pips-8 .pip-1,.pips-9 .pip-1,.pips-10 .pip-1{grid-column:1;grid-row:1}
.pips-7 .pip-2,.pips-8 .pip-2,.pips-9 .pip-2,.pips-10 .pip-2{grid-column:3;grid-row:1}
.pips-7 .pip-3,.pips-8 .pip-3,.pips-9 .pip-3,.pips-10 .pip-3{grid-column:1;grid-row:2}
.pips-7 .pip-4,.pips-8 .pip-4,.pips-9 .pip-4,.pips-10 .pip-4{grid-column:3;grid-row:2}
.pips-7 .pip-5,.pips-8 .pip-5,.pips-9 .pip-5,.pips-10 .pip-5{grid-column:1;grid-row:4;transform:rotate(180deg)}
.pips-7 .pip-6,.pips-8 .pip-6,.pips-9 .pip-6,.pips-10 .pip-6{grid-column:3;grid-row:4;transform:rotate(180deg)}
.pips-7 .pip-7,.pips-8 .pip-7,.pips-9 .pip-7,.pips-10 .pip-7{grid-column:2;grid-row:3}
.pips-8 .pip-8,.pips-9 .pip-8,.pips-10 .pip-8{grid-column:2;grid-row:5;transform:rotate(180deg)}
.pips-9 .pip-9,.pips-10 .pip-9{grid-column:1;grid-row:5;transform:rotate(180deg)}
.pips-10 .pip-10{grid-column:3;grid-row:5;transform:rotate(180deg)}
.c-face{position:absolute;inset:19px 10px 18px;border:1px solid currentColor;border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(0,0,0,.04));pointer-events:none}
.face-art{width:78%;height:66%;border-radius:50% 50% 45% 45%;border:1px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(201,168,76,.10)}
.face-crown{font-size:.95rem;line-height:.8}
.face-rank{font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;line-height:1}
.c-face.queen .face-art{border-radius:48% 48% 42% 42%;background:rgba(201,168,76,.16)}
.c-face.king .face-art{border-width:1.5px;background:rgba(201,168,76,.20)}
.card.trump{background:linear-gradient(160deg,#fffdf5 0%,#fff8e0 100%);
  box-shadow:0 3px 10px var(--card-shad),0 0 0 1.5px rgba(201,168,76,.5)}
#hand-cards .card{margin-left:var(--hand-overlap);touch-action:manipulation}
#hand-cards .card:first-child{margin-left:0}
#hand-cards .card.playable{box-shadow:0 3px 10px var(--card-shad),0 0 0 1px rgba(232,208,138,.28)}
#hand-cards .card:hover{transform:translateY(-20px) scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 2px var(--gold);z-index:10}
#hand-cards .card.selected{transform:translateY(-26px) scale(1.08);
  box-shadow:0 14px 32px rgba(0,0,0,.6),0 0 0 2.5px var(--gold),0 0 22px var(--gold-glow);z-index:100!important}
#hand-cards .card.unplayable{opacity:.45;cursor:not-allowed}
#hand-cards .card.unplayable:hover{transform:none!important;box-shadow:0 3px 10px var(--card-shad)!important}

.played-card-wrap{position:absolute;transform:translate(-50%,-50%);z-index:12;
  pointer-events:none;animation:cardLand .32s cubic-bezier(.2,0,.2,1) forwards}
@keyframes cardLand{
  from{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(var(--fr,0deg))}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--lr,0deg))}}
.played-card-wrap .card{cursor:default;width:56px;height:84px;font-size:.9em}

/* HUD */
#hud-top{position:fixed;top:0;left:0;right:0;height:50px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:var(--ui-glass);border-bottom:1px solid var(--ui-border);
  backdrop-filter:blur(14px);z-index:60;gap:8px}
.hud-score{display:flex;flex-direction:column;align-items:center;min-width:72px}
.hud-score .hs-label{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:1px}
.hud-score .hs-val{font-size:1.3rem;font-weight:700;transition:all .3s}
.hud-score.team-a .hs-label{color:var(--team-a)}.hud-score.team-b .hs-label{color:var(--team-b)}
.hud-score.team-a .hs-val{color:var(--team-a)}.hud-score.team-b .hs-val{color:var(--team-b)}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-trump-sym{font-size:1.5rem;line-height:1}
.hud-tricks{font-size:.65rem;color:var(--text-dim);font-family:'Cinzel',serif;letter-spacing:.5px}

#turn-msg{position:fixed;top:58px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);border:1px solid var(--ui-border);border-radius:22px;
  padding:5px 18px;color:var(--gold-hi);font-family:'Cinzel',serif;font-size:.8rem;
  letter-spacing:.5px;z-index:65;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#turn-msg.show{opacity:1}
.game-status-pill{position:fixed;top:58px;left:50%;transform:translateX(-50%);
  min-width:150px;max-width:min(68vw,320px);background:rgba(0,0,0,.58);
  border:1px solid var(--ui-border);border-radius:18px;color:var(--text-dim);
  font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.6px;text-align:center;
  padding:4px 12px;z-index:57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-status-pill.ok{color:var(--team-a);border-color:rgba(79,195,161,.34)}
.game-status-pill.wait{color:var(--gold-hi);border-color:rgba(232,208,138,.42)}
.game-status-pill.bad{color:var(--team-b);border-color:rgba(224,122,95,.42)}
#trick-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.82);border:2px solid var(--gold);border-radius:14px;
  padding:14px 28px;text-align:center;z-index:80;display:none;pointer-events:none}
#trick-flash .tf-who{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold-hi);margin-bottom:4px}
#trick-flash .tf-pts{font-size:.85rem;color:var(--text-dim)}
#btn-play{position:fixed;bottom:158px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold),#a07830);
  color:#1a1a1a;font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;letter-spacing:1px;
  border:none;border-radius:30px;padding:11px 30px;cursor:pointer;z-index:50;
  box-shadow:0 4px 18px rgba(201,168,76,.45);
  transition:transform .15s,opacity .15s,box-shadow .15s;opacity:0;pointer-events:none}
#btn-play.show{opacity:1;pointer-events:all}
#btn-play:hover{transform:translateX(-50%) translateY(-2px)}
#btn-play:active{transform:translateX(-50%) scale(.97)}

/* ═══════════════════════════════════════════════════════
   SCORE SIXERS  — the physical scorecard cards
═══════════════════════════════════════════════════════ */

/* Container for a team's two score cards stacked */
.sixer-stack{
  position:fixed;
  display:flex;align-items:flex-end;
  z-index:70;
  cursor:default;
  /* click hint */
  transition:filter .2s}

/* Team A (us) — bottom-left */
#sixer-a{bottom:148px;left:12px}
/* Team B (them) — top-right */
#sixer-b{top:58px;right:12px}

/* The physical card itself */
.six-card{
  position:relative;
  width:52px;height:78px;
  border-radius:6px;
  background:var(--card-bg);
  border:1px solid rgba(0,0,0,.18);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:4px 5px;
  overflow:hidden;
  flex-shrink:0}
.six-card.red-card{color:var(--red)}
.six-card.black-card{color:var(--black)}
.six-card .sx-rank{font-family:'Cinzel',serif;font-size:.72rem;font-weight:700;line-height:1}
.six-card .sx-suit{font-size:.62rem;line-height:1}
.six-card .sx-bot{font-family:'Cinzel',serif;font-size:.72rem;font-weight:700;
  transform:rotate(180deg);align-self:flex-end;line-height:1}

/* Back card (face-down) sits behind, offset slightly */
.six-card.back-card{
  position:absolute;
  bottom:4px;left:4px;
  background:
    radial-gradient(circle at 50% 50%,rgba(232,208,138,.32) 0 18%,transparent 19%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 6px),
    linear-gradient(135deg,#142a63 0%,#29499a 46%,#11235a 100%);
  border:1.5px solid rgba(255,255,255,.15);
  z-index:0}
.six-card.back-card::before{content:'';position:absolute;inset:7px;border:1px solid rgba(232,208,138,.55);border-radius:4px}
.six-card.back-card::after{content:'KOZEL';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Cinzel',serif;font-size:.48rem;color:rgba(232,208,138,.88);letter-spacing:.7px}
.six-card.back-card.flipped{
  background:var(--card-bg);
  border:1px solid rgba(0,0,0,.18)}
.six-card.back-card.flipped::before,.six-card.back-card.flipped::after{display:none}

/* Front card sits on top */
.six-card.front-card{
  position:relative;z-index:1}

/* Win pips grid overlay on the front card */
.pip-grid{
  position:absolute;inset:14px 4px 14px 4px;
  display:grid;
  gap:1px;
  pointer-events:none}

/* Each pip (suit symbol showing a win) */
.pip{
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;line-height:1;
  opacity:0;
  transition:opacity .4s,transform .4s}
.pip.show{opacity:1;transform:scale(1.05)}

/* Label under stack */
.sixer-label{
  position:absolute;bottom:-14px;left:0;right:0;
  text-align:center;
  font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.5px;
  color:var(--text-dim);white-space:nowrap}

/* Win flash animation when a point is scored */
@keyframes pipPop{
  0%{opacity:0;transform:scale(2)}
  60%{opacity:1;transform:scale(0.9)}
  100%{opacity:1;transform:scale(1.05)}}
.pip.pop{animation:pipPop .5s cubic-bezier(.2,0,.2,1) forwards}

/* GAME OVER */
#modal-go{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#modal-go h2{font-family:'Cinzel',serif;font-size:clamp(1.5rem,5vw,2.2rem);
  color:var(--gold);text-shadow:0 0 24px var(--gold-glow)}
.mo-card{background:rgba(255,255,255,.06);border:1px solid var(--ui-border);
  border-radius:16px;padding:18px 28px;min-width:240px;max-width:340px;width:90%}
.mo-row{display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.95rem}
.mo-row:last-child{border-bottom:none}
.mo-row .mo-name{color:rgba(255,255,255,.8)}
.mo-row .mo-pts{font-weight:700;font-family:'Cinzel',serif}
.mo-row.team-a .mo-pts{color:var(--team-a)}.mo-row.team-b .mo-pts{color:var(--team-b)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#a07830);color:#1a1a1a;
  font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;font-size:.9rem;
  border:none;border-radius:30px;padding:13px 36px;cursor:pointer;
  box-shadow:0 4px 18px rgba(201,168,76,.4);transition:transform .15s,box-shadow .15s}
.btn-gold:hover{transform:translateY(-2px)}

#toast{position:fixed;top:98px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:#fff;padding:8px 20px;border-radius:20px;
  font-size:.88rem;z-index:90;opacity:0;transition:opacity .3s;pointer-events:none;
  border:1px solid var(--ui-border);max-width:min(86vw,420px);text-align:center;white-space:normal}
#toast.show{opacity:1}
#log-btn{position:fixed;top:58px;right:42px;
  background:var(--ui-glass);border:1px solid var(--ui-border);border-radius:8px;
  padding:4px 8px;font-size:.6rem;font-family:'Cinzel',serif;color:var(--text-dim);
  cursor:pointer;z-index:56;letter-spacing:.5px}
#log-btn:hover{color:var(--gold)}
#log{position:fixed;right:8px;top:82px;width:175px;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:8px;font-size:.68rem;color:var(--text-dim);
  max-height:220px;overflow-y:auto;z-index:55;display:none;flex-direction:column;gap:3px}
#log.show{display:flex}
#screen-game:not(.hidden) ~ #log-btn,
#screen-game:not(.hidden) ~ #debug-btn{display:none}
.le{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.le:last-child{border-bottom:none;color:rgba(255,255,255,.85)}
#game-feed{position:fixed;right:8px;bottom:144px;width:min(230px,calc(100vw - 150px));
  max-height:86px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  gap:3px;z-index:54;pointer-events:none}
.feed-line{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.07);
  border-radius:9px;color:rgba(255,255,255,.72);font-size:.68rem;line-height:1.15;
  padding:4px 7px;backdrop-filter:blur(7px)}
#debug-btn{position:fixed;top:58px;right:8px;background:var(--ui-glass);border:1px solid var(--ui-border);border-radius:8px;padding:4px 8px;font-size:.6rem;font-family:'Cinzel',serif;color:var(--text-dim);cursor:pointer;z-index:56;letter-spacing:.5px}
#debug-panel{position:fixed;left:8px;top:92px;width:min(330px,calc(100vw - 16px));max-height:260px;overflow:auto;background:rgba(0,0,0,.75);border:1px solid var(--ui-border);border-radius:10px;padding:8px;z-index:120;color:rgba(255,255,255,.76);font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;display:none}
#debug-panel.show{display:block}
body:not(.debug-ui) #log-btn,
body:not(.debug-ui) #debug-btn,
body:not(.debug-ui) #log,
body:not(.debug-ui) #debug-panel{display:none!important}

/* LOBBY */
#lobby-screen{position:fixed;inset:0;z-index:300;background:radial-gradient(ellipse at 50% 35%,#1a3d26 0%,#0c1f12 72%);display:flex;align-items:center;justify-content:center;padding:18px;color:#fff}
#lobby-screen.hidden{display:none}
.lobby-card{width:min(440px,100%);max-height:92vh;overflow:auto;background:rgba(0,0,0,.58);border:1px solid var(--ui-border);border-radius:18px;padding:16px;box-shadow:0 16px 60px rgba(0,0,0,.65);backdrop-filter:blur(16px)}
.lobby-card h1{font-family:'Cinzel',serif;color:var(--gold);font-size:1.7rem;letter-spacing:3px;text-align:center;margin-bottom:6px;text-shadow:0 0 26px var(--gold-glow)}
.app-version{text-align:center;color:rgba(255,255,255,.45);font:700 .68rem/1 'Cinzel',serif;letter-spacing:1.6px;margin:-2px 0 10px}
.lobby-sub{text-align:center;color:var(--text-dim);font-size:.9rem;margin-bottom:14px}
.lobby-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}
.lobby-row.one{grid-template-columns:1fr}
.lobby-card input,.lobby-card select{width:100%;border:1px solid rgba(201,168,76,.24);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;padding:10px 11px;font:14px/1.3 'Crimson Pro',serif;outline:none}
.lobby-card select option{color:#111;background:#fff}
.lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.lobby-actions.one{grid-template-columns:1fr;margin-top:0}
.lobby-btn{border:0;border-radius:12px;background:linear-gradient(135deg,var(--gold),#a07830);color:#1a1a1a;font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;letter-spacing:.7px;padding:11px;cursor:pointer}
.lobby-btn.secondary{background:rgba(255,255,255,.10);color:var(--gold);border:1px solid var(--ui-border)}
.room-item.hidden{display:none}
#room-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.room-item{border:1px solid rgba(201,168,76,.20);border-radius:12px;padding:10px;background:rgba(255,255,255,.05)}
.room-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:5px}.room-name{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.86rem}.room-status{color:var(--text-dim);font-size:.72rem}.room-players{color:rgba(255,255,255,.75);font-size:.78rem;margin-bottom:8px}.room-players span{color:var(--team-a)}
.room-players small{color:var(--text-dim);font-size:.68rem}
#btn-exit-game{position:fixed!important;left:8px!important;top:58px!important;right:auto!important;bottom:auto!important;z-index:95;background:rgba(0,0,0,.65);border:1px solid var(--ui-border);border-radius:12px;color:var(--gold);font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.7px;padding:8px 11px;display:none}
#btn-exit-game.show{display:block}
#btn-sync-game{position:fixed!important;left:8px!important;top:98px!important;right:auto!important;bottom:auto!important;z-index:95;background:rgba(0,0,0,.65);border:1px solid var(--ui-border);border-radius:12px;color:var(--gold);font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.7px;padding:8px 11px;display:none}
#btn-sync-game.show{display:block}
#state-wait{position:fixed;left:50%;top:120px;transform:translateX(-50%);z-index:85;width:min(360px,calc(100vw - 28px));background:rgba(0,0,0,.78);border:1px solid var(--ui-border);border-radius:14px;padding:12px;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.45)}
#state-wait.hidden{display:none}
.wait-title{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.86rem;letter-spacing:.6px;margin-bottom:5px}
.wait-sub{color:var(--text-dim);font-size:.78rem;margin-bottom:10px}
.player-status{display:block;margin-top:2px;font-family:'Crimson Pro',serif;font-size:.66rem;color:var(--text-dim);letter-spacing:0;text-align:center}
.player-status.online{color:var(--team-a)}
.player-status.wait{color:var(--gold-hi)}
.player-status.bot{color:var(--text-dim)}

@media (max-width:640px){
  .player-zone{z-index:34}
  .player-zone[data-seat="1"]{right:-38px}
  .player-zone[data-seat="3"]{left:-38px}
  .player-zone[data-seat="2"]{top:-96px}
  .player-zone[data-seat="0"]{bottom:-102px}
  .player-zone[data-seat="1"] .opp-fan,
  .player-zone[data-seat="3"] .opp-fan{transform:scale(.9)}
  .player-zone[data-seat="1"] .player-label,
  .player-zone[data-seat="3"] .player-label{max-width:82px;overflow:hidden;text-overflow:ellipsis}
  #game-feed{right:8px;bottom:122px;width:min(210px,calc(100vw - 128px));max-height:76px}
  .feed-line{font-size:.63rem}
}