/* ==========================================================================
   Poke United — camada AO VIVO + polish visual  (live-pku.css)
   Widget de status, raid ao vivo, feed de eventos, streamers, skeletons,
   view transitions e micro-animações. Dark, encaixa no tema roxo/azul.
   ========================================================================== */
:root{
  --pku-accent: var(--tg-theme-primary, #f7941e);
  --pku-accent2:var(--tg-theme-secondary,#ffbe18);
  --pku-bg:#0f1020;
  --pku-bg2:#171833;
  --pku-line:rgba(255,255,255,.08);
  --pku-gold:#ffbe18;
  --pku-red:#ef4444;
  --pku-green:#f7941e;
}

/* ---------- 1) Barra "Servidor ao vivo" (fixa no topo do conteúdo) -------- */
#pku-livebar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 16px; margin:0 0 2px;
  background:linear-gradient(90deg, rgba(247,148,30,.14), rgba(255,190,24,.08));
  border-bottom:1px solid var(--pku-line);
  font-family:var(--tg-body-font-family, "Poppins",sans-serif);
  font-size:13px; color:#e8e8f5;
  backdrop-filter:blur(6px);
}
#pku-livebar .pku-chip{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
#pku-livebar .pku-dot{width:9px; height:9px; border-radius:50%; background:var(--pku-green);
  box-shadow:0 0 0 0 rgba(247,148,30,.6); animation:pku-pulse 1.8s infinite;}
#pku-livebar .pku-dot.off{background:#64748b; animation:none;}
#pku-livebar b{color:#fff; font-weight:700;}
#pku-livebar .pku-sep{width:1px; height:16px; background:var(--pku-line);}
#pku-livebar .pku-weather{font-size:15px;}
#pku-livebar .pku-raidflash{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px; border-radius:999px; cursor:pointer; text-decoration:none;
  background:linear-gradient(90deg,#ef4444,#f59e0b); color:#fff; font-weight:700;
  animation:pku-raidglow 1.4s ease-in-out infinite; box-shadow:0 0 16px rgba(239,68,68,.5);
}
@keyframes pku-pulse{0%{box-shadow:0 0 0 0 rgba(247,148,30,.55)}70%{box-shadow:0 0 0 8px rgba(247,148,30,0)}100%{box-shadow:0 0 0 0 rgba(247,148,30,0)}}
@keyframes pku-raidglow{0%,100%{box-shadow:0 0 12px rgba(239,68,68,.45)}50%{box-shadow:0 0 22px rgba(245,158,11,.75)}}

/* clima animado */
.pku-weather.rain{color:#60a5fa} .pku-weather.sun{color:#fbbf24}
.pku-weather.hail{color:#a5f3fc} .pku-weather.sandstorm{color:#d6b370}

/* ---------- 2) Painel de RAID ao vivo (card flutuante) ------------------- */
#pku-raid{
  position:fixed; right:18px; bottom:18px; width:320px; max-width:calc(100vw - 36px);
  background:linear-gradient(160deg,var(--pku-bg2),var(--pku-bg));
  border:1px solid var(--pku-line); border-radius:16px; z-index:99990;
  box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden; color:#eef;
  font-family:var(--tg-body-font-family,"Poppins",sans-serif);
  transform:translateY(140%); opacity:0; transition:transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s;
}
#pku-raid.show{transform:translateY(0); opacity:1;}
#pku-raid .pku-raid-head{display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(90deg,rgba(239,68,68,.25),transparent);}
#pku-raid .pku-raid-head img{width:44px; height:44px; image-rendering:pixelated;}
#pku-raid .pku-raid-title{font-weight:800; font-size:15px; line-height:1.1}
#pku-raid .pku-raid-sub{font-size:11px; opacity:.7}
#pku-raid .pku-hpwrap{padding:0 14px 4px}
#pku-raid .pku-hpbar{height:16px; border-radius:8px; background:#0008; overflow:hidden; border:1px solid var(--pku-line)}
#pku-raid .pku-hpfill{height:100%; width:100%;
  background:linear-gradient(90deg,#ef4444,#f59e0b,#f7941e); background-size:200% 100%;
  transition:width .6s ease; box-shadow:0 0 12px rgba(239,68,68,.5) inset;}
#pku-raid .pku-hptext{font-size:11px; text-align:center; margin:3px 0 8px; opacity:.85}
#pku-raid .pku-rank{list-style:none; margin:0; padding:0 8px 12px; max-height:150px; overflow:auto}
#pku-raid .pku-rank li{display:flex; justify-content:space-between; gap:8px; padding:5px 8px;
  border-radius:8px; font-size:12px}
#pku-raid .pku-rank li:nth-child(odd){background:rgba(255,255,255,.03)}
#pku-raid .pku-rank .pku-pos{color:var(--pku-gold); font-weight:700; width:22px}
#pku-raid .pku-rank .pku-dmg{color:var(--pku-accent2); font-variant-numeric:tabular-nums}
#pku-raid .pku-raid-close{margin-left:auto; cursor:pointer; opacity:.6; font-size:18px; line-height:1}
#pku-raid .pku-raid-close:hover{opacity:1}

/* ---------- 3) Feed de eventos ao vivo (toasts) -------------------------- */
#pku-feed{position:fixed; left:18px; bottom:18px; width:300px; max-width:calc(100vw - 36px);
  display:flex; flex-direction:column; gap:8px; z-index:99989; pointer-events:none}
#pku-feed .pku-toast{pointer-events:auto; display:flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:12px; color:#eef; font-size:13px;
  background:linear-gradient(160deg,var(--pku-bg2),var(--pku-bg));
  border:1px solid var(--pku-line); box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform:translateX(-120%); opacity:0; animation:pku-slidein .5s forwards}
#pku-feed .pku-toast.shiny_catch{border-color:rgba(255,190,24,.5); box-shadow:0 0 18px rgba(255,190,24,.25)}
#pku-feed .pku-toast.boss_kill,#pku-feed .pku-toast.raid_start{border-color:rgba(239,68,68,.5)}
#pku-feed .pku-toast img{width:36px; height:36px; image-rendering:pixelated}
#pku-feed .pku-toast .pku-tt{font-weight:700; font-size:12px}
#pku-feed .pku-toast .pku-tb{font-size:11px; opacity:.8}
@keyframes pku-slidein{to{transform:translateX(0); opacity:1}}
@keyframes pku-slideout{to{transform:translateX(-120%); opacity:0}}

/* ---------- 4) Skeleton loaders (no swap da SPA) ------------------------- */
.pku-skel{position:relative; overflow:hidden; background:#1c1d33; border-radius:10px}
.pku-skel::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.07), transparent);
  transform:translateX(-100%); animation:pku-shimmer 1.2s infinite}
@keyframes pku-shimmer{100%{transform:translateX(100%)}}

/* ---------- 5) View Transitions (crossfade nativo entre páginas) --------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(spa){animation:pku-vt-out .22s ease both}
  ::view-transition-new(spa){animation:pku-vt-in .28s ease both}
}
@keyframes pku-vt-out{to{opacity:0; transform:translateY(-8px)}}
@keyframes pku-vt-in{from{opacity:0; transform:translateY(10px)}}

/* ---------- 6) Micro-animações de entrada (cards ao scroll) -------------- */
.pku-reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1)}
.pku-reveal.in{opacity:1; transform:none}

/* ---------- 7) Streamers parceiros (cards) ------------------------------- */
.pku-streams{display:flex; gap:12px; flex-wrap:wrap}
.pku-stream{display:flex; align-items:center; gap:10px; padding:10px 12px; min-width:200px;
  border-radius:12px; background:var(--pku-bg2); border:1px solid var(--pku-line);
  text-decoration:none; color:#eef; transition:transform .25s, box-shadow .25s}
.pku-stream:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(247,148,30,.3)}
.pku-stream img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.pku-stream .pku-live-badge{font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px;
  background:var(--pku-red); color:#fff; animation:pku-pulse 1.6s infinite}
.pku-stream .pku-plat{font-size:11px; opacity:.65}

/* mobile: raid/feed viram largura menor e empilham */
@media (max-width:600px){
  #pku-raid{width:calc(100vw - 24px); right:12px; bottom:12px}
  #pku-feed{display:none} /* toasts só no desktop p/ não atrapalhar */
}