:root{
  --gold: #d4af37;
  --gold-light: #f5e6a8;
  --white: #ffffff;
  --soft-white: #f8f8f8;

  --bg:
    radial-gradient(circle at top right, rgba(212,175,55,.10), transparent 30%),
    linear-gradient(180deg, #faf8f2 0%, #f2ede0 100%);

  --panel: #ffffff;
  --panel-2: #fcfaf5;
  --text: #2b2418;
  --muted: #6b5e46;
  --border: rgba(212,175,55,.38);
  --shadow: 0 10px 30px rgba(120,96,32,.12);
  --header-bg: rgba(255,255,255,.90);
  --search-bg: #fff8e1;
  --note-bg: #fffaf0;
  --submenu-bg: #fff;
  --hero-bg: linear-gradient(135deg, rgba(255,255,255,.95), rgba(249,244,230,.95));
  --section-bg: rgba(255,255,255,.95);
  --card-bg: linear-gradient(180deg, #fff 0%, #fcf8ee 100%);
  --button-text: #4d3a00;
  --title-color: #8c6a18;
}

body.dark-mode{
  --gold: #d4af37;
  --gold-light: #ffe7a0;
  --white: #16110a;
  --soft-white: #1d160c;

  --bg:
    radial-gradient(circle at top right, rgba(212,175,55,.10), transparent 30%),
    linear-gradient(180deg, #0f0c07 0%, #171109 100%);

  --panel: #18120a;
  --panel-2: #1d160d;
  --text: #f5e6c8;
  --muted: #c7b28a;
  --border: rgba(212,175,55,.22);
  --shadow: 0 10px 30px rgba(0,0,0,.32);
  --header-bg: rgba(20,15,9,.92);
  --search-bg: #21180c;
  --note-bg: #20170d;
  --submenu-bg: #1a130b;
  --hero-bg: linear-gradient(135deg, rgba(28,20,10,.96), rgba(20,14,8,.96));
  --section-bg: rgba(24,18,10,.96);
  --card-bg: linear-gradient(180deg, #1f170d 0%, #171109 100%);
  --button-text: #f5e6c8;
  --title-color: #f0d27b;
}

/* fundo sólido por trás do conteúdo de cada página: cada página (inclusive
   a index.html) define seu próprio "body{background:...}" fixo (não usa
   variável), então esta regra (mais específica, por causa da classe
   ".dark-mode") garante um fundo escuro consistente sem depender do filtro
   de inversão, que só se aplica ao conteúdo dentro de .ravox-main/.ravox-invert. */
body.dark-mode{
  background:#15110a;
}

html{scroll-behavior:smooth}

/* ===== Cursor customizado do site inteiro =====
   Magic Longsword como cursor padrão em qualquer página; em links,
   botões e qualquer coisa clicável (onde o navegador iria mostrar a
   "mãozinha"), usa o Sacred Claw no lugar.
   !important porque cada página do site tem seu próprio <style> com
   vários "cursor:pointer" espalhados (classes específicas, que por
   especificidade venceriam esta regra global se não fosse o !important). */
html, body{
  cursor:url('/cursor-icon.php?id=3278') 16 16, auto !important;
}

a, button, [onclick]{
  cursor:url('/cursor-icon.php?id=55342') 16 16, pointer !important;
}

/* Regras abaixo são escopadas aos componentes da sidebar/toggle (não a
   "body", "h1..h3", ".card" etc de forma genérica), porque cada uma das
   páginas do site já define suas próprias cores e não deve ser sobrescrita
   por este arquivo compartilhado. */

.sidebar{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.submenu a{
  background:var(--submenu-bg);
  color:var(--text);
}

.theme-toggle{
  border:none;
  background:linear-gradient(180deg, #f7e7a8, #d4af37);
  color:#4d3a00;
  border-radius:12px;
  padding:10px 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  transition:.2s;
  box-shadow:0 6px 18px rgba(120,96,32,.10);
  flex-shrink:0;
}

.theme-toggle:hover{
  transform:scale(1.04);
  box-shadow:0 0 10px rgba(212,175,55,.35);
}

/* ===== Sidebar persistente + layout compartilhado entre todas as páginas ===== */
.ravox-shell{
  display:flex;
  align-items:flex-start;
  gap:0;
}

.ravox-main{
  flex:1;
  min-width:0;
  padding:24px;
}

/* inverte apenas o conteúdo próprio de cada página no modo escuro,
   já que cada página tem cores fixas no próprio <style> */
body.dark-mode .ravox-main,
body.dark-mode .ravox-invert{
  filter:invert(1) hue-rotate(180deg) contrast(1.18) saturate(1.15) brightness(1.04);
}

body.dark-mode .ravox-main img,
body.dark-mode .ravox-main video,
body.dark-mode .ravox-main iframe,
body.dark-mode .ravox-invert img,
body.dark-mode .ravox-invert video,
body.dark-mode .ravox-invert iframe{
  filter:invert(1) hue-rotate(180deg);
}

/* caixas que já são propositalmente escuras em qualquer tema (ex: quadrados
   de item, "notice", badges) — detectadas automaticamente por js/contrast-fix.js
   independente do nome da classe usado em cada página — não devem ser
   invertidas de novo no modo escuro */
body.dark-mode .ravox-already-dark{
  filter:invert(1) hue-rotate(180deg);
}

/* imagens/vídeos dentro de uma caixa já-escura: o cancelamento da caixa já
   corrige a cor deles também. Cancelar de novo aqui voltaria a inverter
   (dois cancelamentos se anulam, sobrando o filtro cheio do fundo) */
body.dark-mode .ravox-already-dark img,
body.dark-mode .ravox-already-dark video,
body.dark-mode .ravox-already-dark iframe{
  filter:none;
}

.sidebar{
  width:290px;
  flex:0 0 290px;
  padding:18px;
  overflow-y:auto;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}

.sidebar::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-track{
  background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
  background:var(--gold);
  border-radius:8px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
  background:var(--title-color);
}

/* nas páginas de conteúdo (".ravox-shell") a sidebar fica colada na borda
   esquerda; a altura desconta o cabeçalho (medido via JS em topbar.js e
   guardado em --ravox-header-h) pra sidebar não ficar por baixo dele.
   A home (index.html) mantém seu próprio visual "encaixado" com cantos
   arredondados, definido no seu <style>. */
.ravox-shell .sidebar{
  position:sticky;
  top:var(--ravox-header-h, 0px);
  left:0;
  border-radius:0;
  height:calc(100vh - var(--ravox-header-h, 0px));
  max-height:calc(100vh - var(--ravox-header-h, 0px));
}

.sidebar-title{
  margin:0 0 14px;
  font-size:14px;
  letter-spacing:.12em;
  color:var(--title-color);
  text-transform:uppercase;
}

.menu-group{
  margin-bottom:14px;
}

.menu-button{
  width:100%;
  border:1px solid rgba(212,175,55,.28);
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(90deg, var(--panel), var(--panel-2));
  color:var(--title-color);
  font-weight:700;
  transition:.25s;
}

.menu-button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(212,175,55,.15);
}

.submenu{
  display:none;
  padding-top:10px;
  gap:8px;
  flex-direction:column;
}

.submenu a{
  text-decoration:none;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,.18);
  transition:.22s;
  font-size:14px;
}

.submenu a:hover,
.submenu a.active{
  background:linear-gradient(90deg, #fff9ea, #f6edcf);
  color:#7d5f12;
  border-color:rgba(212,175,55,.45);
  box-shadow:0 8px 18px rgba(212,175,55,.10);
}

body.dark-mode .submenu a:hover,
body.dark-mode .submenu a.active{
  background:linear-gradient(90deg, #2a2010, #241b0d);
  color:var(--title-color);
}

/* ===== Tooltip customizado da sidebar (js/sidebar.js) =====
   Elemento único, fixo, anexado no <body> — por isso as cores são fixas
   (não usam var(--...)) e funcionam iguais em claro/escuro, no mesmo
   estilo dos tooltips de item usados no resto do site. */
.ravox-sidebar-tooltip{
  position:fixed;
  display:flex;
  align-items:center;
  gap:12.5px;
  max-width:325px;
  background:#0f0f0f;
  color:#f0cf63;
  border:1px solid #d4af37;
  border-radius:12.5px;
  padding:11.25px 16.25px;
  font-size:15.6px;
  line-height:1.5;
  font-weight:normal;
  font-family:Arial, Helvetica, sans-serif;
  text-align:left;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(2px) scale(.98);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
  z-index:3000;
}

.ravox-sidebar-tooltip.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.ravox-sidebar-tooltip-icon{
  display:none;
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:7.5px;
  background:#1b1b1b;
  border:1px solid rgba(212,175,55,.35);
  object-fit:contain;
}

.ravox-sidebar-tooltip.has-icon .ravox-sidebar-tooltip-icon{
  display:block;
}

/* botão hambúrguer: fica escondido no desktop, aparece dentro do
   próprio cabeçalho (topbar.php) só no mobile, pra abrir/fechar a sidebar */
.ravox-menu-toggle{
  display:none;
  border:none;
  background:linear-gradient(90deg, #fff8e3, #e9ca72);
  color:#5f4712;
  width:40px;
  height:40px;
  border-radius:12px;
  font-size:18px;
  cursor:pointer;
  box-shadow:var(--shadow);
  flex-shrink:0;
}

@media (max-width:980px){
  .ravox-shell{
    display:block;
    padding:16px;
  }

  .sidebar,
  .ravox-shell .sidebar{
    position:fixed;
    left:-320px;
    top:0;
    height:100vh;
    max-height:100vh;
    width:300px;
    z-index:2000;
    border-radius:0 20px 20px 0;
    transition:left .28s ease;
  }

  .sidebar.open,
  .ravox-shell .sidebar.open{
    left:0;
  }

  .ravox-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* ===== Cabeçalho/topbar compartilhado (topbar.php) ===== */
header{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 24px;
  background:var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 14px rgba(0,0,0,.04);
  transition:transform .28s ease;
}

header.header-hidden{
  transform:translateY(-100%);
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-link{
  display:flex;
  align-items:center;
  text-decoration:none;
  background:transparent;
  padding:0;
  margin:0;
  border:none;
  box-shadow:none;
}

.logo-img{
  width:120px;
  height:auto;
  display:block;
  background:transparent;
  border:none;
  box-shadow:none;
}

.logo-text h1{
  margin:0;
  font-size:26px;
  color:var(--title-color);
}

.logo-text p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:14px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

.server-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--search-bg);
  border:1px solid rgba(212,175,55,.38);
  border-radius:16px;
  padding:8px 12px;
  box-shadow:0 6px 18px rgba(120,96,32,.10);
  flex-shrink:0;
}

.server-link{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.server-logo{
  height:90px;
  width:auto;
  display:block;
  transition:.3s;
}

.server-link:hover .server-logo{
  transform:scale(1.04);
  filter:drop-shadow(0 0 6px gold);
}

.server-time-wrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:155px;
}

.server-time-label{
  font-size:11px;
  color:#9a7a22;
  line-height:1;
  font-weight:bold;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.server-time{
  font-size:16px;
  font-weight:bold;
  color:#7d5f12;
  white-space:nowrap;
}

.server-time-sub{
  font-size:11px;
  color:#8e7440;
  white-space:nowrap;
}

.discord-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:82px;
  border-radius:10px;
  overflow:hidden;
  transition:0.3s;
  flex-shrink:0;
  text-decoration:none;
  background:transparent;
}

.discord-btn img{
  height:130%;
  width:auto;
  display:block;
  transition:0.3s;
}

.discord-btn:hover{
  transform:scale(1.03);
  box-shadow:0 0 12px rgba(212,175,55,0.35);
}

.discord-btn:hover img{
  filter: drop-shadow(0 0 6px gold);
}

#ravox-player-mini{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--search-bg);
  border:1px solid rgba(212,175,55,.38);
  border-radius:16px;
  padding:8px 10px;
  box-shadow:0 6px 18px rgba(120,96,32,.10);
  flex-shrink:0;
  max-width:340px;
  overflow:hidden;
}

.mini-btn{
  border:none;
  background:linear-gradient(180deg, #f7e7a8, #d4af37);
  color:#4d3a00;
  border-radius:8px;
  width:34px;
  height:32px;
  cursor:pointer;
  font-size:14px;
  transition:.2s;
  flex-shrink:0;
}

.mini-btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 8px rgba(212,175,55,.35);
}

.mini-track-wrap{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.mini-track-label{
  font-size:11px;
  color:#9a7a22;
  line-height:1;
  margin-bottom:3px;
  font-weight:bold;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.mini-track-name{
  font-size:13px;
  font-weight:bold;
  color:#7d5f12;
  max-width:120px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#volumeControl{
  width:80px;
  flex-shrink:0;
}

.search-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--search-bg);
  border:2px solid #d4af37;
  border-radius:25px;
  padding:6px 14px;
  min-width:280px;
  box-shadow:0 10px 30px rgba(120,96,32,.12);
  transition:0.3s;
}

.search-box:hover{
  box-shadow:0 0 12px rgba(212,175,55,0.6);
}

.search-box:focus-within{
  box-shadow:0 0 18px rgba(255,215,0,0.9);
  border-color:#ffd700;
}

.search-icon{
  width:38px;
  height:38px;
  object-fit:contain;
  transition:0.3s;
  cursor:pointer;
  flex-shrink:0;
}

.search-icon:hover{
  filter: drop-shadow(0 0 6px gold) drop-shadow(0 0 12px #ffd700);
  transform:scale(1.1);
}

#searchInput{
  border:none;
  outline:none;
  background:transparent;
  width:220px;
  font-size:14px;
  color:var(--text);
}

#searchInput::placeholder{
  color:#bfa14a;
}

#searchResults{
  display:none;
  position:absolute;
  top:58px;
  left:0;
  right:0;
  background:var(--panel);
  border:1px solid rgba(212,175,55,.35);
  border-radius:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  z-index:9999;
  max-height:380px;
  overflow-y:auto;
}

.search-result-item{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid rgba(212,175,55,.15);
  transition:.2s;
}

.search-result-item:last-child{
  border-bottom:none;
}

.search-result-item:hover{
  background:linear-gradient(90deg, #fff9ea, #f6edcf);
}

.search-result-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-result-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
}

.search-result-title{
  display:inline-block;
  font-weight:bold;
  font-size:15px;
  color:#7d5f12;
  margin-bottom:0;
}

.search-result-snippet{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.search-all-results{
  display:block;
  text-align:center;
  padding:12px;
  font-weight:bold;
  color:#8a6d1f;
  text-decoration:none;
  background:#f8f2df;
}

.search-all-results:hover{
  background:#efe3bb;
}

body.dark-mode .search-result-item:hover{
  background:linear-gradient(90deg, #2a2010, #241b0d);
}

body.dark-mode .search-all-results{
  background:var(--panel-2);
  color:var(--title-color);
}

body.dark-mode .search-all-results:hover{
  background:var(--panel);
}

@media (max-width: 1180px){
  header{
    flex-direction:column;
    align-items:stretch;
  }

  .header-actions{
    flex-wrap:wrap;
    justify-content:center;
  }

  .search-box{
    width:100%;
    min-width:unset;
  }

  #searchInput{
    width:100%;
  }
}

@media (max-width: 700px){
  .logo{
    flex-direction:column;
    text-align:center;
  }

  .header-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .server-box{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .server-time-wrap{
    align-items:center;
    text-align:center;
    min-width:auto;
  }

  .discord-btn{
    height:38px;
    align-self:center;
  }

  #ravox-player-mini{
    width:100%;
    max-width:none;
    justify-content:center;
    flex-wrap:wrap;
  }

  .mini-track-name{
    max-width:160px;
  }
}