/* ------------------------------------------------------------------ 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;
  --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)}

/* -------------------------------------------------------------- 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 1.2rem; font-size:.9rem}
.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-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}
.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}

.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:.5rem 1.1rem; background:rgba(4,18,13,.55); border-bottom:1px solid var(--line);
}
.team{display:flex; align-items:baseline; gap:.55rem; padding:.3rem .6rem; border-radius:10px}
.team-b{justify-content:flex-end}
.team.is-us{background:rgba(232,193,105,.09); box-shadow:inset 0 0 0 1px rgba(232,193,105,.25)}
.team-name{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim)}
.team-score{font-size:1.5rem; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums}
.team-meta{font-size:.76rem; color:var(--ink-faint)}
.board-title{font-size:.95rem; font-weight:650; text-align:center}
.board-sub{font-size:.76rem; color:var(--ink-faint); text-align:center}

/* ---------------------------------------------------------------- table */
.table-area{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:0}
.felt{
  position:relative; margin:.9rem;
  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:6rem; color:rgba(255,255,255,.028); 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}

/* 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(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 22px rgba(232,193,105,.45);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 1px var(--gold), 0 0 34px rgba(232,193,105,.75)}}
.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-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-top:12px}
.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}
.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}
.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}
.side-head{display:flex; border-bottom:1px solid var(--line)}
.side-tab{flex:1; background:none; border:0; color:var(--ink-faint); padding:.6rem;
          cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:600}
.side-tab.is-active{color:var(--gold); box-shadow:inset 0 -2px 0 var(--gold)}
.side-body{flex:1; min-height:0; overflow-y:auto; padding:.7rem .8rem;
           font-size:.83rem; display:flex; flex-direction:column; gap:.4rem}
#side-chat{padding:0}
.chat-messages{flex:1; overflow-y:auto; padding:.7rem .8rem; display:flex;
               flex-direction:column; gap:.35rem}
.chat-form{display:flex; gap:.4rem; padding:.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}

/* --------------------------------------------------------------- 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}}
.modal{
  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)}

/* --------------------------------------------------------------- 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}
  .side-panel{display:none}
  .felt{grid-template-columns:110px 1fr 110px}
  .trick{width:190px; height:160px}
}
@media (max-width:720px){
  :root{--card-w:58px; --card-h:82px}
  .mode-grid{grid-template-columns:1fr}
  .felt{margin:.4rem; grid-template-columns:86px 1fr 86px; padding:.4rem; border-radius:90px/70px}
  .plate{min-width:80px; padding:.32rem .4rem}
  .plate .pl-name{font-size:.76rem; max-width:84px}
  .plate .pl-bid{font-size:.66rem}
  .trick{width:150px; height:132px}
  .trick .card{--card-w:44px; --card-h:62px}
  .hand .card{margin-right:-30px}
  .scoreboard{padding:.4rem .6rem; gap:.4rem}
  .team-score{font-size:1.15rem}
  .bid-btn{width:34px; height:34px; font-size:.85rem}
}