/* Onboarding: tour interativo do primeiro acesso (static/js/onboarding.js) */
.tour {
    --t-bg: #282a36; --t-ink: #f8f8f2; --t-dim: #a4a8c0; --t-yellow: #f1fa8c; --t-pink: #ff79c6;
    --t-purple: #bd93f9; --t-cyan: #8be9fd; --t-green: #50fa7b; --t-red: #ff5555; --t-line: rgba(255, 255, 255, 0.12);
    margin: auto; width: min(480px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px));
    padding: 0; overflow: hidden; display: none; flex-direction: column;
    background: radial-gradient(120% 60% at 50% 0%, rgba(189, 147, 249, 0.22), transparent 60%), var(--t-bg);
    color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.tour[open] { display: flex; animation: tour-in 0.28s ease-out; }
.tour.closing { animation: tour-out 0.18s ease-in forwards; }
.tour::backdrop { background: rgba(10, 10, 20, 0.72); backdrop-filter: blur(4px); }
@keyframes tour-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes tour-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }

.tour-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0 20px; }
.tour-dots { flex: 1; display: flex; gap: 6px; }
.tour-dots span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.3s; }
.tour-dots span.past { background: rgba(241, 250, 140, 0.55); }
.tour-dots span.on { background: var(--t-yellow); box-shadow: 0 0 10px rgba(241, 250, 140, 0.5); }
.tour-skip { background: none; border: 0; color: var(--t-dim); font: inherit; font-size: 0.85rem; padding: 8px 6px; cursor: pointer; }
.tour-skip:hover { color: var(--t-ink); }

.tour-stage { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 22px 12px; }
.tour-screen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; min-height: 100%; justify-content: center; }
.tour-screen.from-right { animation: tour-slide-r 0.32s ease-out; }
.tour-screen.from-left { animation: tour-slide-l 0.32s ease-out; }
@keyframes tour-slide-r { from { opacity: 0; transform: translateX(36px); } }
@keyframes tour-slide-l { from { opacity: 0; transform: translateX(-36px); } }
.tour h2 { margin: 0; font-size: 1.45rem; line-height: 1.25; outline: none; }
.tour-hl { background: linear-gradient(90deg, var(--t-yellow), var(--t-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour-lead { margin: 0; color: #d6d8e6; font-size: 0.98rem; line-height: 1.5; max-width: 38ch; }
.tour-note { margin: 4px 0 0; color: var(--t-dim); font-size: 0.82rem; }
.tour-ask { margin: 8px 0 0; font-weight: 600; color: var(--t-yellow); }
.tour-replay-hint { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45;
    color: #d6d8e6; background: rgba(139, 233, 253, 0.08); border: 1px dashed rgba(139, 233, 253, 0.35); }
.tour-replay-hint b { color: var(--t-cyan); }
.tour-warn { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; background: rgba(255, 184, 108, 0.12); color: #ffb86c; }

/* Tela 0 · mascote */
.tour-hero { position: relative; width: 120px; height: 110px; display: grid; place-items: center; }
.tour-hero.small { height: 84px; }
.tour-mascot { font-size: 4.2rem; line-height: 1; animation: tour-bob 2.4s ease-in-out infinite; }
.tour-mascot img.fx { width: 84px; height: 84px; }
.tour-pop { position: absolute; font-size: 1.6rem; top: 6px; right: 0; animation: tour-float 3s ease-in-out infinite; }
.tour-pop.p2 { top: auto; bottom: 6px; left: -4px; right: auto; animation-delay: -1.5s; }
.tour-pop img.fx { width: 30px; height: 30px; }
@keyframes tour-bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes tour-float { 50% { transform: translateY(-10px) rotate(8deg); } }

.tour-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.tour-lang {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; min-height: 92px;
    border-radius: 16px; border: 2px solid var(--t-line); background: rgba(255, 255, 255, 0.04);
    color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.tour-lang:hover, .tour-lang:focus-visible { border-color: var(--t-purple); outline: none; }
.tour-lang:active { transform: scale(0.96); }
.tour-lang[aria-checked="true"] { border-color: var(--t-yellow); background: rgba(241, 250, 140, 0.1); animation: tour-pick 0.35s ease-out; }
@keyframes tour-pick { 40% { transform: scale(1.06); } }
.tour-flag { font-size: 2rem; line-height: 1; }
.tour-flag img.fx { width: 40px; height: 40px; }
.tour-link { background: none; border: 0; color: var(--t-cyan); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 6px; }

/* Tela 1 · vídeo vira aula */
.tour-demo { width: 100%; display: flex; flex-direction: column; gap: 12px; margin: 4px 0; }
.tour-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--t-line); text-align: left; }
.tour-typed { flex: 1; overflow: hidden; white-space: nowrap; color: var(--t-cyan); font-size: 0.9rem; width: 0;
    border-right: 2px solid var(--t-yellow); animation: tour-type 1.3s steps(28) 0.3s forwards, tour-caret 0.7s step-end 4; }
@keyframes tour-type { to { width: 100%; } }
@keyframes tour-caret { 50% { border-color: transparent; } }
.tour-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t-yellow); color: #282a36; font-weight: 700;
    animation: tour-press 0.3s ease 1.7s; }
@keyframes tour-press { 50% { transform: scale(0.8); } }
.tour-progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tour-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--t-purple), var(--t-pink)); animation: tour-load 1.2s ease-in-out 1.9s forwards; }
@keyframes tour-load { to { width: 100%; } }
.tour-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tour-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--t-line); font-size: 0.8rem; font-weight: 600;
    opacity: 0; transform: translateY(18px) scale(0.9); animation: tour-deal 0.4s cubic-bezier(.2, 1.4, .5, 1) forwards;
}
.tour-card b { font-size: 1.4rem; line-height: 1; }
.tour-card b img.fx { width: 28px; height: 28px; }
.tour-card.c1 { animation-delay: 3.1s; } .tour-card.c2 { animation-delay: 3.25s; } .tour-card.c3 { animation-delay: 3.4s; }
.tour-card.c4 { animation-delay: 3.55s; } .tour-card.c5 { animation-delay: 3.7s; } .tour-card.c6 { animation-delay: 3.85s; border-color: var(--t-yellow); }
@keyframes tour-deal { to { opacity: 1; transform: none; } }

/* Tela 2 · laboratório */
.tour-quiz { position: relative; width: 100%; padding: 18px 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--t-line); }
.tour-q { margin: 0 0 14px; font-size: 1.35rem; font-weight: 600; line-height: 1.5; }
.tour-blank { display: inline-block; min-width: 3.2em; padding: 0 6px; border-bottom: 3px dashed var(--t-yellow); color: var(--t-yellow); }
.tour-quiz.solved .tour-blank { border-bottom-style: solid; color: var(--t-green); border-color: var(--t-green); animation: tour-pick 0.4s; }
.tour-opts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tour-opt {
    min-width: 84px; min-height: 48px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--t-line);
    background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: transform 0.1s;
}
.tour-opt:hover:not(:disabled) { border-color: var(--t-purple); }
.tour-opt:active { transform: scale(0.95); }
.tour-opt.right { border-color: var(--t-green); background: rgba(80, 250, 123, 0.15); }
.tour-opt.wrong { border-color: var(--t-red); opacity: 0.55; animation: tour-shake 0.35s; }
@keyframes tour-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tour-feedback { min-height: 1.4em; margin: 12px 0 0; font-size: 0.92rem; line-height: 1.45; color: #d6d8e6; }
.tour-feedback small { color: var(--t-dim); }
.tour-confetti { position: absolute; z-index: 5; width: 8px; height: 12px; border-radius: 2px; pointer-events: none;
    animation: tour-confetti 0.9s ease-out forwards; }
@keyframes tour-confetti { to { transform: translate(var(--dx), calc(var(--dy) + 80px)) rotate(var(--rot)); opacity: 0; } }

/* Tela 3 · flashcard */
.tour-flip { position: relative; width: min(280px, 100%); height: 170px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
    cursor: pointer; perspective: 900px; }
.tour-face {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px;
    border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.5s cubic-bezier(.4, .2, .2, 1);
    background: linear-gradient(145deg, #3b3550, #2c2e3e); border: 1px solid rgba(189, 147, 249, 0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.tour-face.back { transform: rotateY(180deg); border-color: rgba(80, 250, 123, 0.45); }
.tour-flip.flipped .front { transform: rotateY(-180deg); }
.tour-flip.flipped .back { transform: rotateY(0); }
.tour-face small { color: var(--t-dim); font-size: 0.75rem; }
.tour-face b { font-size: 1.6rem; }
.tour-face.back b { font-size: 1.05rem; line-height: 1.4; }
.tour-face i { color: var(--t-cyan); font-style: normal; font-size: 0.85rem; }
.tour-face em { color: var(--t-yellow); font-style: normal; font-size: 0.75rem; animation: tour-blink 1.6s ease-in-out infinite; }
@keyframes tour-blink { 50% { opacity: 0.35; } }
.tour-grades { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tour-grades[hidden] { display: none; }
.tour-grades button { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--t-line); background: rgba(255, 255, 255, 0.06);
    color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; animation: tour-deal 0.3s ease-out both; }
.tour-grades button.picked { border-color: var(--t-yellow); background: rgba(241, 250, 140, 0.12); }
.s3 .tour-feedback { margin: 0; }

/* Tela 4 · pedidos */
.tour-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tour-chip {
    text-align: left; padding: 12px 14px; min-height: 48px; border-radius: 14px 14px 14px 4px; border: 1px solid var(--t-line);
    background: rgba(139, 233, 253, 0.07); color: inherit; font: inherit; font-size: 0.92rem; cursor: pointer;
    opacity: 0; animation: tour-deal 0.35s ease-out forwards; transition: border-color 0.15s, background 0.15s;
}
.tour-chip:nth-child(2) { animation-delay: 0.12s; } .tour-chip:nth-child(3) { animation-delay: 0.24s; } .tour-chip:nth-child(4) { animation-delay: 0.36s; }
.tour-chip:hover, .tour-chip:focus-visible { border-color: var(--t-cyan); background: rgba(139, 233, 253, 0.14); outline: none; }

/* Tela 5 · hábito */
.tour-habit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.tour-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--t-line); }
.tour-stat > span { font-size: 2rem; line-height: 1; }
.tour-stat > span img.fx { width: 40px; height: 40px; }
.tour-stat b { font-size: 1.15rem; }
.tour-stat b[data-count] { font-size: 1.8rem; color: #ffb86c; }
.tour-stat small { color: var(--t-dim); font-size: 0.75rem; }
.tour-fire { animation: tour-flame 1.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes tour-flame { 50% { transform: scale(1.12) rotate(-3deg); } }
.tour-gift { animation: tour-wiggle 2.2s ease-in-out infinite; }
@keyframes tour-wiggle { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } }

/* Tela 6 · primeira ação */
.tour-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tour-action {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px; border-radius: 16px; text-align: left;
    border: 1px solid var(--t-line); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tour-action:first-child { border-color: rgba(241, 250, 140, 0.6); background: rgba(241, 250, 140, 0.08); }
.tour-action:hover, .tour-action:focus-visible { border-color: var(--t-yellow); outline: none; }
.tour-action:active { transform: scale(0.98); }
.tour-action > span:first-child { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.tour-action > span:first-child img.fx { width: 30px; height: 30px; }
.tour-action > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.tour-action small { color: var(--t-dim); font-size: 0.8rem; }

/* Navegação */
.tour-nav { display: flex; align-items: center; gap: 12px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tour-back { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--t-line); background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }
.tour-count { flex: 1; text-align: center; color: var(--t-dim); font-size: 0.8rem; }
.tour-next {
    min-height: 48px; padding: 0 24px; border-radius: 24px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem;
    background: linear-gradient(90deg, var(--t-yellow), #ffd56b); color: #282a36; box-shadow: 0 6px 18px rgba(241, 250, 140, 0.25); transition: transform 0.1s;
}
.tour-next:active { transform: scale(0.96); }
.tour-next.ghost { background: none; color: var(--t-dim); box-shadow: none; border: 1px solid var(--t-line); font-weight: 500; }

/* Destaque dos memes quando o tour leva até eles */
.tour-glow { animation: tour-glow 1.2s ease-in-out 2; border-radius: 18px; }
@keyframes tour-glow { 50% { box-shadow: 0 0 0 3px rgba(241, 250, 140, 0.8), 0 0 30px rgba(241, 250, 140, 0.4); } }

/* Celular: tela cheia, botões ao alcance do polegar */
@media (max-width: 600px) {
    .tour { width: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; border: 0; }
    .tour-stage { padding: 4px 16px 10px; }
    .tour h2 { font-size: 1.3rem; }
    .tour-q { font-size: 1.2rem; }
}
@media (max-height: 600px) { .tour-hero { height: 70px; } .tour-mascot { font-size: 3rem; } }

@media (prefers-reduced-motion: reduce) {
    .tour *, .tour { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
    .tour-typed { width: 100%; }
}