/* =========================================================================
   RADAR — visualizador de mapas nativo em React (canvas).
   Tudo escopado em .radar-app para nao vazar estilos pro resto do site.
   Paleta propria em vars --r-*; --r-accent muda por jogo (setado via JS).
   ========================================================================= */
.radar-app{
  --r-bg:#0a0b0e; --r-bg2:#101216; --r-panel:#141720; --r-panel2:#1a1e28;
  --r-line:rgba(255,255,255,.08); --r-line2:rgba(255,255,255,.14);
  --r-text:#e9ebf0; --r-dim:#8b909b; --r-dim2:#636876;
  --r-accent:#7c5cff; --r-accent2:#a58bff;
  --r-green:#3fbf6f; --r-blue:#2f8fe0; --r-pink:#e0457a; --r-amber:#e8b23a;
  display:flex; height:100%; width:100%;
  background:var(--r-bg); color:var(--r-text);
  font-family:'Poppins',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-user-select:none; user-select:none; overflow:hidden;
}
.radar-app *{ box-sizing:border-box; }
/* float:none neutraliza o "button { float:left }" global do checkout.css, que
   senao colapsa o botao do seletor de mapa (dentro de um bloco) e quebra o layout */
.radar-app button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; width:auto; margin:0; float:none; }
.radar-app ::-webkit-scrollbar{ width:9px; height:9px; }
.radar-app ::-webkit-scrollbar-thumb{ background:#2a2f3a; border-radius:6px; }
.radar-app ::-webkit-scrollbar-thumb:hover{ background:#3a404d; }
/* base dos inputs — height/font-weight explicitos p/ vencer o input[type=text]
   global do tema (54px, bold) que senao desalinha o icone e engorda o texto */
.radar-app input[type="text"]{
  width:100%; height:44px; background:var(--r-panel); border:1px solid var(--r-line);
  border-radius:10px; padding:0 14px; color:var(--r-text); font-size:13px; font-weight:500;
  outline:none; font-family:inherit;
}
.radar-app input[type="text"]:focus{ border-color:var(--r-accent); }
.radar-app input[type="text"]::placeholder{ color:var(--r-dim2); font-weight:500; }

/* icone de busca centralizado (SVG) — independe da altura do input */
.radar-searchic{ position:absolute; top:50%; transform:translateY(-50%); display:flex;
  color:var(--r-dim); pointer-events:none; z-index:1; }
.radar-searchic svg{ width:18px; height:18px; }

/* MAIN */
.radar-main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--r-bg); }

/* HOME */
.radar-home{ flex:1; overflow-y:auto; padding:30px 34px 40px; }
.radar-hero{ margin-bottom:24px; }
.radar-eyebrow{ margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--r-accent2); }
.radar-home h2{ font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0 0 7px; color:#fff; }
.radar-sub{ color:var(--r-dim); font-size:14px; margin:0; max-width:540px; line-height:1.5; }

/* barra de busca estilo Project (icone SVG centralizado, foco roxo) */
.radar-searchbar{ position:relative; max-width:520px; margin-top:20px; }
.radar-searchbar .radar-searchic{ left:16px; }
.radar-app .radar-searchbar input[type="text"]{
  height:50px; padding:0 44px 0 46px; background:#12161f; border:1px solid #262d3d;
  border-radius:13px; color:#eef1f7; font-size:14.5px; font-weight:500;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.radar-app .radar-searchbar input[type="text"]:focus{
  border-color:var(--r-accent); background:#141a26; box-shadow:0 0 0 3px rgba(124,92,255,.16); }
.radar-searchbar .radar-clear{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--r-dim);
  font-size:15px; line-height:1; }
.radar-searchbar .radar-clear:hover{ background:#1c2230; color:#fff; }

.radar-reshead{ margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--r-dim2); }
.radar-reshead b{ color:var(--r-accent2); }
.radar-empty{ grid-column:1/-1; padding:44px; text-align:center; color:var(--r-dim2);
  font-size:14px; border:1px dashed var(--r-line2); border-radius:14px; }

/* GRID de cards (jogos + resultados de mapa) */
.radar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.radar-card{ position:relative; height:170px; border-radius:14px; overflow:hidden;
  border:1px solid #262d3d; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; background:#12161f; }
.radar-card:hover{ transform:translateY(-3px); border-color:#34405a; box-shadow:0 14px 32px rgba(0,0,0,.5); }
.radar-card .radar-cbg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05); }
.radar-card .radar-cshade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.85)); }
.radar-card .radar-ccount{ position:absolute; top:12px; left:12px; background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.5px; }
.radar-card .radar-cfoot{ position:absolute; left:14px; bottom:12px; right:14px; display:flex; align-items:center; gap:11px; }
.radar-card .radar-cfoot .radar-cic{ width:34px; height:34px; border-radius:9px; background-size:cover;
  background-position:center; border:1px solid rgba(255,255,255,.2); flex:0 0 34px; background-color:#000; }
.radar-card .radar-cfoot b{ font-size:16px; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.8); }

/* MAP VIEW */
.radar-mapview{ flex:1; display:flex; min-height:0; }

/* sidebar */
.radar-side{ width:320px; flex:0 0 320px; background:var(--r-bg2); border-right:1px solid var(--r-line);
  display:flex; flex-direction:column; min-height:0; }
/* menu escondido: remove a lateral e libera o mapa por inteiro */
.radar-side.radar-side--hidden{ display:none; }
.radar-side-head{ padding:14px 16px; border-bottom:1px solid var(--r-line); display:flex; align-items:center; gap:10px; }
.radar-side-head .radar-side-collapse{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; color:var(--r-dim); border:1px solid var(--r-line); }
.radar-side-head .radar-side-collapse:hover{ background:var(--r-panel); color:var(--r-text); }
.radar-side-head .radar-side-collapse svg{ width:16px; height:16px; }
/* aba pra reabrir o menu (colada na borda esquerda do mapa) */
.radar-side-show{ left:0; top:50%; transform:translateY(-50%); width:26px; height:56px; display:grid; place-items:center;
  color:var(--r-text); border-left:0; border-radius:0 10px 10px 0; z-index:3; }
.radar-side-show:hover{ background:var(--r-panel2); color:#fff; }
.radar-side-show svg{ width:18px; height:18px; }
.radar-side-head .radar-gic{ width:32px; height:32px; border-radius:8px; background-size:cover;
  background-position:center; flex:0 0 32px; background-color:#000; }
.radar-side-head b{ font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radar-side-head .radar-back{ margin-left:auto; color:var(--r-dim); font-size:12px; padding:6px 9px;
  border-radius:8px; border:1px solid var(--r-line); flex:0 0 auto; }
.radar-side-head .radar-back:hover{ background:var(--r-panel); color:var(--r-text); }
.radar-scroll{ flex:1; overflow-y:auto; padding:14px 14px 30px; }

.radar-progress{ background:var(--r-panel); border:1px solid var(--r-line); border-radius:10px; padding:11px 13px; margin-bottom:12px; }
.radar-progress .radar-lab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:10.5px; color:var(--r-dim); letter-spacing:.3px; font-weight:700; margin-bottom:8px; line-height:1.35; }
.radar-progress .radar-lab > span{ min-width:0; }
.radar-progress .radar-lab b{ color:var(--r-accent2); white-space:nowrap; flex:0 0 auto; }
.radar-bar{ height:7px; background:#0c0e13; border-radius:5px; overflow:hidden; }
.radar-bar>i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--r-accent),#4d8bff); transition:width .3s; }

.radar-selmap{ position:relative; margin-bottom:12px; }
.radar-selmap>button{ width:100%; display:flex; align-items:center; gap:11px; background:var(--r-panel);
  border:1px solid var(--r-line); border-radius:10px; padding:10px 12px; text-align:left; }
.radar-selmap>button:hover{ border-color:var(--r-line2); }
.radar-selmap .radar-thumb{ width:34px; height:34px; border-radius:7px; background-size:cover;
  background-position:center; flex:0 0 34px; background-color:#000; }
.radar-selmap .radar-seltxt small{ display:block; font-size:9.5px; color:var(--r-dim2); letter-spacing:1.5px; font-weight:700; }
.radar-selmap .radar-seltxt b{ font-size:14px; }
.radar-selmap .radar-car{ margin-left:auto; color:var(--r-dim); transition:.15s; }
.radar-selmap.radar-open .radar-car{ transform:rotate(180deg); }
.radar-selmap .radar-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--r-panel2);
  border:1px solid var(--r-line2); border-radius:10px; padding:6px; z-index:20; display:none;
  box-shadow:0 14px 34px rgba(0,0,0,.6); max-height:340px; overflow-y:auto; }
.radar-selmap.radar-open .radar-pop{ display:block; }
.radar-selmap .radar-pop button{ width:100%; display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; text-align:left; }
.radar-selmap .radar-pop button:hover{ background:var(--r-panel); }
.radar-selmap .radar-pop button.radar-sel{ background:rgba(124,92,255,.16); }
.radar-selmap .radar-pop .radar-thumb{ width:30px; height:30px; flex:0 0 30px; }

.radar-toggles{ display:flex; gap:7px; margin-bottom:14px; }
.radar-toggles button{ flex:1; background:var(--r-panel); border:1px solid var(--r-line); border-radius:9px;
  padding:9px 6px; font-size:11px; color:var(--r-dim); display:flex; flex-direction:column; align-items:center; gap:5px; font-weight:600; }
.radar-toggles button .radar-ico{ font-size:15px; }
.radar-toggles button:hover{ border-color:var(--r-line2); color:var(--r-text); }
/* Borda roxa e nao `--r-accent`: o fundo ja' era roxo, entao a borda por jogo
   deixava o botao ativo com fundo de uma cor e contorno de outra. */
.radar-toggles button.radar-active{ background:rgba(124,92,255,.16); border-color:#8b62dd; color:#fff; }

/* ---- ao vivo (posicao vinda do mod) ---- */
.radar-live{ margin-bottom:14px; }
/* O flex do cabecalho estava preso a .radar-progress, entao aqui o rotulo e o
   estado ficavam colados inline. Mesmo tratamento, estado empurrado ao canto. */
.radar-live .radar-lab{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px; }
.radar-live .radar-lab > span{ min-width:0; font-size:11px; font-weight:800; letter-spacing:.9px;
  color:var(--r-dim2); }
.radar-live .radar-lab b{ font-size:10.5px; letter-spacing:.3px; white-space:nowrap; flex:0 0 auto;
  padding:3px 8px; border-radius:20px; background:var(--r-panel); border:1px solid var(--r-line); }
.radar-live .radar-lab b.radar-live-on{ background:rgba(79,209,255,.12); border-color:rgba(79,209,255,.4); }

/* ---- cabecalho que abre e fecha ----
   Mesma mecanica do grupo de pontos do mapa: seta a esquerda girando, corpo
   escondido por CSS (e nao removido do JSX, para as refs do motor sobreviverem
   a cada abrir e fechar). */
.radar-lab-btn{ cursor:pointer; user-select:none; padding:2px 0; }
.radar-lab-btn:hover > span:not(.radar-car){ color:var(--r-text); }
.radar-lab-btn:focus-visible{ outline:2px solid var(--r-accent); outline-offset:3px; border-radius:6px; }
.radar-live .radar-lab-btn .radar-car{ color:var(--r-dim2); font-size:10px; width:12px;
  text-align:center; flex:0 0 12px; transition:.15s; }
/* A seta some quando fechado? Nao: gira, que e' o unico jeito de dizer "tem
   mais aqui dentro" sem escrever isso. */
.radar-live.radar-closed .radar-lab-btn .radar-car{ transform:rotate(-90deg); }
/* O rotulo empurra a bolinha de conexao para o canto. */
.radar-live .radar-lab-btn > span:not(.radar-car){ margin-right:auto; }
/* Fechado, a bolinha e' o unico resumo: cor e pulso dizem se o mod respondeu. */
.radar-live .radar-lab-btn .radar-pulse{ flex:0 0 7px; }
.radar-live.radar-closed{ margin-bottom:10px; }
.radar-live.radar-closed .radar-live-body{ display:none; }
.radar-live-on{ color:#4fd1ff; }
.radar-live-off{ color:var(--r-dim2); }
.radar-live-pos{ font-size:11.5px; color:var(--r-dim); font-variant-numeric:tabular-nums;
  background:var(--r-panel); border:1px solid var(--r-line); border-radius:8px;
  padding:7px 9px; margin:0 0 8px; }
.radar-live-pos i{ color:var(--r-dim2); font-style:normal; }
.radar-live .radar-toggles{ margin-bottom:0; }
.radar-live-msg{ font-size:11.5px; color:var(--r-dim); margin-top:8px; line-height:1.45; }
/* ---- linhas de opcao, no formato do menu do mod ----
   Rotulo a esquerda, interruptor a direita, fundo de linha arredondado. */
.radar-rows{ display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.radar-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--r-panel); border:1px solid var(--r-line); border-radius:10px;
  padding:10px 12px; cursor:pointer; }
.radar-row:hover{ border-color:var(--r-line2); }
/* Linha de leitura nao e' clicavel: sem cursor de mao e sem realce no hover,
   para nao prometer uma acao que nao existe. */
.radar-row-read{ cursor:default; }
.radar-row-read:hover{ border-color:var(--r-line); }
/* Indisponivel: apagada e sem cursor de mao. Continua legivel de proposito —
   sumir com a linha faria a lista pular de tamanho toda vez que o mod entra e
   sai, e quem procura "Seguir jogador" nao acharia. */
.radar-row-off{ cursor:not-allowed; opacity:.45; }
.radar-row-off:hover{ border-color:var(--r-line); }
.radar-row-ic{ width:20px; height:20px; flex:0 0 20px; border-radius:6px; display:grid;
  place-items:center; font-style:normal; }
.radar-row-ic img{ width:12px; height:12px; display:block; }
.radar-row-em{ font-size:13px; background:transparent; }
.radar-row-nm{ flex:1; min-width:0; font-size:12.5px; color:var(--r-text); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radar-row-vl{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--r-dim);
  font-variant-numeric:tabular-nums; }
/* interruptor: mesma pilula do menu */
/* Interruptores da barra lateral. O degrade roxo e' o mesmo do menu flutuante
   (radar-pubg.css) e NAO usa `--r-accent` de proposito: aquela variavel muda de
   cor por jogo — dourado no PUBG, verde no SotF — e o interruptor virava uma
   cor diferente em cada radar, sem que a troca significasse nada.
   `border` explicita porque `background` sozinho nao desenha contorno. */
.radar-sw{ width:34px; height:19px; flex:0 0 34px; border-radius:20px;
  background:#3a3a4a; border:1px solid #4a4a58; box-sizing:border-box;
  position:relative; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.radar-sw i{ position:absolute; top:1.5px; left:1.5px; width:14px; height:14px; border-radius:50%;
  background:#8b90a3; transition:transform .18s ease, background .18s ease; }
.radar-sw.radar-on{ background:linear-gradient(90deg,#865ce2 0%,#593595 100%);
  border-color:#8b62dd; box-shadow:0 0 10px rgba(121,101,255,.3); }
.radar-sw.radar-on i{ transform:translateX(15px); background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.55); }

/* ---- Game points: um grupo unico envolvendo as categorias ----
   A arvore continua a mesma; o que mudou e' ela nascer fechada dentro de um
   cabecalho so'. */
.radar-gp > .radar-chead{ background:var(--r-panel); border:1px solid var(--r-line);
  border-radius:9px; padding:10px 8px; }
.radar-gp > .radar-chead:hover{ border-color:var(--r-line2); }
.radar-gp > .radar-chead .radar-nm{ letter-spacing:.9px; }
/* Recuo do segundo nivel, para a hierarquia se ler sem contar linhas. */
.radar-gp-body{ padding-left:8px; border-left:1px solid var(--r-line); margin-left:10px; }

/* ---- coordenadas sobre o mapa, ao lado do zoom ---- */
/* ---- HUD do canto superior direito ----
   Flex, e nao pixel: cada painel entra e sai por interruptor, e posicionar por
   `right:` deixaria buraco quando o vizinho some. */
/* `align-items:stretch` iguala a ALTURA de todos os paineis pela do mais alto,
   sem cravar um numero: os que eu acrescentei depois (espectadores, vivos, gas)
   usam numero em 15px e saiam com 47-48px contra os 41px dos originais, e a
   fileira ficava serrilhada. Cada painel centraliza o proprio conteudo, entao
   esticar so' alinha as bordas.
   A LARGURA continua pelo conteudo — cada um ocupa o que precisa. */
/* O HUD passou a cobrir o palco INTEIRO. Ele e' o bloco de contencao dos
   paineis arrastados: `position:absolute` num painel solto resolve contra ele,
   entao a fracao gravada mapeia direto para o palco.

   A fileira (`.radar-hud-fila`) e' um filho ESTATICO — de proposito. Se ela
   fosse posicionada, viraria o bloco de contencao e o painel solto ficaria
   preso ao retangulo da fileira em vez do palco. */
.radar-hud{ position:absolute; inset:0; padding:16px;
  display:flex; justify-content:flex-end; align-items:flex-start;
  pointer-events:none; }
/* `align-items:stretch` iguala a altura dos paineis pela do mais alto. */
.radar-hud-fila{ display:flex; align-items:stretch; gap:10px; min-width:0; }

/* Os paineis recebem o ponteiro (a camada em volta nao). */
.radar-hud [data-hudmov]{ pointer-events:auto; cursor:grab; touch-action:none; }
.radar-hud [data-hudmov="arrastando"]{ cursor:grabbing; z-index:5;
  box-shadow:0 10px 26px rgba(0,0,0,.5); }
/* Solto: sai da fileira e ganha um contorno discreto, para nao parecer que o
   painel "escapou" sozinho. */
.radar-hud [data-hudmov="solto"]{ outline:1px solid rgba(255,255,255,.05); }
/* `.radar-hud > .radar-float` e nao `.radar-hud > *`: a .radar-float define
   position:absolute com a mesma especificidade e vem depois no arquivo, entao
   venceria e os paineis sairiam do fluxo do flex — empilhados um sobre o
   outro, que foi exatamente o que aconteceu. */
/* A FILEIRA entrou no meio: os paineis deixaram de ser filhos diretos do
   `.radar-hud`, este seletor parou de casar e eles voltaram para
   `position:absolute` — empilhados um sobre o outro, com a fileira medindo
   altura zero e as alturas iguais perdidas de novo. O painel ARRASTADO nao e'
   afetado: o `position:absolute` dele vem em estilo inline, que vence. */
.radar-hud > .radar-float,
.radar-hud-fila > .radar-float{ position:static; pointer-events:auto; }
.radar-hud > [hidden],
.radar-hud-fila > [hidden]{ display:none; }

/* Paineis de leitura sobre o mapa, no formato do HUD do mod: icone a esquerda,
   rotulo e valor no fim. */
.radar-coords, .radar-zbadge{ display:flex; align-items:center; gap:13px;
  padding:9px 15px; border-radius:13px; white-space:nowrap;
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--r-dim2); }
.radar-coords svg, .radar-zbadge svg{ width:15px; height:15px; flex:0 0 15px; color:var(--r-dim); }
.radar-coords span, .radar-zbadge span{ display:inline-flex; gap:5px; letter-spacing:.3px; }
.radar-coords b, .radar-zbadge b{ color:var(--r-text); font-weight:600; text-align:right; }
.radar-coords b{ min-width:34px; }
/* Azul quando o numero e' do jogador, e nao do cursor — mesma cor do marcador. */
.radar-coords.radar-coords-live svg,
.radar-coords.radar-coords-live b{ color:#4fd1ff; }

/* ---- estado da conexao: bolinha pulsando + texto na mesma cor ---- */
.radar-conn{ display:inline-flex; align-items:center; gap:7px; }
.radar-pulse{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:currentColor;
  animation:radar-blink 1.25s ease-in-out infinite; }
@keyframes radar-blink{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.25; transform:scale(.8) } }
.radar-conn-on{ color:#4ade80; }    /* em jogo */
.radar-conn-idle{ color:#e8b23a; }  /* mod responde, sem partida aberta */
.radar-conn-off{ color:#f87171; }   /* mod fora do ar */
/* Parado nao pisca: um ponto imovel nao chama atencao a toa. */
@media (prefers-reduced-motion: reduce){ .radar-pulse{ animation:none } }

/* ---- compartilhar sessao ----
   O campo do link vive sobre o mapa, no mesmo formato dos outros paineis do
   HUD: icone a esquerda, conteudo no meio, acao no fim. */
/* Canto superior esquerdo, na mesma altura do HUD da direita (top:16px nos
   dois). Ele nao entra no flex do HUD porque e' largo: dividindo a linha com
   coordenadas e zoom, um monitor menor espremeria os tres. */
.radar-shareflt{ top:16px; left:16px; z-index:3;
  display:flex; align-items:center; gap:10px; padding:7px 8px 7px 15px;
  border-radius:13px; width:min(430px, 40vw); }
.radar-shareflt svg{ width:15px; height:15px; flex:0 0 15px; color:var(--r-dim); }
.radar-shareflt input{ flex:1; min-width:0; height:30px; padding:0 2px; border:0; background:none;
  font-size:11.5px; color:var(--r-text); font-family:ui-monospace,Consolas,monospace;
  text-overflow:ellipsis; }
.radar-shareflt input:focus{ outline:none; }
.radar-shareflt button{ flex:0 0 auto; padding:0 13px; height:30px; border-radius:9px;
  background:var(--r-accent); color:#fff; border:0; font-size:11.5px; font-weight:700; cursor:pointer; }
.radar-shareflt button:hover{ filter:brightness(1.1); }
.radar-share-hint{ font-size:11px; color:var(--r-dim2); line-height:1.5; margin-top:10px;
  padding:9px 11px; background:var(--r-panel); border:1px solid var(--r-line); border-radius:9px; }
.radar-share-off{ font-size:11.5px; color:var(--r-dim2); line-height:1.5; margin-top:12px;
  padding:9px 11px; background:var(--r-panel); border:1px solid var(--r-line); border-radius:9px; }
.radar-share-off b{ color:var(--r-text); }

/* legenda das entidades ao vivo */
.radar-legend{ display:flex; flex-direction:column; gap:2px; margin:0 0 10px; }
.radar-leg{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--r-dim);
  padding:3px 2px; }
.radar-leg i{ width:17px; height:17px; flex:0 0 17px; border-radius:50%; display:grid;
  place-items:center; border:1px solid rgba(0,0,0,.55); }
.radar-leg i img{ width:11px; height:11px; display:block; }
.radar-leg b{ margin-left:auto; color:var(--r-text); font-variant-numeric:tabular-nums; }

/* lista dos pontos de calibracao */
.radar-calpts{ margin-top:9px; }
.radar-calpt{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:7px;
  font-size:11.5px; color:var(--r-dim); }
.radar-calpt:hover{ background:var(--r-panel); }
.radar-calpt b{ width:16px; height:16px; flex:0 0 16px; border-radius:5px; display:grid;
  place-items:center; font-size:9px; color:#141414; background:rgba(232,178,58,.9); }
.radar-calpt-nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-calpt-er{ font-variant-numeric:tabular-nums; color:var(--r-dim2); }
.radar-calpt.radar-bad .radar-calpt-er{ color:#ff8a8a; font-weight:700; }
.radar-calpt button{ width:18px; height:18px; flex:0 0 18px; border-radius:5px; font-size:10px;
  color:var(--r-dim2); background:transparent; border:0; line-height:1; }
.radar-calpt button:hover{ background:rgba(224,69,122,.2); color:#fff; }
.radar-calpts .radar-toggles{ margin:8px 0 0; }

.radar-live-warn{ font-size:11.5px; line-height:1.5; margin-top:8px; padding:9px 10px;
  border-radius:8px; color:#f3d9a0; background:rgba(232,178,58,.10);
  border:1px solid rgba(232,178,58,.32); }
.radar-live-warn b{ color:#ffd98a; }

.radar-sidesearch{ position:relative; margin-bottom:14px; }
.radar-sidesearch .radar-searchic{ left:11px; }
.radar-sidesearch .radar-searchic svg{ width:15px; height:15px; }
.radar-app .radar-sidesearch input[type="text"]{ height:40px; padding:0 12px 0 34px; font-size:12.5px; border-radius:9px; }

.radar-cat{ margin-bottom:8px; }
.radar-cat .radar-chead{ display:flex; align-items:center; gap:9px; padding:9px 6px; cursor:pointer; border-radius:8px; }
.radar-cat .radar-chead:hover{ background:var(--r-panel); }
.radar-cat .radar-chead .radar-dot{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:12px; flex:0 0 22px; }
.radar-cat .radar-chead .radar-dot-svg{ width:24px; height:24px; flex:0 0 24px; object-fit:contain; display:block; }
.radar-cat .radar-chead .radar-nm{ font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--r-text); }
.radar-cat .radar-chead .radar-ct{ margin-left:auto; font-size:11px; color:var(--r-dim); font-weight:700; }
.radar-cat .radar-chead .radar-vis{ margin-left:8px; font-size:12px; line-height:1; opacity:.9; cursor:pointer; padding:2px 4px; border-radius:5px; flex:0 0 auto; }
.radar-cat .radar-chead .radar-vis:hover{ background:var(--r-panel2); }
.radar-cat .radar-chead .radar-vis.radar-off{ opacity:.38; }
.radar-cat .radar-chead .radar-car{ color:var(--r-dim2); font-size:10px; transition:.15s; width:12px; text-align:center; }
.radar-cat.radar-closed .radar-car{ transform:rotate(-90deg); }
.radar-cat .radar-items{ padding:2px 0 6px 6px; }
.radar-cat.radar-closed .radar-items{ display:none; }
.radar-item{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--r-dim); }
.radar-item:hover{ background:var(--r-panel); color:var(--r-text); }
.radar-item .radar-mk{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.radar-item .radar-inm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radar-item.radar-found .radar-inm{ color:var(--r-dim2); text-decoration:line-through; }
.radar-item .radar-ck{ width:17px; height:17px; border-radius:5px; border:1.5px solid var(--r-line2); flex:0 0 17px;
  display:grid; place-items:center; font-size:11px; color:#fff; }
.radar-item .radar-ck.radar-on{ background:var(--r-green); border-color:var(--r-green); }
.radar-item .radar-del{ color:var(--r-dim2); font-size:13px; padding:2px 5px; border-radius:5px; }
.radar-item .radar-del:hover{ color:var(--r-pink); background:rgba(224,69,122,.12); }
.radar-app .radar-addpin{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:4px;
  padding:8px; border-radius:8px; border:1px dashed var(--r-line2); color:var(--r-dim); font-size:12px; font-weight:600; background:none; }
.radar-addpin:hover{ border-color:var(--r-accent); color:var(--r-accent2); }
.radar-addpin.radar-active{ border-style:solid; border-color:var(--r-accent); color:#fff; background:rgba(124,92,255,.14); }

/* stage / canvas */
/* fundo quadriculado (grid) atras do mapa — o canvas fica transparente fora do mapa */
.radar-stage{ flex:1; position:relative; min-width:0;
  background-color:#2b2f38;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px; }
.radar-cv{ position:absolute; inset:0; display:block; cursor:grab; touch-action:none; }
.radar-cv.radar-dragging{ cursor:grabbing; }
.radar-cv.radar-pinmode{ cursor:crosshair; }
.radar-float{ position:absolute; background:var(--r-panel); border:1px solid var(--r-line2); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
/* zoom no canto inferior ESQUERDO — o inferior direito e ocupado pelos widgets
   flutuantes do site (whatsapp/chat, position:fixed z-index alto) */
.radar-zc{ left:16px; bottom:16px; display:flex; flex-direction:column; padding:5px; gap:4px; }
.radar-zc button{ width:38px; height:38px; border-radius:8px; font-size:18px; display:grid; place-items:center; color:var(--r-text); }
.radar-zc button:hover{ background:var(--r-panel2); }
/* .radar-zbadge agora e' um painel do HUD (ver mais abaixo) e nao se posiciona
   sozinho. A .radar-hint saiu junto com o texto de ajuda: arrastar e rolar num
   mapa nao precisa de legenda, e ela ocupava o canto o tempo todo. */
.radar-tilewarn{ position:absolute; left:50%; top:20px; transform:translateX(-50%); max-width:80%;
  padding:9px 14px; font-size:12px; color:var(--r-amber); background:rgba(232,178,58,.1);
  border:1px solid rgba(232,178,58,.3); border-radius:10px; text-align:center; z-index:2; }

@media screen and (max-width:640px){
  .radar-side{ width:100%; flex:0 0 auto; max-height:44%; border-right:none; border-bottom:1px solid var(--r-line); }
  .radar-mapview{ flex-direction:column; }
}

/* =========================================================================
   MODO SOMENTE RADAR — o botao do menu flutuante liga `body.pubg-hide-shell`.
   Esconde todo o cromo do site e devolve ao radar a viewport inteira. Os alvos
   vivem fora da arvore do radar, por isso a classe fica no <body>; o componente
   a remove ao desmontar, senao sair da pagina deixaria o site sem menu.
   ========================================================================= */
body.pubg-hide-shell header.header,
body.pubg-hide-shell #navigation-widget,
body.pubg-hide-shell #navigation-widget-mobile,
body.pubg-hide-shell .offCanvas__wrap,
body.pubg-hide-shell .offCanvas__overlay,
body.pubg-hide-shell .floating-chat,
body.pubg-hide-shell .floating-wapp{ display:none !important; }

/* o <main> compensa a barra lateral com margin-left e o header com padding-top;
   sem o cromo os dois viram zero e o radar passa a ocupar 100% da viewport.
   O ResizeObserver do canvas (radar/index.jsx) redesenha sozinho. */
body.pubg-hide-shell main.shell-content{ margin-left:0 !important; width:100vw !important; }
body.pubg-hide-shell .radar-page{ padding-top:0 !important; height:100vh !important; }
body.pubg-hide-shell .radar-app{ height:100vh !important; }
body.pubg-hide-shell{ overflow:hidden !important; }

/* Avisos de proximidade do PUBG. Canto superior direito do mapa: longe do
   zoom (canto inferior esquerdo) e do menu flutuante, que nasce ao centro. */
/* Mesmas medidas de .radar-coords/.radar-zbadge (padding 9/15, raio 13, icone
   de 15px). Antes este painel tinha metricas proprias e destoava dos vizinhos
   na mesma fileira — metade da bagunca visual era so' isso. */
/* Sem `border-radius` proprio: o raio vem do .radar-float, como nos vizinhos.
   Declarar 13px aqui (o valor que .radar-coords pede e nao ganha) deixava este
   painel com o canto diferente do resto da fileira. */
.radar-alerts{ display:flex; align-items:center; gap:14px;
  padding:10px 15px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-alerts svg{ width:15px; height:15px; flex:0 0 15px; }

/* Alcance: contexto, nao dado. Fica apagado e separado por um filete, para o
   olho ir direto nas contagens. */
.radar-alerts .radar-alert-radius{ display:inline-flex; align-items:center; gap:7px;
  padding-right:14px; border-right:1px solid var(--r-line2);
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--r-dim2); }

.radar-alerts .radar-alert{ display:inline-flex; align-items:center; gap:6px; }
.radar-alerts .radar-alert svg{ color:var(--r-dim2); }
.radar-alerts .radar-alert b{ font-size:15px; font-weight:800; color:var(--r-dim2); line-height:1; }
.radar-alerts .radar-alert small{ font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--r-dim2); }

/* Cor SO' quando ha' o que avisar. Um painel colorido o tempo todo perde a
   forca justamente na hora em que precisa chamar atencao; em zero ele fica
   cinza e some do campo de visao sem sumir da tela. */
.radar-alerts .radar-alert.hot svg,
.radar-alerts .radar-alert.hot b{ color:var(--r-pink); }
.radar-alerts .radar-alert.hot small{ color:#ef8fa1; }
.radar-alerts .radar-alert.warm svg,
.radar-alerts .radar-alert.warm b{ color:var(--r-amber); }
.radar-alerts .radar-alert.warm small{ color:#dcbc7e; }

/* =========================================================================
   Janela de depuracao do radar PUBG.
   Layout PROPRIO: a versao anterior reusava as classes do menu e herdava a
   grade de duas colunas e as alturas fixas dele, o que fazia as secoes se
   sobreporem e o bloco do JSON cair por cima do resto.
   ========================================================================= */
.pubg-dbg{ position:absolute; right:24px; top:96px; z-index:32; width:330px;
  display:flex; flex-direction:column; max-height:calc(100% - 120px);
  border:1px solid #2c2d38; border-radius:12px; background:#141420;
  box-shadow:0 18px 44px rgba(0,0,0,.55); overflow:hidden;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif; }
.pubg-dbg.arrastando{ user-select:none; }

/* header: titulo, subtitulo e o X. E' por ele que se arrasta. */
.pubg-dbg-head{ display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 10px 10px 12px; cursor:move;
  border-bottom:1px solid #2c2d38; background:linear-gradient(180deg,#1c1c28,#171722); }
.pubg-dbg-tit{ font-size:11px; font-weight:800; letter-spacing:.1em; color:#bca7f6; }
.pubg-dbg-sub{ font-size:9.5px; font-weight:600; color:#5d6273; letter-spacing:.02em; }
.pubg-dbg-head button{ margin-left:auto; width:24px; height:24px; flex:0 0 24px; float:none;
  display:grid; place-items:center; padding:0; font-size:12px; line-height:1; color:#8f8b99;
  border:1px solid #34343f; border-radius:7px; background:#20202a; cursor:pointer; }
.pubg-dbg-head button:hover{ color:#fff; border-color:#6d4ab8; background:#2a2438; }

/* area 1: campos lidos. Rolagem propria para nao empurrar o JSON. */
.pubg-dbg-info{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px; display:flex;
  flex-direction:column; gap:8px; }
.pubg-dbg-bloco{ border:1px solid #2b2c38; border-radius:9px; background:#191926; padding:7px; }
.pubg-dbg-bloco-tit{ font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#6b7080; margin:1px 0 6px 3px; }
.pubg-dbg-linha{ display:flex; align-items:center; gap:8px; min-height:24px; padding:3px 8px;
  margin-bottom:3px; border:1px solid #2f303c; border-radius:6px; background:#20202a; }
.pubg-dbg-linha:last-child{ margin-bottom:0; }
.pubg-dbg-linha > span{ font-size:10.5px; font-weight:600; color:#8f8b99; }
.pubg-dbg-linha > b{ margin-left:auto; max-width:62%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:10.5px; font-weight:700; color:#e9ebf0;
  font-variant-numeric:tabular-nums; }
.pubg-dbg-linha > b.alerta{ color:#ff6b8a; }

/* area 2: JSON cru, separado por uma borda e com rolagem propria */
.pubg-dbg-jsonwrap{ flex:0 0 auto; padding:10px; border-top:1px solid #2c2d38; background:#111119; }
.pubg-dbg-jsonhead{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pubg-dbg-jsonhead > span{ font-size:9px; font-weight:800; letter-spacing:.09em; color:#6b7080; }
.pubg-dbg-jsonhead > small{ margin-left:auto; font-size:9px; font-weight:600; color:#5d6273; }
.pubg-dbg-jsonhead button{ flex:0 0 auto; width:auto; margin:0; padding:2px 7px; float:none;
  font-size:9px; font-weight:700; letter-spacing:.04em; color:#bca7f6;
  border:1px solid #3a3a46; border-radius:5px; background:#20202a; cursor:pointer; }
.pubg-dbg-jsonhead button:hover{ color:#fff; border-color:#6d4ab8; background:#2a2438; }
.pubg-dbg-json{ max-height:150px; overflow:auto; margin:0; padding:8px;
  font-family:ui-monospace,Consolas,monospace; font-size:9.5px; line-height:1.45;
  color:#9fd9a0; white-space:pre-wrap; word-break:break-all;
  border:1px solid #2f303c; border-radius:7px; background:#0e0e16; }
.pubg-dbg-corte{ margin-top:5px; font-size:9px; font-weight:600; color:#e8b23a; }

/* =========================================================================
   VARREDURA DE RADAR — aviso de "sem partida", sobre o mapa.

   Toma a AREA DO RADAR inteira (.radar-stage), como uma janela sobreposta, no
   estilo "sem sinal": veu escuro com vinheta e a varredura girando no centro.
   Fica so' dentro do mapa — a barra lateral, o topo do site e o menu do radar
   continuam intactos.
   ========================================================================= */
/* Sem z-index de proposito: assim ela fica no mesmo nivel dos outros
   posicionados e a ordem do DOM decide — sobre o canvas, sob o HUD. Isso e' o
   que mantem coordenadas, zoom, menu e janela de debug legiveis por cima do
   veu: o aviso cobre o mapa, nunca as informacoes.
   `pointer-events:none` mantem o mapa arrastavel por baixo. */
.radar-sweep{ position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(16,18,24,.84) 0%, rgba(7,8,12,.95) 78%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* O disco tem fundo proprio e escuro: assim os aneis tem contraste garantido
   mesmo sobre um tile claro (deserto de Miramar). */
.radar-sweep-scope{ position:relative; width:176px; height:176px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(10,12,20,.55), rgba(6,7,12,.88));
  box-shadow:0 0 0 1px rgba(124,92,255,.20), 0 0 44px rgba(124,92,255,.14); }

/* tres aneis concentricos: 100%, 66% e 33% */
.radar-sweep-ring{ position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(150,124,255,.62); }
.radar-sweep-ring:nth-child(2){ inset:16.5%; border-color:rgba(150,124,255,.46); }
.radar-sweep-ring:nth-child(3){ inset:33%;   border-color:rgba(150,124,255,.34); }

/* cruz central */
.radar-sweep-cross{ position:absolute; inset:0; border-radius:50%;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(150,124,255,.34) calc(50% - .5px), rgba(150,124,255,.34) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(150,124,255,.34) calc(50% - .5px), rgba(150,124,255,.34) calc(50% + .5px), transparent calc(50% + .5px)); }

/* o feixe: um setor de ~60 graus que gira. `conic-gradient` em vez de uma
   imagem girando — sem arquivo, sem serrilha, e a cor acompanha o tema. */
.radar-sweep-arm{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(150,124,255,.80) 0deg, rgba(150,124,255,.26) 34deg, rgba(150,124,255,.06) 58deg, transparent 74deg, transparent 360deg);
  animation:radar-sweep-spin 2.4s linear infinite; }
@keyframes radar-sweep-spin{ to{ transform:rotate(360deg); } }

/* Quem pediu menos animacao no sistema recebe o feixe parado: a informacao
   e' o texto, o giro e' so' o reforco. */
@media (prefers-reduced-motion: reduce){
  .radar-sweep-arm{ animation:none; }
}

.radar-sweep-txt{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.radar-sweep-txt b{ font-size:19px; font-weight:800; letter-spacing:.17em; color:#cbbcff;
  text-shadow:0 2px 16px rgba(0,0,0,.75); }
.radar-sweep-txt small{ font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--r-dim); }

/* Cronometro do gas — mesmas medidas dos outros paineis do HUD. */
.radar-gas{ display:flex; align-items:center; gap:9px; padding:10px 15px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-gas svg{ width:15px; height:15px; flex:0 0 15px; color:var(--r-dim2); }
.radar-gas span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--r-dim2); }
.radar-gas b{ font-size:14px; font-weight:800; color:var(--r-text); }
/* Fechando: a zona esta' andando AGORA, e a cor e' o que faz olhar. */
/* Sem numero: painel apagado. Continua visivel para nao parecer recurso
   quebrado, mas nao disputa atencao com o que tem dado de verdade. */
.radar-gas.semdado b{ color:var(--r-dim2); }
.radar-gas.fechando svg, .radar-gas.fechando span{ color:#5cc8ff; }
.radar-gas.fechando b{ color:#8fd8ff; }

/* Vivos na partida — mesmas medidas dos outros paineis do HUD. */
.radar-vivos{ display:flex; align-items:center; gap:8px; padding:10px 15px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-vivos svg{ width:15px; height:15px; flex:0 0 15px; color:var(--r-dim2); }
.radar-vivos b{ font-size:15px; font-weight:800; color:var(--r-text); }
.radar-vivos span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--r-dim2); }
.radar-vivos em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--r-dim2);
  padding-left:8px; margin-left:2px; border-left:1px solid var(--r-line2); }

/* Modo combate — mesmas medidas dos outros paineis do HUD, mas em ambar e com
   a borda acesa: e' um MODO ligado, um estado fora do normal que explica por que
   sumiram itens e veiculos. Discreto demais e ele nao cumpre esse papel. */
.radar-combate{ display:flex; align-items:center; gap:8px; padding:10px 15px; white-space:nowrap;
  border-color:rgba(232,196,106,.45); background:rgba(232,196,106,.12); }
.radar-combate svg{ width:15px; height:15px; flex:0 0 15px; color:#e8c46a; }
.radar-combate b{ font-size:12px; font-weight:800; letter-spacing:.07em; color:#e8c46a; }
.radar-combate em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--r-dim2);
  padding-left:8px; margin-left:2px; border-left:1px solid var(--r-line2); }

/* Fase da zona, dentro do painel do gas. */
.radar-gas .fase{ font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--r-text); padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.07); }
/* Deduzida pelo mod e nao confirmada: apagada, para nao passar por certeza. */
.radar-gas .fase.incerta{ color:var(--r-dim2); background:rgba(255,255,255,.04); }

/* Espectadores — mesmas medidas do HUD, mas em vermelho: alguem te observando
   e' risco, nao estatistica. */
.radar-esp{ display:flex; align-items:center; gap:8px; padding:10px 15px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-esp svg{ width:15px; height:15px; flex:0 0 15px; color:var(--r-dim2); }
.radar-esp b{ font-size:15px; font-weight:800; color:var(--r-text); }
.radar-esp span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--r-dim2); }
/* A partir de UM espectador o painel acende: num radar, alguem te observando e'
   risco e nao estatistica. Em zero fica apagado como os vizinhos do HUD. */
.radar-esp.alerta{ border-color:rgba(224,69,122,.45); }
.radar-esp.alerta svg, .radar-esp.alerta b{ color:var(--r-pink); }
.radar-esp.alerta span{ color:#ef8fa1; }
.radar-esp em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--r-dim);
  padding-left:8px; margin-left:2px; border-left:1px solid var(--r-line2);
  max-width:140px; overflow:hidden; text-overflow:ellipsis; }


/* ---- janela de selecao de itens ------------------------------------------ */

/* Botao que abre. Resume o estado: sem o resumo, saber se ha' item escondido
   exigiria abrir a janela. */
/* `.radar-app button` zera borda e fundo de TODO botao do radar, e tem
   especificidade maior que uma classe sozinha — o botao saia sem caixa, so' o
   texto solto. Prefixar com `.radar-app` e' o que faz o estilo valer. */
.radar-app .pubg-itens-abrir{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; width:100%; margin:0 0 6px; padding:9px 12px; border-radius:8px;
  border:1px solid #3c3c4a; color:var(--r-text);
  font-size:12px; font-weight:600; min-height:38px;
  /* Relevo: gradiente claro em cima, borda de baixo mais escura, risco branco
     interno no topo e sombra por fora. As linhas vizinhas do menu sao chapadas
     de proposito — e' esse contraste que faz este parecer clicavel. */
  background:linear-gradient(180deg,#272736 0%,#1c1c26 100%);
  border-bottom-color:#16161e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.35);
  transition:background .14s ease, box-shadow .14s ease, transform .06s ease; }
.radar-app .pubg-itens-abrir:hover{ background:linear-gradient(180deg,#2f2f42 0%,#22222e 100%);
  border-color:var(--accent, var(--r-accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 3px 7px rgba(0,0,0,.42); }
/* Afunda ao clicar: sem isso o relevo fica parado e o clique nao da' retorno. */
.radar-app .pubg-itens-abrir:active{ transform:translateY(1px);
  background:linear-gradient(180deg,#1c1c26 0%,#232330 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }
/* Seta a' direita: diz que ABRE algo, em vez de ligar/desligar como os vizinhos. */
.radar-app .pubg-itens-abrir::after{ content:"›"; flex:0 0 auto; margin-left:2px;
  font-size:15px; line-height:1; color:var(--r-dim2); }
.radar-app .pubg-itens-abrir:hover::after{ color:var(--r-text); }
/* No hover a borda inteira vira roxa e o degrau escuro de baixo sumia — este
   devolve a diferenca entre base e topo, que e' o que sustenta o relevo. */
.radar-app .pubg-itens-abrir:hover{ border-bottom-color:color-mix(in srgb,var(--accent,#7965ff) 55%,#000); }
.pubg-itens-abrir em{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--r-dim2); }

/* z-index acima do menu flutuante (que ja' sobe sobre o canvas), senao a janela
   abre ATRAS do painel que a chamou. */
/* O embrulho do portal e' so' porta-classes: sem tamanho e sem pintura. */
.pubg-modal-raiz{ display:contents; }

.pubg-modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(4,5,8,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:24px; }
/* Tamanho FIXO, nao "o que o conteudo pedir": filtrando por um grupo pequeno
   (Coronha tem 6) a janela encolhia para uma tira, e os botoes de acao pulavam
   de lugar a cada troca de grupo. `min(...)` so' entra quando a tela e' menor
   que isso. */
.pubg-modal-caixa{ display:flex; flex-direction:column;
  width:min(860px,100%); height:min(620px,100%);
  background:var(--r-panel); border:1px solid var(--r-line2); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden; }

/* Corpo em duas colunas: trilha de grupos fixa, conteudo ocupa o resto. */
.pubg-modal-corpo{ flex:1 1 auto; min-height:0; display:flex; }
.pubg-modal-conteudo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* Trilha vertical dos grupos. Sao 14 — na horizontal nao cabiam e metade
   ficava atras de uma rolagem. */
.pubg-modal-lado{ flex:0 0 170px; display:flex; flex-direction:column; gap:2px;
  padding:10px 8px; overflow-y:auto; border-right:1px solid var(--r-line);
  background:rgba(0,0,0,.16); }
.pubg-modal-lado button{ display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 10px; border-radius:8px; font-size:11.5px; font-weight:700; text-align:left;
  color:var(--r-dim); background:transparent; border:1px solid transparent; }
.pubg-modal-lado button:hover{ background:rgba(255,255,255,.06); color:var(--r-text); }
.pubg-modal-lado button.ativo{ background:color-mix(in srgb,var(--accent,#7965ff) 24%,transparent);
  border-color:var(--accent,#7965ff); color:var(--r-text); }
.pubg-modal-lado button em{ font-style:normal; font-size:10px; font-weight:800;
  margin-left:auto; color:var(--r-dim2); font-variant-numeric:tabular-nums; }
.pubg-modal-lado button.ativo em{ color:var(--r-text); opacity:.85; }

/* `flex:0 0 auto` em tudo que nao e' a lista: sem isso o flex encolhia a
   faixa de grupos para 24px com 34px de conteudo, e as abas apareciam cortadas
   com uma barra de rolagem propria. So' a lista pode ceder altura. */
.pubg-modal-topo{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--r-line); }
.pubg-modal-topo strong{ font-size:13px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.pubg-modal-topo input[type=search]{ flex:1 1 auto; min-width:0; font-size:12px; padding:8px 11px;
  border-radius:8px; border:1px solid var(--r-line2); background:rgba(255,255,255,.05);
  color:var(--r-text); font-family:inherit; }
.pubg-modal-topo input[type=search]:focus{ outline:none; border-color:var(--accent, var(--r-accent)); }
.pubg-modal-x{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; font-size:19px;
  line-height:1; color:var(--r-dim); border:1px solid var(--r-line2); }
.pubg-modal-x:hover{ background:rgba(255,255,255,.08); color:#fff; }

.pubg-modal-acoes{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 16px;
  border-bottom:1px solid var(--r-line); }
.pubg-modal-acoes span{ font-size:11px; font-weight:700; color:var(--r-dim2);
  font-variant-numeric:tabular-nums; margin-right:auto; }
.pubg-modal-acoes button{ font-size:10.5px; font-weight:700; padding:6px 10px; border-radius:7px;
  border:1px solid var(--r-line2); background:rgba(255,255,255,.05); color:var(--r-dim); }
.pubg-modal-acoes button:hover:not(:disabled){ background:rgba(255,255,255,.09); color:var(--r-text); }
.pubg-modal-acoes button:disabled{ opacity:.4; cursor:default; }

/* Duas colunas: com 261 itens, uma coluna so' dobra a rolagem sem ganhar nada. */
.pubg-modal-lista{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 16px 14px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:6px 14px;
  align-content:start; }

/* Barra de rolagem fina SO' aqui: a do radar e' 9px, que numa lista de duas
   colunas come' largura de item e fica pesada ao lado das linhas. */
.pubg-modal ::-webkit-scrollbar{ width:6px; height:6px; }
.pubg-modal ::-webkit-scrollbar-track{ background:transparent; }
.pubg-modal ::-webkit-scrollbar-thumb{ background:#333846; border-radius:99px; }
.pubg-modal ::-webkit-scrollbar-thumb:hover{ background:#454b5c; }
.pubg-modal *{ scrollbar-width:thin; scrollbar-color:#333846 transparent; }

.pubg-modal-rodape{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-top:1px solid var(--r-line); }
.pubg-modal-rodape span{ font-size:10.5px; color:var(--r-dim2); margin-right:auto; }
.pubg-modal-rodape button{ font-size:11px; font-weight:700; padding:7px 16px; border-radius:8px;
  background:var(--accent, var(--r-accent)); color:#fff; }

/* Marca dos que nunca apareceram num quadro real. Apagada de proposito: e' nota
   de rodape, nao alerta. */
.pubg-itens-novo{ font-style:normal; color:var(--r-dim2); opacity:.7; margin-left:5px; }
.pubg-itens-vazio{ grid-column:1/-1; font-size:11.5px; color:var(--r-dim2); padding:14px 2px; margin:0; }

/* Quantas classes uma linha cobre. Sem isto, juntar "Backpack (Level 3)" x3
   numa linha so' faria a contagem do grupo parecer errada. */
.pubg-itens-qtd{ font-style:normal; font-size:9.5px; font-weight:800; margin-left:6px;
  padding:1px 5px; border-radius:5px; color:var(--r-dim2); background:rgba(255,255,255,.07); }

/* ---- aviso de banimento (aimbot / RCS) ------------------------------------
   Vermelho, e nao o ambar do somente-leitura: aquele informa uma limitacao,
   este pede uma decisao com consequencia na conta de quem le'.

   A caixa quebra os dois tamanhos FIXOS herdados de `.pubg-modal-caixa`. Eles
   existem para a janela de itens, onde filtrar um grupo pequeno encolhia a
   lista e fazia os botoes pularem de lugar; aqui o conteudo nao muda, e 860x620
   para tres paragrafos deixaria o rodape no fim de um campo vazio. */
/* Preso a AREA DO RADAR, e nao a tela. `absolute` porque o portal entra em
   `.radar-stage`, que ja' e' `position:relative` — mesmo arranjo da varredura
   de "sem partida". Com `fixed` o veu escurecia a barra lateral do site e o
   topo, que nao tem parte nenhuma nesta decisao.
   z-index acima do `.radar-menu` (30), que e' irmao dele no palco. */
.pubg-modal--palco{ position:absolute; z-index:40; padding:18px; }

.pubg-risco{ width:min(520px,100%); height:auto; max-height:100%;
  border-color:rgba(255,70,109,.4); }
.pubg-risco .pubg-modal-topo{ border-bottom-color:rgba(255,70,109,.28);
  background:rgba(255,70,109,.09); }
.pubg-risco .pubg-modal-topo strong{ color:#ff8ba4; white-space:normal; margin-right:auto; }
.pubg-risco-icone{ display:flex; flex:0 0 auto; color:#ff466d; }
.pubg-risco-icone svg{ width:19px; height:19px; }

.pubg-risco-corpo{ padding:16px; display:flex; flex-direction:column; gap:11px;
  overflow-y:auto; }
.pubg-risco-corpo p{ margin:0; font-size:12.5px; line-height:1.55; color:var(--r-dim); }
.pubg-risco-corpo b{ color:var(--r-text); font-weight:800; }
.pubg-risco-destaque{ padding:10px 12px; border-radius:9px;
  border:1px solid rgba(255,70,109,.4); background:rgba(255,70,109,.11);
  color:#ff8ba4!important; font-weight:700; }

/* Sem `span` de rodape aqui, entao nada empurra os botoes: o `flex-end` faz o
   trabalho que o `margin-right:auto` faz na janela de itens. */
.pubg-risco-rodape{ justify-content:flex-end; gap:9px;
  border-top-color:rgba(255,70,109,.22); }

/* Os dois botoes precisam vencer `.pubg-modal-rodape button`, que pinta tudo de
   roxo, e `.radar-app button`, que zera fundo e borda. Dois nomes de classe
   bastam para os dois casos. */
.pubg-risco-rodape .pubg-risco-nao{ padding:8px 18px; border-radius:8px; font-size:11.5px;
  font-weight:800; color:#fff; background:var(--accent,var(--r-accent)); border:1px solid transparent; }
.pubg-risco-rodape .pubg-risco-nao:hover{ filter:brightness(1.14); }
/* Apagado de proposito. Assumir o risco e' uma escolha valida, mas nao e' a que
   o dialogo esta' recomendando — e um botao vermelho vistoso convidaria. */
.pubg-risco-rodape .pubg-risco-sim{ padding:8px 16px; border-radius:8px; font-size:11.5px;
  font-weight:700; color:var(--r-dim); background:transparent;
  border:1px solid var(--r-line2); }
.pubg-risco-rodape .pubg-risco-sim:hover{ color:#ff8ba4; border-color:rgba(255,70,109,.55);
  background:rgba(255,70,109,.1); }

/* Lembrete que fica na aba enquanto aimbot ou RCS estiverem ligados. O modal
   aparece uma vez; quem deixou ligado de uma sessao para a outra nao veria
   aviso nenhum ao voltar. */
.pubg-risco-fixo{ display:flex; align-items:center; gap:8px; margin-top:7px; padding:8px 10px;
  border-radius:8px; border:1px solid rgba(255,70,109,.4); background:rgba(255,70,109,.1);
  font-size:10.5px; line-height:1.45; font-weight:600; color:var(--r-dim); }
.pubg-risco-fixo svg{ width:14px; height:14px; flex:0 0 14px; color:#ff466d; }
.pubg-risco-fixo b{ color:#ff8ba4; font-weight:800; }

/* ---- painel "mirando em voce" -------------------------------------------- */
/* Vermelho e pulsando: e' o unico painel do HUD que pede acao AGORA. Se
   parecesse com os outros, seria lido como mais um numero. */
.radar-mira{ display:flex; align-items:center; gap:8px; padding:10px 15px; white-space:nowrap;
  border-color:rgba(255,70,109,.55); background:rgba(255,70,109,.16);
  animation:radarMiraPulso 1.05s ease-in-out infinite; }
.radar-mira svg{ width:15px; height:15px; flex:0 0 15px; color:#ff466d; }
.radar-mira b{ font-size:15px; font-weight:800; color:#ff8ba4; }
.radar-mira span{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#ff466d; }
.radar-mira em{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--r-dim2);
  padding-left:8px; margin-left:2px; border-left:1px solid var(--r-line2);
  font-variant-numeric:tabular-nums; }
@keyframes radarMiraPulso{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,70,109,.34); }
  50%    { box-shadow:0 0 0 7px rgba(255,70,109,0); }
}

/* ---- avisos grandes no meio do mapa --------------------------------------
   Placa INCLINADA, e nao caixa arredondada: o retangulo com cantos redondos e
   desfoque e' vocabulario de interface de site, e este aviso compete com o
   jogo. Faixa cortada em diagonal, texto condensado em caixa alta e um brilho
   que atravessa uma vez — a mesma gramatica que o proprio jogo usa quando quer
   interromper.

   `pointer-events:none` na camada inteira: o aviso passa por cima do mapa e
   sumiria o arrasto e o clique de pin embaixo dele. */
.radar-anuncios{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; pointer-events:none; z-index:4;
  overflow:hidden; }

.radar-anuncio{ position:relative; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:13px 62px 12px; overflow:hidden;
  /* A inclinacao e' o que tira a cara de "caixa de dialogo". O texto desinclina
     de volta logo abaixo, senao sairia torto e ilegivel. */
  transform:skewX(-11deg);
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
  /* Some nas pontas em vez de terminar numa borda: a placa parece atravessar a
     tela, nao estar apoiada nela. */
  background:
    linear-gradient(90deg, rgba(8,9,13,0) 0%, rgba(8,9,13,.93) 14%,
                            rgba(8,9,13,.93) 86%, rgba(8,9,13,0) 100%);
  animation:radarAnuncioEntra 3.6s cubic-bezier(.16,1,.3,1) forwards; }

/* Desinclina o conteudo. */
.radar-anuncio > b, .radar-anuncio > span{ transform:skewX(11deg); }

.radar-anuncio b{ font-size:34px; font-weight:800; letter-spacing:.1em; line-height:1;
  text-transform:uppercase; color:#fff;
  text-shadow:0 0 22px currentColor, 0 3px 14px rgba(0,0,0,.85); }
.radar-anuncio span{ font-size:11px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.62); padding-left:.3em; }

/* Brilho que atravessa uma vez. E' o detalhe que mais separa "aviso de jogo" de
   "caixa de site" — e passa so' uma vez, para nao virar animacao de banner. */
.radar-anuncio::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translateX(-120%); animation:radarAnuncioBrilho 3.6s ease-out forwards; }

/* A cor do tom entra por `currentColor`: pinta a borda, o halo do texto e a
   faixa de baixo de uma vez so'. */
.radar-anuncio.tom-azul{ color:#5cc8ff; }
.radar-anuncio.tom-ambar{ color:#e8c46a; }
.radar-anuncio.tom-vermelho{ color:#ff466d; }

@keyframes radarAnuncioEntra{
  /* Abre em faixa fina e estoura na largura: e' o gesto que o olho segue. */
  0%   { opacity:0; transform:skewX(-11deg) scaleX(.2) scaleY(.75); }
  7%   { opacity:1; transform:skewX(-11deg) scaleX(1.04) scaleY(1); }
  13%  { transform:skewX(-11deg) scaleX(1) scaleY(1); }
  80%  { opacity:1; transform:skewX(-11deg) scaleX(1) scaleY(1); }
  100% { opacity:0; transform:skewX(-11deg) scaleX(1) scaleY(.86); }
}
@keyframes radarAnuncioBrilho{
  0%, 12% { transform:translateX(-120%); }
  46%     { transform:translateX(120%); }
  100%    { transform:translateX(120%); }
}

/* Quem pediu menos animacao no sistema recebe o aviso sem gesto nenhum. */
@media (prefers-reduced-motion: reduce){
  .radar-anuncio{ animation:radarAnuncioSuave 3.6s linear forwards; }
  .radar-anuncio::after{ display:none; }
  .radar-mira{ animation:none; }
  @keyframes radarAnuncioSuave{
    0%{opacity:0} 8%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
}

/* ---- exportar / importar configuracao ------------------------------------ */
.radar-cfgio{ display:flex; flex-direction:column; gap:7px; }
/* Uma linha SO', qualquer que seja a quantidade de botoes.

   Era `1fr 1fr`, de quando eram dois; com o de restaurar, o terceiro caia
   sozinho numa segunda linha. `auto-flow: column` poe todos lado a lado e
   divide a largura por igual, sem depender de contar quantos sao. */
.radar-cfgio .radar-cfgio-btns{ display:grid; gap:7px;
  grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
.radar-app .radar-cfgio button{ display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:9px; font-size:11.5px; font-weight:700;
  border:1px solid #34343f; color:var(--r-text);
  background:linear-gradient(180deg,#272736 0%,#1c1c26 100%);
  border-bottom-color:#16161e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.35); }
.radar-app .radar-cfgio button:hover{ background:linear-gradient(180deg,#2f2f42 0%,#22222e 100%);
  border-color:var(--r-accent); }
.radar-app .radar-cfgio button:active{ transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }
.radar-cfgio p{ margin:0; font-size:10.5px; line-height:1.45; color:var(--r-dim2); }
.radar-cfgio p.ok{ color:#63e58a; }
.radar-cfgio p.erro{ color:#ff8ba4; }

/* ---- linha de som: interruptor + botao de ouvir --------------------------- */
.pubg-som{ display:flex; align-items:center; gap:6px; }
.pubg-som > label{ flex:1 1 auto; min-width:0; }
.radar-app .pubg-som > button{ flex:0 0 auto; width:34px; min-height:38px; border-radius:8px;
  font-size:11px; color:var(--r-dim); border:1px solid #34343f;
  background:linear-gradient(180deg,#272736 0%,#1c1c26 100%); border-bottom-color:#16161e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.radar-app .pubg-som > button:hover{ color:var(--r-text); border-color:var(--accent,#7965ff); }
.radar-app .pubg-som > button:active{ transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }

/* ---- distancia ate' a safe ------------------------------------------------ */
.radar-safe{ display:flex; align-items:center; gap:8px; padding:10px 15px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.radar-safe svg{ width:15px; height:15px; flex:0 0 15px; color:#5cc8ff; }
.radar-safe b{ font-size:15px; font-weight:800; color:var(--r-text); }
.radar-safe span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--r-dim2); }
/* Fora da zona e' o unico estado que muda decisao — por isso e' o unico que
   muda de cor. Dentro dela o painel e' so' mais um numero. */
.radar-safe.fora{ border-color:rgba(255,70,109,.5); background:rgba(255,70,109,.14); }
.radar-safe.fora svg,
.radar-safe.fora span{ color:#ff466d; }
.radar-safe.fora b{ color:#ff8ba4; }

/* ---- icones de traco na lateral ------------------------------------------
   Herdam `currentColor`, entao ficam apagados como o resto da linha e acendem
   junto quando ela esta ativa — o emoji que estava aqui antes trazia a paleta
   do sistema e destoava do painel inteiro em cinza e roxo. */
.radar-row-sv{ display:grid; place-items:center; color:var(--r-dim); }
.radar-row-sv svg{ width:16px; height:16px; }
.radar-row:hover .radar-row-sv,
.radar-row.radar-active .radar-row-sv{ color:var(--r-text); }
.radar-ico svg{ width:15px; height:15px; vertical-align:-2px; }
.radar-toggles button .radar-ico{ display:inline-grid; place-items:center; }
.radar-addpin{ display:flex; align-items:center; justify-content:center; gap:7px; }

/* ---- link compartilhavel -------------------------------------------------- */
.pubg-share-url{ font-size:10px; line-height:1.4; word-break:break-all; padding:7px 9px;
  border-radius:7px; border:1px solid var(--r-line2); background:rgba(0,0,0,.28);
  color:var(--r-dim); font-family:ui-monospace,Menlo,Consolas,monospace; }

/* ---- somente leitura (segunda conexao) ------------------------------------
   O mod aceita duas conexoes e so' a primeira altera a configuracao. Sem este
   aviso, mexer num controle aqui simplesmente nao faria nada — e nada na tela
   diria o porque. */
.pubg-leitura{ display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px;
  border-radius:9px; border:1px solid rgba(232,196,106,.42); background:rgba(232,196,106,.12);
  font-size:11px; font-weight:600; color:var(--r-text); }
.pubg-leitura svg{ width:15px; height:15px; flex:0 0 15px; color:#e8c46a; }
.pubg-leitura b{ color:#e8c46a; font-weight:800; }

/* ---- compartilhar: link + QR ---------------------------------------------- */
.pubg-compartilhar{ display:flex; flex-direction:column; gap:9px; }

/* Interruptor proprio: esta secao nao e' `entityopts`, e sem isto o checkbox
   aparecia como a caixinha azul padrao do navegador no meio do painel. */
.pubg-compartilhar-toggle{ display:flex; align-items:center; gap:9px; min-height:38px;
  padding:0 11px; border-radius:8px; border:1px solid #34343f; background:#1a1a24;
  font-size:11.5px; font-weight:600; cursor:pointer; }
.pubg-compartilhar-toggle input{ appearance:none; -webkit-appearance:none; position:absolute;
  width:0; height:0; opacity:0; }
.pubg-compartilhar-toggle i{ flex:0 0 auto; position:relative; width:30px; height:17px;
  border-radius:999px; border:1px solid #353a48; background:#20232c;
  transition:background .18s ease, border-color .18s ease; }
.pubg-compartilhar-toggle i::before{ content:""; position:absolute; left:2px; top:2px;
  width:11px; height:11px; border-radius:50%; background:#858b9b;
  box-shadow:0 1px 3px rgba(0,0,0,.45); transition:transform .18s ease, background .18s ease; }
.pubg-compartilhar-toggle input:checked + i{ border-color:var(--accent,#7965ff);
  background:color-mix(in srgb, var(--accent,#7965ff) 62%, #20232c); }
.pubg-compartilhar-toggle input:checked + i::before{ transform:translateX(13px); background:#fff; }

.pubg-compartilhar-abas{ display:flex; gap:6px; }
.pubg-compartilhar-abas button{ flex:1 1 0; padding:7px 8px; border-radius:8px; font-size:11px;
  font-weight:700; border:1px solid var(--r-line2); background:transparent; color:var(--r-dim); }
.pubg-compartilhar-abas button:hover:not(:disabled){ background:rgba(255,255,255,.06); color:var(--r-text); }
.pubg-compartilhar-abas button.ativo{ background:color-mix(in srgb,var(--accent,#7965ff) 24%,transparent);
  border-color:var(--accent,#7965ff); color:var(--r-text); }
.pubg-compartilhar-abas button:disabled{ opacity:.42; cursor:default; }


/* Fundo CLARO e fixo: leitor de QR espera modulos escuros sobre claro, e
   invertido muitos simplesmente nao leem. */
.pubg-compartilhar-qr{ display:flex; align-items:center; gap:11px; padding:9px;
  border-radius:9px; border:1px solid var(--r-line2); background:rgba(0,0,0,.24); }
.pubg-qr{ flex:0 0 auto; border-radius:5px; background:#fff; image-rendering:pixelated; }
.pubg-compartilhar-url{ min-width:0; font-size:9.5px; line-height:1.45; word-break:break-all;
  color:var(--r-dim); font-family:ui-monospace,Menlo,Consolas,monospace; }

.pubg-compartilhar-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.radar-app .pubg-compartilhar-btns button{ padding:8px 6px; border-radius:8px; font-size:10.5px;
  font-weight:700; border:1px solid #34343f; color:var(--r-text);
  background:linear-gradient(180deg,#272736 0%,#1c1c26 100%); border-bottom-color:#16161e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.radar-app .pubg-compartilhar-btns button:hover{ border-color:var(--accent,#7965ff); }
.radar-app .pubg-compartilhar-btns button:active{ transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }

.pubg-compartilhar-nota{ margin:0; font-size:10.5px; line-height:1.45; color:var(--r-dim2); }
.pubg-compartilhar-nota.aviso{ color:#e8c46a; }
.pubg-compartilhar-nota b{ color:var(--r-text); }
.radar-app .radar-menu .control-select input[type=text]{ height:32px; font-size:11px; font-weight:500;
  padding:0 9px; border-radius:7px; border:1px solid var(--r-line2);
  background:rgba(255,255,255,.05); color:var(--r-text); width:100%; }