/* relax.css — a paleta é a da tela /mation. Fonte do sistema, de propósito: zero
   pedido externo, página inteira em menos de 1 s. */
:root{
  --bg:#0e1f3f; --bg-2:#0b1934; --ink:#eef3fb; --ink-2:#c4d2ea; --muted:#8195b8; --faint:#6f83a6;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --panel:rgba(14,31,63,.78);
  --cyan:#57bff0; --amber:#f0b24b;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background:radial-gradient(1200px 800px at 50% -20%,#16305f 0%,rgba(22,48,95,0) 60%),
             linear-gradient(180deg,var(--bg),var(--bg-2));background-attachment:fixed}
a{color:var(--cyan)}
#ceu{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vinheta{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%,transparent 52%,rgba(6,16,36,.55) 100%)}
.pagina{position:relative;z-index:2}

/* ── cabeçalho comum ── */
.topo{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topo .marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.topo .marca i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.topo nav{display:flex;gap:16px;flex-wrap:wrap}
.topo nav a{color:var(--muted);text-decoration:none}
.topo nav a:hover,.topo nav a[aria-current]{color:var(--ink)}

/* ── página de texto ── */
.texto{max-width:66ch;margin:0 auto;padding:28px 22px 80px}
.texto h1{font-weight:300;font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-.03em;margin:18px 0 10px}
.texto h1 b{font-weight:800}
.texto h2{font-weight:700;font-size:22px;margin:34px 0 10px;letter-spacing:-.01em}
.texto p,.texto li{color:var(--ink-2)}
.texto .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase}
.texto table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0 20px}
.texto th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;color:var(--ink);border-bottom:1px solid var(--line)}
.texto td{padding:8px 10px;border-top:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.texto td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:8px;box-shadow:0 0 10px currentColor}
.botao{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:9px 18px;color:var(--ink);
  text-decoration:none;background:var(--panel);font:inherit;cursor:pointer}
.botao:hover{border-color:var(--cyan)}
.botao.primario{background:var(--cyan);color:#06162f;border-color:var(--cyan);font-weight:600}
.rodape{padding:0 22px 40px;font-size:12px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* ── o jogo ── */
#jogo{position:fixed;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:crosshair}
.hud{position:fixed;left:22px;bottom:22px;z-index:3;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(92vw,520px)}
.hud>*{pointer-events:auto}
.placar{font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.placar b{color:var(--ink);font-size:22px;font-weight:600;margin-right:6px}
.msg{font-size:14px;color:var(--ink);opacity:0;transition:opacity .9s;min-height:1.4em}
.msg.viva{opacity:1;transition:opacity .25s}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.acoes .botao{padding:6px 13px;font-size:12.5px}
.conta{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;backdrop-filter:blur(6px);font-size:13px;color:var(--ink-2)}
.conta form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.conta input{flex:1;min-width:180px;font:inherit;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:rgba(0,0,0,.25);color:var(--ink)}
.conta .aviso{width:100%;font-size:12px;color:var(--muted);min-height:1.2em}

.intro{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,560px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;backdrop-filter:blur(10px);
  transition:opacity .6s,transform .6s}
.intro.fechado{opacity:0;pointer-events:none;transform:translate(-50%,-48%)}
.intro h1{font-weight:300;font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.intro h1 b{font-weight:800}
.intro p{color:var(--ink-2);margin:0 0 10px}
.intro ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.intro li{margin:4px 0}
.intro .fim{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.intro .fim small{color:var(--muted)}
.ajuda{position:fixed;right:18px;top:58px;z-index:3}
.ajuda .botao{padding:5px 12px;font-size:12.5px}

.colecao{position:fixed;right:18px;bottom:22px;z-index:4;width:min(92vw,340px);max-height:70vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;backdrop-filter:blur(8px)}
.colecao header{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.colecao button{font:inherit;background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1}
.colecao ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.colecao li{display:flex;align-items:center;gap:12px;font-size:13.5px}
.colecao li b{display:block;font-weight:600;color:var(--ink)}
.colecao li small{color:var(--muted)}
.colecao svg{width:38px;height:38px;flex:none}
.colecao polygon{fill:rgba(87,191,240,.18);stroke:var(--cyan);stroke-width:.05;stroke-linejoin:round}
.colecao .vazia{color:var(--muted);font-size:13px;margin:10px 0 0}

.jogo-topo{position:absolute;left:0;right:0;top:0}
.jogo-topo .topo{pointer-events:none}
.jogo-topo .topo a,.jogo-topo .topo nav{pointer-events:auto}

@media (max-width:640px){
  .topo{padding:12px 16px}
  .hud{left:14px;bottom:14px;right:14px;max-width:none}
  .colecao{right:10px;left:10px;width:auto}
  .intro{padding:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro,.msg{transition:none}}