/* ------------------------------------------------------------------ base */
:root{
  --felt-1:#0f5138; --felt-2:#0a3527; --felt-edge:#06241a;
  --ink:#f2f6f3; --ink-dim:#a9bdb2; --ink-faint:#7b9287;
  --panel:#12241d; --panel-2:#173025; --line:#22433541;
  --gold:#e8c169; --gold-dim:#b8934a;
  --red:#d8484f; --green:#4fbf7b; --blue:#5aa9e6;
  /* Gold means "took the trick" and nothing else.  Whose turn it is gets its
     own colour, so the two signals can never be confused. */
  --turn:#d9ecff;
  --radius:14px;
  --card-w:74px; --card-h:104px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a4c3a 0%, #0a2b20 55%, #061a13 100%),
    #061a13;
  display:flex; flex-direction:column; overflow:hidden;
}
.hidden{display:none !important}
h1,h2,h3{margin:0 0 .5rem; font-weight:650; letter-spacing:.01em}
h2{font-size:1rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-dim)}
small{color:var(--ink-faint)}
.pip{color:var(--gold)}

/* --------------------------------------------------------------- topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1.1rem; background:rgba(4,18,13,.7);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px); z-index:5;
}
.brand{font-size:1.15rem; font-weight:700; letter-spacing:.06em}
.topbar-right{display:flex; align-items:center; gap:.85rem}
.user-chip{
  background:var(--panel-2); border:1px solid var(--line); color:var(--gold);
  padding:.28rem .7rem; border-radius:999px; font-size:.85rem; font-weight:600;
}
.link-btn{
  background:none; border:0; color:var(--ink-dim); cursor:pointer;
  font-size:.85rem; font-family:inherit; padding:.3rem;
}
.link-btn:hover{color:var(--ink)}
.lang-switch{display:flex; gap:2px; background:#0b1c16; border:1px solid var(--line);
             border-radius:999px; padding:2px}
.lang-btn{background:none; border:0; color:var(--ink-faint); cursor:pointer;
          font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.05em;
          padding:.2rem .5rem; border-radius:999px}
.lang-btn.is-active{background:var(--panel-2); color:var(--gold)}
.lang-btn:hover{color:var(--ink)}

/* -------------------------------------------------------------- screens */
.screen{flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto}
#screen-auth{align-items:center; justify-content:center; padding:1.5rem}
#screen-lobby{padding:1.5rem}
#screen-table{overflow:hidden}

.card-panel{
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.25rem; box-shadow:var(--shadow);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.panel-head h2{margin:0}

/* ----------------------------------------------------------------- auth */
.auth-panel{width:min(400px,100%)}
.auth-title{font-size:2.1rem; text-align:center; margin-bottom:.15rem; letter-spacing:.04em}
.auth-sub{text-align:center; color:var(--ink-faint); margin:0 0 .9rem; font-size:.9rem}
.game-teasers{list-style:none; margin:0 0 1.2rem; padding:0; display:flex;
              flex-direction:column; gap:.35rem}
.game-teasers li{background:#0b1c16; border:1px solid var(--line); border-radius:9px;
                 padding:.45rem .65rem; font-size:.82rem; color:var(--ink-faint)}
.game-teasers b{color:var(--ink); margin-right:.4rem}
.tabs{display:flex; background:#0b1c16; border-radius:10px; padding:4px; margin-bottom:1rem}
.tab{
  flex:1; background:none; border:0; color:var(--ink-dim); padding:.5rem;
  border-radius:7px; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:600;
}
.tab.is-active{background:var(--panel-2); color:var(--ink); box-shadow:0 1px 6px rgba(0,0,0,.3)}
.auth-form{display:flex; flex-direction:column; gap:.75rem}
label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem;
      color:var(--ink-dim); text-transform:uppercase; letter-spacing:.07em}
input,select{
  background:#0b1c16; border:1px solid var(--line); color:var(--ink);
  padding:.6rem .7rem; border-radius:9px; font-family:inherit; font-size:.95rem;
  text-transform:none; letter-spacing:0;
}
input:focus,select:focus{outline:2px solid var(--gold-dim); outline-offset:1px}
.auth-error{color:var(--red); font-size:.85rem; min-height:1.2rem; margin-top:.6rem; text-align:center}
.divider{display:flex; align-items:center; gap:.7rem; color:var(--ink-faint);
         font-size:.75rem; margin:1rem 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* --------------------------------------------------------------- buttons */
.btn{
  background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
  padding:.6rem 1rem; border-radius:10px; cursor:pointer; font-family:inherit;
  font-size:.9rem; font-weight:600; transition:transform .08s, background .15s, border-color .15s;
}
.btn:hover:not(:disabled){background:#1d3a2d; border-color:#2f5a48}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn-primary{background:linear-gradient(170deg,var(--gold),var(--gold-dim)); color:#20160a; border-color:#8c6c2e}
.btn-primary:hover:not(:disabled){background:linear-gradient(170deg,#f2cd78,#c9a054)}
.btn-danger{border-color:#5d2b2e; color:#f0b0b3}
.btn-danger:hover:not(:disabled){background:#3a1c1e}
.btn-google{background:#fff; color:#1f1f1f; border-color:#dadce0;
            display:flex; align-items:center; justify-content:center; gap:.6rem;
            margin-bottom:.7rem}
.btn-google:hover:not(:disabled){background:#f3f4f6; border-color:#c6c9ce}
.btn-ghost{background:transparent; display:flex; flex-direction:column; gap:.2rem; align-items:center}
.btn-block{width:100%}
.btn-small{padding:.34rem .7rem; font-size:.8rem; border-radius:8px}

/* ---------------------------------------------------------------- lobby */
.lobby{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.2rem;
       max-width:1100px; width:100%; margin:0 auto}
.lobby-main,.lobby-side{display:flex; flex-direction:column; gap:1.2rem; min-width:0}
.game-picker{display:flex; gap:.4rem; background:#0b1c16; border-radius:10px;
             padding:4px; margin-bottom:.5rem}
.game-tab{flex:1; background:none; border:0; color:var(--ink-dim); padding:.5rem;
          border-radius:7px; cursor:pointer; font-family:inherit; font-size:.92rem;
          font-weight:650}
.game-tab.is-active{background:var(--panel-2); color:var(--gold);
                    box-shadow:0 1px 6px rgba(0,0,0,.3)}
.game-blurb{margin:0 0 .9rem; font-size:.82rem; color:var(--ink-faint)}
.panel-head-actions{display:flex; align-items:center; gap:.7rem}
.filter-field{flex-direction:row; align-items:center; gap:.35rem; font-size:.7rem;
              text-transform:none; letter-spacing:0; color:var(--ink-faint)}
.filter-field input{width:auto; padding:0}
.game-badge{display:inline-block; font-size:.62rem; letter-spacing:.09em;
            text-transform:uppercase; font-weight:700; color:#20160a;
            background:var(--gold-dim); border-radius:999px; padding:.05rem .45rem;
            margin-right:.4rem; vertical-align:.08em}
.game-badge.sasku{background:#6f9bd1}
.suit-grid{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center}
.suit-btn{width:52px; height:44px; border-radius:10px; background:#fff; color:#17202a;
          border:1px solid #dadce0; cursor:pointer; font-size:1.5rem; line-height:1;
          font-family:inherit; transition:transform .08s, box-shadow .12s}
.suit-btn:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.45)}
.suit-btn.red{color:var(--red)}
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:1rem}
.mode-card{
  background:#0b1c16; border:1px solid var(--line); border-radius:12px;
  padding:1.1rem .9rem; cursor:pointer; color:var(--ink); font-family:inherit;
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; text-align:left;
  transition:border-color .15s, transform .1s, background .15s;
}
.mode-card:hover{border-color:var(--gold-dim); background:#12281f; transform:translateY(-2px)}
.mode-ico{font-size:1.5rem}
.mode-card strong{font-size:.98rem}
.inline-field{flex-direction:row; align-items:center; gap:.6rem; font-size:.78rem}
.inline-field select{flex:1; max-width:230px}

.table-list{display:flex; flex-direction:column; gap:.55rem}
.table-row{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:#0b1c16; border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem;
}
.table-row .tr-name{font-weight:600}
.table-row .tr-meta{font-size:.78rem; color:var(--ink-faint)}
.empty-note{color:var(--ink-faint); font-size:.87rem; padding:.6rem 0; text-align:center}

.profile-form{display:flex; gap:.5rem; align-items:flex-end; margin-bottom:.9rem}
.profile-form label{flex:1; min-width:0}
.profile-form input{width:100%}
.tr-actions{display:flex; gap:.4rem; flex:none}
.watcher-list{display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem}
.watcher{background:#0b1c16; border:1px solid var(--line); border-radius:999px;
         padding:.15rem .55rem; font-size:.76rem; color:var(--ink-dim)}
.stats{display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; font-size:.88rem}
.stats dt{color:var(--ink-faint)}
.stats .v{text-align:right; font-weight:650; color:var(--gold)}
.leaderboard{margin:0; padding-left:1.2rem; font-size:.87rem; display:flex;
             flex-direction:column; gap:.3rem}
.leaderboard li::marker{color:var(--gold-dim)}
.leaderboard .lb-row{display:flex; justify-content:space-between; gap:.6rem}
.leaderboard .lb-w{color:var(--ink-faint)}

/* ----------------------------------------------------------- scoreboard */
.scoreboard{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding:.45rem 1.1rem; background:rgba(4,18,13,.55); border-bottom:1px solid var(--line);
}
.team-slot{display:flex; min-width:0}
/* Games without partners show one pill per player instead of two teams. */
.scoreboard.individual{grid-template-columns:1fr; justify-items:center;
                       gap:.3rem}
.scoreboard.individual .board-mid{order:-1}
.scoreboard.individual .board-title{max-width:100%}
.solo-scores{display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap}
.solo-scores .team{gap:.4rem}
.felt.three .seat-top{display:none}
.team-slot-right{justify-content:flex-end}
.team{
  display:inline-flex; align-items:center; gap:.5rem; padding:.28rem .7rem;
  border-radius:10px; border:1px solid transparent; white-space:nowrap;
}
.team.is-us{background:rgba(232,193,105,.09); border-color:rgba(232,193,105,.28)}
.team-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
            color:var(--ink-dim)}
.team-score{font-size:1.45rem; font-weight:700; color:var(--gold);
            font-variant-numeric:tabular-nums; line-height:1}
.team-meta{font-size:.75rem; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.board-title{font-size:.9rem; font-weight:650; text-align:center; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; max-width:34vw}
.board-sub{font-size:.74rem; color:var(--ink-faint); text-align:center;
           white-space:nowrap}
.board-sub .warn{color:var(--gold)}
.board-sub .sub-bid{color:var(--gold); font-weight:650}

/* ---------------------------------------------------------------- table */
.table-area{flex:1; min-height:0; display:grid;
            grid-template-columns:minmax(0,1fr) 280px; gap:0; align-items:center}
.felt{
  position:relative; margin:.9rem auto; width:100%; max-width:760px;
  max-height:min(500px, 100%);
  border-radius:150px/120px;
  background:
    radial-gradient(60% 70% at 50% 42%, var(--felt-1) 0%, var(--felt-2) 68%, var(--felt-edge) 100%);
  box-shadow:0 0 0 8px #3c2a17, 0 0 0 10px #5a411f, 0 24px 60px rgba(0,0,0,.55),
             inset 0 0 90px rgba(0,0,0,.4);
  display:grid;
  grid-template-columns:150px 1fr 150px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:". top ." "left trick right" ". bottom .";
  align-items:center; justify-items:center; padding:.9rem; min-height:0;
}
.felt-centre{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:4.5rem; color:rgba(255,255,255,.015); z-index:0;
}
.seat-top{grid-area:top} .seat-left{grid-area:left}
.seat-right{grid-area:right} .seat-bottom{grid-area:bottom}
.trick{grid-area:trick; position:relative; width:230px; height:190px; z-index:2}
.bid-layer{grid-area:trick; position:relative; width:230px; height:190px; z-index:3;
           pointer-events:none}
.bid-layer .bid-chip{
  position:absolute; min-width:44px; text-align:center; padding:.2rem .5rem;
  border-radius:11px; background:rgba(6,26,19,.92); border:1px solid var(--line);
  font-weight:700; font-size:1.45rem; line-height:1.1; color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.45); animation:rise .2s ease-out;
}
.bid-layer .bid-chip small{display:block; font-size:.56rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)}
.bid-layer .bid-chip.nil{color:var(--red); border-color:#6d2a2e}
.bid-layer .bid-chip.blind{color:#cbb6f5; border-color:#5b3a9c}
.bid-layer .bid-chip.waiting{color:var(--ink-faint); font-size:1rem}
.bid-layer .pos-0{bottom:0;  left:50%; transform:translateX(-50%)}
.bid-layer .pos-1{left:0;    top:50%;  transform:translateY(-50%)}
.bid-layer .pos-2{top:0;     left:50%; transform:translateX(-50%)}
.bid-layer .pos-3{right:0;   top:50%;  transform:translateY(-50%)}
/* Kept to one compact line so it never covers the players' own bids. */
.bid-total{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:baseline; gap:.4rem; white-space:nowrap;
  background:rgba(6,26,19,.95); border:1px solid var(--gold-dim);
  border-radius:999px; padding:.22rem .7rem; box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:rise .22s ease-out;
}
.bid-total b{font-size:1.05rem; color:var(--gold); line-height:1.1}
.bid-total span{font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
                color:var(--ink-faint)}

/* seat plate */
.plate{
  background:rgba(6,26,19,.78); border:1px solid var(--line); border-radius:12px;
  padding:.45rem .7rem; min-width:118px; text-align:center; position:relative;
  transition:box-shadow .2s, border-color .2s; backdrop-filter:blur(3px);
}
.plate.is-turn{
  border-color:var(--turn); box-shadow:0 0 0 1px var(--turn), 0 0 20px rgba(217,236,255,.4);
  animation:pulse 1.7s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 1px var(--turn), 0 0 30px rgba(217,236,255,.7)}}
.plate.is-turn .pl-name::after{content:"\00a0\25c2"; color:var(--turn)}
.plate.is-me{border-color:#2f5a48}
.plate.is-partner .pl-name{color:var(--blue)}
.plate .pl-name{font-weight:650; font-size:.9rem; display:block;
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}
.plate .pl-bid{font-size:.76rem; color:var(--ink-dim); margin-top:.15rem}
.plate .pl-bid b{color:var(--gold); font-variant-numeric:tabular-nums}
.plate .pl-tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.09em; text-transform:uppercase;
  background:var(--gold); color:#20160a; padding:.08rem .45rem; border-radius:999px; font-weight:700;
}
.plate .pl-tag.tag-nil{background:var(--red); color:#fff}
.plate .pl-tag.tag-blind{background:#8b5cf6; color:#fff}
.plate .pl-tag.tag-dealer{background:#2f5a48; color:var(--ink-dim)}
.plate .pl-tag.tag-trump{background:#6f9bd1; color:#0d1b26}
.plate .pl-cards{font-size:.7rem; color:var(--ink-faint); margin-top:.15rem}
.plate.is-out{opacity:.55}

/* ---------------------------------------------------------------- cards */
.card{
  width:var(--card-w); height:var(--card-h); border-radius:8px; position:relative;
  background:linear-gradient(160deg,#fff 0%,#f2f0e9 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.14);
  color:#17202a; user-select:none; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"Segoe UI",Georgia,serif;
}
.card .corner{position:absolute; top:4px; left:5px; line-height:.95; text-align:center; font-weight:700}
.card .corner.br{top:auto; left:auto; bottom:4px; right:5px; transform:rotate(180deg)}
.card .corner .r{font-size:.95rem; display:block}
.card .corner .s{font-size:.78rem; display:block}
.card .mid{font-size:2.1rem; line-height:1}
.card.red{color:var(--red)}
.card.back{
  background:
    repeating-linear-gradient(45deg,#7d1f27 0 6px,#66161d 6px 12px);
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 0 3px #f2f0e9, inset 0 0 0 4px #4d1016;
}
.card.small{--card-w:50px; --card-h:70px}
.card.small .mid{font-size:1.4rem}
.card.small .corner .r{font-size:.72rem}
.card.small .corner .s{font-size:.6rem}
.card.tiny{--card-w:30px; --card-h:42px}
.card.tiny .mid{font-size:.9rem}
.card.tiny .corner{display:none}

/* trick cards */
.trick .card{position:absolute; animation:toss .22s ease-out}
.trick .pos-0{bottom:0;   left:50%; transform:translateX(-50%) rotate(1deg)}
.trick .pos-1{left:0;     top:50%;  transform:translateY(-50%) rotate(-7deg)}
.trick .pos-2{top:0;      left:50%; transform:translateX(-50%) rotate(-2deg)}
.trick .pos-3{right:0;    top:50%;  transform:translateY(-50%) rotate(7deg)}
.trick .won{box-shadow:0 0 0 3px var(--gold), 0 6px 20px rgba(232,193,105,.5)}
@keyframes toss{from{opacity:0; transform:scale(.8) translateY(14px)}}
.trick-note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:.78rem; color:var(--gold); background:rgba(6,26,19,.85);
  padding:.25rem .6rem; border-radius:999px; white-space:nowrap; z-index:3;
}

/* ------------------------------------------------------------- own hand */
.hand-area{padding:.2rem 1rem 1rem; display:flex; flex-direction:column;
           align-items:center; gap:.7rem}
.hand{display:flex; justify-content:center; min-height:calc(var(--card-h) + 12px);
      padding:12px 16px 0; max-width:100%}
/* Only the last card would show its lower corner, which read as a glitch. */
.hand .card .corner.br{display:none}
.hand .card{
  margin-right:-26px; cursor:default; transition:transform .13s, box-shadow .13s, filter .13s;
  animation:deal .3s backwards;
}
@keyframes deal{from{opacity:0; transform:translateY(40px) rotate(6deg)}}
.hand .card:last-child{margin-right:0}
/* Nothing in the hand reacts to the mouse merely passing over it.  A card that
   rises under the cursor reads as the game picking that card, which is exactly
   what it must not do - a card only moves once the player has chosen it.  Nor
   is any card styled by whether it is legal: working that out is the game. */
.hand.interactive .card{cursor:pointer}
.hand .card.picked{transform:translateY(-18px); box-shadow:0 0 0 3px var(--gold), 0 10px 26px rgba(0,0,0,.5)}
.hand-empty{color:var(--ink-faint); font-size:.9rem; padding:2rem}

/* ------------------------------------------------------------- actions */
.actions{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
         justify-content:center; min-height:42px}
/* "Your turn" and "Ruby is playing" have to occupy the same room, or the
   whole table shifts every time the turn comes round. */
.action-label,.waiting{min-height:20px}
.action-label{font-size:.85rem; color:var(--ink-dim); margin-right:.3rem}
.bid-grid{display:flex; flex-wrap:wrap; gap:.32rem; justify-content:center}
.bid-btn{
  width:40px; height:40px; border-radius:9px; background:#0b1c16; color:var(--ink);
  border:1px solid var(--line); cursor:pointer; font-family:inherit; font-weight:650;
  font-size:.95rem; transition:transform .08s, background .12s, border-color .12s;
}
.bid-btn:hover{background:var(--gold); color:#20160a; border-color:var(--gold); transform:translateY(-2px)}
.bid-btn.wide{width:auto; padding:0 .85rem}
.bid-btn.nil{border-color:#6d2a2e; color:#f0b0b3}
.bid-btn.nil:hover{background:var(--red); color:#fff; border-color:var(--red)}
.bid-btn.blind{border-color:#5b3a9c; color:#cbb6f5}
.bid-btn.blind:hover{background:#8b5cf6; color:#fff; border-color:#8b5cf6}
.bid-select{background:#0b1c16; border:1px solid var(--line); color:var(--ink);
            border-radius:9px; padding:.45rem .5rem; font-family:inherit;
            font-size:.95rem; font-weight:650; min-width:84px}
.action-note{font-size:.76rem; color:var(--ink-faint); width:100%;
             text-align:center}
.waiting{font-size:.88rem; color:var(--ink-faint); display:flex; align-items:center; gap:.5rem}
.spinner{width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--gold);
         border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- side panel */
.side-panel{display:flex; flex-direction:column; border-left:1px solid var(--line);
            background:rgba(4,18,13,.45); min-height:0;
            align-self:stretch; height:100%}
.side-head{display:flex; align-items:center; justify-content:space-between;
           border-bottom:1px solid var(--line); padding:.55rem .8rem}
.side-title{font-size:.8rem; font-weight:650; letter-spacing:.09em;
            text-transform:uppercase; color:var(--gold)}
.side-close{display:none; background:none; border:0; color:var(--ink-dim);
            font-size:1.5rem; line-height:1; padding:0 .3rem; cursor:pointer}
.side-close:hover{color:var(--ink)}
.side-body{flex:1; min-height:0; overflow-y:auto; padding:.7rem .8rem;
           font-size:.83rem; display:flex; flex-direction:column; gap:.4rem}
/* Chat is pinned open under the table info rather than hidden behind a tab. */
.side-chat{display:flex; flex-direction:column; min-height:0;
           height:46%; border-top:1px solid var(--line)}
.side-chat-head{font-size:.7rem; font-weight:650; letter-spacing:.1em;
                text-transform:uppercase; color:var(--ink-faint);
                padding:.5rem .8rem .2rem}
.chat-messages{flex:1; overflow-y:auto; padding:.2rem .8rem .5rem; display:flex;
               flex-direction:column; gap:.35rem; font-size:.83rem}
.chat-form{display:flex; gap:.4rem; padding:.5rem .6rem; border-top:1px solid var(--line)}
.chat-form input{flex:1; min-width:0; padding:.42rem .55rem; font-size:.85rem}
.msg .who{color:var(--gold); font-weight:600}
.msg.system{color:var(--ink-faint); font-style:italic}
.log-line{color:var(--ink-dim); line-height:1.35}
.log-line b{color:var(--ink)}
.seat-list{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.4rem}
.seat-item{display:flex; align-items:center; justify-content:space-between; gap:.4rem;
           background:#0b1c16; border:1px solid var(--line); border-radius:8px; padding:.4rem .55rem}
.seat-item .si-name{font-weight:600}
.seat-item .si-role{font-size:.72rem; color:var(--ink-faint)}
.side-actions{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem}
.drawer-scrim{position:fixed; inset:0; background:rgba(3,12,9,.6); z-index:39}

/* The open-chat strip, phones only. */
.chat-peek{display:none; width:100%; text-align:left; gap:.6rem;
  align-items:center; justify-content:space-between;
  background:rgba(4,18,13,.85); border:0; border-top:1px solid var(--line);
  color:var(--ink-dim); font-family:inherit; padding:.45rem .8rem; cursor:pointer}
.chat-peek-lines{display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1;
                 font-size:.74rem; line-height:1.25}
.chat-peek-lines .peek{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-peek-lines .peek b{color:var(--gold); font-weight:600}
.chat-peek-lines .peek.system{color:var(--ink-faint); font-style:italic}
.chat-peek-open{flex:none; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); background:#1d3a2d; border:1px solid var(--line);
  border-radius:999px; padding:.2rem .6rem}
.chat-badge{background:var(--gold); color:#20160a; border-radius:999px;
            font-size:.65rem; font-weight:700; padding:.05rem .4rem; margin-left:.35rem}

/* --------------------------------------------------------------- modals */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(3,12,9,.78); backdrop-filter:blur(4px);
  display:grid; place-items:center; z-index:50; padding:1.2rem; animation:fade .18s;
}
@keyframes fade{from{opacity:0}}
.fireworks{position:absolute; inset:0; width:100%; height:100%;
            pointer-events:none; z-index:0}
.modal{
  position:relative; z-index:1;
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.5rem;
  width:min(560px,100%); max-height:86vh; overflow-y:auto; box-shadow:var(--shadow);
  animation:rise .22s ease-out;
}
@keyframes rise{from{opacity:0; transform:translateY(18px)}}
.modal h2{font-size:1.25rem; text-transform:none; letter-spacing:0; color:var(--ink)}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.2rem; flex-wrap:wrap}
.score-table{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:.6rem}
.score-table th,.score-table td{padding:.4rem .5rem; text-align:right; border-bottom:1px solid var(--line)}
.score-table th:first-child,.score-table td:first-child{text-align:left; color:var(--ink-dim)}
.score-table .plus{color:var(--green)} .score-table .minus{color:var(--red)}
.score-table tfoot td{font-weight:700; color:var(--gold); border-bottom:0}
.trick-review{display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap;
              margin:.8rem 0 .2rem}
.trick-review-slot{display:flex; flex-direction:column; align-items:center;
                   gap:.4rem; padding:.55rem .5rem; border-radius:11px;
                   border:1px solid transparent}
.trick-review-slot.is-winner{border-color:var(--gold); background:rgba(232,193,105,.1)}
.trs-name{font-size:.78rem; color:var(--ink-dim); max-width:86px; white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis}
.trs-won{font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
         background:var(--gold); color:#20160a; padding:.06rem .45rem;
         border-radius:999px; font-weight:700}
.trs-blank{font-size:.62rem; padding:.06rem .45rem}
.rules-body{font-size:.9rem; line-height:1.55; color:var(--ink-dim)}
.rules-body h3{color:var(--ink); font-size:.95rem; margin:1rem 0 .3rem}
.rules-body ul{margin:.2rem 0; padding-left:1.1rem}
.win-banner{text-align:center; font-size:1.1rem; padding:.8rem; color:var(--gold)}
.outcome{display:flex; flex-direction:column; align-items:center; gap:.3rem;
         padding:.4rem 0 .2rem}
.outcome .shout{font-size:1.35rem; font-weight:700; letter-spacing:.02em}
.outcome.won .shout{color:var(--gold)}
.outcome.lost .shout{color:var(--ink-dim)}
.outcome .aside{font-size:.85rem; color:var(--ink-faint)}
.sad-puppy{width:118px; height:118px; animation:puppy-sigh 3.4s ease-in-out infinite}
@keyframes puppy-sigh{50%{transform:translateY(4px)}}
.sad-puppy .tear{animation:tear-fall 2.6s ease-in infinite}
@keyframes tear-fall{
  0%{opacity:0; transform:translateY(0)}
  25%{opacity:1}
  70%{opacity:1; transform:translateY(16px)}
  100%{opacity:0; transform:translateY(22px)}
}
@media (prefers-reduced-motion:reduce){
  .sad-puppy,.sad-puppy .tear{animation:none}
}

/* --------------------------------------------------------------- toasts */
.toast-stack{position:fixed; bottom:1.1rem; left:50%; transform:translateX(-50%);
             display:flex; flex-direction:column; gap:.45rem; z-index:99; align-items:center}
.toast{
  background:#1d3a2d; border:1px solid var(--line); color:var(--ink);
  padding:.55rem 1rem; border-radius:999px; font-size:.87rem; box-shadow:var(--shadow);
  animation:rise .2s ease-out;
}
.toast.err{background:#4a1c20; border-color:#6d2a2e}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .lobby{grid-template-columns:1fr}
  .table-area{grid-template-columns:1fr}
  /* The panel holds the chat, so it slides over rather than vanishing. */
  .side-panel{
    position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw); z-index:40;
    background:#0c1f18; transform:translateX(102%); transition:transform .22s ease;
    box-shadow:-14px 0 40px rgba(0,0,0,.5);
  }
  .side-panel.is-open{transform:none}
  .side-close{display:block}
  .side-chat{height:55%}
  .chat-peek{display:flex}
  .felt{grid-template-columns:110px 1fr 110px}
  .trick,.bid-layer{width:190px; height:160px}
}
@media (min-width:1001px){
  .drawer-scrim{display:none !important}
}
@media (max-width:720px){
  :root{--card-w:46px; --card-h:64px}
  /* Estonian words are longer; the bar has to give somewhere. */
  .topbar{padding:.5rem .6rem; gap:.4rem}
  .brand{font-size:.95rem; letter-spacing:.02em; white-space:nowrap}
  .topbar-right{gap:.45rem; min-width:0}
  .user-chip{font-size:.72rem; padding:.22rem .5rem; max-width:34vw;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .link-btn{font-size:.76rem; padding:.2rem; white-space:nowrap}
  .lang-btn{font-size:.66rem; padding:.18rem .38rem}
  .mode-grid{grid-template-columns:1fr}

  /* Two rows, so the title can never run into a team's score. */
  .scoreboard{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"mid mid" "a b";
    gap:.25rem .5rem; padding:.35rem .55rem .4rem;
  }
  .board-mid{grid-area:mid}
  .team-slot{grid-area:a; align-items:center}
  .team-slot-right{grid-area:b}
  .board-title{max-width:100%; font-size:.8rem}
  .board-sub{font-size:.68rem; white-space:normal}
  /* The pill has to stay inside its half of the row, so the tricks-and-bags
     line drops underneath the score rather than running into the other team. */
  .team-slot{min-width:0; overflow:hidden}
  .team{padding:.18rem .5rem; gap:.05rem .4rem; flex-wrap:wrap; max-width:100%}
  .team-label{font-size:.6rem; letter-spacing:.06em}
  .team-score{font-size:1.15rem}
  .team-meta{font-size:.62rem; width:100%; line-height:1.1}
  .team-slot-right .team{justify-content:flex-end; text-align:right}

  /* With bids and cards in the middle the table earns its space again, so it
     fills what the hand and the chat strip leave rather than floating. */
  .felt{margin:.35rem auto; grid-template-columns:70px 1fr 70px; padding:.35rem;
        border-radius:90px/70px; max-height:none}
  .plate{min-width:68px; padding:.28rem .38rem}
  .plate .pl-name{font-size:.72rem; max-width:76px}
  .plate .pl-bid{font-size:.62rem}
  .trick{width:150px; height:132px}
  .bid-layer{width:200px; height:150px}
  .trick .card{--card-w:42px; --card-h:59px}
  .bid-layer .bid-chip{font-size:1.15rem; min-width:36px; padding:.15rem .4rem}
  .bid-total b{font-size:1.2rem}

  /* One row, with the cards as wide and the overlap as small as thirteen of
     them allow, so as much of each card as possible stays tappable. */
  .hand{padding:8px 6px 0}
  .hand .card{margin-right:-19px}
  .hand .card .corner{top:3px; left:4px}
  .hand .card .mid{font-size:1.5rem}

  .hand-area{padding:.15rem .3rem .35rem; gap:.4rem}
  .actions{gap:.3rem; min-height:62px; align-content:center}
  .action-label,.waiting{width:100%; justify-content:center; text-align:center;
                         margin:0}
  .bid-btn{width:34px; height:34px; font-size:.85rem}
  .modal{padding:1.1rem}
  .score-table{font-size:.8rem}
  .score-table th,.score-table td{padding:.3rem .25rem}
}
@media (max-width:400px){
  :root{--card-w:44px; --card-h:61px}
  /* At this width the word has to go; the pip still says what this is. */
  .brand span[data-i18n]{display:none}
  .user-chip{max-width:28vw}
  .hand{padding:8px 4px 0}
  .hand .card{margin-right:-20px}
  .felt{grid-template-columns:62px 1fr 62px}
}