/* ============================================================ SPAWN - Tema "Mundo" (Constelação do Saber). Camada de skin por cima de styles.css. Aplica-se SÓ quando . Sem esta classe, a app fica clássica. Nada aqui altera estrutura/lógica - é tudo aparência. ============================================================ */ html.cosmic { --bg:#07060f; --panel:#100d20; --panel2:#181430; --line:#251d40; --txt:#eceaf6; --muted:#9a96c0; --accent:#ff7a3d; /* brasa/estrela - mantém a marca, casa com roxo */ --accent2:#36d399; --locked:#403a5c; --null:#8a6bff; /* roxo do Null/Grokk */ --grok:#b98bff; --star:#ffd66c; /* dourado das estrelas acesas */ } /* Céu cósmico de fundo (gradiente roxo) + campo de estrelas subtil. */ html.cosmic body { background: radial-gradient(1.5px 1.5px at 18% 26%, rgba(255,255,255,.55), transparent), radial-gradient(1.5px 1.5px at 72% 14%, rgba(255,255,255,.40), transparent), radial-gradient(1.5px 1.5px at 38% 72%, rgba(255,255,255,.35), transparent), radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,.45), transparent), radial-gradient(2px 2px at 55% 40%, rgba(217,196,255,.40), transparent), radial-gradient(130% 85% at 50% -12%, #2a1a52 0%, #170f36 30%, #0b0820 58%, #07060f 100%); } /* A grelha de 3 colunas fica translúcida para o céu passar nas bordas. */ html.cosmic .sidebar, html.cosmic .tutor { background:rgba(16,13,32,.82); backdrop-filter:blur(2px); } html.cosmic .brand { border-bottom-color:var(--line); } /* Barra de XP / Contratável - dourado sobre roxo. */ html.cosmic .bar i { background:linear-gradient(90deg,var(--star),var(--accent)); } /* Lista de níveis - estado "aceso" passa a dourado (como as estrelas). */ html.cosmic .lvl.done .n { background:rgba(255,214,108,.14); border-color:rgba(255,214,108,.4); color:var(--star); } html.cosmic .lvl.active { background:rgba(138,107,255,.16); color:#fff; } html.cosmic .lvl.active .n { background:var(--null); border-color:var(--null); color:#fff; } html.cosmic .lvl:hover:not(.locked) { background:rgba(138,107,255,.10); } /* ---------- LIÇÃO (main) ---------- */ html.cosmic .tag { color:var(--star); background:rgba(255,214,108,.10); border-color:rgba(255,214,108,.28); } html.cosmic .box.analogy { border-left-color:var(--null); background:linear-gradient(180deg,rgba(138,107,255,.08),rgba(138,107,255,.02)); } html.cosmic .main h1, html.cosmic .onboard h1 { text-shadow:0 0 26px rgba(138,107,255,.25); } html.cosmic h2.sec { color:#efe9ff; } /* Botões primários - brasa dourada. */ html.cosmic .btn.primary { background:linear-gradient(90deg,var(--star),var(--accent)); color:#1a1430; } /* ---------- GROKK (ex-Tutor) ---------- */ html.cosmic .tutor .top { border-bottom-color:var(--line); } html.cosmic .tutor .av.av-cosmic { background:radial-gradient(circle at 38% 32%,#3a2a60,#0a0816); border:2px solid var(--null); box-shadow:0 0 18px rgba(138,107,255,.55); } html.cosmic .tutor .av.av-cosmic svg { width:22px; height:22px; } html.cosmic .tutor .top .st { color:var(--grok); } html.cosmic .tutor .top .st::before { background:var(--grok); box-shadow:0 0 8px var(--grok); } html.cosmic .msg.me { background:linear-gradient(90deg,var(--star),var(--accent)); color:#1a1430; } html.cosmic .msg.bot b { color:#e3d8ff; } html.cosmic .sugg button:hover { border-color:var(--null); color:var(--grok); } html.cosmic .compose button { background:linear-gradient(90deg,var(--star),var(--accent)); color:#1a1430; } /* ---------- A TORRE ---------- */ html.cosmic .tower-entry { background:linear-gradient(180deg,rgba(138,107,255,.16),rgba(138,107,255,.04)); border-color:rgba(138,107,255,.32); } html.cosmic .tower-entry .n { background:rgba(138,107,255,.22); border-color:rgba(138,107,255,.45); } html.cosmic .contratavel { background:rgba(16,13,32,.7); } /* ---------- Troca de textos/avatares Tutor <-> Grokk ---------- O markup tem AMBOS; mostra-se só o do tema activo. Especificidade .tutor .av.av-X para vencer a regra base .tutor .av. */ .t-cosmic { display:none; } .tutor .av.av-cosmic { display:none; } html.cosmic .t-classic { display:none; } html.cosmic .t-cosmic { display:inline; } html.cosmic .tutor .av.av-classic { display:none; } html.cosmic .tutor .av.av-cosmic { display:grid; place-items:center; } /* "O Mundo" como destaque na barra (casa da app). */ html.cosmic #worldBtn { color:#fff; background:linear-gradient(90deg,rgba(138,107,255,.22),rgba(255,214,108,.14)); border:1px solid rgba(138,107,255,.5); border-radius:9px; padding:9px 12px; width:100%; text-align:center; font-weight:600; margin-bottom:6px; } html.cosmic #worldBtn:hover { border-color:var(--grok); } #worldBtn { display:none; } /* só faz sentido no tema Mundo */ html.cosmic #worldBtn { display:block; } #skinBtn { display:block; margin-top:4px; }