/* ================= online / home / room / sound UI ================= */
#teamNameUs, #teamNameThem{ max-width:130px; overflow:hidden; text-overflow:ellipsis; }

.hidden-hand .hand-name{
  position:absolute; left:50%; top:-34%; transform:translateX(-50%);
  padding:2px 7px; border-radius:999px; white-space:nowrap;
  background:rgba(8,12,9,.72); border:1px solid rgba(255,225,170,.14);
  color:rgba(246,241,228,.86); font-size:max(7px, calc(var(--sw,640px)*.0105));
  letter-spacing:.03em; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.hidden-hand .hand-name .bot{ color:rgba(227,193,105,.85); }
.local-name{
  position:absolute; z-index:9; left:26.5%; top:81.4%;
  padding:2px 7px; border-radius:999px;
  background:rgba(8,12,9,.68); border:1px solid rgba(255,225,170,.12);
  color:rgba(246,241,228,.82); font-size:max(7px, calc(var(--sw,640px)*.0105));
  white-space:nowrap; pointer-events:none;
}
.local-name .you{ color:var(--gold); }

/* shared form bits */
.home-input, .room-code-input{
  width:100%; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(255,225,170,.22);
  background:rgba(0,0,0,.24); color:var(--cream);
  font:600 14px/1.2 ui-sans-serif, system-ui, sans-serif; outline:none;
}
.home-input:focus, .room-code-input:focus{ border-color:rgba(227,193,105,.7); box-shadow:0 0 0 3px rgba(227,193,105,.12); }
.field-label{ display:block; margin:0 0 5px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,228,.45); }
.live-counts{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin:0 0 14px;
}
.live-pill{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
  font-size:10px; letter-spacing:.04em; color:rgba(246,241,228,.6);
}
.live-pill b{ color:var(--gold); font-size:12px; font-weight:700; }
.live-pill.unavailable b{ color:rgba(246,241,228,.4); font-size:10px; }
.live-note{ font-size:9px; color:rgba(246,241,228,.3); text-align:center; margin:-7px 0 12px; }
.home-actions{ display:grid; gap:8px; margin-top:12px; }
.home-actions .btn{ width:100%; }
.home-join{ display:flex; gap:7px; margin-top:8px; }
.home-join .room-code-input{ text-transform:uppercase; letter-spacing:.16em; text-align:center; }
.home-msg{ min-height:16px; margin:8px 0 0; font-size:11px; color:rgba(246,241,228,.55); text-align:center; }
.home-msg.error{ color:#ffb1a8; }
.invite-banner{
  margin:0 0 12px; padding:10px 12px; border-radius:12px;
  background:rgba(227,193,105,.10); border:1px solid rgba(227,193,105,.26);
  font-size:11.5px; line-height:1.45; color:rgba(246,241,228,.8);
}
.invite-banner b{ color:var(--gold); }

/* private room */
.room-id{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:10px 0; padding:9px 12px; border-radius:12px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,225,170,.18);
}
.room-id .code{ font:700 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.24em; color:var(--gold); }
.room-id .copy{ border:0; background:transparent; color:rgba(246,241,228,.55); cursor:pointer; font-size:11px; }
.room-players{ display:grid; gap:6px; margin:10px 0; }
.room-player{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); font-size:12px;
}
.room-player .who{ color:rgba(246,241,228,.86); }
.room-player .state{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,228,.42); }
.room-player.ready .state{ color:var(--gold); }
.room-player.you{ border-color:rgba(227,193,105,.22); }
.qr-wrap{
  display:flex; justify-content:center; margin:12px 0 8px;
}
.qr-box{
  background:#fff; padding:12px; border-radius:12px; line-height:0;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.qr-box svg{ width:min(260px, 62vw); height:auto; display:block; }
.invite-url{
  font:11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:rgba(246,241,228,.5); word-break:break-all; text-align:center; margin:8px 0 0;
}
.room-note{ font-size:10.5px; line-height:1.5; color:rgba(246,241,228,.5); text-align:center; margin:8px 0 0; }
.room-actions{ display:grid; gap:7px; margin-top:12px; }
.room-actions .btn{ width:100%; }
.room-actions-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

/* sound panel */
.sound-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; }
.sound-row span{ font-size:12px; color:rgba(246,241,228,.7); }
.sound-row input[type=range]{ flex:1; accent-color:var(--gold); }
.sound-toggle{
  display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(246,241,228,.8);
}
.sound-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.sound-preview{
  padding:7px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:rgba(246,241,228,.72);
  font-size:10.5px; text-align:left; cursor:pointer;
}
.sound-preview:hover{ background:rgba(255,255,255,.09); }
.sound-note{ font-size:9.5px; line-height:1.5; color:rgba(246,241,228,.35); margin-top:10px; }
.sound-status{ font-size:10px; color:rgba(227,193,105,.7); margin-top:8px; }

/* network / pause banner */
.net-banner{
  position:fixed; z-index:58; left:50%; top:52px; transform:translateX(-50%) translateY(-8px);
  max-width:min(90vw, 520px); padding:7px 13px; border-radius:999px;
  background:rgba(18,12,8,.93); border:1px solid rgba(227,193,105,.34);
  color:rgba(246,241,228,.86); font-size:11.5px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.net-banner.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.net-banner.warn{ border-color:rgba(255,150,120,.45); color:#ffd0c5; }
@media (max-width:620px){
  .hidden-hand .hand-name{ font-size:7px; padding:1px 5px; top:-38%; }
  .local-name{ font-size:7px; padding:1px 5px; left:27%; }
  .qr-box svg{ width:min(230px, 66vw); }
  .sound-grid{ grid-template-columns:1fr 1fr; }
}

/* portrait phones: move the real hand into the empty lower screen space */
@media (orientation: portrait) and (max-width: 700px){
  .stage-wrap.docked{ flex:0 0 auto; padding:4px; }
  .hand-dock.show{
    flex:1 1 auto; display:flex; flex-direction:column;
    justify-content:flex-start; min-height:0;
    padding-top:10px;
  }
  .hand-dock.show .dock-cards{ height:auto; flex:1 1 auto; min-height:0; }
  .stage.hand-docked .my-hand{ display:none; }
  .hand-dock.show{ animation: handZoom .24s cubic-bezier(.2,.8,.3,1) both; }
}
@keyframes handZoom{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:none; }
}

/* ================= old radio ================= */
.radio-btn{
  position:fixed; z-index:30; right:12px; top:56px;
  width:56px; height:46px; padding:4px; border-radius:12px;
  border:1px solid rgba(227,193,105,.34);
  background:linear-gradient(180deg, rgba(38,25,16,.94), rgba(16,12,8,.94));
  color:#e3c169; cursor:pointer; display:none;
  box-shadow:0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s, border-color .2s, box-shadow .2s;
}
.radio-btn.show{ display:block; }
.radio-btn:hover{ transform:translateY(-1px); border-color:rgba(227,193,105,.7); }
.radio-btn svg{ width:100%; height:100%; display:block; }
.radio-btn.playing{ box-shadow:0 0 0 1px rgba(227,193,105,.5), 0 0 24px rgba(227,193,105,.35); }
.radio-btn.blocked{ animation:radioPulse 1.8s ease-in-out infinite; }
@keyframes radioPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(227,193,105,.0);} 50%{ box-shadow:0 0 0 7px rgba(227,193,105,.08);} }

.radio-panel .now{
  padding:10px 12px; border-radius:12px; margin:4px 0 12px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,225,170,.12);
  font-size:11.5px; color:rgba(246,241,228,.62); line-height:1.5;
}
.radio-panel .now b{ color:var(--gold); font-weight:600; }
.radio-albums{ display:grid; gap:7px; }
.radio-album{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:10px 12px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:rgba(246,241,228,.86); font-size:13px; text-align:left;
}
.radio-album:hover{ background:rgba(255,255,255,.09); }
.radio-album.active{ border-color:rgba(227,193,105,.65); background:rgba(227,193,105,.12); }
.radio-album .count{ font-size:9px; color:rgba(246,241,228,.4); letter-spacing:.06em; }
.radio-off{ margin-top:8px; width:100%; }
.radio-volume{ display:flex; align-items:center; gap:10px; margin:12px 0 2px; }
.radio-volume span{ font-size:12px; color:rgba(246,241,228,.65); }
.radio-volume input{ flex:1; accent-color:var(--gold); }
.radio-note{ font-size:9.5px; line-height:1.5; color:rgba(246,241,228,.36); margin-top:10px; }
.radio-blocked-note{ color:#ffd0b0; font-size:10.5px; margin-top:8px; }
@media (max-width:700px){
  .radio-btn{ top:54px; right:7px; width:50px; height:41px; }
}

/* ================= walkie talkie ================= */
.walkie-btn{
  position:fixed; z-index:30; right:12px; top:108px;
  display:none; align-items:center; gap:6px;
  padding:5px 9px 5px 6px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(227,193,105,.34);
  background:linear-gradient(180deg, rgba(38,25,16,.94), rgba(16,12,8,.94));
  color:#e3c169; font:inherit; font-size:9px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.walkie-btn.show{ display:flex; }
.walkie-btn:hover{ transform:translateY(-1px); border-color:rgba(227,193,105,.72); }
.walkie-btn svg{ width:21px; height:21px; display:block; flex:0 0 auto; }
.walkie-btn.active{
  color:#1c1407;
  background:linear-gradient(180deg,#f2dc92,#d8b355);
  border-color:rgba(255,245,200,.8);
  box-shadow:0 0 20px rgba(227,193,105,.35);
}
.walkie-btn.incoming{ animation:walkiePulse 1.3s ease-in-out infinite; }
@keyframes walkiePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(227,193,105,0); }
  50%{ box-shadow:0 0 0 7px rgba(227,193,105,.12); }
}
.walkie-panel .walkie-state{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border-radius:12px; margin:4px 0 12px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,225,170,.12);
  font-size:11.5px; line-height:1.45; color:rgba(246,241,228,.65);
}
.walkie-panel .walkie-state b{ color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.walkie-dot{ width:8px; height:8px; border-radius:50%; background:rgba(246,241,228,.28); flex:0 0 auto; }
.walkie-dot.ok{ background:#6cd39a; box-shadow:0 0 9px rgba(108,211,154,.65); }
.walkie-dot.wait{ background:#e3c169; box-shadow:0 0 9px rgba(227,193,105,.55); }
.walkie-dot.bad{ background:#e2565c; box-shadow:0 0 9px rgba(226,86,92,.55); }
.walkie-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.walkie-actions .walkie-action{ flex:1; min-width:110px; }
.walkie-note{ font-size:9.5px; line-height:1.55; color:rgba(246,241,228,.36); margin:12px 0 0; }
@media (max-width:700px){
  .walkie-btn{ top:101px; right:7px; }
}

/* ================= room chat ================= */
.chat-btn{
  position:fixed; z-index:30; right:12px; top:154px;
  display:none; align-items:center; gap:6px;
  padding:5px 9px 5px 6px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(227,193,105,.34);
  background:linear-gradient(180deg, rgba(38,25,16,.94), rgba(16,12,8,.94));
  color:#e3c169; font:inherit; font-size:9px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.chat-btn.show{ display:flex; }
.chat-btn:hover{ transform:translateY(-1px); border-color:rgba(227,193,105,.72); }
.chat-btn svg{ width:21px; height:21px; display:block; flex:0 0 auto; }
.chat-btn.has-unread{
  border-color:rgba(227,193,105,.8);
  box-shadow:0 0 20px rgba(227,193,105,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.chat-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:15px; height:15px; padding:0 4px; border-radius:999px;
  background:#e3c169; color:#251c07; font-size:9px; font-weight:800;
  line-height:1; font-style:normal;
}
.chat-badge[hidden]{ display:none !important; }
.chat-btn .chat-badge{ position:absolute; top:-5px; right:-5px; }
.chat-btn{ position:fixed; }
.chat-panel .chat-log{
  height:min(42vh, 300px); overflow-y:auto; padding:4px 2px 8px;
  display:flex; flex-direction:column; gap:8px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:4px 0 10px; scroll-behavior:smooth;
}
.chat-empty{
  margin:auto; padding:24px 12px; text-align:center;
  font-size:11px; line-height:1.6; color:rgba(246,241,228,.38);
}
.chat-msg{ display:flex; flex-direction:column; max-width:86%; gap:3px; }
.chat-msg.them{ align-self:flex-start; align-items:flex-start; }
.chat-msg.you{ align-self:flex-end; align-items:flex-end; }
.chat-bubble{
  padding:8px 10px; border-radius:11px;
  font-size:12px; line-height:1.45; word-break:break-word; white-space:pre-wrap;
}
.chat-msg.them .chat-bubble{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  color:rgba(246,241,228,.86); border-bottom-left-radius:4px;
}
.chat-msg.you .chat-bubble{
  background:rgba(227,193,105,.16); border:1px solid rgba(227,193,105,.28);
  color:rgba(255,248,225,.94); border-bottom-right-radius:4px;
}
.chat-meta{
  display:flex; gap:6px; padding:0 2px;
  font-size:8.5px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(246,241,228,.32);
}
.chat-form{ display:flex; gap:7px; align-items:stretch; }
.chat-input{
  flex:1; min-width:0; padding:9px 11px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22);
  color:var(--cream); font:inherit; font-size:12px; outline:none;
}
.chat-input:focus{ border-color:rgba(227,193,105,.62); box-shadow:0 0 0 2px rgba(227,193,105,.1); }
.chat-send{ flex:0 0 auto; padding-left:14px; padding-right:14px; }
.chat-note{ font-size:9.5px; line-height:1.5; color:rgba(246,241,228,.34); margin:9px 0 0; }
.room-actions .chat-badge{ margin-left:5px; }
@media (max-width:700px){
  .chat-btn{ top:148px; right:7px; }
  .chat-panel .chat-log{ height:min(38vh, 260px); }
  .chat-input{ font-size:16px; }
}

/* ================= persistent chat dock ================= */
.chat-dock{
  position:fixed; z-index:35; right:14px; bottom:86px;
  width:270px; max-height:calc(100dvh - 110px);
  display:none; flex-direction:column;
  border:1px solid rgba(227,193,105,.4); border-radius:13px;
  background:linear-gradient(180deg, rgba(30,22,14,.96), rgba(12,10,8,.97));
  box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--cream); overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.chat-dock.show{ display:flex; }
.chat-dock.over-modal{ z-index:65; }
.chat-head{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 9px; border:0; border-bottom:1px solid transparent;
  background:rgba(255,255,255,.035); color:#e3c169;
  font:inherit; font-size:9px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; text-align:left;
}
.chat-dock.expanded .chat-head{ border-bottom-color:rgba(255,255,255,.09); }
.chat-head:hover{ background:rgba(227,193,105,.09); }
.chat-head svg{ width:18px; height:18px; flex:0 0 auto; }
.chat-head .chat-badge{ margin-left:auto; }
.chat-chevron{ color:rgba(246,241,228,.5); font-size:12px; line-height:1; margin-left:3px; }
.chat-body{ display:none; flex-direction:column; min-height:0; padding:8px 10px 9px; }
.chat-dock.expanded .chat-body{ display:flex; }
.chat-dock .chat-log{
  height:min(16vh, 110px); min-height:76px; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:1px 1px 6px; margin:0 0 7px;
  border-bottom:1px solid rgba(255,255,255,.07);
  scroll-behavior:smooth;
}
.chat-dock .chat-empty{ margin:auto; padding:10px; font-size:10px; }
.chat-dock .chat-bubble{ padding:6px 8px; border-radius:9px; font-size:11px; line-height:1.4; }
.chat-dock .chat-meta{ font-size:7.5px; }
.chat-dock .chat-form{ gap:5px; }
.chat-dock .chat-input{ padding:7px 9px; border-radius:8px; font-size:11.5px; }
.chat-dock .chat-send{ padding:7px 10px; border-radius:8px; font-size:10px; }
.chat-dock .chat-note{ font-size:8px; line-height:1.4; margin:6px 0 0; }
@media (max-width:1100px){
  .chat-dock{
    top:148px; bottom:auto; right:7px;
    width:min(240px, 62vw); max-height:calc(100dvh - 165px);
  }
}
@media (max-width:700px){
  .chat-dock{ top:148px; right:7px; width:min(230px, 64vw); }
  .chat-dock .chat-log{ height:min(17vh, 96px); min-height:70px; }
  .chat-dock .chat-input{ font-size:16px; }
  .chat-dock .chat-note{ display:none; }
}

/* ================= Shelem bidding / target / widow ================= */
.target-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:0 0 10px; font-size:10px; color:rgba(246,241,228,.55);
}
.target-label{ margin-right:3px; }
.target-pill{
  padding:4px 10px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:rgba(246,241,228,.65); font:inherit; font-size:10px; font-weight:700;
}
.target-pill.active{
  color:#251c07; background:linear-gradient(180deg,#f2dc92,#d8b355);
  border-color:rgba(255,245,200,.8);
}
.bid-summary{
  display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center;
  margin:2px 0 8px; font-size:11.5px; color:rgba(246,241,228,.62);
}
.bid-summary b{ color:var(--gold); }
.bid-preview{
  display:flex; flex-wrap:wrap; justify-content:center; gap:3px;
  max-height:170px; overflow-y:auto; padding:8px 4px; margin:4px 0 10px;
  border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07);
}
.bid-preview .card{
  position:relative; width:36px; height:51px; font-size:7px; flex:0 0 auto;
  border-radius:5px;
}
.bid-controls{ display:flex; align-items:center; gap:7px; margin-top:6px; }
.bid-controls label{ font-size:11px; color:rgba(246,241,228,.6); }
.bid-amount{
  width:80px; padding:8px 9px; border-radius:9px;
  border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.24);
  color:var(--cream); font:inherit; font-size:13px; text-align:center;
}
.bid-amount:focus{ outline:none; border-color:rgba(227,193,105,.65); }
.bid-help{ font-size:9.5px; line-height:1.5; color:rgba(246,241,228,.38); margin:8px 0 0; }
.kitty-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:7px;
  max-height:min(48vh, 330px); overflow-y:auto; padding:5px 2px 8px;
}
.kitty-card{
  position:relative; height:82px; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  background:rgba(255,255,255,.03); overflow:hidden;
  transition:transform .14s, border-color .16s, box-shadow .16s;
}
.kitty-card .card{ position:absolute; inset:0; width:100%; height:100%; border-radius:7px; font-size:11px; }
.kitty-card:hover{ transform:translateY(-2px); border-color:rgba(227,193,105,.5); }
.kitty-card.selected{ border-color:rgba(227,193,105,.95); box-shadow:0 0 0 2px rgba(227,193,105,.55); transform:translateY(-3px); }
.kitty-card.selected::after{
  content:'✓'; position:absolute; top:3px; right:4px; z-index:2;
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  background:#e3c169; color:#251c07; font-size:10px; font-weight:900;
}
.kitty-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px; font-size:10.5px; color:rgba(246,241,228,.55);
}
.kitty-foot .btn{ flex:0 0 auto; }
@media (max-width:700px){
  .kitty-grid{ gap:5px; max-height:44vh; }
  .kitty-card{ height:68px; }
  .bid-preview .card{ width:30px; height:43px; font-size:6px; }
  .bid-controls{ flex-wrap:wrap; }
}