:root { --fundo:#0a0806; --painel:#15110d; --borda:#2e241a; --texto:#e6e9ef; --suave:#9aa4b2;
        --laranja:#ff7a18; --amarelo:#ffd34d; --erro:#ff5c5c; --ok:#4cd07d; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--fundo); color:var(--texto);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.5; }
a { color:var(--amarelo); }
.topo { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; background:linear-gradient(90deg,#140b04,#0d0a07 60%); border-bottom:1px solid var(--borda); flex-wrap:wrap; }
.marca { font-weight:900; font-size:22px; letter-spacing:1px; color:var(--texto); text-decoration:none; }
.marca span { color:var(--laranja); }
nav { display:flex; align-items:center; gap:14px; }
nav a { text-decoration:none; }
.inline { display:inline; margin:0; }
button.link { background:none; border:0; color:var(--amarelo); cursor:pointer; font:inherit; padding:0; }
main { max-width:1080px; margin:0 auto; padding:20px 16px 40px; }
.banner { min-height:360px; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,.1) 60%), url("/arte.jpg") center / cover no-repeat; }
.banner-texto { padding:28px; max-width:620px; }
.banner h1 { margin:0 0 8px; font-size:34px; color:var(--amarelo); }
.botao { display:inline-block; background:linear-gradient(90deg, var(--laranja), var(--amarelo)); color:#1b1206;
  font-weight:800; border:0; border-radius:8px; padding:10px 18px; cursor:pointer; text-decoration:none; font-size:15px; }
.botao.grande { font-size:18px; padding:13px 26px; margin-top:8px; }
.botao.fantasma { background:transparent; color:var(--amarelo); border:1px solid var(--amarelo); margin-left:8px; }
.cartoes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:20px; }
.cartao, .formulario { background:var(--painel); border:1px solid var(--borda); border-radius:12px; padding:20px; }
.cartao h2 { margin-top:0; color:var(--amarelo); font-size:19px; }
.formulario { max-width:460px; margin:10px auto; }
.formulario h1 { margin-top:0; color:var(--amarelo); }
label { display:block; margin:12px 0; color:var(--suave); font-size:14px; }
input { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--borda);
  background:#0c1017; color:var(--texto); font-size:15px; }
input:focus { outline:2px solid var(--laranja); border-color:transparent; }
small { color:var(--suave); }
.isca { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.aviso { padding:10px 14px; border-radius:8px; margin:0 auto 14px; max-width:460px; border:1px solid; }
.aviso.erro { border-color:var(--erro); color:var(--erro); background:rgba(255,92,92,.08); }
.aviso.ok { border-color:var(--ok); color:var(--ok); background:rgba(76,208,125,.08); }
.dados { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
.dados dt { color:var(--suave); }
.dados dd { margin:0; }
.ruim { color:var(--erro); }
footer { text-align:center; color:var(--suave); font-size:13px; padding:20px; border-top:1px solid var(--borda); }
@media (max-width:600px) { .banner { min-height:300px; } .banner h1 { font-size:26px; } .botao.fantasma { margin:8px 0 0; } }

/* ---------- portal Naruto 7 ---------- */
.marca { font-size:24px; text-shadow:0 0 12px rgba(255,122,24,.35); }
.menu { display:flex; flex-wrap:wrap; gap:4px 16px; }
.menu a { color:var(--texto); font-weight:600; font-size:15px; }
.menu a:hover, .acesso a:hover { color:var(--laranja); }
.acesso { display:flex; align-items:center; gap:12px; }
.titulo-pagina { color:var(--amarelo); margin:6px 0 16px; }
.titulo-secao { color:var(--amarelo); font-size:20px; display:flex; align-items:baseline; justify-content:space-between; }
.titulo-secao .mais { font-size:14px; font-weight:400; }
.grade-2 { display:grid; grid-template-columns:3fr 2fr; gap:20px; margin-top:22px; }
.grade-2 .cartao { margin-bottom:14px; }
.cartao h3 { margin:0 0 6px; color:var(--amarelo); font-size:18px; }
.noticia { margin-bottom:12px; }
.noticia h3 a { color:var(--texto); text-decoration:none; }
.noticia h3 a:hover { color:var(--laranja); }
.noticia.destaque { border-color:var(--laranja); box-shadow:0 0 0 1px rgba(255,122,24,.25) inset; }
.data { color:var(--suave); font-size:13px; }
.leitura { max-width:780px; margin:0 auto; }
.leitura h1 { color:var(--amarelo); margin:8px 0 4px; }
.leitura h2 { color:var(--laranja); font-size:19px; margin-top:22px; }
.leitura p, .leitura li { line-height:1.65; }
.resumo { color:var(--suave); font-style:italic; }
.suave { color:var(--suave); }
.pequeno { font-size:13px; }
.bom { color:var(--ok); }
.status-mini { margin:14px 0 0; font-size:14px; color:var(--suave); }
.abas { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.abas a { padding:7px 14px; border-radius:20px; border:1px solid var(--borda); text-decoration:none; color:var(--texto); }
.abas a.ativa { background:linear-gradient(90deg, var(--laranja), var(--amarelo)); color:#1b1206; font-weight:800; border-color:transparent; }
.tabela-rolavel { overflow-x:auto; padding:6px 10px; }
.tabela { width:100%; border-collapse:collapse; font-size:15px; }
.tabela th, .tabela td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--borda); }
.tabela th { color:var(--suave); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.tabela tr:nth-child(1) td:first-child { color:var(--amarelo); font-weight:900; }
.botao.pequeno, button.botao.pequeno { font-size:13px; padding:6px 12px; margin:0; }
a.pequeno { font-size:13px; }
.rodape-links { margin-top:6px; }
footer a { color:var(--suave); }
/* página de jogo: o iframe ocupa a tela */
.main-jogo { max-width:none; padding:0; }
.pagina-jogo footer { display:none; }
.barra-jogo { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:8px 16px; background:#120c07; border-bottom:1px solid var(--borda); font-size:14px; }
.barra-jogo .acoes { display:flex; align-items:center; gap:10px; }
.moldura-jogo { background:#000; height:calc(100vh - 112px); min-height:520px; }
.moldura-jogo iframe { width:100%; height:100%; border:0; display:block; }
.moldura-jogo:fullscreen { height:100vh; }
@media (max-width:860px) { .grade-2 { grid-template-columns:1fr; } .menu { order:3; width:100%; } }
@media (max-width:600px) { .barra-jogo .dica { display:none; } .moldura-jogo { height:calc(100vh - 150px); } }