/* Multiplayer additions on top of the original game's base.css */
[hidden]{display:none!important}
.tag{font-weight:400;color:var(--muted);font-size:13px}
.screen{display:flex;justify-content:center;padding:24px 14px}
.card-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.card-panel.wide{max-width:640px}
.title{margin:0;font-size:22px;text-align:center}
.btn.big{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;font-size:17px;text-decoration:none;text-align:center}
.btn.big small{font-weight:400;font-size:12px;opacity:.8}
a.btn{color:var(--ink)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input{font:inherit;font-size:16px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.joinrow{display:flex;gap:8px}
.joinrow input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:3px;font-weight:700;text-align:center}
.err{color:var(--bad);min-height:1.2em;margin:0;font-size:13px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.rules{font-size:13px}
.lobbyhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.code{font-size:34px;font-weight:800;letter-spacing:6px;color:var(--gold);font-variant-numeric:tabular-nums}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.teambox{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}
.teambox h3{margin:0;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.us-b h3{color:var(--us)} .them-b h3{color:var(--them)}
.seatbtn{border:1px dashed var(--line);border-radius:10px;padding:10px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:14px;cursor:default}
.seatbtn.empty{cursor:pointer;color:var(--muted);justify-content:center}
.seatbtn.empty:hover{border-color:var(--gold)}
.seatbtn.me{border-style:solid;border-color:var(--gold)}
.seatbtn .who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatbtn .st{font-size:11px;color:var(--muted);white-space:nowrap}
.seatbtn .st.ok{color:var(--good)}
.settings{display:flex;flex-direction:column;gap:8px}
.settings label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.settings select:disabled{opacity:.7}
.lobbyact{justify-content:flex-end}
.conn{position:sticky;top:0;z-index:40;background:#7a5b10;color:#fff;text-align:center;font-size:13px;padding:6px}
.conn.bad{background:#7a1d24}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:10px;font-size:13px;z-index:50;max-width:90vw;text-align:center}
.off{opacity:.55}
.botb{font-size:10px;background:#ffffff22;padding:1px 5px;border-radius:6px}
.awayb{font-size:10px;background:var(--bad);color:#fff;padding:1px 5px;border-radius:6px}
.timer{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700}
#sideSeats .row{font-size:13px;margin-bottom:4px}
#modal .ready-list{font-size:13px;color:var(--muted);margin:6px 0}
@media (max-width:760px),(max-height:520px){
  .screen{padding:12px 10px;overflow:auto;flex:1}
  .code{font-size:28px}
  .teams{grid-template-columns:1fr}
}

/* ---------- v1.1: turn indicator, partner emphasis, away visuals, events, desktop layout, a11y ---------- */
.seat{position:absolute}
.seat.us{border-color:#4fb3ff44}.seat.them{border-color:#ff8a5c33}
.seat.partner{background:#4fb3ff1f;border-color:#4fb3ff77}
.seat.us .bubble{box-shadow:0 0 0 2px var(--us)}.seat.them .bubble{box-shadow:0 0 0 2px var(--them)}
.seat.active{border-color:var(--gold);box-shadow:0 0 14px #e8c35a88}
.seat.active::after{content:"";position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--gold);opacity:0;animation:seatpulse 1.6s ease-in-out infinite;pointer-events:none;will-change:opacity}
@keyframes seatpulse{0%,100%{opacity:0}50%{opacity:.8}}
.seat .ring{position:absolute;inset:-6px;border-radius:16px;padding:3px;pointer-events:none;
  background:conic-gradient(var(--gold) calc(var(--p,100)*1%),#ffffff22 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.seat .ring.low{background:conic-gradient(var(--bad) calc(var(--p,100)*1%),#ffffff22 0)}
.seat.off,.seat.away{filter:grayscale(.7);opacity:.75}
.seat .ribbon{display:flex;align-items:center;gap:5px;font-size:10px;background:var(--bad);color:#fff;padding:2px 7px;border-radius:8px;white-space:nowrap}
.spin{width:9px;height:9px;border:2px solid #fff8;border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
#tablewrap{position:relative}
.flash{position:absolute;left:50%;top:15%;transform:translate(-50%,-50%) scale(.9);background:#0c1f17ee;border:1px solid var(--gold);color:var(--ink);
  padding:8px 16px;border-radius:12px;font-size:14px;z-index:6;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:92%;text-overflow:ellipsis;overflow:hidden}
.flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.flash.good{border-color:var(--good)}.flash.bad{border-color:var(--bad)}
.flash .red{color:#ff9aa0}
#cue{position:absolute;left:50%;top:calc(50% - var(--ty) - var(--tch)/2 - 30px);transform:translateX(-50%);display:flex;gap:6px;font-size:11px;z-index:1}
.cuebit{background:#0007;border:1px solid #ffffff22;border-radius:8px;padding:2px 8px;color:var(--ink);font-weight:700}
.cuebit.red{color:#ff9aa0}.cuebit.led{border-color:var(--gold)}
.linkbtn{background:none;border:none;color:var(--gold);text-decoration:underline;padding:0;font:inherit;font-size:12px;cursor:pointer}
#lasttrick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0c1f17f2;border:1px solid var(--gold);border-radius:16px;padding:12px 14px;z-index:7;min-width:260px}
#lasttrick .lt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-bottom:8px}
#lasttrick .x{background:none;border:none;color:var(--ink);font-size:18px;padding:0 4px;cursor:pointer}
#lasttrick .lt-cards{display:flex;gap:10px;justify-content:center}
#lasttrick .lt-one{display:flex;flex-direction:column;align-items:center;gap:4px}
#lasttrick .lt-who{font-size:11px;color:var(--muted);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lasttrick .card{--cw:52px;--ch:74px;width:52px;height:74px}
.prefrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;margin-bottom:10px}
.prefrow.col{flex-direction:column;align-items:flex-start;gap:6px}
.prefrow input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold)}
.foot{text-align:center;margin:4px 0 0;font-size:11.5px;color:var(--muted)}
/* home */
.hero{display:flex;justify-content:center;gap:0;margin:-4px 0 2px;height:64px;position:relative}
.hero .card{position:absolute;left:50%;top:0;transform-origin:50% 120%;--cw:44px;--ch:62px;width:44px;height:62px}
.hero .c1{transform:translateX(-50%) translateX(-42px) rotate(-28deg)}.hero .c2{transform:translateX(-50%) translateX(-14px) rotate(-9deg)}
.hero .c3{transform:translateX(-50%) translateX(14px) rotate(9deg)}.hero .c4{transform:translateX(-50%) translateX(42px) rotate(28deg)}
.rejoin{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:13px}
.rejoin b{color:var(--gold);letter-spacing:2px}
/* desktop layout */
@media (min-width:761px) and (min-height:521px){
  :root{--cw:clamp(56px,5vw,76px);--ch:calc(var(--cw)*1.44);--tcw:clamp(56px,4.6vw,72px);--tch:calc(var(--tcw)*1.44);--tx:calc(var(--tcw)*1.2);--ty:calc(var(--tch)*.62)}
  html,body{height:100%;overflow:hidden}
  body{display:flex;flex-direction:column;height:100dvh}
  header{flex:none}
  main{flex:1;min-height:0;overflow:hidden;grid-template-rows:1fr}
  #tablewrap{min-height:0;overflow:hidden}
  #table{flex:1;height:auto;min-height:0}
  #handrow{flex:none}
  aside{min-height:0;overflow:auto}
  body.noside main{grid-template-columns:1fr}
  body.noside aside{display:none}
  #sideToggle{display:inline-flex}
  .hbtn{display:inline-flex;margin-left:auto}
  .hbtn #openLog,.hbtn #openMenu{display:none}
}
#sideToggle{display:none;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 11px;font-size:14px;font-weight:600}
/* accessibility */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn:focus-visible,.seatbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px),(max-height:520px){
  :root{--cw:clamp(48px,14.5vw,62px)}
  .btn{min-height:44px}
  #cue{font-size:10px;top:auto;bottom:8px;left:8px;transform:none;flex-direction:column;gap:4px;align-items:flex-start}
  #trick .card.ledcard::before{display:none}
  .flash{font-size:13px;top:19%}
  #lasttrick{min-width:0;width:min(94%,340px);padding:10px}
  #lasttrick .card{--cw:44px;--ch:62px;width:44px;height:62px}
  .seat .ring{inset:-5px;border-radius:13px}
  .hero{height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .seat.active{box-shadow:0 0 14px #e8c35a88}
}
.seatbtn{font:inherit;color:var(--ink);background:none;width:100%;text-align:left}
.seatbtn:not(.empty){cursor:default}
.solopanel{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel2)}
body.solo #sideCode,body.solo #copyLink2{display:none}