/* Tokens globais: ajuste aqui cores, sombras, limites e raios usados pelo site. */
:root {
  --bg: #101820;
  --bg-2: #18232d;
  --surface: rgba(30, 43, 54, 0.92);
  --surface-soft: rgba(255,255,255,0.04);
  --text: #f1f5f7;
  --text-soft: #c4d0d9;
  --muted: #9aabb8;
  --line: rgba(180, 204, 220, 0.2);
  --blue: #a8d5f3;
  --blue-2: #83bee7;
  --blue-3: #4d8dbd;
  --pink: #f1d4dd;
  --shadow: 0 16px 38px rgba(3, 10, 15, 0.28);
  --radius: 22px;
  --max: 1180px;
}
/* O tema claro substitui os tokens acima sem duplicar todas as regras visuais. */
body.theme-light {
  --bg: #f9f7f3;
  --bg-2: #edf6ff;
  --surface: rgba(255,255,255,0.86);
  --surface-soft: rgba(255,255,255,0.55);
  --text: #1b2d3a;
  --text-soft: #4d677c;
  --muted: #72879d;
  --line: rgba(90, 120, 160, 0.16);
  --blue: #76afd7;
  --blue-2: #95c9ef;
  --blue-3: #4c7fad;
  --pink: #f7dfe8;
  --shadow: 0 14px 30px rgba(81, 112, 145, 0.11);
}
/* Normalização e estilos básicos compartilhados por todas as páginas. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; min-height: 100vh; font-family: Arial, Helvetica, sans-serif; line-height: 1.7; background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at top left, rgba(143, 193, 231, 0.1), transparent 32%), radial-gradient(circle at bottom right, rgba(248, 223, 231, 0.08), transparent 28%); }
body.theme-light::before { background: radial-gradient(circle at top left, rgba(143, 193, 231, 0.18), transparent 32%), radial-gradient(circle at bottom right, rgba(248, 223, 231, 0.2), transparent 28%); }
img, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font: inherit; }
button { cursor:pointer; }
::selection { background: rgba(169,216,245,0.32); color: var(--text); }

/* Camadas decorativas de fundo; o brilho do ponteiro é desativado em telas táteis. */
#particle-canvas { position: fixed; inset: 0; width:100%; height:100%; z-index: 0; pointer-events: none; opacity: 0.45; }
.cursor-glow { position: fixed; width: 200px; height: 200px; border-radius: 50%; pointer-events:none; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(142,195,239,0.25), rgba(255,255,255,0) 68%); filter: blur(18px); opacity: 0; z-index: 1; }
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* Largura comum de conteúdo e cabeçalho fixo no topo durante a rolagem. */
.page-shell { position: relative; z-index: 2; }
.page-main, .page-content, .page-hero, .section-shell { width: min(var(--max), calc(100% - 28px)); margin: 0 auto; }

.cabecalho { position: sticky; top: 12px; z-index: 50; width: min(var(--max), calc(100% - 28px)); margin: 14px auto 0; padding: 12px 18px; display:flex; align-items:center; justify-content:space-between; gap: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17, 26, 34, 0.86); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
body.theme-light .cabecalho { background: rgba(255,255,255,0.82); }
.logo { flex-shrink:0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.1rem, 1.8vw, 1.55rem); font-weight:700; letter-spacing: 0.04em; text-transform: lowercase; }
.logo-heart { font-size:1.4em; color:var(--blue); }
.logo-mobile { display:none; }

.header-actions { position: relative; display:flex; align-items:center; gap:10px; }
.theme-toggle, .menu-toggle { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background: rgba(169, 216, 245, 0.08); color: var(--text); }
.theme-toggle { font-size:1.15rem; }
.theme-toggle .moon-icon { display:none; }
body.theme-light .theme-toggle .sun-icon { display:none; }
body.theme-light .theme-toggle .moon-icon { display:inline-block; }
.menu-toggle { display:grid; width:46px; height:42px; place-items:center; }
.menu-toggle span { display:block; width:auto; height:auto; border-radius:0; background:transparent; color:var(--text); font-size:1.25rem; line-height:1; letter-spacing:0.12em; transform:translateY(-3px); }
.menu-panel { position:absolute; top: calc(100% + 12px); right:0; min-width: min(340px, 82vw); display:grid; gap:7px; padding:12px; background: rgba(10,16,22,0.96); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transform: translateY(-8px) scale(0.96); pointer-events:none; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; }
body.theme-light .menu-panel { background: rgba(255,255,255,0.96); }
.menu-panel.open { opacity:1; visibility:visible; transform: translateY(0) scale(1); pointer-events:auto; }
.menu-link { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:12px; padding: 12px 14px; border:1px solid transparent; border-radius:12px; color: var(--text-soft); font-size: 0.72rem; letter-spacing: 0.04em; text-transform:uppercase; font-weight:700; }
.menu-link strong, .menu-link small { display:block; }
.menu-link small { margin-top:3px; color:var(--muted); font-size:0.72rem; font-weight:400; letter-spacing:0; text-transform:none; }
.menu-icon { display:grid; width:28px; height:28px; place-items:center; border-radius:9px; color:var(--blue); background:rgba(169,216,245,0.1); font-size:1rem; }
.menu-link:hover, .menu-link.pagina-atual { background: rgba(169,216,245,0.08); border-color: var(--line); color: var(--text); }
.menu-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.menu-mark { color: var(--blue); }

/* Tipografia de títulos, botões e apresentação principal da página inicial. */
.hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items:center; padding: 72px 0 24px; }
.eyebrow, .kicker { margin: 0 0 16px; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight:700; color: var(--blue); }
.hero h1, .page-hero h1, .section-heading h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.06em; line-height: 0.96; }
.hero h1 { font-size: clamp(3rem, 5vw, 6rem); }
.hero h1 .highlight, .page-hero h1 .highlight, .section-heading h2 .accent { display:block; color: var(--blue); font-style: italic; }
.hero-lead, .page-hero p { max-width: 560px; margin: 0 0 18px; color: var(--text-soft); font-size: 1.05rem; }
.hero-actions, .inline-actions { display:flex; flex-wrap: wrap; gap: 12px; align-items:center; }
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:999px; border:1px solid var(--line); font-weight:700; }
.primary-button { background: linear-gradient(135deg, var(--blue), var(--blue-3)); color: #f7fbff; border-color: transparent; box-shadow: 0 14px 22px rgba(104, 160, 211, 0.18); }
.secondary-button { background: rgba(255,255,255,0.5); color: var(--text); }
.hero-meta { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 24px; }
.hero-meta span { display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(169,216,245,0.04); color: var(--muted); font-size:0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }

.hero-visual { display:flex; justify-content:center; align-items:center; }
/* Moldura e controles do carrossel de fotos favoritas da capa. */
.portrait-frame { position:relative; width:min(500px, 100%); min-height:560px; border:1px solid var(--line); border-radius: 40px 40px 24px 24px; overflow:hidden; background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(163, 206, 239, 0.36), rgba(221, 234, 246, 0.9)); box-shadow: var(--shadow); }
.portrait-slide { position:absolute; inset:0; display:grid; place-items:center; color:var(--blue-3); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:0; visibility:hidden; transition:opacity 350ms ease, visibility 350ms ease; }
.portrait-slide.is-active { opacity:1; visibility:visible; }
.portrait-slide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait-carousel-controls { position:absolute; z-index:3; right:18px; bottom:24px; display:flex; align-items:center; gap:8px; padding:5px; border:1px solid rgba(77,105,131,0.15); border-radius:999px; background:rgba(255,255,255,0.68); color:var(--blue-3); backdrop-filter:blur(8px); }
.portrait-carousel-controls button { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(131,190,231,0.18); color:var(--blue-3); font-size:1.35rem; line-height:1; }
.portrait-carousel-controls span { min-width:38px; text-align:center; color:var(--blue-3); font-size:.72rem; font-weight:700; }
.portrait-carousel-dots { position:absolute; z-index:3; top:18px; right:18px; display:flex; gap:7px; padding:9px 11px; border:1px solid rgba(77,105,131,0.15); border-radius:999px; background:rgba(255,255,255,0.68); backdrop-filter:blur(8px); }
.portrait-carousel-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(77,105,131,0.4); }
.portrait-carousel-dots button.is-active { background:var(--blue-3); box-shadow:0 0 0 3px rgba(77,141,189,0.18); }

/* Seções, cartões e mosaicos usados para história, fotos e planos. */
.section-shell { padding: 18px 0 34px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin: 34px 0 20px; }
.section-heading h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); }
.section-heading p { margin:0; max-width:560px; color: var(--text-soft); }

.card-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
.feature-card, .story-card, .playlist-card, .progress-card, .gallery-item, .game-card, .avatar-card, .letter-card, .page-panel, .panel-card, .reveal-box, .quiz-panel, .word-panel, .achievements-panel { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.feature-card, .story-card, .playlist-card, .progress-card, .game-card, .avatar-card, .page-panel, .panel-card, .quiz-panel, .word-panel, .achievements-panel { padding:24px; }
.feature-card:hover, .story-card:hover, .playlist-card:hover, .game-card:hover, .avatar-card:hover { transform: translateY(-4px); }
.photo-collage { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; margin-top:22px; }
.photo-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background: var(--surface); box-shadow: var(--shadow); }
.photo-placeholder { position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio: 4 / 5; border-radius:18px 18px 0 0; background: linear-gradient(135deg, rgba(142,195,239,0.25), rgba(248,223,231,0.28)); color: var(--text-soft); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; }
.photo-placeholder img, .canva-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.photo-preview-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.photo-placeholder-empty { background:linear-gradient(145deg,rgba(169,216,245,.12),rgba(248,223,231,.1)); }
.photo-card-empty { cursor:default; }
.photo-card-empty:hover { transform:none; }
.photo-card figcaption { padding:14px 16px 16px; color: var(--text-soft); font-size:0.9rem; }
.photo-card.tall .photo-placeholder { aspect-ratio: 3 / 4; }
/* Foto principal: ocupa toda a galeria em um retângulo amplo e exclusivo. */
.photo-card-featured { grid-column: 1 / -1; }
.photo-card-featured .photo-placeholder { aspect-ratio: 16 / 7; }
.feature-card .feature-icon { width: 52px; height: 52px; display:grid; place-items:center; margin-bottom:16px; border-radius:16px; background: rgba(169,216,245,0.12); color: var(--blue); font-size:1.5rem; }
.feature-card h3, .story-card h3, .playlist-card h3, .game-card h3, .avatar-card h3 { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size:1.8rem; }
.feature-card p, .story-card p, .playlist-card p, .progress-card p, .game-card p, .avatar-card p, .page-panel p { margin:0; color: var(--text-soft); }
.card-link { display:inline-block; margin-top:16px; color: var(--blue); font-weight:700; }

/* Componentes compartilhados pelas páginas internas do site. */
.page-hero { padding: 54px 0 14px; }
.page-hero h1 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.page-content { padding: 0 0 80px; }
.page-panel { margin-top: 18px; }
.story-grid, .playlist-grid, .progress-grid, .gallery-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
.gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery-item { overflow:hidden; padding:0; cursor:pointer; transition: transform 180ms ease; }
.gallery-item:hover { transform: translateY(-4px); }
.gallery-item .thumb { aspect-ratio: 4 / 5; display:grid; place-items:center; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, rgba(169,216,245,0.24), rgba(47,110,168,0.42)); border-bottom:1px solid var(--line); font-weight:700; letter-spacing:0.08em; text-transform: uppercase; }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item figcaption { padding:18px 20px 20px; }
.gallery-item figcaption strong { display:block; margin-bottom:8px; }
.gallery-item figcaption span { color: var(--text-soft); }
/* Grade de wallpapers, cartões de prévia e modal da galeria de fotos. */
.wallpaper-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.wallpaper-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.wallpaper-preview { display:grid; place-items:center; overflow:hidden; padding:18px; background:linear-gradient(135deg,rgba(169,216,245,.16),rgba(47,110,168,.22)); }
.wallpaper-preview img { width:100%; height:auto; border-radius:14px; object-fit:contain; box-shadow:0 12px 30px rgba(3,10,15,.25); }
.wallpaper-preview-mobile { min-height:440px; }
.wallpaper-preview-mobile img { width:min(240px,70%); aspect-ratio:9 / 16; }
.wallpaper-preview-pc { min-height:300px; }
.wallpaper-preview-pc img { aspect-ratio:16 / 9; }
.wallpaper-slot { position:relative; aspect-ratio:16 / 10; min-height:0; color:var(--text-soft); text-align:center; font-size:.78rem; line-height:1.6; }
.wallpaper-slot img { position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); }
.wallpaper-slot span { max-width:100%; overflow-wrap:anywhere; }
.wallpaper-info { padding:20px; }
.wallpaper-info h2 { margin:0 0 6px; font-family:Georgia,"Times New Roman",serif; font-size:1.55rem; }
.wallpaper-info p { margin:0; color:var(--text-soft); }
.wallpaper-info .primary-button { margin-top:16px; }
.gallery-modal { position: fixed; inset:0; display:grid; place-items:center; background: rgba(4,9,14,0.84); opacity:0; visibility:hidden; transition: opacity 220ms ease; z-index: 110; }
.gallery-modal.open { opacity:1; visibility:visible; }
.gallery-modal-panel { position:relative; width:min(760px, calc(100% - 24px)); border:1px solid var(--line); border-radius:22px; background: rgba(9,15,22,0.97); box-shadow: var(--shadow); }
.gallery-modal-art { width:100%; max-height:78vh; min-height:320px; object-fit:contain; border-bottom:1px solid var(--line); background: rgba(7,13,20,0.35); }
.gallery-modal-art[hidden] { display:none; }
.gallery-modal-placeholder { min-height:320px; display:grid; place-items:center; border-bottom:1px solid var(--line); background: linear-gradient(135deg, rgba(169,216,245,0.28), rgba(47,110,168,0.4)); font-weight:700; letter-spacing:0.14em; text-transform: uppercase; }
body.theme-light .gallery-modal-panel { background: rgba(255,255,255,0.98); }
.gallery-modal-content { padding:20px; }
.gallery-close { position:absolute; top:12px; right:12px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); background: rgba(0,0,0,0.2); border-radius:50%; color: var(--text); font-size:1.4rem; }

/* Cartas, caixas de revelação e barras de progresso. */
.letter-stack { display:grid; gap:18px; }
.letter-card { padding:0; overflow:hidden; }
.letter-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); background: rgba(142,195,239,0.08); }
.canva-card { display:grid; gap:18px; margin-bottom:22px; }
.canva-image { position:relative; min-height:420px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(248,223,231,0.4), rgba(142,195,239,0.22)); color: var(--text-soft); font-size: 0.82rem; letter-spacing:0.14em; text-transform:uppercase; text-align:center; padding:24px; }
.letter-title-wrap { display:flex; align-items:center; gap:12px; }
.letter-stamp { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background: rgba(169,216,245,0.12); color: var(--blue); }
.letter-card h3 { margin:0; font-family: Georgia, "Times New Roman", serif; font-size:1.8rem; }
.letter-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows 220ms ease; }
.letter-body.open { grid-template-rows:1fr; }
.letter-inner { overflow:hidden; }
.letter-text { padding:18px 20px 22px; color: var(--text-soft); }
.letter-text p { margin: 0 0 12px; }
.letter-toggle { border:0; background: transparent; color: var(--blue); font-weight:700; }

.progress-bar { position:relative; width:100%; height:12px; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,0.04); overflow:hidden; margin-top:12px; }
.progress-bar span { position:absolute; inset:0 auto 0 0; width:52%; background: linear-gradient(90deg, var(--blue), var(--blue-3)); }

/* Quiz, caça-palavras, lista de palavras e selos de conquistas. */
.quiz-shell, .word-game-shell { display:grid; grid-template-columns: 1.15fr .85fr; gap:20px; }
.quiz-question { margin:0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 2.5vw, 2.6rem); }
.quiz-progress { display:inline-flex; margin-bottom:12px; color:var(--muted); font-size:.82rem; }
.quiz-options { display:grid; gap:12px; }
.quiz-option { width:100%; text-align:left; padding:14px 16px; border:1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); color: var(--text); }
.quiz-option.correct { background: rgba(64,181,122,0.12); border-color: rgba(64,181,122,0.46); animation:answer-correct 360ms ease; }
.quiz-option.wrong { background: rgba(226,99,99,0.12); border-color: rgba(226,99,99,0.46); animation:answer-wrong 320ms ease; }
@keyframes answer-correct { 50% { transform:scale(1.015); } }
@keyframes answer-wrong { 25%,75% { transform:translateX(-3px); } 50% { transform:translateX(3px); } }
.quiz-status { margin-top: 16px; color: var(--text-soft); }
.quiz-score { display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(169,216,245,0.06); }
.word-grid { display:grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap:8px; margin-top:16px; }
.word-cell { aspect-ratio:1 / 1; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,0.02); color: var(--text); font-weight:700; user-select:none; -webkit-user-select:none; touch-action:none; }
.word-cell.selected { background: rgba(169,216,245,0.18); border-color: rgba(169,216,245,0.45); }
.word-cell.found { background: rgba(81,166,110,0.12); border-color: rgba(81,166,110,0.4); }
.word-list { display:flex; flex-wrap:wrap; gap:8px; margin-top: 18px; }
.word-pill { display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--line); color: var(--text-soft); }
.word-pill.found { background: rgba(81,166,110,0.12); border-color: rgba(81,166,110,0.4); color: var(--text); }
.achievement-list { display:grid; gap:12px; margin-top:18px; }
.badge-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,0.02); }
.badge-card.locked { opacity:0.58; }
.badge-text { display:flex; align-items:center; gap:12px; }
.badge-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background: rgba(169,216,245,0.12); color: var(--blue); }
.hidden-message { display:none; margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background: rgba(8,12,18,0.28); color: var(--text-soft); }
.hidden-message.show { display:block; }

/* Cartões de jogos, avatares, rodapé e estados de entrada por rolagem. */
.roblox-banner { margin-top:20px; padding:32px; border:1px solid var(--line); border-radius:26px; background: linear-gradient(135deg, rgba(169,216,245,0.09), rgba(47,110,168,0.18)); }
.roblox-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
.avatar-portrait { min-height:180px; display:grid; place-items:center; border-radius:18px; border:1px solid var(--line); background: linear-gradient(145deg, rgba(169,216,245,0.18), rgba(47,110,168,0.72)); font-weight:700; letter-spacing:0.12em; text-transform: uppercase; }
.game-thumb { height:165px; display:grid; place-items:center; border-radius:18px; border:1px solid var(--line); background: linear-gradient(135deg, rgba(169,216,245,0.18), rgba(47,110,168,0.72)); font-weight:700; letter-spacing:0.08em; text-transform: uppercase; }

.rodape { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px min(7vw, 60px) 28px; border-top:1px solid var(--line); color: var(--muted); font-size:0.8rem; }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
[data-reveal].visible { opacity:1; transform: translateY(0); }

@media (max-width: 980px) {
  .hero, .quiz-shell, .word-game-shell { grid-template-columns: minmax(0,1fr); }
  .card-grid, .story-grid, .playlist-grid, .gallery-grid, .progress-grid, .photo-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roblox-grid { grid-template-columns: 1fr; }
}
/* Ajustes para telas menores, contadores de relacionamento e cartões extras. */
/* Cartão e dados específicos da tela de aniversário. */
.birthday-highlight { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:18px 24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(120deg,rgba(169,216,245,.16),rgba(248,223,231,.16)); }
.birthday-highlight span { color:var(--blue); font-size:.76rem; font-weight:700; letter-spacing:.14em; }
.birthday-highlight strong { color:var(--text); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.2rem,2.5vw,1.8rem); }
.milestone-counters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
/* Reorganiza colunas e controles para celulares; reduza efeitos para quem pediu menos movimento. */
@media (max-width: 700px) {
  .cabecalho { width: min(var(--max), calc(100% - 20px)); padding:10px 12px; gap:8px; }
  .logo { font-size:.95rem; letter-spacing:.015em; }
  .logo-full, .logo-heart { display:none; }
  .logo-mobile { display:inline; color:var(--text); }
  .header-actions { gap:6px; }
  .theme-toggle, .menu-toggle { width:38px; height:38px; }
  .cursor-glow { display:none; }
  .page-main, .page-content, .page-hero, .section-shell { width: min(var(--max), calc(100% - 20px)); }
  .hero { padding-top:42px; }
  .hero h1 { font-size: clamp(2.5rem, 14vw, 4.4rem); }
  .hero-actions, .inline-actions { width: 100%; }
  .primary-button, .secondary-button { width: 100%; }
  .photo-card-featured .photo-placeholder { aspect-ratio: 4 / 3; }
  .card-grid, .story-grid, .playlist-grid, .gallery-grid, .progress-grid, .photo-collage { grid-template-columns: minmax(0,1fr); }
  .wallpaper-grid { grid-template-columns:minmax(0,1fr); }
  .wallpaper-preview-mobile { min-height:360px; }
  .wallpaper-preview-pc { min-height:220px; }
  .letter-meta { flex-wrap:wrap; }
  .letter-title-wrap { flex:1 1 100%; min-width:0; }
  .letter-card h3 { font-size:1.35rem; overflow-wrap:anywhere; }
  .story-card h3, .story-card p { overflow-wrap:anywhere; }
  .word-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap:4px; touch-action:none; }
  .word-cell { border-radius:6px; font-size:.75rem; }
  .portrait-frame { min-height:420px; }
  .portrait-carousel-controls { right:14px; bottom:14px; }
  .menu-panel { min-width:min(310px,calc(100vw - 32px)); max-height:calc(100vh - 100px); overflow-y:auto; }
  .hero-meta span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } [data-reveal] { opacity:1; transform:none; } }

/* Estilos adicionais para navegação, cartas, player global e efeitos decorativos. */
:focus-visible { outline:3px solid var(--blue-2); outline-offset:3px; }
.main-area { width:min(var(--max), calc(100% - 28px)); margin:0 auto; padding:10px 0 76px; scroll-margin-top:100px; }
.universe-section { scroll-margin-top:100px; }
.page-main > section, .universe-section > section { scroll-margin-top:100px; }
.photo-card, .gallery-item { margin:0; }
.photo-card[data-gallery-item] { cursor:zoom-in; }
.photo-placeholder img, .canva-image img, .avatar-portrait img { transition:transform 400ms ease; }
.photo-card:hover .photo-placeholder img, .gallery-item:hover img { transform:scale(1.035); }
.gamer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.gamer-grid > *, .gamer-notes > *, .story-grid > *, .photo-collage > *, .gallery-grid > * { min-width:0; }
.avatar-card { display:grid; gap:14px; }
.avatar-portrait { position:relative; min-height:300px; display:grid; place-items:center; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(169,216,245,.18),rgba(47,110,168,.42)); color:var(--text-soft); letter-spacing:.12em; text-transform:uppercase; }
.avatar-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.avatar-portrait span { position:relative; z-index:1; }
.gamer-photos { margin-bottom:24px; }
.gamer-notes { margin-top:28px; }
.gamer-notes .story-card p + p { margin-top:12px; }
.counter-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 30px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(120deg,rgba(169,216,245,.1),rgba(248,223,231,.08)); }
.counter-panel > div { display:grid; gap:2px; }
.counter-panel strong { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.6rem,6vw,4.5rem); line-height:1; color:var(--blue); }
.counter-panel span, .counter-panel p { color:var(--text-soft); }
.counter-panel p { margin:0; }
.final-surprise { margin-top:24px; padding:24px; }
.envelope-card .letter-meta { position:relative; }
.envelope-card .letter-stamp { transition:transform 260ms ease; }
.envelope-card.envelope-open .letter-stamp { transform:rotate(-12deg) scale(1.08); }
.letter-body.open .letter-text { animation:letter-reveal 420ms ease both; }
@keyframes letter-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.global-audio { position:fixed; right:20px; bottom:18px; z-index:80; width:min(360px,calc(100vw - 32px)); padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:rgba(12,20,28,.95); box-shadow:var(--shadow); color:#eef7ff; }
body.theme-light .global-audio { background:rgba(255,255,255,.96); color:var(--text); }
.audio-heading { display:flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700; }
.audio-controls { display:flex; align-items:center; gap:14px; margin-top:10px; }
.audio-controls button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:rgba(169,216,245,.12); color:inherit; }
.volume-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.75rem; }
.volume-control input { width:132px; accent-color:var(--blue-2); }
.audio-status { margin:9px 0 0; color:var(--muted); font-size:.68rem; line-height:1.4; }
.audio-status.audio-error { color:#ffb1b1; }
.global-audio > a { display:inline-block; margin-top:6px; color:var(--blue); font-size:.7rem; }
.equalizer { display:flex; align-items:center; gap:2px; height:17px; }
.equalizer i { width:3px; height:6px; border-radius:3px; background:var(--blue); }
.is-playing .equalizer i { animation:equalize .65s ease-in-out infinite alternate; }
.is-playing .equalizer i:nth-child(2) { animation-delay:.18s; }
.is-playing .equalizer i:nth-child(3) { animation-delay:.34s; }
@keyframes equalize { to { height:16px; } }

/* Tela de introdução, animação do céu e transição para o universo do site. */
.cinematic-intro { position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 48%,#102d48 0%,#07111f 44%,#02050c 100%); color:#f5f9ff; opacity:0; visibility:hidden; transition:opacity 700ms ease,visibility 700ms ease; }
.cinematic-intro[hidden] { display:none; }
.cinematic-intro.visible { opacity:1; visibility:visible; }
.cinematic-intro.leaving { opacity:0; visibility:hidden; }
.cinematic-intro.launching { transition-duration:1250ms; }
.intro-stars, .intro-vignette { position:absolute; inset:0; pointer-events:none; }
.intro-stars { background-repeat:repeat; }
.intro-stars-back { opacity:.48; background-image:radial-gradient(1px 1px at 30px 50px,#d8edff 99%,transparent),radial-gradient(1px 1px at 160px 130px,#fff 99%,transparent),radial-gradient(2px 2px at 90px 210px,rgba(169,216,245,.9) 99%,transparent); background-size:240px 260px; animation:star-drift 70s linear infinite; transform:translate3d(calc(var(--parallax-x, 0px) * -.5),calc(var(--parallax-y, 0px) * -.5),0); }
.intro-stars-front { opacity:.7; background-image:radial-gradient(1.5px 1.5px at 50px 80px,#fff 99%,transparent),radial-gradient(1px 1px at 190px 40px,#b4dcff 99%,transparent); background-size:310px 330px; animation:star-drift 42s linear infinite reverse; transform:translate3d(var(--parallax-x, 0px),var(--parallax-y, 0px),0); }
.cinematic-intro.launching .intro-stars { will-change:scale,opacity,filter; }
.cinematic-intro.launching .intro-stars-back { animation:star-drift 70s linear infinite,star-warp 1.2s cubic-bezier(.2,.7,.15,1) forwards; }
.cinematic-intro.launching .intro-stars-front { animation:star-drift 42s linear infinite reverse,star-warp 1s cubic-bezier(.2,.7,.15,1) forwards; }
.intro-vignette { background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.62) 100%),radial-gradient(ellipse at center,rgba(61,139,201,.16),transparent 52%); }
.cinematic-intro.launching .intro-vignette { animation:star-gate 1.15s ease-in forwards; }
.intro-content { position:relative; z-index:1; width:min(700px,calc(100% - 36px)); display:grid; justify-items:center; text-align:center; }
.cinematic-intro.launching .intro-content { animation:intro-launch 550ms ease-in forwards; }
.intro-content .eyebrow { color:#aad8fa; }
.intro-content h1 { margin:6px 0 18px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.2rem,9vw,6.4rem); line-height:.98; }
.intro-content h1 .highlight { display:block; color:#b5ddfb; font-style:italic; text-shadow:0 0 28px rgba(127,193,240,.4); }
.intro-message { min-height:3.5em; max-width:580px; margin:0 0 26px; color:#d7e6f1; font-size:clamp(1rem,2.5vw,1.2rem); }
.intro-enter { min-width:min(320px,100%); animation:soft-pulse 3s ease-in-out infinite; }
.intro-skip { margin-top:18px; border:0; background:transparent; color:rgba(230,241,250,.72); text-decoration:underline; text-underline-offset:4px; font-size:.84rem; }
@keyframes soft-pulse { 50% { box-shadow:0 0 28px rgba(124,191,239,.32); } }
@keyframes star-drift { to { background-position:240px 520px,160px 390px,90px 470px; } }
@keyframes star-warp { 0% { scale:1; opacity:.7; filter:blur(0); } 35% { opacity:1; } 100% { scale:3.2; opacity:0; filter:blur(3px); } }
@keyframes star-gate { 0% { opacity:0; transform:scale(.2); } 45% { opacity:.9; } 100% { opacity:0; transform:scale(2.4); } }
@keyframes intro-launch { to { opacity:0; transform:translateY(-18px) scale(.94); } }
.page-shell.universe-arriving { animation:universe-arrival 850ms cubic-bezier(.18,.75,.25,1) both; }
@keyframes universe-arrival { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.page-hidden .intro-stars { animation-play-state:paused; }

/* Tela de aniversário: cartão, foto, player personalizado, confetes e balões. */
.birthday-welcome { position:fixed; inset:0; z-index:210; display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:24px 14px; background:radial-gradient(ellipse at 50% 35%,#263f5b 0%,#121e30 56%,#080e19 100%); color:#f5f9ff; opacity:0; visibility:hidden; transition:opacity 500ms ease,visibility 500ms ease; }
.birthday-welcome[hidden] { display:none; }
.birthday-welcome.visible { opacity:1; visibility:visible; }
.birthday-card { position:relative; z-index:2; width:min(660px,100%); max-height:calc(100vh - 48px); overflow:auto; scrollbar-width:none; -ms-overflow-style:none; display:grid; justify-items:center; padding:clamp(22px,5vw,44px); border:1px solid rgba(205,229,249,.25); border-radius:30px; background:rgba(12,22,36,.82); box-shadow:0 24px 80px rgba(0,0,0,.34); text-align:center; backdrop-filter:blur(12px); animation:birthday-card-arrive 700ms cubic-bezier(.18,.75,.25,1) both; }
.birthday-card::-webkit-scrollbar { display:none; }
.birthday-card .eyebrow { margin-bottom:8px; color:#f5c9df; }
.birthday-card h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.8rem,9vw,5.5rem); line-height:.98; letter-spacing:-.055em; }
.birthday-card h1 span { display:block; color:#f5c9df; font-style:italic; }
.birthday-age { margin:14px 0; color:#d7e6f1; font-size:1.05rem; }
.birthday-photos { width:min(560px,100%); display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin:4px 0 16px; }
.birthday-photo { min-width:0; min-height:250px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(205,229,249,.18); border-radius:18px; background:rgba(255,255,255,.07); }
.birthday-photo img { width:100%; height:100%; min-height:250px; object-fit:contain; }
.birthday-message { width:min(500px,100%); min-height:3em; margin:0 0 22px; padding:14px 18px; border-left:2px solid #f5c9df; color:#f5f9ff; text-align:left; white-space:pre-line; }
.birthday-audio { display:none; }
.birthday-audio-toggle { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; margin:0 0 8px; padding:10px 22px; border:1px solid rgba(205,229,249,.3); border-radius:999px; background:linear-gradient(135deg,rgba(245,201,223,.18),rgba(157,215,244,.16)); color:#f5f9ff; font-weight:700; transition:background 180ms ease,transform 180ms ease; }
.birthday-audio-toggle:hover { transform:translateY(-2px); background:linear-gradient(135deg,rgba(245,201,223,.28),rgba(157,215,244,.26)); }
.birthday-audio-toggle > span:first-child { color:#f5c9df; font-size:1.1rem; }
.birthday-audio-toggle[aria-pressed="true"] > span:first-child { animation:equalize .65s ease-in-out infinite alternate; }
.birthday-audio-status { min-height:1.4em; margin:0 0 14px; color:#d7e6f1; font-size:.78rem; }
.birthday-card .primary-button { animation:soft-pulse 3s ease-in-out infinite; }
.birthday-confetti, .birthday-balloons { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.birthday-confetti { z-index:0; }
.birthday-confetti-piece { position:absolute; width:9px; height:14px; border-radius:2px; background:hsl(var(--hue) 85% 70%); opacity:.85; animation:birthday-confetti-fall var(--fall-duration,1ms) linear var(--fall-delay,0s) infinite; }
@keyframes birthday-confetti-fall { 0% { transform:translate3d(0,0,0) rotate(0); } 100% { opacity:.9; transform:translate3d(var(--sway,0px),110vh,0) rotate(720deg); } }
.birthday-balloons { z-index:1; }
.birthday-balloon { position:absolute; bottom:7vh; width:66px; height:84px; border-radius:50% 50% 46% 46%; opacity:.82; box-shadow:inset -9px -8px 15px rgba(0,0,0,.12),inset 9px 8px 16px rgba(255,255,255,.22); animation:birthday-balloon-float 4s ease-in-out infinite alternate; }
.birthday-balloon::before { content:''; position:absolute; left:calc(50% - 4px); bottom:-7px; width:8px; height:9px; background:inherit; clip-path:polygon(0 0,100% 0,50% 100%); }
.birthday-balloon::after { content:''; position:absolute; left:50%; top:calc(100% + 2px); width:1px; height:125px; background:rgba(255,255,255,.38); }
.balloon-one { left:5%; background:#f4a9c8; }
.balloon-two { right:6%; bottom:12vh; width:56px; height:74px; background:#9dd7f4; animation-delay:-1.5s; }
.balloon-three { left:17%; bottom:17vh; width:48px; height:64px; background:#f3d37c; animation-delay:-2.5s; }
.balloon-four { right:18%; width:62px; height:80px; background:#b9a8f4; animation-delay:-.8s; }
.balloon-five { left:3%; bottom:38vh; width:50px; height:66px; background:#a8e0cf; animation-delay:-3.2s; }
.balloon-six { right:4%; bottom:42vh; width:48px; height:64px; background:#f3d37c; animation-delay:-2s; }
@keyframes birthday-balloon-float { from { transform:translateY(8px) rotate(-7deg); } to { transform:translateY(-30px) rotate(7deg); } }
@keyframes birthday-card-arrive { from { opacity:0; transform:translateY(22px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width: 980px) {
  .gamer-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .main-area { width:min(var(--max),calc(100% - 20px)); }
  .counter-panel { align-items:flex-start; flex-direction:column; }
  .milestone-counters { grid-template-columns:1fr; }
  .birthday-highlight { align-items:flex-start; flex-direction:column; }
  .birthday-photos { width:min(420px,100%); }
  .birthday-photo, .birthday-photo img { min-height:220px; }
  .avatar-portrait { min-height:240px; }
  .global-audio { right:10px; bottom:10px; }
  .rodape { padding-bottom:190px; }
  .intro-content .eyebrow { letter-spacing:.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-stars, .intro-enter, .is-playing .equalizer i { animation:none !important; }
  .birthday-card, .birthday-confetti-piece, .birthday-balloon, .birthday-card .primary-button { animation:none !important; }
  .letter-body.open .letter-text { animation:none; }
}