@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#070b09; --bg2:#0d1411; --panel:#111a16; --line:rgba(255,255,255,.10);
  --ink:#eef4f0; --mut:#8da093; --dim:#5d6b62;
  --grass:#19e57a; --gold:#f5b73d; --red:#ff5240; --blue:#3aa9ff; --purple:#bd6bff; --teal:#27e0c8; --city:#dfe6e1;
  --disp:'Anton',sans-serif; --sans:'Archivo',system-ui,sans-serif; --mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.disp{font-family:var(--disp);letter-spacing:.01em;text-transform:uppercase}
.mono{font-family:var(--mono)}
.fam-Futebol{color:var(--grass)} .fam-Música{color:var(--purple)} .fam-Fé{color:var(--gold)}
.fam-Olimpismo{color:var(--blue)} .fam-Tragédia{color:var(--red)} .fam-Tecnologia{color:var(--teal)} .fam-Cidade{color:var(--city)}
.bg-Futebol{background:var(--grass)} .bg-Música{background:var(--purple)} .bg-Fé{background:var(--gold)}
.bg-Olimpismo{background:var(--blue)} .bg-Tragédia{background:var(--red)} .bg-Tecnologia{background:var(--teal)} .bg-Cidade{background:var(--city)}

/* shared chrome */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:14px 22px;background:linear-gradient(180deg,rgba(7,11,9,.92),rgba(7,11,9,0));pointer-events:none}
.topbar a,.topbar .nav{pointer-events:auto}
.brand{font-family:var(--disp);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.brand b{color:var(--grass)}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:99px;color:var(--mut);transition:.2s}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav a.on{color:var(--bg);background:var(--grass);font-weight:700}
/* separação: experiências de consumo | ferramentas de curadoria */
.nav .sep{align-self:center;width:1px;height:14px;background:var(--line);margin:0 7px;flex:0 0 auto}
.nav a.tool{color:var(--dim);font-family:var(--mono);letter-spacing:.08em;text-transform:none}
.nav a.tool:hover{color:var(--gold);background:rgba(245,183,61,.08)}
.nav a.tool.on{color:#3a2a00;background:var(--gold)}
.back{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.back:hover{color:var(--grass)}

/* gate */
#gate{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}
#gate .k{font-family:var(--disp);font-size:clamp(48px,12vw,150px);line-height:.86;letter-spacing:.02em}
#gate .k em{color:var(--grass);font-style:normal}
#gate .sub{color:var(--mut);letter-spacing:.32em;text-transform:uppercase;font-size:12px;margin:18px 0 30px}
#gate input{font-family:var(--mono);font-size:18px;letter-spacing:.2em;text-align:center;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:99px;padding:15px 26px;width:min(340px,80vw);outline:none;transition:.2s}
#gate input:focus{border-color:var(--grass);box-shadow:0 0 0 4px rgba(25,229,122,.12)}
#gate .hint{color:var(--dim);font-size:11px;margin-top:16px;letter-spacing:.1em}
.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.fadein{animation:fi .8s both}
@keyframes fi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* base toggle (original vs enriquecida) */
#baseToggle{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;gap:3px;
  background:rgba(13,20,17,.85);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:99px;padding:4px;box-shadow:0 6px 30px rgba(0,0,0,.4)}
#baseToggle .lab{display:flex;align-items:center;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:0 10px 0 12px}
#baseToggle button{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;letter-spacing:.03em;
  color:var(--mut);background:none;border:none;border-radius:99px;padding:7px 15px;cursor:pointer;transition:.2s;font-family:var(--sans)}
#baseToggle button small{font-family:var(--mono);font-size:9px;opacity:.65}
#baseToggle button.on{background:var(--grass);color:#06120c;font-weight:700}
#baseToggle button.on small{opacity:.85}
#baseToggle button:not(.on):hover{color:var(--ink)}
@media(max-width:560px){#baseToggle .lab{display:none}#baseToggle button{padding:7px 12px;font-size:11px}}

/* mobile: topbar em duas linhas sem colidir com o conteúdo */
@media(max-width:720px){
  .topbar{flex-wrap:wrap;gap:8px;row-gap:4px;padding:10px 14px;background:linear-gradient(180deg,rgba(7,11,9,.96),rgba(7,11,9,.6) 70%,rgba(7,11,9,0))}
  /* min-width:0 é o que faz a faixa REALMENTE rolar: sem ele o flex se recusa a
     encolher abaixo do conteúdo e empurra a página inteira para fora da tela */
  .nav{margin-left:0;width:100%;min-width:0;justify-content:flex-start;overflow-x:auto;
       flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav a,.nav .sep{flex:0 0 auto;white-space:nowrap}
  .nav::-webkit-scrollbar{display:none}
  .hud,.hud3{top:96px!important}
  .legend{bottom:84px!important;max-width:92vw!important}
  .ctrl{bottom:128px!important}
}

/* acessibilidade: quem pede menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}