/* ============================================================================ * MATEMÁGICA — INTERNAS (v9) * * Aplica o look da home v9 nas páginas internas (5 menus de ano + jogos + * páginas adultas). Carrega DEPOIS de jogos_matematica_shared.css pra ganhar * cascata; usa especificidade [data-realm] / [data-game] / [data-internas] * onde precisa override seguro. * * Dependência: tokens.css carregado ANTES. * * Atmosfera (constelações + fade pra montanhas) é renderizada via * body::before/::after — não precisa adicionar divs no HTML. * ============================================================================ */ /* === PALETA DOMINANTE POR REINO ============================================ * Cada ano carrega data-realm="N" no . Define cor do gradient inferior * do body, .num do cap-card, e variações sutis em borders. * ========================================================================== */ [data-realm="1"] { --realm-light: #fecaca; --realm-dark: #f87171; --realm-text: #7f1d1d; } [data-realm="2"] { --realm-light: #99f6e4; --realm-dark: #2dd4bf; --realm-text: #115e59; } [data-realm="3"] { --realm-light: #fde68a; --realm-dark: #fbbf24; --realm-text: #78350f; } [data-realm="4"] { --realm-light: #bfdbfe; --realm-dark: #60a5fa; --realm-text: #1e3a8a; } [data-realm="5"] { --realm-light: #ddd6fe; --realm-dark: #a78bfa; --realm-text: #4c1d95; } /* === PALETA POR JOGO (data-game) — usa tokens dos cards da home v9 === */ [data-game="inventa"] { --realm-light: var(--card-inventa-light); --realm-dark: var(--card-inventa-dark); --realm-text: #78350f; } [data-game="senso"] { --realm-light: var(--card-senso-light); --realm-dark: var(--card-senso-dark); --realm-text: #78350f; } [data-game="cuisenaire"] { --realm-light: var(--card-barras-light); --realm-dark: var(--card-barras-dark); --realm-text: #7c2d12; } [data-game="beleza"] { --realm-light: var(--card-beleza-light); --realm-dark: var(--card-beleza-dark); --realm-text: #7c2d12; } [data-game="problemas"] { --realm-light: var(--card-problemas-light); --realm-dark: var(--card-problemas-dark); --realm-text: #064e3b; } [data-game="cozinha"] { --realm-light: var(--card-cozinha-light); --realm-dark: var(--card-cozinha-dark); --realm-text: #134e4a; } [data-game="tabuada"] { --realm-light: var(--card-tabuada-light); --realm-dark: var(--card-tabuada-dark); --realm-text: #7f1d1d; } [data-game="soma"] { --realm-light: var(--card-soma-light); --realm-dark: var(--card-soma-dark); --realm-text: #831843; } [data-game="flash"] { --realm-light: var(--card-flash-light); --realm-dark: var(--card-flash-dark); --realm-text: #831843; } [data-game="fracoes"] { --realm-light: var(--card-fracoes-light); --realm-dark: var(--card-fracoes-dark); --realm-text: #831843; } [data-internas]:not([data-realm]):not([data-game]) { /* fallback neutro pra adultas (sem reino, sem jogo) */ --realm-light: var(--bg-page-deeper); --realm-dark: var(--accent-violet); --realm-text: var(--text-secondary); } /* === BODY: gradient creme + tinta do reino + atmosfera =================== */ html[data-internas] { height: 100%; } html[data-internas] body { font-family: var(--font-body) !important; color: var(--text-primary) !important; background: linear-gradient(180deg, var(--bg-page) 0%, var(--realm-light) 100%) !important; min-height: 100vh; padding: 18px !important; position: relative; overflow-x: hidden; max-width: 100vw; } /* Proteção contra overflow horizontal em qualquer descendente */ html[data-internas] .container, html[data-internas] .container * { max-width: 100%; box-sizing: border-box; } html[data-internas] img, html[data-internas] svg, html[data-internas] video, html[data-internas] canvas { max-width: 100%; height: auto; } /* Constelações (estrelas pontilhadas no topo) */ html[data-internas] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.07; background-image: radial-gradient(2px 2px at 10% 12%, var(--text-primary) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 22% 6%, var(--text-primary) 50%, transparent 50%), radial-gradient(2px 2px at 35% 18%, var(--text-primary) 50%, transparent 50%), radial-gradient(1px 1px at 65% 10%, var(--text-primary) 50%, transparent 50%), radial-gradient(2px 2px at 80% 16%, var(--text-primary) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 92% 7%, var(--text-primary) 50%, transparent 50%); } /* Sombra das montanhas no rodapé (gradient suave) */ html[data-internas] body::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 90px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.05) 60%, rgba(91, 33, 182, 0.10) 100%); } /* Container fica acima da atmosfera */ html[data-internas] .container { position: relative; z-index: 1; } /* === CONTAINER: look v9 (card branco com border + shadow grande) ========= */ html[data-internas] .container { max-width: 900px !important; margin: 0 auto !important; background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important; border: 3px solid white !important; border-radius: var(--radius-xl) !important; padding: 24px !important; box-shadow: var(--shadow-bigcard) !important; } /* === HEADER DA PÁGINA (h1 + sub) ========================================= */ html[data-internas] h1 { font-family: var(--font-display) !important; font-size: 28px !important; letter-spacing: 0.5px !important; background: linear-gradient(90deg, var(--realm-dark) 0%, var(--accent-violet) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; text-shadow: 0 2px 0 rgba(45, 27, 94, 0.05); text-align: center !important; margin-bottom: 4px !important; line-height: 1.1 !important; } html[data-internas] .sub { font-family: var(--font-tagline) !important; font-size: 17px !important; color: var(--realm-text) !important; font-weight: 600 !important; text-align: center !important; margin-bottom: 18px !important; } /* === BOTÃO VOLTAR — harmonizado com header v9 ============================ */ html[data-internas] .voltar, html[data-internas] .voltar-topo, html[data-internas] .voltar-matemagica, html[data-internas] .nav-voltar, html[data-internas] .btn-voltar { background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-violet-deep) 100%) !important; color: var(--text-inverse) !important; border: 2px solid var(--accent-violet-deep) !important; border-radius: var(--radius-pill) !important; padding: 7px 16px !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 3px 0 rgba(45, 27, 94, 0.25), 0 6px 14px rgba(124, 58, 237, 0.18) !important; transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important; } html[data-internas] .voltar:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(45, 27, 94, 0.25), 0 8px 18px rgba(124, 58, 237, 0.25) !important; } html[data-internas] .voltar:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(45, 27, 94, 0.25), 0 2px 6px rgba(124, 58, 237, 0.18) !important; } /* === HEADER PLAYER (XP / moedas / nível) — harmonizado =================== */ html[data-internas] .header-player { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important; border: 2px solid var(--accent-violet) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-soft) !important; } /* === CAP-CARDS: bolinha branca com paleta do reino ======================= */ html[data-internas] .capitulos { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-md) !important; } html[data-internas] .cap-card { background: var(--bg-card) !important; border: 3px solid white !important; border-radius: var(--radius-lg) !important; padding: 18px 14px !important; box-shadow: var(--shadow-card) !important; text-align: center !important; transition: transform var(--transition-base), box-shadow var(--transition-base) !important; position: relative; overflow: hidden; } html[data-internas] .cap-card::before { /* highlight superior pra dar volume */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); pointer-events: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } html[data-internas] .cap-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-card-hover) !important; border-color: white !important; } html[data-internas] .cap-card .num { display: grid !important; place-items: center !important; width: 48px !important; height: 48px !important; border-radius: var(--radius-round) !important; font-family: var(--font-display) !important; font-size: 22px !important; color: var(--text-primary) !important; line-height: 1 !important; margin: 0 auto 10px !important; border: 3px solid var(--text-primary) !important; box-shadow: 0 3px 0 rgba(45, 27, 94, 0.18) !important; position: relative; z-index: 1; } html[data-internas] .cap-card h3 { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 15px !important; color: var(--text-primary) !important; margin-bottom: 4px !important; position: relative; z-index: 1; } html[data-internas] .cap-card p { font-family: var(--font-body) !important; font-size: 11px !important; color: var(--text-secondary) !important; font-weight: 500 !important; line-height: 1.3 !important; opacity: 0.85 !important; position: relative; z-index: 1; } /* === CORES DOS CAP-CARDS — gradient suave + bolinha do reino ============= */ html[data-internas] .cap-card.cap1 { background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%) !important; } html[data-internas] .cap-card.cap1 .num { background: radial-gradient(circle at 30% 30%, #fecaca 0%, #f87171 100%) !important; } html[data-internas] .cap-card.cap2 { background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important; } html[data-internas] .cap-card.cap2 .num { background: radial-gradient(circle at 30% 30%, #99f6e4 0%, #2dd4bf 100%) !important; } html[data-internas] .cap-card.cap3 { background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%) !important; } html[data-internas] .cap-card.cap3 .num { background: radial-gradient(circle at 30% 30%, #fde68a 0%, #fbbf24 100%) !important; } html[data-internas] .cap-card.cap4 { background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important; } html[data-internas] .cap-card.cap4 .num { background: radial-gradient(circle at 30% 30%, #bfdbfe 0%, #60a5fa 100%) !important; } html[data-internas] .cap-card.cap5 { background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%) !important; } html[data-internas] .cap-card.cap5 .num { background: radial-gradient(circle at 30% 30%, #ddd6fe 0%, #a78bfa 100%) !important; } html[data-internas] .cap-card.cap6 { background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%) !important; } html[data-internas] .cap-card.cap6 .num { background: radial-gradient(circle at 30% 30%, #ede8fa 0%, #6b54d3 100%) !important; } /* === H2 (titulo do capítulo / titulo do jogo) ============================ */ html[data-internas] h2 { font-family: var(--font-display) !important; color: var(--text-primary) !important; font-size: 22px !important; text-align: center !important; letter-spacing: 0.3px !important; } /* === PLACAR DO JOGO ====================================================== */ html[data-internas] .placar-jogo { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important; border: 2px solid var(--accent-violet) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-soft) !important; } html[data-internas] .placar-jogo strong { font-family: var(--font-display) !important; color: var(--text-primary) !important; } /* === BOTÕES DE AÇÃO (.acao) — variante v9 ================================ */ html[data-internas] .acao { font-family: var(--font-body) !important; font-weight: 700 !important; border-radius: var(--radius-pill) !important; } /* === RESPONSIVO ========================================================== */ @media (max-width: 640px) { html[data-internas] body { padding: 10px !important; } html[data-internas] .container { padding: 16px !important; border-radius: var(--radius-lg) !important; } html[data-internas] h1 { font-size: 22px !important; } html[data-internas] .sub { font-size: 14px !important; } html[data-internas] .capitulos { grid-template-columns: 1fr !important; } html[data-internas] .cap-card { padding: 14px 12px !important; } } /* === REDUCED MOTION ====================================================== */ @media (prefers-reduced-motion: reduce) { html[data-internas] .cap-card, html[data-internas] .voltar { transition: none !important; } }