/* ================= 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 4px 0;
    border-bottom:1px solid rgba(227,193,105,.26);
  }
  .hand-dock.show{
    flex:1 1 auto; display:flex; flex-direction:column;
    justify-content:flex-start; min-height:0;
    padding-top:12px;
    border-top:1px solid rgba(227,193,105,.12);
    overflow:hidden;
  }
  .hand-dock.show .dock-cards{ height:auto; flex:1 1 auto; min-height:0; }
  .hand-dock.show .dock-head{ color:rgba(246,241,228,.62); }
  .hand-dock .dock-card.dimmed{ opacity:.64; filter:grayscale(.28) brightness(.95); }
  .stage.hand-docked .my-hand{
    display:block;
    width:49%; height:12.6%; top:88%;
  }
}

/* ================= 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; }
.chat-feedback{ display:none; margin:6px 0 0; font-size:9px; line-height:1.45; color:#f0c98a; }
.chat-feedback.show{ display:block; }
.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:not(.expanded){ width:auto; max-width:min(200px, 62vw); }
.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; }
}

/* ================= radio quick mute + unmute prompt ================= */
.radio-mute-btn{
  position:fixed; z-index:31; right:74px; top:62px;
  width:34px; height:34px; padding:7px; border-radius:10px; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  border:1px solid rgba(227,193,105,.34);
  background:linear-gradient(180deg, rgba(38,25,16,.94), rgba(16,12,8,.94));
  color:#e3c169;
  box-shadow:0 8px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.radio-mute-btn.show{ display:flex; }
.radio-mute-btn:hover{ border-color:rgba(227,193,105,.72); }
.radio-mute-btn svg{ width:18px; height:18px; display:block; }
.radio-mute-btn .radio-slash{ display:none; }
.radio-mute-btn.muted .radio-wave{ display:none; }
.radio-mute-btn.muted .radio-slash{ display:block; }
.radio-mute-btn.needs-unmute{ animation:radioShake .7s ease-in-out infinite; border-color:rgba(227,193,105,.85); }
.radio-unmute-hint{
  position:fixed; z-index:32; right:114px; top:64px;
  display:none; padding:6px 9px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(227,193,105,.52); background:rgba(30,22,14,.95);
  color:#f2dc92; font:inherit; font-size:9px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 7px 18px rgba(0,0,0,.35);
  animation:radioShake .7s ease-in-out infinite;
}
.radio-unmute-hint.show{ display:block; }
.radio-btn.muted{ opacity:.9; }
.radio-btn.needs-unmute{ animation:radioShake .7s ease-in-out infinite; border-color:rgba(227,193,105,.85); }
.radio-mute-toggle{ width:100%; margin:0 0 8px; }
@keyframes radioShake{
  0%,100%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-2px) rotate(-1.5deg); }
  40%{ transform:translateX(2px) rotate(1.5deg); }
  60%{ transform:translateX(-1px) rotate(-.8deg); }
  80%{ transform:translateX(1px) rotate(.8deg); }
}
@media (max-width:700px){
  .radio-mute-btn{ right:63px; top:59px; width:32px; height:32px; padding:6px; }
  .radio-unmute-hint{ right:101px; top:59px; font-size:8px; padding:5px 7px; }
}

/* ================= walkie-talkie incoming call ================= */
.walkie-btn.ringing{
  animation:walkieRing .55s ease-in-out infinite;
  border-color:rgba(227,193,105,.9);
  box-shadow:0 0 0 1px rgba(227,193,105,.55), 0 0 24px rgba(227,193,105,.32);
}
@keyframes walkieRing{
  0%,100%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-3px) rotate(-2deg); }
  40%{ transform:translateX(3px) rotate(2deg); }
  60%{ transform:translateX(-2px) rotate(-1deg); }
  80%{ transform:translateX(2px) rotate(1deg); }
}
.call-prompt{
  position:fixed; z-index:66; left:50%; top:calc(env(safe-area-inset-top) + 58px);
  transform:translateX(-50%);
  display:none; align-items:center; gap:11px;
  width:min(390px, calc(100vw - 24px));
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(227,193,105,.62);
  background:linear-gradient(180deg, rgba(42,30,18,.98), rgba(15,12,8,.98));
  color:var(--cream); box-shadow:0 16px 40px rgba(0,0,0,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.call-prompt.show{ display:flex; }
.call-prompt.ringing{ animation:callShake .7s ease-in-out infinite; }
@keyframes callShake{
  0%,100%{ transform:translateX(-50%) rotate(0); }
  20%{ transform:translateX(calc(-50% - 2px)) rotate(-.6deg); }
  40%{ transform:translateX(calc(-50% + 2px)) rotate(.6deg); }
  60%{ transform:translateX(calc(-50% - 1px)) rotate(-.3deg); }
  80%{ transform:translateX(calc(-50% + 1px)) rotate(.3deg); }
}
.call-badge{
  flex:0 0 auto; padding:4px 6px; border-radius:7px;
  background:rgba(227,193,105,.15); border:1px solid rgba(227,193,105,.3);
  color:#e3c169; font-size:7px; font-weight:800; letter-spacing:.1em;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.call-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.call-copy b{ color:#f2dc92; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.call-copy span{ color:rgba(246,241,228,.64); font-size:10px; line-height:1.35; }
.call-actions{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.call-actions .btn{ padding:6px 9px; font-size:9.5px; }
.call-actions button[hidden]{ display:none !important; }
@media (max-width:700px){
  .call-prompt{ top:calc(env(safe-area-inset-top) + 55px); padding:8px 9px; gap:7px; border-radius:12px; }
  .call-badge{ font-size:6px; }
  .call-copy b{ font-size:10px; }
  .call-copy span{ font-size:9px; }
  .call-actions .btn{ padding:5px 7px; font-size:8.5px; }
}
@media (prefers-reduced-motion:reduce){
  .walkie-btn.ringing, .call-prompt.ringing, .radio-btn.needs-unmute, .radio-mute-btn.needs-unmute, .radio-unmute-hint{ animation:none !important; }
}

/* Phones in landscape use the fixed portrait table instead of squeezing the
   cards and played area into a short viewport. */
@media (orientation: landscape) and (max-height: 520px){
  body::after{
    content:'Rotate your phone to portrait to play';
    position:fixed; inset:0; z-index:999;
    display:flex; align-items:center; justify-content:center;
    padding:24px; text-align:center;
    background:#07110d; color:#e3c169;
    font:600 15px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing:.02em;
  }
}

/* Press-and-hold magnifier for the current trick (mobile only). */
.trick-zoom{
  position:absolute; z-index:22; inset:5% 4%;
  display:none; padding:8px; border-radius:12px;
  background:rgba(5,13,10,.94);
  border:1px solid rgba(227,193,105,.5);
  box-shadow:0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden; pointer-events:none;
  -webkit-touch-callout:none; user-select:none;
}
.trick-zoom.show{ display:block; }
.trick-zoom .zoom-card{
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:3px; width:clamp(42px, 12vw, 58px);
  transform:translate(-50%,-50%);
}
.trick-zoom .zoom-partner{ left:50%; top:28%; }
.trick-zoom .zoom-left{ left:27%; top:54%; }
.trick-zoom .zoom-right{ left:73%; top:54%; }
.trick-zoom .zoom-me{ left:50%; top:77%; }
.trick-zoom .zoom-who{
  max-width:100%; font-size:8px; letter-spacing:.03em;
  color:rgba(246,241,228,.62); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.trick-zoom .zoom-face{
  position:relative; width:100%;
  height:clamp(60px, 17vw, 82px);
}
.trick-zoom .zoom-face .card{
  position:absolute; inset:0; width:100%; height:100%;
  font-size:clamp(8px, 2.2vw, 11px);
}
.trick-zoom .zoom-card.winner .card{
  box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(227,193,105,.45);
}