/* -------- Tokens de tema -------- */
:root{
  /* cores (claro) */
  --bg:#f5f3ee;
  --text:#111;
  --card:#ffffff;
  --border:#000;
  --note:#eef6ff;
  --link:#0a58ff;
  --accent:#7b61ff;
  --accent-2:#ffe25b;

  /* sombras retrô (pretas no claro) */
  --shadow-color:#000;
  --shadow-off: 6px;
  --shadow-off-sm: 3px;
  --shadow: var(--shadow-off) var(--shadow-off) 0 var(--shadow-color);
  --shadow-sm: var(--shadow-off-sm) var(--shadow-off-sm) 0 var(--shadow-color);

  /* escalas fluidas */
  --fs-body: clamp(.95rem, .9rem + .25vw, 1rem);
  --fs-small: clamp(.72rem, .68rem + .25vw, .85rem);
  --fs-title: clamp(.95rem, .9rem + .5vw, 1.25rem);
  --fs-badge: clamp(.55rem, .5rem + .35vw, .75rem);
}

/* tema escuro (bordas e SOMBRA brancas — sem gap) */
body[data-theme="dark"]{
  --bg:#0f0f12;
  --text:#eaeaea;
  --card:#17171c;
  --border:#fff;
  --note:#0f253d;
  --link:#8fb7ff;
  --accent:#7b61ff;
  --accent-2:#ffe25b;
  --shadow-color:#fff;              /* sombra branca no dark */
}

/* sistema: segue o SO quando não há data-theme */
@media (prefers-color-scheme: dark){
  body:not([data-theme]){
    --bg:#0f0f12;
    --text:#eaeaea;
    --card:#17171c;
    --border:#fff;
    --note:#0f253d;
    --link:#8fb7ff;
    --shadow-color:#fff;
  }
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{height:100%}
body.retro-body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65; font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* -------- AppBar fixa -------- */
.retro-appbar{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  border-bottom:2px solid var(--border);
  box-shadow: var(--shadow-sm);                 /* sombra sólida sem gap */
  padding:10px 14px;
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
}
.retro-appbar__title{display:flex;align-items:center;gap:10px;min-width:0}
.retro-appbar__title h1{
  margin:0; font-family:"Press Start 2P", monospace;
  font-size:clamp(1rem,.8rem + .8vw,1.25rem); letter-spacing:.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.logo-dot{width:14px;height:14px;background:var(--accent);border:2px solid var(--border);box-shadow:var(--shadow-sm);border-radius:4px}
.retro-appbar__badge{
  font-family:"Press Start 2P", monospace; font-size:var(--fs-badge);
  color:#000;                                  /* força contraste no amarelo */
  background:var(--accent-2);
  border:2px solid var(--border); border-radius:6px; padding:6px 8px;
  box-shadow:var(--shadow-sm);
  justify-self:end;
}
.retro-actions{display:flex; align-items:center; gap:10px}

/* Botão de ícone */
.retro-icon-btn{
  border:2px solid var(--border); background:var(--card); color:var(--text);
  border-radius:8px; box-shadow:var(--shadow-sm); padding:8px; cursor:pointer;
}
.retro-icon-btn svg{ fill: currentColor; }
.retro-icon-btn:hover{opacity:.93}

/* Idioma */
.retro-lang{display:flex;align-items:center;gap:8px}
.retro-lang__label{font-family:"Press Start 2P", monospace;font-size:var(--fs-badge)}
.retro-lang__select{
  appearance:none; background:var(--card); color:var(--text);
  border:2px solid var(--border); border-radius:6px; box-shadow:var(--shadow-sm);
  padding:6px 26px 6px 8px; font-size:var(--fs-small);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--border) 50%),
    linear-gradient(135deg,var(--border) 50%,transparent 50%),
    linear-gradient(to right,var(--border),var(--border));
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 8px)  calc(50% - 3px),
    calc(100% - 20px) 50%;
  background-size:6px 6px,6px 6px,1px 16px;
  background-repeat:no-repeat;
}

/* -------- Container & Cards -------- */
.retro-container{width:min(100%,1080px);margin:24px auto;padding:0 12px 60px}
.retro-card{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow);                     /* sombra sólida */
  padding:18px 16px;
  margin:16px 0;
}
.retro-card--hero{border-width:3px;background:linear-gradient(0deg,var(--card),color-mix(in srgb,var(--card),#faf8f1 80%))}
.retro-card__title{margin:0 0 8px;font-family:"Press Start 2P", monospace;font-size:var(--fs-title)}
.retro-lead{margin:10px 0 14px}
.retro-meta{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:var(--fs-small);padding-top:8px;border-top:1.5px dashed var(--border)}

/* -------- Sections -------- */
.retro-section{margin:0 0 8px;font-family:"Press Start 2P", monospace;font-size:var(--fs-title)}
.retro-bullet h4{margin:14px 0 6px;font-weight:700;font-size:var(--fs-title)}
.retro-bullet ul{margin:6px 0 8px 18px;padding:0}
.retro-bullet li{margin:6px 0}
.retro-note{background:var(--note);border:2px solid var(--border);border-radius:8px;padding:10px 12px;box-shadow:var(--shadow-sm)}
a{color:var(--link);text-decoration:underline}

/* -------- CTA & Footer -------- */
.retro-cta{display:flex;gap:12px;margin:24px 0 8px;flex-wrap:wrap}
.retro-btn{background:var(--card);border:2px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm);padding:12px 14px;font-family:"Press Start 2P", monospace;font-size:clamp(.7rem,.65rem + .4vw,.85rem);color:var(--text);text-decoration:none;display:inline-block}
.retro-btn--accent{background:var(--accent);color:#fff;border-color:var(--border)}
.retro-footer{text-align:center;padding:24px 12px 40px}
.retro-footer__bar{
  height:6px;
  background:repeating-linear-gradient(45deg,#ffe25b,#ffe25b 8px,#7b61ff 8px,#7b61ff 16px,#00d3a7 16px,#00d3a7 24px);
  border-top:2px solid var(--border);
  border-bottom:2px solid var(--border);
  box-shadow:0 4px 0 var(--shadow-color) inset;
  margin-bottom:12px;
}

/* -------- Modal -------- */
.retro-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.35);
  display:grid; place-items:center; padding:16px;
}
.retro-modal[hidden]{display:none}
.retro-modal__card{
  width:min(92vw,420px);
  background:var(--card);
  border:2px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow);
  padding:16px;
}
.retro-form{display:grid;gap:12px;margin-top:8px}
.retro-radio{display:flex;align-items:center;gap:8px;font-size:var(--fs-body)}
.retro-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* -------- Responsivo -------- */
@media (max-width:900px){
  .retro-appbar{grid-template-columns:1fr auto;grid-auto-rows:minmax(0,auto)}
  .retro-appbar__badge{grid-column:1/-1;justify-self:start}
}
@media (max-width:700px){
  .retro-btn{width:100%;text-align:center}
  .logo-dot{box-shadow: var(--shadow-sm);}
}
@media (max-width:480px){
  .retro-appbar__title h1{white-space:normal;line-height:1.2}
}

/* ===================== ANIMAÇÕES RETRÔ ===================== */

/* CRT overlay (scanlines + leve flicker). Respeita temas. */
.crt-overlay{
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  opacity: .06; mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.6), rgba(0,0,0,.6) 1px,
      transparent 1px, transparent 3px
    );
  animation: crt-flicker 4.5s ease-in-out infinite;
}
@keyframes crt-flicker{
  0%, 100% { opacity: .05; }
  40% { opacity: .07; }
  55% { opacity: .045; }
  70% { opacity: .065; }
}
body[data-theme="dark"] .crt-overlay{
  opacity: .09;
}

/* Hero card: brilho de topo “tubo” + sweep suave */
.retro-card--hero{
  position: relative;
  overflow: hidden;
}
.retro-card--hero::before{
  content: "";
  position: absolute; inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 70%);
  pointer-events: none;
}
.retro-card--hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 35%, transparent 50%);
  transform: translateX(-120%);
  animation: sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep{
  0%{ transform: translateX(-130%) }
  55%{ transform: translateX(140%) }
  100%{ transform: translateX(140%) }
}

/* Appbar: sombra “respira” de leve (1px) — super sutil */
.retro-appbar{
  will-change: box-shadow;
  animation: shadow-breathe 6s ease-in-out infinite;
}
@keyframes shadow-breathe{
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%      { box-shadow: calc(var(--shadow-off-sm) + 1px) calc(var(--shadow-off-sm) + 1px) 0 var(--shadow-color); }
}

/* Badge com brilho “pixel glow” */
.retro-appbar__badge{
  position: relative;
}
.retro-appbar__badge::after{
  content:"";
  position:absolute; inset: 3px;
  border-radius: 4px;
  box-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 18px rgba(255,255,255,.0);
  animation: badge-glow 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes badge-glow{
  0%, 100%{ box-shadow: 0 0 0 rgba(255,255,255,0), 0 0 18px rgba(255,255,255,.06) }
  50%     { box-shadow: 0 0 0 rgba(255,255,255,0), 0 0 24px rgba(255,255,255,.14) }
}

/* Cards: “pop-in” retrô ao entrar na tela (scroll reveal) */
.retro-card{
  transform: translateY(6px) scale(.995);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.16,.84,.44,1),
    opacity   .45s ease-out,
    box-shadow .4s ease-out;
}
.retro-card.anim-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Títulos com máquina de escrever (opcional via data-typewriter) */
.retro-card__title[data-typewriter]{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.retro-card__title[data-typewriter].typing{
  mask: linear-gradient(to right, #000 calc(var(--type, 0) * 1ch), transparent calc(var(--type, 0) * 1ch));
  -webkit-mask: linear-gradient(to right, #000 calc(var(--type, 0) * 1ch), transparent calc(var(--type, 0) * 1ch));
}
.retro-card__title[data-typewriter]::after{
  content: "_";
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: "Press Start 2P", monospace;
  opacity: 0;
}
.retro-card__title[data-typewriter].typing::after{
  opacity: 1; animation: caret 1s steps(1,end) infinite;
}
@keyframes caret{ 0%, 49%{opacity:0} 50%, 100%{opacity:1} }

/* Botões ganham “pixel-press” */
.retro-btn:active{ transform: translate(1px,1px); box-shadow: calc(var(--shadow-off-sm) - 1px) calc(var(--shadow-off-sm) - 1px) 0 var(--shadow-color); }

/* Modal: entra com “zoom de cartucho” */
.retro-modal[hidden] .retro-modal__card{ transform: scale(.96); opacity: 0; }
.retro-modal .retro-modal__card{
  transform: scale(1); opacity: 1;
  transition: transform .18s cubic-bezier(.16,.84,.44,1), opacity .18s ease-out;
}

/* Acessibilidade: reduz movimento se o usuário pedir */
@media (prefers-reduced-motion: reduce){
  .crt-overlay, .retro-appbar, .retro-card, .retro-card__title[data-typewriter].typing,
  .retro-card--hero::after { animation: none !important; transition: none !important; }
}