/* Modernização da página de políticas - Arkadia */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa6b2;
  --text:#e6eef6;
  --accent:#6ee7b7;
  --accent-2:#7dd3fc;
  --glass: rgba(255,255,255,0.03);
  --max-width:1100px;
  --radius:12px;
  --card-padding:28px;
  --transition:200ms ease;
}

/* Page container */
.policies.container{
  max-width:var(--max-width);
  margin:36px auto;
  padding:28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:var(--radius);
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.section-title{
  margin:0;
  font-size:clamp(20px,2.6vw,28px);
  font-weight:700;
  letter-spacing:-0.4px;
  color:var(--text);
}

.section-subtitle{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.policy-section{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), var(--glass));
  border-radius:10px;
  padding:var(--card-padding);
  margin-bottom:18px;
  border: 1px solid rgba(255,255,255,0.03);
}

.policy-section h2{
  margin:0 0 8px 0;
  font-size:18px;
  color:var(--accent-2);
}

.policy-section p, .policy-section ul{
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

.policy-section ul{
  padding-left:18px;
  margin:8px 0 0 0;
}

.policy-section li{
  margin:8px 0;
}

/* Buttons area if present */
.policy-actions{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.btn-primary, .btn-outline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  transition: all var(--transition);
}

.btn-primary{
  background: linear-gradient(90deg,var(--accent), var(--accent-2));
  color:#022; /* dark text on bright button */
  box-shadow: 0 6px 18px rgba(34,197,94,0.12), inset 0 -2px 0 rgba(0,0,0,0.05);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-outline{
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  background:transparent;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.02);
  transform:translateY(-2px);
}

/* Responsive */
@media (max-width:800px){
  .policies.container{ padding:18px; margin:18px; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:6px; }
  .policy-section{ padding:18px; }
}

/* Improve readability inside main content (nav/footer exists) */
.main-content .policies.container{ margin-top:28px; }

/* Accessibility tweaks */
.policy-section a{ color:var(--accent-2); }
.policy-section strong{ color:var(--text); }

/* Small decorative accent line */
.section-header::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.02));
  margin-left:12px;
}

/* Sobre page styles */
.about-hero{
  text-align:center;
  padding:48px 18px 12px;
}
.about-title{
  font-size:clamp(28px,4vw,44px);
  margin:0 0 6px 0;
  color:var(--text);
}
.about-tagline{
  margin:0 0 12px 0;
  color:var(--muted);
  font-size:16px;
}
.about-intro{
  color:var(--muted);
  max-width:900px;
  margin:0 auto 24px auto;
  font-size:16px;
  line-height:1.65;
}

.about-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.about-main{ flex:1; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-bottom:18px;
}

/* Modernized feature cards */
.feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:20px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 36px rgba(2,6,23,0.5);
  transition: transform 220ms ease, box-shadow 220ms ease;
  backdrop-filter: blur(6px) saturate(120%);
}
.feature-card:hover{ transform:translateY(-8px); box-shadow: 0 28px 60px rgba(2,6,23,0.55); }
.feature-card h3{ margin:8px 0 8px; color:var(--accent-2); }
.feature-card p{ color:var(--muted); margin:0; }
.feature-card h3{ margin:10px 0 6px; color:var(--accent-2); }
.feature-card p{ color:var(--muted); font-size:14px; }
.feature-icon{ width:48px; height:48px; border-radius:10px; background:rgba(125,211,252,0.06); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--accent-2); }

.about-section{ margin-top:18px; padding:18px; background:transparent; }

/* Staff sidebar */
.staff-sidebar{ width:320px; position:sticky; top:120px; align-self:start; }
.staff-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 36px rgba(2,6,23,0.45); }
.staff-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.staff-header i{ font-size:20px; color:var(--accent-2); }
.staff-header h4{ margin:0; font-size:15px; letter-spacing:0.6px; color:var(--text); }
.staff-section{ margin-bottom:8px; }
.staff-toggle{ width:100%; text-align:left; padding:8px 10px; background:transparent; border:none; color:var(--text-secondary); font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.staff-toggle[aria-expanded="true"]{ color:var(--text-primary); }
.staff-list{ list-style:none; margin:6px 0 8px 0; padding-left:12px; color:var(--muted); }
.staff-list li{ padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.02); display:flex; align-items:center; gap:10px; }

/* Avatar placeholder removed (avatars cleaned from template) */

.staff-item{ display:flex; align-items:center; gap:12px; }
.staff-meta{ display:flex; align-items:center; gap:8px; }
.staff-list li:hover{ transform:translateY(-2px); }

/* Role-specific avatar styles removed */

/* Staff name styles (brilhantes) */
.staff-name{
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:0.2px;
  display:inline-block;
  position:relative;
  padding:4px 8px;
  border-radius:6px;
}

.staff-badge{
  font-size:0.65rem;
  font-weight:700;
  padding:3px 6px;
  border-radius:999px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.6px;
}

/* Dev (azul brilhante) */
.staff-name.dev{ color:#7dd3fc; text-shadow: 0 0 14px rgba(125,211,252,0.28); }
.staff-badge.dev{ background: linear-gradient(90deg,#06b6d4,#60a5fa); box-shadow:0 6px 18px rgba(59,130,246,0.12); }

/* GM (dourado) */
.staff-name.gm{ color:#f6d365; text-shadow: 0 0 12px rgba(246,211,101,0.26); }
.staff-badge.gm{ background: linear-gradient(90deg,#d4af37,#f6d365); box-shadow:0 6px 18px rgba(212,175,55,0.12); color:#111; }

/* GS (vermelho) */
.staff-name.gs{ color:#ff6b6b; text-shadow: 0 0 12px rgba(255,107,107,0.22); }
.staff-badge.gs{ background: linear-gradient(90deg,#ef4444,#ff6b6b); box-shadow:0 6px 18px rgba(239,68,68,0.12); }

/* Sparkle/particles effect for names flagged with &g */
.staff-name.sparkle{ position:relative; overflow:visible; }
.staff-name.sparkle{ z-index:1; display:inline-block; position:relative; overflow:hidden; }
.staff-name.sparkle::after{
  content: "";
  position: absolute;
  left: 0; /* cover entire width of the name */
  right: 0;
  top: 50%;
  height: 1.2em;
  pointer-events: none;
  transform: translateY(-50%);
  background-image: url('/static/img/brilho.gif');
  /* tile the gif horizontally across the full width of the name */
  background-repeat: repeat-x;
  background-position: center center;
  /* denser tiles to avoid gaps across wide names */
  background-size: 10px 100%;
  mix-blend-mode: screen;
  opacity: 0.58;
  filter: blur(0.6px) saturate(1.05);
  transition: opacity 240ms ease, transform 240ms ease;
  z-index:0;
  animation: sparkleGifPulse 1800ms ease-in-out infinite;
}

@keyframes sparkleGifPulse{
  0%{ opacity:0.35; transform: translateY(-50%) scale(0.95); }
  40%{ opacity:0.85; transform: translateY(-52%) scale(1.02); }
  80%{ opacity:0.5; transform: translateY(-54%) scale(0.98); }
  100%{ opacity:0.35; transform: translateY(-56%) scale(0.95); }
}

/* Glow animation */
@keyframes glowPulse{
  0%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%{ filter: drop-shadow(0 0 12px rgba(125,211,252,0.06)); }
  100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
.staff-name.dev{ animation: glowPulse 3.4s ease-in-out infinite; }
.staff-name.gm{ animation: glowPulse 3.4s ease-in-out infinite; }

@media (max-width: 900px){
  .about-layout{ flex-direction:column; }
  .staff-sidebar{ width:100%; position:relative; top:0; }
  .feature-grid{ grid-template-columns: 1fr; }
}

/* Page polish: modern hero, reveal animations and badge hover */
.about.container{
  max-width:var(--max-width);
  margin:18px auto 48px auto;
  padding:8px 24px 36px 24px;
}
.about-hero{ padding:56px 18px 18px; }
.about-title{ font-weight:800; letter-spacing:-0.6px; }
.about-tagline{ opacity:0.92; font-size:15px; margin-bottom:8px; }

/* Feature cards entrance */
.feature-card{ opacity:0; transform:translateY(10px) scale(0.995); transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease; }
.feature-card.visible{ opacity:1; transform:translateY(0) scale(1); }

/* Card icon polish */
.feature-icon{ background: linear-gradient(180deg, rgba(125,211,252,0.08), rgba(125,211,252,0.02)); width:54px; height:54px; border-radius:12px; font-size:22px; }

/* Badge microinteraction */
.staff-badge{ transition: transform 180ms ease, box-shadow 180ms ease; }
.staff-badge:hover{ transform:translateY(-3px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,0.25); }

/* Staff card subtle divider */
.staff-card{ border-left: 4px solid rgba(255,255,255,0.02); }

/* Sparkle: use GIF overlay for GMs and Devs so the gif is visible */
.staff-name.gm.sparkle::after,
.staff-name.dev.sparkle::after{
  background-image: url('/static/img/brilho.gif');
  background-size: cover;
  background-repeat: no-repeat;
}

/* GS keeps a subtle tint if sparkle applied (usually not used) */
.staff-name.gs.sparkle::after{
  background-image: radial-gradient(circle at 10% 20%, rgba(255,220,220,0.95) 0px, rgba(255,220,220,0) 6px), radial-gradient(circle at 80% 30%, rgba(255,180,180,0.9) 0px, rgba(255,180,180,0) 5px);
}

/* Make sidebar compact on narrow viewports */
@media (max-width: 1100px){
  .about-layout{ gap:18px; }
  .staff-sidebar{ position:relative; top:0; width:100%; }
}

@media (max-width: 900px){
  .about-layout{ flex-direction:column; }
  .staff-sidebar{ width:100%; position:relative; top:0; }
  .feature-grid{ grid-template-columns: 1fr; }
}