/* Modo "8 de Janeiro" (id caravana): aviso no canto, HUD da partida, avisos, feed, dicas e placar */
[class^=cv-][hidden]{display:none!important}
/* aviso no canto direito, abaixo dos botões de câmera (nunca no meio da tela) */
.cv-queue{--m:#e0533d;position:absolute;top:150px;right:28px;width:292px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 14px 14px 14px;background:linear-gradient(160deg,#121b2cf2,#0b111bf2);border:1px solid #9fb6d82a;border-radius:14px;z-index:3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 34px #0009;color:#e8eef8;overflow:hidden}
.cv-queue::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--m),#ffd166)}
.cv-queue.in{animation:cvSlide .35s cubic-bezier(.2,.9,.3,1.15)}
.cv-queue.out{animation:cvSlide .25s ease-in reverse forwards}
@keyframes cvSlide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.cv-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:radial-gradient(circle at 30% 25%,#e0533d55,#e0533d18);border:1px solid #e0533d66;color:#ffc4b8}
.cv-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv-ico .spark{stroke:#ffd166;stroke-width:2}
.cv-text{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:14px}
.cv-kicker{font-size:8.5px;font-weight:800;letter-spacing:.18em;color:#ff9c8a}
.cv-text>b{font-size:14px;letter-spacing:-.01em;color:#fff}
.cv-text>small{font-size:11px;line-height:1.35;color:#9fb0c8}
.cv-text i{font-style:normal;font-weight:800}
.cv-dots{display:flex;gap:3px;margin:6px 0 2px}
.cv-dots i{flex:1;height:4px;border-radius:2px;background:#ffffff1a;transition:background .3s}
.cv-dots i.on{background:linear-gradient(90deg,#e0533d,#ff8a6a)}
.cv-acts{display:flex;gap:8px;margin-top:8px}
.cv-acts button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border-radius:9px;padding:8px 14px;border:1px solid #ffffff2a;background:#f4f7fc;color:#0b111b;transition:background .15s,transform .1s}
.cv-acts button:hover{background:#fff}.cv-acts button:active{transform:scale(.97)}
.cv-acts button.ghost{background:#ffffff0f;color:#dbe6f7;border-color:#9fb6d833}
.cv-acts button.ghost:hover{background:#ffffff1c}
.cv-x{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;font:400 18px/1 inherit;color:#8193ad;background:none;border:0;border-radius:7px;cursor:pointer}
.cv-x:hover{color:#fff;background:#ffffff12}
@keyframes cvPulse{50%{opacity:.25;transform:scale(.7)}}

body.caravana .location-panel,body.caravana #placesButton,body.caravana .local-badge{display:none}
/* Caravana não tem mapa (nem as bolinhas de onde está cada lado na praça) */
body.caravana .map-panel{display:none!important}
/* na partida, a vida e os avisos descem para baixo do HUD */
body.caravana .vida{top:150px}
.cv-hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 420px));min-width:340px;z-index:3;pointer-events:none;display:grid;gap:6px;text-align:center}
.cv-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.cv-side{display:flex;align-items:center;gap:7px;padding:7px 11px;background:#0b111be8;border:1px solid #9fb6d822;border-radius:9px;font-size:10px;letter-spacing:.08em;backdrop-filter:blur(12px)}
.cv-side[data-team=B]{flex-direction:row-reverse;text-align:right}
.cv-side i{width:9px;height:9px;border-radius:50%;background:var(--team);box-shadow:0 0 10px var(--team)}
.cv-side b{color:var(--team)}.cv-side small{color:#8193ad;font-size:9px}
.cv-side.mine{border-color:var(--team);box-shadow:inset 0 0 0 1px var(--team),0 0 18px color-mix(in srgb,var(--team) 35%,transparent)}
.cv-clock{background:#0b111bf2;border:1px solid #9fb6d833;border-radius:10px;padding:5px 16px 6px;min-width:96px}
.cv-clock small{display:block;font-size:8px;letter-spacing:.2em;color:#8193ad}
.cv-clock b{font:700 24px/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.cv-hud.urgent .cv-clock b{color:#ff5a4a;animation:cvPulse .9s infinite}
.cv-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 12px;background:#0b111be8;border:1px solid #9fb6d822;border-radius:9px;font-size:9px;letter-spacing:.18em;color:#ffb36a;backdrop-filter:blur(12px)}
.cv-meter b{font-size:14px;letter-spacing:0;color:#fff;min-width:42px;text-align:right}
.cv-bar{height:10px;border-radius:5px;background:#ffffff12;overflow:hidden}
.cv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb52e,#ff8a2a 60%,#ff3d2e);border-radius:5px;transition:width .35s ease}
.cv-hud.hot .cv-bar i{box-shadow:0 0 14px #ff5a2e}
.cv-parts{display:flex;justify-content:center;gap:12px;font-size:9px;color:#b4c2d8;letter-spacing:.06em}
.cv-parts em{font-style:normal;color:#ffb36a;font-weight:700}
.cv-you{font-size:10px;color:#b4c2d8}

.cv-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:4;max-width:92%}
.cv-banner strong{display:block;font:italic 900 clamp(30px,6vw,64px)/1 Impact,'Arial Black',sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 4px 0 #0009,0 0 30px #000a;-webkit-text-stroke:1.5px #0006}
.cv-banner span{display:inline-block;margin-top:12px;padding:8px 16px;background:#0b111bdd;border-radius:7px;font-size:13px;color:#dbe6f7}
.cv-banner.atk strong{color:#ffb36a}.cv-banner.def strong{color:#8fb7ff}.cv-banner.go strong{color:#ffe14d}
.cv-banner.pop{animation:cvBanner 4.8s ease forwards}
@keyframes cvBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-3deg)}8%{opacity:1;transform:translate(-50%,-50%) scale(.95) rotate(1deg)}12%{transform:translate(-50%,-50%) scale(1) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}

.cv-feed{position:absolute;right:28px;top:150px;width:300px;display:grid;gap:5px;z-index:3;pointer-events:none}
.cv-feed p{margin:0;padding:7px 10px;background:#0b111bdd;border-left:3px solid var(--team);border-radius:5px;font-size:11px;color:#dbe6f7;animation:cvIn .25s ease;transition:opacity .9s}
.cv-feed p b{color:var(--team)}.cv-feed p em{font-style:normal;color:#ffb36a;font-weight:700}
.cv-feed p.old{opacity:0}
body:not(.caravana) .cv-feed{display:none}
@keyframes cvIn{from{opacity:0;transform:translateX(20px)}}

.cv-tip{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);padding:8px 14px;background:#0b111bdd;border:1px solid #9fb6d822;border-radius:7px;font-size:11px;color:#b4c2d8;z-index:3;pointer-events:none;max-width:90%;text-align:center}

.cv-board{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(520px,92%);padding:22px 24px;background:#0b111bf7;border:1px solid #ff8a2a55;border-radius:12px;z-index:5;box-shadow:0 20px 50px #000b}
.cv-board h2{margin:0 0 6px;font:italic 900 30px Impact,'Arial Black',sans-serif;letter-spacing:.02em}
.cv-board p{margin:0 0 14px;font-size:12px;color:#b4c2d8}
.cv-board table{width:100%;border-collapse:collapse;font-size:12px}
.cv-board td{padding:7px 4px;border-top:1px solid #9fb6d81c}
.cv-board td:last-child{text-align:right;font-weight:700}
.cv-board .cv-mvp td{border-top:0;padding-top:0;font-size:10.5px;color:#8193ad;text-align:left;font-weight:400}
.cv-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.cv-actions button{padding:10px 16px;border-radius:7px;background:#ffffff14;font-size:12px}
.cv-actions button:first-child{background:#ff8a2a;color:#1a0f05;font-weight:700}

.lobby-modes .chip span small{display:block;font-weight:400;opacity:.7;margin-top:2px}
.lobby-modes .mode-note{display:block;margin-top:6px;font-size:10.5px;line-height:1.5;color:#8193ad}

/* PC: coluna do meio, de cima para baixo, sem nada por cima de nada:
   barra de cima (0-76px) · chamada da Caravana · aviso (#toast) · vida do alvo.
   Na partida: HUD logo abaixo da barra de cima (76-206px) · dica · aviso · vida do alvo.
   Os lados ficam livres para o painel de lugar (esq.) e os botões de câmera (dir.). */
@media(pointer:fine){
  .cv-last{display:none}
  .alvo{top:140px}
  .cv-hud{top:80px;width:min(560px,calc(100% - 480px))}
  .cv-tip{bottom:auto;top:214px}
  body.caravana #toast{top:256px}
  body.caravana .alvo{top:304px}
}
/* PC com janela estreita: o aviso fica menor, ainda no canto direito */
@media(pointer:fine) and (max-width:1100px){.cv-queue{width:256px;right:14px}}
/* janela bem estreita no PC */
@media(max-width:800px) and (pointer:fine){
  .cv-hud{top:62px;width:calc(100% - 20px);min-width:0}
  .cv-side{padding:5px 7px;font-size:8px}.cv-side>small{display:none}
  .cv-clock b{font-size:18px}.cv-parts{gap:7px;font-size:8px}
  .cv-tip{top:196px}
  body.caravana #toast{top:236px}body.caravana .alvo{top:280px}
  body:not(.caravana) #toast{top:150px}body:not(.caravana) .alvo{top:200px}
}
/* celular e tablet (dedo): os cantos de baixo são do joystick e dos botões de ação,
   o canto de cima à esquerda é do chat. O HUD fica no topo, a vida do alvo e os avisos logo
   abaixo, e o feed vira uma linha dentro do HUD. */
@media(pointer:coarse){
  .cv-queue{top:calc(62px + var(--st));right:calc(12px + var(--sr));width:min(50vw,230px);gap:9px;padding:10px 10px 10px 12px;border-radius:12px}
  .cv-ico{width:34px;height:34px;border-radius:9px}.cv-ico svg{width:22px;height:22px}
  .cv-kicker{display:none}.cv-text>b{font-size:12.5px}.cv-text>small{font-size:10px}
  .cv-acts{margin-top:6px}.cv-acts button{padding:7px 12px;font-size:11.5px}
  .cv-hud{top:calc(60px + var(--st));width:min(560px,calc(100% - 24px - var(--sl) - var(--sr)));min-width:0;gap:4px}
  .cv-side{padding:5px 7px;font-size:8px;gap:5px}.cv-side>small{display:none}
  .cv-alive{font-size:13px}
  .cv-clock{padding:3px 10px;min-width:70px}.cv-clock b{font-size:17px}
  .cv-meter{padding:5px 10px;gap:8px}.cv-meter b{font-size:12px;min-width:34px}
  .cv-parts{gap:7px;font-size:8px}.cv-you{font-size:9px}
  .cv-feed{display:none}
  .cv-last{display:block;min-height:14px;font-size:10px;color:#dbe6f7;opacity:0;transition:opacity .4s}.cv-last.on{opacity:1}
  .cv-last b{color:var(--team)}.cv-last em{font-style:normal;color:#ffb36a}.cv-last small{color:#8193ad}
  .cv-tip{bottom:auto;top:calc(196px + var(--st));font-size:10px;max-width:calc(100% - 24px)}
  .cv-tip[data-phase=play]{display:none}
  .cv-banner{top:42%}.cv-banner span{font-size:11px}
  .cv-board{max-height:calc(100% - 24px - var(--st) - var(--sb));overflow:auto;padding:16px}
  body.caravana .alvo{top:calc(196px + var(--st))}
  body.caravana #toast{top:calc(234px + var(--st))}
  body.caravana #chatLog{top:calc(272px + var(--st))!important}
}

/* quantos de cada lado ainda estão de pé */
.cv-alive{margin-left:auto;font:800 15px/1 ui-monospace,Menlo,Consolas,monospace;color:#fff;letter-spacing:0}
.cv-side[data-team=B] .cv-alive{margin-left:0;margin-right:auto}
.cv-alive small{font-size:10px;color:#8193ad}
.cv-side.wiped{opacity:.55}.cv-side.wiped .cv-alive{color:#ff5a4a}
.cv-out{color:#ff5a4a;letter-spacing:.08em}
.cv-feed p small{color:#8193ad;font-size:10px}
/* celular deitado: a coluna da direita é dos botões de ação, então a vida do alvo vai para o meio,
   abaixo do HUD na partida e abaixo do aviso de cima na praça */
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html body .alvo{left:50%;right:auto;transform:translateX(-50%);width:min(30vw,200px)}
  html body:not(.caravana) .alvo,html body:has(.cv-queue:not([hidden])) .alvo{top:calc(62px + var(--st))}
  html body.caravana .alvo{top:calc(168px + var(--st))}
}
/* celular em pé, na praça: chamada da Caravana (direita, até ~170px) · vida do alvo · aviso */
@media(pointer:coarse) and (orientation:portrait){
  html body:not(.caravana):has(.cv-queue:not([hidden])) #toast{top:calc(232px + var(--st))}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html body:not(.caravana) #toast{top:calc(116px + var(--st))}
}
/* celular deitado: os botões de ação sobem até perto do topo, então o aviso vira uma faixa baixa
   (texto à esquerda, botão à direita) logo abaixo dos botões de cima */
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .cv-queue{width:min(46vw,340px);padding:8px 8px 8px 12px;align-items:center}
  .cv-ico{display:none}.cv-queue{grid-template-columns:1fr}
  .cv-text{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;padding-right:22px}
  .cv-text>b,.cv-text>small{grid-column:1}
  .cv-dots{display:none}
  .cv-acts{grid-column:2;grid-row:1/span 3;margin:0}
  .cv-x{top:50%;transform:translateY(-50%);right:2px}
}