/*
 ╔══════════════════════════════════════════════════════════════╗
 ║  PAYAT GAMER — TEMA "WORMZILLA"  (V2.1)                      ║
 ║  Camada por cima do V2 "Press Start": só troca cores e       ║
 ║  detalhes. Liga/desliga em Gestor → Logo, Hero & Redes →     ║
 ║  Tema do site (carregado por templates/pwa_head.php).        ║
 ║                                                              ║
 ║  Paleta tirada da logo:                                      ║
 ║    amarelo neon #FFF212 · preto #1A1718 · ameixa #36092E     ║
 ║    orquídea (destaque) #E14BD2 · cinza-dragão #8C8791        ║
 ║  Textura: escamas de serpente · bordas com recortes          ║
 ║  (igual ao banner do canal) · cabeça de dragão ao fundo.     ║
 ╚══════════════════════════════════════════════════════════════╝
*/
:root:root {
  --hot:   #FFF212;
  --hot2:  #FFF776;
  --cyan:  #E14BD2;
  --y:     #FFD000;
  --y2:    #FFE45C;
  --y3:    #5A4600;
  --p:     #9B2A8C;
  --p2:    #D69BD0;
  --p3:    #36092E;
  --red:   #FF3B4E;
  --green: #7CFF4F;
  --on-accent: #141112;
  --on-hot:    #141112;
  --plum:  #36092E;
  --dragon: #8C8791;

  --bg:    #0B090B;
  --bg2:   #110E11;
  --bg3:   #181418;
  --bg4:   #201B20;
  --card:  #161216;
  --card2: #1E191E;
  --card3: #2A232A;
  --text:  #F5F2E8;
  --text2: #B5ADB4;
  --text3: #7D7480;
  --border:      #2F272F;
  --borderp:     #4A2A45;
  --card-border: #2F272F;
  --nav-bg:      rgba(11,9,11,.88);
  --tag-bg:      rgba(255,242,18,.08);
  --title-color: #FFFFFF;
  --glow-hot:    rgba(255,242,18,.09);
  --glow-cyan:   rgba(225,75,210,.10);
  --y-t:     #FFE14A;
  --cyan-t:  #F07BE4;
  --hot-t:   #FFF212;
  --green-t: #9BFF77;
  --p-t:     #E7A6E0;
  --red-t:   #FF6B78;
}
:root:root[data-theme="light"] {
  --bg:    #FFFFFF;
  --bg2:   #FAF8F2;
  --bg3:   #F3F0E6;
  --bg4:   #ECE7DA;
  --card:  #FFFFFF;
  --card2: #FAF8F2;
  --card3: #EFEAE0;
  --text:  #1A1718;
  --text2: #5A5157;
  --text3: #6F666C;
  --border:      #E6E0D3;
  --borderp:     #D9C9D6;
  --card-border: #E6E0D3;
  --nav-bg:      rgba(255,255,255,.92);
  --tag-bg:      rgba(54,9,46,.06);
  --title-color: #1A1718;
  --glow-hot:    rgba(255,242,18,.16);
  --glow-cyan:   rgba(225,75,210,.07);
  --hot:   #FFE800;
  --y-t:     #7A5A00;
  --cyan-t:  #8E1C82;
  --hot-t:   #6E5C00;
  --green-t: #217A0A;
  --p-t:     #7A1F6E;
  --red-t:   #C81E35;
}

/* ── Fundo: escamas de serpente + brilhos amarelo/ameixa ── */
:root body {
  background:
    radial-gradient(900px 520px at 88% -8%, var(--glow-hot), transparent 60%),
    radial-gradient(760px 520px at -12% 28%, var(--glow-cyan), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26' viewBox='0 0 44 26'%3E%3Cg fill='none' stroke='%23FFF212' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M0 13a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3Cpath d='M-11 26a11 11 0 0 1 22 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3Cpath d='M-11 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 88% -8%, var(--glow-hot), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26' viewBox='0 0 44 26'%3E%3Cg fill='none' stroke='%2336092E' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M0 13a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3Cpath d='M-11 26a11 11 0 0 1 22 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3Cpath d='M-11 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0a11 11 0 0 1 22 0'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
  background-attachment: fixed;
}
:root ::selection { background: #FFF212; color: #141112 }

/* ── Texto escuro sobre o amarelo (no V2 era branco sobre coral) ── */
:root .arc-badge.new,
:root .arc-rk-tabs button.on,
:root .badge.nc-cat-badge--fps,
:root .btn-hot,
:root .btn-login,
:root .btn-vote,
:root .btn-y,
:root .cal-event-badge--tournament,
:root .cal-popup-btn,
:root .cal-popup-close:hover,
:root .fab-top,
:root .fp-btn.fp-play,
:root .hs-rail-more-ico,
:root .hv2-ticker,
:root .mc-day.today,
:root .mini-btn,
:root .nav-logo-mark,
:root .nw-views a.act,
:root .pager .act,
:root .pc-btn.pc-play,
:root .pg-brand-mark,
:root .pg-btn,
:root .pg-chip.hot,
:root .pod-live-cta,
:root .prod-modal-btn,
:root .prod-modal-close:hover,
:root .prods-nav-btn:hover,
:root .psi-btn,
:root .psi-promo-badge,
:root .rank-tab.act,
:root .sc:hover .sc-btn-wrap,
:root .sec-tag.r,
:root .shop-tab.act,
:root .sort-btn-participate,
:root .sort-featured-badge,
:root .sort-modal-close:hover,
:root .tk-step.cur i,
:root .vid-modal-close:hover,
:root .zp-play,
:root .hlive-unmute,
:root .pgp-btn:not(.gh),
:root .hs-rail-more-ico { color: var(--on-hot) }
:root .vid-card:hover .vid-play-btn svg, :root .vg-thumb:hover .vg-play svg, :root .vg-hero-img:hover .vg-play svg { fill: var(--on-hot) }
:root .vid-card:hover .vid-play-btn, :root .prods-nav-btn:hover, :root .hs-rail-btn:hover:not(:disabled) { color: var(--on-hot) }
:root .vg-modal-x:hover, :root .vid-modal-close:hover { color: var(--on-hot) }
:root .inf-load { border-top-color: var(--hot) }

/* Botões: amarelo com "sombra dura" ameixa, como o contorno da logo */
:root .btn-y, :root .btn-hot { box-shadow: 4px 4px 0 var(--plum), 4px 4px 0 1px rgba(255,242,18,.35) }
:root .pg-btn:not(.ghost):not(.danger):not(.ok):not(.gold):not(.cyan) { box-shadow: 3px 3px 0 var(--plum) }
:root .btn-login { box-shadow: 3px 3px 0 var(--plum) }
:root[data-theme="light"] .btn-y, :root[data-theme="light"] .btn-hot, :root[data-theme="light"] .btn-login { box-shadow: 4px 4px 0 #1A1718 }
:root .vg-yt { background: #FF0033; color: #fff }

/* Marca "P" (quando não há logo) */
:root .nav-logo-mark, :root .pg-brand-mark { background: #FFF212; color: #141112; box-shadow: 3px 3px 0 var(--plum) }
:root .nav-logo-text span, :root .pg-brand-text span { color: var(--hot-t) }
:root .nav-logo-img, :root .pg-brand img { filter: drop-shadow(0 0 10px rgba(255,242,18,.25)) }

/* Títulos: palavra em destaque em amarelo, sublinhado com recorte */
:root .sec-title span, :root .pg-h1 span { color: var(--hot-t) }
:root[data-theme="light"] .sec-title span, :root[data-theme="light"] .pg-h1 span { color: #1A1718; background: linear-gradient(transparent 62%, #FFF212 62%); padding: 0 .08em }
:root .sec-eyebrow, :root .pg-eb { color: var(--cyan-t) }

/* ── Borda com recortes (como o banner do canal) entre as seções ── */
:root .sec + .sec::after, :root .sec-alt::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 0h160v3h-44l-6 7h-28l-6-7H0z' fill='%23FFF212' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x;
}
:root[data-theme="light"] .sec + .sec::after, :root[data-theme="light"] .sec-alt::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 0h160v3h-44l-6 7h-28l-6-7H0z' fill='%2336092E' fill-opacity='.12'/%3E%3C/svg%3E") }

/* ── Cabeça do dragão (skin do WormZilla) como marca d'água da hero ── */
:root .hero-v2 { position: relative }
:root .hero-v2::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -4%; bottom: 4%; width: min(620px, 55vw); aspect-ratio: var(--wz-dragao-ar, 377 / 256);
  background: var(--wz-dragao, url('/assets/img/wz-dragon.webp')) center / contain no-repeat;   /* contain: nunca estica */
  opacity: .1; transform: rotate(-8deg); filter: grayscale(1) contrast(1.2);
}
:root[data-theme="light"] .hero-v2::after { opacity: .07 }
:root .hero-v2 > * { position: relative; z-index: 1 }
@media (max-width: 760px) { :root .hero-v2::after { width: 90vw; right: -20%; bottom: 30%; opacity: .07 } }

/* Hero: tela do jogo e detalhes que eram coral/ciano fixos */
:root .hv2-screen { background: #161216; border-color: #36092E }
:root .hv2-corner { border-color: #FFF212 }
:root .hv2-screen-top b { color: #FFF212 }
:root .hv2-screen-foot a { color: #F07BE4 }
:root .hlive-unmute { background: #FFF212 }
:root .hv2-glitch::before { color: #E14BD2 }
:root .hv2-glitch::after  { color: #FFF212 }

/* Cards: brilho amarelo no hover, borda ameixa */
:root .vid-card:hover, :root .nl-card:hover, :root .psi-card:hover, :root .vg-card:hover, :root .nw-card:hover, :root .sort-card:hover { border-color: var(--hot); box-shadow: 0 10px 30px -12px rgba(255,242,18,.35) }
:root[data-theme="light"] .vid-card:hover, :root[data-theme="light"] .nl-card:hover, :root[data-theme="light"] .vg-card:hover, :root[data-theme="light"] .nw-card:hover { border-color: #1A1718; box-shadow: 4px 4px 0 #FFF212 }

/* Barra de rolagem */
:root::-webkit-scrollbar-thumb, :root ::-webkit-scrollbar-thumb { background: #FFF212 }
:root { scrollbar-color: #FFF212 transparent }

/* Aviso de instalação do app */
:root .pgp-bar { border-top-color: #FFF212 }
:root .pgp-toast { border-left-color: #E14BD2 }

:root .hv2-quest { background: linear-gradient(90deg, rgba(255,242,18,.12), var(--card) 65%) }
:root[data-theme="light"] .hv2-quest { background: linear-gradient(90deg, rgba(255,242,18,.28), var(--card) 65%); border-color: #1A1718 }
:root .arc-daily { background: linear-gradient(90deg, rgba(225,75,210,.14), var(--card) 70%) }

/* Tela de login (auth.css): texto escuro sobre o amarelo */
:root .au-tab.act, :root .au-btn { color: var(--on-hot) }