/* ==========================================================================
   web/css/radio.css — tasto push-to-talk unico (DESIGN §4 "Tasto RADIO", SPEC-1.1 §3).
   RADIO: cerchio 72 px (.rdo--sm: 56 px con targhetta), anello --codec con tacche, walkie-talkie.
   Stati via data-state: idle · arming (apre il canale) · talk (IN ONDA) · busy (OCCUPATO) · off ·
   solo (squadra muta: si parla solo a tutti) · denied · nomic. data-channel="all" = trasmissione sul
   canale di servizio (ambra). Durante la pressione il bersaglio a pillola "TUTTI" (.rdo-all) sta
   sopra il tasto, fuori dal flusso; data-all="1" sposta l'etichetta "codec" (.rdo-tag) sopra di lui.
   Banner di ricezione del servizio (.svc-rx). Si animano solo transform/opacity.
   ========================================================================== */

.rdo {
  --rc: var(--codec, #7fe8ff);           /* colore dell'anello / inchiostro */
  --rc-rgb: 127, 232, 255;
  --rdo-lv: 0;                           /* livello audio 0..1 (JS) */
  --rdo-team: #7fe8ff;                   /* colore della squadra (JS) */
  --rdo-half: 36px;                      /* metà tasto: allinea bersaglio e frecce al centro del tasto */
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  pointer-events: auto;                  /* anche sopra le schermate "trasparenti" alla mappa */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- tasto */
.rdo-btn {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--rc);
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 28%, rgba(var(--rc-rgb), .18), transparent 58%),
    radial-gradient(circle at 50% 50%, #06232c 0%, #03141a 58%, #010a0d 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .75),
    0 6px 18px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(var(--rc-rgb), .22),
    inset 0 -8px 16px rgba(0, 0, 0, .65);
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}
.rdo-btn:focus-visible { outline: 2px solid var(--ph-1, #39ff14); outline-offset: 4px; }
.rdo-btn.is-pressed,
.rdo[data-state="talk"] .rdo-btn { transform: scale(.95); }

/* alone luminoso (opacità guidata dal livello in onda/occupato) */
.rdo-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  box-shadow: 0 0 14px 1px rgba(var(--rc-rgb), .6), 0 0 32px rgba(var(--rc-rgb), .28);
  opacity: .32;
  pointer-events: none;
  transition: opacity 200ms linear;
}

/* anello: tacche, traccia, progresso (30 s) */
.rdo-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}
.rdo-ring circle { fill: none; }
.rdo-ring__ticks {
  stroke: var(--rc);
  stroke-width: 3.2;
  stroke-dasharray: 1.3 4.1;
  opacity: .5;
  transform-box: fill-box;
  transform-origin: center;
}
.rdo-ring__track { stroke: var(--rc); stroke-width: 2; opacity: .95; }
.rdo-ring__prog {
  stroke: #f2fdff;
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(var(--rc-rgb), .9));
}

/* impulso concentrico (in onda) */
.rdo-btn__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rc);
  opacity: 0;
  pointer-events: none;
}

/* faccia: livelli sovrapposti, mostrati per stato */
.rdo-btn__face {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.rdo-btn__face > * {
  position: absolute;
  left: 50%;
  transition: opacity 140ms linear, transform 160ms var(--ease-out, ease-out);
}

.rdo-btn__icon {
  top: 9px;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
}
.rdo-ico {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(var(--rc-rgb), .55));
}
.rdo-ico__lcd { fill: rgba(var(--rc-rgb), .28); stroke-width: 1.3; }
.rdo-ico__wave { opacity: .35; }
.rdo-ico__slash { opacity: 0; stroke-width: 2.6; stroke: var(--rc); }

.rdo-btn__cap {
  bottom: 9px;
  transform: translateX(-50%);
  padding-left: .2em;               /* compensa il letter-spacing */
  font: 400 10px/1 var(--font-hud, monospace);
  letter-spacing: .2em;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(var(--rc-rgb), .6);
}

/* vu-meter (in onda) */
.rdo-btn__meter {
  top: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  opacity: 0;
  transform: translateX(-50%) scale(.6);
}
.rdo-btn__meter i,
.rdo-tag__wave i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: #e8fbff;
  box-shadow: 0 0 5px rgba(var(--rc-rgb), .9);
  transform: scaleY(.14);
  will-change: transform;
}

/* timer (in onda) */
.rdo-btn__timer {
  bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-pixel, monospace);
  line-height: 1;
  color: #f2fdff;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
}
.rdo-btn__secs { font-size: 21px; font-weight: 400; text-shadow: 0 0 6px rgba(var(--rc-rgb), .8); }
.rdo-btn__max { font-size: 12px; color: var(--rc); opacity: .8; }

/* avatar del compagno (occupato) */
.rdo-btn__av {
  top: 6px;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translate(-50%, 0) scale(.7);
}
.rdo-btn__av svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- stati */

/* apertura canale / permesso: tacche che ruotano, didascalia che lampeggia */
.rdo[data-state="arming"] .rdo-ring__ticks { opacity: .9; animation: rdo-spin 1.1s linear infinite; }
.rdo[data-state="arming"] .rdo-ring__track { opacity: .35; }
.rdo[data-state="arming"] .rdo-btn__cap { animation: rdo-blink .8s steps(2, jump-none) infinite; }
.rdo[data-state="arming"] .rdo-ico__wave { opacity: .9; }

/* IN ONDA */
.rdo[data-state="talk"] .rdo-btn {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--rc-rgb), .42), rgba(var(--rc-rgb), .08) 62%, transparent 72%),
    radial-gradient(circle at 50% 50%, #0a3440 0%, #041a21 60%, #020c10 100%);
}
.rdo[data-state="talk"] .rdo-btn::before { opacity: calc(.55 + var(--rdo-lv) * .45); }
.rdo[data-state="talk"] .rdo-ring__prog { opacity: 1; }
.rdo[data-state="talk"] .rdo-ring__track { opacity: .4; }
.rdo[data-state="talk"] .rdo-btn__pulse { animation: rdo-pulse 1.1s var(--ease-out, ease-out) infinite; }
.rdo[data-state="talk"] .rdo-btn__icon { opacity: 0; transform: translateX(-50%) scale(.6); }
.rdo[data-state="talk"] .rdo-btn__meter { opacity: 1; transform: translateX(-50%) scale(1); }
.rdo[data-state="talk"] .rdo-btn__timer { opacity: 1; transform: translateX(-50%) translateY(0); }
.rdo[data-state="talk"] .rdo-btn__cap { opacity: 0; }
/* ultimi secondi: ambra, poi rosso */
.rdo[data-urgent="warm"] { --rc: var(--caution, #ffb000); --rc-rgb: 255, 176, 0; }
.rdo[data-urgent="hot"] { --rc: var(--alert, #ff2a2a); --rc-rgb: 255, 42, 42; }
.rdo[data-urgent="hot"] .rdo-btn__pulse { animation-duration: .55s; }

/* OCCUPATO: parla un compagno */
.rdo[data-state="busy"] { --rc: var(--caution, #ffb000); --rc-rgb: 255, 176, 0; }
.rdo[data-state="busy"] .rdo-btn::before { opacity: calc(.3 + var(--rdo-lv) * .6); }
.rdo[data-state="busy"] .rdo-ring__ticks { opacity: .8; animation: rdo-spin 6s linear infinite reverse; }
.rdo[data-state="busy"] .rdo-ring__track { stroke-dasharray: 6 4; }
.rdo[data-state="busy"] .rdo-btn__pulse { border-color: var(--rdo-team); animation: rdo-pulse 1.6s var(--ease-out, ease-out) infinite; }
.rdo[data-state="busy"] .rdo-btn__icon { opacity: 0; transform: translateX(-50%) scale(.6); }
.rdo[data-state="busy"] .rdo-btn__av {
  opacity: 1;
  transform: translate(-50%, calc(var(--rdo-lv) * -3px)) scale(calc(1 + var(--rdo-lv) * .1));
  transition: opacity 140ms linear;
}
.rdo[data-state="busy"] .rdo-btn__cap { font-size: 9px; letter-spacing: .12em; padding-left: .12em; bottom: 8px; }
/* occupato senza voce ricevuta (409 dal server): resta il walkie-talkie */
.rdo[data-state="busy"][data-talker="0"] .rdo-btn__icon { opacity: 1; transform: translateX(-50%); }
.rdo[data-state="busy"][data-talker="0"] .rdo-ico__wave { opacity: 0; }

/* spento (fantasma, senza squadra, fuori missione) e solo ascolto */
.rdo[data-state="off"],
.rdo[data-state="nomic"] { --rc: var(--ph-3, #1f7a3d); --rc-rgb: 31, 122, 61; }
.rdo[data-state="off"][data-reason="ghost"] { --rc: var(--ghost, #a9c7d6); --rc-rgb: 169, 199, 214; }
.rdo[data-state="off"] .rdo-btn,
.rdo[data-state="nomic"] .rdo-btn { opacity: .62; }
.rdo[data-state="off"] .rdo-btn::before,
.rdo[data-state="nomic"] .rdo-btn::before { opacity: 0; }
.rdo[data-state="off"] .rdo-ring__track,
.rdo[data-state="nomic"] .rdo-ring__track { stroke-dasharray: 3 5; }
.rdo[data-state="off"] .rdo-ring__ticks,
.rdo[data-state="nomic"] .rdo-ring__ticks { opacity: .2; }
.rdo[data-state="off"] .rdo-ico__slash,
.rdo[data-state="nomic"] .rdo-ico__slash { opacity: 1; }
.rdo[data-state="off"] .rdo-ico__wave,
.rdo[data-state="nomic"] .rdo-ico__wave { opacity: 0; }
.rdo[data-state="off"][data-reason="ghost"] .rdo-btn__icon { animation: rdo-float 3s ease-in-out infinite; }

/* microfono bloccato */
.rdo[data-state="denied"] { --rc: var(--alert, #ff2a2a); --rc-rgb: 255, 42, 42; }
.rdo[data-state="denied"] .rdo-ring__track { stroke-dasharray: 3 5; }
.rdo[data-state="denied"] .rdo-ico__slash { opacity: 1; }
.rdo[data-state="denied"] .rdo-ico__wave { opacity: 0; }

/* rifiuto (occupato / fantasma): scossa orizzontale */
.rdo.is-shake .rdo-btn { animation: rdo-shake 340ms linear; }

/* ---------------------------------------------------------------- etichetta "codec" */
.rdo-tag {
  --tc: var(--codec, #7fe8ff);
  --tc-rgb: 127, 232, 255;
  position: absolute;
  right: -2px;
  bottom: calc(100% + 10px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 140px;
  max-width: min(250px, calc(100vw - 24px));
  padding: 7px 11px 7px 9px;
  color: var(--tc);
  background: linear-gradient(180deg, rgba(3, 27, 34, .97), rgba(1, 11, 15, .97));
  border: 1px solid rgba(var(--tc-rgb), .5);
  border-left: 3px solid var(--tc);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  pointer-events: none;
  transform-origin: 100% 100%;
}
.rdo-tag[hidden] { display: none !important; }
.rdo-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.rdo-tag.is-in { animation: rdo-tag-in 210ms var(--ease-out, ease-out) both; }

.rdo-tag__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdo-tag__main {
  font: 400 14px/1.1 var(--font-display, sans-serif);
  letter-spacing: .07em;
  color: var(--tc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(var(--tc-rgb), .45);
}
.rdo-tag__sub {
  font: 400 12px/1.25 var(--font-hud, monospace);
  letter-spacing: .04em;
  color: #cfeef5;
}
.rdo-tag__sub[hidden] { display: none; }
.rdo-tag__sub.is-warn { color: var(--caution, #ffb000); }

.rdo-tag__av,
.rdo-tag__dot,
.rdo-tag__time,
.rdo-tag__wave { display: none; flex: none; }

.rdo-tag__av { width: 30px; height: 30px; }
.rdo-tag__av svg { display: block; width: 100%; height: 100%; }
.rdo-tag__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--alert, #ff2a2a);
  box-shadow: 0 0 8px rgba(255, 42, 42, .9);
}
.rdo-tag__time {
  margin-left: auto;
  padding-left: 6px;
  font: 400 21px/1 var(--font-pixel, monospace);
  color: #f2fdff;
  text-shadow: 0 0 6px rgba(var(--tc-rgb), .7);
}
.rdo-tag__wave { align-items: center; gap: 2px; height: 18px; margin-left: auto; padding-left: 6px; }
.rdo-tag__wave i { width: 3px; }

/* in onda: pallino rosso ON AIR + tempo */
.rdo-tag[data-kind="talk"] { --tc: var(--alert, #ff2a2a); --tc-rgb: 255, 42, 42; }
.rdo-tag[data-kind="talk"] .rdo-tag__main { color: #fff; }
.rdo-tag[data-kind="talk"] .rdo-tag__dot { display: block; animation: rdo-blink 1s steps(2, jump-none) infinite; }
.rdo-tag[data-kind="talk"] .rdo-tag__time { display: block; }
.rdo[data-urgent="hot"] .rdo-tag__time { color: var(--alert, #ff2a2a); }
.rdo[data-urgent="warm"] .rdo-tag__time { color: var(--caution, #ffb000); }

/* occupato: omino del compagno + onda */
.rdo-tag[data-kind="busy"] { border-left-color: var(--rdo-team); }
.rdo-tag[data-kind="busy"] .rdo-tag__main { color: #fff; }
.rdo-tag[data-kind="busy"] .rdo-tag__sub { color: var(--codec, #7fe8ff); letter-spacing: .12em; font-size: 11px; }
.rdo-tag[data-kind="busy"] .rdo-tag__av { display: block; animation: rdo-bob 1.4s ease-in-out infinite; }
.rdo-tag[data-kind="busy"] .rdo-tag__wave { display: flex; }

/* toni dei messaggi */
.rdo-tag[data-tone="warn"] { --tc: var(--caution, #ffb000); --tc-rgb: 255, 176, 0; }
.rdo-tag[data-tone="danger"] { --tc: var(--alert, #ff2a2a); --tc-rgb: 255, 42, 42; }
.rdo-tag[data-tone="ok"] { --tc: var(--ph-2, #5cff8a); --tc-rgb: 92, 255, 138; }
.rdo-tag[data-tone="ghost"] { --tc: var(--ghost, #a9c7d6); --tc-rgb: 169, 199, 214; }

/* ---------------------------------------------------------------- trasmissione a TUTTI (data-channel="all") */
.rdo[data-channel="all"] { --rc: var(--caution, #ffb000); --rc-rgb: 255, 176, 0; }
.rdo[data-channel="all"] .rdo-btn {
  background:
    radial-gradient(circle at 50% 28%, rgba(var(--rc-rgb), .2), transparent 58%),
    radial-gradient(circle at 50% 50%, #2b1d03 0%, #160e01 58%, #0b0700 100%);
}
.rdo[data-channel="all"][data-state="talk"] .rdo-btn {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--rc-rgb), .42), rgba(var(--rc-rgb), .08) 62%, transparent 72%),
    radial-gradient(circle at 50% 50%, #3a2604 0%, #1c1201 60%, #0b0700 100%);
}
.rdo[data-channel="all"] .rdo-ring__prog { stroke: #fff4d6; }
.rdo[data-channel="all"] .rdo-btn__meter i { background: #fff4d6; }
.rdo[data-channel="all"][data-state="talk"] .rdo-btn__pulse { border-width: 3px; }
/* ultimi secondi a tutti: arancio, poi rosso */
.rdo[data-channel="all"][data-urgent="warm"] { --rc: #ff7a1a; --rc-rgb: 255, 122, 26; }
.rdo[data-channel="all"][data-urgent="hot"] { --rc: var(--alert, #ff2a2a); --rc-rgb: 255, 42, 42; }

/* megafono al posto del walkie-talkie: servizio in armamento/apertura e squadra muta ("solo") */
.rdo-btn__icon--all { display: none; }
.rdo[data-channel="all"] .rdo-btn__icon--all,
.rdo[data-state="solo"] .rdo-btn__icon--all { display: block; }
.rdo[data-channel="all"] .rdo-btn__icon:not(.rdo-btn__icon--all),
.rdo[data-state="solo"] .rdo-btn__icon:not(.rdo-btn__icon--all) { display: none; }

/* ---------------------------------------------------------------- squadra muta, TUTTI disponibile (data-state="solo") */
/* fantasmi, fine partita, senza squadra: tasto tenue (non compete con SCANSIONA), didascalia "▲ TUTTI" */
.rdo[data-state="solo"] { --rc: var(--caution, #ffb000); --rc-rgb: 255, 176, 0; }
.rdo[data-state="solo"][data-reason="ghost"] { --rc: var(--ghost, #a9c7d6); --rc-rgb: 169, 199, 214; }
.rdo[data-state="solo"] .rdo-btn { background: radial-gradient(circle at 50% 50%, #151007 0%, #080602 100%); }
.rdo[data-state="solo"][data-reason="ghost"] .rdo-btn { background: radial-gradient(circle at 50% 50%, #0e161b 0%, #05090c 100%); }
.rdo[data-state="solo"] .rdo-btn::before { opacity: .1; }
.rdo[data-state="solo"] .rdo-ring__track { stroke-dasharray: 3 5; opacity: .7; }
.rdo[data-state="solo"] .rdo-ring__ticks { opacity: .25; }
.rdo[data-state="solo"] .rdo-ico__wave { opacity: .5; }
.rdo[data-state="solo"][data-reason="ghost"] .rdo-btn__icon { animation: rdo-float 3s ease-in-out infinite; }
.rdo[data-state="solo"] .rdo-btn__cap::before {
  content: '';
  display: inline-block;
  margin-right: .35em;
  vertical-align: .08em;
  border: 0 solid transparent;
  border-width: 0 3.5px 5px;
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------- tasto compatto 56 px (.rdo--sm) */
/* carta ruolo, conto alla rovescia, fine partita: stesso ingombro del vecchio SERVIZIO */
.rdo--sm { --rdo-half: 28px; width: 56px; height: 56px; }
.rdo--sm .rdo-btn { width: 56px; height: 56px; }
.rdo--sm .rdo-ring__track { stroke-width: 2.6; }
.rdo--sm .rdo-ring__prog { stroke-width: 4.6; }
.rdo--sm .rdo-ring__ticks { stroke-width: 3.8; }
.rdo--sm .rdo-btn__face { inset: 5px; }
.rdo--sm .rdo-btn__icon { top: 8px; width: 26px; height: 26px; }
.rdo--sm .rdo-ico__lcd { stroke-width: 1.9; }
.rdo--sm .rdo-btn__meter { top: 8px; height: 18px; gap: 2px; }
.rdo--sm .rdo-btn__meter i { width: 3px; }
.rdo--sm .rdo-btn__timer { bottom: 7px; }
.rdo--sm .rdo-btn__secs { font-size: 17px; }
.rdo--sm .rdo-btn__max { font-size: 10px; }
.rdo--sm .rdo-btn__av { top: 3px; width: 28px; height: 28px; }

/* targhetta sul bordo inferiore dell'anello (a 56 px il testo non sta nella faccia): 10,5 px, leggibile all'aperto */
.rdo.rdo--sm .rdo-btn > .rdo-btn__cap {
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 1;
  padding: 3px 6px 3px 7px;
  font: 400 10.5px/1 var(--font-hud, monospace);
  letter-spacing: .1em;
  white-space: nowrap;
  color: #021116;
  background: var(--rc);
  text-shadow: none;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0 50%);
  transform: translateX(-50%);
  pointer-events: none;
}
.rdo.rdo--sm .rdo-btn > .rdo-btn__cap:empty { display: none; }
.rdo.rdo--sm[data-state="busy"] .rdo-btn > .rdo-btn__cap { font-weight: 700; }
.rdo.rdo--sm[data-state="talk"] .rdo-btn > .rdo-btn__cap { opacity: 1; font-weight: 700; background: var(--alert, #ff2a2a); color: #fff; }
.rdo.rdo--sm[data-state="off"] .rdo-btn > .rdo-btn__cap,
.rdo.rdo--sm[data-state="nomic"] .rdo-btn > .rdo-btn__cap { color: #cfe; background: var(--ph-4, #0f3d1f); }

/* tasto compatto da solo (carta ruolo, conto alla rovescia, fine partita): posizione decisa dalla schermata */
.svc-dock { position: relative; z-index: 3; flex: none; display: flex; justify-content: flex-end; }
.svc-dock:empty { display: none; }

/* ---------------------------------------------------------------- bersaglio "TUTTI" (solo durante la pressione) */
/* Assoluto sopra il tasto, fuori dal flusso: non ruba spazio all'HUD. Il riquadro esterno è fermo (il
   gesto ne legge il rettangolo una volta), si anima solo la pillola interna. */
.rdo-all {
  position: absolute;
  z-index: 3;
  right: -6px;
  bottom: calc(100% + 14px);
  width: 140px;
  height: 52px;
  pointer-events: none;
}
.rdo-all[hidden] { display: none !important; }
.rdo[data-all="1"] > .rdo-tag { bottom: calc(100% + 76px); }

.rdo-all__pill {
  --ac: var(--caution, #ffb000);
  --ac-rgb: 255, 176, 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 5px;
  color: var(--ac);
  background:
    repeating-linear-gradient(0deg, rgba(255, 176, 0, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(42, 27, 0, .96), rgba(16, 10, 0, .96));
  border: 2px solid rgba(var(--ac-rgb), .6);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 8px 22px rgba(0, 0, 0, .65), 0 0 14px rgba(var(--ac-rgb), .2);
  transform-origin: calc(100% - var(--rdo-half, 36px) - 6px) 100%;
  animation: rdo-all-in 200ms var(--ease-out, ease-out) backwards;
  transition: transform 120ms var(--ease-out, ease-out), box-shadow 160ms linear, border-color 160ms linear;
}
.rdo-all__disc { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.rdo-all__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.rdo-all__ring circle { fill: none; }
.rdo-all__track { stroke: rgba(var(--ac-rgb), .35); stroke-width: 2; }
.rdo-all__prog {
  stroke: #fff4d6;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0;                            /* vuoto: niente puntino del cappuccio tondo */
  filter: drop-shadow(0 0 3px rgba(var(--ac-rgb), .9));
}
.rdo-all[data-state="arming"] .rdo-all__prog,
.rdo-all[data-state="opening"] .rdo-all__prog,
.rdo-all[data-state="live"] .rdo-all__prog { opacity: 1; }
.rdo-all__ico { position: relative; width: 22px; height: 22px; }
.rdo-all__ico .rdo-ico { filter: drop-shadow(0 0 3px rgba(var(--ac-rgb), .6)); }
.rdo-all__ico .rdo-ico__lcd { fill: rgba(var(--ac-rgb), .3); stroke-width: 1.9; }
.rdo-all__ico .rdo-ico__wave { opacity: .9; }
.rdo-all__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rdo-all__main {
  font: 400 19px/1 var(--font-display, sans-serif);
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 0 8px rgba(var(--ac-rgb), .6);
}
.rdo-all__sub {
  font: 400 10.5px/1 var(--font-hud, monospace);
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--ac);
}

/* doppia freccia verso l'alto tra il tasto e il bersaglio: indica il gesto */
.rdo-all__chev {
  position: absolute;
  top: calc(100% + 1px);
  right: calc(var(--rdo-half, 36px) - 2px);
  width: 16px;
  height: 12px;
}
.rdo-all__chev::before,
.rdo-all__chev::after {
  content: '';
  position: absolute;
  left: 3px;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--caution, #ffb000);
  border-top: 2px solid var(--caution, #ffb000);
  transform: rotate(45deg);
}
.rdo-all__chev::before { top: 1px; }
.rdo-all__chev::after { top: 6px; opacity: .45; }
.rdo-all[data-state="ready"] .rdo-all__chev { animation: rdo-chev 900ms ease-in-out infinite; }
.rdo-all:not([data-state="ready"]) .rdo-all__chev { opacity: 0; }

/* dito sul bersaglio / armamento / apertura: pillola accesa, anello che si riempie (JS) */
.rdo-all[data-state="hover"] .rdo-all__pill,
.rdo-all[data-state="arming"] .rdo-all__pill,
.rdo-all[data-state="opening"] .rdo-all__pill {
  border-color: var(--ac);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 8px 22px rgba(0, 0, 0, .65), 0 0 24px rgba(var(--ac-rgb), .55);
  transform: scale(1.05);
}
.rdo-all[data-state="arming"] .rdo-all__sub,
.rdo-all[data-state="opening"] .rdo-all__sub { color: #fff4d6; animation: rdo-blink .8s steps(2, jump-none) infinite; }

/* IN ONDA A TUTTI: pillola rossa, pallino ON AIR, anello pieno che pulsa */
.rdo-all[data-state="live"] .rdo-all__pill {
  --ac: var(--alert, #ff2a2a);
  --ac-rgb: 255, 42, 42;
  border-color: var(--ac);
  background:
    repeating-linear-gradient(0deg, rgba(255, 42, 42, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(58, 6, 6, .96), rgba(22, 2, 2, .96));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 8px 22px rgba(0, 0, 0, .65), 0 0 22px rgba(var(--ac-rgb), .5);
}
.rdo-all[data-state="live"] .rdo-all__sub { color: #fff; }
.rdo-all[data-state="live"] .rdo-all__sub::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--alert, #ff2a2a);
  box-shadow: 0 0 6px rgba(255, 42, 42, .9);
  animation: rdo-blink 1s steps(2, jump-none) infinite;
}
.rdo-all[data-state="live"] .rdo-all__ring { animation: rdo-all-beat 1.1s ease-in-out infinite; }

/* servizio occupato da un altro giocatore: pillola spenta e tratteggiata */
.rdo-all[data-state="busy"] .rdo-all__pill { border-style: dashed; opacity: .72; }
.rdo-all[data-state="busy"] .rdo-all__main { color: #ffe2a3; text-shadow: none; }

/* rifiuto sul bersaglio (servizio occupato) */
.rdo.is-shake-all .rdo-all__pill { animation: rdo-shake 340ms linear; }

/* ---------------------------------------------------------------- banner di ricezione del servizio */
/* in alto come il Codec (stessi offset sopra la mappa: mai sopra timer/fase); Codec e toast scendono di --svc-h */
.svc-rx {
  --sc: var(--caution, #ffb000);
  --sc-rgb: 255, 176, 0;
  position: fixed;
  z-index: 940;                          /* sopra il Codec (900), sotto i toast (950) */
  left: 50%;
  top: calc(var(--sat, 0px) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 20px), 460px);
  padding: 7px 12px 7px 10px;
  color: var(--sc);
  background:
    repeating-linear-gradient(0deg, rgba(255, 176, 0, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(42, 27, 0, .97), rgba(18, 11, 0, .97));
  border: 1px solid rgba(var(--sc-rgb), .6);
  border-left: 4px solid var(--sc);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transform: translateX(-50%);
  transform-origin: 50% 0;
  pointer-events: none;
}
.svc-rx[hidden] { display: none !important; }
body[data-screen="game"] .svc-rx { top: max(calc(var(--sat, 0px) + 158px), calc(var(--hud-top-h, 0px) + 6px)); }
body[data-screen="deploy"] .svc-rx { top: max(calc(var(--sat, 0px) + 138px), calc(var(--hud-top-h, 0px) + 6px)); }
.svc-rx.is-in { animation: svc-rx-in 240ms var(--ease-out, ease-out) both; }
.svc-rx.is-out { animation: svc-rx-out 200ms ease-in both; }
.svc-rx[data-closing="1"] .svc-rx__wave { opacity: .5; }

.svc-rx__icon { flex: none; width: 30px; height: 30px; }
.svc-rx__ico {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(var(--sc-rgb), .6));
}
.svc-rx__ico path:first-child { fill: rgba(var(--sc-rgb), .28); }
.svc-rx__w1 { animation: svc-rx-wave 1s steps(2, jump-none) infinite; }
.svc-rx__w2 { animation: svc-rx-wave 1s steps(2, jump-none) -.5s infinite; }
.svc-rx[data-closing="1"] .svc-rx__w1, .svc-rx[data-closing="1"] .svc-rx__w2 { animation: none; opacity: .3; }

.svc-rx__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-rx__main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 400 16px/1.1 var(--font-display, sans-serif);
  letter-spacing: .08em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(var(--sc-rgb), .45);
}
.svc-rx__lbl, .svc-rx__sep { flex: none; color: var(--sc); }
.svc-rx__dot {
  display: none;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--svc-team, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 6px var(--svc-team, transparent);
}
.svc-rx[data-team="1"] .svc-rx__dot { display: block; }
.svc-rx__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.svc-rx__sub { font: 400 11px/1.2 var(--font-hud, monospace); letter-spacing: .16em; color: #ffe2a3; }
.svc-rx__wave { flex: none; display: flex; align-items: center; gap: 2px; height: 22px; }
.svc-rx__wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #ffefc4;
  box-shadow: 0 0 5px rgba(var(--sc-rgb), .9);
  transform: scaleY(.3);
  will-change: transform;
}
/* nessun livello dalla voce (AudioContext sospeso, iOS): onda "a riposo" animata in CSS, mai una riga di puntini */
.svc-rx[data-level="0"] .svc-rx__wave i { animation: svc-rx-bars .9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -90ms); }
.svc-rx[data-closing="1"] .svc-rx__wave i { animation: none; }

/* ---------------------------------------------------------------- keyframes */
@keyframes svc-rx-in {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.05); }
  55% { opacity: 1; transform: translateX(-50%) scaleY(1.06); }
  100% { opacity: 1; transform: translateX(-50%); }
}
@keyframes svc-rx-out { to { opacity: 0; transform: translateX(-50%) scaleY(.05); } }
@keyframes svc-rx-wave { 0% { opacity: 1; } 50% { opacity: .2; } }
@keyframes svc-rx-bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(.9); } }
@keyframes rdo-spin { to { transform: rotate(360deg); } }
@keyframes rdo-blink { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes rdo-pulse {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes rdo-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@keyframes rdo-tag-in {
  0% { opacity: 0; transform: scaleY(.06) scaleX(.92); }
  55% { opacity: 1; transform: scaleY(1.06) scaleX(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes rdo-bob { 50% { transform: translateY(-2px); } }
@keyframes rdo-all-in {
  0% { opacity: 0; transform: translateY(10px) scale(.6); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes rdo-chev {
  0% { opacity: .2; transform: translateY(4px); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes rdo-all-beat { 50% { transform: rotate(-90deg) scale(1.1); } }
@keyframes rdo-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* ---------------------------------------------------------------- schermi piccoli / movimento ridotto */
@media (max-width: 340px) {
  .rdo-tag { max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .rdo-btn,
  .rdo-btn__face > * { transition: none; }
  .rdo[data-state] .rdo-btn__pulse,
  .rdo[data-state] .rdo-ring__ticks,
  .rdo[data-state] .rdo-btn__cap,
  .rdo[data-state][data-reason] .rdo-btn__icon,
  .rdo-tag.is-in,
  .rdo-tag[data-kind] .rdo-tag__av,
  .rdo-tag[data-kind] .rdo-tag__dot,
  .rdo.is-shake .rdo-btn,
  .rdo.is-shake-all .rdo-all__pill,
  .rdo-all__pill,
  .rdo-all[data-state] .rdo-all__chev,
  .rdo-all[data-state] .rdo-all__ring,
  .rdo-all[data-state] .rdo-all__sub,
  .rdo-all[data-state] .rdo-all__sub::before { animation: none; }
  .rdo-all__pill { transition: none; }
  .rdo[data-state="talk"] .rdo-btn__pulse { opacity: .5; transform: scale(1.12); }
  .svc-rx.is-in, .svc-rx.is-out, .svc-rx__w1, .svc-rx__w2, .svc-rx[data-level="0"] .svc-rx__wave i { animation: none; }
}