/* DASHBOARD */
.dashboard{
  display:flex;
  min-height:100vh;
  padding:20px;
  gap:30px;
}

/* SIDEBAR */
.sidebar{
  width:220px;
  background: linear-gradient(to bottom, #1e2140, #1a1d35);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  position:sticky;
  top:20px;
  height:fit-content;
}

.sidebar .logo{
  width:100px;
  height:100px;
  object-fit:contain;
  border-radius:50%;
  margin:0 auto 10px;
  box-shadow:0 0 10px rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding:2px;
}

.sidebar-name{
  text-align:center;
  font-weight:700;
  font-size:16px;
  color:#fff;
  margin: 0;
  margin-top: 8px;
  margin-bottom: 0px; /* espaço pequeno e clean */
  letter-spacing:1px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  font-size:15px;
  color:#ccc;
  transition:.2s;
}
.nav a:hover{
  color:#fff;
  background-color: rgba(255,255,255,.05);
  border-radius:6px;
  padding-left:5px;
}
.nav a.active{
  background-color: rgba(255,255,255,.10);
  border-radius:6px;
  color:#fff;
  padding-left:10px;
}

/* FOOTER */
.sidebar-footer{
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:20px;
}
.social-link{
  color:#ccc;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 0;
  transition:.3s;
}
.social-link:hover{
  color:#fff;
  transform: translateX(4px);
}
.sidebar-footer .copyright{
  font-size:11px;
  color:#666;
  margin-top:20px;
  text-align:center;
}

/* MAIN */
.main{
  flex:1;
  padding:20px;
}

/* lang dropdown (estilo simples para já) */
.lang-dropdown{ position:relative; display:flex; justify-content:flex-end; margin-bottom:10px; }
.lang-toggle{
  border:none;
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.lang-options{
  display:none;
  position:absolute;
  top:44px; right:0;
  background: rgba(20,22,40,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  overflow:hidden;
  min-width:160px;
  z-index:50;
}
.lang-option{
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  color:#ddd;
}
.lang-option:hover{ background: rgba(255,255,255,.06); }
.flag-icon{ font-size:16px; }


.twitch-badge{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  position:relative;
  margin-bottom: 20px;
}

/* Remove qualquer bolinha antiga */
.twitch-badge span::before{
  display:none!important;
}

/* A bolinha verdadeira */
.twitch-badge::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#777;
}

/* OFFLINE */
.twitch-badge.offline{
  color:#ff5b5b;
  background:rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.35);
}
.twitch-badge.offline::before{
  background:#ff5b5b;
}

/* ONLINE */
.twitch-badge.online{
  color:#00ff9a;
  background:rgba(0,255,140,.12);
  border:1px solid rgba(0,255,140,.35);
}
.twitch-badge.online::before{
  background:#00ff9a;
  box-shadow:0 0 8px #00ff9a;
}
.profile-header{
  display:flex;
  flex-direction:column;
  align-items:center;
}
@keyframes livePulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,255,154,.8); }
  70%  { box-shadow: 0 0 0 8px rgba(0,255,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,154,0); }
}

.twitch-badge.online::before{
  background:#00ff9a;
  animation: livePulse 1.5s infinite;
}
/* =========================
   AGE CHECK (Overlay)
========================= */

.age-verification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(35px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-verification-box {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(37, 18, 45, 0.95));
  border:2px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  color: white;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  animation: modalFade 0.5s ease;
}

.age-verification-box h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 15px;
}

.age-verification-box p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.age-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.age-buttons button {
  padding: 12px 20px;
  border-radius: 30px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: background 0.3s ease;
}

#enter-site {
  background: white;
  color: #111;
}

#enter-site:hover {
  background: #e3e3e3;
}

#exit-site {
  background: transparent;
  border: 1px solid white;
  color: white;
}

#exit-site:hover {
  background: #333;
}

.age-warning {
  font-size: 11px;
  color: #ccc;
  margin-top: 10px;
}

.age-warning a {
  color: #f3a921;
  text-decoration: underline;
}

@keyframes modalFade {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



/* =========================
   FOOTER em BOX (premium)
   (não mexe no HTML)
========================= */

.site-footer{
  margin-top:70px;
  padding: 20px 22px 28px;          /* sem barra cheia */
  background: transparent;       /* 👈 remove o “corte” */
  border-top: 0;
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 26px;

  border-radius: 22px;

  /* glass igual aos casino cards */
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);

  position: relative;
  overflow: hidden;

  text-align:center;
}

/* glow/highlight igual aos cards */
.footer-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 260px at 50% -80px, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(420px 220px at 12% 18%, rgba(168,85,247,.14), transparent 60%),
    radial-gradient(420px 220px at 88% 18%, rgba(99,102,241,.12), transparent 60%);
  opacity:.8;
  pointer-events:none;
}

.footer-inner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}

.footer-title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(255,255,255,.95);
}

.footer-disclaimer{
  margin: 0 auto;
  max-width: 960px;

  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(232,238,252,.62);
}

.footer-disclaimer a{
  color: #facc15;
  font-weight: 800;
  text-decoration: none;
}
.footer-disclaimer a:hover{
  color:#fde68a;
  text-decoration: underline;
}

/* mobile */
@media (max-width: 640px){
  .site-footer{ padding: 0 14px 22px; }
  .footer-inner{ padding: 18px 16px; border-radius: 18px; }
}
/* =========================================
   MOBILE: MAIN (casino cards) por baixo da sidebar
========================================= */
@media (max-width: 900px){

  /* stack vertical: sidebar em cima, main em baixo */
  .dashboard{
    display:flex;
    flex-direction:column;
    min-height: 100vh;
  }

  /* sidebar deixa de ser “coluna fixa” */
  .sidebar{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;   /* se estava fixed/sticky */
    inset: auto !important;
  }

  /* main ocupa 100% abaixo */
  .main{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;       /* caso no desktop uses margin-left */
  }

  /* para não criar scroll horizontal */
  body{
    overflow-x: hidden;
  }
}