/* Orbiting Radio Star: dark theme by default, light when the system asks for it */
:root{
  --bg:#070b17; --fg:#e7ebf5; --mut:#97a3bd; --line:#25304c;
  --beam:#ffb454; --on-beam:#161c2b; --sig:#5eead4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f1eee7; --fg:#161c2b; --mut:#566077; --line:#d6d0c1;
    --beam:#b45309; --on-beam:#ffffff; --sig:#0f766e;
  }
}
:root[data-theme="light"]{
  --bg:#f1eee7; --fg:#161c2b; --mut:#566077; --line:#d6d0c1;
  --beam:#b45309; --on-beam:#ffffff; --sig:#0f766e;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
}
a{color:var(--sig)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sig);outline-offset:3px}

h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:600;line-height:1.15;margin:0}
h1{font-size:clamp(2.2rem,7vw,3.6rem);letter-spacing:.2px}
h2{font-size:1.6rem;margin-bottom:16px}
h3{font-size:1.35rem;margin-bottom:6px}
p{margin:0 0 12px}

/* Header */
.top{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px max(16px,calc((100% - 1040px)/2));
  background:var(--bg);border-bottom:1px solid var(--line);
}
.brand{font:600 1.05rem "Iowan Old Style","Palatino Linotype",Georgia,serif;color:var(--fg);text-decoration:none}
.top nav{display:flex;gap:4px}
.top nav a{color:var(--mut);text-decoration:none;padding:10px 10px;border-radius:8px}
.top nav a:hover{color:var(--fg)}

main,.foot{max-width:1040px;margin:0 auto;padding:0 16px}

/* Button */
.btn{
  display:inline-block;background:var(--beam);color:var(--on-beam);
  font-weight:700;text-decoration:none;
  padding:12px 22px;border-radius:10px;min-height:44px;
}
.btn:hover{filter:brightness(1.08)}

/* Herói */
.hero{display:grid;gap:20px;padding:28px 0 36px;align-items:center}
.hero-text p{color:var(--mut);font-size:1.1rem;max-width:34ch;margin:14px 0 20px}
#hero{width:100%;max-width:520px;height:auto;justify-self:center;border-radius:16px;background:#070b17;border:1px solid var(--line)}
@media (min-width:800px){
  .hero{grid-template-columns:1.05fr 1fr;gap:40px;padding:56px 0 64px}
}

/* Jogos: linhas separadas por filetes, uma miniatura por jogo */
.games{padding:8px 0 24px}
.game{
  display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--line);
}
.thumb{width:112px;height:112px;border-radius:12px;background:#070b17;border:1px solid var(--line)}
.game p{color:var(--mut);margin-bottom:6px}
.game .meta{font-size:.92rem;margin-bottom:12px}
@media (min-width:800px){
  .games{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .games h2{grid-column:1/-1}
  .game{grid-template-columns:140px 1fr}
  .thumb{width:140px;height:140px}
}

/* Em breve */
.soon{border-top:1px solid var(--line);padding:18px 0;color:var(--mut)}

/* Nome */
.name{border-top:1px solid var(--line);padding:32px 0 40px;max-width:68ch}
.name p{color:var(--mut)}

/* Rodapé */
.foot{border-top:1px solid var(--line);padding-top:20px;padding-bottom:32px}
.foot .small{color:var(--mut);font-size:.9rem}

/* Páginas de teoria */
.page{max-width:68ch;margin:0 auto;padding:28px 16px 48px}
.page h1{font-size:clamp(1.9rem,6vw,2.8rem);margin-bottom:12px}
.page h2{margin:30px 0 10px}
.lead{color:var(--mut);font-size:1.15rem}
.crumb{font-size:.92rem;color:var(--mut);margin-bottom:10px}
.dia{display:block;width:100%;max-width:420px;height:auto;margin:18px auto}
.dia .ring{fill:none;stroke:var(--mut);stroke-width:1;stroke-dasharray:3 5}
.dia .earth{fill:#2a6fb0}
.dia .sat{fill:var(--beam)}
.dia text{fill:var(--fg);font:13px system-ui,sans-serif}
.dia .note{fill:var(--mut);font-size:11px}
.tbl-wrap{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
th,td{border-top:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:600}
.formula{font:1.05rem "Iowan Old Style",Georgia,serif;padding:10px 14px;border-left:3px solid var(--beam);margin:14px 0}
.play{border-top:1px solid var(--line);margin-top:30px;padding-top:16px}
.refs{color:var(--mut);font-size:.92rem}
.toc{padding-left:20px}
.toc li{margin:8px 0}
.toc .soon-item{color:var(--mut)}