/* ══════════════════════════════════════════════
   ACESSIBILIDADE — MathGame
   Aumenta tamanho de fonte, nitidez de renderização
   e contraste para pessoas com baixa visão.
   Este arquivo deve ser carregado DEPOIS do CSS
   da página (sobrescreve por ordem de cascata).
══════════════════════════════════════════════ */

/* 1) TAMANHO: escala todo texto em rem do projeto (~+10%) */
html{
  font-size:110% !important;
}

/* 2) NITIDEZ: renderização mais limpa e legível */
html, body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* 3) LEGIBILIDADE: espaçamento mínimo de linha confortável
   (não reduz nada que já seja maior que isso) */
p, li, label, .section-sub, .feature-card p, .sobre-card p{
  line-height:1.7 !important;
}

/* 4) FOCO VISÍVEL: essencial para navegação por teclado/leitor de tela */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #00f5ff !important;
  outline-offset:2px !important;
}

/* 5) CONTRASTE: reforça textos apagados que ficam muito próximos
   da cor do fundo em telas mais escuras/sensíveis */
:root{
  --text-dim:#9fb4dd;
  --text-ghost:#7e93bf;
  --dim:#a9bce0;
  --ghost:#8a9ec2;
  --text-dim:#a9bce0;
}

/* 6) TEMA GLOBAL: claro e escuro com contraste realmente oposto.
   Este arquivo vem depois dos CSS das telas, entao centraliza a troca. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f7fb;
  --bg-main:#f4f7fb;
  --bg-dark:#f4f7fb;
  --bg-sidebar:#ffffff;
  --bg-card:#ffffff;
  --card:#ffffff;
  --surface:#ffffff;
  --cyan:#007c91;
  --neon-cyan:#007c91;
  --pink:#b0007f;
  --neon-pink:#b0007f;
  --purple:#6d18b8;
  --neon-purple:#6d18b8;
  --green:#147d24;
  --neon-green:#147d24;
  --yellow:#836200;
  --text:#0b1220;
  --text-main:#0b1220;
  --text-bright:#0b1220;
  --text-dim:#334155;
  --text-ghost:#52627a;
  --dim:#334155;
  --ghost:#52627a;
  --glow-c:0 0 0 transparent;
  --glow-p:0 0 0 transparent;
  --glow-g:0 0 0 transparent;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050713;
  --bg-main:#050713;
  --bg-dark:#050713;
  --bg-sidebar:#090f22;
  --bg-card:#101a33;
  --card:#101a33;
  --surface:#101a33;
  --cyan:#00e5ff;
  --neon-cyan:#00e5ff;
  --pink:#ff2fc8;
  --neon-pink:#ff2fc8;
  --purple:#b665ff;
  --neon-purple:#b665ff;
  --green:#4dff55;
  --neon-green:#4dff55;
  --yellow:#ffe14d;
  --text:#f7fbff;
  --text-main:#f7fbff;
  --text-bright:#f7fbff;
  --text-dim:#c4d4f4;
  --text-ghost:#98aad0;
  --dim:#c4d4f4;
  --ghost:#98aad0;
  --glow-c:0 0 8px rgba(0,229,255,.9),0 0 22px rgba(0,229,255,.5);
  --glow-p:0 0 8px rgba(255,47,200,.85),0 0 22px rgba(255,47,200,.45);
  --glow-g:0 0 8px rgba(77,255,85,.85),0 0 22px rgba(77,255,85,.42);
}

/* ══════════════════════════════════════════════
   ANIMAÇÕES PREMIUM - Background respirando
══════════════════════════════════════════════ */
@keyframes glow-pulse-1{
  0%, 100%{ opacity:.08; }
  50%{ opacity:.15; }
}

@keyframes glow-pulse-2{
  0%, 100%{ opacity:.10; }
  50%{ opacity:.18; }
}

@keyframes glow-pulse-3{
  0%, 100%{ opacity:.09; }
  50%{ opacity:.16; }
}

@keyframes glow-pulse-4{
  0%, 100%{ opacity:.08; }
  50%{ opacity:.14; }
}

@keyframes grid-drift{
  0%{ transform: translate(0, 0); }
  100%{ transform: translate(60px, 60px); }
}

@keyframes vignette-breathe{
  0%, 100%{ opacity:.25; }
  50%{ opacity:.35; }
}

@keyframes hud-glow-motion{
  0%{
    transform: translate(0, 0) scale(1);
    opacity:.95;
  }
  50%{
    transform: translate(10px, -8px) scale(1.02) rotate(0.25deg);
    opacity:.88;
  }
  100%{
    transform: translate(-6px, 6px) scale(0.99) rotate(-0.2deg);
    opacity:.95;
  }
}

html[data-theme="light"] body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background: radial-gradient(ellipse 180% 140% at 50% 50%, rgba(0,0,0,.15) 0%, transparent 38%);
  animation: vignette-breathe 40s ease-in-out infinite;
}

html[data-theme="dark"] body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background: radial-gradient(ellipse 180% 140% at 50% 50%, rgba(0,0,0,.24) 0%, transparent 45%);
  animation: vignette-breathe 50s ease-in-out infinite;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px);
}

html::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" result="noise"/></filter><rect width="100" height="100" fill="rgba(255,255,255,0.025)" filter="url(%23noise)"/></svg>');
  opacity:.035;
  background-size:200px 200px;
}

html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after{
  text-shadow:none !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .panel-left,
html[data-theme="light"] .panel-right,
html[data-theme="light"] .role-card,
html[data-theme="light"] .question-card,
html[data-theme="light"] .level-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .sobre-card,
html[data-theme="light"] .creator-card,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .user-box,
html[data-theme="light"] .feature-item{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.16) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.10) !important;
  color:#0b1220 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-left,
html[data-theme="dark"] .panel-right,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .sobre-card,
html[data-theme="dark"] .creator-card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .user-box,
html[data-theme="dark"] .feature-item{
  background:linear-gradient(145deg,rgba(16,26,51,.98),rgba(7,12,29,.98)) !important;
  border-color:rgba(0,229,255,.30) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.34),0 0 18px rgba(0,229,255,.10) !important;
  color:#f7fbff !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .brand,
html[data-theme="light"] .sidebar-logo-text,
html[data-theme="light"] .page-title h2,
html[data-theme="light"] .dashboard-title,
html[data-theme="light"] .form-title2,
html[data-theme="light"] .step-title,
html[data-theme="light"] .role-name,
html[data-theme="light"] .section-title,
html[data-theme="light"] .creator-name,
html[data-theme="light"] .stat-val{
  color:#0b1220 !important;
  -webkit-text-stroke:0 !important;
}

html[data-theme="light"] .nav-logo,
html[data-theme="light"] .hero-text h1,
html[data-theme="light"] .hero-text h1 span{
  color:var(--neon-pink) !important;
  text-shadow:var(--glow-p) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-logo,
html[data-theme="dark"] .sidebar-logo-text,
html[data-theme="dark"] .page-title h2,
html[data-theme="dark"] .dashboard-title,
html[data-theme="dark"] .form-title2,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .role-name,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .creator-name,
html[data-theme="dark"] .stat-val{
  color:#00e5ff !important;
  text-shadow:0 0 10px rgba(0,229,255,.75) !important;
  -webkit-text-stroke:0 !important;
}

html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] label,
html[data-theme="light"] td,
html[data-theme="light"] a,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .card-desc,
html[data-theme="light"] .role-desc,
html[data-theme="light"] .question-text,
html[data-theme="light"] .option-btn{
  color:#182235 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] a,
html[data-theme="dark"] .section-sub,
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .role-desc,
html[data-theme="dark"] .question-text,
html[data-theme="dark"] .option-btn{
  color:#dbeafe !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#ffffff !important;
  color:#0b1220 !important;
  border-color:rgba(15,23,42,.28) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#070d1d !important;
  color:#f7fbff !important;
  border-color:rgba(0,229,255,.38) !important;
}

html[data-theme="light"] th{
  color:#005f73 !important;
  border-color:rgba(15,23,42,.20) !important;
}

html[data-theme="dark"] th{
  color:#00e5ff !important;
  border-color:rgba(0,229,255,.30) !important;
}

html[data-theme="light"] td{ border-color:rgba(15,23,42,.12) !important; }
html[data-theme="dark"] td{ border-color:rgba(255,255,255,.08) !important; }

/* placeholders muito apagados (ex.: tela de login do professor) */
::placeholder{
  color:#9fb4dd !important;
  opacity:1 !important;
}

/* 6) Garante leitura mínima confortável: nenhum texto abaixo disso */
small, .hstat-lbl, .nav-links a, .section-tag, .hero-tag{
  font-size:max(0.78rem, 12.5px);
}

/* ══════════════════════════════════════════════
   BOTÃO DE ALTERNÂNCIA CLARO/ESCURO
   (cores fixas — funciona igual em qualquer página)
══════════════════════════════════════════════ */
#mg-a11y-toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid #00f5ff;
  background:#0c0f1c;
  color:#fff;
  font-size:1.4rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:99999;
  box-shadow:0 0 14px rgba(0,245,255,.5);
  transition:transform .2s ease;
}
#mg-a11y-toggle:hover{transform:scale(1.08)}
#mg-a11y-toggle:focus-visible{outline:3px solid #00f5ff;outline-offset:3px}

/* quando o modo claro está ativo, o próprio botão também troca de cara */
html[data-theme="light"] #mg-a11y-toggle{
  background:#080d1d;
  color:#f7fbff;
  border-color:#00e5ff;
  box-shadow:0 0 14px rgba(0,229,255,.45);
}

/* ══════════════════════════════════════════════
   SELO INSTITUCIONAL — PIC / UNIG
══════════════════════════════════════════════ */
#mg-selo-pic{
  position:fixed;
  bottom:18px;
  left:14px;
  z-index:99998;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(8,10,20,.72);
  border:1px solid rgba(0,245,255,.35);
  backdrop-filter:blur(4px);
  color:#cfe3ff;
  font-family:'Share Tech Mono',monospace;
  font-size:.62rem;
  line-height:1.25;
  letter-spacing:.02em;
  max-width:200px;
  pointer-events:none;
  opacity:.88;
}
#mg-selo-pic .mg-selo-icone{font-size:1rem;flex-shrink:0}

html[data-theme="light"] #mg-selo-pic{
  background:rgba(8,13,29,.88);
  border-color:rgba(0,229,255,.4);
  color:#d8e7ff;
}

@media(max-width:680px){
  #mg-selo-pic{font-size:.56rem;max-width:150px;padding:6px 10px;bottom:80px}
  #mg-a11y-toggle{width:46px;height:46px;font-size:1.2rem}
}