/* ── AUTO-HOSPEDAGEM DA FIGTREE ────────────────────────────────────────────── Arquivo completo (não subsetado) para que font-feature-settings:"ss02" 1 funcione — ss02 ativa o zero cortado (barra diagonal) da Figtree. */ @font-face { font-family: 'Figtree'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/Figtree-ExtraBold.woff2') format('woff2'); } /* ── DESIGN TOKENS ────────────────────────────────────────────────────────── Fonte única de cores, raios, fontes e transições — use os tokens, não hex soltos. Prefixo --mg- evita colisão com variáveis do tema WordPress. */ :root { /* Superfícies */ --mg-game-bg: #eef2f5; --mg-white: #ffffff; --mg-line: #d8e0ea; /* bordas, cadeados, elementos neutros */ /* Texto */ --mg-ink: #11181d; /* valores de cartas e badges */ --mg-ink-strong: #4d5766; /* títulos e prompts */ --mg-muted: #b8b8b8; /* placeholders, slots vazios, desabilitado */ /* Marca / feedback */ --mg-primary: #4a98f1; --mg-primary-light: #77bbff; /* texto da senha, hovers */ --mg-accent-blue: #4aa6f1; /* botão do tutorial, fim de jogo */ --mg-accent: #9977ff; /* roxo — setas do tutorial, vitória */ --mg-success: #4af1c2; --mg-error: #e55b5b; --mg-gold: #ffdb77; --mg-score: #f1ab4a; /* Raios */ --mg-r-game: 24px; --mg-r-card: 16px; --mg-r-slot: 8px; --mg-r-pill: 81px; /* Tipografia */ --mg-font-ui: "Figtree", sans-serif; --mg-font-score: "Montserrat Alternates", sans-serif; /* Transições */ --mg-t-flip: 0.4s ease; --mg-t-hover: 0.6s ease; } /* ── RESET ESCOPADO ───────────────────────────────────────────────────────── Aplica-se apenas às árvores do plugin (jogo + overlays anexados ao ). Um reset universal (*) vazaria para todo o tema WordPress da página. */ .game-outer, .game-outer *, .game-outer *::before, .game-outer *::after, .tut-screen, .tut-screen *, .tutgp-screen, .tutgp-screen *, .victory-overlay, .victory-overlay * { box-sizing: border-box; margin: 0; padding: 0; } /* ── RAÍZES TIPOGRÁFICAS ──────────────────────────────────────────────────── Propriedades herdáveis nas raízes do plugin (antes em body — vazava no tema). "ss02" 1 → zero cortado na Figtree: distingue o leet "0" da letra "O". */ .game, .tut-screen, .tutgp-screen, .victory-overlay { font-family: var(--mg-font-ui); font-feature-settings: "ss02" 1; } /* ── WRAPPER (WordPress) ────────────────────────────────────────────────── */ .game-outer { width: 100%; } /* ── GAME CONTAINER — flex column responsivo ────────────────────────────── */ .game { position: relative; /* âncora para score-area e preview-timer */ width: 100%; max-width: 960px; margin: 0 auto; background: var(--mg-game-bg); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 16px 24px; /* top reserva espaço para score-area */ min-height: 100svh; } @media (min-width: 600px) { .game { border-radius: var(--mg-r-game); padding: 70px 32px 32px; gap: 20px; min-height: auto; } } /* ── SCORE ──────────────────────────────────────────────────────────────── */ .score-area { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; } @media (min-width: 600px) { .score-area { right: 24px; top: 24px; } } .score-value { font-family: var(--mg-font-score); font-weight: 800; font-size: clamp(18px, 3.5vw, 24px); line-height: 1; color: var(--mg-score); } /* ── PASSWORD BAR ───────────────────────────────────────────────────────── */ .password-bar { position: relative; /* ancora o input absoluto do modo digitação */ box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(4px, 1.5vw, 8px); width: min(100%, 763px); min-height: 64px; padding: 8px 16px; background: var(--mg-white); border: 4px solid var(--mg-line); border-radius: var(--mg-r-pill); transition: border-color 0.35s ease; } .password-bar.all-correct { border-color: var(--mg-success); } .password-bar.all-correct .bar-char { color: var(--mg-success); } .password-bar.has-wrong { border-color: var(--mg-error); } .password-bar.has-wrong .bar-char { color: var(--mg-error); } .bar-char { font-family: var(--mg-font-ui); /* explícito — não herda da body */ font-weight: 800; font-size: 42px; line-height: 1; color: var(--mg-primary-light); letter-spacing: 0.09em; white-space: nowrap; flex: none; transition: color 0.35s ease; } /* ── SLOT (bar-blank) ───────────────────────────────────────────────────── */ .bar-blank { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; /* Sem width/height fixo: slot ocupa só o espaço da letra quando inativo. Dimensões aparecem via :has() abaixo quando um par é formado. */ border: 4px dashed transparent; border-radius: var(--mg-r-slot); transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, background-color 0.15s ease; } /* Slot ativo: borda + caixa aparecem quando há pelo menos um par formado */ :is(.game, .tut-body):has(.pairs-formed .pair-badge) .bar-blank:not(:has(.bar-slot-card)) { width: 47px; height: 47px; border-color: var(--mg-muted); } /* Drop-hover: mesmo spec que a regra acima, declarado depois → vence por ordem */ :is(.game, .tut-body):has(.pairs-formed .pair-badge) .bar-blank.drop-hover { width: var(--drag-badge-width, 76px); border-color: var(--mg-primary); background-color: color-mix(in srgb, var(--mg-primary) 8%, transparent); } /* Slot preenchido: mantém a caixa para o bar-slot-card usar width/height 100% */ .bar-blank:has(.bar-slot-card) { width: 47px; height: 47px; } /* Letra do slot — visível apenas quando vazio; mesma fonte que .bar-char */ .bar-blank__char { font-family: var(--mg-font-ui); font-weight: 800; font-size: 42px; line-height: 1; color: var(--mg-muted); user-select: none; pointer-events: none; } .bar-blank:has(.bar-slot-card) .bar-blank__char { display: none; } .bar-blank:has(.bar-slot-card) { border-color: transparent; } /* --drag-badge-width é injetado em .game por setupBadgeDrag/setupBadgeTouch; fallback para quando o contexto :has() não se aplica */ .bar-blank.drop-hover { width: var(--drag-badge-width, 76px); border-color: var(--mg-primary); background-color: color-mix(in srgb, var(--mg-primary) 8%, transparent); } .bar-slot-card { width: 100%; height: 100%; border-radius: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; animation: pop-in 0.2s ease forwards; transition: opacity 0.15s ease; } .bar-slot-card:hover { opacity: 0.75; } .bar-slot-symbol { font-family: var(--mg-font-ui); font-weight: 800; font-size: 42px; line-height: 1; text-align: center; color: var(--slot-border, #9E9E9E); font-variant-numeric: slashed-zero; } @keyframes pop-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* ── MISMATCH ───────────────────────────────────────────────────────────── */ @keyframes card-shake { 0%, 100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-8px) rotate(-4deg); } 40% { transform: translateX( 8px) rotate( 4deg); } 60% { transform: translateX(-5px) rotate(-2deg); } 80% { transform: translateX( 4px) rotate( 2deg); } } @keyframes card-mismatch-flash { 0%, 80%, 100% { border-color: var(--card-border); box-shadow: 0 4px 16.6px rgba(141, 168, 255, 0.67); } 15%, 60% { border-color: var(--mg-error); box-shadow: 0 4px 16.6px rgba(229, 91, 91, 0.67); } } .card--mismatch { animation: card-shake 0.45s ease forwards; z-index: 2; } .card.card--mismatch .card__front { animation: card-mismatch-flash 0.5s ease forwards; } /* ── CARDS AREA — grid quadrado centralizado ────────────────────────────── */ /* --grid-cols e --grid-cols-mobile são calculados em cards.js via divisores perfeitos de total_cards — garante grid sem células vazias. Ex: 8 cartas → 4×2. */ .cards-area { --grid-cols: 5; /* fallback — sobrescrito por JS */ --grid-cols-mobile: 3; display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: clamp(6px, 2vw, 12px); width: 100%; max-width: calc(var(--grid-cols) * 160px); margin: 0 auto; } @media (max-width: 479px) { .cards-area { grid-template-columns: repeat(var(--grid-cols-mobile), 1fr); max-width: 100%; } } /* ── CARD ───────────────────────────────────────────────────────────────── */ .card { --card-bg: transparent; --card-border: transparent; aspect-ratio: 1; width: 100%; cursor: pointer; perspective: 600px; transform-style: preserve-3d; transition: transform 0.2s ease; } .card:focus-visible { outline: 3px solid var(--mg-score); outline-offset: 3px; border-radius: var(--mg-r-card); } .card__inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform var(--mg-t-flip); } .card[data-state="revealed"] .card__inner { transform: rotateY(180deg); } .card[data-state="matched"] .card__inner { transform: rotateY(0deg); } .card__back, .card__front { position: absolute; inset: 0; border-radius: var(--mg-r-card); display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card__back { background: var(--mg-line); border: 6px solid var(--mg-line); transition: border-color var(--mg-t-hover); } .card[data-state="hidden"] .card__back { box-shadow: 0 4px 0 rgba(82, 115, 186, 0.37); } .card__front { transform: rotateY(180deg); background: var(--card-bg); border: 6px solid var(--card-border); transition: border-color var(--mg-t-hover); } .card[data-state="revealed"] .card__front { box-shadow: 0 4px 16.6px rgba(141, 168, 255, 0.67); } .card[data-state="matched"] .card__back { background: transparent; border: 8px solid var(--mg-line); box-shadow: none; } /* Ícones de cadeado */ .card__lock { flex-shrink: 0; } .card__lock--closed { width: 22px; height: auto; color: #ABB1D7; transition: color var(--mg-t-hover); } .card__lock--open { width: 26px; height: auto; display: none; } @media (min-width: 480px) { .card__lock--closed { width: clamp(18px, 3.5vw, 28px); } .card__lock--open { width: clamp(22px, 4vw, 34px); } } .card[data-state="matched"] .card__lock--closed { display: none; } .card[data-state="matched"] .card__lock--open { display: block; } /* Hover — só após clicar em Começar */ .game--started .card[data-state="hidden"]:hover { transform: translateY(-6px) rotate(2deg); z-index: 2; } .game--started .card[data-state="hidden"]:hover .card__back { border: 6px solid var(--mg-primary); box-shadow: 0 4px 0 rgba(82, 115, 186, 0.37); } .game--started .card[data-state="hidden"]:hover .card__lock--closed { color: var(--mg-primary-light); } .card__value { font-family: var(--mg-font-ui); font-weight: 800; font-size: 32px; line-height: 1; color: var(--mg-ink); text-align: center; font-variant-numeric: slashed-zero; } @media (min-width: 480px) { .card__value { font-size: clamp(32px, 4vw, 42px); } } /* ── CRONÔMETRO DE PREVIEW ──────────────────────────────────────────────── */ /* position: absolute — NÃO entra no flow flex, não empurra as cartas. top/left calculados por JS (logo abaixo da barra de senha). */ .preview-timer { position: absolute; width: 64px; height: 79px; pointer-events: none; z-index: 10; } .preview-timer__stem { position: absolute; left: 35%; right: 35%; top: 0%; bottom: 87.76%; background: var(--mg-line); border-radius: 23px; } .preview-timer__bg { position: absolute; left: 0; right: 0; top: 18.37%; bottom: 0; background: var(--mg-white); border: 8px solid var(--mg-line); border-radius: 50%; overflow: hidden; } .preview-timer__fill { position: absolute; inset: 0; border-radius: 50%; } /* ── PARES FORMADOS ─────────────────────────────────────────────────────── */ .pairs-formed { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; /* Altura fixa — acomoda badges de 101px e timer (79px position:absolute). O botão Começar também vive neste espaço. */ min-height: 113px; } /* Badge externo — dimensões fixas conforme design */ .pair-badge { /* box-sizing explícito: clones do badge são anexados ao durante o drag — fora do alcance do reset escopado do plugin. */ box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: 4px 8px; gap: 10px; width: 60px; height: 101px; background: var(--badge-bg, var(--mg-line)); border-radius: var(--mg-r-slot); opacity: 0; transform: scale(0.4); animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; cursor: grab; user-select: none; -webkit-user-select: none; /* Elimina o delay de 300 ms que o browser usa para detectar scroll vs tap; sem isso o touchmove dispara tarde e o drag parece "lento". */ touch-action: none; } /* Enquanto o badge está sendo arrastado, o original vira placeholder tracejado — o clone sólido (com a cor real) é o visual do drag. */ .pair-badge.is-dragging { animation: none; /* para o forwards-fill do badge-pop */ transform: none; /* reset do scale(0.4) base da animação */ opacity: 1; background: transparent; border: 2px dashed var(--mg-line); cursor: grabbing; } .pair-badge.is-dragging > * { display: none; } .pair-badge.is-placed { box-sizing: border-box; width: 60px; height: 101px; background: transparent; border: 2px dashed var(--mg-line); border-radius: var(--mg-r-slot); cursor: default; padding: 0; /* sem order — badge fica exatamente onde estava, sem reorganizar os outros */ } .pair-badge.is-placed > * { display: none; } /* Frame interno — centraliza letra, seta e símbolo. width:44px define a largura concreta; align-self:stretch seria redundante pois flex:none já impede a stretching pelo container. */ .pair-badge__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; width: 44px; height: 93px; flex: none; } /* Símbolo leet — fica no TOPO do badge, destaque maior (o que o jogador vai arrastar) */ .pair-badge__symbol { font-family: var(--mg-font-ui); font-weight: 800; font-size: 32px; line-height: 34px; display: flex; align-items: center; text-align: center; color: var(--mg-ink); font-variant-numeric: slashed-zero; } /* Letra original — fica na BASE do badge, referência menor */ .pair-badge__char { font-family: var(--mg-font-ui); font-weight: 800; font-size: 24px; line-height: 34px; display: flex; align-items: center; text-align: center; color: var(--mg-ink); font-variant-numeric: slashed-zero; } .pair-badge__arrow { width: 9px; height: 16px; color: var(--badge-arrow, rgba(0,0,0,0.3)); flex-shrink: 0; transform: rotate(-90deg); } @keyframes badge-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } /* ── BOTÃO COMEÇAR — no flow flex antes das cartas ─────────────────────── */ .cards-start-btn { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 24px; height: 44px; background: var(--mg-primary); border: none; border-radius: var(--mg-r-pill); font-family: var(--mg-font-ui); font-weight: 800; font-size: 16px; line-height: 28px; color: var(--mg-white); cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .cards-start-btn__icon { flex-shrink: 0; } .cards-start-btn:hover { background: var(--mg-primary-light); } .cards-start-btn:active { background: var(--mg-primary-light); transform: translateY(1px); } /* ── CARTA VOANDO ───────────────────────────────────────────────────────── */ .card-fly { position: fixed; border-radius: var(--mg-r-card); display: flex; align-items: center; justify-content: center; font-family: var(--mg-font-ui); font-weight: 800; font-size: clamp(14px, 3.5vw, 32px); color: var(--mg-ink); z-index: 1000; pointer-events: none; /* Sem transition — o voo é 100% WAAPI (cards.js/flyCardsToPairs) */ will-change: transform, opacity; } /* ── FASE DE DIGITAÇÃO ───────────────────────────────────────────────────── */ /* Password bar em modo de digitação — exibe células de feedback */ .password-bar--typing { position: relative !important; /* âncora do input absoluto */ flex-wrap: nowrap !important; justify-content: center !important; padding: 8px 24px !important; } /* Células visuais por caractere */ .typing-feedback { position: relative; /* âncora do caret centralizado */ display: flex; align-items: center; justify-content: center; gap: 6px; cursor: text; } .typing-char { display: inline-block; /* necessário para translateX no wobble */ font-family: var(--mg-font-ui); font-weight: 800; font-size: 42px; line-height: 1; color: var(--mg-muted); letter-spacing: 0; min-width: 0.55em; text-align: center; } .typing-char--hint { color: var(--mg-text-secondary, #9e9e9e); opacity: 0.55; } .typing-char--ok { color: var(--mg-primary-light); opacity: 1; } .typing-char--wrong { color: var(--mg-error); opacity: 1; position: relative; } .typing-char--wrong::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 6px; border-radius: 3px; background: var(--mg-error); } /* Cursor de texto piscando — elemento próprio inserido pelo JS */ .typing-caret { display: inline-block; width: 3px; height: 36px; border-radius: 2px; background: var(--mg-primary-light); animation: mg-caret-blink 1.1s steps(1) infinite; } /* Barra vazia: caret centralizado sobre o placeholder */ .typing-feedback--empty .typing-caret { position: absolute; left: 50%; transform: translateX(-50%); } @keyframes mg-caret-blink { 50% { opacity: 0; } } /* Input oculto que captura teclas — invisível, cobre a barra inteira */ .password-bar--typing .password-input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; color: transparent !important; caret-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; font-size: 16px !important; /* ≥ 16px impede zoom automático do iOS ao focar */ touch-action: manipulation !important; /* impede zoom de duplo-toque */ cursor: text !important; z-index: 1; opacity: 0 !important; /* garante invisibilidade contra CSS do tema WP */ } /* Pulso suave na barra enquanto aguarda o primeiro toque (iOS não auto-foca) */ @keyframes mg-bar-pulse { 0%, 100% { border-color: var(--mg-line); } 50% { border-color: var(--mg-primary); } } .password-bar--typing.awaiting-tap { animation: mg-bar-pulse 1.6s ease-in-out infinite; } /* Input que substitui os segmentos da senha. !important em tudo — GeneratePress injeta border, padding, box-shadow em inputs globalmente; sem !important as regras do tema ganham. */ .password-input { font-family: var(--mg-font-ui) !important; font-style: normal !important; font-weight: 800 !important; font-size: clamp(26px, 5vw, 42px) !important; line-height: 1 !important; letter-spacing: 0.09em !important; color: var(--mg-primary-light) !important; background: transparent !important; background-color: transparent !important; border: none !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; text-align: center !important; caret-color: var(--mg-primary) !important; font-variant-numeric: slashed-zero !important; -webkit-appearance: none !important; appearance: none !important; display: block !important; } .password-input::placeholder { color: var(--mg-muted) !important; opacity: 1 !important; } .password-input:focus { outline: none !important; box-shadow: none !important; border: none !important; } .password-input:disabled { cursor: default !important; opacity: 1 !important; } /* Senha digitada corretamente — cor de sucesso via classe (sem inline style no JS) */ .password-bar.all-correct .password-input { color: var(--mg-success) !important; } /* Texto "Agora, digite a senha." — estilo Figma */ .type-prompt { font-family: var(--mg-font-ui); font-style: normal; font-weight: 800; font-size: 24px; line-height: 28px; text-align: center; color: var(--mg-ink-strong); opacity: 0; animation: typing-prompt-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Senha em azul abaixo do prompt — referência visual para o jogador */ .type-password-hint { font-family: var(--mg-font-ui); font-style: normal; font-weight: 800; font-size: 32px; line-height: 34px; letter-spacing: 0.09em; text-align: center; color: var(--mg-ink-strong); font-variant-numeric: slashed-zero; opacity: 0; /* delay de 0.1s: aparece logo depois do prompt */ animation: typing-prompt-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; } /* Animação de entrada suave: fade + leve sobe */ @keyframes typing-prompt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Botão "Próxima fase" / "Jogar novamente" — pop-in com spring */ .cards-start-btn--pop { opacity: 0; animation: typing-prompt-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* ── BANNER DE VITÓRIA ───────────────────────────────────────────────────── */ .victory-overlay { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; overflow: hidden; animation: vb-reveal 0.45s cubic-bezier(0.34, 1.1, 0.64, 1) forwards; } @keyframes vb-reveal { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Seção roxa — layout alinhado ao Figma (345 px, padding top 26 px) */ .vb-top { position: relative; min-height: 345px; background: var(--mg-accent); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 26px; padding-bottom: 24px; gap: 24px; } /* Decoração absoluta — não participa do flex */ .vb-deco { position: absolute; inset: 0; pointer-events: none; } /* Conteúdo principal acima da decoração */ .vb-title, .vb-score, .vb-stats { position: relative; z-index: 1; } /* Entrada escalonada de cada bloco */ @keyframes vb-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Título — Sen 800 32 px */ .vb-title { font-family: var(--mg-font-ui); font-weight: 800; font-size: 32px; line-height: 34px; color: var(--mg-white); text-align: center; margin: 0; animation: vb-fade-up 0.4s 0.15s ease-out both; } /* Score "+200 🏆" — Montserrat Alternates 800 48 px var(--mg-gold) */ .vb-score { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; animation: vb-fade-up 0.4s 0.35s ease-out both; } .vb-score__plus, .vb-score__num { font-family: var(--mg-font-score); font-weight: 800; font-size: 48px; line-height: 34px; color: var(--mg-gold); } .vb-score__trophy { width: 41px; height: auto; } /* Stats */ .vb-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 24px; animation: vb-fade-up 0.35s 0.5s ease-out both; } .vb-stat { display: flex; align-items: center; gap: 8px; } .vb-stat__label { font-family: var(--mg-font-ui); font-weight: 800; font-size: 16px; line-height: 28px; color: var(--mg-white); white-space: nowrap; min-width: 110px; text-align: right; } .vb-stat__count { font-family: var(--mg-font-ui); font-weight: 800; font-size: 24px; line-height: 34px; color: var(--mg-white); min-width: 20px; text-align: center; } .vb-stat__bonus { font-family: var(--mg-font-score); font-weight: 800; font-size: 16px; line-height: 34px; color: var(--mg-gold); } /* Zona de brilhos — dimensões e posição exatas do Figma */ .vb-sparkle-zone { position: absolute; width: 441px; height: 189px; left: calc(50% - 441px/2 + 0.5px); top: calc(50% - 189px/2 - 8px); pointer-events: none; z-index: 10; } /* Brilhos: pulsam + giram por CSS, reposicionados pelo JS apenas quando invisíveis */ .vb-spark { position: absolute; animation: vb-sparkle 2.2s ease-in-out infinite, vb-spark-spin 4s linear infinite; } @keyframes vb-sparkle { 0%, 100% { opacity: 0; transform: scale(0.15); } 40%, 60% { opacity: 1; transform: scale(1); } } @keyframes vb-spark-spin { to { rotate: 360deg; } } /* Seção cinza — botão de próxima fase */ .vb-bottom { background: var(--mg-game-bg); display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-height: 120px; } /* ── FIM DE JOGO (tela azul completa) ────────────────────────────────────── */ /* Holofotes: personagem atrás (z:1), holofotes no meio (z:2 via JS), texto na frente (z:3) */ .victory-overlay--complete .vb-character { z-index: 1 !important; } .victory-overlay--complete .vb-super-title, .victory-overlay--complete .vb-title, .victory-overlay--complete .vb-score, .victory-overlay--complete .vb-stats, .victory-overlay--complete .vb-next-btn, .victory-overlay--complete .vb-character__label { position: relative; z-index: 3; } @keyframes vb-spot-l { 0% { transform: rotate(-16deg); } 100% { transform: rotate(13deg); } } @keyframes vb-spot-c { 0% { transform: rotate(-11deg); } 100% { transform: rotate(14deg); } } @keyframes vb-spot-r { 0% { transform: rotate(13deg); } 100% { transform: rotate(-17deg); } } .victory-overlay--complete .vb-top { background: transparent; flex: 1; padding-bottom: 28px; } .victory-overlay--complete .vb-bottom { background: transparent; min-height: 0; padding: 0; } .victory-overlay--complete .vb-next-btn { background: var(--mg-white); border-color: var(--mg-white); color: var(--mg-accent-blue); position: relative; z-index: 3; } .victory-overlay--complete .vb-next-btn:hover { background: #F0F4FF; } .victory-overlay--complete .cards-start-btn__icon path { fill: var(--mg-accent-blue); } .vb-super-title { font-family: var(--mg-font-ui); font-weight: 800; font-size: clamp(48px, 14vw, 72px); line-height: 1; color: var(--mg-white); text-align: center; margin: 0; position: relative; z-index: 1; animation: vb-fade-up 0.4s 0s ease-out both; } .vb-character { position: absolute; bottom: -47px; /* 1/4 de 187px cortado por baixo */ right: 0; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; z-index: 2; } .vb-character__svg { display: block; flex-shrink: 0; } .vb-character__label { position: absolute; bottom: 55px; left: 24px; max-width: 170px; text-align: left; font-family: var(--mg-font-ui); font-weight: 800; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.95); z-index: 3; pointer-events: none; } @media (min-width: 700px) { .vb-character { right: auto; left: 50%; transform: translateX(-50%); } .vb-character__label { left: 50%; right: auto; transform: translateX(-50%); text-align: center; bottom: 148px; } } .vb-character-sparks { position: absolute; top: 0; left: 0; width: 100%; height: 140px; pointer-events: none; z-index: 4; overflow: visible; } /* ── TUTORIAL ────────────────────────────────────────────────────────────── */ /* * DOM montado uma única vez — nenhum elemento muda de posição entre etapas. * Apenas opacity / color animam. O jogo fica oculto enquanto o tutorial existe. */ /* Tela full-viewport, mesmo bg do jogo */ .tut-screen { position: fixed; inset: 0; background: var(--mg-game-bg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(20px, 3.5vh, 40px); /* espaço fixo entre título e corpo */ padding: clamp(24px, 3.5vh, 32px) clamp(16px, 4vw, 40px) clamp(80px, 13vh, 100px); z-index: 9999; overflow: hidden; } /* Título — só o texto muda (crossfade) */ .tut-title { font-family: var(--mg-font-ui); font-weight: 800; font-size: 32px; line-height: 1.35; color: var(--mg-ink-strong); text-align: center; max-width: min(560px, 94vw); flex-shrink: 0; white-space: pre-line; /* Reserva 2 linhas fixas — evita layout shift quando o texto muda de tamanho */ min-height: calc(2 * 32px * 1.35); } /* Compensate for the taller title so body content stays near its original viewport Y. Mobile: title grew ~40px (17→32px), so cut padding-top and gap. Desktop: title grew ~21px (24→32px), reduce gap only. */ @media (max-width: 699px) { .tut-screen { padding-top: clamp(8px, 3vh, 24px); gap: clamp(8px, 2vh, 20px); } .tut-title { font-size: 24px; min-height: calc(3 * 24px * 1.35); } /* 3 linhas no mobile */ } @media (min-width: 700px) { .tut-screen { gap: clamp(4px, 1.5vh, 20px); } } /* * Corpo central — flex column; conteúdo alinhado ao topo, perto do título. * Todos os filhos ficam em posição fixa; só opacity varia por etapa. */ .tut-body { flex: 1; width: 100%; max-width: min(680px, 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* cola os elementos logo abaixo do título */ /* gap entre a barra e pairsEl — espaço que as linhas atravessam */ gap: clamp(28px, 6vh, 56px); padding-top: clamp(8px, 3vh, 24px); /* espaço extra entre título e primeiro elemento */ position: relative; /* âncora para .tut-lines */ min-height: 0; } /* SVG de linhas animadas — absolute sobre .tut-body, preenche todo o espaço */ .tut-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; } /* Pares */ .tut-pairs { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; } .tut-pair { display: flex; align-items: center; padding: 4px clamp(4px, 1vw, 8px); } .tut-pair__row { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vw, 12px); } .tut-char { font-family: var(--mg-font-ui); font-weight: 800; font-size: clamp(32px, 6vw, 47px); line-height: 1.1; color: var(--mg-ink-strong); } /* Seta CSS triangle */ .tut-arrow { display: flex; align-items: center; flex-shrink: 0; } .tut-arrow svg { display: block; } @media (max-width: 699px) { .tut-body { gap: clamp(56px, 12vh, 96px); } .tut-char { font-size: 42px; } } /* Botão de timer — fixo no rodapé da tela em todos os tamanhos */ .tut-btn { position: fixed; bottom: clamp(16px, 4vh, 28px); left: 50%; transform: translateX(-50%); z-index: 10000; width: 121px; height: 44px; border-radius: var(--mg-r-pill); border: 2px solid var(--mg-line); background: transparent; display: flex; align-items: center; padding: 8px 24px 8px 8px; gap: 8px; cursor: not-allowed; font-family: var(--mg-font-ui); font-weight: 800; font-size: 13px; line-height: 28px; color: var(--mg-muted); white-space: nowrap; transition: border-color 0.25s, color 0.25s, background 0.25s; } .tut-btn:focus { outline: none; } .tut-btn:disabled { pointer-events: none; } .tut-btn--ready { background: var(--mg-accent-blue); border-color: var(--mg-accent-blue); color: var(--mg-white); cursor: pointer; pointer-events: auto; } .tut-btn--ready:hover { background: #3D95D9; border-color: #3D95D9; } /* focus/active/cor do .tut-btn geridos pelo