/*
 ╔══════════════════════════════════════════════════════════════╗
 ║  PAYAT GAMER — TEMA "ARENA WORMZILLA"  (V2.1)                ║
 ║  O mais ilustrativo: o site vira a arena do jogo.            ║
 ║  Carrega DEPOIS do tema-wormzilla.css (usa a mesma paleta)   ║
 ║  e do assets/js/tema-arena.js (minhocas e bolinhas ao fundo, ║
 ║  radar-relógio na hero).                                     ║
 ║                                                              ║
 ║  Linguagem visual do jogo:                                   ║
 ║   - fundo de arena escuro com bolinhas de comida brilhando;  ║
 ║   - "tubos neon" com linha branca no meio (corpo da minhoca) ║
 ║     em bordas, divisórias e barras;                          ║
 ║   - cantos arredondados (o jogo é todo redondo);             ║
 ║   - botões como os ícones de poder (2x, 5x, ímã);            ║
 ║   - painéis translúcidos como o HUD (placar, radar).         ║
 ╚══════════════════════════════════════════════════════════════╝
*/
:root:root {
  --bg: #07080F; --bg2: #0B0C16; --bg3: #10121F; --bg4: #161828;
  --card: rgba(16,17,30,.86); --card2: rgba(22,24,40,.9); --card3: #22253C;
  --border: #262A45; --card-border: #262A45; --borderp: #3A2F58;
  --nav-bg: rgba(7,8,15,.78);
  --glow-hot: rgba(255,242,18,.07); --glow-cyan: rgba(70,240,255,.08);
  --cyan: #46F0FF; --cyan-t: #7FF6FF;
  --worm-y: #FFF212; --worm-c: #46F0FF; --worm-r: #E0254B; --worm-p: #9B4DFF; --worm-o: #FF8A3D;
  --rad: 16px;
}
:root:root[data-theme="light"] {
  --bg: #EEF0F7; --bg2: #E6E9F3; --bg3: #DDE1EE; --bg4: #D3D8E8;
  --card: rgba(255,255,255,.9); --card2: rgba(248,249,253,.92); --card3: #E9ECF6;
  --border: #D0D5E6; --card-border: #D0D5E6;
  --nav-bg: rgba(255,255,255,.85);
  --cyan: #0FA3B8; --cyan-t: #0A6F7E;
}

/* ── Arena ao fundo ── */
:root body { background: radial-gradient(1200px 700px at 50% -10%, rgba(255,242,18,.06), transparent 60%), var(--bg); background-attachment: fixed }
:root body::before { display: none }            /* sem scanlines: a arena já é o fundo */
#arena-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .55 }
:root[data-theme="light"] #arena-bg { opacity: .3 }
/* textura hexagonal da arena, bem leve */
:root body::after {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33M0 16l-28-16M56 16l28-16' fill='none' stroke='%23FFFFFF' stroke-opacity='.035'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { filter: invert(1) }
:root .sec, :root .sec-alt { background: transparent }
:root .sec-alt::before { opacity: .35 }

/* ── Tudo redondo (o jogo não tem cantos) ── */
:root .vid-card, :root .nl-card, :root .psi-card, :root .vg-card, :root .nw-card, :root .sort-card, :root .rv, :root .sc,
:root .pg-box, :root .shop-card, :root .arc-card, :root .cal-card, :root .mini-cal, :root .rank-card, :root .poll-box,
:root .player-wrap, :root .news-card, :root .nc-sm, :root .hv2-quest, :root .hv2-screen, :root .wz-feat, :root .arc-daily,
:root .vg-hero, :root .nw-hero, :root .vg-live, :root .vg-prox-card, :root .vg-cta, :root .hs-rail-more, :root .pg-empty {
  clip-path: none !important; border-radius: var(--rad); overflow: hidden;
}
:root .vg-thumb, :root .nw-thumb { border-radius: 0 }

/* ── Cards como minhocas: borda-tubo colorida, cada um de uma "skin" ── */
:root .vid-card, :root .nl-card, :root .vg-card, :root .nw-card, :root .psi-card, :root .sort-card, :root .rv, :root .sc {
  border: 2px solid color-mix(in srgb, var(--skin, var(--worm-y)) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 18px -6px var(--skin, var(--worm-y));
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
:root .hs-rail > :nth-child(5n+1), :root .vg-grid > :nth-child(5n+1), :root .nw-grid > :nth-child(5n+1), :root .shop-grid > :nth-child(5n+1) { --skin: var(--worm-y) }
:root .hs-rail > :nth-child(5n+2), :root .vg-grid > :nth-child(5n+2), :root .nw-grid > :nth-child(5n+2), :root .shop-grid > :nth-child(5n+2) { --skin: var(--worm-c) }
:root .hs-rail > :nth-child(5n+3), :root .vg-grid > :nth-child(5n+3), :root .nw-grid > :nth-child(5n+3), :root .shop-grid > :nth-child(5n+3) { --skin: var(--worm-p) }
:root .hs-rail > :nth-child(5n+4), :root .vg-grid > :nth-child(5n+4), :root .nw-grid > :nth-child(5n+4), :root .shop-grid > :nth-child(5n+4) { --skin: var(--worm-r) }
:root .hs-rail > :nth-child(5n+5), :root .vg-grid > :nth-child(5n+5), :root .nw-grid > :nth-child(5n+5), :root .shop-grid > :nth-child(5n+5) { --skin: var(--worm-o) }
:root .vid-card:hover, :root .nl-card:hover, :root .vg-card:hover, :root .nw-card:hover, :root .psi-card:hover, :root .sort-card:hover, :root .rv:hover, :root .sc:hover {
  border-color: var(--skin, var(--worm-y)); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 28px -2px var(--skin, var(--worm-y)); transform: translateY(-4px);
}
:root .hs-rail-more { border: 2px dashed color-mix(in srgb, var(--worm-y) 45%, transparent) }

/* ── Botões = ícones de poder do jogo (pílula brilhante) ── */
:root .btn-y, :root .btn-hot, :root .pg-btn:not(.ghost):not(.danger):not(.ok), :root .mini-btn, :root .psi-btn, :root .wz-btn:not(.gh),
:root .btn-login, :root .sort-btn-participate, :root .cal-popup-btn, :root .prod-modal-btn, :root .zp-play, :root .fab-top {
  clip-path: none !important; border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 10%, #FFFBB0 0%, #FFF212 38%, #D8C400 100%);
  box-shadow: 0 0 0 2px #6B5F00, 0 0 16px rgba(255,242,18,.45), inset 0 -3px 0 rgba(0,0,0,.18) !important;
  color: #141112;
}
:root .btn-y:hover, :root .pg-btn:not(.ghost):hover, :root .mini-btn:hover, :root .psi-btn:hover, :root .wz-btn:hover { filter: brightness(1.06); box-shadow: 0 0 0 2px #6B5F00, 0 0 26px rgba(255,242,18,.7), inset 0 -3px 0 rgba(0,0,0,.18) !important }
:root .pg-btn.ghost, :root .mini-btn-ghost, :root .wz-btn.gh, :root .psi-btn-info, :root .btn-ghost-nav, :root .hv2-cta .btn-ghost, :root .sort-btn-details {
  clip-path: none !important; border-radius: 999px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--worm-c) 70%, transparent), 0 0 12px -4px var(--worm-c) !important;
}
:root .prods-nav-btn, :root .hs-rail-btn { border-radius: 50%; box-shadow: 0 0 0 2px var(--border), 0 0 12px -4px var(--worm-y) }
:root .pager a, :root .pager span { border-radius: 50% }
:root .nw-views, :root .nw-views a { border-radius: 999px }
:root .nw-cats a, :root .pg-chip, :root .sec-tag, :root .vg-badge, :root .vg-dur, :root .art-cat, :root .wz-tag { border-radius: 999px }
:root .pg-input, :root .pg-select, :root .shop-search .pg-input { border-radius: 999px 0 0 999px }
:root .pg-select, :root .pg-textarea { border-radius: 14px }
:root .shop-search button { border-radius: 0 999px 999px 0 }

/* ── Topo = HUD, com a "minhoca" amarela embaixo (tubo com linha branca) ── */
:root .nav-v2, :root .pg-top, :root .mn {
  border-bottom: 0;
  box-shadow: 0 1px 0 #6B5F00, 0 5px 0 #FFF212, 0 6px 0 #6B5F00, 0 8px 18px rgba(255,242,18,.35);
  background-image: linear-gradient(0deg, rgba(255,255,255,.9) 0 1px, transparent 1px);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 calc(100% + 3px);
}

/* ── Títulos de seção como o placar do jogo ── */
:root .sec-eyebrow, :root .pg-eb {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid var(--border);
  color: var(--worm-y);
}
:root[data-theme="light"] .sec-eyebrow, :root[data-theme="light"] .pg-eb { background: rgba(255,255,255,.8); color: #5E5400 }
:root .sec-eyebrow::before, :root .pg-eb::before {
  content: '2x'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9px; letter-spacing: 0; color: #fff;
  background: radial-gradient(circle at 35% 30%, #F07BE4, #9B1C8C); box-shadow: 0 0 0 2px #FFD3F8, 0 0 10px rgba(225,75,210,.7);
}
:root .sec-title { text-shadow: 0 0 24px rgba(255,242,18,.18) }
:root .sec-title span, :root .pg-h1 span { color: var(--worm-y); text-shadow: 0 0 18px rgba(255,242,18,.55) }
:root[data-theme="light"] .sec-title span, :root[data-theme="light"] .pg-h1 span { color: #1A1718; text-shadow: none }

/* ── Divisória entre seções: uma minhoca com cabeça de dragão atravessando ── */
:root .sec + .sec::after, :root .sec-alt::after {
  content: ''; position: absolute; top: -6px; left: 0; height: 12px; width: min(420px, 60vw); opacity: 1; pointer-events: none;
  border-radius: 999px; filter: none;
  background: linear-gradient(90deg, transparent, var(--worm-y) 30%);
  box-shadow: 0 0 12px rgba(255,242,18,.5);
  animation: arenaRasteja 26s linear infinite;
}
:root .sec + .sec::before, :root .sec-alt::before { }
@keyframes arenaRasteja { from { transform: translateX(-60vw) } to { transform: translateX(110vw) } }
:root .sec:nth-of-type(3n+2)::after { animation-duration: 34s; animation-delay: -12s; background: linear-gradient(90deg, transparent, var(--worm-c) 30%); box-shadow: 0 0 12px rgba(70,240,255,.5) }
:root .sec:nth-of-type(3n)::after   { animation-duration: 30s; animation-delay: -20s; background: linear-gradient(90deg, transparent, var(--worm-p) 30%); box-shadow: 0 0 12px rgba(155,77,255,.5) }
:root main, :root .hero-v2, :root body { overflow-x: clip }

/* ── Hero ── */
:root .hero-v2::after { opacity: .16; filter: drop-shadow(0 0 24px rgba(255,242,18,.25)) }
:root .hv2-screen { border: 2px solid var(--worm-y); box-shadow: 0 0 30px -6px rgba(255,242,18,.5) }
:root .hv2-ticker { border-radius: 999px; transform: none; margin-inline: 0; box-shadow: 0 0 0 2px #6B5F00, 0 0 18px rgba(255,242,18,.4) }
.arena-radar { position: absolute; z-index: 2; top: 92px; right: clamp(12px, 3vw, 40px); width: 118px; pointer-events: none;
  padding: 8px; border-radius: 16px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(4px) }
.arena-radar svg { display: block; width: 100%; height: auto }
.arena-radar text { font: 700 7px var(--font-mono); fill: #EDEBFF; text-anchor: middle; dominant-baseline: middle }
.arena-radar line { stroke: rgba(255,255,255,.7); stroke-width: .8 }
.arena-radar .rd-bg { fill: #6E6A74; opacity: .55 }
.arena-radar .rd-ring { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1 }
.arena-radar .rd-sweep { fill: rgba(255,242,18,.28); transform-origin: 50px 50px; animation: rdGira 3.6s linear infinite }
.arena-radar .rd-me { fill: #fff; filter: drop-shadow(0 0 2px #fff) }
@keyframes rdGira { to { transform: rotate(360deg) } }
.arena-radar-hud { display: flex; justify-content: space-around; margin-top: 4px; font: 700 10px var(--font-mono); color: #EDEBFF; letter-spacing: .06em }
.arena-radar-hud b { display: block; text-align: center; font-size: 13px; color: var(--worm-y) }
@media (max-width: 1100px) { .arena-radar { display: none } }

/* ── Ranking como o placar "Brazil (xxx online)" do jogo ── */
:root .rank-card { background: rgba(0,0,0,.42); border: 1px solid var(--border); backdrop-filter: blur(3px) }
:root[data-theme="light"] .rank-card { background: rgba(255,255,255,.85) }
:root .rank-card:nth-child(1) .rank-pos, :root .rank-pos.gold { color: var(--worm-y); text-shadow: 0 0 10px rgba(255,242,18,.7) }

/* ── Barras de progresso = corpo de minhoca ── */
:root .player-prog-fill, :root .fp-bar-fill, :root .vid-progress-fill, :root .zp-mini-bar i, :root .rv-bar-fill {
  border-radius: 999px; background: var(--worm-y) !important;
  box-shadow: inset 0 0 0 1px #6B5F00, 0 0 10px rgba(255,242,18,.5);
  background-image: linear-gradient(transparent 42%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.9) 58%, transparent 58%) !important;
}
:root .rv-bar-row:nth-child(2n) .rv-bar-fill { background-color: var(--worm-c) !important; box-shadow: inset 0 0 0 1px #0A6C80, 0 0 10px rgba(70,240,255,.5) }

/* ── Rolagem ── */
:root::-webkit-scrollbar-thumb, :root ::-webkit-scrollbar-thumb { border-radius: 999px; background: #FFF212; box-shadow: inset 0 0 0 3px #6B5F00 }

@media (prefers-reduced-motion: reduce) {
  :root .sec + .sec::after, :root .sec-alt::after, .arena-radar .rd-sweep { animation: none }
}

/* Botões redondos do topo (compartilhar / tema) */
:root .nav-share, :root .pg-share, :root .theme-toggle { border-radius: 50% }