/* ═══════════════════════════════════════════════════════
   Rádio Blast! — themes/theme-outono.css
   Temporada de Outono · out 5–12
   Paleta: âmbar #E8A030 · laranja-queimado #C85020 · bordô #6E1A1A
   ═══════════════════════════════════════════════════════ */


/* ── Fundo: noite de outono quente-escura ─────────── */
body.theme-outono {
  --green:        #E8A030;
  --green-rgb:    232, 160, 48;
  --green-dim:    rgba(232, 160, 48, 0.10);
  --green-border: rgba(232, 160, 48, 0.22);
  --green2:       #C08020;
  background:
    radial-gradient(ellipse at 55% 0%, rgba(160, 80, 20, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0E0804 0%, #080502 100%);
}

body.theme-outono #pageContent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(14, 8, 4, 0) 0%,
    rgba(14, 8, 4, 0.98) 16%,
    rgba(14, 8, 4, 0.98) 84%,
    rgba(14, 8, 4, 0) 100%
  );
  z-index: -1;
}

body.theme-outono.chat-open #pageContent::after {
  background: linear-gradient(to right,
    rgba(14, 8, 4, 0) 0%,
    rgba(14, 8, 4, 0.98) 7%,
    rgba(14, 8, 4, 0.98) 93%,
    rgba(14, 8, 4, 0) 100%
  );
}

/* ── Shapes orgânicos — manchas de cor nas bordas ── */
body.theme-outono .td-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-outono .td-ring {
  position: absolute;
  border: none;
  border-radius: 50%;
}

/* Grande blob âmbar — canto direito, parcialmente fora */
body.theme-outono .td-r1 {
  width: 900px; height: 700px;
  top: -100px; right: -350px;
  background: radial-gradient(ellipse, rgba(200, 80, 20, 0.28) 0%, transparent 65%);
}
/* Grande blob bordô — canto inferior esquerdo */
body.theme-outono .td-r2 {
  width: 750px; height: 850px;
  bottom: -320px; left: -280px;
  background: radial-gradient(ellipse, rgba(160, 50, 10, 0.24) 0%, transparent 65%);
}
/* Blob lateral esquerdo — meio da página */
body.theme-outono .td-r3 {
  width: 580px; height: 580px;
  top: 28%; left: -300px;
  background: radial-gradient(ellipse, rgba(110, 26, 26, 0.20) 0%, transparent 60%);
}
/* Blob lateral direito — terço inferior */
body.theme-outono .td-r4 {
  width: 500px; height: 500px;
  bottom: 8%; right: -200px;
  background: radial-gradient(ellipse, rgba(180, 70, 10, 0.20) 0%, transparent 60%);
}
/* Blob central sutil — não competir com conteúdo */
body.theme-outono .td-r5 {
  width: 400px; height: 320px;
  top: 5%; left: 30%;
  background: radial-gradient(ellipse, rgba(140, 40, 5, 0.08) 0%, transparent 55%);
}

/* ── Folhas de fundo — nas bordas, grandes e visíveis ── */
body.theme-outono .td-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-outono .td-s {
  position: absolute;
  line-height: 1;
  user-select: none;
  animation: outono-folha-bg 22s ease-in-out infinite;
}

body.theme-outono .td-s::before              { content: '🍂'; }
body.theme-outono .td-s:nth-child(even)::before { content: '🍁'; }

/* Folhas grandes nas bordas direita/esquerda, parcialmente cortadas */
body.theme-outono .td-s1 { font-size: 120px; right: -30px; top:  8%; opacity: 0.45; animation-delay:   0s; animation-duration: 24s; }
body.theme-outono .td-s2 { font-size:  80px; right: -20px; top: 38%; opacity: 0.38; animation-delay:  -6s; animation-duration: 20s; }
body.theme-outono .td-s3 { font-size: 100px; right: -25px; top: 65%; opacity: 0.42; animation-delay: -11s; animation-duration: 26s; }
body.theme-outono .td-s4 { font-size:  90px; left:  -22px; top: 20%; opacity: 0.35; animation-delay:  -4s; animation-duration: 22s; }
body.theme-outono .td-s5 { font-size:  70px; left:  -18px; top: 55%; opacity: 0.32; animation-delay: -14s; animation-duration: 19s; }
body.theme-outono .td-s6 { font-size:  60px; left:  -15px; top: 78%; opacity: 0.38; animation-delay:  -8s; animation-duration: 23s; }
/* Folhas menores no interior — mais sutis */
body.theme-outono .td-s7 { font-size:  38px; left:  12%;  top: 14%; opacity: 0.18; animation-delay: -17s; animation-duration: 28s; }
body.theme-outono .td-s8 { font-size:  32px; right: 14%;  top: 82%; opacity: 0.16; animation-delay: -10s; animation-duration: 25s; }

@keyframes outono-folha-bg {
  0%   { transform: translate(  0px,   0px) rotate(  0deg); }
  25%  { transform: translate(  8px, -10px) rotate( -8deg); }
  50%  { transform: translate( -6px,   6px) rotate( 12deg); }
  75%  { transform: translate(  5px,  -5px) rotate( -5deg); }
  100% { transform: translate(  0px,   0px) rotate(  0deg); }
}


/* ── Folhas caindo ao redor do DJBox ─────────────── */
body.theme-outono .djbox-season-deco {
  position: absolute;
  inset: -48px;
  pointer-events: none;
  z-index: 6;
}

body.theme-outono .deco-p {
  position: absolute;
  font-size: 18px;
  line-height: 1;
  animation: outono-queda 9s ease-in-out infinite;
}

body.theme-outono .deco-p::before { content: '🍂'; }

body.theme-outono .deco-p1 { top:  0%;  left: 18%;  font-size: 22px; animation-delay:  0s; animation-duration:  8.0s; }
body.theme-outono .deco-p2 { top:  4%;  right: 12%; font-size: 16px; animation-delay: -2s; animation-duration: 10.0s; }
body.theme-outono .deco-p3 { top: 30%;  left: -2%;  font-size: 14px; animation-delay: -5s; animation-duration:  9.0s; }
body.theme-outono .deco-p4 { bottom: 28%; left: 12%; font-size: 18px; animation-delay: -1s; animation-duration: 11.0s; }
body.theme-outono .deco-p5 { bottom: 48%; right: 2%; font-size: 12px; animation-delay: -7s; animation-duration:  8.5s; }

/* Folha tumbling — deriva e gira enquanto cai */
@keyframes outono-queda {
  0%   { opacity: 0;    transform: translate(  0px, -18px) rotate(-25deg); }
  15%  { opacity: 0.80; transform: translate( 14px,  20px) rotate( 30deg); }
  45%  { opacity: 0.65; transform: translate( -8px,  52px) rotate(-15deg); }
  75%  { opacity: 0.40; transform: translate( 10px,  78px) rotate( 40deg); }
  100% { opacity: 0;    transform: translate(  4px,  95px) rotate( 10deg); }
}


/* ── Shimmer interno — brasa de outono ───────────── */
body.theme-outono .djbox-card:not(.is-playing)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  background: radial-gradient(
    ellipse at 20% 85%,
    rgba(232,120,30,.07) 0%,
    transparent 60%
  );
  animation: outono-brasa 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes outono-brasa {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}


/* ── Header ───────────────────────────────────────── */
body.theme-outono .header--green {
  /* O botão do chat usa o acento deste tema: sobre o header escuro daqui ele
     destaca igual, e o laranja padrão brigaria com esta paleta. */
  --chat-cta: var(--green);
  background: rgba(14, 8, 4, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(232, 160, 48, 0.22);
  box-shadow: none;
}

body.theme-outono .logo img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(700%) hue-rotate(15deg) brightness(108%);
}

/* ── Folha pousada no "!" do logo ─────────────────── */
body.theme-outono .logo {
  position: relative;
}
body.theme-outono .logo::after {
  content: '🍂';
  position: absolute;
  font-size: 16px;
  top: 24px;
  right: -6px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 5px rgba(200, 80, 20, .55));
  animation: outono-logo-folha 7s ease-in-out infinite;
}

@keyframes outono-logo-folha {
  0%, 100% { transform: rotate(-18deg) scale(1.00); opacity: 0.88; }
  40%       { transform: rotate( 12deg) scale(1.12); opacity: 1.00; }
  70%       { transform: rotate( -6deg) scale(0.94); opacity: 0.82; }
}

body.theme-outono .header--green .nav-item       { color: rgba(220, 175, 120, 0.72); }
body.theme-outono .header--green .nav-item:hover { color: #fff; background: rgba(232,160,48,.08); }
body.theme-outono .header--green .nav-item.active { color: #E8A030; background: rgba(232,160,48,.08); }
body.theme-outono .header--green .nav-more-btn   { color: rgba(220,175,120,0.72); }
body.theme-outono .header--green .nav-more-btn:hover,
body.theme-outono .header--green .nav-more-btn.open { color: #fff; background: rgba(232,160,48,.08); }

body.theme-outono .header--green .btn-icon {
  color: rgba(220,175,120,0.80);
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.08); border-left-color: rgba(255,255,255,.05);
  border-right-color: rgba(255,255,255,.03); border-bottom-color: rgba(0,0,0,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.15);
}
body.theme-outono .header--green .btn-icon:hover { color: #fff; background: rgba(255,255,255,.08); }

body.theme-outono .header--green .btn-avatar {
  color: #0E0804;
  background: linear-gradient(180deg, #F5C060 0%, #E8A030 100%);
  border-top-color: rgba(255,255,255,.42); border-left-color: rgba(255,255,255,.20);
  border-right-color: rgba(180,120,20,.25); border-bottom-color: rgba(130,80,10,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(0,0,0,.15);
  filter: none;
}
body.theme-outono .header--green .btn-avatar:hover { filter: brightness(1.08); }

body.theme-outono .header--green .btn-badge {
  background: #E8A030; color: #0E0804; border-color: #0E0804;
}


/* ══════════════════════════════════════════════════
   DJBox Outono
   ══════════════════════════════════════════════════ */

body.theme-outono .djbox-wrap { overflow: visible; }

body.theme-outono .djbox-wrap::before {
  content: '🍂';
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  font-size: 42px;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(232,160,48,.75))
    drop-shadow(0 0 22px rgba(200,80,32,.45));
  animation: outono-gem 4.5s ease-in-out infinite;
}

@keyframes outono-gem {
  0%, 100% { transform: translateY(-50%) rotate(-10deg) scale(1.00); }
  50%       { transform: translateY(-50%) rotate( 10deg) scale(1.10); }
}

body.theme-outono .djbox-card {
  position: relative;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(90, 40, 10, 0.18) 0%, var(--surface) 20%);
  animation: outono-card-glow 5s ease-in-out infinite;
}

@keyframes outono-card-glow {
  0%, 100% { border-color: rgba(232,160,48,.65); box-shadow: 0 0 18px rgba(232,160,48,.24), inset 0 0 14px rgba(232,160,48,.04); }
  50%       { border-color: rgba(232,160,48,.32); box-shadow: 0 0 10px rgba(232,160,48,.12), inset 0 0 10px rgba(232,160,48,.02); }
}

body.theme-outono .djb-header { background: linear-gradient(180deg, rgba(90,35,5,.22) 0%, transparent 100%); }

body.theme-outono .djb-live-badge { background: rgba(232,160,48,.10); border-color: rgba(232,160,48,.28); }
body.theme-outono .live-dot { background: #E8A030; box-shadow: 0 0 6px rgba(232,160,48,.6); }
body.theme-outono .live-lbl { color: #E8A030; }
body.theme-outono .djb-listeners-badge { border-color: rgba(232,160,48,.22); color: #E8A030; }
body.theme-outono .djb-listeners-badge span { color: #E8A030; }

body.theme-outono .dj-av { border-color: #E8A030; box-shadow: 0 0 0 3px rgba(232,160,48,.12); }
body.theme-outono .dj-soc:hover { border-color: rgba(232,160,48,.45); color: #E8A030; }

body.theme-outono .prog-expand  { color: #E8A030; }
body.theme-outono .djb-hist-btn { color: #E8A030; }

body.theme-outono .djb-now  { background: rgba(90,35,5,.12); border-color: rgba(232,160,48,.18); }
body.theme-outono .djb-next { background: rgba(60,10,10,.16); border-color: rgba(110,26,26,.26); }
body.theme-outono .next-lbl  { color: #C87070; }
body.theme-outono .next-time { color: #E8A030; }


/* ══════════════════════════════════════════════════
   Blocos de conteúdo — borda tematizada
   ══════════════════════════════════════════════════ */

/* Carousel de destaques — borda âmbar pulsante */
body.theme-outono .c-owl {
  border: 1px solid rgba(232, 160, 48, .30);
  box-shadow:
    0 0 24px rgba(232, 160, 48, .10),
    0 0  8px rgba(232, 160, 48, .06),
    inset 0 0 20px rgba(90, 35, 5, .08);
  animation: outono-carousel-glow 6s ease-in-out infinite;
}

@keyframes outono-carousel-glow {
  0%, 100% {
    border-color: rgba(232, 160, 48, .30);
    box-shadow: 0 0 24px rgba(232,160,48,.10), 0 0 8px rgba(232,160,48,.06), inset 0 0 20px rgba(90,35,5,.08);
  }
  50% {
    border-color: rgba(232, 160, 48, .55);
    box-shadow: 0 0 36px rgba(232,160,48,.18), 0 0 14px rgba(232,160,48,.10), inset 0 0 28px rgba(90,35,5,.12);
  }
}

/* Bloco de publicidade — toque sutil */
body.theme-outono .ad-slot {
  border-color: rgba(232, 160, 48, .18);
}

/* Seção "Conversas da Comunidade" — acento no título */
body.theme-outono .section-title::before {
  background: #E8A030;
}

/* Cards de tópico da comunidade — hover com toque âmbar */
body.theme-outono .convo-item:hover {
  border-color: rgba(232, 160, 48, .25);
  box-shadow: 0 0 12px rgba(232, 160, 48, .08);
}


/* ── Estado idle (rádio pausada) ─────────────────── */
body.theme-outono .djbox-card:not(.is-playing) {
  border-width: 1px;
  border-color: rgba(232, 160, 48, .28);
  box-shadow: 0 0 10px rgba(232, 160, 48, .10), inset 0 0 8px rgba(232, 160, 48, .02);
  animation: none;
}
body.theme-outono .djbox-wrap:not(:has(.is-playing))::before {
  font-size: 28px;
  opacity: 0.45;
  animation: none;
}
body.theme-outono .djbox-wrap:not(:has(.is-playing)) .deco-p {
  opacity: 0.20;
  animation: none;
}


/* ══════════════════════════════════════════════════
   Elementos interativos — cor do tema
   ══════════════════════════════════════════════════ */

/* Botão play/stop */
body.theme-outono .btn-green.round {
  background: linear-gradient(155deg, #FFCC60 0%, #E8A030 55%, #C07820 100%);
  border-top-color:    rgba(255, 220, 120, .55);
  border-left-color:   rgba(255, 200,  80, .20);
  border-right-color:  rgba(200, 120,  20, .25);
  border-bottom-color: #8A5010;
  box-shadow: inset 0 1px 0 rgba(255,220,120,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 0 14px rgba(232,160,48,.30);
}
body.theme-outono .btn-green.round:hover { filter: brightness(1.10); }

/* Botão pedir música no DJBox */
body.theme-outono .djbox-wrap .btn-orange {
  background: linear-gradient(180deg, #FFCC60 0%, #E8A030 50%, #C07820 100%);
  border-top-color:    rgba(255, 220, 120, .45);
  border-bottom-color: rgba(140, 80, 20, .60);
  box-shadow: 0 0 16px rgba(232, 160, 48, .22);
}

/* Botões Participar */
body.theme-outono .btn-green.inline {
  background: linear-gradient(180deg, #FFCC60 0%, #E8A030 50%, #C07820 100%);
  border-top-color:    rgba(255, 220, 120, .50);
  border-bottom-color: #8A5010;
  color: #0E0804;
}
body.theme-outono .btn-green.inline:hover { filter: brightness(1.10); }

/* Badge Em Alta */
body.theme-outono .com-hot-badge {
  background: rgba(232, 160, 48, .12);
  border-color: rgba(232, 160, 48, .28);
  color: #E8A030;
}

/* Ranking #1 Top Pedidos */
body.theme-outono .t5-rank.gold { color: #E8A030; }

/* Links de seção */
body.theme-outono .sec-hd-lnk { color: #E8A030; }


/* ══════════════════════════════════════════════════
   Responsivo — Outono
   ══════════════════════════════════════════════════ */

@media (max-width: 53.75rem) {
  body.theme-outono #pageContent::after {
    background: none
  }

  /* Hamburger — barras claras sobre header escuro */
  body.theme-outono .header--green .nav-hamburger span {
    background: rgba(220, 175, 120, 0.88);
  }
  body.theme-outono .header--green .nav-hamburger {
    border-color: rgba(232, 160, 48, 0.25);
  }

  /* Bottom bar — fundo e borda do tema */
  body.theme-outono .bottom-bar {
    background: rgba(14, 8, 4, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top-color: rgba(232, 160, 48, 0.22);
  }
  body.theme-outono .bottom-bar-item {
    color: rgba(220, 175, 120, 0.55);
  }
  body.theme-outono .bottom-bar-item:hover,
  body.theme-outono .bottom-bar-item.active {
    color: #E8A030;
  }

  /* Folha lateral do DJBox — sem espaço lateral no mobile */
  body.theme-outono .djbox-wrap::before {
    display: none;
  }

  /* Folhas caindo ao redor do DJBox — inset menor para não causar scroll lateral */
  body.theme-outono .djbox-season-deco { inset: -24px; }

  /* Folhas grandes nas bordas — reduzir proporcionalmente */
  body.theme-outono .td-s1 { font-size: 80px;  right: -20px; }
  body.theme-outono .td-s2 { font-size: 55px;  right: -14px; }
  body.theme-outono .td-s3 { font-size: 68px;  right: -18px; }
  body.theme-outono .td-s4 { font-size: 60px;  left:  -15px; }
  body.theme-outono .td-s5 { font-size: 46px;  left:  -12px; }
  body.theme-outono .td-s6 { font-size: 40px;  left:  -10px; }
  body.theme-outono .td-s7 { font-size: 26px; opacity: 0.14; }
  body.theme-outono .td-s8 { font-size: 22px; opacity: 0.12; }
}

@media (max-width: 35rem) {
  /* Logo — folha menor em telas muito pequenas */
  body.theme-outono .logo::after {
    font-size: 11px;
    top: -7px;
    right: -4px;
  }

  body.theme-outono .djbox-season-deco { inset: -12px; }

  /* Folhas nas bordas — ainda menores em mobile pequeno */
  body.theme-outono .td-s1 { font-size: 62px; }
  body.theme-outono .td-s2 { font-size: 44px; }
  body.theme-outono .td-s3 { font-size: 54px; }
  body.theme-outono .td-s4 { font-size: 46px; }
  body.theme-outono .td-s5 { font-size: 36px; }
  body.theme-outono .td-s6 { font-size: 30px; }
  body.theme-outono .td-s7 { display: none; }
  body.theme-outono .td-s8 { display: none; }
}