/* ══════════════════════════════════════════════════════════════
Portal do Aluno — otPokémon
Design tokens + layout LMS. Tema escuro com acentos vermelho/âmbar
(identidade Pokémon), tipografia legível e cartões arejados.
═══════════════════════════════════════════════════════════════ */
:root {
/* ── Superfícies (Pokédex após o expediente: azul-meia-noite) ── */
--bg: #0a0f1e;
--bg-2: #111a30;
--panel: #16203a;
--panel-2: #1e2b49;
--border: #2b3a63;
--text: #eaf0fb;
--muted: #94a3c6;
/* Aliases compartilhados: evitam módulos com texto preto ou fundo inválido. */
--fg: var(--text);
--surface: var(--panel);
--card: var(--panel);
--danger: #e3350d;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* ── Identidade Pokémon ──────────────────────────────────── */
--brand: #ee1515; /* vermelho Pokébola / logo */
--brand-2: #ff5c3a;
--brand-ink: #7a1204; /* sombra profunda do vermelho */
--accent: #ffcb05; /* amarelo Pikachu / logo */
--accent-2: #ffe27a;
--royal: #3b4cca; /* azul do logotipo Pokémon */
--lens: #7fd7ff; /* ciano da lente do Pokédex */
--topic: #4f8cff;
--call: #21c07a;
--deadline: #ff8a3d;
/* ── Paleta dos 18 tipos (badges, acentos, decoração) ────── */
--t-normal:#9aa0aa; --t-fire:#ff9d55; --t-water:#4d90d5; --t-grass:#63bc5a;
--t-electric:#f4d23c; --t-ice:#73cec0; --t-fighting:#ce4266; --t-poison:#ab6ac8;
--t-ground:#d97845; --t-flying:#8fa9de; --t-psychic:#fa7179; --t-bug:#90c12c;
--t-rock:#c7b78b; --t-ghost:#5269ac; --t-dragon:#0a6dc4; --t-dark:#595366;
--t-steel:#5a8ea1; --t-fairy:#ec8fe6;
--radius: 16px;
--radius-sm: 11px;
--shadow: 0 10px 26px rgba(3, 7, 18, .38);
--shadow-sm: 0 4px 12px rgba(3, 7, 18, .30);
--ring: 0 0 0 3px rgba(255, 203, 5, .28);
/* ── Tipografia ──────────────────────────────────────────── */
--font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
--font-pixel: "Press Start 2P", "Baloo 2", system-ui, sans-serif; /* estilo Fire Red (só na batalha) */
--font-pixel: "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
/* ── Escala de spacing (base 4px) — usar no lugar de valores soltos ── */
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem;
--sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
--gap-tight: var(--sp-2); /* dentro de um card */
--gap-md: var(--sp-3); /* entre elementos irmãos */
--gap-loose: var(--sp-5); /* entre blocos/seções */
--card-pad: 1.15rem 1.3rem;
/* ── Escala tipográfica (6 tamanhos nominais) ────────────── */
--fs-h1: 1.6rem; --fs-h2: 1.3rem; --fs-h3: 1.1rem;
--fs-body: 1rem; --fs-sm: .85rem; --fs-xs: .72rem;
/* ── Durações de transição (padronizadas em 3 níveis) ────── */
--dur-fast: .09s; --dur: .2s; --dur-slow: .4s;
}
/* ── Participação da equipe de mentoria ───────────────────── */
.mentor-rewards-panel {
position: relative;
overflow: hidden;
margin: 1rem 0 1.15rem;
padding: 1.05rem;
border: 1px solid rgba(105, 180, 255, .32);
border-radius: 22px;
background: linear-gradient(135deg, rgba(20, 48, 91, .96), rgba(29, 31, 69, .96) 58%, rgba(80, 36, 64, .94));
box-shadow: 0 16px 38px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255,255,255,.08);
}
.mentor-rewards-panel::after { content: '⚡'; position: absolute; right: 1.4rem; top: .7rem; font-size: 3.8rem; opacity: .09; transform: rotate(-12deg); pointer-events: none; }
.mentor-rewards-head, .mentor-rewards-stat-grid, .mentor-rewards-columns { position: relative; z-index: 1; }
.mentor-rewards-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.mentor-rewards-title h2 { margin:.12rem 0 .2rem; font-size:clamp(1.2rem, 2.5vw, 1.65rem); }
.mentor-rewards-title p { margin:0; }
.mentor-rewards-level { display:grid; gap:.12rem; min-width:105px; padding:.58rem .75rem; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(5,13,31,.24); text-align:right; }
.mentor-rewards-level span { color:#a8d8ff; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.mentor-rewards-level strong { color:#fff4a8; font-size:1.05rem; }
.mentor-rewards-stat-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.65rem; }
.mentor-rewards-stat { display:grid; gap:.18rem; min-width:0; padding:.72rem .8rem; border:1px solid rgba(255,255,255,.16); border-radius:15px; background:rgba(4,14,35,.3); }
.mentor-rewards-stat span { color:#c5d5f2; font-size:.75rem; font-weight:800; }
.mentor-rewards-stat strong { color:#fff; font-size:1.3rem; line-height:1.05; }
.mentor-rewards-stat small { color:#9fb2d5; font-size:.7rem; }
.mentor-rewards-stat.xp strong { color:#8dd5ff; }
.mentor-rewards-stat.coins strong { color:#ffe178; }
.mentor-rewards-stat.actions strong { color:#b7f5c6; }
.mentor-rewards-columns { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:.65rem; margin-top:.65rem; }
.mentor-rewards-block { min-width:0; padding:.75rem; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:rgba(4,14,35,.25); }
.mentor-rewards-block-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; color:#ecf4ff; font-size:.86rem; }
.mentor-rewards-block-title > span { color:#a9bfdf; font-size:.7rem; }
.mentor-rewards-meter + .mentor-rewards-meter { margin-top:.65rem; }
.mentor-reward-meter-top { display:flex; justify-content:space-between; gap:.5rem; color:#afc2df; font-size:.72rem; }
.mentor-reward-meter-top strong { color:#f5f8ff; }
.mentor-reward-meter-track { height:7px; overflow:hidden; margin-top:.32rem; border-radius:999px; background:rgba(255,255,255,.1); }
.mentor-reward-meter-track span { display:block; height:100%; border-radius:inherit; background:#74c9ff; }
.mentor-reward-meter.tone-gold .mentor-reward-meter-track span { background:#ffd65a; }
.mentor-rewards-steps { display:grid; gap:.35rem; }
.mentor-reward-step { display:grid; grid-template-columns:1.1rem minmax(0,1fr) auto; align-items:center; gap:.35rem; color:#c3d1e8; font-size:.76rem; }
.mentor-reward-step strong { color:#a9bfdf; font-size:.72rem; }
.mentor-reward-step.is-done { color:#caffd7; }
.mentor-reward-step.is-done strong { color:#9bf2b5; }
.mentor-reward-step-icon { color:#7692bc; font-weight:900; }
.mentor-reward-step.is-done .mentor-reward-step-icon { color:#8ef0b1; }
.mentor-rewards-rank { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.42rem; padding:.32rem .38rem; border-radius:8px; color:#c5d5ec; font-size:.74rem; }
.mentor-reward-rank + .mentor-reward-rank { margin-top:.2rem; }
.mentor-reward-rank.is-me { background:rgba(255,214,84,.12); color:#fff2a6; }
.mentor-reward-rank-pos { color:#8fa9d3; font-weight:900; }
.mentor-reward-rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mentor-rewards-loading, .mentor-rewards-error { color:#b7c8e5; font-size:.83rem; }
.admin-reward-ranking { display:grid; gap:.35rem; margin-bottom:.8rem; }
.admin-reward-row { display:flex; justify-content:space-between; gap:.7rem; padding:.55rem .65rem; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.035); color:var(--text); font-size:.78rem; }
.admin-reward-row span { color:var(--muted); text-align:right; }
.admin-reward-rules { display:grid; gap:.4rem; max-height:42vh; overflow:auto; }
.admin-reward-rule { display:grid; grid-template-columns:minmax(0,1fr) 75px 75px auto; align-items:center; gap:.4rem; padding:.35rem 0; color:var(--text); font-size:.77rem; }
.admin-reward-input { width:100%; min-width:0; }
@media (max-width: 820px) {
.mentor-rewards-columns { grid-template-columns:1fr 1fr; }
.mentor-rewards-ranking { grid-column:1 / -1; }
}
@media (max-width: 520px) {
.mentor-rewards-panel { margin:.75rem 0 1rem; padding:.82rem; border-radius:18px; }
.mentor-rewards-head { align-items:stretch; flex-direction:column; gap:.6rem; }
.mentor-rewards-level { text-align:left; }
.mentor-rewards-stat-grid, .mentor-rewards-columns { grid-template-columns:1fr; }
.mentor-rewards-ranking { grid-column:auto; }
.admin-reward-row { align-items:flex-start; flex-direction:column; }
.admin-reward-row span { text-align:left; }
.admin-reward-rule { grid-template-columns:1fr 1fr; }
.admin-reward-rule span { grid-column:1 / -1; }
}
* { box-sizing: border-box; }
/* #136 Tamanho de fonte ajustável: escala o rem (html) e a base do body. */
html { font-size: calc(100% * var(--font-scale, 1)); }
body {
margin: 0;
font-family: var(--font);
font-size: calc(15.5px * var(--font-scale, 1));
background:
radial-gradient(1100px 560px at 82% -12%, rgba(59, 76, 202, .28) 0, transparent 60%),
radial-gradient(900px 520px at -10% 8%, rgba(238, 21, 21, .14) 0, transparent 55%),
var(--bg);
background-attachment: fixed;
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Touch/telas pequenas: background-attachment: fixed causa MUITO repaint
(rolagem travada). Fixamos o gradiente atrás e deixamos o body rolar liso. */
@media (hover: none), (max-width: 820px) {
body { background-attachment: scroll; }
}
/* Títulos com a fonte display arredondada (cara de jogo Pokémon). */
h1, h2, h3, h4,
.brand h1, .section-head h2, .progress-card h2, .xp-info h2 {
font-family: var(--font-display);
letter-spacing: .01em;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.eyebrow {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .72rem;
font-weight: 700;
color: var(--accent);
}
/* ── Botões ─────────────────────────────────────────────── */
.btn {
font-family: inherit;
font-size: .9rem;
font-weight: 700;
border: 1px solid transparent;
border-radius: 12px;
padding: .6rem 1.1rem;
cursor: pointer;
letter-spacing: .01em;
transition: transform .08s ease, box-shadow .2s ease, background .2s, border-color .2s, filter .2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(255, 203, 5, .55); outline-offset: 2px; }
.btn-primary {
background: linear-gradient(180deg, var(--brand-2), var(--brand));
color: #fff;
box-shadow: 0 4px 14px rgba(227, 53, 13, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover {
filter: brightness(1.06); transform: translateY(-1px);
box-shadow: 0 7px 20px rgba(227, 53, 13, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--brand); background: var(--panel-2); transform: translateY(-1px); }
.btn-block { width: 100%; margin-top: .4rem; }
/* ── Card base reutilizável ──────────────────────────────────
Padrão compartilhado por progress-card, day-card, poll-card,
activity-card, exercise-card, ann-card etc. Componha com `card`
e sobrescreva só o que difere. */
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--card-pad);
}
.card.pad-lg { padding: 1.3rem 1.5rem; }
.card.flow { display: flex; flex-direction: column; gap: var(--gap-tight); }
/* Parágrafo de introdução logo abaixo de um .section-head (aproxima do título
sem depender de margem negativa inline). */
.section-intro { margin: -.4rem 0 var(--gap-md); }
/* ══ LOGIN ═════════════════════════════════════════════════ */
.login-view {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1.5rem;
}
.login-card {
width: 100%;
max-width: 400px;
background: linear-gradient(180deg, var(--panel), var(--bg-2));
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; }
.brand h1 { font-size: 1.35rem; margin: 0; }
.brand-sub { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }
.brand-badge {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 50%;
font-weight: 800;
color: #fff;
background:
linear-gradient(#e3350d 0 50%, #f5f5f5 50% 100%);
border: 3px solid #1a1a1a;
box-shadow: inset 0 0 0 6px rgba(0,0,0,.05);
font-size: .95rem;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.brand-badge.sm { width: 34px; height: 34px; font-size: .75rem; border-width: 2px; }
.login-form { display: flex; flex-direction: column; gap: .35rem; }
.login-form label { font-size: .8rem; font-weight: 600; margin-top: .6rem; }
input, textarea, select {
font-family: inherit;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: 10px;
padding: .65rem .8rem;
font-size: .95rem;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--brand-2);
box-shadow: 0 0 0 3px rgba(227, 53, 13, .18);
}
/* Sliders (volume, tamanho de fonte, etc.): a regra genérica acima aplicava
padding/borda/fundo ao , o que quebrava o trajeto do thumb
(chegava no 0 mas não no máximo ao arrastar). Aqui restauramos o slider
nativo, sem padding/borda, com a cor da marca. */
input[type="range"] {
-webkit-appearance: auto; appearance: auto;
padding: 0; border: none; background: transparent; border-radius: 0;
accent-color: var(--brand); height: 1.5rem; cursor: pointer; vertical-align: middle;
}
input[type="range"]:focus { box-shadow: none; }
.form-error { color: #ff7a7a; font-size: .85rem; min-height: 1.1rem; margin: .3rem 0 0; }
/* Primeiro acesso: status do código + bloqueio da senha até validar. */
.fa-code-status { margin: .25rem 0 0; min-height: 1.05rem; color: var(--muted); }
.fa-code-status.ok { color: var(--call); font-weight: 700; }
.fa-code-status.bad { color: #ff7a7a; font-weight: 700; }
.fa-locked input[type="password"], .fa-locked button[type="submit"] { opacity: .5; }
.fa-locked input[type="password"] { cursor: not-allowed; }
.login-foot { text-align: center; color: var(--muted); font-size: .8rem; margin: 1.3rem 0 0; }
.login-view-legacy { align-items: center; }
.login-card-legacy { position: relative; }
.legacy-maintenance-note {
margin: 0 0 1rem;
padding: .7rem .8rem;
border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
border-radius: 10px;
color: var(--text);
background: color-mix(in srgb, var(--accent) 10%, var(--panel));
font-size: .78rem;
line-height: 1.45;
}
/* ══ APP / TOPBAR ══════════════════════════════════════════ */
.topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: .7rem 1.3rem;
/* Fundo quase opaco (sem backdrop-filter: blur, que trava a rolagem
numa barra sticky por reamostrar o desfoque a cada frame). */
background: #141a29;
border-bottom: 1px solid var(--border);
/* Rola junto com a página (não fica fixa sobrepondo o conteúdo). */
position: relative; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: .6rem; }
/* A nav ocupa o meio e QUEBRA em linha quando não cabe, em vez de estourar a
largura da página (que obrigava a arrastar a barra do topo pro lado). */
.topbar-nav { display: flex; gap: .3rem; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: .3rem; }
.nav-btn {
background: transparent; border: none; color: var(--muted);
font: inherit; font-weight: 600; cursor: pointer;
padding: .5rem .85rem; border-radius: 9px;
}
.nav-btn:hover { color: var(--text); background: var(--panel); }
.nav-btn.active { color: #fff; background: var(--brand); }
.topbar-right { display: flex; align-items: center; gap: .7rem; }
.user-chip {
font-size: .85rem; color: var(--muted);
background: var(--panel); padding: .4rem .7rem; border-radius: 20px;
border: 1px solid var(--border);
}
.layout { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.3rem 4rem; }
.section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem; margin-bottom: 1.1rem;
}
.section-head h2 { margin: .2rem 0 0; font-size: 1.5rem; }
/* ══ MENTORIA — progresso ══════════════════════════════════ */
.progress-card {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
background: linear-gradient(120deg, var(--panel), var(--panel-2));
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.3rem 1.5rem;
}
.progress-card h2 { margin: .25rem 0 .1rem; font-size: 1.35rem; }
.progress-ring {
width: 76px; height: 76px; border-radius: 50%;
display: grid; place-items: center;
background: conic-gradient(var(--accent) var(--pct, 0%), var(--border) 0);
font-weight: 800;
}
.progress-ring span {
width: 58px; height: 58px; border-radius: 50%;
background: var(--panel); display: grid; place-items: center;
font-size: .95rem;
}
.progress-bar {
height: 8px; background: var(--border); border-radius: 20px;
overflow: hidden; margin: .9rem 0 1.6rem;
}
.progress-fill {
height: 100%; width: 0;
background: linear-gradient(90deg, var(--brand), var(--accent));
transition: width .5s ease;
}
.mentoria-grid {
display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.4rem;
}
@media (max-width: 860px) { .mentoria-grid { grid-template-columns: 1fr; } }
/* ══ MENTORIA — Cartão de Treinador (redesign) ═════════════════════
ID card estilo jogo: parceiro num "badge", nome/nível, barra de jornada
e estatísticas. Marca d'água de Pokébola no canto. */
.trainer-card {
--tc-a: #3f74f5; --tc-b: #7b5cff; --tc-c: #22c1e6; --tc-ink: #0f1c44;
position: relative; overflow: hidden; isolation: isolate;
border-radius: 20px; padding: 1rem 1.1rem 1.05rem; color: #fff;
background:
radial-gradient(130% 120% at 0% 0%, rgba(255,255,255,.22), transparent 42%),
linear-gradient(135deg, var(--tc-b), var(--tc-a) 52%, var(--tc-c));
border: 1px solid rgba(255,255,255,.4);
box-shadow: 0 14px 34px rgba(20,32,80,.38), inset 0 1px 0 rgba(255,255,255,.3);
}
.trainer-card.is-staff { --tc-a: #e0483d; --tc-b: #b3253a; --tc-c: #f2a622; --tc-ink: #3a0d12; }
/* Brilho holográfico diagonal + marca d'água de Pokébola no canto. */
.tc-holo {
position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
mix-blend-mode: overlay;
background: repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 6px, transparent 6px 20px);
}
.trainer-card::after {
content: ''; position: absolute; z-index: 0; right: -44px; top: -48px;
width: 172px; height: 172px; border-radius: 50%; pointer-events: none; opacity: .5;
border: 11px solid rgba(255,255,255,.14);
background: radial-gradient(circle, #fff 0 11px, rgba(255,255,255,.35) 11px 19px, transparent 19px) center/100% 100% no-repeat;
}
/* ── Topo: marca + nº/dia ── */
.tc-top {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
margin-bottom: .9rem;
}
.tc-brand {
display: inline-flex; align-items: center; gap: .42rem;
font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .95;
}
.tc-pball {
width: 15px; height: 15px; border-radius: 50%; position: relative; flex: 0 0 auto;
background: linear-gradient(#ff5c5c 0 46%, #1c1c1c 46% 54%, #fff 54% 100%);
box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.4);
}
.tc-pball::after {
content: ''; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px;
border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #1c1c1c;
}
.tc-idno {
font-size: .66rem; font-weight: 800; letter-spacing: .05em; white-space: nowrap;
background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.3);
padding: .2rem .6rem; border-radius: 999px;
}
/* ── Corpo em 3 zonas: foto · identidade · time ── */
.tc-main {
position: relative; z-index: 1;
display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, .86fr);
gap: 1rem; align-items: start;
}
/* Foto do treinador (moldura) + selo de nível */
.tc-photo { position: relative; flex: 0 0 auto; }
.tc-badge {
position: relative; cursor: pointer; padding: 0;
width: 94px; height: 102px; border-radius: 15px; display: grid; place-items: center; overflow: hidden;
background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.32), rgba(255,255,255,.08));
border: 2px solid rgba(255,255,255,.55);
box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 20px rgba(255,255,255,.16);
transition: transform .12s, box-shadow .15s;
}
.tc-badge::before { /* sombra de "piso" sob o treinador */
content: ''; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 12px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.3), transparent 72%);
}
.tc-badge:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(0,0,0,.34), inset 0 0 20px rgba(255,255,255,.22); }
.tc-badge.locked { cursor: default; }
.tc-badge.locked:hover { transform: none; }
.tc-mon { width: 64px; height: 64px; image-rendering: pixelated; position: relative; z-index: 1; }
.tc-trainer { width: 86px; height: 86px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); position: relative; z-index: 1; }
.tc-trainer-empty { font-size: 2.4rem; line-height: 1; }
.tc-trainer-hint {
position: absolute; left: 0; right: 0; bottom: 7px; text-align: center;
font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .95;
}
.tc-lvl {
position: absolute; right: -7px; bottom: -7px; z-index: 2;
min-width: 40px; display: grid; justify-items: center; line-height: 1;
padding: .26rem .42rem .3rem; border-radius: 12px;
background: linear-gradient(#ffd23f, #ffb020); color: #4a2c00;
border: 2px solid #fff; box-shadow: 0 3px 9px rgba(0,0,0,.32);
}
.tc-lvl small { font-size: .5rem; font-weight: 900; letter-spacing: .09em; opacity: .82; }
.tc-lvl b { font-size: 1.08rem; font-weight: 900; }
/* Identidade: nome + cargo, jornada e stats */
.tc-ident { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.tc-namerow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tc-name { font-size: 1.42rem; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.tc-role {
font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.42);
padding: .18rem .55rem; border-radius: 999px;
}
.tc-mentor {
font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
background: linear-gradient(180deg, #ffe08a, #f2b705); color: #4a3400;
border: 1px solid rgba(0,0,0,.25); padding: .18rem .5rem; border-radius: 999px;
}
.tc-journey-row { display: flex; flex-direction: column; gap: .32rem; }
.tc-journey-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tc-journey-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.tc-journey-pct { font-size: .95rem; font-weight: 900; }
.tc-bar { height: 10px; background: rgba(0,0,0,.26); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.tc-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffd23f, #fff3b0); box-shadow: 0 0 10px rgba(255,210,63,.6); transition: width .6s ease; }
.tc-journey-sub { font-size: .72rem; opacity: .88; line-height: 1.35; }
.tc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tc-stat {
display: grid; grid-template-columns: auto auto; grid-template-areas: 'ico val' 'lbl lbl';
justify-content: center; align-items: center; text-align: center;
column-gap: .42rem; row-gap: .1rem; padding: .55rem .5rem; border-radius: 13px;
background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.1));
border: 1px solid rgba(255,255,255,.36);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.12);
}
.tc-stat-ico { grid-area: ico; font-size: 1.2rem; line-height: 1; }
.tc-stat-val { grid-area: val; font-weight: 900; font-size: 1.3rem; line-height: 1; }
.tc-stat-lbl { grid-area: lbl; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
/* Painel de time (Pokébag) à direita — preenche o cartão */
.tc-collection {
position: relative; z-index: 1; align-self: stretch;
display: flex; flex-direction: column; gap: .5rem;
background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.2);
border-radius: 14px; padding: .65rem .7rem;
}
.tc-col-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.tc-col-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .92; }
.tc-bag-btn {
font: inherit; font-size: .66rem; font-weight: 800; cursor: pointer; white-space: nowrap;
color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
border-radius: 999px; padding: .14rem .5rem; transition: background .15s;
}
.tc-bag-btn:hover { background: rgba(255,255,255,.3); }
.tc-bag { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.tc-slot {
aspect-ratio: 1; border-radius: 10px; cursor: pointer; padding: 0;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
display: grid; place-items: center; transition: transform .08s, background .15s;
}
.tc-slot:hover { transform: translateY(-1px); background: rgba(255,255,255,.26); }
.tc-slot img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.tc-slot.empty { border-style: dashed; }
.tc-slot.empty::after { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); }
.tc-caught-empty { margin: 0; font-size: .74rem; opacity: .9; line-height: 1.4; }
/* Ações rápidas do cartão (Bag + Passe) — barra full-width abaixo do conteúdo. */
.tc-actions {
position: relative; z-index: 1; grid-column: 1 / -1;
display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .2rem;
}
.tc-action-btn {
display: flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
font: inherit; font-weight: 800; font-size: .82rem; color: #fff;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
border-radius: 12px; padding: .55rem .6rem; transition: background .15s, transform .08s;
}
.tc-action-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.tc-action-btn .tca-ico { font-size: 1.05rem; }
/* Modal: montar time (Pokébag) */
.tm-team { display: flex; gap: .45rem; flex-wrap: wrap; margin: .7rem 0 1rem; }
.tm-slot { width: 54px; height: 54px; border-radius: 10px; cursor: pointer; padding: 0; background: var(--panel-2); border: 2px solid var(--border); display: grid; place-items: center; }
.tm-slot img { width: 46px; height: 46px; image-rendering: pixelated; }
.tm-slot.empty { border-style: dashed; }
.tm-slot.empty::after { content: '+'; color: var(--muted); font-size: 1.4rem; font-weight: 700; }
.tm-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .35rem; max-height: 244px; overflow: auto; margin: .5rem 0 1rem; }
.tm-pool-opt { background: var(--panel-2); border: 2px solid var(--border); border-radius: 9px; padding: .2rem; cursor: pointer; transition: border-color .12s, transform .08s; }
.tm-pool-opt:hover { transform: translateY(-1px); border-color: var(--brand-2); }
.tm-pool-opt.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(238,21,21,.2); }
.tm-pool-opt img { width: 40px; height: 40px; image-rendering: pixelated; display: block; margin: auto; }
/* ══ MODO FOCO da atividade (imersivo, tela cheia) ═════════════════ */
.act-focus-cta { width: 100%; margin-top: .3rem; font-size: 1rem; padding: .7rem 1rem; }
.ac-focus-row { margin-bottom: .7rem; }
body.focus-open { overflow: hidden; } /* trava o scroll do fundo */
/* Scroll-lock do modal: position:fixed é o único método que funciona no iOS Safari.
overflow-y:scroll mantém a largura estável (sem pular quando scrollbar some). */
body.modal-open { position: fixed; width: 100%; overflow-y: scroll; }
.modal-backdrop { overscroll-behavior: none; }
/* O botão flutuante do chat (z-index 45) fica ACIMA do modal (z 40) — esconde
enquanto um modal está aberto para não cobrir os botões do rodapé. */
body.modal-open .chat-launcher { display: none; }
.act-focus { position: fixed; inset: 0; z-index: 3000; display: flex; }
/* O mentorado estuda o dia DENTRO do modo foco e é de lá que abre a
checagem-relâmpago (modal, z 40) e o minigame do dia (#game-view, z 50).
Nas alturas normais eles ficam ESCONDIDOS atrás do foco (z 3000) — era o
"quiz que não abre". Só ENQUANTO o foco está aberto eles sobem; a pilha do
resto do app (gate do Discord, animações de captura/evolução) fica intacta.
Continuam abaixo do toast (4000). */
body.focus-open #game-view { z-index: 3050; }
body.focus-open .modal-backdrop { z-index: 3100; }
.af-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(circle at 18% 12%, rgba(238,21,21,.28), transparent 45%),
radial-gradient(circle at 85% 82%, rgba(59,111,242,.30), transparent 45%),
linear-gradient(160deg, #1b2340, #0d1120);
}
.af-bg::after { /* trama sutil de pokébolas */
content: ''; position: absolute; inset: 0; opacity: .06;
background-image: radial-gradient(circle, #fff 2px, transparent 3px);
background-size: 34px 34px;
}
.af-shell {
position: relative; z-index: 1; margin: auto;
width: min(760px, 100%); height: min(94vh, 100%);
display: flex; flex-direction: column; overflow: hidden;
background: var(--bg); border: 1px solid var(--border); border-radius: 18px;
box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.af-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 1rem 1.2rem .7rem; border-bottom: 1px solid var(--border);
}
.af-head-main { min-width: 0; }
.af-title { margin: .15rem 0 0; font-size: 1.3rem; line-height: 1.15; }
.af-close {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; cursor: pointer;
border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 1.15rem;
transition: border-color .15s, background .15s;
}
.af-close:hover { border-color: var(--brand-2); background: var(--panel); }
.af-body {
flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 1rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
}
.af-brief { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border); }
@media (max-width: 600px) {
.af-shell { width: 100%; height: 100%; border-radius: 0; border: none; }
.af-head { padding-top: calc(.9rem + env(safe-area-inset-top, 0px)); }
.af-title { font-size: 1.15rem; }
}
/* Modal: escolher treinador */
.trainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .55rem; margin: .8rem 0; }
.trainer-opt { display: grid; justify-items: center; gap: .25rem; background: var(--panel-2); border: 2px solid var(--border); border-radius: 12px; padding: .55rem .35rem; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .08s; }
.trainer-opt:hover { border-color: var(--brand-2); transform: translateY(-2px); }
.trainer-opt.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(238,21,21,.25); }
.trainer-opt-img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.trainer-opt-lbl { font-size: .72rem; font-weight: 700; }
@media (max-width: 760px) {
.tc-main { grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.tc-collection { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
.tc-main { grid-template-columns: 1fr; }
.tc-photo { justify-self: start; }
.tc-name { font-size: 1.24rem; }
}
/* Fluxo guiado do dia (ler → aprender → exercício, em partes) */
.day-flow .df-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.df-counter { font-size: .78rem; font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.df-dots { display: flex; gap: .35rem; }
.df-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background .2s, transform .2s; }
.df-dot.done { background: var(--accent); transform: scale(1.12); }
.df-flow {
display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
font-size: .74rem; font-weight: 700; color: var(--muted);
background: var(--bg); border: 1px dashed var(--border); border-radius: 10px;
padding: .4rem .6rem; margin-bottom: .8rem;
}
.df-step { white-space: nowrap; }
.df-arrow { opacity: .55; }
.df-guide {
margin: 0 0 .7rem; font-size: .84rem; font-weight: 600; line-height: 1.4;
color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--panel));
border-left: 3px solid var(--accent); border-radius: 8px; padding: .5rem .7rem;
}
.df-body { min-height: 60px; animation: menFade .2s ease; }
.df-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.df-done-tag { font-size: .82rem; font-weight: 800; color: var(--call); }
.df-finale { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); animation: menFade .25s ease; }
.df-learn-box {
background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 12%, var(--panel)), var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem;
}
.df-learn-box .eyebrow { display: block; }
.df-learn-box p { margin: .25rem 0 .6rem; }
/* Minigames em LINHA CHEIA (um por linha), não amontoados numa grade. */
.df-learn-box .ex-grid { grid-template-columns: 1fr; gap: .5rem; }
.df-learn-box .ex-grid .exercise-card { width: 100%; }
/* ── Portão do quiz: o exercício só libera após concluir o minigame ── */
.quiz-gate { display: block; }
.qg-box.qg-done { border-color: color-mix(in srgb, var(--t-grass, #4caf50) 45%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--t-grass, #4caf50) 12%, var(--panel)), var(--panel)); }
.qg-box.qg-done .qg-hint { color: var(--t-grass, #4caf50); font-weight: 700; }
.qg-lock {
margin: 0 0 .4rem; padding: .7rem .9rem; border-radius: 12px;
background: color-mix(in srgb, var(--brand) 10%, var(--panel));
border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--border));
color: var(--muted); font-size: .88rem; font-weight: 600; text-align: center;
}
.qg-activity { animation: menFade .25s ease; }
/* Princípio "da vez" embutido no conteúdo do dia */
.df-principle {
background: linear-gradient(135deg, color-mix(in srgb, var(--topic) 16%, var(--panel)), var(--panel));
border: 1px solid color-mix(in srgb, var(--topic) 40%, var(--border));
border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem;
}
.df-principle .eyebrow { display: block; color: var(--topic); }
.df-principle-title { display: block; font-size: 1.02rem; margin: .2rem 0 .3rem; }
.df-principle.read { border-color: color-mix(in srgb, var(--call) 55%, var(--border)); }
.df-principle .btn { margin-top: .5rem; }
.df-principle .btn:disabled { opacity: 1; background: color-mix(in srgb, var(--call) 22%, var(--panel)); color: var(--call); border-color: transparent; cursor: default; }
/* Manual da Staff — progresso + itens (lido vs a guardar) */
.manual-progress { margin-bottom: .8rem; }
.manual-progress span { display: block; font-weight: 700; margin-bottom: .35rem; }
.manual-tag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .2rem; color: var(--muted); }
.manual-item.read .manual-tag { color: var(--call); }
.manual-item.read { border-color: color-mix(in srgb, var(--call) 45%, var(--border)); background: color-mix(in srgb, var(--call) 8%, var(--panel)); }
/* HOJE (hero) + sub-abas da Mentoria */
.men-today { margin-top: 1.2rem; }
.today-toolbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.study-focus-btn { font-weight: 700; }
/* Cartão de início do dia (mentorado) — abre o estudo em modo foco */
.today-start .ts-flow {
display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
margin: .6rem 0 .2rem; font-size: .9rem;
}
.today-start .ts-flow .df-step {
background: var(--panel-2); border: 1px solid var(--border);
border-radius: 999px; padding: .12rem .55rem; font-weight: 600;
}
.today-start .ts-flow .df-arrow { color: var(--muted); }
.today-start .ts-hint { margin: .5rem 0 .7rem; }
.today-start .ts-start {
width: 100%; font-size: 1.05rem; font-weight: 800; padding: .8rem 1rem;
}
.men-today-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.men-today-head .schedule-line { margin: 0; }
.men-nav { margin-top: 1.4rem; }
.men-sections { margin-top: 1rem; }
.men-sec { animation: menFade .25s ease; }
.section-intro-row { margin-bottom: .7rem; }
.section-intro-row .eyebrow { display: block; font-size: .95rem; }
.section-intro-row p { margin: .2rem 0 0; }
@keyframes menFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.men-roadmap, .men-missions, .men-archive { margin-top: 1.4rem; }
/* Seletor de mentorado no Acervo de revisão (visão do mentor/staff). */
.archive-sel-row { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.archive-sel-row .crev-target { flex: 1 1 200px; min-width: 160px; max-width: 340px; }
/* ── Citações do dia (duas frases, mesmo estilo) ─────────────────── */
.men-daily {
margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
.men-daily .md-quote {
position: relative; display: flex; align-items: center; min-height: 3.4rem;
border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem;
background:
radial-gradient(circle at 0% 100%, rgba(109,94,252,.16), transparent 55%),
var(--panel);
}
.men-daily .md-quote.gold {
background:
radial-gradient(circle at 100% 0%, rgba(255,210,63,.18), transparent 55%),
var(--panel);
}
.men-daily .mdq-mark {
position: absolute; top: -.35rem; left: .5rem; font-size: 2.6rem;
color: var(--brand-2); opacity: .35; font-family: Georgia, serif;
}
.men-daily .md-quote.gold .mdq-mark { color: #e0a800; }
.men-daily .mdq-text { margin: 0 0 0 1.6rem; font-style: italic; font-weight: 600; line-height: 1.35; }
@media (max-width: 640px) { .men-daily { grid-template-columns: 1fr; } }
/* ── Trilha / próximos marcos ───────────────────────────────────── */
.roadmap-card {
background: var(--panel); border: 1px solid var(--border);
border-radius: 16px; padding: .9rem 1rem;
}
.rm-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rm-head .eyebrow { font-size: .95rem; }
.rm-pct {
font-weight: 800; font-size: .85rem; color: var(--brand-2);
background: color-mix(in srgb, var(--brand-2) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-2) 30%, transparent);
padding: .1rem .55rem; border-radius: 999px;
}
.rm-bar { height: 8px; margin: .55rem 0 .9rem; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.rm-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .6s ease; }
.rm-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
.rm-step { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .5rem 0; position: relative; }
.rm-step:not(:last-child)::before {
content: ''; position: absolute; left: 15px; top: 34px; bottom: -6px; width: 2px;
background: var(--border);
}
.rm-dot {
width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
font-size: .95rem; background: var(--panel-2); border: 2px solid var(--border);
position: relative; z-index: 1;
}
.rm-step.done .rm-dot { border-color: #46c07b; background: color-mix(in srgb, #46c07b 18%, var(--panel-2)); }
.rm-step.doing .rm-dot { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, var(--panel-2)); animation: rmPulse 1.8s ease-in-out infinite; }
.rm-step.next .rm-dot { border-color: var(--brand-2); }
.rm-step.goal .rm-dot { border-color: #ffb020; }
@keyframes rmPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.rm-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rm-title { font-size: .95rem; line-height: 1.2; }
.rm-desc { font-size: .8rem; color: var(--muted); }
.rm-step.done .rm-title { color: var(--muted); }
/* ── Livro do Manual (Comunidade ▸ Pessoal) ─────────────────────── */
.manual-book { max-width: 640px; }
.mb-cover {
display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center;
padding: 1rem 1.1rem; border-radius: 16px; color: #fff;
background: linear-gradient(135deg, #3a2a6b, #5b3aa0 60%, #7b52c9);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.35);
}
.mb-cover.staff { background: linear-gradient(135deg, #6b1d1d, #a02a2a 60%, #d14a3a); }
.mb-crest { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.mb-titles { min-width: 0; }
.mb-titles .eyebrow { opacity: .85; }
.mb-title { margin: .1rem 0; font-size: 1.5rem; line-height: 1.1; color: #fff; }
.mb-sub { margin: 0; opacity: .92; line-height: 1.3; }
.mb-prog { grid-column: 1 / -1; }
.mb-prog .jr-bar { height: 8px; margin-top: .3rem; background: rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.mb-prog .jr-fill { height: 100%; background: linear-gradient(90deg, #ffd23f, #fff3b0); border-radius: 999px; transition: width .5s ease; }
.mb-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; margin-top: .9rem; }
.mb-page {
position: relative; text-align: left; font: inherit; color: var(--text);
border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem .75rem;
background:
repeating-linear-gradient(var(--panel), var(--panel) 25px, color-mix(in srgb, var(--border) 40%, transparent) 26px),
var(--panel);
display: flex; flex-direction: column; gap: .25rem;
}
button.mb-page { cursor: pointer; transition: transform .08s, border-color .15s, box-shadow .15s; }
button.mb-page:hover { transform: translateY(-2px); border-color: var(--brand-2); box-shadow: var(--shadow); }
.mb-page.filled { border-color: #46c07b; box-shadow: inset 3px 0 0 #46c07b; }
.mb-page.open { border-style: dashed; }
.mb-page.sealed { opacity: .6; align-items: flex-start; }
.mb-num { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mb-badge {
align-self: flex-start; font-size: .66rem; font-weight: 800; padding: .1rem .5rem;
border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border);
}
.mb-page.filled .mb-badge { color: #2a9d5c; border-color: #46c07b; background: color-mix(in srgb, #46c07b 14%, transparent); }
.mb-page-title { font-size: 1rem; line-height: 1.2; }
.mb-page .pr-body { font-size: .85rem; color: var(--muted); }
.mb-seal { position: absolute; top: .6rem; right: .7rem; font-size: 1.1rem; }
.mb-graduate {
margin: 1rem 0 0; text-align: center; font-weight: 800;
padding: .7rem .9rem; border-radius: 12px;
background: color-mix(in srgb, #ffd23f 18%, transparent);
border: 1px solid color-mix(in srgb, #ffb020 45%, transparent);
}
@media (max-width: 560px) { .mb-pages { grid-template-columns: 1fr; } }
/* Cartão de dia (aula) */
.day-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--card-pad);
}
.day-card.highlight {
border-color: var(--brand);
box-shadow: 0 0 0 1px rgba(227,53,13,.25), var(--shadow);
}
.day-card .day-meta {
display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
margin-bottom: .6rem;
}
.day-card h3 { margin: .1rem 0 .6rem; font-size: 1.25rem; }
.day-card p { line-height: 1.55; margin: .5rem 0; }
.day-card .activity {
margin-top: 1rem; padding: .9rem 1rem;
background: var(--bg); border-left: 3px solid var(--accent);
border-radius: 8px;
}
.activity .eyebrow { color: var(--accent); }
.pill {
font-size: .7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; padding: .22rem .55rem; border-radius: 20px;
background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
.pill.week { color: var(--accent); }
.pill.type-call { color: var(--call); border-color: rgba(33,192,122,.4); }
.pill.type-review { color: var(--topic); border-color: rgba(79,140,255,.4); }
.pill.type-free { color: var(--muted); }
.principles { margin-top: 1.6rem; }
.principles > summary { cursor: pointer; list-style: none; user-select: none; }
.principles > summary::-webkit-details-marker { display: none; }
.principles > summary::after { content: " ▸"; color: var(--muted); font-size: .8em; }
.principles[open] > summary::after { content: " ▾"; }
.principles-list { display: grid; gap: .55rem; margin-top: .6rem; }
.principle {
background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: .7rem .9rem;
}
.principle strong { color: var(--accent); font-size: .9rem; }
.principle p { margin: .25rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
/* Acervo */
.archive-list { display: grid; gap: .5rem; margin-top: .7rem; }
.archive-item {
width: 100%; text-align: left; cursor: pointer;
background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: .7rem .85rem;
color: var(--text); font: inherit;
transition: border-color .2s, transform .06s;
}
.archive-item:hover { border-color: var(--brand-2); }
.archive-item:active { transform: translateY(1px); }
.archive-item .ai-top { display: flex; justify-content: space-between; gap: .5rem; }
.archive-item small { color: var(--muted); }
.archive-item .ai-title { font-weight: 600; font-size: .92rem; margin-top: .2rem; }
/* ══ CALENDÁRIO — Agenda da Liga (estilo Pokédex) ══════════ */
/* Cartucho-cabeçalho */
.cal-dex {
display: flex; align-items: center; gap: var(--sp-4);
flex-wrap: wrap;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 120%);
border: 2px solid rgba(0,0,0,.35);
border-radius: var(--radius);
padding: .85rem 1.1rem; margin-bottom: 1rem;
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
}
.cal-dex-lights { display: flex; align-items: center; gap: .5rem; }
.cal-dex-lights .cal-lens {
width: 30px; height: 30px; border-radius: 50%;
background: radial-gradient(circle at 32% 30%, #d6f3ff 0 18%, var(--lens) 45%, #1c6fb0 100%);
box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.4), 0 0 12px var(--lens);
}
.cal-dex-lights i {
width: 10px; height: 10px; border-radius: 50%; display: inline-block;
box-shadow: inset 0 0 3px rgba(0,0,0,.5);
}
.cal-dex-lights i:nth-child(2){ background:#ff5959; }
.cal-dex-lights i:nth-child(3){ background:var(--accent); }
.cal-dex-lights i:nth-child(4){ background:var(--call); }
.cal-dex-title { flex: 1 1 auto; min-width: 140px; }
.cal-dex-title .eyebrow { color: rgba(255,255,255,.85); }
.cal-dex-title h2 { margin: .1rem 0 0; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
/* Alternador Semana/Mês */
.cal-view-toggle {
display: inline-flex; background: rgba(0,0,0,.28); border-radius: 999px;
padding: 3px; gap: 2px;
}
.cvt-btn {
border: 0; background: transparent; color: #fff; cursor: pointer;
font-family: var(--font-display); font-weight: 700; font-size: .82rem;
padding: .35rem .85rem; border-radius: 999px; transition: all var(--dur);
}
.cvt-btn.is-active { background: var(--accent); color: #4a2b00; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.cal-controls { display: flex; gap: .4rem; }
.cal-controls .btn { background: rgba(0,0,0,.22); color: #fff; border-color: rgba(255,255,255,.25); }
.cal-controls .btn:hover { background: rgba(0,0,0,.36); }
/* Painel "Próximo evento" — Pokébola em destaque */
.cal-next-up {
display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
background:
linear-gradient(0deg, color-mix(in srgb, var(--cat, var(--accent)) 12%, var(--panel)) 0%, var(--panel) 100%);
border: 1px solid var(--border);
border-left: 5px solid var(--cat, var(--accent));
border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
box-shadow: var(--shadow-sm);
}
.cal-next-up .nu-ball {
width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
font-size: 1.5rem; border-radius: 50%;
background: radial-gradient(circle at 50% 42%, #fff 0 30%, transparent 31%),
linear-gradient(180deg, var(--cat, var(--brand)) 0 50%, #f6f6f6 50% 100%);
border: 2px solid #111; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.cal-next-up .nu-info { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 160px; }
.cal-next-up .nu-title { font-family: var(--font-display); font-size: 1.05rem; }
.cal-next-up .nu-when { color: var(--muted); font-size: .82rem; }
/* Chips de filtro por tipo Pokémon (usado no calendário e nos avisos) */
.cal-filters, .avisos-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.type-chip {
border: 1px solid var(--border); background: var(--panel);
color: var(--muted); cursor: pointer;
border-radius: 999px; padding: .32rem .8rem; font-size: .8rem; font-weight: 700;
transition: all var(--dur); user-select: none;
}
.type-chip:hover { border-color: var(--chip, var(--brand-2)); color: var(--text); }
.type-chip.is-on {
background: var(--chip, var(--brand)); color: #fff; border-color: transparent;
box-shadow: 0 2px 8px color-mix(in srgb, var(--chip, var(--brand)) 45%, transparent);
}
/* Grade semanal */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
@media (max-width: 900px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .calendar-grid { grid-template-columns: 1fr; } }
.cal-day {
background: var(--panel); border: 1px solid var(--border);
border-radius: 12px; padding: .7rem; min-height: 130px; transition: border-color var(--dur), transform var(--dur-fast);
}
.cal-day.is-today {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(255,203,5,.2);
}
.cal-day .cd-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.cal-day .cd-dow { font-weight: 800; font-size: .82rem; font-family: var(--font-display); }
.cal-day .cd-date { color: var(--muted); font-size: .78rem; }
.cal-event {
position: relative; border-radius: 9px; padding: .4rem .55rem .4rem .6rem;
margin-bottom: .4rem; font-size: .8rem;
background: color-mix(in srgb, var(--cat, var(--topic)) 12%, var(--bg));
border-left: 4px solid var(--cat, var(--topic));
}
.cal-event.me-going { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 55%, transparent); }
.cal-event .ce-time { color: var(--muted); font-size: .72rem; font-weight: 700; }
.cal-event .ce-title { line-height: 1.25; }
.cal-event .ce-rsvp {
position: absolute; top: .35rem; right: .4rem; font-size: .68rem;
color: var(--text); background: rgba(0,0,0,.25); border-radius: 999px; padding: 0 .4rem;
}
.cal-empty { color: var(--muted); font-size: .78rem; opacity: .6; }
/* Grade mensal */
.calendar-month .cm-head {
display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-bottom: .4rem;
}
.calendar-month .cm-head span {
text-align: center; font-family: var(--font-display); font-weight: 800;
font-size: .78rem; color: var(--muted);
}
.calendar-month .cm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.cm-cell {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
min-height: 78px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem;
transition: border-color var(--dur), transform var(--dur-fast);
}
.cm-cell.is-out { opacity: .42; }
.cm-cell.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cm-cell.clickable, .cal-day.clickable, .cal-day.editable, .cm-cell.editable { cursor: pointer; }
.cm-cell.clickable:hover, .cm-cell.editable:hover { border-color: var(--brand-2); transform: translateY(-1px); }
.cm-daynum { font-weight: 800; font-size: .82rem; }
.cm-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.cm-dot.me-going { box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.5); }
.cm-more { font-size: .68rem; color: var(--muted); }
@media (max-width: 620px) { .cm-cell { min-height: 58px; } .cm-daynum { font-size: .74rem; } }
/* Controle de RSVP (presença) */
.rsvp-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.rsvp-label { font-size: .76rem; color: var(--muted); font-weight: 700; }
.rsvp-btn {
border: 1px solid var(--border); background: var(--bg); color: var(--text);
cursor: pointer; border-radius: 999px; padding: .28rem .65rem; font-size: .78rem; font-weight: 700;
transition: all var(--dur);
}
.rsvp-btn .rc { margin-left: .3rem; opacity: .75; font-size: .72rem; }
.rsvp-btn:hover { border-color: var(--brand-2); }
.rsvp-btn.yes.is-on { background: var(--t-grass); color: #06371c; border-color: transparent; }
.rsvp-btn.maybe.is-on { background: var(--t-electric); color: #4a3b00; border-color: transparent; }
.rsvp-btn.no.is-on { background: var(--t-fire); color: #4a1500; border-color: transparent; }
.att-group { margin: .5rem 0; }
.att-group .att-names { color: var(--muted); font-size: .86rem; margin-top: .15rem; }
/* ══ ENQUETES ══════════════════════════════════════════════ */
.polls-list { display: grid; gap: 1rem; }
.poll-card {
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: var(--card-pad);
}
.poll-card .pc-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.poll-card h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.poll-status { font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; white-space: nowrap; }
.poll-status.open { color: var(--call); background: rgba(33,192,122,.12); }
.poll-status.closed { color: var(--muted); background: var(--panel-2); }
.poll-options { display: grid; gap: .5rem; margin-top: .9rem; }
.poll-opt {
position: relative; cursor: pointer; overflow: hidden;
border: 1px solid var(--border); border-radius: 10px;
padding: .65rem .8rem; background: var(--bg);
display: flex; justify-content: space-between; gap: .5rem; align-items: center;
font: inherit; color: var(--text); text-align: left; width: 100%;
}
.poll-opt:not(:disabled):hover { border-color: var(--brand-2); }
.poll-opt .bar {
position: absolute; inset: 0 auto 0 0; z-index: 0;
background: rgba(255, 203, 5, .14); width: 0; transition: width .5s ease;
}
.poll-opt.mine .bar { background: rgba(227, 53, 13, .22); }
.poll-opt .lbl, .poll-opt .pct { position: relative; z-index: 1; }
.poll-opt .pct { color: var(--muted); font-size: .82rem; font-weight: 700; }
.poll-opt.mine .lbl::after { content: " ✓"; color: var(--accent); }
.poll-foot { display: flex; justify-content: space-between; margin-top: .8rem; color: var(--muted); font-size: .8rem; }
/* ══ MODAL ═════════════════════════════════════════════════ */
.modal-backdrop {
position: fixed; inset: 0; z-index: 40;
/* Fundo quase opaco em vez de backdrop-filter: blur — o blur reamostra
o desfoque a cada frame enquanto o fundo (.poke-bg) anima, derrubando
o FPS ao interagir com o modal. Mesma decisão da .topbar. */
background: rgba(6, 9, 16, .86);
display: grid; place-items: center; padding: 1.2rem; overflow-y: auto;
}
.modal {
width: 100%; max-width: 480px;
box-sizing: border-box; min-height: 0;
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
/* Conteúdo longo (ex.: um dia do Acervo com muito texto) precisa rolar
dentro do modal em vez de estourar a tela sem alcance de scroll. */
max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
}
.modal h3 { margin: 0 0 1rem; }
.modal .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.modal .field label { font-size: .82rem; font-weight: 600; }
.modal .actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.opt-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.opt-row input { flex: 1; }
/* ══ TOAST ═════════════════════════════════════════════════ */
.toast {
position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
background: var(--panel-2); border: 1px solid var(--border);
color: var(--text); padding: .7rem 1.1rem; border-radius: 10px;
box-shadow: var(--shadow); z-index: 4000; font-size: .9rem;
}
.toast.error { border-color: #ff5a5a; color: #ffbcbc; }
.toast.success { border-color: var(--call); }
.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
/* ══════════════════════════════════════════════════════════════
TEMA POKÉMON — pokébolas, sprites, animações e música
(camada visual do painel interno da staff)
══════════════════════════════════════════════════════════════ */
/* ── Animações reutilizáveis ─────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pop-in { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-70px, -60px, 0); } }
@media (prefers-reduced-motion: reduce) {
.floaty, .poke-bg, .music-btn.playing, .btn-pokeball, .mem-reveal-sprite { animation: none !important; }
/* Blinks/pulsos infinitos dos jogos bespoke (REC/LIVE/cursor) — estáticos. */
.ld-rec, .ld-blink, .lm-live, .tri-live { animation: none !important; }
}
/* ── Fundo com pokébolas flutuantes ──────────────────────── */
.poke-bg {
/* Padrão decorativo de pokébolas. ANTES tinha um "drift" infinito por
transform — em PCs sem GPU (compositing por software) isso animava a tela
inteira o tempo todo e travava TODAS as abas. Agora é estático: custo zero. */
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='3'%3E%3Ccircle cx='45' cy='45' r='30'/%3E%3Cline x1='15' y1='45' x2='75' y2='45'/%3E%3Ccircle cx='45' cy='45' r='9' fill='%23ffffff' fill-opacity='0.045'/%3E%3C/g%3E%3C/svg%3E");
}
/* ── Pokébola desenhada em CSS (substitui o badge "oP") ──── */
.brand-badge.pokeball {
background: linear-gradient(#e3350d 0 50%, #f7f7f7 50% 100%);
border: 3px solid #111; overflow: hidden; text-indent: -9999px;
animation: pop-in .4s ease both;
}
.brand-badge.pokeball::before {
content: ""; position: absolute; left: -3px; right: -3px;
top: calc(50% - 2px); height: 4px; background: #111;
}
.brand-badge.pokeball::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 32%; height: 32%; transform: translate(-50%, -50%);
border-radius: 50%; background: #fff; border: 3px solid #111;
box-shadow: 0 0 0 2px #f7f7f7;
}
.brand-badge.pokeball { position: relative; }
.brand-badge.sm.pokeball::after { border-width: 2px; }
/* ── Mini pokébola girando dentro de botões ──────────────── */
.btn-pokeball {
display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
border-radius: 50%; border: 2px solid #111;
background:
radial-gradient(circle at 50% 50%, #fff 0 22%, #111 22% 34%, transparent 34%),
linear-gradient(#fff 0 46%, #111 46% 54%, #fff 54% 100%);
}
.btn:hover .btn-pokeball { animation: spin .7s linear infinite; }
/* ── Herói de login: Pokémon flutuando ───────────────────── */
.login-hero { display: grid; place-items: center; margin: -0.5rem 0 0.4rem; }
.login-sprite { width: 132px; height: 132px; object-fit: contain;
filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.floaty { animation: floaty 4s ease-in-out infinite; }
.login-card { position: relative; overflow: hidden; }
.login-card::after {
content: ""; position: absolute; inset: auto -40px -60px auto;
width: 160px; height: 160px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,203,5,.12), transparent 70%);
pointer-events: none;
}
/* ── Botão de música ─────────────────────────────────────── */
.music-btn {
width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
border: 1px solid var(--border); background: var(--panel);
color: var(--text); font-size: 1rem; line-height: 1;
display: grid; place-items: center; transition: background .2s, transform .1s;
}
.music-btn:hover { background: var(--panel-2); }
.music-btn:active { transform: scale(.92); }
.music-btn.playing {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255,203,5,.15);
animation: pulse 1.4s ease-in-out infinite;
}
/* Sprite decorativo no cartão do dia em destaque */
.day-sprite {
width: 64px; height: 64px; object-fit: contain; float: right;
margin: -0.4rem -0.3rem 0.3rem 0.6rem;
filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
animation: floaty 5s ease-in-out infinite;
}
/* Contador de pendências na aba Admin */
.nav-badge {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px; padding: 0 5px; margin-left: .4rem;
border-radius: 10px; background: var(--brand); color: #fff;
font-size: .7rem; font-weight: 800; vertical-align: middle;
animation: pop-in .3s ease both;
}
/* Área de envio de atividade embutida (cartão de hoje + aba Atividades) */
.submission-area { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.sa-status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.submission-area textarea { width: 100%; min-height: 110px; resize: vertical; line-height: 1.5; }
.submission-area .ac-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
/* Passo-a-passo (atividade em partes/cenários) */
.stepper { margin: .3rem 0 .2rem; }
.stepper-dots { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.stepper-dot { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted, #6b7280); font-weight: 600; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.stepper-dot.filled { border-color: var(--accent, #16a34a); color: var(--accent, #16a34a); }
.stepper-dot.active { background: var(--brand, #2a4b8d); border-color: transparent; color: #fff; }
.stepper-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.stepper-head .step-count { font-size: .78rem; font-weight: 700; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .03em; }
.stepper-head .step-label { font-size: 1.02rem; }
.stepper-prompt { margin: .1rem 0 .5rem; }
.stepper textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
.stepper-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: .5rem; }
.warmup-box {
border: 1px dashed var(--brand-2); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .8rem;
background: linear-gradient(180deg, rgba(120,120,255,.06), transparent);
}
.warmup-box p { margin: .25rem 0 .5rem; }
/* Trava dura da atividade: checklist "ler + minigame" antes de liberar o envio. */
.act-gate {
border: 1px solid var(--border); border-left: 3px solid var(--brand);
border-radius: 12px; padding: .7rem .9rem; margin: .9rem 0;
background: linear-gradient(180deg, rgba(238,21,21,.05), transparent);
display: grid; gap: .5rem;
}
.act-gate .gate-item { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.act-gate .gate-item input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; }
.act-gate .gate-item.ok { color: var(--ok, #57c973); }
.act-gate p { margin: 0; }
.nav-btn { transition: color .2s, background .2s, transform .08s; }
.nav-btn:active { transform: translateY(1px); }
.tab-panel { animation: pop-in .35s ease both; }
/* Pokébola giratória como loader */
.pokeloader {
width: 30px; height: 30px; margin: 1.5rem auto; border-radius: 50%;
border: 2px solid #111; overflow: hidden; position: relative;
background: linear-gradient(#e3350d 0 50%, #f7f7f7 50% 100%);
animation: spin 1s linear infinite;
}
.pokeloader::before { content:""; position:absolute; left:0; right:0; top:calc(50% - 1.5px); height:3px; background:#111; }
.pokeloader::after { content:""; position:absolute; left:50%; top:50%; width:32%; height:32%; transform:translate(-50%,-50%); border-radius:50%; background:#fff; border:2px solid #111; }
/* ══ ATIVIDADES (submissões) ═══════════════════════════════ */
/* ══ ATIVIDADES — hero temático (mascote + case de insígnias) ═══════ */
.act-hero {
--ah-a: #f0a83c; --ah-b: #e8743a; --ah-c: #f7c948;
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem;
margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 20px; color: #fff;
background:
radial-gradient(130% 130% at 0% 0%, rgba(255,255,255,.22), transparent 45%),
linear-gradient(135deg, var(--ah-b), var(--ah-a) 55%, var(--ah-c));
border: 1px solid rgba(255,255,255,.4);
box-shadow: 0 14px 34px rgba(120,70,20,.32), inset 0 1px 0 rgba(255,255,255,.3);
}
.act-hero .ah-glow {
content: ''; position: absolute; z-index: 0; right: -50px; top: -54px;
width: 190px; height: 190px; border-radius: 50%; pointer-events: none; opacity: .5;
border: 12px solid rgba(255,255,255,.16);
background: radial-gradient(circle, #fff 0 12px, rgba(255,255,255,.35) 12px 21px, transparent 21px) center/100% 100% no-repeat;
}
.act-hero .ah-mascot { position: relative; z-index: 1; width: 96px; height: 96px; display: grid; place-items: center; }
.act-hero .ah-eevee {
width: 92px; height: 92px; image-rendering: pixelated; position: relative; z-index: 1;
filter: drop-shadow(0 4px 5px rgba(0,0,0,.32)); animation: ahBob 3s ease-in-out infinite;
}
.act-hero .ah-mascot-shadow {
position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
width: 60px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(3px);
}
@keyframes ahBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.act-hero .ah-main { position: relative; z-index: 1; min-width: 0; }
.act-hero .eyebrow { color: rgba(255,255,255,.92); }
.act-hero .ah-title { margin: .1rem 0 .25rem; font-size: 1.5rem; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.act-hero .ah-sub { margin: 0 0 .55rem; opacity: .92; line-height: 1.35; }
.act-hero .ah-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .28rem; }
.act-hero .ah-prog-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .95; }
.act-hero .ah-prog-pct { font-size: .98rem; font-weight: 900; }
.act-hero .ah-bar { height: 10px; background: rgba(0,0,0,.24); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.32); }
.act-hero .ah-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #fff, #ffe89a); box-shadow: 0 0 10px rgba(255,255,255,.55); transition: width .6s ease; }
.act-hero .ah-badges { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .65rem; }
.act-hero .ah-badge {
width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
font-size: .7rem; font-weight: 900; line-height: 1;
background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.4); color: #fff;
box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.act-hero .ah-badge.won { background: linear-gradient(#fff2b0, #ffcf3d); color: #7a4b00; border-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.act-hero .ah-badge.sent { background: rgba(255,255,255,.28); }
.act-hero .ah-badge.redo { background: rgba(255,120,60,.55); border-color: #ffd3b0; }
.act-hero .ah-stats { position: relative; z-index: 1; display: flex; gap: .5rem; }
.act-hero .ah-stat {
display: grid; justify-items: center; gap: .1rem; min-width: 62px; padding: .5rem .4rem;
border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.24);
}
.act-hero .ah-stat b { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.act-hero .ah-stat span { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .88; }
.act-hero .ah-stat.won b { color: #fff0a6; }
@media (max-width: 720px) {
.act-hero { grid-template-columns: auto 1fr; }
.act-hero .ah-stats { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 460px) {
.act-hero { grid-template-columns: 1fr; text-align: left; }
.act-hero .ah-mascot { justify-self: start; }
}
.activities-list { display: grid; gap: 1rem; margin-top: 1rem; }
.activity-card {
position: relative; overflow: hidden;
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: var(--card-pad);
transition: border-color .15s, box-shadow .15s, transform .1s;
}
.activity-card::before { /* barra lateral "tipo" por status */
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--muted); opacity: .7;
}
.activity-card.ac-todo::before { background: var(--accent); }
.activity-card.ac-pending::before { background: var(--accent); }
.activity-card.ac-approved::before { background: var(--call); }
.activity-card.ac-needs_revision::before { background: var(--deadline); }
.activity-card.collapsed:hover { border-color: var(--brand-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.activity-card .ac-head {
display: flex; justify-content: space-between; gap: .8rem; align-items: center;
width: 100%; text-align: left; background: none; border: none; color: inherit;
font: inherit; cursor: pointer; padding: 0;
}
.activity-card .ac-mon {
position: relative; flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand) 16%, var(--panel)), var(--panel-2));
border: 1px solid var(--border); border-radius: 13px;
}
.activity-card .ac-mon-sprite { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.activity-card .ac-mon-ball {
position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(#ff5c5c 0 46%, #1c1c1c 46% 54%, #fff 54% 100%);
box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1.5px rgba(0,0,0,.35);
}
.activity-card .ac-head-txt { min-width: 0; flex: 1; }
.activity-card .ac-head-right { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.activity-card .ac-caret { transition: transform .2s ease; color: var(--muted); font-size: .9rem; }
.activity-card:not(.collapsed) .ac-caret { transform: rotate(90deg); }
.activity-card.collapsed .ac-body { display: none; }
.activity-card .ac-body { margin-top: .7rem; }
.activity-card h3 { margin: .1rem 0 .3rem; font-size: 1.1rem; }
.activity-card textarea { width: 100%; min-height: 120px; resize: vertical; margin-top: .6rem; line-height: 1.5; }
.activity-card .ac-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .7rem; }
.sub-status {
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: .22rem .6rem; border-radius: 20px; white-space: nowrap;
}
.sub-status.pending { color: var(--accent); background: rgba(255,203,5,.12); }
.sub-status.approved { color: var(--call); background: rgba(33,192,122,.14); }
.sub-status.needs_revision { color: var(--deadline); background: rgba(255,138,61,.14); }
/* Metadados da entrega: prazo, atraso e nota. */
.sa-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.meta-chip {
font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 20px;
background: var(--bg); color: var(--muted); border: 1px solid var(--border);
}
.meta-chip.meta-late { color: var(--deadline); border-color: rgba(255,138,61,.4); background: rgba(255,138,61,.1); }
.meta-chip.meta-late-ok { color: var(--call); border-color: rgba(33,192,122,.4); background: rgba(33,192,122,.1); }
.meta-chip.meta-grade { color: var(--accent); border-color: rgba(255,203,5,.4); background: rgba(255,203,5,.1); }
/* Linha de nota + atraso justificado no card de correção. */
.rc-grade-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-top: .7rem; }
.grade-input { width: 5rem; text-align: center; }
.justify-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted); cursor: pointer; }
.justify-check input { width: auto; }
.feedback-box {
margin-top: .8rem; padding: .8rem 1rem; border-radius: 10px;
background: var(--bg); border-left: 3px solid var(--accent);
}
.feedback-box .eyebrow { color: var(--accent); }
.feedback-box p { margin: .3rem 0 0; line-height: 1.5; }
.submitted-text {
margin-top: .6rem; padding: .8rem 1rem; border-radius: 10px;
background: var(--bg); border: 1px solid var(--border);
white-space: pre-wrap; line-height: 1.55; font-size: .92rem;
}
/* ══ ADMIN ═════════════════════════════════════════════════ */
/* ══ Console de Admin (sidebar + conteúdo) ═════════════════════ */
.admin-console { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 1.1rem; align-items: start; max-width: 1240px; margin: 0 auto; }
.admin-nav {
position: sticky; top: .8rem; display: flex; flex-direction: column; gap: .5rem;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem;
}
.admin-nav-brand { display: flex; align-items: center; gap: .5rem; padding: .2rem .3rem .6rem; border-bottom: 1px solid var(--border); }
.anv-logo { font-size: 1.5rem; }
.anv-eyebrow { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.anv-title { font-family: var(--font-display); font-size: 1.05rem; }
.admin-nav-list { display: flex; flex-direction: column; gap: .25rem; }
.admin-subtab {
display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%;
background: transparent; border: 1px solid transparent; color: var(--muted);
font: inherit; font-weight: 700; cursor: pointer; padding: .55rem .7rem; border-radius: 10px;
transition: background var(--dur-fast), color var(--dur-fast);
}
.admin-subtab .asb-ico { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.admin-subtab:hover { color: var(--text); background: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); }
.admin-subtab.active { color: #fff; background: linear-gradient(180deg, #ff5a48, var(--brand)); border-color: transparent; box-shadow: var(--shadow-sm); }
.admin-content { min-width: 0; }
@media (max-width: 780px) {
.admin-console { grid-template-columns: 1fr; }
/* min-width:0 deixa a barra de abas rolar em vez de esticar o console. */
.admin-nav { position: static; flex-direction: column; min-width: 0; }
.admin-nav-brand { display: none; }
.admin-nav-list { flex-direction: row; overflow-x: auto; gap: .35rem; padding-bottom: .2rem; }
/* width:auto anula o width:100% do desktop (senão cada aba quer a largura
toda e a barra horizontal estoura para milhares de px). */
.admin-subtab { flex: 0 0 auto; width: auto; padding: .5rem .7rem; }
.admin-subtab .asb-lbl { white-space: nowrap; }
}
/* Visão geral: cabeçalho + KPIs + ações rápidas */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-role-chip {
font-size: .72rem; font-weight: 800; color: var(--brand);
background: color-mix(in srgb, var(--brand) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
border-radius: 999px; padding: .25rem .7rem;
}
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.kpi-card {
--kpi: var(--brand); display: flex; align-items: center; gap: .7rem;
background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--kpi);
border-radius: 12px; padding: .8rem .9rem;
}
.kpi-ico { font-size: 1.6rem; line-height: 1; }
.kpi-body { display: flex; flex-direction: column; min-width: 0; }
.kpi-val { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--kpi); line-height: 1.05; }
.kpi-lbl { font-size: .74rem; color: var(--muted); font-weight: 600; }
.admin-worlds { margin-bottom: 1.2rem; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-top: .5rem; }
.world-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.wc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wc-count { font-size: .8rem; font-weight: 800; color: var(--muted); }
.wc-bar { height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.wc-fill { height: 100%; background: linear-gradient(90deg, var(--t-electric), var(--t-grass)); border-radius: 999px; }
.wc-meta { display: flex; justify-content: space-between; gap: .5rem; }
.wc-pend { color: var(--t-fire); font-weight: 700; }
.ann-world { font-size: .62rem; font-weight: 800; color: var(--t-water); background: color-mix(in srgb, var(--t-water) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--t-water) 40%, var(--border)); border-radius: 999px; padding: .1rem .45rem; }
.ann-world-filter { font: inherit; padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
/* ── 🔍 Jogo dos 7 erros (cena estilo foto) ── */
.sd-body { display: flex; flex-direction: column; gap: .6rem; }
.sd-info { font-family: var(--font-display); font-weight: 800; text-align: center; }
.sd-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* Mobile: mantém lado a lado com scroll horizontal — empilhado impossibilita comparar */
@media (max-width: 600px) {
.sd-scenes { gap: .4rem; }
/* Cena mais alta no celular → 6 linhas da grade viram alvos de toque maiores */
.sd-scene { min-height: 280px; }
.sd-tag { font-size: .65rem; font-weight: 800; padding: .1rem .3rem; }
}
.sd-panel { display: flex; flex-direction: column; gap: .3rem; }
.sd-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.sd-scene {
position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
border: 2px solid var(--border);
background:
radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.14) 0, transparent 60%),
linear-gradient(160deg, #2a3350, #141a2c);
}
.sd-spot { position: absolute; transform: translate(-50%, -50%); padding: 0; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.sd-spot:hover { background: rgba(255,255,255,.08); }
.sd-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); pointer-events: none; }
.sd-spot.sd-hit { background: transparent; cursor: default; box-shadow: 0 0 0 3px var(--t-grass), 0 0 12px rgba(70,200,90,.6); border-radius: 50%; }
.sd-spot.sd-miss { animation: sdMiss .4s ease; box-shadow: 0 0 0 3px var(--t-fire); border-radius: 50%; }
@keyframes sdMiss { 0%,100% { transform: translate(-50%,-50%); } 25% { transform: translate(calc(-50% - 4px),-50%); } 75% { transform: translate(calc(-50% + 4px),-50%); } }
/* ── 🤪 Pega o Pokémon (reação) ── */
.whack-body { display: flex; flex-direction: column; gap: .6rem; }
.whack-hud { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 800; }
.whack-arena {
position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 2px solid var(--border);
background: radial-gradient(70% 50% at 50% 20%, rgba(255,255,255,.12) 0, transparent 60%), linear-gradient(170deg, #3a7bd5, #1d3a63);
}
.whack-arena.whack-shake { animation: whackShake .3s ease; }
@keyframes whackShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.whack-target { position: absolute; width: 15%; aspect-ratio: 1; padding: 0; border: none; background: transparent; cursor: pointer; animation: whackPop .18s ease; }
.whack-target:active { transform: scale(.9); }
.whack-target.bomb { filter: drop-shadow(0 0 6px rgba(255,60,40,.8)); }
.whack-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
@keyframes whackPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Pré-mentoria: esconde abas ainda não liberadas. */
.nav-btn.pre-hidden { display: none !important; }
/* ── ⚔️ Batalha PvP ao vivo ── */
.pvp-body { display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; }
.pvp-countdown { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 0; text-align: center; }
.pvp-cd-vs { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.pvp-dots { font-size: .7rem; letter-spacing: 1px; margin-top: 2px; }
.bt-timer { font-family: var(--font-pixel); font-weight: 400; font-size: .6rem; text-align: center; color: #1c7c3a; padding: 3px 0; }
.bt-timer.low { color: #e3350d; animation: pvpPulse 1s ease infinite; }
.pvp-cd-num { font-family: var(--font-display); font-weight: 800; font-size: 4rem; color: var(--brand); animation: pvpPulse 1s ease infinite; }
@keyframes pvpPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.pvp-wait { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 2rem 0; }
.pvp-scene {
position: relative; border-radius: 16px; padding: 1rem 1.1rem; min-height: min(52vh, 460px); flex: 1 1 auto;
display: flex; flex-direction: column; justify-content: space-between; border: 3px solid rgba(0,0,0,.4);
background: linear-gradient(180deg, #6fb7ee 0%, #bfe6f4 44%, #b7e58f 47%, #7ecb57 72%, #5fae44 100%);
}
.pvp-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pvp-row.pvp-top { align-items: flex-start; }
.pvp-stage { display: grid; place-items: center; min-width: 120px; }
.pvp-mon { width: 150px; height: 150px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.pvp-mon.back { width: 180px; height: 180px; }
.pvp-mon.shiny { filter: drop-shadow(0 0 8px rgba(255,226,122,.85)) drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.pvp-hpbox { background: #f7f4e7; color: #2b2b2b; border: 2px solid #2b2b2b; border-radius: 10px; padding: .4rem .6rem; min-width: 160px; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.pvp-hpname { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-family: var(--font-display); font-weight: 800; font-size: .85rem; }
.pvp-hptrack { height: 8px; background: #4a4a3a; border-radius: 999px; overflow: hidden; border: 1px solid #2b2b2b; margin: .25rem 0; }
.pvp-hpfill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pvp-hpfill.ok { background: linear-gradient(#7be07b, #37b437); }
.pvp-hpfill.mid { background: linear-gradient(#ffe066, #f0b429); }
.pvp-hpfill.low { background: linear-gradient(#ff8a7a, #e3350d); }
.pvp-hpnum { text-align: right; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pvp-mon { width: 108px; height: 108px; } .pvp-mon.back { width: 128px; height: 128px; } .pvp-hpbox { min-width: 0; width: 150px; } }
.admin-qa { margin-bottom: 1.2rem; }
.admin-qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin-top: .5rem; }
.admin-qa-btn {
display: flex; align-items: center; gap: .6rem; cursor: pointer; text-align: left;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .75rem .8rem;
font: inherit; font-weight: 700; color: var(--text); transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.admin-qa-btn:hover { transform: translateY(-2px); border-color: var(--brand); }
.admin-qa-btn .qa-ico { font-size: 1.25rem; }
.admin-panel-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.admin-panel-card h3 { margin: 0 0 .6rem; }
.admin-pend-list { display: flex; flex-direction: column; gap: .35rem; }
.admin-pend-row {
display: flex; align-items: center; justify-content: space-between; gap: .6rem; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem;
font: inherit; font-weight: 600; color: var(--text); transition: border-color var(--dur-fast);
}
.admin-pend-row:hover { border-color: var(--brand); }
/* ══ Treinadores: toolbar + grade de cards ══════════════════════ */
.admin-toolbar-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.admin-search { flex: 1 1 260px; display: flex; align-items: center; }
.admin-search-inp {
width: 100%; font: inherit; padding: .55rem .8rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.admin-filter-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Barra "iniciar mentoria do mundo" como cartão, não solta. */
.start-mentoria-bar {
background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
padding: .6rem .8rem !important; margin-bottom: 1.1rem !important;
}
.start-mentoria-bar select { max-width: 160px; }
/* Lista de treinadores: linhas compactas; edição abre em modal (uc-editor). */
.user-grid { display: flex; flex-direction: column; gap: .4rem; }
.ur-row {
display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; cursor: pointer;
background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border);
border-radius: 12px; padding: .5rem .7rem; color: inherit; transition: border-color .12s, transform .12s, background .12s;
}
.ur-row:hover { border-color: var(--accent); transform: translateX(2px); background: var(--panel-2); }
.ur-row.is-inactive { opacity: .55; }
.ur-row.role-l-admin { border-left-color: var(--brand); }
.ur-row.role-l-cm { border-left-color: var(--t-psychic); }
.ur-row.role-l-gm { border-left-color: var(--t-water); }
.ur-row.role-l-tutor { border-left-color: var(--t-dragon); }
.ur-row.role-l-help { border-left-color: var(--t-grass); }
.ur-row.role-l-mentee { border-left-color: var(--call); }
.ur-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--muted); }
.ur-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ur-line1 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ur-name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ur-tag { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .05rem .35rem; }
.ur-tag.mentor { background: color-mix(in srgb, var(--t-grass, #63c267) 22%, transparent); }
.ur-tag.off { background: color-mix(in srgb, var(--t-fire, #ee5a4e) 22%, transparent); }
.ur-tag.key { background: color-mix(in srgb, var(--t-electric, #f6c744) 26%, transparent); }
.ur-tag.pend { background: color-mix(in srgb, #ff9f43 26%, transparent); }
.ur-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-edit { flex: 0 0 auto; opacity: .6; }
/* Linha com área principal clicável (Perfil) + botão pequeno (Cartão). */
.ur-row:has(.ur-open) { padding: 0; overflow: hidden; }
.ur-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; background: none; border: none; color: inherit; cursor: pointer; text-align: left; padding: .5rem .7rem; }
.ur-open:hover { background: var(--panel-2); }
.ur-mini { flex: 0 0 auto; background: none; border: none; border-left: 1px solid var(--border); cursor: pointer; font-size: 1.05rem; padding: .5rem .7rem; align-self: stretch; }
.ur-mini:hover { background: var(--panel-2); }
/* Editor de treinador (modal): reaproveita .uc-* já existentes. */
.uc-editor { display: flex; flex-direction: column; gap: .8rem; max-width: 560px; }
.uc-editor-head { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--border); padding-bottom: .7rem; border-left: 3px solid var(--border); padding-left: .6rem; border-radius: 4px; }
.uc-editor-head.role-l-admin { border-left-color: var(--brand); }
.uc-editor-head.role-l-cm { border-left-color: var(--t-psychic); }
.uc-editor-head.role-l-gm { border-left-color: var(--t-water); }
.uc-editor-head.role-l-tutor { border-left-color: var(--t-dragon); }
.uc-editor-head.role-l-help { border-left-color: var(--t-grass); }
.uc-editor-head.role-l-mentee { border-left-color: var(--call); }
.user-card {
display: flex; flex-direction: column; gap: .7rem;
background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1rem;
box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.user-card:hover { box-shadow: var(--shadow); }
.user-card.is-inactive { opacity: .62; }
.uc-head { display: flex; align-items: center; gap: .7rem; }
.uc-avatar {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--brand);
}
.uc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.uc-id .email-inp { font-weight: 800; font-size: 1rem; border: 1px solid transparent; background: transparent; padding: .15rem .3rem; border-radius: 8px; }
.uc-id .email-inp:hover, .uc-id .email-inp:focus { border-color: var(--border); background: var(--panel-2); }
.uc-tags { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.uc-role {
font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
padding: .12rem .5rem; border-radius: 999px; background: var(--muted);
}
/* Cores por cargo (avatar + selo). */
.uc-avatar.role-admin, .uc-role.role-admin { background: var(--brand); }
.uc-avatar.role-cm, .uc-role.role-cm { background: var(--t-psychic); }
.uc-avatar.role-gm, .uc-role.role-gm { background: var(--t-water); }
.uc-avatar.role-tutor, .uc-role.role-tutor { background: var(--t-dragon); }
.uc-avatar.role-help, .uc-role.role-help { background: var(--t-grass); }
.uc-avatar.role-mentee, .uc-role.role-mentee { background: var(--call); }
.uc-inactive-tag { font-size: .64rem; font-weight: 800; color: var(--danger, #e3350d); background: color-mix(in srgb, #e3350d 12%, var(--panel)); border-radius: 999px; padding: .12rem .5rem; }
.uc-coins { font-size: .66rem; font-weight: 800; color: #a5730a; background: color-mix(in srgb, #f2b705 18%, var(--panel)); border: 1px solid color-mix(in srgb, #f2b705 45%, var(--border)); border-radius: 999px; padding: .12rem .5rem; }
.uc-note { font-size: .78rem; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: .4rem .6rem; }
.uc-note.warn { border-color: var(--t-fire); color: color-mix(in srgb, var(--t-fire) 70%, var(--text)); }
.uc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .7rem; }
.uc-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.uc-field > label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.uc-field select, .uc-field input[type="text"], .uc-field input[type="date"] {
width: 100%; font: inherit; padding: .4rem .55rem; border-radius: 9px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.uc-field .world-checklist { grid-template-columns: repeat(2, 1fr); gap: .1rem .4rem; }
.uc-switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; cursor: pointer; padding: .3rem 0; }
.uc-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.uc-actions .btn { flex: 0 0 auto; }
.btn-danger { background: #e3350d; border-color: #b3260a; color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
@media (max-width: 420px) { .uc-fields { grid-template-columns: 1fr; } }
/* ══ Progresso: ferramentas em grade + cards de mentorado ══════ */
.admin-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .3rem 0 .4rem; }
.admin-tool {
display: flex; align-items: center; gap: .55rem; cursor: pointer; text-align: left; width: 100%;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .7rem;
font: inherit; font-weight: 700; font-size: .84rem; color: var(--text);
transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.admin-tool:hover { transform: translateY(-2px); border-color: var(--brand); }
.admin-tool .at-ico { font-size: 1.15rem; }
.admin-tool .at-lbl { min-width: 0; }
.mentee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.mentee-card {
display: flex; flex-direction: column; gap: .6rem;
background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem;
box-shadow: var(--shadow-sm);
}
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mc-id { min-width: 0; }
.mc-id strong { display: flex; align-items: center; gap: .1rem; }
.mc-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid var(--border); }
/* ══ Perfil do mentorado (redesenhado) ══════════════════════════ */
.modal:has(.pf) {
width: min(920px, calc(100vw - 1.5rem)); max-width: min(920px, calc(100vw - 1.5rem));
max-height: calc(100dvh - 1.5rem); padding: 1.1rem; overflow: hidden;
}
.modal:has(.pf) > #modal-content { min-width: 0; width: 100%; max-width: 100%; }
.profile-modal.pf { max-width: none; min-width: 0; width: 100%; max-height: calc(100dvh - 3.7rem); overflow-y: auto; overflow-x: hidden; padding-right: .3rem; }
.pf { display: flex; flex-direction: column; gap: .9rem; min-width: 0; width: 100%; }
.pf-head { display: flex; align-items: center; gap: .8rem; }
.pf-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; background: var(--call); }
.pf-id { flex: 1 1 auto; min-width: 0; }
.pf-id h3 { margin: 0; overflow-wrap: anywhere; }
.pf-top-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.pf-kpi { display: flex; align-items: center; gap: .5rem; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .6rem; }
.pf-kpi-ico { font-size: 1.25rem; }
.pf-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.pf-kpi-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.05; }
.pf-kpi-lbl { font-size: .68rem; color: var(--muted); font-weight: 600; }
.pf-formula { margin: 0; }
.pf-section { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; width: 100%; overflow: hidden; }
.pf-sec-title { margin: 0; font-size: .9rem; font-family: var(--font-display); }
.pf-mini-stats { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .84rem; font-weight: 600; }
.pf-foot { flex-wrap: wrap; gap: .4rem; }
.pf-section input, .pf-section select, .pf-section textarea { max-width: 100%; min-width: 0; }
.pf-voice-summary { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.pf-voice-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: .25rem .55rem; font-size: .73rem; font-weight: 700; overflow-wrap: anywhere; }
.pf-voice-chip.discord { border-color: color-mix(in srgb, #5865f2 55%, var(--border)); background: color-mix(in srgb, #5865f2 12%, transparent); }
.pf-voice-chip.portal { border-color: color-mix(in srgb, var(--t-water, #4d90d5) 55%, var(--border)); background: color-mix(in srgb, var(--t-water, #4d90d5) 12%, transparent); }
.pf-voice-chip.total { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pf-section .audit-log { min-width: 0; width: 100%; }
.pf-section .audit-log li { overflow-wrap: anywhere; word-break: break-word; }
/* Rubrica semanal: conteúdo longo sempre quebra dentro do cartão e nunca
empurra o modal para fora da viewport. */
.rubric-week-intro { display: flex; flex-direction: column; gap: .12rem; padding: .55rem .65rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; min-width: 0; }
.rubric-week-list { display: flex; flex-direction: column; gap: .55rem; min-width: 0; width: 100%; }
.rubric-week-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); overflow: hidden; min-width: 0; }
.rubric-week-card.current { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.rubric-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .5rem .65rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rubric-week-head .small { overflow-wrap: anywhere; }
.rubric-week-rows { display: flex; flex-direction: column; min-width: 0; }
.rubric-week-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(180px, 1.4fr) minmax(170px, .8fr); gap: .45rem .65rem; align-items: start; padding: .55rem .65rem; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); min-width: 0; }
.rubric-week-row:first-child { border-top: 0; }
.rubric-week-name { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.rubric-week-name strong, .rubric-week-reason, .rubric-week-other { overflow-wrap: anywhere; word-break: break-word; }
.rubric-week-reason { color: var(--muted); font-size: .76rem; line-height: 1.3; min-width: 0; }
.rubric-week-edit { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rubric-week-score { width: 62px; }
.rubric-week-note { width: 100%; resize: vertical; font-size: .74rem; padding: .35rem .45rem; }
.rubric-week-other { grid-column: 2 / -1; }
.rubric-week-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .55rem .65rem; border-top: 1px solid var(--border); }
@media (max-width: 700px) {
.modal:has(.pf) { width: calc(100vw - .7rem); max-width: calc(100vw - .7rem); max-height: calc(100dvh - .7rem); padding: .75rem; }
.profile-modal.pf { max-height: calc(100dvh - 2.1rem); }
.pf-head { align-items: flex-start; flex-wrap: wrap; }
.pf-head .rank-badge { margin-left: auto; }
.rubric-week-row { grid-template-columns: 1fr; gap: .28rem; }
.rubric-week-edit { flex-direction: row; align-items: flex-start; }
.rubric-week-note { flex: 1 1 auto; }
.rubric-week-other { grid-column: auto; }
}
@media (max-width: 430px) {
.pf-top-actions .btn { flex: 1 1 auto; }
.pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-kpi { padding: .45rem; }
.pf-kpi-val { font-size: 1rem; }
.pf-voice-chip { width: 100%; border-radius: 9px; }
.rubric-week-foot { align-items: stretch; }
.rubric-week-foot .btn { width: 100%; }
}
/* ═════════ Admin: faixa de KPIs (Pessoas/Conteúdo) ═════════ */
.ukpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ukpi { display: flex; align-items: center; gap: .5rem; background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--acc, var(--accent)); border-radius: 12px; padding: .5rem .6rem; }
.ukpi-ico { font-size: 1.3rem; }
.ukpi-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--acc, var(--text)); }
.ukpi-lbl { display: block; font-size: .68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* ═════════ Conteúdo: cronograma por semana ═════════ */
.day-weeks { display: flex; flex-direction: column; gap: 1rem; }
.dw-group { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: .7rem .8rem; }
.dw-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dw-badge { font-family: var(--font-display); font-weight: 800; font-size: .8rem; background: color-mix(in srgb, var(--t-psychic, #d46fb0) 26%, transparent); border-radius: 999px; padding: .2rem .6rem; }
.dw-head .btn { margin-left: auto; }
.dw-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.day-admin-row { display: flex; align-items: center; gap: .6rem; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--border); border-radius: 11px; padding: .55rem .6rem; color: inherit; transition: border-color .12s, transform .12s; }
.day-admin-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.day-admin-row.has-act { border-left-color: var(--t-grass, #63c267); }
.dar-num { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .2rem .4rem; }
.dar-info { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.dar-info .de-title { display: block; max-width: 100%; margin: 0; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dar-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.dar-day, .dar-type, .dar-act { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .08rem .4rem; background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.dar-act.on { background: color-mix(in srgb, var(--t-grass, #63c267) 22%, transparent); color: var(--text); border-color: transparent; }
.dar-edit { flex: 0 0 auto; opacity: .6; }
/* ═════════ Revisão de conteúdo do mentor (banner + checklist + panorama) ═════════ */
.mrev-banner { display: flex; align-items: center; gap: .8rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel)); border: 1px solid var(--accent); border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; }
.mrev-banner.done { border-color: var(--t-grass, #63c267); background: linear-gradient(180deg, color-mix(in srgb, var(--t-grass, #63c267) 14%, var(--panel)), var(--panel)); }
.mrev-ico { font-size: 1.6rem; }
.mrev-main { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mrev-bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin-top: .2rem; }
.mrev-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.mrev-fill.done { background: var(--t-grass, #63c267); }
.crev-modal { max-width: 640px; }
/* Revisão em tela grande: o modal cresce e o conteúdo ocupa TODA a largura
(antes o .crev-modal ficava travado em 640px e os títulos usavam só metade). */
.modal:has(.crev-modal.wide) { max-width: min(1040px, 94vw); width: 94vw; }
.crev-modal.wide { max-width: none; width: 100%; }
.crev-modal.wide .crev-list { max-height: 66vh; }
.modal:has(.day-preview.wide) { max-width: min(920px, 94vw); width: 94vw; }
.day-preview.wide { max-height: 82vh; overflow-y: auto; }
.crev-prog { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; }
.crev-list { display: flex; flex-direction: column; gap: .35rem; max-height: 56vh; overflow-y: auto; padding-right: .2rem; }
.crev-week { margin-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.crev-row { display: flex; align-items: center; gap: .55rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .6rem; }
.crev-row.reviewed { border-color: color-mix(in srgb, var(--t-grass, #63c267) 50%, var(--border)); background: color-mix(in srgb, var(--t-grass, #63c267) 8%, var(--panel-2)); }
.crev-status { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--border); background: var(--panel); color: var(--muted); font-weight: 900; }
.crev-status.on { background: var(--t-grass, #63c267); border-color: var(--t-grass, #63c267); color: #fff; }
.crev-open { flex: 1; display: flex; flex-direction: column; text-align: left; background: none; border: none; cursor: pointer; color: inherit; min-width: 0; padding: .1rem 0; }
.crev-open:hover .crev-title { text-decoration: underline; }
.crev-title { font-weight: 700; font-size: .9rem; }
.crev-rowactions { display: flex; gap: .3rem; flex: 0 0 auto; }
.crev-mini { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: 1rem; transition: border-color .15s, transform .1s; }
.crev-mini:hover { border-color: var(--accent); transform: translateY(-1px); }
.crev-mini.danger:hover { border-color: var(--brand); }
.crev-addday { align-self: flex-start; margin-top: .5rem; }
.crev-target-row { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .2rem; flex-wrap: wrap; }
.crev-target { flex: 1; min-width: 220px; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; }
.crev-row.is-hidden { opacity: .6; }
.crev-tag { font-size: .62rem; font-weight: 800; border-radius: 999px; padding: .06rem .4rem; margin-left: .2rem; white-space: nowrap; }
.crev-tag.extra { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.crev-tag.hid { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.crev-tag.cust { background: color-mix(in srgb, var(--t-water, #4aa3ff) 26%, transparent); }
.crev-panorama { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; }
.crev-card { background: var(--panel); border: 1px solid var(--border); border-left-width: 3px; border-left-color: #ff9f43; border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.crev-card.complete { border-left-color: var(--t-grass, #63c267); }
.crev-card-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.crev-badge { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .15rem .5rem; }
.crev-badge.ok { background: color-mix(in srgb, var(--t-grass, #63c267) 26%, transparent); }
.crev-badge.partial { background: color-mix(in srgb, #ff9f43 28%, transparent); }
.crev-badge.none { background: color-mix(in srgb, var(--t-fire, #ee5a4e) 26%, transparent); }
.crev-detail { margin-top: .3rem; }
.crev-days { display: flex; flex-wrap: wrap; gap: .3rem; }
.crev-daychip { font-size: .7rem; border-radius: 8px; padding: .12rem .4rem; border: 1px solid var(--border); }
.crev-daychip.seen { background: color-mix(in srgb, var(--t-grass, #63c267) 20%, transparent); }
.crev-daychip.unseen { color: var(--muted); }
/* ══ Revisão & Conteúdo — painel do mentor (compacto) ══════════ */
/* Sem scroll interno: quem rola é o próprio modal (evita cortar os dias). */
.modal:has(.crev2) { max-width: min(760px, 94vw); width: 94vw; }
.crev2 { display: flex; flex-direction: column; }
.crev2-head { display: flex; flex-direction: column; gap: .45rem; }
.crev2-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.crev2-title { margin: 0; font-size: 1.08rem; }
.crev2-hint { margin: 0; line-height: 1.35; font-size: .76rem; }
/* Abas de alvo (base / todos / cada mentorado) */
.crev2-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.crev2-tab { font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--muted); transition: background .15s, border-color .15s, color .15s; }
.crev2-tab:hover { border-color: var(--accent); color: var(--text); }
.crev2-tab.active { background: var(--accent); border-color: var(--accent); color: #16233a; }
/* Área de meta (progresso/dica) — atualizada em cada troca de aba. */
.crev2-meta { display: flex; flex-direction: column; gap: .45rem; }
/* Progresso: barra fina (consistente com o resto do portal). */
.crev2-prog { display: flex; flex-direction: column; gap: .25rem; }
.crev2-prog-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* Semanas — cartões compactos, sem altura fixa. */
.crev2-weeks { display: flex; flex-direction: column; gap: .55rem; margin-top: .55rem; }
.crev2-week { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
.crev2-week-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .32rem .5rem .32rem .6rem; background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--border); }
.crev2-week-name { font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .01em; }
.crev2-add { flex: 0 0 auto; white-space: nowrap; font-size: .72rem; padding: .26rem .6rem; }
.crev2-daylist { display: flex; flex-direction: column; }
.crev2-day { display: flex; align-items: center; gap: .5rem; padding: .36rem .55rem; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.crev2-daylist > .crev2-day:first-child { border-top: none; }
.crev2-day.done { background: color-mix(in srgb, var(--t-grass, #63c267) 6%, transparent); }
.crev2-day.is-hidden { opacity: .55; }
.crev2-check { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--border); background: rgba(255,255,255,.05); color: var(--muted); font-weight: 900; font-size: .66rem; }
.crev2-check.on { background: var(--t-grass, #63c267); border-color: var(--t-grass, #63c267); color: #fff; }
.crev2-day-body { flex: 1; display: flex; flex-direction: column; gap: .05rem; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; padding: 0; }
button.crev2-day-body { cursor: pointer; }
button.crev2-day-body:hover .crev2-day-title { text-decoration: underline; }
.crev2-day-title { font-weight: 600; font-size: .84rem; line-height: 1.2; }
.crev2-day-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .72rem; }
.crev2-day-actions { display: flex; gap: .25rem; flex: 0 0 auto; }
.crev2-mini { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font-size: .85rem; display: grid; place-items: center; transition: border-color .15s, transform .1s, background .15s; }
.crev2-mini:hover { border-color: var(--accent); background: rgba(255,255,255,.12); transform: translateY(-1px); }
.crev2-mini:disabled { opacity: .5; cursor: default; }
.crev2-mini.danger:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 20%, transparent); }
.crev2-add-other { align-self: flex-start; font-size: .78rem; }
.crev2-empty { text-align: center; color: var(--muted); padding: 1rem; }
.crev2-foot { margin-top: .8rem; }
@media (max-width: 560px) {
.crev2-day { flex-wrap: wrap; }
.crev2-day-actions { flex: 1 1 100%; justify-content: flex-end; margin-top: .15rem; }
.crev2-week-head { flex-wrap: wrap; }
}
/* ═════════ Admin: subnav (chips) + cards de ferramenta ═════════ */
.admin-subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.admin-chip {
border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 700; cursor: pointer;
transition: background .15s, border-color .15s;
}
.admin-chip:hover { border-color: var(--accent); }
.admin-chip.is-on { background: var(--accent); color: #1a1500; border-color: var(--accent); }
.admin-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.admin-tool-card {
display: flex; align-items: center; gap: .7rem; text-align: left; cursor: pointer;
background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem;
color: inherit; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.admin-tool-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.atc-ico { font-size: 1.5rem; flex: 0 0 auto; }
.atc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.atc-title { font-size: .95rem; }
.atc-desc { line-height: 1.3; }
.atc-go { font-size: 1.3rem; color: var(--muted); flex: 0 0 auto; }
/* ═════════ Auditoria (panorama de gestão) ═════════ */
.audit-actors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; margin: .4rem 0 .2rem; }
.audit-actor { background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.audit-actor.lvl-parado { border-left-color: var(--t-fire, #ee5a4e); }
.audit-actor.lvl-atencao { border-left-color: #ff9f43; }
.audit-actor.lvl-ok { border-left-color: var(--t-grass, #63c267); }
.aa-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.aa-idle { font-size: .74rem; font-weight: 700; }
.aa-idle.lvl-parado { color: color-mix(in srgb, var(--t-fire, #ee5a4e) 85%, var(--text)); }
.aa-idle.lvl-atencao { color: #ff9f43; }
.audit-actor-stats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.aa-chip { font-size: .72rem; font-weight: 700; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .4rem; }
.audit-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.audit-card { background: var(--panel); border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; padding: .55rem .7rem; }
.audit-card.act-create { border-left-color: var(--t-grass, #63c267); }
.audit-card.act-update { border-left-color: var(--t-electric, #f6c744); }
.audit-card.act-delete { border-left-color: var(--t-fire, #ee5a4e); }
.audit-card.act-review { border-left-color: var(--t-water, #4d90d5); }
.audit-head { display: flex; align-items: flex-start; gap: .5rem; }
.audit-ico { font-size: 1.05rem; line-height: 1.3; }
.audit-main { display: flex; flex-direction: column; min-width: 0; }
.audit-what { font-size: .9rem; }
.audit-ent { color: var(--muted); font-weight: 600; }
.audit-label { color: var(--accent); }
.audit-diff { margin-top: .45rem; display: flex; flex-direction: column; gap: .25rem; border-top: 1px dashed var(--border); padding-top: .4rem; }
.audit-drow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; font-size: .8rem; }
.audit-field { font-weight: 700; color: var(--muted); min-width: 90px; }
.audit-before { text-decoration: line-through; color: color-mix(in srgb, var(--t-fire, #ee5a4e) 80%, var(--text)); word-break: break-word; }
.audit-after { color: color-mix(in srgb, var(--t-grass, #63c267) 85%, var(--text)); word-break: break-word; }
.audit-arrow { color: var(--muted); }
.audit-add { color: color-mix(in srgb, var(--t-grass, #63c267) 85%, var(--text)); word-break: break-word; }
.audit-del { color: color-mix(in srgb, var(--t-fire, #ee5a4e) 80%, var(--text)); word-break: break-word; }
/* ═════════ Dossiê do mentorado (atividades + minigames) ═════════ */
.doss-act-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.doss-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.doss-chip {
border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
border-radius: 999px; padding: .22rem .6rem; font-size: .74rem; font-weight: 700; cursor: pointer;
transition: background .15s, border-color .15s;
}
.doss-chip:hover { border-color: var(--accent); }
.doss-chip.active { background: var(--accent); color: #1a1500; border-color: var(--accent); }
.doss-act-list { display: flex; flex-direction: column; gap: .35rem; max-height: 46vh; overflow-y: auto; }
.doss-act {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px;
border-radius: 10px; padding: .45rem .6rem;
}
.doss-act.cat-approved { border-left-color: var(--t-grass, #63c267); }
.doss-act.cat-pending { border-left-color: var(--t-electric, #f6c744); }
.doss-act.cat-needs_revision { border-left-color: #ff9f43; }
.doss-act.cat-overdue { border-left-color: var(--t-fire, #ee5a4e); }
.doss-act.cat-open { border-left-color: var(--border); }
.doss-act-main { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.doss-act-title { font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doss-act-sub { font-size: .72rem; }
.doss-act-badges { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; flex: 0 0 auto; }
.doss-badge { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: .16rem .5rem; white-space: nowrap; }
.doss-badge.ok { background: color-mix(in srgb, var(--t-grass, #63c267) 26%, transparent); }
.doss-badge.wait { background: color-mix(in srgb, var(--t-electric, #f6c744) 30%, transparent); }
.doss-badge.revise { background: color-mix(in srgb, #ff9f43 30%, transparent); }
.doss-badge.miss { background: color-mix(in srgb, var(--t-fire, #ee5a4e) 30%, transparent); }
.doss-badge.open { background: var(--panel); border: 1px solid var(--border); }
.doss-badge.late { background: color-mix(in srgb, var(--t-fire, #ee5a4e) 22%, transparent); }
.doss-game-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.doss-gk { display: flex; flex-direction: column; align-items: center; gap: .05rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .3rem; }
.doss-gk-ico { font-size: 1.05rem; }
.doss-gk-val { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.doss-gk-lbl { font-size: .64rem; color: var(--muted); font-weight: 600; text-align: center; }
.doss-game-list { display: flex; flex-direction: column; gap: .3rem; max-height: 40vh; overflow-y: auto; }
.doss-game-row { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; align-items: center; gap: .5rem; }
.doss-game-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doss-game-bar { height: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.doss-game-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.doss-game-fill.kind-treino { background: var(--t-water, #6aa0e0); }
.doss-game-fill.kind-arcade { background: var(--t-psychic, #d46fb0); }
.doss-game-val { font-size: .74rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .doss-game-kpis { grid-template-columns: repeat(2, 1fr); } }
.admin-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.admin-table .row-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
/* ── Cartão de treinador (visão da equipe, somente leitura) ── */
.tcv-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.tcv-head h3 { margin: 0; }
.tcv-role { font-size: .74rem; font-weight: 800; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--panel)); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem; }
.tcv-meta { display: flex; gap: .8rem; flex-wrap: wrap; margin: .4rem 0; }
.tcv-status { margin: .2rem 0 .6rem; font-style: italic; }
.tcv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 1rem; }
.tcv-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: .6rem; }
.tcv-ico { font-size: 1.3rem; }
.tcv-val { font-family: var(--font-display); font-weight: 800; }
.tcv-lbl { font-size: .7rem; color: var(--muted); }
.tcv-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin: .4rem 0 .2rem; }
@media (max-width: 480px) { .tcv-team { grid-template-columns: repeat(3, 1fr); } }
.tcv-slot { display: flex; flex-direction: column; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .3rem; }
.tcv-slot { color: var(--text); cursor: pointer; font: inherit; }
.tcv-slot:hover, .tcv-slot:focus-visible { border-color: var(--brand-2); transform: translateY(-1px); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 28%, transparent); }
.tcv-slot img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.tcv-slot img.shiny { filter: drop-shadow(0 0 4px rgba(255,226,122,.9)); }
.tcv-slot-lv { font-size: .64rem; font-weight: 800; color: var(--muted); }
.tcv-slot-held { display: inline-flex; align-items: center; justify-content: center; gap: .18rem; max-width: 100%; color: var(--accent); font-size: .56rem; font-weight: 800; line-height: 1.15; text-align: center; }
.tcv-slot-held-img { width: 18px !important; height: 18px !important; image-rendering: pixelated; object-fit: contain; }
.tcv-pending { margin: .2rem 0 .4rem; color: var(--t-fire); font-weight: 600; }
.tcv-collection {
display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .35rem;
max-height: 240px; overflow-y: auto; padding: .3rem; margin-top: .3rem;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overscroll-behavior: contain;
}
.tcv-collection .tcv-slot { padding: .2rem; }
.tcv-collection .tcv-slot img { width: 40px; height: 40px; }
/* Mochila (itens do inventário) na visão de cartão do admin */
.tcv-items {
display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .4rem;
padding: .3rem; margin-top: .3rem;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.tcv-item { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; padding: .3rem; }
.tcv-item-ico { width: 34px; height: 34px; image-rendering: pixelated; object-fit: contain; }
.tcv-item-emoji { font-size: 1.4rem; line-height: 1; }
.tcv-item-qty { font-size: .68rem; font-weight: 800; color: var(--brand); }
.tcv-item-name { color: var(--muted); line-height: 1.1; }
/* Insígnias e cosméticos (chips) */
.tcv-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.tcv-badge {
display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: .22rem .55rem;
}
.tcv-pokemon-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: .35rem 0 .8rem; }
.tcv-pokemon-overview .tcv-stat { padding: .45rem .3rem; }
/* ── Ficha individual de Pokémon ───────────────────────────── */
.modal:has(.pkmn-detail) { width: min(980px, calc(100vw - 1rem)); max-width: none; padding: 0; overflow: hidden; }
.pkmn-detail { color: var(--text); background: var(--panel); padding: 1.1rem; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
.pkmn-detail-head { display: flex; align-items: center; gap: .55rem; min-height: 2rem; }
.pkmn-detail-head .eyebrow { flex: 1 1 auto; text-align: center; margin: 0; }
.pkmn-detail-close { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pkmn-detail-close:hover, .pkmn-detail-close:focus-visible { border-color: var(--brand-2); color: var(--brand-2); outline: none; }
.pkmn-detail-hero { display: flex; align-items: center; gap: 1rem; padding: .65rem 0 .8rem; }
.pkmn-detail-sprite-wrap { width: 148px; height: 148px; flex: 0 0 148px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--brand-2) 20%, var(--panel-2)), var(--panel-2)); }
.pkmn-detail-sprite-wrap.shiny { background: radial-gradient(circle at 50% 32%, rgba(255, 210, 63, .26), var(--panel-2)); box-shadow: 0 0 24px rgba(255, 210, 63, .18); }
.pkmn-detail-sprite { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.pkmn-detail-sprite-wrap.shiny .pkmn-detail-sprite { filter: drop-shadow(0 0 9px rgba(255, 226, 122, .85)); }
.pkmn-detail-title { min-width: 0; }
.pkmn-number { color: var(--muted); font-size: .8rem; font-weight: 800; }
.pkmn-detail-title h2 { margin: .05rem 0 .25rem; color: var(--text); font-family: var(--font-display); overflow-wrap: anywhere; }
.pkmn-detail-types, .pkmn-detail-level { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.pkmn-detail-level { margin-top: .55rem; gap: .5rem; }
.pkmn-condition { border-radius: 999px; border: 1px solid var(--border); padding: .18rem .5rem; font-size: .72rem; font-weight: 800; }
.pkmn-condition.healthy { color: var(--t-grass); background: color-mix(in srgb, var(--t-grass) 13%, var(--panel)); }
.pkmn-condition.st-psn { color: #ef8cff; background: rgba(158, 86, 175, .18); }
.pkmn-condition.st-brn { color: #ffb15c; background: rgba(220, 100, 35, .18); }
.pkmn-condition.st-par { color: #ffe36e; background: rgba(211, 174, 25, .18); }
.pkmn-condition.st-slp { color: #8fc4ff; background: rgba(65, 115, 190, .18); }
.pkmn-condition.st-frz { color: #9ceaff; background: rgba(67, 170, 205, .18); }
.pkmn-hp-panel, .pkmn-detail-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: .75rem; }
.pkmn-hp-panel { margin-bottom: .7rem; }
.pkmn-hp-top { display: flex; justify-content: space-between; gap: .5rem; color: var(--text); font-size: .82rem; }
.pkmn-hp-track, .pkmn-stat-track { overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.pkmn-hp-track { height: 11px; margin: .4rem 0 .35rem; }
.pkmn-hp-fill { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
.pkmn-hp-fill.healthy { background: linear-gradient(90deg, #39c879, #8ff0ae); }
.pkmn-hp-fill.warning { background: linear-gradient(90deg, #e7b53c, #ffe37b); }
.pkmn-hp-fill.critical { background: linear-gradient(90deg, #d84c5c, #ff9b85); }
.pkmn-detail-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: .7rem; margin-bottom: .7rem; }
.pkmn-panel-title { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: var(--text); }
.pkmn-panel-title .small { margin-left: auto; color: var(--muted); }
.pkmn-stat-grid { display: grid; gap: .45rem; }
.pkmn-stat-row { display: grid; grid-template-columns: minmax(92px, .7fr) minmax(90px, 1fr) 40px; gap: .45rem; align-items: center; }
.pkmn-stat-label { display: flex; flex-direction: column; min-width: 0; }
.pkmn-stat-label strong, .pkmn-stat-label span { overflow-wrap: anywhere; }
.pkmn-stat-track { height: 8px; }
.pkmn-stat-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--accent)); }
.pkmn-stat-fill.stat-hp { background: linear-gradient(90deg, #39c879, #8ff0ae); }
.pkmn-stat-fill.stat-spe { background: linear-gradient(90deg, #7b8cff, #c3a3ff); }
.pkmn-stat-effective { text-align: right; color: var(--text); }
.pkmn-held-card { min-height: 76px; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; border: 1px solid var(--border); border-radius: 11px; padding: .55rem; background: color-mix(in srgb, var(--brand-2) 8%, var(--panel)); }
.pkmn-held-card > div { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.pkmn-held-copy { flex: 1 1 auto; }
.pkmn-held-change, .pkmn-held-remove, .pkmn-held-equip { flex: 0 0 auto; align-self: center; padding: .28rem .45rem; font-size: .58rem; white-space: nowrap; }
.pkmn-held-card.empty { justify-content: center; }
.pkmn-held-sprite { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; flex: 0 0 48px; }
.pkmn-held-empty-icon { font-size: 1.7rem; }
.pkmn-genetics-panel { margin-bottom: .7rem; }
.pkmn-genetics-card { border: 1px solid color-mix(in srgb, var(--brand-2) 45%, var(--border)); border-radius: 12px; padding: .65rem; background: color-mix(in srgb, var(--brand-2) 8%, var(--panel)); }
.pkmn-genetics-card.hidden-genetics { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.pkmn-genetics-head { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pkmn-genetics-head > div { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; }
.pkmn-genetics-head strong, .pkmn-genetics-head span { overflow-wrap: anywhere; }
.pkmn-genetics-icon { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 2rem; border-radius: 10px; background: color-mix(in srgb, var(--brand-2) 18%, transparent); font-size: 1.1rem; }
.pkmn-genetic-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.pkmn-genetic-chip { border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--text); padding: .22rem .45rem; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pkmn-genetics-card .btn { flex: 0 0 auto; white-space: nowrap; }
.pkmn-panel-note { margin: .5rem 0 0; line-height: 1.4; }
.pkmn-panel-note { margin: .55rem 0 0; }
.pkmn-moves-panel { margin-bottom: .7rem; }
.pkmn-move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pkmn-move-card { border: 1px solid var(--border); border-radius: 11px; padding: .55rem; background: color-mix(in srgb, var(--panel) 75%, var(--brand-2)); }
.pkmn-move-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.pkmn-move-head strong { flex: 1 1 auto; overflow-wrap: anywhere; }
.pkmn-move-source { flex: 0 0 auto; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 999px; padding: .1rem .35rem; font-size: .62rem; font-weight: 900; }
.pkmn-move-source.generated { color: var(--muted); border-color: var(--border); }
.pkmn-move-meta { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .45rem; color: var(--muted); font-size: .68rem; }
.pkmn-move-meta .type-badge { font-size: .62rem; }
.pkmn-detail > .actions { position: sticky; bottom: -.1rem; z-index: 3; margin: .8rem -.2rem -.2rem; padding: .65rem .2rem .2rem; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 30%); }
.pkmn-ribbons { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border); color: var(--accent); }
/* Visão rápida dos Pokémon dentro da mochila. */
.bag-section-head { display: flex; justify-content: space-between; align-items: end; gap: .6rem; border-bottom: 1px solid var(--border); padding-bottom: .55rem; }
.bag-section-head p { margin: .15rem 0 0; }
.bag-pokemon-count { color: var(--accent); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.bag-pokemon-section { margin: .7rem 0 .9rem; }
.bag-subtitle { display: block; margin-bottom: .35rem; color: var(--text); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.bag-pokemon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .45rem; max-height: 218px; overflow-y: auto; padding: .2rem; }
.bag-pokemon-card { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; padding: .42rem .28rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.bag-pokemon-card:hover, .bag-pokemon-card:focus-visible, .bag-pokemon-card.active { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 22%, transparent); }
.bag-pokemon-card.active { background: color-mix(in srgb, var(--brand-2) 12%, var(--panel-2)); }
.bag-pokemon-sprite { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.bag-pokemon-name { max-width: 100%; font-weight: 900; overflow-wrap: anywhere; }
.bag-pokemon-held { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: .62rem; }
@media (max-width: 650px) {
.pkmn-detail { padding: .8rem; }
.pkmn-detail-hero { align-items: flex-start; gap: .65rem; }
.pkmn-detail-sprite-wrap { width: 102px; height: 102px; flex-basis: 102px; border-radius: 16px; }
.pkmn-detail-sprite { width: 92px; height: 92px; }
.pkmn-detail-title h2 { font-size: 1.2rem; }
.pkmn-detail-columns { grid-template-columns: 1fr; }
.pkmn-move-grid { grid-template-columns: 1fr; }
.pkmn-stat-row { grid-template-columns: minmax(78px, .8fr) minmax(80px, 1fr) 34px; gap: .3rem; }
.pkmn-genetics-head { align-items: flex-start; flex-wrap: wrap; }
.pkmn-genetics-head .btn { margin-left: 2.55rem; }
.tcv-pokemon-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 390px) {
.pkmn-detail-hero { flex-direction: column; align-items: center; text-align: center; }
.pkmn-detail-title { width: 100%; }
.pkmn-detail-types, .pkmn-detail-level { justify-content: center; }
.pkmn-detail-head .eyebrow { text-align: left; }
}
/* ── Batalha admin (X vs Y) ── */
.ab-picks { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: end; margin: .6rem 0; }
.ab-vs { font-family: var(--font-display); font-weight: 800; color: var(--brand); padding-bottom: .5rem; }
.ab-arena { margin-top: .6rem; }
.ab-result { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; background: var(--panel-2); }
.ab-result.win { border-color: var(--t-grass); }
.ab-banner { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-align: center; margin-bottom: .4rem; }
.ab-teams { display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.ab-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; }
.ab-log-row { padding: .2rem .4rem; border-radius: 6px; background: var(--panel); }
@media (max-width: 480px) { .ab-picks { grid-template-columns: 1fr; } .ab-vs { text-align: center; padding: .2rem 0; } }
/* ── 🏆 Arena / Torneio ── */
.arena-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.arena-head h3 { margin: 0; }
.arena-list { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.arena-card { display: flex; align-items: center; gap: .6rem; text-align: left; cursor: pointer; width: 100%;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; color: var(--text); transition: border-color var(--dur-fast); }
.arena-card:hover { border-color: var(--brand); }
.arena-card-main { flex: 1 1 auto; min-width: 0; }
.arena-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.arena-parts { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.arena-part { display: inline-flex; align-items: center; gap: .2rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .6rem; font-size: .84rem; font-weight: 600; }
.arena-kick { border: none; background: transparent; color: var(--danger, #e3350d); cursor: pointer; font-weight: 800; padding: 0 .1rem; }
.arena-champ { margin-top: .8rem; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
background: linear-gradient(180deg, #ffe08a, #f2b705); color: #4a3400; border-radius: 12px; padding: .7rem; }
/* Copa da Semana — banner destacado no topo da Arena */
.arena-weekly { display: flex; align-items: center; gap: .6rem; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 15%, var(--panel-2)), var(--panel-2));
border: 2px solid var(--brand); border-radius: 14px; padding: .7rem .8rem; margin: .6rem 0; cursor: pointer; transition: border-color var(--dur-fast); }
.arena-weekly:hover { border-color: var(--brand-dark, var(--brand)); filter: brightness(1.05); }
.arena-weekly-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55rem; }
.arena-weekly-badge { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.arena-weekly-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.bracket-scroll { overflow-x: auto; padding-bottom: .4rem; }
.bracket { display: flex; gap: 1rem; align-items: flex-start; min-width: min-content; }
.bracket-col { display: flex; flex-direction: column; gap: .6rem; min-width: 150px; }
.bracket-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.bracket-match { display: flex; flex-direction: column; gap: .15rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .55rem; }
.bracket-match.done { border-color: var(--t-grass); }
.bm-p { font-size: .84rem; font-weight: 600; padding: .15rem .3rem; border-radius: 6px; }
.bm-p.win { background: color-mix(in srgb, var(--t-grass) 22%, transparent); font-weight: 800; }
.bm-vs { font-size: .62rem; color: var(--muted); text-align: center; }
.bm-fight { margin-top: .3rem; }
.bm-schedule, .bm-mode, .arena-waiting { display: block; text-align: center; margin-top: .25rem; }
.arena-empty { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--border); border-radius: 12px; background: var(--panel-2); color: var(--muted); text-align: center; }
.arena-team-picker { max-width: 760px; }
.arena-team-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .55rem; max-height: 52vh; overflow-y: auto; margin: .7rem 0; padding: .2rem; }
.arena-team-choice { display: grid; justify-items: center; gap: .1rem; min-width: 0; padding: .4rem .25rem; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.arena-team-choice:hover, .arena-team-choice.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.arena-team-choice.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.arena-team-sprite { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.arena-match-prompt { position: fixed; inset: 0; z-index: 4001; display: grid; place-items: center; padding: 1rem; background: rgba(4, 7, 16, .86); }
.arena-match-prompt-card { width: min(560px, 100%); padding: 1.5rem; border: 2px solid var(--accent); border-radius: 20px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--accent) 22%, transparent); text-align: center; animation: pop-in .25s ease both; }
.arena-match-prompt-card h2 { margin: .35rem 0 .5rem; color: var(--accent); }
.arena-match-prompt-card .actions { justify-content: center; }
@media (max-width: 560px) {
.arena-team-picker { padding: 1rem; }
.arena-team-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 48vh; }
.arena-team-sprite { width: 48px; height: 48px; }
.arena-match-prompt-card { padding: 1.1rem; }
.arena-match-prompt-card .actions { flex-direction: column-reverse; }
.arena-match-prompt-card .actions .btn { width: 100%; }
}
/* Multi-tenancy: checklist de mundos cobertos por um CM */
.world-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .6rem; margin-bottom: .4rem; }
.world-chk { display: flex; align-items: center; gap: .3rem; font-size: .85rem; cursor: pointer; }
.mentor-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mentor-toggle.hidden { display: none; }
.mentor-badge {
display: inline-block; margin: .15rem 0; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: #4a3400; background: linear-gradient(180deg, #ffe08a, #f2b705); border: 1px solid rgba(0,0,0,.2);
padding: .1rem .45rem; border-radius: 999px;
}
.world-chk input { margin: 0; }
.admin-table th, .admin-table td {
text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); font-size: .9rem;
}
.admin-table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.admin-table tr:hover td { background: var(--panel); }
.admin-table input, .admin-table select { padding: .4rem .5rem; font-size: .85rem; width: 100%; }
.role-badge { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }
.role-badge.admin { color: var(--brand); background: rgba(227,53,13,.14); }
.role-badge.mentor { color: var(--topic); background: rgba(79,140,255,.14); }
.role-badge.mentee { color: var(--muted); background: var(--panel-2); }
.inactive-row td { opacity: .5; }
.review-card {
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
min-width: 0; overflow: hidden;
}
.review-filter-banner {
display: flex; align-items: center; justify-content: space-between; gap: .7rem;
flex-wrap: wrap; margin: -.35rem 0 .8rem; padding: .65rem .8rem;
border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--border));
border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, var(--panel));
font-weight: 700;
}
.review-card .rc-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .3rem; }
.review-card .rc-who { font-size: .82rem; color: var(--muted); }
.review-card textarea { width: 100%; min-height: 70px; resize: vertical; margin-top: .5rem; }
.review-card .rc-actions { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; align-items: center; }
.submitted-wrap { width: 100%; min-width: 0; margin-top: .7rem; }
.submitted-label { color: var(--topic); margin-bottom: .25rem; }
.submitted-text {
width: 100%; max-width: 100%; min-width: 0; margin: 0;
overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
}
.submitted-text .md-p, .submitted-text .md-h, .submitted-text li { overflow-wrap: anywhere; word-break: break-word; }
.review-recorded-feedback {
width: 100%; min-width: 0; margin-top: .8rem; padding: .75rem .9rem;
border: 1px solid color-mix(in srgb, var(--call) 42%, var(--border));
border-left: 3px solid var(--call); border-radius: 0 10px 10px 0;
background: color-mix(in srgb, var(--call) 8%, var(--panel-2));
}
.review-evaluator { margin-top: .55rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.review-recorded-feedback .eyebrow { color: var(--call); }
.review-feedback-content { margin-top: .25rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.review-feedback-content .md-p:first-child { margin-top: .15rem; }
.review-feedback-content .md-p:last-child { margin-bottom: .15rem; }
/* Atalhos ao lado dos botões: tecla dentro do botão + dica J/K à direita. */
.review-prompt {
margin: .75rem 0 .2rem; padding: .7rem .9rem;
background: var(--panel-2); border: 1px solid var(--border);
border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
}
.review-prompt > .eyebrow { color: var(--accent); margin-bottom: .25rem; }
.review-prompt-content { font-size: .92rem; }
.review-prompt-content .md-p:first-child { margin-top: .15rem; }
.review-prompt-content .md-p:last-child { margin-bottom: .15rem; }
.rc-actions .btn-approve, .rc-actions .btn-revise {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
min-height: 2.45rem;
}
.rc-kbd {
display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem;
padding: 0 .28rem; border: 1px solid currentColor; border-bottom-width: 2px;
border-radius: 6px; background: rgba(255,255,255,.18); color: inherit;
font-family: var(--font-display); font-size: .72rem; font-weight: 900;
line-height: 1; opacity: 1; vertical-align: middle;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-approve .rc-kbd { background: rgba(6,35,26,.14); border-color: rgba(6,35,26,.38); }
.btn-revise .rc-kbd { background: rgba(42,20,0,.14); border-color: rgba(42,20,0,.38); }
.rc-kbd-hint { margin-left: auto; align-self: center; }
.btn-approve { background: var(--call); color: #06231a; }
.btn-approve:hover { filter: brightness(1.08); }
.btn-revise { background: var(--deadline); color: #2a1400; }
.btn-revise:hover { filter: brightness(1.08); }
/* #134 Revisão em lote */
.btn.btn-active { border-color: var(--brand); background: rgba(255,203,5,.14); color: var(--text); }
.rc-checkwrap { display: flex; align-items: center; padding-right: .4rem; }
.rc-checkwrap input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.review-card.rc-selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255,203,5,.25) inset; }
/* #131 — cartão em foco pelos atalhos de teclado */
.review-card.rc-focused { outline: 2px solid var(--brand); outline-offset: 2px; }
.review-hint { margin-bottom: .6rem; }
.bulk-bar {
position: sticky; top: .4rem; z-index: 5; display: flex; flex-direction: column; gap: .5rem;
background: var(--panel); border: 1px solid var(--brand); border-radius: var(--radius);
padding: .8rem 1rem; margin-bottom: 1rem;
}
.bulk-selall { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.bulk-selall input { width: 1.1rem; height: 1.1rem; }
.bulk-count { font-size: .85rem; color: var(--muted); }
.bulk-fb { width: 100%; min-height: 54px; resize: vertical; }
.bulk-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bulk-actions .grade-input { width: 4.5rem; }
/* ══ AVISOS (mural) ════════════════════════════════════════ */
/* ══ AVISOS — Quadro do Ginásio ════════════════════════════ */
.avisos-toolbar {
display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .2rem 0 .8rem;
}
.avisos-search {
display: flex; align-items: center; gap: .45rem; flex: 1 1 220px;
background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
padding: .35rem .8rem;
}
.avisos-search input {
border: 0; background: transparent; color: var(--text); width: 100%; outline: none; font-size: .9rem;
}
.announcements-list { margin-top: .4rem; }
.ann-group-title { display: block; margin: 1.4rem 0 .7rem; font-size: .8rem; }
.ann-group-title:first-child { margin-top: 0; }
.ann-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 760px) { .ann-grid { grid-template-columns: 1fr; } }
/* 🧠 Pergunta do dia (card no topo dos Avisos) */
.dq-card {
padding: 1rem 1.1rem;
margin-bottom: 1rem;
border-left: 4px solid var(--t-psychic, #f759ab);
background:
radial-gradient(700px 180px at 100% 0, rgba(247, 89, 171, .12), transparent 62%),
var(--panel);
}
.dq-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dq-reward { font-size: .78rem; font-weight: 700; color: var(--muted, #8a8f98); }
.dq-situation {
margin: .75rem 0 .9rem;
padding: .8rem .9rem;
line-height: 1.5;
color: var(--text);
background: color-mix(in srgb, var(--panel-2) 78%, transparent);
border: 1px solid var(--border);
border-radius: 12px;
}
.dq-options { display: grid; gap: .5rem; }
.dq-opt { display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%;
padding: .65rem .8rem; border-radius: 12px; border: 1.5px solid rgba(128,128,128,.28);
background: color-mix(in srgb, var(--panel-2) 72%, transparent);
color: var(--text);
font: inherit;
cursor: pointer;
transition: border-color .15s, background .15s, transform .12s; }
.dq-opt:hover:not(:disabled) { border-color: var(--t-psychic, #f759ab); background: rgba(247,89,171,.08); }
.dq-opt:hover:not(:disabled) { transform: translateY(-1px); }
.dq-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--t-psychic, #f759ab) 55%, transparent); outline-offset: 2px; }
.dq-opt b { flex: 0 0 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%;
background: color-mix(in srgb, var(--t-psychic, #f759ab) 22%, var(--panel));
color: var(--text); font-size: .8rem; }
.dq-opt.correct { border-color: #2fbf71; background: rgba(47,191,113,.14); }
.dq-opt.wrong { border-color: #e5533c; background: rgba(229,83,60,.12); }
.dq-opt:disabled { cursor: default; }
.dq-result { margin: .8rem 0 0; }
.ann-card {
position: relative; overflow: hidden;
background: var(--panel); border: 1px solid var(--border);
border-top: 4px solid var(--cat, var(--brand));
border-radius: var(--radius); padding: var(--card-pad);
display: flex; flex-direction: column; cursor: pointer;
transition: border-color var(--dur), transform var(--dur-fast), box-shadow var(--dur);
}
.ann-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ann-card.is-pending { border-style: dashed; border-top-color: var(--deadline); }
.ann-card.is-pinned { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.ann-card.is-urgent { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.ann-card.is-unread::after {
content: ""; position: absolute; top: 0; right: 0;
border-width: 0 22px 22px 0; border-style: solid;
border-color: transparent var(--cat, var(--brand)) transparent transparent;
}
.ann-cat-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.ann-cat {
font-size: .72rem; font-weight: 800; letter-spacing: .02em;
color: color-mix(in srgb, var(--cat, var(--brand)) 80%, var(--text));
background: color-mix(in srgb, var(--cat, var(--brand)) 14%, transparent);
border-radius: 999px; padding: .12rem .55rem;
}
.ann-pin-flag { font-size: .7rem; font-weight: 800; color: var(--accent); }
.ann-urgent {
font-size: .7rem; font-weight: 800; color: #fff; background: var(--brand);
border-radius: 999px; padding: .12rem .5rem; animation: annPulse 1.6s ease-in-out infinite;
}
@keyframes annPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(238,21,21,.5); } 50% { box-shadow: 0 0 0 5px rgba(238,21,21,0); } }
.ann-newdot { font-size: .68rem; font-weight: 800; color: var(--cat, var(--brand)); margin-left: auto; }
.ann-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.ann-head h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.ann-body { margin: .2rem 0 .6rem; line-height: 1.55; white-space: pre-wrap; flex: 1; }
.ann-meta { display: flex; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .78rem; flex-wrap: wrap; }
.ann-reacts { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .2rem; }
.react-btn {
border: 1px solid var(--border); background: var(--bg); cursor: pointer;
border-radius: 999px; padding: .18rem .5rem; font-size: .9rem; line-height: 1;
transition: all var(--dur);
}
.react-btn .rc { font-size: .72rem; font-weight: 800; margin-left: .25rem; color: var(--muted); }
.react-btn:hover { transform: scale(1.12); border-color: var(--brand-2); }
.react-btn.is-mine { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); }
.react-btn.is-mine .rc { color: var(--text); }
.ann-actions { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.ann-pin-toggle { display: flex; align-items: center; gap: .45rem; font-size: .88rem; margin: .2rem 0; cursor: pointer; }
.field-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 140px; }
/* ══ ADMIN — editor de atividade por dia ═══════════════════ */
.day-edit-card {
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .9rem;
}
.de-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.de-title { font-weight: 700; margin: .35rem 0 .1rem; }
.day-edit-card textarea { width: 100%; min-height: 80px; resize: vertical; margin-top: .5rem; line-height: 1.5; }
.day-edit-card .ac-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
/* ══ ACERVO — status da atividade ══════════════════════════ */
.sub-status.todo { color: var(--accent); background: rgba(255, 203, 5, .12); }
.ai-sub { display: inline-block; margin-top: .45rem; }
/* ══ CALENDÁRIO — edição de eventos ════════════════════════ */
.cal-day.editable, .cal-day.clickable { cursor: pointer; transition: border-color .15s, transform .06s; }
.cal-day.editable:hover, .cal-day.clickable:hover { border-color: var(--brand-2); }
.cal-day.editable:active { transform: translateY(1px); }
.cal-day.editable .cal-empty { color: var(--brand-2); opacity: .8; }
.ev-list { display: grid; gap: .6rem; margin: .3rem 0 1rem; }
.ev-row {
display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start;
background: color-mix(in srgb, var(--cat, var(--topic)) 8%, var(--bg));
border: 1px solid var(--border);
border-left: 4px solid var(--cat, var(--topic)); border-radius: 10px; padding: .6rem .8rem;
}
.ev-time { color: var(--muted); font-size: .78rem; font-weight: 700; }
.pill.type-topic { color: var(--t-water); border-color: color-mix(in srgb, var(--t-water) 40%, transparent); }
.pill.type-call { color: var(--t-electric); border-color: color-mix(in srgb, var(--t-electric) 40%, transparent); }
.pill.type-deadline { color: var(--t-fire); border-color: color-mix(in srgb, var(--t-fire) 40%, transparent); }
.ev-acts { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; }
.small-btn { padding: .3rem .6rem; font-size: .78rem; }
/* ══ CONTEÚDO RICO (Markdown renderizado) ══════════════════ */
.md-content { line-height: 1.6; }
.md-content .md-p { margin: .5rem 0; }
.md-content .md-h { margin: 1rem 0 .4rem; line-height: 1.3; }
.md-content h3.md-h { font-size: 1.15rem; }
.md-content h4.md-h { font-size: 1rem; }
.md-content h5.md-h { font-size: .9rem; color: var(--muted); }
.md-content .md-list { margin: .5rem 0; padding-left: 1.4rem; }
.md-content .md-list li { margin: .2rem 0; }
.md-content .md-quote {
margin: .7rem 0; padding: .5rem .9rem; border-left: 3px solid var(--accent);
background: rgba(255, 203, 5, .06); border-radius: 0 8px 8px 0; color: var(--muted);
}
.md-content a { color: var(--topic); text-decoration: underline; }
.md-content code {
background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
padding: .05rem .35rem; font-size: .88em; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.md-img { max-width: 100%; border-radius: 8px; }
.md-img.block { display: block; margin: .8rem 0; }
.md-video {
position: relative; padding-bottom: 56.25%; height: 0; margin: .9rem 0;
border-radius: 10px; overflow: hidden; background: #000;
}
.md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ══ ADMIN — lista de dias: estilos em "Conteúdo: cronograma por semana" ══ */
/* ══ EDITOR RICO (página dedicada, tela cheia) ═════════════ */
.editor-view {
position: fixed; inset: 0; z-index: 50; overflow-y: auto;
background: radial-gradient(1200px 600px at 80% -10%, #1b2b4c 0, transparent 60%), var(--bg);
animation: pop-in .25s ease both;
}
.editor-inner { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.3rem 4rem; }
.editor-head {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.editor-head h2 { margin: .1rem 0 0; }
.editor-body { display: grid; gap: 1rem; }
.editor-body .field { display: flex; flex-direction: column; gap: .3rem; }
.editor-body label { font-size: .82rem; font-weight: 600; }
.editor-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .editor-meta { grid-template-columns: 1fr; } }
.editor-actions {
display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.4rem;
padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.md-toolbar { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .4rem; }
.md-tool {
min-width: 34px; height: 32px; padding: 0 .5rem; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; font-weight: 700; font-size: .9rem;
}
.md-tool:hover { border-color: var(--brand-2); background: var(--panel); }
.md-split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 760px) { .md-split { grid-template-columns: 1fr; } }
.md-pane { display: flex; flex-direction: column; gap: .3rem; }
.md-pane-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.md-editor {
width: 100%; min-height: 240px; resize: vertical; line-height: 1.5;
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem;
}
.md-preview {
min-height: 240px; background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: .7rem .9rem; overflow: auto;
}
.md-editor.code { color: #cfe3ff; }
/* ══ TREINOS (jogos interativos) ═══════════════════════════ */
/* Faixa de gamificação: XP + nível + estrelas */
.xp-card {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
background: linear-gradient(135deg, var(--panel), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.xp-info { flex: 1; }
.xp-info h2 { margin: .15rem 0 .5rem; }
.xp-bar { height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.xp-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffe37a); transition: width .5s ease; }
.xp-sub { margin: .45rem 0 0; }
.xp-stars {
font-size: 1.15rem; font-weight: 800; color: var(--accent);
background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
padding: .7rem 1rem; white-space: nowrap;
}
/* ── Topo "Pokédex do Treinador": parceiro + XP + faixa de estatísticas ── */
.xp-card.dash-hero {
flex-direction: column; align-items: stretch; gap: 1.15rem;
position: relative; overflow: hidden; isolation: isolate; color: #fff;
border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
background:
radial-gradient(120% 130% at 100% 0%, rgba(238,90,78,.42), transparent 52%),
radial-gradient(100% 120% at 0% 100%, rgba(59,76,202,.24), transparent 55%),
linear-gradient(135deg, #241017, #1a0d13 60%, #140b10);
box-shadow: 0 16px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.xp-card.dash-hero::before { /* faixa holográfica no topo */
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
background: linear-gradient(90deg, #ee5a4e, #ffcb05, #ee5a4e);
}
.xp-card.dash-hero::after { /* marca d'água de Pokébola (bem sutil, atrás do texto) */
content: ""; position: absolute; z-index: 0; right: -50px; top: -58px; left: auto; bottom: auto;
width: 188px; height: 188px; border-radius: 50%; pointer-events: none; opacity: .22;
border: 12px solid rgba(255,255,255,.5); -webkit-mask: none; mask: none;
background: radial-gradient(circle, #fff 0 12px, rgba(255,255,255,.6) 12px 21px, transparent 21px) center/100% 100% no-repeat;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .eyebrow { color: rgba(255,255,255,.92); }
.dash-hero #xp-level, .dash-hero h2 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.dash-hero .xp-bar { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.dash-hero .xp-fill { background: linear-gradient(90deg, #ffd23f, #fff3b0); box-shadow: 0 0 10px rgba(255,210,63,.6); }
.dash-hero .xp-sub { color: rgba(255,255,255,.9); }
.dash-hero .xp-stars {
color: #ffe07a; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.dash-top { display: flex; align-items: center; gap: 1.1rem; }
/* Parceiro no hero: anel e moldura adaptados ao fundo vermelho */
.dash-hero .evo-ring { background: conic-gradient(#ffd23f var(--evo, 0%), rgba(255,255,255,.28) 0); box-shadow: 0 0 0 1px rgba(255,255,255,.32), 0 0 18px rgba(255,210,63,.3); }
.dash-hero .evo-core { background: radial-gradient(circle at 50% 28%, rgba(0,0,0,.3), rgba(0,0,0,.52)); }
.dash-hero .evo-name { color: #fff; }
.dash-hero .evo-dot { background: rgba(255,255,255,.35); }
.dash-hero .evo-dot.on { background: #ffd23f; box-shadow: 0 0 6px rgba(255,210,63,.7); }
.dash-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55rem; }
@media (max-width: 720px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.dstat {
display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
padding: .6rem .35rem; border: 1px solid rgba(255,255,255,.16); border-radius: 13px;
background: rgba(255,255,255,.07); color: #fff; font: inherit;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
transition: transform .1s, border-color .15s, box-shadow .15s;
}
.dstat { border-top: 3px solid var(--acc, #ffcb05); }
.dstat.clickable { cursor: pointer; }
.dstat.clickable:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(0,0,0,.32); border-color: color-mix(in srgb, var(--acc, #ffcb05) 70%, transparent); }
.dstat-ico { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc, #ffcb05) 55%, transparent)); }
.dstat-val { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: #fff; }
.dstat-lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.82); font-weight: 700; }
/* Estrelas reutilizáveis */
.stars { display: inline-flex; gap: .1rem; font-size: 1.05rem; line-height: 1; }
.stars.big { font-size: 1.8rem; gap: .2rem; }
.star { color: var(--border); }
.star.on { color: var(--accent); text-shadow: 0 0 8px rgba(255, 203, 5, .5); }
/* Lista de treinos */
.exercises-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.exercise-card {
display: flex; flex-direction: column; gap: .6rem;
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.1rem; position: relative; overflow: hidden;
}
.exercise-card::before {
content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--topic);
}
.exercise-card.type-quiz::before { background: var(--topic); }
.exercise-card.type-scenario::before { background: var(--call); }
.exercise-card.type-memory::before { background: var(--brand); }
.exercise-card.locked { opacity: .6; }
.exercise-card h3 { margin: 0; font-size: 1.1rem; }
.ex-icon { font-size: 1.8rem; }
.ex-meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.ex-foot { margin-top: auto; padding-top: .3rem; }
.ex-foot .btn { width: 100%; display: flex; align-items: center; justify-content: center; }
.pill.diff-easy { background: rgba(33, 192, 122, .15); color: #5fe0a6; }
.pill.diff-medium { background: rgba(79, 140, 255, .15); color: #8fb6ff; }
.pill.diff-hard { background: rgba(227, 53, 13, .15); color: #ff8a6b; }
/* Arena de jogo (reaproveita .editor-view / .editor-inner) */
.game-inner { max-width: min(1100px, 96vw); padding-top: 1.6rem; }
/* Fundo de pokébolas sutil em TODOS os minigames (atrás do conteúdo). */
#game-view::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Ccircle cx='75' cy='75' r='40'/%3E%3Cpath d='M35 75h25M90 75h25'/%3E%3Ccircle cx='75' cy='75' r='12' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
background-size: 130px 130px; opacity: .045;
}
#game-view > .game-inner { position: relative; z-index: 1; }
/* Cabeçalho da arena como barra contida (o botão "Sair" não encosta na borda). */
.game-inner .editor-head {
background: var(--panel); border: 1px solid var(--border);
border-radius: 12px; padding: .6rem .8rem .6rem 1rem; top: .8rem; margin-bottom: 1.3rem;
}
.game-nav { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1.3rem; }
.game-nav.center { justify-content: center; }
/* ── Identidade visual por jogo (bug 4) ──────────────────────────
Cada treino recebe uma cor de destaque (--game-accent) + tratamento
próprio de cabeçalho, corpo e HUD, para nenhum parecer o mesmo molde.
Só passar {theme, accent} em gameShell() já diferencia o jogo. */
.game-inner[class*="game-theme-"] .game-head {
border-color: color-mix(in srgb, var(--game-accent, var(--accent)) 55%, var(--border));
box-shadow: inset 5px 0 0 var(--game-accent, var(--accent));
background: linear-gradient(90deg, color-mix(in srgb, var(--game-accent, var(--accent)) 18%, var(--panel)), var(--panel) 62%);
}
.game-inner[class*="game-theme-"] .game-head h2 { color: var(--game-accent, var(--accent)); }
.game-inner[class*="game-theme-"] .game-head .eyebrow { color: color-mix(in srgb, var(--game-accent, var(--accent)) 60%, var(--muted)); }
.game-inner[class*="game-theme-"] .wt-round { color: var(--game-accent, var(--accent)); }
.game-inner[class*="game-theme-"] .wt-score { color: color-mix(in srgb, var(--game-accent, var(--accent)) 65%, var(--text)); }
/* Corpo com leve tingimento da cor + moldura (vale p/ quase todos os jogos). */
.game-inner[class*="game-theme-"] .whos-body,
.game-inner[class*="game-theme-"] .flash-body {
padding: 1rem 1.1rem 1.2rem; border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--game-accent) 28%, var(--border));
background: radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--game-accent) 11%, var(--panel)), var(--panel) 72%);
}
/* Realces internos comuns puxam a cor do jogo. */
.game-inner[class*="game-theme-"] .flash-q { border-left: 3px solid var(--game-accent); }
.game-inner[class*="game-theme-"] .scam-offer:hover,
.game-inner[class*="game-theme-"] .quiz-opt:hover { border-color: var(--game-accent); }
/* ── Motivos especiais (mais elaborados) — vêm depois p/ prevalecer. ── */
/* Quem é esse Pokémon? — tela de "scanner" da Pokédex (linhas de varredura). */
.game-inner.game-theme-whosthat .whos-body {
background:
repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--game-accent) 9%, transparent) 7px 8px),
radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--game-accent) 14%, var(--panel)), var(--panel));
}
.game-theme-whosthat .wt-q { color: var(--game-accent); }
/* Anagrama — mesa de peças de letras (xadrez diagonal + espaçamento). */
.game-inner.game-theme-anagram .whos-body {
background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--game-accent) 8%, var(--panel)) 0 14px, var(--panel) 14px 28px);
}
.game-theme-anagram .flash-text, .game-theme-anagram .flash-q { letter-spacing: .14em; }
/* Sequência (Simon) — pads com brilho neon roxo. */
.game-inner.game-theme-simon .whos-body { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-accent) 16%, var(--panel)), var(--panel)); }
.game-theme-simon .simon-grid { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--game-accent) 45%, transparent)); }
.game-theme-simon .simon-pad { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--border)); }
/* Fraqueza de tipos — arena de batalha (topo em brasa). */
.game-inner.game-theme-types .whos-body {
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-accent) 18%, var(--panel)), var(--panel));
border-top: 3px solid var(--game-accent);
}
/* ══════════════════════════════════════════════════════════════
Layouts SOB MEDIDA (bug 4 — leva bespoke)
Cada um destes jogos tem estrutura/interação própria, não só cor.
══════════════════════════════════════════════════════════════ */
/* ── Detetive de Logs — console de monitoramento (SOC/CRT) ── */
.ld-body { background: none !important; border: none !important; padding: 0 !important; }
.ld-term {
font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
background: linear-gradient(180deg, #0b1512, #0a1110);
border: 1px solid #163a33; border-radius: 12px; overflow: hidden; position: relative;
box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 60px rgba(51, 214, 182, .05);
}
.ld-term::after { /* scanlines de CRT */
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; z-index: 2;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px);
}
.ld-topbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; background: #0d1a17; border-bottom: 1px solid #16332c; }
.ld-dots { display: flex; gap: 5px; }
.ld-dots i { width: 10px; height: 10px; border-radius: 50%; background: #26463f; }
.ld-dots i:first-child { background: #e0533b; }
.ld-dots i:nth-child(2) { background: #e0a93b; }
.ld-dots i:nth-child(3) { background: #33d6b6; }
.ld-title { color: #7fd8c6; font-size: .82rem; letter-spacing: .02em; }
.ld-rec { margin-left: auto; color: #ff5b5b; font-size: .72rem; font-weight: 700; letter-spacing: .08em; animation: ld-rec 1.4s steps(1) infinite; }
@keyframes ld-rec { 50% { opacity: .25; } }
.ld-meta { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px dashed #16332c; flex-wrap: wrap; }
.ld-tag { font-size: .7rem; color: #5fbfa9; border: 1px solid #1c4038; border-radius: 5px; padding: .1rem .45rem; letter-spacing: .06em; }
.ld-tag.ok { color: #33d6b6; border-color: #2a5a4f; }
.ld-hint { margin-left: auto; color: #4e7a70; font-size: .72rem; }
.ld-log { display: flex; flex-direction: column; padding: .4rem .5rem; gap: 2px; position: relative; z-index: 1; }
.ld-line {
display: grid; grid-template-columns: 26px 72px auto 1fr auto; align-items: center; gap: .6rem;
text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px;
color: #cfeee6; padding: .34rem .5rem; cursor: pointer; font: inherit; font-size: .85rem;
transition: background .12s, border-color .12s;
}
.ld-line:hover:not([disabled]) { background: rgba(51, 214, 182, .08); border-color: #2a5a4f; }
.ld-gutter { color: #3c5f57; font-size: .72rem; text-align: right; }
.ld-ts { color: #4e8478; font-size: .74rem; }
.ld-user { color: #7fe0cd; font-weight: 700; white-space: nowrap; }
.ld-text { color: #b9d4cd; }
.ld-flag { color: #2a5a4f; font-size: .72rem; opacity: 0; transition: opacity .12s; }
.ld-line:hover:not([disabled]) .ld-flag { opacity: 1; }
.ld-line[disabled] { cursor: default; opacity: .9; }
.ld-line.violation { background: rgba(255, 80, 80, .14); border-color: #e0533b; }
.ld-line.violation .ld-user, .ld-line.violation .ld-text { color: #ffb3a8; }
.ld-line.violation .ld-flag { opacity: 1; color: #ff6b5b; }
.ld-line.missed { border-color: #e0a93b; }
.ld-prompt { padding: .3rem .9rem .7rem; color: #33d6b6; position: relative; z-index: 1; font-size: .9rem; }
.ld-blink { animation: ld-blink 1s steps(1) infinite; }
@keyframes ld-blink { 50% { opacity: 0; } }
.ld-reveal { margin-top: .9rem; }
.ld-verdict { font-family: ui-monospace, Consolas, monospace; border-radius: 10px; padding: .8rem .9rem; border: 1px solid; background: #0b1512; }
.ld-verdict.ok { border-color: #2a7a68; box-shadow: 0 0 0 1px rgba(51, 214, 182, .2); }
.ld-verdict.no { border-color: #7a3a2a; box-shadow: 0 0 0 1px rgba(224, 83, 59, .2); }
.ld-verdict-head { font-weight: 800; letter-spacing: .04em; margin-bottom: .4rem; }
.ld-verdict.ok .ld-verdict-head { color: #33d6b6; }
.ld-verdict.no .ld-verdict-head { color: #ff8b7a; }
.ld-rule-k { color: #4e8478; font-size: .74rem; display: block; margin-bottom: .15rem; }
.ld-rule p { margin: 0; color: #c9ded7; font-size: .9rem; line-height: 1.5; }
.ld-next { margin-top: .8rem; font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 560px) {
.ld-line { grid-template-columns: 20px auto 1fr; gap: .4rem; font-size: .8rem; }
.ld-ts, .ld-flag { display: none; }
}
/* ── Torre de Desafios — escalada vertical (uma vida) ── */
.twr-body { background: none !important; border: none !important; padding: 0 !important; }
.twr-stage { display: grid; grid-template-columns: 132px 1fr; gap: 1.1rem; align-items: stretch; }
.twr-tower {
position: relative; display: flex; flex-direction: column; gap: 0;
background: linear-gradient(180deg, #241a2e, #1a1420); border: 1px solid var(--border); border-radius: 14px;
padding: 8px; min-height: 380px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .4);
}
.twr-roof { text-align: center; font-size: 1.2rem; margin-bottom: 4px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.twr-floor {
flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
border: 1px solid #3a2c46; border-radius: 5px; margin-bottom: 4px; min-height: 22px; position: relative;
background: repeating-linear-gradient(90deg, #2a2033 0 10px, #251c2e 10px 20px);
color: #6b5a7a; font-size: .7rem; font-weight: 700;
}
.twr-floor.lit {
background: linear-gradient(90deg, color-mix(in srgb, var(--game-accent) 40%, #2a2033), color-mix(in srgb, var(--game-accent) 18%, #251c2e));
color: #ffd9b0; border-color: color-mix(in srgb, var(--game-accent) 55%, #3a2c46);
}
.twr-floor.current { border-color: var(--game-accent); color: #fff; box-shadow: 0 0 0 2px var(--game-accent), 0 0 14px color-mix(in srgb, var(--game-accent) 60%, transparent); }
.twr-floor.record::before { content: "🏆"; position: absolute; left: 6px; font-size: .74rem; }
.twr-climber {
position: absolute; left: 12px; width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.3rem;
transition: bottom .45s cubic-bezier(.34, 1.3, .6, 1); z-index: 3; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}
.twr-climber.falling { transition: bottom .55s cubic-bezier(.5, 0, .9, .4), transform .55s; bottom: 4px !important; transform: rotate(220deg); }
.twr-side { display: flex; flex-direction: column; gap: .9rem; }
.twr-hud { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.twr-floornow { font-family: var(--font-display); font-weight: 800; color: var(--game-accent); font-size: 1.05rem; }
.twr-best { color: var(--muted); font-weight: 700; }
.twr-life { margin-left: auto; color: #ff6b6b; font-weight: 700; font-size: .85rem; }
.twr-gate {
border: 2px solid color-mix(in srgb, var(--game-accent) 45%, var(--border)); border-radius: 14px; padding: 1.1rem 1.4rem;
background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--game-accent) 16%, var(--panel)), var(--panel)); position: relative;
}
.twr-gate::before, .twr-gate::after {
content: ""; position: absolute; top: 10px; bottom: 10px; width: 5px; opacity: .5;
background: repeating-linear-gradient(180deg, var(--game-accent) 0 8px, transparent 8px 16px);
}
.twr-gate::before { left: 7px; }
.twr-gate::after { right: 7px; }
.twr-q { font-size: 1.15rem; font-weight: 700; margin: .4rem 0 0; line-height: 1.4; }
.twr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.twr-yes, .twr-no { font-size: 1.05rem; font-weight: 800; padding: .9rem; border-radius: 12px; color: #fff; }
.twr-yes { background: #1f7a4d; border: 1px solid #2aa869; }
.twr-yes:hover:not([disabled]) { background: #249259; }
.twr-no { background: #a83232; border: 1px solid #d64545; }
.twr-no:hover:not([disabled]) { background: #c23c3c; }
@media (max-width: 560px) { .twr-stage { grid-template-columns: 100px 1fr; } .twr-gate { padding: 1rem; } }
/* ── Fila de Denúncias — central de tickets + anel de SLA ── */
.rq-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.rq-brand { display: flex; align-items: center; gap: .6rem; }
.rq-ico { font-size: 1.5rem; }
.rq-brand strong { display: block; font-family: var(--font-display); }
.rq-ring { position: relative; width: 56px; height: 56px; margin-left: auto; flex-shrink: 0; }
.rq-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rq-ring circle { fill: none; stroke-width: 6; }
.rq-track { stroke: color-mix(in srgb, var(--game-accent) 20%, var(--border)); }
.rq-prog { stroke: var(--game-accent); stroke-linecap: round; }
.rq-ring.run .rq-prog { stroke: #e8b23a; }
.rq-ring-lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: .62rem; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.rq-ticket { border: 1px solid var(--border); border-left: 4px solid var(--game-accent); border-radius: 12px; background: var(--panel); padding: .9rem 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.rq-ticket-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--border); }
.rq-id { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--game-accent); letter-spacing: .04em; }
.rq-badge { font-size: .68rem; font-weight: 800; color: #e0533b; letter-spacing: .06em; }
.rq-slacount { margin-left: auto; font-size: .72rem; color: var(--muted); }
.rq-field { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; padding: .28rem 0; align-items: start; }
.rq-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding-top: .1rem; }
.rq-v { line-height: 1.4; }
.rq-v.strong { font-weight: 800; font-size: 1.05rem; }
.rq-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; }
.rq-action { padding: .85rem .7rem; border-radius: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); text-align: center; cursor: pointer; transition: transform .06s, border-color .15s, background .15s; }
.rq-action:hover:not([disabled]) { border-color: var(--game-accent); transform: translateY(-2px); }
.rq-action.good { border-color: #2aa869; background: rgba(42, 168, 105, .16); color: #8ff0bf; }
.rq-action.bad { border-color: #d64545; background: rgba(214, 69, 69, .16); color: #ffb3ab; }
@media (max-width: 560px) { .rq-actions { grid-template-columns: 1fr; } }
/* ── Triagem de Chat — moderação ao vivo ── */
.tri-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 10px 10px 0 0; background: #1a1020; }
.tri-live { color: #ff4d4d; font-weight: 800; font-size: .72rem; letter-spacing: .06em; animation: ld-rec 1.3s steps(1) infinite; }
.tri-chan { font-family: ui-monospace, Consolas, monospace; color: var(--game-accent); font-weight: 700; }
.tri-count { margin-left: auto; font-size: .72rem; color: var(--muted); }
.tri-feed { border: 1px solid var(--border); border-top: none; background: linear-gradient(180deg, #140c1a, #0f0a14); padding: 1.1rem 1rem 1.3rem; min-height: 120px; }
.tri-msg { display: flex; gap: .6rem; align-items: flex-start; animation: tri-in .25s ease both; }
@keyframes tri-in { from { opacity: 0; transform: translateY(8px); } }
.tri-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--game-accent), #7a2d20); }
.tri-bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: .6rem .8rem; max-width: 80%; }
.tri-user { display: block; font-size: .72rem; font-weight: 800; color: var(--game-accent); margin-bottom: .15rem; }
.tri-text { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.tri-timer { padding: .5rem .2rem 0; }
.tri-timer-lbl { font-size: .72rem; color: var(--muted); }
.tri-track { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-top: .3rem; }
.tri-bar { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #2aa869, #e8b23a 60%, #e0533b); }
.tri-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.tri-punish, .tri-release, .tri-guide { padding: 1rem .6rem; border-radius: 12px; font-size: 1rem; font-weight: 800; color: #fff; transition: transform .06s, filter .15s; }
.tri-punish { background: #a83232; border: 1px solid #d64545; }
.tri-punish:hover:not([disabled]) { background: #c23c3c; }
.tri-release { background: #1f7a4d; border: 1px solid #2aa869; }
.tri-release:hover:not([disabled]) { background: #249259; }
.tri-guide { background: #b5771f; border: 1px solid #d9a441; }
.tri-guide:hover:not([disabled]) { background: #cc8724; }
/* Feedback pós-resposta: verde na ação certa, vermelho na escolhida errada */
.tri-actions .right { outline: 3px solid #7CFFB2; outline-offset: 1px; filter: brightness(1.12); }
.tri-actions .wrong { outline: 3px solid #ff9a9a; outline-offset: 1px; opacity: .85; }
.tri-actions button[disabled] { cursor: default; }
.tri-chandesc { margin: .1rem 0 .6rem; line-height: 1.35; }
.tri-ch-game { color: #6cc1ff; } .tri-ch-help { color: #8affc0; } .tri-ch-trade { color: #ffd06c; }
/* Centro de trocas — compacto no desktop e empilhado no celular. */
.trade-modal { max-width: 760px; }
.trade-form, .trade-card { display: grid; gap: .65rem; padding: .85rem; margin: .7rem 0; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; background: var(--surface-2, rgba(255,255,255,.04)); }
.trade-form label { display: grid; gap: .25rem; }
.trade-form .btn { justify-self: start; }
.trade-arrow { display: grid; place-items: center; color: var(--accent, #ffd166); font-size: 1.35rem; font-weight: 800; }
.trade-section-title { display: block; margin-top: 1rem; }
.trade-card.resolved { opacity: .68; }
.trade-card-head, .trade-pair { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.trade-pair { justify-content: flex-start; }
.trade-mon-line { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; }
.trade-mon-line > span { overflow-wrap: anywhere; }
.trade-mon-sprite { width: 42px; height: 42px; image-rendering: pixelated; object-fit: contain; }
.trade-empty, .trade-loading { padding: 1rem; border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.04)); color: var(--muted, #9ca8bd); }
@media (min-width: 620px) {
.trade-form { grid-template-columns: 1.2fr 1fr auto 1fr; align-items: end; }
.trade-form > .eyebrow { grid-column: 1 / -1; }
.trade-form > .btn { grid-column: 1 / -1; }
}
@media (max-width: 619px) {
.trade-card-head, .trade-pair { align-items: flex-start; flex-direction: column; }
.trade-pair .trade-arrow { align-self: center; transform: rotate(90deg); }
.trade-mon-line { width: 100%; }
}
@media (max-width: 460px) { .tri-actions { grid-template-columns: 1fr; } }
/* ── Quem é esse caso? — mesa de decisão (dossiê de processo) ── */
.cdk-dossier { position: relative; margin-top: .4rem; }
.cdk-tab { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #2a2410; background: var(--game-accent); padding: .25rem .8rem; border-radius: 8px 8px 0 0; }
.cdk-file { position: relative; border: 1px solid var(--border); border-top: 3px solid var(--game-accent); border-radius: 0 12px 12px 12px; padding: 1rem 1.1rem 1.4rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
background: repeating-linear-gradient(0deg, var(--panel) 0 27px, color-mix(in srgb, var(--game-accent) 5%, var(--panel)) 27px 28px); }
.cdk-filetop { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.cdk-pnum { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--game-accent); letter-spacing: .03em; }
.cdk-progress { font-size: .74rem; color: var(--muted); }
.cdk-text { font-size: 1.12rem; line-height: 1.55; margin: .3rem 0 0; }
.cdk-stamp { position: absolute; right: 14px; bottom: 12px; transform: rotate(-11deg); opacity: .5; font-weight: 800; font-size: .78rem; letter-spacing: .12em; padding: .15rem .5rem; border-radius: 5px; border: 2px solid color-mix(in srgb, var(--game-accent) 70%, #999); color: color-mix(in srgb, var(--game-accent) 70%, #999); }
.cdk-ask { font-weight: 700; margin: .9rem 0 .5rem; }
.cdk-verdicts { display: grid; gap: .55rem; }
.cdk-verdict { text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: .85rem 1rem .85rem 2.4rem; cursor: pointer; font: inherit; font-size: 1rem; color: var(--text); position: relative; transition: border-color .15s, background .15s, transform .06s; }
.cdk-verdict::before { content: "⚖"; position: absolute; left: .9rem; opacity: .5; }
.cdk-verdict:hover:not([disabled]) { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(2px); }
.cdk-verdict.right { border-color: #2aa869; background: rgba(42, 168, 105, .14); }
.cdk-verdict.right::before { content: "✓"; opacity: 1; color: #2aa869; }
.cdk-verdict.wrong { border-color: #d64545; background: rgba(214, 69, 69, .14); }
.cdk-verdict.wrong::before { content: "✗"; opacity: 1; color: #d64545; }
/* ── Digitação — janela de chat de suporte ── */
.sup-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #0f1a24; border: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.sup-head strong { font-family: var(--font-display); color: #cfe6f5; }
.sup-dot { width: 9px; height: 9px; border-radius: 50%; background: #2aa869; box-shadow: 0 0 8px #2aa869; }
.sup-meta { margin-left: auto; font-size: .72rem; color: var(--muted); }
.sup-chat { border: 1px solid var(--border); border-top: none; background: linear-gradient(180deg, #0c151d, #0a1219); padding: 1rem .9rem; display: flex; flex-direction: column; gap: .7rem; max-height: 260px; overflow-y: auto; }
.sup-row { display: flex; gap: .5rem; align-items: flex-end; }
.sup-row.in { justify-content: flex-start; }
.sup-row.out { justify-content: flex-end; animation: tri-in .22s ease both; }
.sup-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #16303f; font-size: 1rem; flex-shrink: 0; }
.sup-bubble { border-radius: 4px 14px 14px 14px; padding: .6rem .8rem; max-width: 82%; background: #16232e; border: 1px solid #23384a; }
.sup-bubble.sent { border-radius: 14px 14px 4px 14px; background: #1f4a63; border-color: #2c6a8c; }
.sup-tag { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--game-accent); font-weight: 700; margin-bottom: .25rem; }
.sup-target { margin: 0; font-size: 1.05rem; line-height: 1.45; color: #e6f1f8; user-select: none; }
.sup-bubble p { margin: 0; color: #e6f1f8; }
.sup-row.out.ok .sup-bubble.sent { border-color: #2aa869; }
.sup-row.out.no .sup-bubble.sent { border-color: #d64545; background: #5a2530; }
.sup-ticks { display: block; text-align: right; font-size: .66rem; margin-top: .25rem; opacity: .85; }
.sup-row.out.ok .sup-ticks { color: #7ef0b6; }
.sup-composer { display: flex; gap: .5rem; padding: .6rem; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: #0f1a24; }
.sup-input { flex: 1; background: #0c151d; border: 1px solid #23384a; border-radius: 22px; color: #e6f1f8; padding: .7rem 1rem; font: inherit; }
.sup-input:focus { outline: none; border-color: var(--game-accent); }
.sup-send { width: 44px; border-radius: 50%; background: var(--game-accent); color: #08131b; font-size: 1.1rem; font-weight: 800; border: none; flex-shrink: 0; cursor: pointer; }
.sup-send:hover:not([disabled]) { filter: brightness(1.1); }
/* ── Reescreva o Tom — editor lado a lado (antes → depois) ── */
.tw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tw-col { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.tw-col-head { font-size: .74rem; font-weight: 800; letter-spacing: .04em; padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
.tw-bad { border-color: color-mix(in srgb, #d64545 45%, var(--border)); }
.tw-bad .tw-col-head { color: #ff9a8f; background: rgba(214, 69, 69, .1); }
.tw-mine { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--border)); }
.tw-mine .tw-col-head { color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 10%, transparent); }
.tw-col-body { margin: 0; padding: .9rem; line-height: 1.55; font-size: 1rem; }
.tw-bad .tw-col-body { color: #e7c3bd; font-style: italic; }
.tw-editor { border: none; background: transparent; color: var(--text); resize: vertical; min-height: 140px; padding: .9rem; font: inherit; font-size: 1rem; line-height: 1.55; }
.tw-editor:focus { outline: none; }
.tw-model { grid-column: 1 / -1; display: none; border-color: #2aa869; }
.tw-model.show { display: flex; animation: tri-in .3s ease both; }
.tw-model .tw-col-head { color: #7ef0b6; background: rgba(42, 168, 105, .12); }
.tw-model .tw-col-body { color: #d7f2e5; }
.tw-compare { margin-top: 1rem; width: 100%; }
@media (max-width: 620px) { .tw-cols { grid-template-columns: 1fr; } }
/* ── Aviso, Mute ou Ban? — escada de punição ── */
.esc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.esc-badge { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--game-accent); }
.esc-hits { font-size: .8rem; color: var(--muted); font-weight: 700; }
.esc-case { border: 1px solid var(--border); border-left: 4px solid #d64545; border-radius: 12px; background: var(--panel); padding: .9rem 1rem; }
.esc-text { margin: .25rem 0 0; font-size: 1.12rem; line-height: 1.5; }
.esc-ask { font-weight: 700; margin: .9rem 0 .5rem; }
.esc-ladder { display: flex; flex-direction: column; gap: .5rem; }
.esc-rung { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); position: relative; transition: transform .06s, border-color .15s, box-shadow .15s; }
.esc-rung:hover:not([disabled]) { transform: translateX(3px); }
.esc-rung-n { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-weight: 800; color: #1a1a1a; }
.esc-rung-main { display: flex; flex-direction: column; }
.esc-rung-label { font-weight: 800; font-size: 1.05rem; }
.esc-rung-hint { font-size: .76rem; color: var(--muted); }
.esc-aviso { border-left: 5px solid #e3c93a; } .esc-aviso .esc-rung-n { background: #e3c93a; }
.esc-mute { border-left: 5px solid #e0872e; } .esc-mute .esc-rung-n { background: #e0872e; }
.esc-ban { border-left: 5px solid #d64545; } .esc-ban .esc-rung-n { background: #d64545; color: #fff; }
.esc-rung.right { box-shadow: 0 0 0 2px #2aa869, 0 8px 18px rgba(42, 168, 105, .25); border-color: #2aa869; }
.esc-rung.right::after { content: "✓"; margin-left: auto; color: #2aa869; font-weight: 800; font-size: 1.2rem; }
.esc-rung.wrong { box-shadow: 0 0 0 2px #d64545; opacity: .8; }
.esc-rung.wrong::after { content: "✗"; margin-left: auto; color: #ff8b7a; font-weight: 800; font-size: 1.2rem; }
/* ── Cite a Regra — código de conduta ── */
.rb-book { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(0deg, var(--panel) 0 29px, color-mix(in srgb, var(--game-accent) 5%, var(--panel)) 29px 30px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.rb-book-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem; background: color-mix(in srgb, var(--game-accent) 16%, var(--panel)); border-bottom: 2px solid color-mix(in srgb, var(--game-accent) 45%, var(--border)); flex-wrap: wrap; }
.rb-title { font-family: var(--font-display); font-weight: 800; color: var(--game-accent); letter-spacing: .02em; }
.rb-page { font-size: .72rem; color: var(--muted); }
.rb-occurrence { padding: .9rem 1.1rem 1.1rem; border-left: 4px solid color-mix(in srgb, var(--game-accent) 55%, var(--border)); margin: .3rem .3rem; }
.rb-scene { margin: .3rem 0 0; font-size: 1.1rem; line-height: 1.55; }
.rb-ask { font-weight: 700; margin: .9rem 0 .5rem; }
.rb-articles { display: grid; gap: .5rem; }
.rb-article { display: flex; align-items: baseline; gap: .8rem; text-align: left; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, background .15s, transform .06s; }
.rb-article:hover:not([disabled]) { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(2px); }
.rb-art-n { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--game-accent); flex-shrink: 0; min-width: 3.4rem; }
.rb-art-t { font-size: 1rem; }
.rb-article.good { border-color: #2aa869; background: rgba(42, 168, 105, .14); }
.rb-article.good .rb-art-n { color: #2aa869; }
.rb-article.bad { border-color: #d64545; background: rgba(214, 69, 69, .14); }
/* ── Modo História — trilha de patente + reputação ── */
.sty-rail { display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.sty-rank { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--muted); padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); }
.sty-rank:not(:last-child)::after { content: "→"; margin-left: .4rem; color: var(--border); }
.sty-rank-dot { font-weight: 800; }
.sty-rank.done { color: #7ef0b6; border-color: #2aa869; }
.sty-rank.on { color: var(--game-accent); border-color: var(--game-accent); box-shadow: 0 0 0 1px var(--game-accent); }
.sty-rep { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sty-rep-lbl { font-size: .74rem; color: var(--muted); font-weight: 700; }
.sty-repbar { flex: 1; height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.sty-repfill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--game-accent) 60%, #6b4fa0), var(--game-accent)); transition: width .4s ease; }
.sty-repnum { font-weight: 800; color: var(--game-accent); }
.sty-scene { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--game-accent) 12%, var(--panel)), var(--panel)); padding: 1.1rem 1.2rem; border-left: 4px solid var(--game-accent); }
.sty-text { margin: .3rem 0 0; font-size: 1.14rem; line-height: 1.6; }
.sty-choices { display: grid; gap: .5rem; margin-top: 1rem; }
.sty-choice { display: flex; align-items: center; gap: .7rem; text-align: left; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; font-size: 1rem; color: var(--text); transition: border-color .15s, background .15s, transform .06s; }
.sty-choice:hover { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(3px); }
.sty-arrow { color: var(--game-accent); font-weight: 800; flex-shrink: 0; }
/* ── Modere o Chat — janela de chat ao vivo ── */
.lm-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; background: #1c110e; border: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.lm-live { color: #ff4d3d; font-weight: 800; font-size: .72rem; letter-spacing: .08em; animation: ld-rec 1.3s steps(1) infinite; }
.lm-chan { font-family: ui-monospace, Consolas, monospace; color: var(--game-accent); font-weight: 700; }
.lm-count { margin-left: auto; font-weight: 800; color: #ff9a3d; }
.lm-instr { font-size: .78rem; color: var(--muted); margin: .5rem .2rem .6rem; }
.lm-feed { border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #17100e, #120c0a); padding: .6rem; min-height: 220px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.lm-msg { display: flex !important; align-items: center; gap: .55rem; text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; cursor: pointer; animation: tri-in .22s ease both; transition: transform .1s, border-color .15s, background .2s; }
.lm-msg:hover { transform: translateX(2px); border-color: var(--game-accent); }
.lm-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4a4a55, #2a2a33); }
.lm-msg.is-bad .lm-av { background: linear-gradient(135deg, var(--game-accent), #7a2417); }
.lm-body { display: flex; flex-direction: column; min-width: 0; }
.lm-body .log-user { font-size: .72rem; font-weight: 800; color: var(--game-accent); }
.lm-body .log-text { color: var(--text); }
.lm-msg.muted { border-color: #2aa869; background: rgba(42, 168, 105, .12); opacity: .85; }
.lm-msg.wrongmute { border-color: #d64545; background: rgba(214, 69, 69, .14); }
.lm-msg.expired { border-color: #e0a93b; }
.lm-msg.leaving { opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .4s; }
/* ── Forca da Moderação — forca desenhada ── */
.fc-stagewrap { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; align-items: center; }
.fc-stage { background: linear-gradient(180deg, #1a2216, #131a10); border: 1px solid var(--border); border-radius: 14px; padding: .6rem; }
.fc-svg { width: 100%; height: auto; display: block; }
.fc-frame { stroke: #6f5a3a; stroke-width: 6; stroke-linecap: round; }
.fc-rope { stroke: #b89b5e; stroke-width: 3; }
.fc-p { stroke: var(--game-accent); fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .25s ease; }
.fc-p:first-of-type { fill: none; }
circle.fc-p { fill: transparent; }
.fc-p.show { opacity: 1; }
/* "Boneco" = Pokémon numa jaula que fecha a cada erro */
.fc-cage { position: relative; display: grid; place-items: center; min-height: 130px; padding: .4rem; }
.fc-cage-top { position: absolute; top: -.2rem; font-size: 1.2rem; z-index: 3; }
.fc-mon { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; transition: transform .3s ease, filter .3s ease; z-index: 1; }
.fc-bars { position: absolute; inset: 12% 8% 6%; display: flex; justify-content: space-between; z-index: 2; pointer-events: none; }
.fc-bar { width: 4px; border-radius: 3px; background: linear-gradient(180deg, #cdd6e6, #7f8aa3); box-shadow: 0 0 4px rgba(0,0,0,.4); transform: scaleY(0); transform-origin: top; transition: transform .28s cubic-bezier(.3,.8,.3,1.2); }
.fc-bar.show { transform: scaleY(1); }
.fc-cage.shut .fc-mon { filter: grayscale(.6) brightness(.8); transform: scale(.9); }
.fc-cage.free .fc-mon { animation: fc-escape .6s ease both; }
@keyframes fc-escape { 0% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.08); } 100% { transform: translateY(0) scale(1); } }
.fc-panel { display: flex; flex-direction: column; gap: .6rem; }
.fc-errhud { font-family: var(--font-display); font-weight: 800; color: var(--game-accent); }
.fc-word { display: flex; flex-wrap: wrap; gap: .3rem; }
.fc-kb { margin-top: .3rem; }
@media (max-width: 560px) { .fc-stagewrap { grid-template-columns: 110px 1fr; } }
/* ── Ordene o Protocolo — prancheta/checklist ── */
.op-clip { border: 1px solid var(--border); border-top: 4px solid var(--game-accent); border-radius: 12px; background: var(--panel); padding: .8rem 1rem; margin-bottom: .8rem; position: relative; }
.op-clip::before { content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 54px; height: 12px; border-radius: 6px; background: #7d848c; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3); }
.op-clip-top { display: flex; align-items: center; justify-content: space-between; }
.op-title { font-family: var(--font-display); font-weight: 800; color: var(--game-accent); }
.op-progress { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--muted); }
.op-instr { font-size: .78rem; color: var(--muted); margin: .3rem 0 0; }
.op-list { display: flex; flex-direction: column; gap: .45rem; }
.op-item { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .75rem .9rem; border-radius: 10px; border: 1px dashed var(--border); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, background .15s, transform .06s; }
.op-item:hover:not(.chosen) { border-color: var(--game-accent); transform: translateX(2px); }
.op-num { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-weight: 800; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.op-item.chosen { border-style: solid; border-color: color-mix(in srgb, var(--game-accent) 55%, var(--border)); background: color-mix(in srgb, var(--game-accent) 10%, var(--panel)); }
.op-item.chosen .op-num { background: var(--game-accent); color: #08131b; border-color: var(--game-accent); }
.op-step-t { line-height: 1.4; }
.op-step-main { display: flex; flex-direction: column; gap: .15rem; }
.op-step-tip { line-height: 1.35; opacity: .85; }
.op-item { align-items: flex-start; }
.op-scenario { margin: .5rem 0 .2rem; padding: .6rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--game-accent) 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--game-accent) 30%, var(--border)); }
.op-scenario p { margin: .2rem 0 0; line-height: 1.4; }
/* ── Árvore de Decisão — fluxograma ── */
.dt-trail { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: .4rem; }
.dt-node { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 99px; font-size: .82rem; font-weight: 700; border: 1px solid var(--border); background: var(--panel); }
.dt-node.yes { border-color: #2aa869; color: #7ef0b6; }
.dt-node.no { border-color: #d64545; color: #ff9a8f; }
.dt-node-i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); font-size: .7rem; }
.dt-trail .dt-node:not(:last-child)::after,
.dt-current::before { content: ""; }
.dt-trail .dt-node { position: relative; margin-bottom: 20px; }
.dt-trail .dt-node:not(:last-child)::after { position: absolute; left: 50%; bottom: -20px; width: 2px; height: 20px; background: var(--border); }
.dt-current { display: flex; flex-direction: column; align-items: center; margin: .6rem 0 1rem; }
.dt-step { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--game-accent); font-weight: 800; margin-bottom: .5rem; }
.dt-diamond { max-width: 460px; border: 2px solid var(--game-accent); background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--game-accent) 16%, var(--panel)), var(--panel)); border-radius: 16px; padding: 1.1rem 1.3rem; text-align: center; position: relative; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.dt-diamond::before { content: "◆"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: var(--game-accent); font-size: 1rem; background: var(--bg, var(--panel)); padding: 0 .3rem; }
.dt-q { font-size: 1.12rem; font-weight: 700; line-height: 1.5; }
.dt-branches { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 460px; margin: 0 auto; }
.dt-yes, .dt-no { font-size: 1.05rem; font-weight: 800; padding: .9rem; border-radius: 12px; color: #fff; }
.dt-yes { background: #1f7a4d; border: 1px solid #2aa869; }
.dt-yes:hover { background: #249259; }
.dt-no { background: #a83232; border: 1px solid #d64545; }
.dt-no:hover { background: #c23c3c; }
/* ── Encaixe a Punição — tabuleiro de ligação ── */
.mt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.mt-title { font-weight: 700; }
.mt-count { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--game-accent); }
.mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mt-col { display: flex; flex-direction: column; gap: .5rem; }
.mt-collabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--muted); text-align: center; padding-bottom: .2rem; border-bottom: 2px dashed color-mix(in srgb, var(--game-accent) 35%, var(--border)); }
.mt-grid .match-item { display: block; width: 100%; text-align: left; padding: .8rem .9rem; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .12s, background .12s, transform .08s, box-shadow .15s; }
.mt-grid .match-item:hover:not([disabled]):not(.done) { border-color: var(--game-accent); transform: translateY(-1px); }
.mt-grid .match-item.sel { border-color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 16%, var(--panel)); box-shadow: 0 0 0 2px var(--game-accent); }
.mt-grid .match-item.done { border-color: #2aa869; background: rgba(42, 168, 105, .14); opacity: .75; }
.mt-grid .match-item.miss { border-color: #d64545; background: rgba(214, 69, 69, .16); animation: mt-shake .4s; }
@keyframes mt-shake { 0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-5px);} 75%{ transform: translateX(5px);} }
/* ── Erro do Dia — revisão de caso ── */
.md-report { border: 1px solid var(--border); border-left: 4px solid var(--game-accent); border-radius: 12px; background: var(--panel); padding: .9rem 1.1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.md-report-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.md-stamp { font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: .05em; color: var(--game-accent); }
.md-day { font-size: .72rem; color: var(--muted); }
.md-scene { margin: 0; font-size: 1.12rem; line-height: 1.55; }
.md-ask { font-weight: 700; margin: .9rem 0 .5rem; }
.md-options { display: grid; gap: .5rem; }
.md-option { text-align: left; padding: .8rem 1rem .8rem 2.5rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; font-size: 1rem; color: var(--text); position: relative; transition: border-color .15s, background .15s, transform .06s; }
.md-option::before { content: "🩺"; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); opacity: .55; }
.md-option:hover:not([disabled]) { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(2px); }
.md-option.good { border-color: #2aa869; background: rgba(42, 168, 105, .14); }
.md-option.good::before { content: "✓"; opacity: 1; color: #2aa869; }
.md-option.bad { border-color: #d64545; background: rgba(214, 69, 69, .14); }
.md-option.bad::before { content: "✗"; opacity: 1; color: #d64545; }
/* ── Quiz de Cena — print de tela (screenshot) ── */
.sc-shot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.sc-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: #171722; border-bottom: 1px solid var(--border); }
.sc-dots { display: flex; gap: 5px; }
.sc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a48; }
.sc-dots i:first-child { background: #e0533b; }
.sc-dots i:nth-child(2) { background: #e0a93b; }
.sc-dots i:nth-child(3) { background: #2aa869; }
.sc-chan { font-family: ui-monospace, Consolas, monospace; color: #b7b7c8; font-size: .82rem; }
.sc-badge { margin-left: auto; font-size: .64rem; font-weight: 800; letter-spacing: .08em; color: var(--game-accent); border: 1px solid color-mix(in srgb, var(--game-accent) 45%, var(--border)); border-radius: 5px; padding: .1rem .4rem; }
.sc-log { background: linear-gradient(180deg, #12121b, #0e0e15); padding: .7rem; display: flex; flex-direction: column; gap: .35rem; }
.sc-line { display: flex; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; }
.sc-line.staff { background: color-mix(in srgb, var(--game-accent) 12%, transparent); border-left: 2px solid var(--game-accent); }
.sc-u { font-weight: 800; color: #9a8fd6; white-space: nowrap; }
.sc-line.staff .sc-u { color: var(--game-accent); }
.sc-t { color: #cdcde0; }
.sc-ask { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .5rem; padding: .7rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--game-accent) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--game-accent) 35%, var(--border)); }
.sc-ask p { margin: 0; font-weight: 700; }
.sc-ask-ico { font-size: 1.2rem; }
/* ── Roleplay — chat de atendimento + medidor de humor ── */
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rp-who { display: flex; align-items: center; gap: .6rem; }
.rp-face { font-size: 1.9rem; line-height: 1; }
.rp-who strong { display: block; }
.rp-sat { display: flex; align-items: center; gap: .5rem; min-width: 200px; flex: 1; justify-content: flex-end; }
.rp-satbar { width: 130px; height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.rp-satfill { display: block; height: 100%; border-radius: 99px; transition: width .4s ease, background .3s; }
.rp-satfill.hi { background: linear-gradient(90deg, #2aa869, #6fe0a0); }
.rp-satfill.mid { background: linear-gradient(90deg, #e0a93b, #f0c968); }
.rp-satfill.lo { background: linear-gradient(90deg, #d64545, #e0533b); }
.rp-satnum { font-weight: 800; color: var(--game-accent); min-width: 3ch; text-align: right; }
.rp-intro { font-size: .82rem; color: var(--muted); font-style: italic; margin: 0 0 .7rem; }
.rp-chat { background: linear-gradient(180deg, #1a1016, #140c11); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; }
.rp-msg { display: flex; gap: .6rem; align-items: flex-start; }
.rp-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: linear-gradient(135deg, var(--game-accent), #7a3a5a); flex-shrink: 0; }
.rp-bubble2 { background: var(--panel); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; padding: .8rem 1rem; font-size: 1.12rem; line-height: 1.5; max-width: 85%; }
.rp-opts { display: grid; gap: .5rem; margin-top: 1rem; }
.rp-opt { text-align: left; padding: .8rem 1rem; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; font-size: 1rem; color: var(--text); transition: border-color .15s, background .15s, transform .06s; }
.rp-opt:hover:not([disabled]) { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(2px); }
.rp-opt.good { border-color: #2aa869; background: rgba(42, 168, 105, .14); }
.rp-opt.bad { border-color: #d64545; background: rgba(214, 69, 69, .14); }
/* ── Quiz-relâmpago — cartão arcade certo/errado ── */
.fq-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fq-dots { display: flex; gap: .4rem; }
.fq-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); }
.fq-dot.done { background: var(--game-accent); border-color: var(--game-accent); }
.fq-dot.now { box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 30%, transparent); border-color: var(--game-accent); }
.fq-score { font-family: var(--font-display); font-weight: 800; color: var(--game-accent); }
.fq-card { position: relative; border: 2px solid color-mix(in srgb, var(--game-accent) 45%, var(--border)); border-radius: 18px; padding: 2rem 1.4rem; text-align: center; background: radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--game-accent) 20%, var(--panel)), var(--panel)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); overflow: hidden; }
.fq-card::before { content: "⚡"; position: absolute; top: -8px; right: 10px; font-size: 3.4rem; opacity: .12; transform: rotate(12deg); }
.fq-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--game-accent); }
.fq-statement { font-size: 1.35rem; font-weight: 700; line-height: 1.45; margin: .6rem 0 0; }
.fq-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; }
.fq-yes, .fq-no { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.1rem; border-radius: 14px; font-size: 1.15rem; font-weight: 800; color: #fff; }
.fq-ico { font-size: 1.3rem; }
.fq-yes { background: #1f7a4d; border: 1px solid #2aa869; }
.fq-yes:hover:not([disabled]) { background: #249259; transform: translateY(-2px); }
.fq-no { background: #a83232; border: 1px solid #d64545; }
.fq-no:hover:not([disabled]) { background: #c23c3c; transform: translateY(-2px); }
.fq-next { display: block; width: 100%; margin-top: 1rem; padding: .85rem 1rem; font-size: 1.02rem; }
/* ── Elite dos 4 — arena de desafiantes ── */
.e4-arena { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, #241d0f, #1a1509); padding: .9rem 1rem; box-shadow: inset 0 0 40px rgba(212, 175, 55, .08); }
.e4-seals { display: flex; justify-content: center; gap: .5rem; margin-bottom: .8rem; }
.e4-seal { font-size: 1.3rem; color: #6a5a2e; transition: transform .2s; }
.e4-seal.won { color: var(--game-accent); text-shadow: 0 0 10px color-mix(in srgb, var(--game-accent) 60%, transparent); }
.e4-seal.now { color: #fff; transform: scale(1.25); }
.e4-challenger { display: flex; align-items: center; gap: .8rem; }
.e4-face { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.e4-idcol { display: flex; flex-direction: column; }
.e4-role { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #b39a4e; font-weight: 700; }
.e4-name { font-family: var(--font-display); font-size: 1.2rem; color: #f0dfa8; }
.e4-hp { margin-left: auto; font-weight: 800; color: var(--game-accent); font-size: 1.1rem; }
.e4-q { margin: 1rem 0 .6rem; padding: 1rem 1.2rem; border-radius: 12px; border-left: 4px solid var(--game-accent); background: var(--panel); }
.e4-q p { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.e4-opts { display: grid; gap: .5rem; }
.e4-opt { text-align: left; padding: .85rem 1rem; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font: inherit; font-size: 1rem; color: var(--text); transition: border-color .15s, background .15s, transform .06s; }
.e4-opt:hover:not([disabled]) { border-color: var(--game-accent); background: var(--panel-2); transform: translateX(2px); }
.e4-opt.good { border-color: #2aa869; background: rgba(42, 168, 105, .14); }
.e4-opt.bad { border-color: #d64545; background: rgba(214, 69, 69, .14); }
/* ── Pokémon do Dia — cartão de calendário + scanner ── */
.pd-card { max-width: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.pd-cal { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; background: color-mix(in srgb, var(--game-accent) 22%, var(--panel)); border-bottom: 2px solid color-mix(in srgb, var(--game-accent) 45%, var(--border)); }
.pd-cal-top { font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .05em; color: var(--game-accent); }
.pd-cal-date { font-family: ui-monospace, Consolas, monospace; font-size: .74rem; color: var(--muted); }
.pd-streak { margin-left: auto; font-weight: 800; color: #ff8a3d; }
.pd-scan { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem 1rem; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--game-accent) 16%, var(--panel)), var(--panel)); }
.pd-scan::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb, var(--game-accent) 8%, transparent) 8px 9px); }
.pd-q { color: var(--game-accent); font-weight: 700; z-index: 1; }
.pd-mon { width: 150px; height: 150px; object-fit: contain; z-index: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
/* ── Roleta do Dia — janela de sorteio com ponteiro ── */
.rl-machine { position: relative; display: flex; flex-direction: column; align-items: center; margin: .4rem 0 .2rem; }
.rl-pointer { color: var(--accent, #ffcb05); font-size: 1.2rem; line-height: 1; margin-bottom: -4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); z-index: 2; }
.rl-window { width: 100%; min-height: 64px; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 1.05rem; padding: 1rem; border-radius: 12px; border: 2px solid var(--border); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 8px 16px rgba(0, 0, 0, .3), inset 0 -8px 16px rgba(0, 0, 0, .3); overflow: hidden; }
.rl-window.landed { border-color: var(--accent, #ffcb05); box-shadow: 0 0 0 2px var(--accent, #ffcb05), 0 0 24px color-mix(in srgb, var(--accent, #ffcb05) 50%, transparent); animation: rl-pop .4s ease; }
@keyframes rl-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* ── Torneio — setup de competidores (bracket/seed) ── */
.tn-banner { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; margin: -.2rem 0 .8rem; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, #d4af37 24%, var(--panel)), var(--panel) 70%); border: 1px solid color-mix(in srgb, #d4af37 45%, var(--border)); box-shadow: inset 4px 0 0 #d4af37; }
.tn-trophy { font-size: 2.2rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.tn-banner h3 { margin: 0; color: #e8cf7a; font-family: var(--font-display); }
.tn-field { margin: .3rem 0 .6rem; }
.tn-slots { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 .2rem; }
.tn-slot { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.tn-seed { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-weight: 800; color: #2a2410; background: #d4af37; }
.tn-input { flex: 1; background: transparent; border: none; color: var(--text); font: inherit; font-weight: 600; padding: .3rem .2rem; }
.tn-input:focus { outline: none; }
.tn-ball { color: #d4af37; opacity: .5; }
/* Quiz */
.quiz-count { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: .4rem; }
.quiz-prompt { font-size: 1.2rem; margin-bottom: 1rem; }
.quiz-options { display: grid; gap: .6rem; }
.quiz-opt {
display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%;
background: var(--panel); border: 1px solid var(--border); color: var(--text);
border-radius: 12px; padding: .9rem 1rem; cursor: pointer; font-size: .95rem;
font-family: inherit; transition: border-color .15s, background .15s, transform .06s;
}
.quiz-opt:hover { border-color: var(--brand-2); background: var(--panel-2); }
.quiz-opt:active { transform: translateY(1px); }
.quiz-opt.selected { border-color: var(--accent); background: rgba(255, 203, 5, .1); }
.quiz-opt-key {
display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-weight: 800; font-size: .85rem;
}
.quiz-opt.selected .quiz-opt-key { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
/* Revisão pós-quiz */
.quiz-review { display: grid; gap: .7rem; margin-top: 1.2rem; }
.qr-item { border: 1px solid var(--border); border-left: 4px solid var(--call); border-radius: 10px; padding: .7rem .9rem; background: var(--panel); }
.qr-item.bad { border-left-color: var(--brand); }
.qr-q { margin-bottom: .3rem; }
.qr-line { font-size: .88rem; margin-top: .2rem; }
.qr-line.correct { color: #5fe0a6; }
.qr-explain { margin-top: .35rem; }
/* Cenário */
.scenario-points { font-size: .78rem; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.scenario-text { font-size: 1.12rem; margin-bottom: 1.1rem; }
.scenario-choices { display: grid; gap: .6rem; }
.scenario-choice {
text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border);
color: var(--text); border-radius: 12px; padding: .9rem 1rem; cursor: pointer;
font-size: .95rem; font-family: inherit; transition: border-color .15s, background .15s, transform .06s;
}
.scenario-choice:hover { border-color: var(--brand-2); background: var(--panel-2); transform: translateX(3px); }
.scenario-feedback { border-radius: 12px; padding: 1rem 1.1rem; border: 1px solid var(--border); animation: pop-in .25s ease both; }
.scenario-feedback.good { border-left: 4px solid var(--call); background: rgba(33, 192, 122, .08); }
.scenario-feedback.bad { border-left: 4px solid var(--deadline); background: rgba(255, 138, 61, .08); }
.sf-points { font-weight: 800; margin-bottom: .3rem; }
.scenario-ending { font-size: 1.15rem; text-align: center; padding: 1.4rem 1rem; border-radius: 12px; margin-bottom: 1rem; background: var(--panel); border: 1px solid var(--border); }
.scenario-ending.good { border-color: var(--call); }
.scenario-ending.bad { border-color: var(--deadline); }
/* Faixa de resultado */
.result-banner {
display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
padding: 1.4rem 1rem; background: linear-gradient(135deg, var(--panel), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius); animation: pop-in .3s ease both;
}
.rb-score { font-size: 1.1rem; font-weight: 700; }
.rb-xp { font-size: 1.05rem; font-weight: 800; color: var(--accent); }
/* ── Jogo da memória (situação × punição) ─────────────────── */
.memory-info {
margin-bottom: .8rem; font-weight: 700; letter-spacing: .01em;
display: inline-block; padding: .3rem .7rem; border-radius: 999px;
background: var(--panel-2); border: 1px solid var(--border);
}
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 620px) { .memory-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }
.mem-card {
position: relative; aspect-ratio: 3 / 4; border: none; background: transparent;
padding: 0; cursor: pointer; perspective: 900px;
}
.mem-card:focus-visible { outline: 3px solid rgba(255, 203, 5, .6); outline-offset: 3px; border-radius: 18px; }
.mem-face {
position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
border-radius: 16px; border: 1px solid var(--border); padding: .55rem;
backface-visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .3, 1.25); overflow: hidden;
}
/* Verso: "carta de treinador" — idêntica em todas (não dá para colar). */
.mem-back {
background: radial-gradient(120% 92% at 50% 14%, var(--brand-2) 0, var(--brand) 44%, #7a1c07 100%);
color: #fff; font-weight: 800;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 -26px 36px rgba(0, 0, 0, .28);
}
.mem-sprite {
width: 64%; height: 64%; object-fit: contain; position: relative; z-index: 1;
image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
}
/* "?" decorativo no canto (e reserva se o sprite não carregar). */
.mem-back-q {
position: absolute; right: .5rem; bottom: .28rem; font-size: 1.3rem;
font-weight: 900; opacity: .5; z-index: 2;
}
/* Frente: cartão de conteúdo com faixa colorida por tipo. */
.mem-front {
background: linear-gradient(180deg, var(--panel), var(--panel-2));
transform: rotateY(180deg); flex-direction: column; gap: .45rem;
display: flex; align-items: center; justify-content: flex-start; padding-top: .85rem;
}
.mem-front::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--border); }
.mem-card.situation .mem-front { border-color: var(--topic); }
.mem-card.situation .mem-front::before { background: var(--topic); }
.mem-card.punishment .mem-front { border-color: var(--accent); }
.mem-card.punishment .mem-front::before { background: var(--accent); }
.mem-card.flipped .mem-back { transform: rotateY(180deg); }
.mem-card.flipped .mem-front { transform: rotateY(360deg); }
.mem-card.matched .mem-front {
border-color: var(--call); border-style: solid;
box-shadow: 0 0 0 2px rgba(33, 192, 122, .35), 0 8px 20px rgba(33, 192, 122, .18);
animation: pop-in .35s ease;
}
.mem-card.matched .mem-front::before { background: var(--call); }
.mem-card.matched .mem-text { font-size: .72rem; opacity: .85; }
.mem-kind {
font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
color: var(--muted); background: rgba(255, 255, 255, .05);
border: 1px solid var(--border); padding: .12rem .55rem; border-radius: 999px;
}
.mem-card.situation.flipped .mem-kind { color: var(--topic); border-color: rgba(79, 140, 255, .5); }
.mem-card.punishment.flipped .mem-kind { color: var(--accent); border-color: rgba(255, 203, 5, .5); }
.mem-card.matched .mem-kind::after { content: ' ✓'; color: var(--call); }
.mem-text { font-size: .8rem; line-height: 1.28; font-weight: 600; color: var(--text); }
/* Pokémon "capturado" ao formar o par. */
.mem-reveal { display: grid; place-items: center; margin-top: auto; }
.mem-reveal-sprite {
width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
animation: capture-pop .55s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes capture-pop {
0% { transform: scale(0) rotate(-25deg); opacity: 0; }
60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
100% { transform: scale(1) rotate(0); }
}
.memory-foot { margin-top: 1rem; }
/* Construtores de conteúdo (autoria) */
.builder { display: grid; gap: .8rem; }
.builder-q { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .9rem; display: grid; gap: .5rem; }
.builder-q-head { display: flex; justify-content: space-between; align-items: center; }
.builder-opts { display: grid; gap: .4rem; }
.builder-opt-row { display: flex; align-items: center; gap: .5rem; }
.builder-opt-row .opt-inp { flex: 1; }
.builder-pair { display: flex; align-items: center; gap: .5rem; }
.builder-pair input { flex: 1; }
.pair-link { color: var(--accent); font-weight: 800; }
.icon-btn {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-weight: 700;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-2); }
/* Login gerado (modal pós-criação) + e-mail editável na lista */
.cred-box {
font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 1.05rem;
color: var(--accent); background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0; word-break: break-all;
}
.email-inp { width: 100%; max-width: 260px; margin-top: .25rem; font-size: .82rem; padding: .35rem .5rem; }
/* ── Anexos de imagem (atividades) ─────────────────────────── */
.btn-sm { padding: .35rem .6rem; font-size: .8rem; }
.attach-field { margin: .6rem 0; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.attach-preview { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.attach-thumb { display: inline-block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; line-height: 0; }
.attach-thumb img { max-width: 180px; max-height: 140px; object-fit: cover; display: block; }
.sealed-answer { margin-top: .5rem; padding: .7rem .9rem; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); min-width: 0; overflow: hidden; }
.sealed-answer p { white-space: pre-wrap; }
.sealed-answer .md-content { width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* ── Progresso: participação + rubrica/ranking ─────────────── */
.progress-card { display: flex; align-items: center; gap: .8rem; justify-content: space-between; flex-wrap: wrap; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, var(--bg)); }
.progress-card > div:first-child { flex: 1 1 140px; }
.rank-badge { font-weight: 800; font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.rank-badge.tier-exemplar { background: #1c7c3a33; color: #7CFC9B; border-color: #2ecc71; }
.rank-badge.tier-consistente { background: #1c5a7c33; color: #7CD6FC; border-color: #3aa0d1; }
.rank-badge.tier-em { background: #7c6a1c33; color: #FCE47C; border-color: #d1b83a; }
.rank-badge.tier-iniciante { background: #7c2b1c33; color: #FCA07C; border-color: #d1633a; }
.rank-badge.tier-sem { background: var(--bg); color: var(--muted); }
.profile-modal { display: flex; flex-direction: column; gap: .55rem; max-width: 560px; max-height: 78vh; overflow-y: auto; padding-right: .3rem; }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cat-list { display: flex; flex-direction: column; gap: .4rem; }
.cat-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: .6rem; }
.cat-name { font-size: .82rem; }
.cat-bar { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.cat-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.cat-val { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rate-form { border: 1px dashed var(--border); border-radius: 10px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .5rem; }
.rate-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.audit-log { margin: .2rem 0 .4rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.mark-list { display: flex; flex-direction: column; gap: .5rem; max-height: 50vh; overflow-y: auto; }
.mark-row { display: grid; grid-template-columns: 1fr 150px 1fr auto; gap: .5rem; align-items: center; }
.mark-name { font-weight: 600; font-size: .85rem; }
.mark-note { font-size: .8rem; }
/* ── Cronograma de conteúdo (item 10) ──────────────────────── */
.schedule-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.sched-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin: .6rem 0; }
.sched-check { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .85rem; }
.sched-check input { accent-color: var(--brand); }
/* ── Quiz ao vivo (multiplayer) ────────────────────────────── */
.live-bar { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.6rem .8rem; margin-bottom:.8rem; border:1px solid var(--border); border-radius:12px; background:var(--surface,var(--bg)); }
.live-bar > span:first-child { font-weight:700; }
/* Jogo ainda bloqueado por nível (bug 2): cinza, apagado e sem clique. */
.btn.game-locked { opacity:.45; filter:grayscale(1); cursor:not-allowed; box-shadow:none; }
.btn.game-locked:hover { transform:none; }
.unlock-hint { margin:-.3rem 0 .8rem; }
/* ══════════════════════════════════════════════════════════════
Aba TREINOS — layout em seções (redesign): sub-nav + uma seção
por vez + jogos em grade de cards (sem a parede de botões).
══════════════════════════════════════════════════════════════ */
#exercises-list { display: block; }
.treinos-nav {
display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.2rem;
padding: .35rem; border: 1px solid var(--border); border-radius: 14px;
background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.tseg {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 1 1 auto;
min-width: 92px; padding: .62rem .7rem; border-radius: 10px; border: 1px solid transparent;
background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tseg:hover { background: var(--panel); color: var(--text); }
.tseg.active {
background: linear-gradient(135deg, var(--accent), #ff9a3c); color: #3a2600;
border-color: transparent; box-shadow: 0 4px 12px rgba(255, 154, 60, .32); font-weight: 800;
}
.tseg-ico { font-size: 1.15rem; }
@media (max-width: 560px) { .tseg-lbl { display: none; } .tseg { min-width: 0; padding: .6rem; } }
.treinos-content { animation: tsec-in .25s ease; }
.tsec.hidden { display: none; }
@keyframes tsec-in { from { opacity: 0; transform: translateY(6px); } }
.tsub { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; margin: 1.5rem 0 .7rem; }
.tsub:first-child { margin-top: .2rem; }
.play-live {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: .95rem 1.15rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
border-left: 4px solid var(--accent); border-radius: 14px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel) 72%);
box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.pl-txt { font-size: 1.02rem; }
.pl-txt strong { display: block; }
.tier-head { display: flex; align-items: baseline; gap: .55rem; font-weight: 800; font-size: 1.02rem; margin: 1.2rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .7rem; }
.gcard {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
padding: 1rem .7rem; border: 1px solid var(--border); border-radius: 16px;
background: linear-gradient(180deg, var(--panel), var(--panel-2));
color: var(--text); font: inherit; cursor: pointer; position: relative; overflow: hidden;
transition: transform .1s, border-color .15s, box-shadow .15s;
}
.gcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), #ff7a3c); opacity: 0; transition: opacity .15s; }
.gcard:hover:not([disabled]) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: 0 12px 24px rgba(0, 0, 0, .3); }
.gcard:hover:not([disabled])::before { opacity: 1; }
.gcard-ico {
font-size: 1.85rem; line-height: 1; width: 58px; height: 58px; display: grid; place-items: center;
border-radius: 15px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 16%, var(--panel-2)), var(--panel-2));
box-shadow: inset 0 0 0 1px var(--border); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
.gcard-name { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.gcard-tag {
font-size: .66rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
background: var(--bg); border: 1px solid var(--border); padding: .12rem .5rem; border-radius: 999px;
}
.gcard.locked { opacity: .55; filter: grayscale(.6); cursor: not-allowed; }
.gcard.locked .gcard-tag { color: #e0872e; border-color: color-mix(in srgb, #e0872e 45%, var(--border)); }
/* Jogo em recarga (1x/dia): visível mas não-clicável, com o tempo restante. */
.gcard.cooling { opacity: .72; cursor: not-allowed; }
.gcard.cooling .gcard-ico { filter: grayscale(.5); }
.gcard-tag.cooldown { color: #2f79d8; border-color: color-mix(in srgb, #2f79d8 45%, var(--border)); background: color-mix(in srgb, #2f79d8 10%, transparent); font-weight: 800; }
.gcard.live { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel-2)); }
.gcard.live .gcard-ico { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 28%, var(--panel-2)), var(--panel-2)); }
.tool-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-chip {
display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 99px;
border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit;
font-weight: 600; font-size: .85rem; cursor: pointer; transition: border-color .15s, background .15s, transform .06s;
}
.tool-chip:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.tool-ico { font-size: 1rem; }
#community-polls:not(:empty), #avisos-polls:not(:empty) { margin-bottom: 1.2rem; }
.week-training:not(:empty) { margin: 1.1rem 0; }
.section-head.compact { margin-bottom: .6rem; }
/* Perf: itens de lista fora da tela não são renderizados (mantêm o espaço). */
.activity-card, .ann-card, .review-card { content-visibility: auto; contain-intrinsic-size: auto 180px; }
.archive-item { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
/* Card de treino compacto (menos altura na grade da semana). */
.ex-grid .exercise-card { flex-direction: row; align-items: center; gap: .7rem; padding: .7rem .8rem; }
.ex-grid .exercise-card .ex-icon { font-size: 1.4rem; flex: 0 0 auto; }
.ex-grid .exercise-card .ex-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.ex-grid .exercise-card h3 { font-size: .98rem; }
.ex-grid .exercise-card .ex-body > p { display: none; } /* descrição some no card compacto */
.ex-grid .exercise-card .ex-foot { margin: 0; padding: 0; flex: 0 0 auto; }
.ex-grid .exercise-card .ex-foot .btn { width: auto; padding: .45rem .8rem; font-size: .82rem; }
.ex-grid .exercise-card .ex-foot .btn-sm { display: none; } /* "▶ Ao vivo" fica só na versão cheia */
@media (max-width: 520px) { .ex-grid { grid-template-columns: 1fr; } }
.lq { max-width:820px; margin:0 auto; }
.lq-center { display:flex; justify-content:center; padding:3rem 0; }
.lq-code { display:flex; flex-direction:column; align-items:center; line-height:1; }
.lq-code strong { font-size:1.6rem; letter-spacing:.3em; color:var(--accent); }
.lq-lobby { display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; padding:1rem 0; }
.lq-players { width:100%; }
.lq-chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.6rem; }
.lq-chip { padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--bg); font-weight:600; font-size:.85rem; }
.lq-chip.win { background:#1c7c3a33; border-color:#2ecc71; color:#7CFC9B; }
.lq-big { font-size:1.05rem; padding:.7rem 1.6rem; }
.lq-wait { color:var(--muted); text-align:center; margin-top:.8rem; }
.lq-timer { height:8px; background:var(--bg); border-radius:999px; overflow:hidden; border:1px solid var(--border); margin-bottom:1rem; }
.lq-timer-fill { height:100%; width:100%; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .1s linear; }
.lq-qhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.lq-answered { font-weight:700; color:var(--accent); }
.lq-prompt { font-size:1.25rem; margin-bottom:1.2rem; }
.lq-options { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.lq-opt { display:flex; align-items:center; gap:.7rem; padding:1rem; border:2px solid var(--border); border-radius:14px; background:var(--surface,var(--bg)); color:var(--text,#fff); font-size:1rem; text-align:left; cursor:pointer; transition:transform .08s; }
.lq-opt:not([disabled]):hover { transform:translateY(-2px); }
.lq-opt[disabled] { cursor:default; opacity:.85; }
.lq-opt.chosen { outline:3px solid var(--accent); }
.lq-opt-key { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-weight:800; color:#fff; flex:0 0 auto; }
.opt-0 .lq-opt-key { background:#e74c3c; } .opt-1 .lq-opt-key { background:#3498db; }
.opt-2 .lq-opt-key { background:#f1c40f; color:#222; } .opt-3 .lq-opt-key { background:#2ecc71; }
.opt-4 .lq-opt-key { background:#9b59b6; }
.lq-qfoot { margin-top:1rem; text-align:center; }
.lq-reveal { display:flex; flex-direction:column; gap:.8rem; align-items:center; text-align:center; }
.lq-you { display:flex; flex-direction:column; gap:.2rem; padding:.8rem 1.4rem; border-radius:12px; border:1px solid var(--border); }
.lq-you.ok { background:#1c7c3a33; border-color:#2ecc71; } .lq-you.no { background:#7c2b1c33; border-color:#e74c3c; }
.lq-teams { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.lq-board { width:100%; max-width:460px; display:flex; flex-direction:column; gap:.35rem; }
.lq-rank { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:.6rem; padding:.5rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.lq-rank.top { border-color:var(--accent); background:#7c6a1c22; }
.lq-pos { font-weight:800; color:var(--muted); } .lq-score { font-weight:800; color:var(--accent); }
.lq-ended { display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; padding-top:.5rem; }
.lq-trophy { margin:0; }
.lq-podium { display:flex; gap:.8rem; align-items:flex-end; justify-content:center; margin:.4rem 0; }
.lq-pod { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:1rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--surface,var(--bg)); min-width:96px; }
.lq-pod.p1 { transform:scale(1.12); border-color:var(--accent); background:#7c6a1c22; }
.lq-medal { font-size:1.8rem; } .lq-pod .lq-name { font-weight:700; } .lq-pod .lq-score { font-size:1.1rem; }
@media (max-width:560px){ .lq-options{ grid-template-columns:1fr; } }
/* ── Cores de time (quiz em equipes) ───────────────────────── */
.lq-chip.team-a { background:#1c4a7c33; border-color:#3498db; color:#9ccdf0; }
.lq-chip.team-b { background:#7c1c2b33; border-color:#e74c3c; color:#f0a99c; }
.lq-chip.lead, .lq-chip.win { outline:2px solid var(--accent); }
/* ── Forca ao vivo ─────────────────────────────────────────── */
.forca-body { display:flex; flex-direction:column; gap:1rem; align-items:center; }
.forca-hint { color:var(--muted); text-align:center; margin:0; }
.forca-word { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.forca-ch { display:flex; align-items:center; justify-content:center; width:34px; height:44px; font-size:1.5rem; font-weight:800; border-bottom:3px solid var(--border); }
.forca-ch.filled { border-bottom-color:var(--accent); color:var(--text,#fff); }
.forca-ch.blank { color:transparent; }
.forca-word.revealed .forca-ch, .forca-word.host .forca-ch { border-bottom-color:var(--brand); }
.forca-lives { font-size:1.1rem; letter-spacing:2px; }
.forca-wrong { color:#e88; font-size:.9rem; margin:0; }
.forca-keys { display:grid; grid-template-columns:repeat(9, 1fr); gap:.4rem; max-width:520px; }
.forca-key { padding:.6rem 0; border:1px solid var(--border); border-radius:8px; background:var(--surface,var(--bg)); color:var(--text,#fff); font-weight:800; cursor:pointer; }
.forca-key:not([disabled]):hover { border-color:var(--brand); color:var(--brand-2); }
.forca-key[disabled] { opacity:.3; cursor:default; }
.forca-roster { display:flex; flex-direction:column; gap:.35rem; width:100%; max-width:460px; }
.forca-prow { display:grid; grid-template-columns:1fr auto auto auto; gap:.6rem; align-items:center; padding:.4rem .7rem; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.forca-prow.solved { border-color:#2ecc71; } .forca-prow.dead { border-color:#e74c3c; opacity:.7; }
/* Faixa de "vez" do coop (um jogador de cada vez) */
.forca-turn { text-align:center; font-weight:800; padding:.5rem .8rem; border-radius:999px; font-size:.9rem; }
.forca-turn.you { color:#0d3b23; background:linear-gradient(90deg,#7ff0b0,#39d98a); box-shadow:0 2px 10px rgba(57,217,138,.35); animation:forcaTurnPulse 1.6s ease-in-out infinite; }
.forca-turn.wait { color:var(--muted); background:var(--bg); border:1px dashed var(--border); }
@keyframes forcaTurnPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
@media (max-width:560px){ .forca-keys { grid-template-columns:repeat(7,1fr); } }
/* ── Memória ao vivo (multiplayer) ─────────────────────────── */
.mem-live { display:flex; flex-direction:column; gap:.8rem; align-items:center; }
.mem-turn { display:flex; gap:.8rem; align-items:center; }
.mem-yourturn { font-weight:800; color:var(--accent); }
.mem-scores { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.mem-grid-live { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:.6rem; width:100%; max-width:720px; }
.mem-card-live { min-height:92px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); color:var(--text,#fff); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:.5rem; text-align:center; transition:transform .1s, border-color .2s; }
.mem-card-live:not([disabled]):hover { transform:translateY(-2px); border-color:var(--brand); }
.mem-card-live[disabled] { cursor:default; }
.mem-card-live .mem-back { font-size:1.8rem; }
.mem-card-live.up { background:var(--bg); border-color:var(--accent); }
.mem-card-live.up.pun { border-color:var(--brand); }
.mem-card-live.matched { opacity:.55; border-color:var(--call); }
.mem-card-live .mem-kind { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.mem-card-live .mem-text { font-size:.8rem; line-height:1.25; }
/* ── Sala de Suporte (co-op) ───────────────────────────────── */
.sup-body { display:flex; flex-direction:column; gap:.8rem; }
.sup-lives { font-size:1rem; letter-spacing:1px; }
.sup-timer { font-variant-numeric:tabular-nums; }
.sup-timer.urgent { background:#7c2b1c33; border-color:#e74c3c; color:#ff9a86; animation:led-blink 1s infinite; }
.sup-ticket { border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:12px; background:var(--panel-2); padding:.9rem 1.1rem; }
.sup-prompt { font-size:1.05rem; line-height:1.4; margin:.35rem 0 0; }
.sup-options { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.6rem; }
.sup-opt { padding:.8rem 1rem; border:1px solid var(--border); border-radius:10px; background:var(--surface,var(--bg)); color:var(--text,#fff); font-weight:700; cursor:pointer; text-align:left; transition:transform .1s, border-color .2s; }
.sup-opt:not([disabled]):hover { transform:translateY(-2px); border-color:var(--brand); color:var(--brand-2); }
.sup-opt[disabled] { opacity:.45; cursor:default; }
.sup-reveal { display:flex; flex-direction:column; gap:.7rem; align-items:center; text-align:center; }
.sup-answer { padding:.7rem 1.2rem; border-radius:10px; border:1px solid #2ecc71; background:#1c7c3a33; font-weight:800; }
/* ══════════════════════════════════════════════════════════════
██ TEMA "POKÉDEX OS" — camada de acabamento visual ██
Aplicada por último para vencer no cascata sem tocar na estrutura
que o app.js gera. Motivos: pokébola, lente do Pokédex, LEDs,
telas com scanline e a paleta dos 18 tipos.
══════════════════════════════════════════════════════════════ */
/* ── Cromo global: seleção, foco e barra de rolagem ──────────── */
::selection { background: rgba(255, 203, 5, .3); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
background: linear-gradient(var(--brand-2), var(--brand));
border: 2px solid transparent; background-clip: padding-box; border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--brand), var(--brand-ink)); background-clip: padding-box; }
/* ── Animações extras do tema ────────────────────────────────── */
@keyframes led-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes scanline { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Etiqueta "Pokédex": ponto-pokébola antes de cada eyebrow. */
.eyebrow {
display: inline-flex; align-items: center; gap: .4rem;
font-family: var(--font-display); color: var(--accent);
}
.eyebrow::before {
content: ""; width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
border: 1.5px solid #0c0f18;
background:
radial-gradient(circle at 50% 50%, #fff 0 20%, #0c0f18 20% 34%, transparent 34%),
linear-gradient(#ff5a48 0 46%, #0c0f18 46% 54%, #f4f6fb 54% 100%);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* ═════════ BOTÕES — cápsulas com brilho de pokébola ═════════ */
.btn {
font-family: var(--font-display); font-weight: 700; letter-spacing: .015em;
border-radius: 999px; padding: .62rem 1.25rem; position: relative; overflow: hidden;
}
.btn-primary {
background: linear-gradient(180deg, #e0473d, #c62822);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0, 0, 0, .26); }
/* Reflexo removido (deixava o botão brilhante/"cara de IA"). */
.btn-primary::after { content: none; }
.btn-ghost {
background: rgba(255,255,255,.02); border-color: var(--border);
backdrop-filter: none;
}
.btn-ghost:hover { border-color: var(--brand); color: #fff; background: rgba(238,21,21,.1); }
.btn-approve, .btn-revise { font-family: var(--font-display); box-shadow: var(--shadow-sm); }
/* ═════════ LENTE + LEDs do Pokédex (reutilizável) ═════════ */
.dex-lens {
width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
background:
radial-gradient(circle at 34% 30%, #eafaff 0 12%, var(--lens) 30%, #1f7fb8 78%, #0d4e78 100%);
border: 3px solid #eef4fb;
box-shadow: 0 0 0 2px #0c0f18, 0 0 14px rgba(127, 215, 255, .5), inset 0 -3px 6px rgba(0,0,0,.35);
position: relative;
}
.dex-lens::after {
content: ""; position: absolute; top: 16%; left: 20%;
width: 34%; height: 26%; border-radius: 50%;
background: rgba(255,255,255,.85); filter: blur(.5px);
}
.dex-lens.sm { width: 18px; height: 18px; border-width: 2px; box-shadow: 0 0 0 1.5px #0c0f18, 0 0 8px rgba(127,215,255,.5); }
.dex-leds { display: inline-flex; gap: .34rem; align-items: center; }
.dex-leds.sm { gap: .28rem; }
.led {
width: 9px; height: 9px; border-radius: 50%; display: inline-block;
border: 1.5px solid rgba(0,0,0,.55); box-shadow: inset 0 1px 1px rgba(255,255,255,.55);
}
.dex-leds.sm .led { width: 7px; height: 7px; }
.led.red { background: #ff4d4d; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 6px rgba(255,77,77,.7); animation: led-blink 2.4s ease-in-out infinite; }
.led.yellow { background: #ffd23c; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 5px rgba(255,210,60,.6); }
.led.green { background: #4ade80; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 5px rgba(74,222,128,.6); }
/* ═════════ TOPBAR — carcaça de Pokédex ═════════ */
.topbar {
background:
linear-gradient(180deg, rgba(238,21,21,.14), rgba(10,15,30,0) 60%),
#0e1626;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, var(--brand), var(--accent), var(--royal)) 1;
box-shadow: 0 6px 22px rgba(3,7,18,.5);
}
.topbar-left { gap: .55rem; }
.topbar-title { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; }
@media (max-width: 620px) { .dex-lens.sm, .dex-leds.sm { display: none; } }
/* Abas do topo: pílulas robustas com pokébola no ativo. */
.nav-btn {
font-family: var(--font-display); font-weight: 700; border-radius: 999px;
border: 1px solid transparent; padding: .28rem .8rem;
}
.nav-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.nav-btn.active {
color: #fff; border-color: rgba(255,255,255,.25);
background: linear-gradient(180deg, #ff5a48, var(--brand));
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(238,21,21,.4);
}
/* Ponto de "novidade não vista" nas abas (ex.: Avisos com aviso/enquete novo). */
.nav-dot {
width: 9px; height: 9px; border-radius: 50%;
background: #ff4757; box-shadow: 0 0 0 2px #0e1626, 0 0 8px rgba(255,71,87,.8);
margin-left: .1rem; align-self: flex-start; flex: 0 0 auto;
animation: navDotPulse 1.6s ease-in-out infinite;
}
@keyframes navDotPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
/* ── Menu hambúrguer (topbar responsiva no celular) ── */
.nav-toggle {
display: none; background: transparent; border: 1px solid var(--border);
color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer;
padding: .35rem .6rem; border-radius: 10px; position: relative;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
/* Ponto de novidade também no botão do hambúrguer (quando a nav está fechada). */
.nav-toggle .nav-dot { position: absolute; top: 4px; right: 4px; margin: 0; }
@media (max-width: 760px) {
/* Cabeçalho em 2 linhas: [titulo ........ hamburguer] / [acoes da direita].
A nav vira um menu suspenso (drawer) acionado pelo hamburguer. */
/* Rola junto com a página: ao descer, a topbar some (não fica fixa). */
.topbar { flex-wrap: wrap; gap: .5rem .6rem; row-gap: .5rem; position: relative; top: auto; }
.topbar-left { order: 1; flex: 1 1 auto; min-width: 0; }
.nav-toggle { display: inline-flex; align-items: center; order: 2; }
.topbar-right { order: 3; flex: 1 1 100%; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.topbar-nav {
order: 4;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; flex-wrap: nowrap;
background: #141a29; border-bottom: 1px solid var(--border);
padding: .5rem; gap: .25rem; display: none; row-gap: .25rem;
box-shadow: 0 14px 26px rgba(3,7,18,.55); z-index: 25;
}
.topbar.nav-open .topbar-nav { display: flex; }
.topbar-nav .nav-btn { width: 100%; justify-content: flex-start; border-radius: 10px; padding: .7rem .9rem; }
.topbar-nav .nav-label { display: inline !important; } /* rótulos visíveis no drawer */
.topbar-nav .nav-sprite { width: 22px; height: 22px; }
}
/* Botões redondos (música/discord) com aro de pokébola. */
.music-btn { border-radius: 50%; }
.music-btn:hover { border-color: var(--brand); color: #fff; }
.topbar-action-btn { position: relative; }
#topbar-chat-badge { position: absolute; top: -4px; right: -4px; }
.user-chip {
border-radius: 999px; font-weight: 700;
background: rgba(255,255,255,.04); border-color: var(--border);
}
/* ═════════ LOGIN — dispositivo Pokédex ═════════ */
.login-card.dex-shell {
padding: 0; overflow: hidden;
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--panel), var(--bg-2));
box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.login-card.dex-shell > .brand,
.login-card.dex-shell > .login-form,
.login-card.dex-shell > .login-foot { margin-left: 2rem; margin-right: 2rem; }
.login-card.dex-shell > .login-foot { margin-bottom: 1.7rem; }
.login-card.dex-shell::after { display: none; }
/* Faixa vermelha superior com lente e LEDs. */
.dex-top {
display: flex; align-items: center; gap: .9rem;
padding: .95rem 1.4rem;
background: linear-gradient(180deg, #ff5a48, var(--brand) 70%, #c81109);
border-bottom: 4px solid #0c0f18;
box-shadow: inset 0 -6px 14px rgba(122,18,4,.45);
}
.dex-top .dex-lens { width: 44px; height: 44px; border-width: 4px; }
.dex-top .dex-leds { margin-left: auto; }
.dex-top .led { width: 12px; height: 12px; }
/* Tela CRT: fundo do sprite com scanlines e LED de "power". */
.login-hero.dex-screen {
position: relative; margin: 1.5rem 2rem .3rem; padding: 1rem;
border-radius: 14px; overflow: hidden;
background:
radial-gradient(120% 100% at 50% 0, rgba(127,215,255,.14), transparent 60%),
linear-gradient(180deg, #0c1526, #0a1120);
border: 1px solid var(--border);
box-shadow: inset 0 0 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(127,215,255,.06);
}
.dex-screen-led {
position: absolute; top: .6rem; left: .7rem; width: 9px; height: 9px; border-radius: 50%;
background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.9); animation: led-blink 1.8s ease-in-out infinite;
}
.dex-screen .login-sprite { position: relative; z-index: 1; }
.dex-scan {
position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}
.dex-scan::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent, rgba(127,215,255,.16), transparent);
height: 40%; animation: scanline 3.2s linear infinite;
}
.login-card .brand { margin-top: 1.1rem; }
/* Pokébola do login com leve balanço. */
.brand-badge.pokeball { box-shadow: inset 0 0 0 6px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.4); }
/* ═════════ CARTÕES — vidro de "tela de Pokédex" ═════════ */
.progress-card, .xp-card, .day-card.highlight, .poll-card, .exercise-card,
.activity-card, .review-card, .ann-card, .cal-day, .live-bar {
position: relative;
}
/* Marca d'água de pokébola no canto dos cartões-destaque. */
.progress-card::after, .xp-card::after, .day-card.highlight::after {
content: ""; position: absolute; right: -26px; bottom: -26px; width: 118px; height: 118px;
border-radius: 50%; pointer-events: none; opacity: .5;
background:
radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255,255,255,.05) 20% 23%, transparent 23%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 46%, transparent 46% 54%, rgba(255,255,255,.05) 54% 100%);
-webkit-mask: radial-gradient(circle, #000 60%, transparent 72%);
mask: radial-gradient(circle, #000 60%, transparent 72%);
}
.progress-card, .xp-card {
background:
linear-gradient(120deg, rgba(59,76,202,.10), transparent 55%),
linear-gradient(135deg, var(--panel), var(--panel-2));
box-shadow: var(--shadow-sm);
}
.day-card { transition: border-color .2s, transform .1s, box-shadow .2s; }
.day-card:hover { border-color: var(--brand-2); box-shadow: var(--shadow-sm); }
/* Anel de progresso com miolo escuro e brilho âmbar. */
.progress-ring { box-shadow: 0 0 0 1px var(--border), 0 0 18px rgba(255,203,5,.18); }
.progress-ring span { font-family: var(--font-display); }
/* Barras de progresso com listras animadas sutis. */
.progress-fill, .xp-fill {
background-image:
linear-gradient(90deg, var(--brand), var(--accent)),
repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 8px, transparent 8px 16px);
background-blend-mode: overlay;
}
.xp-fill { background-image: linear-gradient(90deg, var(--accent), var(--accent-2)), repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); }
.xp-stars { font-family: var(--font-display); color: #1a1206; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: #a67f00; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(255,203,5,.25); }
.xp-level, .scenario-points, .quiz-count, .rb-xp { font-family: var(--font-display); }
/* ═════════ PÍLULAS & BADGES no estilo "tipo Pokémon" ═════════ */
.pill, .role-badge, .sub-status, .poll-status, .rank-badge, .meta-chip, .memory-info, .mem-kind {
font-family: var(--font-display); font-weight: 700;
}
.pill {
border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pill.diff-easy, .pill.diff-medium, .pill.diff-hard {
color: #10151f; text-transform: uppercase; letter-spacing: .03em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.3);
}
.pill.diff-easy { background: var(--t-grass); }
.pill.diff-medium { background: var(--t-water); }
.pill.diff-hard { background: var(--t-fire); }
/* Utilitário de badge de tipo (disponível para uso futuro). */
.type-badge {
display: inline-block; font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; font-size: .66rem;
padding: .22rem .62rem; border-radius: 999px; color: #10151f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.3);
}
.type-normal{background:var(--t-normal)} .type-fire{background:var(--t-fire)}
.type-water{background:var(--t-water)} .type-grass{background:var(--t-grass)}
.type-electric{background:var(--t-electric)} .type-ice{background:var(--t-ice)}
.type-fighting{background:var(--t-fighting);color:#fff} .type-poison{background:var(--t-poison);color:#fff}
.type-ground{background:var(--t-ground)} .type-flying{background:var(--t-flying)}
.type-psychic{background:var(--t-psychic)} .type-bug{background:var(--t-bug)}
.type-rock{background:var(--t-rock)} .type-ghost{background:var(--t-ghost);color:#fff}
.type-dragon{background:var(--t-dragon);color:#fff} .type-dark{background:var(--t-dark);color:#fff}
.type-steel{background:var(--t-steel)} .type-fairy{background:var(--t-fairy)}
/* Estilo do console de admin fica na seção "Console de Admin" (sidebar). */
/* Seção-cabeçalho com filete tipográfico. */
.section-head h2 { position: relative; }
/* Contador de pendências (badge) como "nível" 8-bit. */
.nav-badge { font-family: var(--font-pixel); font-size: .58rem; padding: 0 6px; }
/* Códigos e contadores retrô 8-bit. */
.lq-code strong, .cred-box { font-family: var(--font-pixel); }
.cred-box { font-size: .95rem; }
/* Toast como "mensagem de sistema" do Pokédex. */
.toast { border-radius: 999px; font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow); }
/* Modal com faixa superior de pokébola. */
.modal { border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--brand), var(--accent)) 1; }
.modal h3 { font-family: var(--font-display); }
/* Cartões de exercício: faixa de tipo mais viva + elevação no hover. */
.exercise-card { transition: transform .12s ease, border-color .2s, box-shadow .2s; }
.exercise-card:not(.locked):hover { transform: translateY(-4px); border-color: var(--brand-2); box-shadow: var(--shadow); }
.exercise-card::before { width: 5px; }
.ex-icon { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
/* Opções de quiz/cenário com realce de captura. */
.quiz-opt:hover, .scenario-choice:hover { box-shadow: inset 3px 0 0 var(--brand); }
/* Entrada em cascata dos cartões ao abrir uma aba. */
.tab-panel .exercise-card, .tab-panel .ann-card, .tab-panel .poll-card { animation: rise .4s ease both; }
.tab-panel .exercise-card:nth-child(2){animation-delay:.05s}
.tab-panel .exercise-card:nth-child(3){animation-delay:.1s}
.tab-panel .exercise-card:nth-child(4){animation-delay:.15s}
.tab-panel .exercise-card:nth-child(5){animation-delay:.2s}
/* ═════════ ÍCONES DE SPRITE NAS ABAS ═════════ */
.nav-btn { display: inline-flex; align-items: center; gap: .4rem; }
.nav-sprite {
width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain;
image-rendering: pixelated; image-rendering: crisp-edges;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
transition: transform .16s ease;
}
.nav-btn:hover .nav-sprite { transform: scale(1.2) translateY(-1px); }
.nav-btn.active .nav-sprite { animation: wiggle .5s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.nav-label { line-height: 1; }
@media (max-width: 960px) { .nav-label { display: none; } .nav-btn { padding: .5rem .55rem; } }
/* Badge de tipo dentro dos cartões de treino: leve brilho no hover do card. */
.exercise-card:hover .type-badge { filter: brightness(1.06) saturate(1.05); }
/* ═════════ CURSOR DE POKÉBOLA ═════════ */
body {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Ccircle%20cx='14'%20cy='14'%20r='12'%20fill='%23f6f7fb'%20stroke='%23111'%20stroke-width='2'/%3E%3Cpath%20d='M2%2014%20A12%2012%200%200%201%2026%2014%20Z'%20fill='%23ee1515'/%3E%3Cline%20x1='2'%20y1='14'%20x2='26'%20y2='14'%20stroke='%23111'%20stroke-width='2'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='4.5'%20fill='%23fff'%20stroke='%23111'%20stroke-width='2'/%3E%3C/svg%3E") 14 14, auto;
}
/* Campos de texto mantêm o cursor de escrita (não atrapalhar a digitação). */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
textarea, [contenteditable="true"] { cursor: text; }
button, a, select, label, summary, [role="button"],
.nav-btn, .archive-item, .cal-day.clickable, .quiz-opt, .scenario-choice, .poll-opt, .mem-card {
cursor: pointer;
}
button:disabled, .btn[disabled] { cursor: not-allowed; }
/* ═════════ MASCOTE DO DIA — pula sobre a plataforma ═════════ */
.day-mon {
float: right; position: relative; z-index: 1;
width: 78px; height: 88px; margin: -.2rem -.2rem .5rem .9rem;
}
.day-mon .day-sprite {
float: none; margin: 0; position: relative; z-index: 1;
width: 78px; height: 78px;
animation: day-bob 3.2s ease-in-out infinite;
}
.day-mon-shadow {
position: absolute; left: 50%; bottom: 3px; width: 54px; height: 12px;
transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
animation: day-shadow 3.2s ease-in-out infinite;
}
@keyframes day-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes day-shadow { 0%,100% { transform: translateX(-50%) scale(1); opacity: .5; } 50% { transform: translateX(-50%) scale(.78); opacity: .3; } }
/* ═════════ RUBRICA COM "TIPOS" DO TREINADOR ═════════ */
.cat-row.typed { grid-template-columns: 150px 1fr auto; }
.cat-row.typed .cat-name { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.cat-name-txt { font-size: .78rem; color: var(--muted); }
.cat-row.typed .type-badge { font-size: .62rem; }
.cat-bar.type-steel .cat-fill { background: linear-gradient(90deg, var(--t-steel), #bcd3dd); }
.cat-bar.type-electric .cat-fill { background: linear-gradient(90deg, #caa400, var(--t-electric)); }
.cat-bar.type-fighting .cat-fill { background: linear-gradient(90deg, var(--t-fighting), #ff8fa8); }
.cat-bar.type-fairy .cat-fill { background: linear-gradient(90deg, var(--t-fairy), #ffd0fb); }
/* ═════════ CENA DE CAPTURA (gabaritou = 3 estrelas) ═════════ */
.capture-overlay {
position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
background: radial-gradient(circle at 50% 42%, rgba(20, 30, 55, .72), rgba(4, 7, 14, .9));
animation: cap-fade .25s ease both; cursor: pointer;
}
.capture-stage {
display: grid; grid-template-rows: 300px auto; justify-items: center; align-items: center;
width: min(82vw, 340px);
}
.capture-rays, .capture-mon, .capture-ball, .capture-flash { grid-row: 1; grid-column: 1; }
.capture-caption { grid-row: 2; grid-column: 1; }
.capture-mon {
width: 168px; height: 168px; object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
animation: cap-mon .82s ease both;
}
/* Pokébola montada em CSS. */
.capture-ball {
width: 68px; height: 68px; border-radius: 50%; position: relative; overflow: hidden;
background: #f6f7fb; border: 4px solid #111;
box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
animation: cap-drop .5s cubic-bezier(.3, .7, .4, 1.3) both, cap-wobble 1.25s ease-in-out .9s both;
}
.capture-ball .cb-top { position: absolute; inset: 0 0 50% 0; background: linear-gradient(#ff5a48, #ee1515); }
.capture-ball .cb-belt { position: absolute; top: calc(50% - 4px); left: -4px; right: -4px; height: 8px; background: #111; }
.capture-ball .cb-btn {
position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
transform: translate(-50%, -50%); border-radius: 50%;
background: #fff; border: 4px solid #111; box-shadow: 0 0 0 3px #f6f7fb;
}
.capture-flash {
width: 150px; height: 150px; border-radius: 50%;
background: radial-gradient(circle, #fff 0 40%, rgba(255, 255, 255, .5) 55%, transparent 70%);
opacity: 0; animation: cap-flash 2.4s ease both;
}
.capture-rays {
width: 320px; height: 320px; border-radius: 50%; opacity: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 203, 5, .55) 0 6deg, transparent 6deg 18deg);
-webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 66%);
mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 66%);
animation: cap-rays .8s ease 1.98s both;
}
.capture-caption {
display: flex; flex-direction: column; align-items: center; gap: .4rem;
animation: cap-pop .5s cubic-bezier(.2, .9, .3, 1.6) 2.12s both;
}
.cap-word {
font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--accent);
text-shadow: 0 2px 0 #a67f00, 0 0 18px rgba(255, 203, 5, .5); letter-spacing: .01em;
}
.capture-caption .stars.big { font-size: 2rem; }
@keyframes cap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cap-drop {
0% { transform: translateY(-62vh) rotate(0); opacity: 0; }
12% { opacity: 1; }
100% { transform: translateY(0) rotate(720deg); opacity: 1; }
}
@keyframes cap-wobble {
0%,100% { transform: rotate(0); }
15% { transform: rotate(-16deg); } 30% { transform: rotate(13deg); }
45% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); }
}
@keyframes cap-mon {
0%,52% { transform: scale(1) translateY(0); opacity: 1; }
60% { transform: scale(1.14) translateY(-4px); filter: brightness(2.4) drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
76%,100% { transform: scale(0); opacity: 0; }
}
@keyframes cap-flash {
0%,17%,27%,79%,100% { opacity: 0; transform: scale(.2); }
22% { opacity: .95; transform: scale(1.05); }
84% { opacity: 1; transform: scale(1.6); }
}
@keyframes cap-rays { 0% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: .85; } 100% { opacity: 0; transform: scale(1.5) rotate(38deg); } }
@keyframes cap-pop { 0% { opacity: 0; transform: translateY(12px) scale(.6); } 100% { opacity: 1; transform: none; } }
/* Versão sem animação (prefers-reduced-motion): mostra só o resultado. */
.capture-overlay.instant .capture-mon,
.capture-overlay.instant .capture-rays,
.capture-overlay.instant .capture-flash { display: none; }
.capture-overlay.instant .capture-ball { animation: none; }
.capture-overlay.instant .capture-caption { animation: none; opacity: 1; transform: none; }
/* ═════════ TOAST ESTILO "POKÉDEX" ═════════ */
.toast {
display: flex; align-items: center; gap: .6rem;
border-radius: 13px; border: 1px solid var(--border); border-left: 4px solid var(--accent);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
padding: .6rem .95rem .6rem .8rem; animation: rise .3s ease both;
}
.toast-ico { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.toast-msg { font-family: var(--font-display); font-weight: 700; }
.toast.error { border-left-color: #ff5a5a; }
.toast.success { border-left-color: var(--call); }
/* ═════════ PARCEIRO QUE EVOLUI (card de XP) ═════════ */
.xp-mascot { display: flex; flex-direction: column; align-items: center; gap: .32rem; flex: 0 0 auto; width: 98px; }
/* Treinador (personagem) ao lado do parceiro Pokémon no dashboard de Treinos. */
.xp-mascot.has-trainer { width: 150px; }
.xp-duo { display: flex; align-items: flex-end; justify-content: center; gap: .35rem; }
.xp-trainer {
width: 50px; height: 72px; object-fit: contain; object-position: bottom; image-rendering: pixelated;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); align-self: flex-end;
}
.evo-ring {
width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; position: relative;
background: conic-gradient(var(--accent) var(--evo, 0%), var(--border) 0);
box-shadow: 0 0 0 1px var(--border), 0 0 16px rgba(255, 203, 5, .18);
}
.evo-core {
width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
background: radial-gradient(circle at 50% 28%, var(--panel-2), var(--bg));
}
.evo-mon {
width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); animation: floaty 4s ease-in-out infinite;
}
.evo-name { font-family: var(--font-display); font-weight: 700; font-size: .78rem; }
.evo-dots { display: flex; gap: .26rem; }
.evo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.evo-dot.on { background: var(--accent); box-shadow: 0 0 6px rgba(255, 203, 5, .6); }
.evo-ring.evolved { animation: evo-burst .9s ease; }
@keyframes evo-burst {
0% { box-shadow: 0 0 0 0 rgba(255, 203, 5, .6), 0 0 0 1px var(--border); }
50% { transform: scale(1.14); box-shadow: 0 0 0 16px rgba(255, 203, 5, 0), 0 0 0 1px var(--border); }
100% { transform: scale(1); }
}
@media (max-width: 560px) { .xp-mascot { display: none; } }
/* ═════════ TRANSIÇÃO DE BATALHA (encontro selvagem) ═════════ */
.battle-wipe { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.bw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: bw-flash .5s ease both; }
.bw-bars {
position: absolute; inset: -20% -20%;
background: repeating-linear-gradient(48deg, #0a0f1e 0 46px, var(--brand) 46px 52px, #16203a 52px 96px);
transform: translateX(-130%); animation: bw-bars .95s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes bw-flash { 0% { opacity: 0; } 8% { opacity: .95; } 18% { opacity: 0; } 32% { opacity: .7; } 44% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bw-bars { 0% { transform: translateX(-130%); } 46% { transform: translateX(0); } 56% { transform: translateX(0); } 100% { transform: translateX(130%); } }
/* ═════════ INSÍGNIAS DE GINÁSIO (aba Treinos) ═════════ */
.live-bar, .gym-wrap { grid-column: 1 / -1; }
.gym-wrap {
background: linear-gradient(135deg, var(--panel), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm);
}
.gym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.gym-count { font-family: var(--font-pixel); font-size: .62rem; color: var(--accent); }
.gym-badges { display: grid; grid-template-columns: repeat(8, 1fr); gap: .55rem; }
@media (max-width: 720px) { .gym-badges { grid-template-columns: repeat(4, 1fr); } }
.gym-badge {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
padding: .5rem .2rem; border-radius: 12px; border: 1px solid var(--border);
background: var(--bg); text-align: center; transition: transform .12s ease, box-shadow .2s;
}
.gym-badge.earned { border-color: var(--gcolor); box-shadow: inset 0 0 0 1px var(--gcolor); }
.gym-badge.earned:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gcolor), 0 6px 14px rgba(0, 0, 0, .3); }
.gb-ico {
width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.15rem;
clip-path: polygon(30% 2%, 70% 2%, 98% 30%, 98% 70%, 70% 98%, 30% 98%, 2% 70%, 2% 30%);
background: var(--panel-2);
}
.gym-badge.earned .gb-ico {
background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .55), transparent 60%), var(--gcolor);
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gcolor) 70%, transparent));
}
.gym-badge.locked { opacity: .55; filter: grayscale(.9); }
.gb-name { font-family: var(--font-display); font-weight: 700; font-size: .68rem; line-height: 1.1; }
/* ═════════ AVATAR DO TREINADOR (topbar) ═════════ */
.user-avatar {
width: 34px; height: 34px; border-radius: 50%; object-fit: contain; image-rendering: pixelated;
padding: 2px; background: radial-gradient(circle at 50% 28%, var(--panel-2), var(--bg));
border: 2px solid var(--accent); box-shadow: 0 0 8px rgba(255, 203, 5, .25);
}
/* Avatar de TREINADOR: sprite de corpo inteiro — enquadra o topo (rosto) no
círculo em vez de encolher o boneco inteiro. */
#user-avatar.is-trainer { object-fit: cover; object-position: 50% 10%; padding: 0; }
/* ═════════ PORTÃO DE VÍNCULO DO DISCORD (obrigatório) ═════════ */
#discord-gate { z-index: 120; } /* acima de tudo, inclusive onboarding */
.discord-gate-box { max-width: 560px; }
.discord-gate-box .starter-h { margin: .2rem 0 .4rem; }
.dg-steps { text-align: left; margin: .8rem auto 1rem; max-width: 420px; display: flex; flex-direction: column; gap: .35rem; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }
.dg-steps li { line-height: 1.35; }
.dg-code { margin: .8rem 0; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.dg-actions { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem; }
.dg-status { min-height: 1.1em; margin-top: .5rem; }
/* Botões-âncora (abrir Discord etc.) precisam se comportar como botões:
um é inline por padrão e o padding do .btn "vaza" — no mobile isso
deixava as opções desalinhadas/quebradas. */
a.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; text-decoration: none; text-align: center; }
/* Links de vínculo (convite + abrir #vincular) e a linha de ações do código:
ocupam a largura e EMPILHAM no celular (alvos de toque grandes). */
.dg-links, .dg-code-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; margin: .2rem 0; }
.dg-links .btn, .dg-code-actions .btn { flex: 1 1 auto; min-height: 44px; }
.dg-code .cred-box { max-width: 100%; }
@media (max-width: 560px) {
.dg-links, .dg-code-actions { flex-direction: column; align-items: stretch; }
.dg-links .btn, .dg-code-actions .btn { width: 100%; }
.discord-gate-box { padding: 1.4rem 1rem 1.6rem; }
}
.dg-foot { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.dg-later { background: none; border: 1px dashed var(--border); border-radius: 999px; padding: .3rem .8rem; color: var(--text); cursor: pointer; font-size: .82rem; font-weight: 600; }
.dg-later:hover { border-color: var(--accent); }
.dg-logout { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .82rem; }
.dg-logout:hover { color: var(--text); }
/* ═════════ ESCOLHA SEU PARCEIRO (1º acesso) ═════════ */
.starter-overlay {
position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 1.2rem;
background: radial-gradient(circle at 50% 40%, rgba(20, 30, 55, .92), rgba(4, 7, 14, .96));
animation: cap-fade .3s ease both;
}
.starter-overlay.closing { animation: cap-fade .4s ease reverse both; }
.starter-box {
width: 100%; max-width: 660px; text-align: center; position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
border-radius: 20px; padding: 1.7rem 1.4rem 1.9rem; box-shadow: var(--shadow);
}
.starter-box::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: linear-gradient(90deg, var(--t-grass), var(--t-fire), var(--t-water), var(--t-electric), var(--t-normal));
}
.starter-h { margin: .15rem 0 .25rem; font-size: 1.75rem; }
.starter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-top: 1.2rem; }
@media (max-width: 560px) { .starter-grid { grid-template-columns: repeat(2, 1fr); } }
.starter-card {
display: flex; flex-direction: column; align-items: center; gap: .4rem; cursor: pointer; font: inherit;
color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
padding: .85rem .5rem; transition: transform .12s ease, border-color .2s, box-shadow .2s;
}
.starter-card:hover { transform: translateY(-6px); border-color: var(--scolor); box-shadow: 0 0 0 2px var(--scolor), 0 12px 24px rgba(0, 0, 0, .45); }
.starter-mon { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .5)); transition: transform .2s; }
.starter-card:hover .starter-mon { transform: scale(1.14); animation: wiggle .5s ease; }
.starter-name { font-family: var(--font-display); font-weight: 800; }
/* Seletor de parceiro de treino (modal) + estado ativo */
.partner-chooser h3 { margin: .3rem 0 .2rem; }
.partner-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-top: 1rem; }
.partner-grid .starter-mon { width: 66px; height: 66px; image-rendering: pixelated; }
.partner-grid .starter-name { font-size: .82rem; }
.starter-card.active { border-color: var(--scolor); box-shadow: 0 0 0 2px var(--scolor), inset 0 0 22px color-mix(in srgb, var(--scolor) 22%, transparent); }
.starter-card.active::after { content: '✓ parceiro'; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--scolor); }
/* "🔄 trocar" no mascote do hero de Treinos */
.evo-swap {
font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
padding: .06rem .4rem; border-radius: 999px; opacity: .85; transition: opacity .15s, background .15s;
}
.xp-mascot:hover .evo-swap { opacity: 1; background: rgba(255,255,255,.26); }
/* Shiny-dex (modal com as variantes brilhantes encontradas) */
.shinydex h3 { margin: .3rem 0 .2rem; }
.shinydex-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .55rem; margin: 1rem 0;
max-height: 56vh; overflow: auto;
}
.shinydex-cell {
position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .3rem;
border: 1px solid color-mix(in srgb, #ffd23f 35%, var(--border)); border-radius: 12px;
background: radial-gradient(circle at 50% 30%, color-mix(in srgb, #ffd23f 14%, var(--panel-2)), var(--panel));
}
.shinydex-spark { position: absolute; top: 3px; right: 5px; font-size: .8rem; filter: drop-shadow(0 0 4px rgba(255,210,63,.8)); }
.shinydex-mon { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.shinydex-name { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; }
.shinydex-rank { margin-top: .2rem; }
/* ═════════ TROCA DE DIA (Mentoria) — scan + slide ═════════ */
.day-reveal { animation: day-in .45s ease both; position: relative; }
.day-reveal.from-left { animation: day-in-left .4s ease both; }
.day-reveal.from-right { animation: day-in-right .4s ease both; }
@keyframes day-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes day-in-left { 0% { opacity: 0; transform: translateX(-46px); } 100% { opacity: 1; transform: none; } }
@keyframes day-in-right { 0% { opacity: 0; transform: translateX(46px); } 100% { opacity: 1; transform: none; } }
.day-reveal::before {
content: ''; position: absolute; left: 0; right: 0; top: -45%; height: 45%; z-index: 3; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(127, 215, 255, .28), transparent);
animation: day-scan .62s ease both;
}
@keyframes day-scan { 0% { top: -45%; opacity: 0; } 25% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.day-nav-pos { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: .85rem; }
.day-nav .btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
/* ═════════ PÓDIO PIXEL-ART (Progresso) ═════════ */
.podium-wrap {
background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1rem 1.2rem 1.3rem; margin-bottom: 1.4rem; box-shadow: var(--shadow-sm);
}
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .8rem; margin-top: .8rem; max-width: 520px; }
.pod-col { display: flex; flex-direction: column; align-items: center; gap: .4rem; animation: rise .5s ease both; }
.pod-mon {
width: 62px; height: 62px; object-fit: contain; image-rendering: pixelated;
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); animation: floaty 4s ease-in-out infinite;
}
.p1 .pod-mon { width: 74px; height: 74px; }
.pod-name {
font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-align: center;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pod-step {
width: 100%; display: flex; flex-direction: column; align-items: center; gap: .12rem;
padding-top: .5rem; border-radius: 6px 6px 0 0;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(255, 255, 255, .07);
}
.pod-medal { font-size: 1.5rem; line-height: 1; }
.pod-score { font-family: var(--font-pixel); font-size: .58rem; color: #10151f; }
.p1 .pod-step { height: 96px; background: linear-gradient(180deg, #ffe27a, var(--accent)); }
.p2 .pod-step { height: 70px; background: linear-gradient(180deg, #e8edf6, #aab6cc); }
.p3 .pod-step { height: 54px; background: linear-gradient(180deg, #ffb877, #cf8a4a); }
/* ═════════ SUBIU DE NÍVEL! (fanfarra) ═════════ */
.levelup-overlay {
position: fixed; inset: 0; z-index: 93; display: grid; place-items: center; cursor: pointer;
background: radial-gradient(circle at 50% 42%, rgba(59, 76, 202, .5), rgba(4, 7, 14, .9));
animation: cap-fade .25s ease both;
}
.lu-stage { display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; }
.lu-rays {
position: absolute; top: -34px; width: 320px; height: 320px; border-radius: 50%; z-index: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 203, 5, .5) 0 6deg, transparent 6deg 18deg);
-webkit-mask: radial-gradient(circle, transparent 22%, #000 24%, #000 60%, transparent 66%);
mask: radial-gradient(circle, transparent 22%, #000 24%, #000 60%, transparent 66%);
animation: lu-spin 9s linear infinite, cap-pop .5s ease both;
}
@keyframes lu-spin { to { transform: rotate(360deg); } }
.lu-badge {
width: 134px; height: 134px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
background: radial-gradient(circle at 50% 30%, var(--panel-2), var(--bg));
box-shadow: 0 0 0 4px var(--accent), 0 0 32px rgba(255, 203, 5, .5);
animation: lu-pop .6s cubic-bezier(.2, .9, .3, 1.5) both;
}
.lu-mon { width: 106px; height: 106px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); animation: lu-bounce 1s ease .3s infinite alternate; }
.lu-word {
font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--accent); z-index: 1;
text-shadow: 0 2px 0 #a67f00, 0 0 18px rgba(255, 203, 5, .5); animation: cap-pop .5s ease .3s both;
}
.lu-level { font-family: var(--font-pixel); font-size: 1rem; color: #fff; z-index: 1; animation: cap-pop .5s ease .45s both; }
@keyframes lu-pop { 0% { transform: scale(0) rotate(-18deg); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lu-bounce { to { transform: translateY(-10px); } }
.levelup-overlay.instant .lu-rays, .levelup-overlay.instant .lu-mon { animation: none; }
.levelup-overlay.instant .lu-badge, .levelup-overlay.instant .lu-word, .levelup-overlay.instant .lu-level { animation: none; opacity: 1; transform: none; }
/* ═════════ FUNDO DIA / NOITE (horário real) ═════════ */
body {
--glow-a: rgba(59, 76, 202, .28);
--glow-b: rgba(238, 21, 21, .13);
background:
radial-gradient(1100px 560px at 82% -12%, var(--glow-a) 0, transparent 60%),
radial-gradient(900px 520px at -10% 8%, var(--glow-b) 0, transparent 55%),
var(--bg);
background-attachment: fixed;
}
body[data-tod="dawn"] { --glow-a: rgba(255, 150, 90, .30); --glow-b: rgba(255, 120, 170, .18); }
body[data-tod="day"] { --glow-a: rgba(90, 150, 255, .28); --glow-b: rgba(255, 203, 5, .14); }
body[data-tod="dusk"] { --glow-a: rgba(255, 110, 60, .32); --glow-b: rgba(120, 60, 200, .22); }
body[data-tod="night"] { --glow-a: rgba(40, 60, 160, .34); --glow-b: rgba(15, 25, 70, .30); }
/* ═════════ CAIXA DE DIÁLOGO COM DIGITAÇÃO (cenários) ═════════ */
.scenario-text.dialogue {
position: relative; cursor: pointer; min-height: 3.4rem;
border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px;
background: linear-gradient(180deg, var(--panel), var(--bg-2)); padding: .95rem 1.1rem; box-shadow: var(--shadow-sm);
}
.scenario-text.dialogue::before { content: '▶'; position: absolute; right: .7rem; bottom: .45rem; color: var(--accent); font-size: .7rem; opacity: .55; }
.dialogue.typing::after { content: '▋'; margin-left: 1px; color: var(--accent); animation: tw-blink .7s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.scenario-choices.reveal-after { opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.scenario-choices.reveal-after.ready { opacity: 1; transform: none; pointer-events: auto; }
/* ═════════ BARRA DE HP / BATALHA (quiz) ═════════ */
.battle-hud {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm);
}
.bh-side { display: flex; align-items: center; gap: .7rem; }
.bh-side:last-child { justify-content: flex-end; }
.bh-info { display: flex; flex-direction: column; gap: .3rem; min-width: 112px; }
.bh-name { font-family: var(--font-display); font-weight: 700; font-size: .85rem; }
.bh-mon { width: 66px; height: 66px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.bh-mon.flip { transform: scaleX(-1); }
.bh-mon.hurt { animation: bh-hurt .22s ease; }
.bh-mon.flip.hurt { animation: bh-hurt-f .22s ease; }
@keyframes bh-hurt { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); filter: brightness(2.6) drop-shadow(0 4px 5px rgba(0,0,0,.5)); } 75% { transform: translateX(5px); } }
@keyframes bh-hurt-f { 0%,100% { transform: scaleX(-1); } 25% { transform: scaleX(-1) translateX(5px); filter: brightness(2.6) drop-shadow(0 4px 5px rgba(0,0,0,.5)); } 75% { transform: scaleX(-1) translateX(-5px); } }
.bh-vs { font-family: var(--font-pixel); font-size: .68rem; color: var(--brand-2); }
.hp-bar { height: 11px; border-radius: 999px; background: #0a0f1e; border: 1px solid var(--border); overflow: hidden; }
.hp-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.hp-fill.enemy { background: linear-gradient(90deg, #ff6a5a, var(--brand)); }
.hp-fill.hero { background: linear-gradient(90deg, #2ecc71, #7CFC9B); }
.hp-fill.hero.low { background: linear-gradient(90deg, #ff8a3d, var(--accent)); }
.bh-mon.fainted { filter: grayscale(1) brightness(.7); transform: rotate(90deg) translateY(6px); opacity: .6; transition: transform .4s ease, filter .4s ease, opacity .4s ease; }
.bh-mon.flip.fainted { transform: scaleX(-1) rotate(-90deg) translateY(6px); }
.crit-flash { text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--accent); font-size: 1.2rem; margin-top: .5rem; animation: crit-pop .4s ease; }
@keyframes crit-pop { 0% { transform: scale(.5); opacity: 0; } 50% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.hp-pv { font-family: var(--font-pixel); font-size: .55rem; color: var(--muted); }
/* ── Missões diárias/semanais ── */
.missions-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0; }
.missions-card .ms-group { margin-top: .7rem; }
.missions-card .ms-h { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.mission-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px dashed var(--border); }
.mission-row:first-of-type { border-top: none; }
.mission-row .ms-ico { font-size: 1.25rem; flex: 0 0 auto; }
.mission-row .ms-main { flex: 1 1 auto; min-width: 0; }
.mission-row .ms-text { font-size: .88rem; margin-bottom: .3rem; }
.mission-row .ms-bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.mission-row .ms-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .3s ease; }
.mission-row .ms-count { font-family: var(--font-pixel); font-size: .6rem; color: var(--muted); flex: 0 0 auto; }
.mission-row .ms-claimed { font-size: 1rem; color: var(--call); font-weight: 700; flex: 0 0 auto; }
.mission-row.claimed { opacity: .7; }
.mission-row .ms-main { cursor: pointer; }
.ms-claim { flex: 0 0 auto; background: none; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: .1rem .4rem; }
.ms-claim:hover { background: rgba(255,203,5,.15); transform: scale(1.08); }
/* ── #3 Glossário ── */
.glossary-search { width: 100%; margin: .2rem 0 .8rem; }
.glossary-list { display: grid; gap: .5rem; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
.glossary-item { border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; }
.glossary-item strong { color: var(--accent); }
.proto-list { display: grid; gap: .5rem; margin-top: .5rem; }
/* ── #22 Boss Raid (co-op) ── */
.boss-stage { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .6rem 0; }
.boss-mon { width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.boss-mon.idle { animation: boss-bob 1.6s ease-in-out infinite; }
.boss-mon.hurt { animation: bh-hurt .25s ease; }
.boss-mon.attack { animation: boss-attack .35s ease; }
.boss-mon.fainted { filter: grayscale(1) brightness(.6); transform: rotate(90deg); opacity: .6; }
@keyframes boss-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes boss-attack { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-10px) scale(1.05); } 60% { transform: translateX(8px); } }
.boss-hpwrap { width: min(320px, 90%); display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.boss-hpbar { width: 100%; height: 14px; border-radius: 999px; background: #0a0f1e; border: 1px solid var(--border); overflow: hidden; }
.boss-hpfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b23bd6, #ff5a8a); transition: width .4s ease; }
.boss-prog { display: block; text-align: center; margin-top: .3rem; }
/* #28 Mata-mata: chip de eliminado */
.lq-chip.out { opacity: .5; text-decoration: line-through; }
/* #26 Chat da turma */
.chat-list { display: flex; flex-direction: column; gap: .4rem; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding: .3rem; margin: .5rem 0; border: 1px solid var(--border); border-radius: 10px; }
.chat-msg { max-width: 85%; align-self: flex-start; background: var(--panel-2); border-radius: 10px; padding: .4rem .6rem; }
.chat-msg.mine { align-self: flex-end; background: rgba(255,203,5,.12); }
.chat-who { font-size: .66rem; color: var(--muted); display: block; }
.chat-text { font-size: .9rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat-bar { display: flex; gap: .5rem; margin-top: .3rem; }
.chat-input { flex: 1 1 auto; }
/* Chat virtual: ícone flutuante + painel encaixado + balões efêmeros no canto */
.chat-launcher {
position: fixed; right: 20px; bottom: 20px; z-index: 45;
width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(145deg, var(--brand), var(--accent));
box-shadow: 0 8px 22px rgba(0,0,0,.5); display: grid; place-items: center;
transition: transform .15s ease, box-shadow .15s ease;
}
.chat-launcher:hover { transform: translateY(-2px) scale(1.05); }
.chat-launcher.open { transform: scale(.92); opacity: .9; }
.chat-launcher-ico { font-size: 1.5rem; line-height: 1; }
.chat-badge {
position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 99px; background: #e0564a; color: #fff; font-size: .68rem; font-weight: 800;
display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.chat-pop-host {
position: fixed; right: 20px; bottom: 88px; z-index: 44;
display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
max-width: min(320px, 80vw); pointer-events: none;
}
.chat-pop {
pointer-events: auto; cursor: pointer; background: var(--panel);
border: 1px solid var(--border); border-left: 3px solid var(--brand);
border-radius: 12px; padding: .5rem .7rem; box-shadow: 0 6px 18px rgba(0,0,0,.45);
max-width: 100%; animation: chat-pop-in .28s ease; transition: opacity .4s ease, transform .4s ease;
}
.chat-pop.leaving { opacity: 0; transform: translateX(20px); }
@keyframes chat-pop-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.chat-dock {
position: fixed; right: 20px; bottom: 88px; z-index: 46;
width: min(380px, 92vw); max-height: min(560px, 70vh);
display: flex; flex-direction: column;
background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 14px 40px rgba(0,0,0,.55); overflow: hidden;
animation: chat-pop-in .2s ease;
}
.chat-dock-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.chat-dock-head strong { font-family: var(--font-display); }
.chat-dock-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: .2rem .4rem; border-radius: 8px; }
.chat-dock-close:hover { color: var(--fg); background: var(--panel); }
.chat-dock .chat-list { flex: 1 1 auto; max-height: none; border: none; border-radius: 0; margin: 0; }
.chat-dock .chat-bar { padding: .6rem .7rem; border-top: 1px solid var(--border); margin: 0; }
@media (max-width: 620px) {
.chat-dock { right: 3vw; left: 3vw; width: auto; bottom: 84px; }
.chat-pop-host { left: 3vw; }
}
/* #46 Drag-and-drop de treinos */
.day-admin-row[draggable="true"] { align-items: center; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 1.1rem; flex: 0 0 auto; padding: 0 .2rem; user-select: none; }
.day-admin-row.dragging { opacity: .5; border-color: var(--brand); }
/* #24 Júri: barras de votação */
.jury-bars { display: grid; gap: .5rem; margin: .5rem 0; }
.jury-bar-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.jury-bar.right .jury-bar-lbl { color: var(--call); font-weight: 700; }
.jury-bar-n { color: var(--muted); flex: 0 0 auto; }
.jury-bar-track { height: 12px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-top: .2rem; }
.jury-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .5s ease; }
.jury-bar.right .jury-bar-fill { background: linear-gradient(90deg, #21c07a, #7CFC9B); }
/* #21 Torneio: placar de duelo */
.trn-vs { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .6rem 0; flex-wrap: wrap; }
.trn-fighter { font-family: var(--font-display); font-weight: 800; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.trn-fighter.me { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,203,5,.3); }
.trn-fighter.win { border-color: var(--call); color: var(--call); }
.trn-fighter.lose { opacity: .55; text-decoration: line-through; }
.trn-vs-x { color: var(--muted); font-weight: 700; }
/* Reports */
.report-form { display: grid; gap: .3rem; margin-bottom: .8rem; padding: .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.report-selects { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; }
.report-selects select { width: 100%; }
.report-body { width: 100%; min-height: 120px; resize: vertical; }
.report-form .ac-actions { display: flex; justify-content: flex-end; margin-top: .3rem; }
@media (max-width: 520px) { .report-selects { grid-template-columns: 1fr; } }
.report-kind { font-size: .68rem; font-weight: 800; border-radius: 99px; padding: .08rem .5rem; background: var(--panel-2); flex: 0 0 auto; }
.report-kind.k-bug { color: #ffb454; }
.report-kind.k-player { color: #e0564a; }
.dc-item.resolved { opacity: .65; }
/* Planejador de Eventos (legado: view + steps-view mantidos) */
.event-view .field { margin-bottom: .7rem; }
.steps-view { display: grid; gap: .6rem; margin: .4rem 0; }
.step-view { border-left: 3px solid var(--brand); padding-left: .6rem; }
.step-view strong { color: var(--accent); }
.report-nick { font-size: .7rem; color: var(--muted); background: var(--panel-2); border-radius: 99px; padding: .05rem .45rem; flex: 0 0 auto; }
.modal:has(.report-wrap), .modal:has(.event-view) { max-width: 820px; }
.event-view { font-size: 1.02rem; }
.event-view .md-content { font-size: 1.02rem; line-height: 1.6; }
.event-view .steps-view { gap: .8rem; }
.event-view .step-view strong { font-size: 1.05rem; }
.event-view h3 { font-size: 1.5rem; }
/* ── Editor de Eventos — estilo Google Docs (usa variáveis do tema) ── */
/* Modal container: altura DEFINIDA (não só max) para o rodapé nunca ser cortado */
.modal:has(.gdoc-shell) {
max-width: 900px; padding: 0; overflow: hidden;
border-radius: 12px; height: min(88dvh, 820px); max-height: 88dvh;
background: var(--bg); /* garante que não vaze branco atrás */
}
/* O wrapper #modal-content fica ENTRE .modal e .gdoc-shell. Sem altura própria,
ele quebrava a cadeia de height:100% — o shell crescia com o conteúdo e o
rodapé (Voltar/Próximo) saía da tela sem barra de rolagem. Ao dar altura e
virar coluna flex aqui, o shell passa a preencher exatamente o modal. */
.modal:has(.gdoc-shell) > #modal-content {
height: 100%; min-height: 0; display: flex; flex-direction: column;
}
/* Shell: preenche o #modal-content (que preenche o modal) */
.gdoc-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* ── Toolbar (fixa no topo, não rola) ── */
.gdoc-toolbar {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem .9rem; background: var(--panel-2);
border-bottom: 1px solid var(--border); flex-shrink: 0; gap: .5rem;
}
.gdoc-breadcrumb { display: flex; align-items: center; gap: .35rem; font-size: .82rem; min-width: 0; overflow: hidden; }
.gdoc-back {
background: none; border: none; cursor: pointer; font-size: .82rem;
color: var(--brand-2); font-weight: 600; padding: .2rem .45rem; border-radius: 4px;
font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.gdoc-back:hover { background: rgba(255,255,255,.07); }
.gdoc-sep { color: var(--muted); flex-shrink: 0; }
.gdoc-crumb-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.gdoc-tbr { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.gdoc-save-status { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.gdoc-save-status.saving { color: var(--brand-2); }
.gdoc-save-status.saved { color: var(--call); font-weight: 600; }
.gdoc-save-status.err { color: var(--brand); }
/* ── Área do documento (scroll aqui, fundo escuro ao redor da folha) ── */
.gdoc-doc {
flex: 1 1 auto; min-height: 0; /* min-height:0 é essencial p/ rolar dentro do flex column */
overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; /* rolagem por toque com inércia no iOS */
background: var(--bg-2); /* "desktop" ao redor da folha */
padding: 1.6rem 1rem; display: flex; flex-direction: column;
align-items: center; gap: .8rem;
}
/* Filhos diretos NÃO podem encolher: senão a "folha" comprimia para caber na
área visível, cortava o conteúdo e o scroll ficava sem o que rolar. */
.gdoc-doc > * { flex-shrink: 0; }
/* ── Avaliação do mentor (acima da folha) ── */
.gdoc-mentor-fb {
width: 100%; max-width: 700px;
background: color-mix(in srgb, var(--brand-2) 12%, var(--panel));
border-left: 4px solid var(--brand-2); border-radius: 8px; padding: .9rem 1.2rem;
}
.gdoc-fb-head {
display: flex; align-items: center; gap: .5rem;
font-size: .8rem; font-weight: 700; color: var(--brand-2); margin-bottom: .35rem;
}
.gdoc-grade { margin-left: auto; background: var(--brand-2); color: #fff; border-radius: 99px; padding: .1rem .55rem; font-size: .77rem; }
.gdoc-fb-text { margin: 0; font-size: .88rem; color: var(--text); line-height: 1.5; }
/* ── A "folha" — superfície elevada acima do bg-2 ── */
.gdoc-page {
width: 100%; max-width: 700px;
background: var(--panel); border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.4); overflow: hidden;
}
/* Título */
.gdoc-title-wrap { padding: 2rem 2.2rem 1.4rem; border-bottom: 1px solid var(--border); }
.gdoc-type-label { margin: 0 0 .5rem; font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.gdoc-title-input {
width: 100%; border: none; outline: none; background: transparent;
font-size: 1.9rem; font-weight: 700; color: var(--text); font-family: inherit;
line-height: 1.2; padding: 0;
}
.gdoc-title-input::placeholder { color: var(--muted); opacity: .45; font-weight: 400; }
/* Propriedades */
.gdoc-props {
display: grid; grid-template-columns: 1fr 1fr;
padding: 1rem 2.2rem; gap: .75rem 2rem;
border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.gdoc-prop { display: flex; flex-direction: column; gap: .18rem; }
.gdoc-prop label { font-size: .65rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gdoc-prop input {
border: none; border-bottom: 1.5px solid var(--border); border-radius: 0;
padding: .22rem 0; background: transparent; font-size: .87rem; color: var(--text);
outline: none; font-family: inherit; transition: border-color .15s; width: 100%;
}
.gdoc-prop input:focus { border-bottom-color: var(--brand-2); }
/* Seções */
.gdoc-section { padding: 1.3rem 2.2rem; border-top: 1px solid var(--border); }
.gdoc-section-head {
display: flex; align-items: center; gap: .4rem; margin-bottom: .9rem;
font-size: .67rem; font-weight: 800; color: var(--muted);
text-transform: uppercase; letter-spacing: .07em;
}
.gdoc-section-icon { font-size: .95rem; }
/* Textarea de documento: sempre visível, borda clara, fácil de tocar no celular */
.gdoc-textarea {
width: 100%; display: block; box-sizing: border-box;
min-height: 150px; resize: vertical;
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
color: var(--text); font-family: inherit; font-size: .95rem; line-height: 1.6;
padding: .8rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.gdoc-textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(255,92,58,.16); }
.gdoc-textarea::placeholder { color: var(--muted); opacity: .7; }
.gdoc-textarea-sm { min-height: 90px; }
/* Texto de ajuda dentro de uma seção */
.gdoc-hint { margin: 0 0 .7rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }
/* Caixa informativa antes do formulário */
.gdoc-infobox {
border-top: 1px solid var(--border); padding: 1rem 2.2rem;
background: color-mix(in srgb, var(--brand-2) 8%, var(--panel));
border-left: 3px solid var(--brand-2);
}
.gdoc-infobox-title { font-size: .72rem; font-weight: 800; color: var(--brand-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.gdoc-infobox-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.gdoc-infobox-list li { font-size: .84rem; color: var(--text); line-height: 1.5; }
/* Props com apenas 2 colunas */
.gdoc-props-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
.gdoc-infobox { padding: .85rem 1rem; }
.gdoc-props-2 { grid-template-columns: 1fr; }
}
/* Etapas (numeração automática via CSS counter) */
.gdoc-steps { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .7rem; counter-reset: gdoc-step; }
.gdoc-step {
display: flex; gap: .75rem; align-items: flex-start; counter-increment: gdoc-step;
border: 1px solid var(--border); border-radius: 10px;
padding: .75rem .9rem; background: var(--panel-2); transition: box-shadow .15s;
}
.gdoc-step:hover { box-shadow: 0 3px 12px rgba(0,0,0,.35); }
/* Etapa com NPCs: empilha a linha (número+título+desc) e a área de NPCs abaixo. */
.gdoc-step.step-with-npc { display: block; }
.gdoc-step-top { display: flex; gap: .75rem; align-items: flex-start; }
/* Área de NPCs dentro de uma etapa */
.step-npc-area { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .6rem; }
.step-npc-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step-npc-ico { font-size: 1.05rem; }
.step-npc-lbl { font-size: .82rem; font-weight: 700; color: var(--text); }
.step-npc-head .npc-toggle { margin-left: auto; }
.step-npc-head .npc-seg { flex: 0 0 auto; padding: .35rem .7rem; font-size: .8rem; }
.npc-add-in { margin-top: .1rem; }
.gdoc-step-num {
flex-shrink: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%;
background: var(--brand-2); color: #fff; font-size: .7rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.gdoc-step-num::before { content: counter(gdoc-step); }
.gdoc-step-body { flex: 1; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.gdoc-step-title {
width: 100%; box-sizing: border-box; font-weight: 700; font-size: .95rem;
color: var(--text); font-family: inherit; outline: none;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: .5rem .7rem; transition: border-color .15s;
}
.gdoc-step-title:focus { border-color: var(--brand-2); }
.gdoc-step-title::placeholder { font-weight: 400; color: var(--muted); opacity: .65; }
.gdoc-step-desc {
width: 100%; box-sizing: border-box; font-size: .88rem;
color: var(--text); resize: vertical; min-height: 60px;
font-family: inherit; line-height: 1.55; outline: none;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: .5rem .7rem; transition: border-color .15s;
}
.gdoc-step-desc:focus { border-color: var(--brand-2); }
.gdoc-step-desc::placeholder { color: var(--muted); opacity: .65; }
.gdoc-step-del {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--muted); font-size: .88rem; padding: .2rem .3rem;
border-radius: 4px; line-height: 1; transition: all .12s;
}
.gdoc-step-del:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.gdoc-add-step {
width: 100%; border: 1.5px dashed var(--border); border-radius: 8px; background: none;
padding: .48rem 1rem; cursor: pointer; color: var(--muted);
font-size: .84rem; font-family: inherit; transition: all .15s;
}
.gdoc-add-step:hover { border-color: var(--brand-2); color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, transparent); }
/* ── Mobile: bottom-sheet (sobe da base) ── */
@media (max-width: 600px) {
.modal-backdrop:has(.gdoc-shell) { padding: 0; align-items: flex-end; }
.modal:has(.gdoc-shell) {
border-radius: 18px 18px 0 0; max-width: 100%;
height: 92dvh; max-height: 92dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.gdoc-shell { height: 100%; }
.gdoc-toolbar { padding: .5rem .75rem; }
.gdoc-doc { padding: .9rem .5rem; }
.gdoc-title-wrap { padding: 1.4rem 1rem .9rem; }
.gdoc-props { grid-template-columns: 1fr; padding: .8rem 1rem; gap: .55rem; }
.gdoc-section { padding: 1rem 1rem; }
.gdoc-title-input { font-size: 1.45rem; }
}
/* ═══ Wizard de criação de eventos (passo a passo) ═══ */
/* Barra de progresso das etapas */
.wz-progress {
display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
padding: .7rem 1rem; background: var(--panel-2);
border-bottom: 1px solid var(--border); overflow-x: auto;
}
.wz-pstep { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; opacity: .5; transition: opacity .2s; }
.wz-pstep.active, .wz-pstep.done { opacity: 1; }
.wz-pnum {
width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center; font-size: .72rem; font-weight: 800;
background: var(--border); color: var(--text);
}
.wz-pstep.active .wz-pnum { background: var(--brand-2); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 30%, transparent); }
.wz-pstep.done .wz-pnum { background: var(--call); color: #fff; }
.wz-plabel { font-size: .76rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.wz-pstep:not(:last-child)::after { content: ''; width: 1.1rem; height: 2px; background: var(--border); border-radius: 2px; margin-left: .2rem; }
/* Área rolável + folha do documento */
.wz-doc { padding: 1.4rem 1rem; }
.wz-page { max-width: 640px; padding: 1.6rem 1.8rem; }
.wz-title { margin: 0 0 .4rem; font-size: 1.3rem; color: var(--text); }
.wz-lead { margin: 0 0 1.2rem; font-size: .9rem; color: var(--muted); line-height: 1.55; }
/* Regras (passo 1) */
.wz-rules { display: flex; flex-direction: column; gap: .8rem; }
.wz-rule {
display: flex; gap: .8rem; align-items: flex-start;
background: var(--panel-2); border: 1px solid var(--border);
border-left: 3px solid var(--brand-2); border-radius: 10px; padding: .9rem 1rem;
}
.wz-rule-ico { font-size: 1.4rem; flex-shrink: 0; line-height: 1.2; }
.wz-rule-main { min-width: 0; }
.wz-rule-title { display: block; font-size: .92rem; color: var(--text); margin-bottom: .2rem; }
.wz-rule-text { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
/* Campos (passos 2 e 3) */
.wz-body { display: flex; flex-direction: column; gap: 1.3rem; }
.wz-field { display: flex; flex-direction: column; gap: .35rem; }
.wz-flabel { font-size: .82rem; font-weight: 800; color: var(--text); }
.wz-fhint { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.wz-input { width: 100%; box-sizing: border-box; }
.wz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .wz-row2 { grid-template-columns: 1fr; } }
/* Rodapé fixo com Voltar / Próximo */
.wz-nav {
flex-shrink: 0; display: flex; justify-content: space-between; gap: .6rem;
padding: .8rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border);
}
.wz-nav .btn { min-width: 46%; padding: .7rem 1rem; font-size: .95rem; }
/* Passo final: grupo com dois botões (Salvar / Enviar) à direita */
.wz-nav-actions { display: flex; gap: .5rem; flex: 1; justify-content: flex-end; }
.wz-nav-actions .btn { min-width: 0; flex: 1 1 auto; max-width: 50%; }
.wz-nav:has(.wz-nav-actions) .btn:first-child { flex: 0 0 auto; min-width: 0; }
.wz-endnote { margin-top: .4rem; padding-top: .8rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .3rem; }
@media (max-width: 600px) {
.wz-progress { padding: .55rem .7rem; }
.wz-plabel { font-size: .68rem; }
.wz-pstep:not(:last-child)::after { width: .6rem; }
.wz-doc { padding: .9rem .6rem; }
.wz-page { padding: 1.2rem 1rem; }
.wz-title { font-size: 1.15rem; }
}
/* Sub-seção dentro de um passo (ex.: NPCs dentro de "Escrever") */
.wz-subsection { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .5rem; }
.wz-subhead { display: flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 800; color: var(--text); }
.wz-subhead-ico { font-size: 1.15rem; }
/* Caixa de contagem de staffs (NPCs + organização) */
.wz-staffbox { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; background: var(--panel-2); }
.wz-staff-line { margin: 0; font-size: .84rem; color: var(--text); }
.wz-staffbox .wz-input { max-width: 120px; }
.wz-staff-total-line { margin: .2rem 0 0; font-size: .9rem; color: var(--text); font-weight: 700; }
.wz-staff-total { color: var(--brand-2); }
/* ═══ NPCs — builder (passo do wizard) ═══ */
.npc-toggle { display: flex; gap: .5rem; }
.npc-seg {
flex: 1; padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
border: 1.5px solid var(--border); background: var(--panel-2); color: var(--muted);
font-family: inherit; font-size: .9rem; font-weight: 700; transition: all .15s;
}
.npc-seg:hover { border-color: var(--brand-2); }
.npc-seg.active { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 16%, var(--panel)); color: var(--text); }
.npc-listwrap { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.npc-list { display: flex; flex-direction: column; gap: .7rem; }
.npc-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.npc-summary {
display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; cursor: pointer;
list-style: none; font-weight: 700; user-select: none;
border-left: 3px solid var(--brand-2);
}
.npc-summary::-webkit-details-marker { display: none; }
.npc-summary::after { content: '▸'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.npc-card[open] .npc-summary::after { transform: rotate(90deg); }
.npc-ico { font-size: 1.1rem; }
.npc-sum-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-del {
margin-left: .3rem; flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--muted); font-size: .9rem; padding: .15rem .35rem; border-radius: 4px; line-height: 1;
}
.npc-del:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.npc-body { padding: .3rem .9rem 1rem; display: flex; flex-direction: column; gap: .8rem; border-top: 1px solid var(--border); }
.npc-field { display: flex; flex-direction: column; gap: .3rem; }
.npc-flabel { font-size: .78rem; font-weight: 800; color: var(--text); }
.npc-fhint { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.4; }
.npc-ta-sm { min-height: 64px; }
/* ═══ NPCs — visualização (leitura) ═══ */
.npcv-list { display: flex; flex-direction: column; gap: .7rem; margin: .4rem 0; }
.step-npcv { margin: .5rem 0 .2rem; padding-left: .6rem; border-left: 2px dashed var(--border); }
.npcv-img { margin: .3rem 0; }
.npcv-img img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; }
.npcv-card { border: 1px solid var(--border); border-left: 3px solid var(--brand-2); border-radius: 10px; background: var(--panel-2); padding: .7rem .9rem; }
.npcv-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; flex-wrap: wrap; }
.npcv-ico { font-size: 1.15rem; }
.npcv-name { font-size: 1.02rem; color: var(--text); }
.npcv-role { font-size: .74rem; font-weight: 700; color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 14%, transparent); border-radius: 99px; padding: .1rem .55rem; }
.npcv-body { display: flex; flex-direction: column; gap: .35rem; }
.npcv-line { display: flex; gap: .5rem; font-size: .88rem; line-height: 1.5; }
.npcv-line-lbl { flex: 0 0 auto; font-weight: 700; color: var(--muted); white-space: nowrap; }
.npcv-line-val { color: var(--text); white-space: pre-wrap; }
@media (max-width: 480px) { .npcv-line { flex-direction: column; gap: .1rem; } }
.glossary-item p { margin: .2rem 0 0; }
/* ── #7 Revisão de erros (reusa .quiz-opts/.quiz-opt) ── */
.err-review .quiz-opts { display: grid; gap: .5rem; margin-top: .7rem; }
.err-review .quiz-opt.correct { border-color: var(--call); background: rgba(33,192,122,.14); }
.err-review .quiz-opt.wrong { border-color: #e0564a; background: rgba(224,86,74,.14); }
/* ── #50 Feedback rápido do mentor ── */
.quick-fb { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .5rem; }
.quick-fb-chip {
font: inherit; font-size: .74rem; cursor: pointer; border: 1px dashed var(--border);
background: var(--panel-2); color: var(--muted); border-radius: 99px; padding: .22rem .6rem;
}
.quick-fb-chip:hover { color: var(--text); border-color: var(--brand-2); }
/* ── #4 Regra/Foco da semana ── */
.principle.week-focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,203,5,.25); }
.week-focus-tag { display: inline-block; font-size: .62rem; font-weight: 800; color: #06231a; background: var(--accent); border-radius: 99px; padding: .08rem .5rem; margin-bottom: .25rem; }
/* ── #13 Moedas + Loja ── */
.coin-chip { display: inline-flex; align-items: center; gap: .2rem; font-weight: 800; font-size: .82rem; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); border-radius: 99px; padding: .12rem .55rem; }
.coin-chip .coin-num { color: var(--accent); }
.shop-list { display: grid; gap: .5rem; margin: .4rem 0 .8rem; }
.shop-cat { display: block; margin: .9rem 0 .1rem; }
.shop-cat:first-of-type { margin-top: .3rem; }
.shop-item { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; background: var(--panel); }
.shop-ico { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; display: grid; place-items: center; }
.shop-ico.shop-emoji { font-size: 1.7rem; }
.shop-owned { display: inline-block; margin-top: .2rem; font-size: .7rem; font-weight: 800; color: var(--accent); }
.shop-item .shop-main { flex: 1 1 auto; min-width: 0; }
.shop-item .shop-main strong { display: block; }
.shop-item .shop-main p { margin: .15rem 0 0; }
/* ══ 🛒 Loja estilo MMO (base: exemplo.png) ══════════════════ */
/* Quando o modal hospeda a loja, ela VIRA a janela (sem moldura dupla). */
.modal:has(.shopx) { max-width: 660px; padding: 0; background: transparent; border: none; box-shadow: none; overflow: visible; }
.shopx {
--sx-line: #2f5aa8; --sx-cyan: #5fc6ff; --sx-gold: #ffd45e;
display: flex; flex-direction: column; gap: .7rem; color: #eaf2ff;
background: linear-gradient(180deg, #12244a 0%, #0d1830 100%);
border: 2px solid var(--sx-line); border-radius: 14px; padding: .9rem;
box-shadow: inset 0 0 0 1px rgba(95,198,255,.25), 0 14px 44px rgba(0,0,0,.55);
max-height: 86vh;
}
.shopx-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.shopx-title {
display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
background: #0b1730; border: 1px solid var(--sx-line); border-radius: 999px; padding: .32rem .85rem;
}
.shopx-gold {
font-weight: 800; color: var(--sx-gold); white-space: nowrap;
background: rgba(0,0,0,.25); border: 1px solid var(--sx-line); border-radius: 999px; padding: .32rem .75rem;
}
.shopx-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--sx-line); }
.shopx-tab {
border: 1px solid var(--sx-line); border-bottom: none; background: rgba(20,40,80,.55); color: #cfe0ff; cursor: pointer;
border-radius: 9px 9px 0 0; padding: .45rem .75rem; font-weight: 700; font-size: .84rem;
transition: background var(--dur-fast), color var(--dur-fast);
}
.shopx-tab:hover { background: rgba(50,90,168,.5); color: #fff; }
.shopx-tab.on { background: linear-gradient(180deg, #3a6ac0, #24467f); color: #fff; box-shadow: inset 0 -3px 0 var(--sx-cyan); }
.shopx-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; overflow-y: auto; padding: .15rem;
min-height: 180px; max-height: 46vh; overscroll-behavior: contain;
}
@media (max-width: 560px) { .shopx-grid { grid-template-columns: repeat(2, 1fr); } }
.shopx-card {
position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer;
background: linear-gradient(180deg, rgba(30,55,105,.55), rgba(14,28,58,.7)); border: 1px solid var(--sx-line);
border-radius: 10px; padding: .7rem .5rem; color: #eaf2ff; min-height: 108px;
transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.shopx-card:hover { transform: translateY(-2px); border-color: var(--sx-cyan); }
.shopx-card.sel { border-color: var(--sx-cyan); box-shadow: 0 0 0 2px var(--sx-cyan), 0 0 16px rgba(95,198,255,.4); background: linear-gradient(180deg, rgba(48,90,168,.7), rgba(20,40,80,.85)); }
.shopx-card.equipped { border-color: var(--sx-gold); }
.shopx-ico { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; display: grid; place-items: center; }
.shopx-ico.shopx-emoji { font-size: 2rem; }
.shopx-name { font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.15; }
.shopx-price { font-size: .82rem; font-weight: 800; color: var(--sx-gold); }
.shopx-price.owned { color: var(--sx-cyan); }
.shopx-owns { position: absolute; top: .3rem; right: .4rem; font-size: .68rem; font-weight: 800; color: #cfe6ff; background: rgba(0,0,0,.42); border-radius: 6px; padding: 0 .3rem; }
.shopx-boost { position: absolute; top: .3rem; left: .4rem; font-size: .62rem; font-weight: 800; color: #8affc0; }
.shopx-foot {
border-top: 1px solid var(--sx-line); padding-top: .6rem; margin-top: auto;
display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.shopx-info { flex: 1 1 58%; min-width: 200px; }
.shopx-fname { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; }
.shopx-fdesc { margin: .2rem 0; font-size: .82rem; color: #bcd0f0; }
.shopx-frow { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; font-weight: 700; color: #dfe9ff; }
.shopx-hint { color: #aac2ee; font-size: .85rem; margin: .2rem 0; }
.shopx-active { color: #8affc0; font-size: .8rem; margin: .2rem 0 0; }
.shopx-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
/* Redesign responsivo da vitrine: mais espaço para a grade, hierarquia clara
no rodapé e controles de quantidade sem quebrar o modal em telas pequenas. */
.modal:has(.shopx) {
width: min(920px, 96vw); max-width: min(920px, 96vw); padding: 0;
}
.shopx {
width: 100%; max-height: min(88vh, 820px); gap: .8rem; padding: 1rem;
background:
radial-gradient(120% 80% at 0% 0%, rgba(95,198,255,.16), transparent 52%),
linear-gradient(145deg, #132d5b 0%, #0d1d3c 55%, #09152c 100%);
border-color: #3f72c7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 55px rgba(0,0,0,.62);
}
.shopx-bar { align-items: flex-start; padding: .1rem .1rem 0; }
.shopx-heading { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.shopx-title { width: fit-content; max-width: 100%; }
.shopx-subtitle { padding-left: .35rem; color: #a8c4ee; font-size: .76rem; }
.shopx-gold { box-shadow: 0 0 0 1px rgba(255,212,94,.08), 0 4px 14px rgba(0,0,0,.18); }
.shopx-tabs { overflow-x: auto; flex-wrap: nowrap; padding: .1rem .1rem 0; scrollbar-width: thin; }
.shopx-tab { flex: 0 0 auto; white-space: nowrap; }
.shopx-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; min-height: 210px; max-height: 48vh;
padding: .25rem; scrollbar-color: #4678c9 #0b1831;
}
.shopx-card { min-width: 0; min-height: 132px; padding: .8rem .55rem .65rem; }
.shopx-card:focus-visible, .shopx-tab:focus-visible, .shopx-qty-btn:focus-visible, .shopx-qty-input:focus-visible {
outline: 2px solid var(--sx-cyan); outline-offset: 2px;
}
.shopx-name { max-width: 100%; overflow-wrap: anywhere; }
.shopx-foot {
align-items: stretch; padding: .85rem .25rem .1rem; gap: 1rem;
background: linear-gradient(180deg, rgba(6,16,35,.18), rgba(6,16,35,.42));
}
.shopx-info { min-width: min(320px, 100%); }
.shopx-fname { font-size: 1.08rem; }
.shopx-fdesc { max-width: 62ch; line-height: 1.42; }
.shopx-actions { align-items: stretch; justify-content: flex-end; flex-wrap: wrap; }
.shopx-actions .btn { min-height: 2.55rem; white-space: nowrap; }
.shopx-qty {
display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; margin-top: .7rem; padding-top: .65rem;
border-top: 1px solid rgba(95,198,255,.2);
}
.shopx-qty-label { color: #c9dcff; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.shopx-qty-btn {
width: 2rem; height: 2rem; border: 1px solid #4a78c1; border-radius: 8px; cursor: pointer;
color: #eff7ff; background: #1b3b73; font: 800 1.05rem/1 inherit; transition: background var(--dur-fast), transform var(--dur-fast);
}
.shopx-qty-btn:hover { background: #2b5bab; transform: translateY(-1px); }
.shopx-qty-input {
width: 3.4rem; height: 2rem; padding: 0 .25rem; border: 1px solid #4a78c1; border-radius: 8px;
color: #fff; background: #0a1934; font: 800 .9rem/1 inherit; text-align: center;
}
.shopx-total { margin-left: auto; color: var(--sx-gold); font-size: .86rem; white-space: nowrap; }
@media (max-width: 720px) {
.shopx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shopx-foot { flex-direction: column; }
.shopx-actions { width: 100%; }
.shopx-actions .btn { flex: 1 1 9rem; }
}
@media (max-width: 560px) {
.modal:has(.shopx) { width: 100vw; max-width: 100vw; }
.shopx { max-height: 92vh; border-radius: 12px; padding: .75rem; }
.shopx-bar { gap: .45rem; flex-wrap: wrap; }
.shopx-gold { margin-left: auto; }
.shopx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 170px; max-height: 43vh; gap: .45rem; }
.shopx-card { min-height: 120px; padding: .65rem .4rem .55rem; }
.shopx-ico { width: 40px; height: 40px; }
.shopx-foot { gap: .65rem; }
.shopx-info { min-width: 0; }
.shopx-frow { gap: .5rem; font-size: .76rem; }
.shopx-qty { gap: .3rem; }
.shopx-total { width: 100%; margin-left: 0; }
}
/* ══ 🛍️ Loja — redesign visual final ═══════════════════════════
A vitrine usa uma linguagem própria: clara, compacta e com ações menores
que os botões gerais do portal. Mantemos os nomes shopx para não quebrar
estado, quantidade e seleção já existentes. */
.modal:has(.shopx) {
width: min(980px, calc(100vw - 2rem)); max-width: min(980px, calc(100vw - 2rem));
max-height: none; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible;
}
.shopx {
--sx-ink: #edf5ff; --sx-muted: #a9bddb; --sx-line: #315487;
--sx-brand: #f05245; --sx-brand-dark: #ff8b72; --sx-gold: #ffd45e;
--sx-blue: #152c55; --sx-blue-strong: #23477d;
display: flex; flex-direction: column; gap: .8rem; width: 100%; max-height: min(88vh, 820px);
padding: 1rem; overflow: hidden; color: var(--sx-ink);
background:
radial-gradient(600px 220px at 8% -10%, rgba(255, 212, 94, .13), transparent 70%),
linear-gradient(145deg, #152d58 0%, #102344 55%, #0c1a34 100%);
border: 1px solid #3a66a2; border-radius: 22px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255,255,255,.08);
}
.shopx-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .15rem .25rem 0; }
.shopx-heading { display: flex; min-width: 0; flex-direction: column; gap: .16rem; }
.shopx-title {
display: flex; align-items: center; gap: .45rem; width: fit-content; max-width: 100%; padding: 0;
color: var(--sx-ink); background: transparent; border: 0; border-radius: 0;
font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; line-height: 1.1;
}
.shopx-tab-ico {
display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px;
color: #fff; background: linear-gradient(145deg, var(--sx-brand), #f15b45);
box-shadow: 0 5px 12px rgba(217,54,43,.22); font-size: 1rem;
}
.shopx-subtitle { padding: 0; color: var(--sx-muted); font-size: .78rem; }
.shopx-gold {
flex: 0 0 auto; padding: .45rem .72rem; border: 1px solid #806d35; border-radius: 12px;
color: var(--sx-gold); background: rgba(9, 22, 45, .72); box-shadow: none; font-size: .82rem; font-weight: 800;
}
.shopx-tabs {
display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; padding: .3rem;
border: 1px solid var(--sx-line); border-radius: 14px; background: rgba(7, 20, 42, .56); scrollbar-width: thin;
}
.shopx-tab {
flex: 0 0 auto; border: 0; border-radius: 10px; padding: .42rem .62rem; cursor: pointer;
color: #b5c9e7; background: transparent; font: 700 .76rem/1 inherit; white-space: nowrap;
transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.shopx-tab:hover { color: #fff; background: rgba(74, 125, 200, .35); }
.shopx-tab.on {
color: #fff; background: linear-gradient(180deg, #3b6db1, #294f88); box-shadow: 0 2px 9px rgba(0,0,0,.22), inset 0 -2px 0 var(--sx-brand);
}
.shopx-grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; min-height: 180px;
max-height: 42vh; padding: .15rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #bbcbe0 transparent;
}
.shopx-card {
position: relative; display: flex; min-width: 0; min-height: 118px; align-items: center; justify-content: center;
flex-direction: column; gap: .3rem; padding: .62rem .45rem .55rem; border: 1px solid var(--sx-line);
border-radius: 14px; cursor: pointer; color: var(--sx-ink); background: linear-gradient(180deg, rgba(35, 70, 125, .78), rgba(18, 40, 78, .9));
box-shadow: 0 2px 9px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05); font: inherit;
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.shopx-card:hover { transform: translateY(-2px); border-color: #76b4f3; box-shadow: 0 8px 18px rgba(0,0,0,.32); }
.shopx-card.sel { border-color: var(--sx-brand); background: linear-gradient(180deg, #315f9e, #1e4075); box-shadow: 0 0 0 2px rgba(240,82,69,.28), 0 8px 18px rgba(0,0,0,.3); }
.shopx-card.equipped { border-color: #e3bb4e; }
.shopx-ico {
width: 42px; height: 42px; padding: .22rem; object-fit: contain; image-rendering: pixelated;
border-radius: 12px; background: rgba(7, 20, 42, .5); display: grid; place-items: center;
}
.shopx-ico.shopx-emoji { padding: 0; color: #ffd45e; background: transparent; font-size: 1.8rem; }
.shopx-name { max-width: 100%; overflow-wrap: anywhere; color: #f1f6ff; font-size: .75rem; font-weight: 800; line-height: 1.15; text-align: center; }
.shopx-price { padding: .12rem .38rem; border-radius: 99px; color: var(--sx-gold); background: rgba(64, 53, 16, .75); font-size: .7rem; font-weight: 800; }
.shopx-price.owned { color: #8affc0; background: rgba(20, 82, 59, .65); }
.shopx-owns { position: absolute; top: .35rem; right: .4rem; padding: .12rem .3rem; border-radius: 6px; color: #d8e9ff; background: rgba(5, 17, 36, .7); font-size: .62rem; font-weight: 800; }
.shopx-boost { position: absolute; top: .38rem; left: .4rem; color: #8affc0; font-size: .61rem; font-weight: 800; }
.shopx-foot {
display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
margin-top: .05rem; padding: .75rem; border: 1px solid #315b94; border-radius: 16px;
background: linear-gradient(110deg, rgba(21, 51, 95, .95), rgba(15, 34, 68, .98));
}
.shopx-info { flex: 1 1 58%; min-width: 230px; }
.shopx-fname { color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.shopx-fdesc { max-width: 62ch; margin: .18rem 0 .35rem; color: #b8cae4; font-size: .78rem; line-height: 1.38; }
.shopx-frow { display: flex; flex-wrap: wrap; gap: .7rem; color: #d6e3f6; font-size: .74rem; font-weight: 800; }
.shopx-hint { margin: .2rem 0; color: #b5c9e7; font-size: .74rem; line-height: 1.35; }
.shopx-active { margin: .2rem 0 0; color: #8affc0; font-size: .74rem; font-weight: 700; }
.shopx-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; }
.shopx-actions .btn {
min-height: 34px; padding: .42rem .68rem; border-radius: 10px; font: 800 .75rem/1 inherit; white-space: nowrap;
box-shadow: none;
}
.shopx-actions .btn-primary { color: #fff; background: linear-gradient(180deg, #e34b3e, #c82f27); }
.shopx-actions .btn-ghost { color: #d2e1f5; border-color: #5275a8; background: rgba(7, 20, 42, .3); }
.shopx-actions .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.24); }
.shopx-qty {
display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .52rem; padding-top: .5rem;
border-top: 1px solid #315b94;
}
.shopx-qty-label { margin-right: .15rem; color: #b5c9e7; font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.shopx-qty-btn {
display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid #c1d2e8;
border-radius: 8px; cursor: pointer; color: #eaf3ff; background: #1b3b73; font: 800 .95rem/1 inherit; transition: background .16s, border-color .16s;
}
.shopx-qty-btn:hover { border-color: #76b4f3; background: #2b5bab; transform: none; }
.shopx-qty-input {
width: 2.8rem; height: 1.75rem; padding: 0 .2rem; border: 1px solid #c1d2e8; border-radius: 8px;
color: #edf5ff; background: #0a1934; font: 800 .78rem/1 inherit; text-align: center;
}
.shopx-total { margin-left: auto; color: var(--sx-gold); font-size: .76rem; white-space: nowrap; }
.shopx-foot > .shopx-info:only-child { min-height: 38px; display: flex; align-items: center; }
.shopx-foot > .shopx-info:only-child .shopx-hint { margin: 0; }
@media (max-width: 820px) {
.shopx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
.modal:has(.shopx) { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); }
.shopx { max-height: calc(100dvh - 1rem); padding: .7rem; border-radius: 17px; }
.shopx-bar { align-items: flex-start; }
.shopx-title { font-size: 1.08rem; }
.shopx-tab-ico { width: 1.75rem; height: 1.75rem; }
.shopx-gold { padding: .38rem .55rem; font-size: .74rem; }
.shopx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 40vh; gap: .42rem; }
.shopx-card { min-height: 108px; padding: .5rem .3rem; }
.shopx-ico { width: 36px; height: 36px; }
.shopx-foot { align-items: stretch; flex-direction: column; padding: .65rem; }
.shopx-info { min-width: 0; }
.shopx-actions { width: 100%; justify-content: stretch; }
.shopx-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.shopx-bar { flex-wrap: wrap; }
.shopx-gold { margin-left: auto; }
.shopx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 38vh; }
}
/* ══ 🎒 Fase pré-mentoria (tela divertida antes de começar) ══════ */
/* ── Sala de espera (pré-mentoria do aluno + central de prep. da equipe) ── */
@keyframes pmBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes wrShake {
0%, 58%, 92%, 100% { transform: rotate(0); }
62% { transform: rotate(-15deg); } 68% { transform: rotate(15deg); }
74% { transform: rotate(-11deg); } 80% { transform: rotate(11deg); } 86% { transform: rotate(-5deg); }
}
@keyframes wrFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.waitroom {
position: relative; overflow: hidden; text-align: center;
display: flex; flex-direction: column; gap: 1.6rem;
padding: 1.9rem 1.2rem 1rem; border-radius: var(--radius);
background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel) 70%);
border: 1px solid var(--border);
}
.waitroom > *:not(.wr-bg) { position: relative; z-index: 1; }
/* Pokémon flutuando ao fundo (decorativos, bem suaves) */
.wr-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wr-poke {
position: absolute; height: auto; opacity: .17; pointer-events: none;
filter: drop-shadow(0 4px 7px rgba(0,0,0,.25));
animation: wrFloat 12s ease-in-out infinite;
}
.waitroom-staff { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--brand, #6c5ce7) 16%, var(--panel)), var(--panel) 70%); }
.wr-hero { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.wr-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 4.5vw, 1.6rem); }
.wr-sub { margin: 0 auto; max-width: 48ch; color: var(--muted); font-size: .93rem; line-height: 1.5; }
/* Poké Ball em CSS */
.wr-ball {
width: 88px; height: 88px; border-radius: 50%; margin: .3rem auto .1rem; position: relative;
background: linear-gradient(#ef5350 0 47%, #141414 47% 53%, #fafafa 53% 100%);
border: 4px solid #141414;
box-shadow: 0 9px 20px rgba(0,0,0,.28), inset -8px -8px 0 rgba(0,0,0,.10), inset 8px 8px 0 rgba(255,255,255,.12);
animation: wrShake 3s ease-in-out infinite; transform-origin: 50% 50%;
}
.wr-ball::after {
content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 25px; height: 25px; border-radius: 50%; background: #fafafa; border: 4px solid #141414;
box-shadow: 0 0 0 3px #fafafa;
}
.wr-ball.master { background: linear-gradient(#7b41c9 0 47%, #141414 47% 53%, #fafafa 53% 100%); }
.wr-ball.master::before {
content: 'M'; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
color: #f3c6ff; font: 800 14px/1 var(--font-display, sans-serif); z-index: 2;
}
/* Contagem regressiva (aluno) */
.wr-count {
align-self: center; min-width: 240px; max-width: 350px;
display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem 1.7rem; border-radius: 18px;
background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel));
border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.wr-count-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.wr-count-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.4rem); color: var(--accent); line-height: 1.08; }
.wr-count-sub { color: var(--text); font-size: .9rem; }
.wr-count-date { color: var(--muted); margin-top: .1rem; }
.wr-refresh { margin-top: .7rem; align-self: center; }
/* Balão de fala do Professor (sala de espera) */
.wr-prof { display: flex; align-items: flex-start; gap: .9rem; text-align: left; max-width: 580px; margin: 0 auto; width: 100%; }
.wr-prof-face { flex: 0 0 auto; animation: pmBob 3s ease-in-out infinite; }
.wr-bubble { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: .75rem 1rem; flex: 1; min-width: 0; }
.wr-bubble::before { content: ''; position: absolute; left: -9px; top: 16px; border: 8px solid transparent; border-right-color: var(--border); }
.wr-bubble::after { content: ''; position: absolute; left: -7px; top: 17px; border: 7px solid transparent; border-right-color: var(--panel); }
.wr-bubble strong { display: block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
.wr-bubble p { margin: 0; font-style: italic; line-height: 1.5; }
/* Sprite oficial do Professor (Oak) — compartilhado espera + conteúdo.
Espelhado (scaleX -1) para o Prof. ficar VIRADO para o balão de fala. */
.prof-sprite { width: 118px; height: 118px; object-fit: contain; image-rendering: auto; transform: scaleX(-1); }
.prof-sprite.wr { width: 82px; height: 82px; }
.prof-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 3rem; transform: none; }
.prof-fallback.wr { font-size: 2.2rem; }
/* Missões / quests */
.wr-quests { text-align: left; max-width: 640px; margin: 0 auto; width: 100%; }
.wr-quests-title { display: block; font-weight: 800; margin-bottom: .8rem; font-size: 1.02rem; }
.wr-quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.wr-quest {
display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--panel);
cursor: pointer; color: var(--text); font: inherit;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.wr-quest:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.16); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.wr-quest.req { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.wr-quest-ico { font-size: 1.6rem; flex: 0 0 auto; }
.wr-quest-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.wr-quest-body b { font-size: .96rem; }
.wr-quest-body span { font-size: .79rem; color: var(--muted); line-height: 1.4; }
.wr-quest-badge { font-size: .58rem; font-weight: 800; color: #fff; border-radius: 999px; padding: .1rem .5rem; margin-left: .45rem; vertical-align: middle; letter-spacing: .03em; text-transform: uppercase; }
.wr-quest-badge.req { background: var(--brand); } /* vermelho Pokébola = importante */
.wr-quest-badge.rec { background: #2e9e5b; } /* verde = recomendado */
.wr-quest-arrow { margin-left: auto; color: var(--muted); font-size: 1.4rem; flex: 0 0 auto; }
.wr-foot { margin: .3rem 0 0; font-size: .84rem; color: var(--muted); }
/* ── Prof. Carvalho "narrando" o conteúdo do dia (mentorado) ── */
.prof-say { display: flex; gap: 1rem; align-items: flex-start; text-align: left; margin: .5rem 0 .2rem; }
.prof-avatar { flex: 0 0 auto; position: sticky; top: .5rem; }
.prof-bubble {
position: relative; flex: 1; min-width: 0;
background: color-mix(in srgb, var(--accent) 5%, var(--panel));
border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.15rem;
}
.prof-bubble::before { content: ''; position: absolute; left: -10px; top: 24px; border: 9px solid transparent; border-right-color: var(--border); }
.prof-bubble::after { content: ''; position: absolute; left: -8px; top: 25px; border: 8px solid transparent; border-right-color: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.prof-name { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; }
.prof-lead { margin: 0 0 .5rem; font-style: italic; color: var(--muted); }
.prof-bubble > .md-content { margin: 0; }
@media (max-width: 560px) {
.prof-say { flex-direction: column; align-items: center; gap: .3rem; }
.prof-avatar { position: static; }
.prof-bubble { width: 100%; }
.prof-bubble::before { left: 50%; top: -10px; transform: translateX(-50%); border-right-color: transparent; border-bottom-color: var(--border); }
.prof-bubble::after { left: 50%; top: -8px; transform: translateX(-50%); border-right-color: transparent; border-bottom-color: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
}
@media (prefers-reduced-motion: reduce) {
.wr-ball, .wr-prof-face, .wr-poke { animation: none; }
}
/* Molduras de avatar (cosméticos da loja) */
#user-avatar.frame-gold { border: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(255,203,5,.35); border-radius: 50%; }
#user-avatar.frame-shiny { border: 2px solid #ffe27a; border-radius: 50%; animation: shiny-glow 2.2s ease-in-out infinite; }
/* ── #29/#30 Discussões (comentários + mural) ── */
.day-comments { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.day-comments textarea, .mural-new textarea, .mural-thread textarea { width: 100%; min-height: 64px; resize: vertical; margin-top: .5rem; }
.dc-list { display: grid; gap: .5rem; margin: .5rem 0; }
.dc-item { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; }
.dc-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dc-head strong { font-size: .9rem; }
.dc-tag { font-size: .6rem; font-weight: 800; color: #06231a; background: var(--accent); border-radius: 99px; padding: .05rem .4rem; }
.dc-time { font-size: .68rem; color: var(--muted); }
.dc-del { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .85rem; }
.dc-del:hover { color: #e0564a; }
.dc-body { margin: .3rem 0 0; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.dc-body.q-body { background: var(--panel-2); border-radius: 10px; padding: .6rem .7rem; }
.mural-list { display: grid; gap: .5rem; margin: .6rem 0; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
.mural-item { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; }
.mural-item:hover { border-color: var(--brand-2); }
.mural-item.resolved { opacity: .7; }
.mural-item .mural-main { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.mural-item .mural-meta { flex: 0 0 auto; font-size: .78rem; color: var(--muted); }
.mural-new { border: 1px dashed var(--border); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .6rem; }
.mural-new input { width: 100%; }
.mural-q-head { display: flex; align-items: center; gap: .6rem; }
.mural-badge { font-size: .68rem; font-weight: 800; color: #06231a; background: var(--call); border-radius: 99px; padding: .1rem .5rem; }
/* ── #34 Feed da turma ── */
.feed-list { display: grid; gap: .45rem; margin: .6rem 0; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; }
.feed-item { display: flex; align-items: flex-start; gap: .6rem; border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; }
.feed-ico { font-size: 1.1rem; flex: 0 0 auto; }
.feed-main { flex: 1 1 auto; min-width: 0; }
.feed-text { margin: 0; font-size: .9rem; line-height: 1.4; }
.feed-time { font-size: .68rem; color: var(--muted); }
/* ── #44 Mapa de calor de dificuldade ── */
.heat-list { display: grid; gap: .5rem; margin: .6rem 0; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; }
.heat-item { display: grid; grid-template-columns: 1fr 120px 44px; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; }
.heat-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.heat-main strong { font-size: .9rem; }
.heat-bar { height: 10px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.heat-fill { display: block; height: 100%; border-radius: 99px; }
.heat-pct { font-family: var(--font-pixel); font-size: .6rem; text-align: right; color: var(--muted); }
@media (max-width: 560px) { .heat-item { grid-template-columns: 1fr 70px 40px; } }
/* ── #36 Kudos ── */
.kudos-wrap { display: inline-flex; align-items: center; gap: .3rem; }
.kudos-count { font-size: .78rem; color: var(--muted); }
.kudos-btn { background: none; border: 1px solid var(--border); border-radius: 99px; cursor: pointer; font-size: .8rem; line-height: 1; padding: .12rem .35rem; }
.kudos-btn:hover { border-color: var(--brand-2); transform: scale(1.1); }
.kudos-btn:disabled { opacity: .5; cursor: default; }
/* ── Aba Comunidade (#14) ── */
.community-list { display: block; }
.community-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: .4rem; content-visibility: auto; contain-intrinsic-size: auto 220px; }
.community-card { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; transition: border-color .15s, transform .08s; }
.community-card:hover { border-color: var(--brand-2); transform: translateY(-2px); }
.community-card .cc-ico { font-size: 1.6rem; flex: 0 0 auto; }
.community-card .cc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.community-card .cc-go { color: var(--muted); font-size: 1.3rem; flex: 0 0 auto; }
/* ── Pokédex da Comunidade (redesign) ─────────────────────────────
A aba inteira é emoldurada como um Pokédex vermelho: lente + luzes no
topo, uma "tela" (LCD) com sub-abas por seção e a lista de features como
entradas numeradas (Nº001…). Cores próprias (não seguem o tema do app). */
.dex-device {
--dex-red: #e3350d; --dex-red-dark: #b21f00; --dex-red-hi: #ff6a3d;
--dex-lcd: #9fb87f; --dex-lcd-2: #7f9d63; --dex-ink: #1c2a14;
position: relative;
background: linear-gradient(160deg, var(--dex-red-hi), var(--dex-red) 40%, var(--dex-red-dark));
border: 2px solid var(--dex-red-dark);
border-radius: 22px;
padding: 1rem 1rem 1.15rem;
box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -6px 14px rgba(0,0,0,.25);
}
.dex-topbar { display: flex; align-items: center; gap: .8rem; padding: .1rem .2rem .9rem; }
.dex-lens {
width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
background: radial-gradient(circle at 34% 32%, #cdebff, #37a6e6 55%, #1c6fb0);
border: 4px solid #f4f7fb;
box-shadow: 0 0 0 2px var(--dex-red-dark), 0 2px 6px rgba(0,0,0,.4), inset 0 0 8px rgba(255,255,255,.6);
position: relative;
}
.dex-lens::after { /* reflexo */
content: ''; position: absolute; top: 8px; left: 9px; width: 12px; height: 8px;
background: rgba(255,255,255,.85); border-radius: 50%; transform: rotate(-25deg);
}
.dex-lights { display: flex; gap: .4rem; flex: 0 0 auto; }
.dex-light { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.35); }
.dex-light.red { background: #ff5b5b; }
.dex-light.yellow { background: #ffd23f; }
.dex-light.green { background: #4fdd7a; }
.dex-title {
margin-left: auto; color: #fff; font-weight: 800; font-size: .82rem;
letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* Tela / LCD */
.dex-screen {
background: linear-gradient(180deg, var(--dex-lcd), var(--dex-lcd-2));
border: 3px solid #16351f; border-radius: 12px;
padding: .7rem .7rem .8rem;
box-shadow: inset 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25);
}
/* Sub-abas por seção */
.dex-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.dex-tab {
display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
font: inherit; font-size: .82rem; font-weight: 700; color: var(--dex-ink);
background: rgba(28,42,20,.14); border: 2px solid #2b4a2e; border-radius: 999px;
padding: .28rem .7rem .28rem .4rem; transition: background .15s, transform .08s, color .15s;
}
.dex-tab:hover { transform: translateY(-1px); background: rgba(28,42,20,.24); }
.dex-tab.active { background: var(--dex-red); color: #fff; border-color: var(--dex-red-dark); }
.dex-tab-mon { width: 30px; height: 30px; image-rendering: pixelated; flex: 0 0 auto; }
/* Lista de entradas (features): Número › Ícone › Título */
.dex-list { display: flex; flex-direction: column; gap: .45rem; }
.dex-entry {
display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
font: inherit; color: var(--dex-ink); cursor: pointer;
background: rgba(28,42,20,.12); border: 2px solid rgba(22,53,31,.4);
border-left: 5px solid var(--dex-red); border-radius: 10px;
padding: .45rem .8rem; transition: background .15s, transform .08s, border-color .15s;
}
.dex-entry:hover { background: rgba(255,255,255,.35); transform: translateX(2px); border-left-color: var(--dex-red-hi); }
/* Número num "chip" escuro pra não sumir no verde */
.dex-num {
font-family: ui-monospace, "Courier New", monospace; font-size: .8rem; font-weight: 700;
flex: 0 0 auto; letter-spacing: .02em; color: #dfe7cf;
background: #1c2a14; border-radius: 6px; padding: .18rem .4rem; white-space: nowrap;
}
.dex-mon-wrap { flex: 0 0 auto; width: 88px; height: 88px; display: grid; place-items: center; }
.dex-mon { width: 88px; height: 88px; image-rendering: pixelated; }
.dex-entry-title { flex: 1 1 auto; min-width: 0; font-size: 1.08rem; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rodapé decorativo (d-pad + botões) */
.dex-foot { display: flex; align-items: center; justify-content: space-between; padding: .7rem .3rem 0; }
.dex-dpad {
width: 34px; height: 34px; position: relative; opacity: .9;
background:
linear-gradient(#1f1f1f, #1f1f1f) center/12px 100% no-repeat,
linear-gradient(#1f1f1f, #1f1f1f) center/100% 12px no-repeat;
}
.dex-btns { display: flex; gap: .5rem; }
.dex-btn { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.35); }
.dex-btn.a { background: #ffd23f; }
.dex-btn.b { background: #2e7d32; }
@media (max-width: 560px) {
.dex-device { padding: .8rem .7rem 1rem; border-radius: 18px; }
.dex-title { font-size: .72rem; }
}
/* Resultado do quiz (batalha ao vivo) + CTA do Acervo */
.quiz-result { text-align: center; margin-top: 1rem; display: grid; gap: .5rem; justify-items: center; }
.quiz-result h2 { margin: 0; }
.archive-cta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.quiz-after { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.quiz-after.show { opacity: 1; transform: none; }
@media (max-width: 560px) {
.bh-mon { width: 50px; height: 50px; }
.bh-info { min-width: 80px; }
.bh-name { font-size: .74rem; }
}
/* ═════════ POKÉDEX DE CONQUISTAS (aba Treinos) ═════════ */
.dex-wrap {
grid-column: 1 / -1; background: linear-gradient(180deg, var(--panel), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm);
}
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; }
/* Perf: com 151 slots, só renderiza os que estão visíveis na rolagem interna
(o resto reserva o espaço via contain-intrinsic-size e é pulado). */
.dex-slot { content-visibility: auto; contain-intrinsic-size: auto 118px; }
.dex-slot {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
min-height: 112px; padding: .55rem .3rem; border-radius: 12px; border: 1px solid var(--border);
background: var(--bg); position: relative; transition: transform .12s ease;
}
.dex-slot.captured { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 203, 5, .3); }
.dex-slot.captured:hover { transform: translateY(-3px); }
.dex-slot.seen { border-style: dashed; }
.dex-slot.locked { opacity: .7; }
.dex-sprite { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.dex-sprite.sil { filter: brightness(0) opacity(.5); }
.dex-num { font-family: var(--font-pixel); font-size: .5rem; color: var(--muted); }
.dex-nm { font-family: var(--font-display); font-weight: 700; font-size: .72rem; text-align: center; line-height: 1.1; }
.dex-slot.captured .dex-nm { color: var(--accent); }
.dex-q { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--border); }
/* ═════════ OFENSIVA (STREAK) — chama tipo Duolingo ═════════ */
.streak-chip {
display: inline-flex; align-items: center; gap: .28rem; font-family: var(--font-display); font-weight: 800;
color: #ffb877; font-size: .88rem; padding: .26rem .62rem; border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 138, 61, .22), rgba(238, 21, 21, .12));
border: 1px solid rgba(255, 138, 61, .5);
}
.streak-flame { filter: drop-shadow(0 0 5px rgba(255, 138, 61, .7)); animation: flame-flick 1.1s ease-in-out infinite; }
@keyframes flame-flick { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.16) rotate(3deg); } }
.streak-num { color: #ffcf87; }
.streak-chip.bump { animation: streak-bump .8s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes streak-bump { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (max-width: 620px) { .streak-num { display: none; } }
/* ═════════ SHINY (raro) — Pokédex ═════════ */
.dex-slot.shiny { border-color: #ffe27a; box-shadow: inset 0 0 0 1px rgba(255, 226, 122, .5), 0 0 14px rgba(255, 226, 122, .35); }
.dex-slot.shiny .dex-nm { color: #ffe27a; }
.dex-slot.shiny .dex-sprite { animation: shiny-glow 2.2s ease-in-out infinite; }
@keyframes shiny-glow {
0%,100% { filter: drop-shadow(0 0 5px rgba(255, 226, 122, .6)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
50% { filter: drop-shadow(0 0 12px rgba(180, 230, 255, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
}
.shiny-spark { position: absolute; top: .32rem; right: .4rem; font-size: .85rem; animation: spark-twinkle 1.6s ease-in-out infinite; }
@keyframes spark-twinkle { 0%,100% { opacity: .5; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } }
/* ═════════ CENTRO POKÉMON — animação de cura ═════════ */
.heal-overlay {
position: fixed; inset: 0; z-index: 94; display: grid; place-items: center; cursor: pointer;
background: radial-gradient(circle at 50% 42%, rgba(120, 200, 255, .35), rgba(4, 7, 14, .9));
animation: cap-fade .25s ease both;
}
.heal-box {
display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.6rem 2rem;
background: linear-gradient(180deg, #f6fbff, #dcefff); border: 3px solid #7fd7ff; border-radius: 20px;
box-shadow: 0 14px 32px rgba(0, 0, 0, .5); animation: lu-pop .5s cubic-bezier(.2, .9, .3, 1.4) both;
}
.heal-cross {
width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
background: #ee1515; color: #fff; font-size: 1.5rem; font-weight: 800; box-shadow: 0 3px 8px rgba(238, 21, 21, .4);
}
.heal-pad { display: flex; gap: 1rem; padding: .7rem 1.1rem; border-radius: 999px; background: #0e1626; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5); }
.heal-ball {
width: 22px; height: 22px; border-radius: 50%; position: relative; overflow: hidden;
background: #f6f7fb; border: 2px solid #111; animation: heal-pulse 1.4s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.heal-ball::before { content: ''; position: absolute; inset: 0 0 50% 0; background: #ee1515; }
.heal-ball::after { content: ''; position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 2px; background: #111; }
@keyframes heal-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(127, 215, 255, 0); } 50% { box-shadow: 0 0 10px 3px rgba(127, 215, 255, .9); transform: translateY(-3px); } }
.heal-word { font-family: var(--font-display); font-weight: 800; color: #0e2740; font-size: 1.18rem; }
.heal-overlay.instant .heal-ball, .heal-overlay.instant .heal-box { animation: none; }
/* Enfermeira + Chansey na animação de cura */
.heal-nurses { display: flex; align-items: flex-end; justify-content: center; gap: .6rem; }
.heal-nurse { height: 132px; image-rendering: pixelated; }
.heal-nurse-emoji { font-size: 4.4rem; }
.heal-chansey { width: 92px; height: 92px; image-rendering: pixelated; object-fit: contain; animation: nurseBob 1.4s ease-in-out infinite; }
/* ═════════ CAPTURA — abrir a Pokébola (release) + shiny ═════════ */
.capture-beam, .capture-out { grid-row: 1; grid-column: 1; justify-self: center; align-self: center; }
.capture-beam {
width: 120px; height: 260px; opacity: 0; transform: scaleY(0); transform-origin: center;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55) 42%, rgba(127, 215, 255, .45) 60%, transparent);
-webkit-mask: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
mask: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
animation: cap-beam .8s ease 2s both;
}
@keyframes cap-beam { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: .95; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
.capture-out {
width: 152px; height: 152px; object-fit: contain; opacity: 0;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); animation: cap-out .7s cubic-bezier(.2, .9, .3, 1.5) 2.14s both;
}
@keyframes cap-out { 0% { opacity: 0; transform: scale(0) translateY(30px); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) translateY(-6px); } }
.capture-overlay.shiny .capture-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 226, 122, .6) 0 6deg, transparent 6deg 18deg); }
.capture-overlay.shiny .capture-out { filter: drop-shadow(0 0 14px rgba(255, 226, 122, .9)) drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.capture-overlay.shiny .cap-word { color: #ffe27a; }
.cap-name { font-family: var(--font-display); font-weight: 700; color: var(--text); opacity: .9; }
.capture-overlay.instant .capture-beam { display: none; }
.capture-overlay.instant .capture-out { animation: none; opacity: 1; }
/* ═════════ MINIGAME: QUEM É ESSE POKÉMON? ═════════ */
.whos-body { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.wt-hud { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--font-display); font-weight: 700; }
.wt-round { color: var(--muted); } .wt-score { color: var(--accent); } .wt-streak { color: var(--deadline); }
.wt-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.fq-next-hint { text-align: center; margin-top: .5rem; opacity: .8; }
/* Painel "já jogou hoje" (jogos 1×/dia) */
.daily-lock { display: grid; place-items: center; gap: .35rem; text-align: center; padding: 2.2rem 1rem; }
.daily-lock .dl-moon { font-size: 2.6rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.daily-lock h3 { margin: .2rem 0 0; font-family: var(--font-display); }
.wt-screen {
position: relative; display: grid; place-items: center; min-height: 244px; padding: 1.4rem; border-radius: 16px; overflow: hidden;
background: radial-gradient(120% 100% at 50% 0, rgba(127, 215, 255, .14), transparent 60%), linear-gradient(180deg, #0c1526, #0a1120);
border: 1px solid var(--border); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}
.wt-q { position: absolute; top: .8rem; font-family: var(--font-display); font-weight: 800; color: #eaf0fb; opacity: .85; }
.wt-mon { width: 196px; height: 196px; object-fit: contain; image-rendering: pixelated; transition: filter .45s ease; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.wt-mon.silhouette { filter: brightness(0) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.wt-mon.shine { animation: shiny-glow 1.8s ease-in-out infinite; }
.wt-mon.sprite-fallback { display: grid; place-items: center; font-size: 4rem; line-height: 1; filter: none !important; image-rendering: auto; }
.wt-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wt-opt {
font-family: var(--font-display); font-weight: 700; font-size: .95rem; padding: .85rem 1rem; border-radius: 12px;
border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
transition: border-color .15s, background .15s, transform .06s;
}
.wt-opt:not([disabled]):hover { border-color: var(--brand-2); background: var(--panel-2); transform: translateY(-2px); }
.wt-opt[disabled] { cursor: default; }
.wt-opt.right { border-color: var(--call); background: rgba(33, 192, 122, .16); color: #7CFC9B; }
.wt-opt.wrong { border-color: var(--brand); background: rgba(238, 21, 21, .16); }
.wt-reveal { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.wt-name { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.wt-name.ok { color: var(--call); } .wt-name.no { color: var(--deadline); }
.wt-shiny { font-family: var(--font-display); font-weight: 800; color: #ffe27a; text-shadow: 0 0 12px rgba(255, 226, 122, .6); animation: spark-twinkle 1.4s ease-in-out infinite; }
@media (max-width: 560px) { .wt-options { grid-template-columns: 1fr; } .wt-mon { width: 150px; height: 150px; } }
/* ═════════ CARTÃO DE TREINADOR + EQUIPES ═════════ */
body { --team: var(--accent); }
body[data-team="instinct"] { --team: #ffcf3c; }
body[data-team="mystic"] { --team: #4aa3ff; }
body[data-team="valor"] { --team: #ff5a48; }
.user-avatar { border-color: var(--team); box-shadow: 0 0 8px color-mix(in srgb, var(--team) 45%, transparent); cursor: pointer; }
.topbar { box-shadow: 0 6px 22px rgba(3, 7, 18, .5), inset 0 3px 0 var(--team); }
.trainer-card { display: flex; flex-direction: column; gap: .9rem; --tc-accent: var(--accent); }
.trainer-card.team-instinct { --tc-accent: #ffcf3c; }
.trainer-card.team-mystic { --tc-accent: #4aa3ff; }
.trainer-card.team-valor { --tc-accent: #ff5a48; }
.tc-head {
display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 14px; position: relative;
background: linear-gradient(120deg, color-mix(in srgb, var(--tc-accent) 26%, var(--panel)), var(--panel-2));
border: 1px solid var(--border); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc-accent) 40%, transparent);
}
.tc-avatar {
width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; border-radius: 50%; padding: 3px; flex: 0 0 auto;
background: radial-gradient(circle at 50% 30%, var(--panel-2), var(--bg)); border: 2px solid var(--tc-accent);
}
.tc-who { flex: 1; } .tc-name { margin: 0; font-size: 1.2rem; } .tc-sub { color: var(--muted); font-size: .82rem; }
.tc-id { font-family: var(--font-pixel); font-size: .6rem; color: var(--tc-accent); }
.tc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
/* IMPORTANTE: escopado sob .tc-grid para NÃO vazar no cartão inline (que usa
.tc-stats). Antes, esta regra sobrescrevia o chip translúcido bonito do
cartão da Mentoria por uma caixa opaca var(--bg) — a "cor feia" do card. */
.tc-grid .tc-stat { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.tc-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--tc-accent); }
.tc-lbl { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tc-teams { display: flex; gap: .5rem; flex-wrap: wrap; }
.tc-team {
font-family: var(--font-display); font-weight: 700; padding: .5rem .8rem; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.tc-team:hover { border-color: var(--tc); }
.tc-team.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: 0 0 0 1px var(--tc); color: #fff; }
.dex-counts { display: inline-flex; align-items: center; gap: .6rem; }
.shiny-count { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #ffe27a; text-shadow: 0 0 8px rgba(255, 226, 122, .5); }
/* ═════════ EVOLUÇÃO CLÁSSICA (flash branco + morph) ═════════ */
.evo-overlay {
position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; cursor: pointer; overflow: hidden;
background: radial-gradient(circle at 50% 45%, rgba(20, 30, 55, .85), rgba(2, 4, 10, .96)); animation: cap-fade .25s ease both;
}
.evo-stage { display: grid; place-items: center; width: min(82vw, 320px); height: 340px; position: relative; }
.evo-stage > * { grid-area: 1 / 1; }
.evo-shape {
width: 180px; height: 180px; object-fit: contain; image-rendering: pixelated;
filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(255, 255, 255, .9)); animation: evo-breathe 1s ease-in-out infinite;
}
@keyframes evo-breathe { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
.evo-final { width: 186px; height: 186px; object-fit: contain; opacity: 0; }
.evo-rays {
width: 340px; height: 340px; border-radius: 50%; opacity: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .5) 0 6deg, transparent 6deg 18deg);
-webkit-mask: radial-gradient(circle, transparent 26%, #000 28%, #000 60%, transparent 66%);
mask: radial-gradient(circle, transparent 26%, #000 28%, #000 60%, transparent 66%);
}
.evo-flash { width: 130vmax; height: 130vmax; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 40%, rgba(255, 255, 255, .6) 55%, transparent 70%); }
.evo-cap { display: flex; flex-direction: column; align-items: center; gap: .2rem; align-self: end; opacity: 0; }
.evo-word { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--accent); text-shadow: 0 2px 0 #a67f00, 0 0 18px rgba(255, 203, 5, .5); }
.evo-sub { color: #cfe3ff; font-weight: 700; }
.evo-overlay.done .evo-shape { display: none; }
.evo-overlay.done .evo-rays { animation: lu-spin 10s linear infinite, cap-pop .5s ease both; }
.evo-overlay.done .evo-final { animation: evo-reveal .7s cubic-bezier(.2, .9, .3, 1.5) .25s both; }
.evo-overlay.done .evo-flash { animation: evo-flash .6s ease both; }
.evo-overlay.done .evo-cap { animation: cap-pop .5s ease .5s both; }
@keyframes evo-reveal { 0% { transform: scale(.4); opacity: 0; filter: brightness(3); } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; filter: none; } }
@keyframes evo-flash { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
/* ═════════ POP-UP DE TROFÉU (conquistas) ═════════ */
.trophy-pop {
position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 96; display: flex; align-items: center; gap: .8rem;
max-width: 340px; padding: .8rem 1rem; border-radius: 14px;
background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--accent);
box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 203, 5, .2);
transform: translateX(120%); opacity: 0; transition: transform .4s cubic-bezier(.2, .9, .3, 1.4), opacity .4s;
}
.trophy-pop.in { transform: none; opacity: 1; }
.tp-badge {
width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
background: radial-gradient(circle at 50% 30%, #ffe27a, var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tp-ico { font-size: 1.4rem; }
.tp-kicker { font-family: var(--font-display); font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tp-title { font-family: var(--font-display); font-weight: 800; font-size: .98rem; }
.tp-sub { color: var(--muted); font-size: .8rem; }
@media (max-width: 560px) { .trophy-pop { left: 1rem; right: 1rem; max-width: none; } }
/* ═════════ TORNEIO — tela de "passe o aparelho" ═════════ */
.tourn-hand {
text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.2rem 1rem;
background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.th-emoji { font-size: 3rem; animation: floaty 3s ease-in-out infinite; }
.tourn-names { display: grid; gap: .5rem; margin: .4rem 0; }
/* ═════════ FICHA DA POKÉDEX (evolução de→para) ═════════ */
.dex-slot.captured { cursor: pointer; }
.dex-entry { display: flex; flex-direction: column; gap: .9rem; }
.de-top { display: flex; align-items: center; gap: 1rem; }
.de-mon {
width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; padding: .4rem; border-radius: 14px;
background: radial-gradient(circle at 50% 30%, var(--panel-2), var(--bg)); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .5));
}
.de-mon.shiny { border: 1px solid #ffe27a; animation: shiny-glow 2s ease-in-out infinite; }
.de-num { font-family: var(--font-pixel); font-size: .6rem; color: var(--muted); }
.de-name { margin: .12rem 0; }
/* ═════════ QR DO PERFIL (trainer card) ═════════ */
/* Prévia do time no cartão (mesmos Pokémon que saem na imagem). */
.tc-mons { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .2rem; }
.tc-mon { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 58px; padding: .3rem .1rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.04); }
.tc-mon-img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.tc-mon-lv { font-size: .64rem; font-weight: 800; color: var(--muted); }
/* Ações do Trainer Card (modal): 5 botões → quebram linha e centralizam. */
.modal .actions.tc-actions { display: flex; flex-wrap: wrap; justify-content: center; }
.tc-qr { display: flex; align-items: center; gap: .8rem; padding: .7rem; border: 1px dashed var(--border); border-radius: 12px; }
.tc-qr-img { width: 90px; height: 90px; flex: 0 0 auto; background: #fff; border-radius: 8px; padding: 4px; }
/* ═════════ MODO SAFARI — Pokémon selvagens pelo portal ═════════ */
.wild-mon {
position: fixed; z-index: 30; width: 104px; height: 104px; cursor: pointer;
display: grid; place-items: center; touch-action: manipulation;
}
.wild-sprite {
width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); animation: wild-bob 1.2s ease-in-out infinite;
}
.wild-sprite.shiny { filter: drop-shadow(0 0 8px rgba(255, 226, 122, .85)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.wild-bang {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; color: var(--accent);
text-shadow: 0 0 6px rgba(0, 0, 0, .7); animation: wild-bang 1s ease-in-out infinite;
}
@keyframes wild-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wild-bang { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.35); } }
.wild-mon.flee { animation: wild-flee .4s ease forwards; }
@keyframes wild-flee { to { opacity: 0; transform: translateY(-24px) scale(.5); } }
/* Fuga após falhar a captura: o Pokémon "corre" para o lado, dá um pulinho e some. */
.wild-mon.flee-run .wild-bang { display: none; }
.wild-mon.flee-run .wild-sprite { animation: wild-flee-run .6s ease-in forwards; }
@keyframes wild-flee-run {
0% { transform: translateX(0) translateY(0) scaleX(1); }
25% { transform: translateX(24px) translateY(-10px) scaleX(-1); }
100% { transform: translateX(140px) translateY(6px) scaleX(-1); opacity: 0; }
}
.wild-mon.caught .wild-bang { display: none; }
.wild-mon.caught .wild-sprite { animation: wild-caught .7s ease forwards; }
@keyframes wild-caught { 0% { transform: scale(1); } 30% { transform: scale(1.2); } 100% { transform: scale(0); opacity: 0; filter: brightness(3); } }
/* ═════════ WHO'S THAT — digitar o nome + autocomplete ═════════ */
.wt-guess { display: flex; flex-direction: column; gap: .5rem; }
.wt-inputrow { display: flex; gap: .5rem; flex-wrap: wrap; }
.wt-input { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-align: center; letter-spacing: .02em; padding: .75rem 1rem; }
@media (max-width: 420px) {
.wt-inputrow { flex-direction: column; }
.wt-inputrow .wt-submit { width: 100%; }
}
.wt-submit { flex: 0 0 auto; }
.wt-sugg { display: flex; flex-direction: column; gap: .35rem; }
.wt-sopt {
display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%; padding: .45rem .7rem; border-radius: 10px;
border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
font-family: var(--font-display); font-weight: 700; transition: border-color .12s, background .12s, transform .06s;
animation: rise .18s ease both;
}
.wt-sopt:hover, .wt-sopt.hl { border-color: var(--brand-2); background: var(--panel-2); transform: translateX(3px); }
.wt-sopt-mon { width: 34px; height: 34px; flex: 0 0 auto; image-rendering: pixelated; }
/* ═════════ SAFARI — Pokébola arrastável (mira & arremesso) ═════════ */
.safari-ball {
position: fixed; z-index: 31; width: 48px; height: 48px; border-radius: 50%; cursor: grab; touch-action: none;
border: 3px solid #111; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
background: linear-gradient(#ff5a48 0 50%, #f6f7fb 50% 100%); animation: sb-idle 1.6s ease-in-out infinite;
}
/* Enquanto arrasta a Pokébola no celular, congela o scroll da página (senão o
gesto de arraste "puxa" a tela junto). Reforça o touch-action da bola. */
body.ball-dragging { overflow: hidden !important; overscroll-behavior: contain; touch-action: none; }
.wild-mon { touch-action: none; }
/* Overlay de escolha (parceiro/treinador): trava a rolagem por trás. */
body:has(.starter-overlay) { overflow: hidden; touch-action: none; }
.starter-overlay { touch-action: none; overscroll-behavior: contain; }
.safari-ball::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; background: #111; }
.safari-ball::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 3px solid #111; }
@keyframes sb-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.safari-ball.dragging { cursor: grabbing; animation: none; transform: scale(1.06); box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.safari-ball.thrown { animation: sb-thrown .16s ease forwards; }
@keyframes sb-thrown { to { transform: scale(.4) rotate(220deg); opacity: .3; } }
.safari-ball.miss { animation: sb-miss .26s ease; }
@keyframes sb-miss { 0%,100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-6px) rotate(-12deg); } 75% { transform: translateX(6px) rotate(12deg); } }
.safari-ball.flee { opacity: 0; transition: opacity .4s; }
/* Tipos de Pokébola: só a metade de cima muda de cor (upgrade do "catch"). */
.safari-ball.ball-great { background: linear-gradient(#2f7be0 0 50%, #f6f7fb 50% 100%); }
.safari-ball.ball-ultra { background: linear-gradient(#f5b301 0 50%, #f6f7fb 50% 100%); }
.safari-ball.ball-master { background: linear-gradient(#7a3cc4 0 50%, #f6f7fb 50% 100%); }
.safari-ball.ball-master::after { background: #ffd7f4; }
/* Pokédex-ball: azul com "lente" — arraste para escanear o selvagem. */
.safari-ball.pokedex-ball { background: linear-gradient(#e3350d 0 44%, #2f2f38 44% 100%); border-color: #111; }
.safari-ball.pokedex-ball::before { background: #111; }
.safari-ball.pokedex-ball::after { background: radial-gradient(circle at 38% 35%, #cdebff, #37a6e6 60%, #1c6fb0); border-color: #fff; width: 14px; height: 14px; }
/* Painel de scan — Pokédex "device" em RETRATO (estreita e centralizada) */
.modal:has(.dex-scan) { max-width: 330px; padding: 1rem; }
.ds-screen { background: linear-gradient(160deg, #e3350d, #b21f00); border: 2px solid #7a1204; border-radius: 14px; padding: .7rem; box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }
.ds-lights { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.ds-lens { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #cdebff, #37a6e6 55%, #1c6fb0); border: 3px solid #fff; box-shadow: 0 0 0 2px #7a1204; }
.ds-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.ds-dot.red { background: #ff5b5b; } .ds-dot.yellow { background: #ffd23f; } .ds-dot.green { background: #4fdd7a; }
/* Cabeçalho em COLUNA: sprite grande no topo, dados centralizados abaixo */
.ds-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; background: #dfe7cf; border: 2px solid #16351f; border-radius: 10px; padding: .7rem; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.ds-stage { width: 128px; height: 128px; display: grid; place-items: center; background: radial-gradient(circle at 50% 82%, rgba(0,0,0,.16), transparent 62%); }
.ds-sprite { width: 116px; height: 116px; image-rendering: pixelated; }
.ds-sprite.shiny { filter: drop-shadow(0 0 6px gold); }
.ds-head { min-width: 0; display: grid; justify-items: center; gap: .1rem; }
.ds-num { font-family: ui-monospace, "Courier New", monospace; font-size: .8rem; font-weight: 800; color: #3c5223; }
.ds-name { margin: 0 0 .4rem; font-size: 1.4rem; color: #16351f; }
.ds-block { margin-top: .55rem; background: #eef3e6; border: 2px solid #16351f; border-radius: 10px; padding: .55rem .7rem; }
.ds-lbl { display: block; text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #3c5223; margin-bottom: .4rem; }
.ds-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ds-tip { text-align: center; margin: .8rem 0 .2rem; }
.ds-chip { font-size: .8rem; font-weight: 800; padding: .22rem .7rem; border-radius: 999px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.2); }
.ds-chip.t-normal{background:#9099a1}.ds-chip.t-fire{background:#ff6b3d}.ds-chip.t-water{background:#4d90d5}
.ds-chip.t-grass{background:#63bb5b}.ds-chip.t-electric{background:#f2c945;color:#3a2f00;text-shadow:none}
.ds-chip.t-ice{background:#74cec0;color:#0d3a34;text-shadow:none}.ds-chip.t-fighting{background:#ce4069}
.ds-chip.t-poison{background:#ab6ac8}.ds-chip.t-ground{background:#d97845}.ds-chip.t-flying{background:#8fa9de}
.ds-chip.t-psychic{background:#f97176}.ds-chip.t-bug{background:#90c12c}.ds-chip.t-rock{background:#c7b78b;color:#2c2410;text-shadow:none}
.ds-chip.t-ghost{background:#5269ac}.ds-chip.t-dragon{background:#0a6dc4}
/* Pokémon "escapa" da bola: sacode e continua no lugar. */
.wild-mon.breakfree .wild-sprite { animation: wild-shake .48s ease; }
@keyframes wild-shake { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-6px) rotate(-8deg); } 60% { transform: translateX(6px) rotate(8deg); } }
/* ═════════ LINHA EVOLUTIVA (ficha da Pokédex) ═════════ */
.evo-line { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.evo-node { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem; border-radius: 10px; border: 1px solid transparent; }
.evo-node.cur { border-color: var(--accent); background: rgba(255, 203, 5, .08); }
.evo-node-mon { width: 56px; height: 56px; image-rendering: pixelated; }
.evo-node-nm { font-family: var(--font-display); font-weight: 700; font-size: .72rem; }
.evo-arrow { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--accent); font-weight: 800; cursor: pointer; }
.evo-arrow:hover { border-color: var(--brand-2); background: var(--panel); }
/* ═════════ BADGE DE EQUIPE (pódio / cartões / topo) ═════════ */
.team-badge {
display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem;
vertical-align: middle; margin-right: .35rem; border: 1.5px solid var(--tcol);
background: color-mix(in srgb, var(--tcol) 30%, transparent);
}
.tc-name { display: flex; align-items: center; gap: .1rem; }
.sr-who { display: flex; align-items: center; gap: .1rem; }
/* ═════════ DICA DE STAFF (aprendizado da mentoria) ═════════ */
.staff-tip {
display: flex; flex-direction: column; gap: .3rem; margin: 1rem auto 0; max-width: 560px; text-align: left;
padding: .9rem 1.1rem; border-radius: 12px; background: rgba(79, 140, 255, .08);
border: 1px solid var(--border); border-left: 4px solid var(--topic);
}
.st-badge { font-family: var(--font-display); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--topic); }
.st-text { margin: 0; line-height: 1.5; }
/* ═════════ RANKING DE SHINIES — você / busca / paginação ═════════ */
.lq-rank.me { border-color: var(--accent); background: rgba(255, 203, 5, .08); box-shadow: inset 0 0 0 1px rgba(255, 203, 5, .4); }
.sr-filter { width: 100%; margin-bottom: .3rem; }
.sr-more { text-align: center; margin-top: .5rem; }
/* ═════════ MINIGAME EDUCATIVO: QUEM É ESSE CASO? ═════════ */
.case-situation {
background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border);
border-left: 4px solid var(--topic); border-radius: 12px; padding: .9rem 1.1rem;
}
.case-text { margin: .3rem 0 0; font-size: 1.12rem; line-height: 1.5; }
.case-options { display: grid; gap: .6rem; }
.case-opt {
text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--text);
border-radius: 12px; padding: .9rem 1rem; cursor: pointer; font-size: .98rem; font-family: inherit;
transition: border-color .15s, background .15s, transform .06s;
}
.case-opt:not([disabled]):hover { border-color: var(--brand-2); background: var(--panel-2); transform: translateX(3px); }
.case-opt[disabled] { cursor: default; }
.case-opt.right { border-color: var(--call); background: rgba(33, 192, 122, .14); }
.case-opt.wrong { border-color: var(--brand); background: rgba(238, 21, 21, .14); }
.case-answer { display: flex; align-items: center; gap: .8rem; margin-top: .4rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.case-mon { width: 56px; height: 56px; flex: 0 0 auto; image-rendering: pixelated; }
/* ═════════ DICA DE STAFF DO DIA (topo da Mentoria) ═════════ */
.daily-tip {
display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-radius: 12px;
background: rgba(79, 140, 255, .08); border: 1px solid var(--border); border-left: 4px solid var(--topic); animation: rise .4s ease both;
}
/* ═════════ QUIZ-RELÂMPAGO DE REGRAS (certo/errado) ═════════ */
.flash-q { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: .9rem 1.1rem; }
.flash-text { margin: .3rem 0 0; font-size: 1.15rem; line-height: 1.5; }
.flash-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .4rem; }
.flash-yes, .flash-no { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; padding: .9rem 1rem; border-radius: 12px; }
.flash-yes { background: rgba(33, 192, 122, .16); color: #7CFC9B; border: 1px solid var(--call); }
.flash-yes:not([disabled]):hover { background: rgba(33, 192, 122, .26); }
.flash-no { background: rgba(238, 21, 21, .16); color: #ff9c8b; border: 1px solid var(--brand); }
.flash-no:not([disabled]):hover { background: rgba(238, 21, 21, .26); }
.flash-modal { display: flex; flex-direction: column; gap: .7rem; }
.flash-fb { min-height: 1.1rem; text-align: center; font-weight: 700; }
.flash-fb.ok { color: var(--call); } .flash-fb.no { color: var(--deadline); }
/* ═════════ GALERIA DE CONQUISTAS ═════════ */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-height: 60vh; overflow-y: auto; padding-right: .2rem; }
@media (max-width: 560px) { .ach-grid { grid-template-columns: 1fr; } }
.ach-card {
display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px;
border: 1px solid var(--border); background: var(--bg);
}
.ach-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 203, 5, .3); }
.ach-card.off { opacity: .6; filter: grayscale(.7); }
.ach-ico { font-size: 1.6rem; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--panel-2); }
.ach-card.on .ach-ico { background: radial-gradient(circle at 50% 30%, #ffe27a, var(--accent)); }
.ach-body { flex: 1; min-width: 0; }
.ach-title { font-family: var(--font-display); font-weight: 800; font-size: .92rem; }
.ach-sub { color: var(--muted); font-size: .78rem; }
.ach-state { flex: 0 0 auto; font-weight: 800; color: var(--muted); }
.ach-card.on .ach-state { color: var(--call); }
/* ═════════ RELATÓRIO DE APRENDIZADO (perfil do mentorado) ═════════ */
.lr-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.lr-period { padding: .3rem .5rem; font-size: .82rem; width: auto; }
.why-inp { border-left: 3px solid var(--accent); }
.lr-list { display: flex; flex-direction: column; gap: .4rem; }
.lr-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: .6rem; }
.lr-name { font-size: .82rem; }
.lr-bar { height: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lr-fill { height: 100%; border-radius: 999px; }
.lr-fill.good { background: linear-gradient(90deg, #2ecc71, #7CFC9B); }
.lr-fill.mid { background: linear-gradient(90deg, #d1b83a, var(--accent)); }
.lr-fill.low { background: linear-gradient(90deg, var(--deadline), var(--brand)); }
.lr-val { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.lr-idle { opacity: .55; }
/* Linha do mentorado em foco dentro do relatório da turma */
.lr-me {
position: relative; opacity: 1; padding: .3rem .5rem; margin: 0 -.5rem;
border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.lr-me .lr-name { font-weight: 700; color: var(--text); }
/* Painel "Quem está em risco" */
.risk-list { display: flex; flex-direction: column; gap: .5rem; }
.risk-card {
display: flex; align-items: center; justify-content: space-between; gap: .8rem;
padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); border-left-width: 4px;
}
.risk-card.risk-alto { border-left-color: var(--deadline, #e05a5a); }
.risk-card.risk-médio { border-left-color: var(--accent, #d1b83a); }
.risk-card.risk-baixo { border-left-color: #2ecc71; }
.risk-main { min-width: 0; }
.risk-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.risk-name { font-weight: 700; }
.risk-level { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.risk-reasons { font-size: .8rem; color: var(--text); margin-top: .15rem; }
.risk-actions { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* #103 Presença online */
.presence-list { display: flex; flex-direction: column; gap: .35rem; }
.presence-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.presence-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px #2ecc71; flex: 0 0 auto; }
/* #99 Reações ao vivo */
.react-dock { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: flex; align-items: flex-end; gap: .4rem; }
.react-fab { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.react-panel { display: flex; gap: .2rem; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .4rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.react-panel.hidden { display: none; }
.react-btn { border: none; background: transparent; font-size: 1.3rem; cursor: pointer; padding: .1rem .2rem; transition: transform .1s; }
.react-btn:hover { transform: scale(1.3); }
.react-float { position: fixed; bottom: 4rem; font-size: 2rem; pointer-events: none; z-index: 59; animation: react-rise 2.5s ease-out forwards; }
@keyframes react-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-42vh) scale(1.3); } }
@media (prefers-reduced-motion: reduce), (max-width: 560px) { .react-dock { bottom: .6rem; left: .6rem; } }
/* #150 Chefe da semana */
.wboss-arena { text-align: center; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.wboss-arena.won { border-color: var(--call); background: rgba(80,220,120,.1); }
.wboss-sprite { width: 120px; height: 120px; image-rendering: pixelated; }
.wboss-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.wboss-hp { height: 16px; margin: .5rem 0 .3rem; }
.wboss-banner { font-weight: 800; color: var(--call); margin-top: .6rem; }
.wboss-banner.lost { color: var(--deadline); }
.wboss-you { text-align: center; font-weight: 700; margin: .5rem 0; }
.wboss-top { display: flex; flex-direction: column; gap: .2rem; }
.wboss-top-row { display: flex; justify-content: space-between; padding: .2rem .4rem; border-bottom: 1px dashed var(--border); }
.wboss-challenge { display: grid; gap: .55rem; margin-top: .7rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel-2)); }
.wboss-question { margin: 0; font-weight: 800; line-height: 1.35; }
.wboss-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.wboss-option { display: flex; align-items: flex-start; gap: .4rem; padding: .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; font-size: .78rem; line-height: 1.3; }
.wboss-option:hover, .wboss-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.wboss-option > span:first-child { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); color: var(--accent); font: 900 .65rem var(--font-mono); }
.wboss-feedback { display: grid; gap: .2rem; padding: .55rem; border-radius: 10px; background: var(--panel-2); font-size: .78rem; line-height: 1.35; }
.wboss-feedback.ok { border-left: 3px solid var(--call); }
.wboss-feedback.bad { border-left: 3px solid var(--deadline); }
.wboss-new, .sgroup-new { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .4rem; }
.wboss-new-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
/* Expedições educativas Gen I–III */
.dungeon-modal { display: grid; gap: .85rem; max-height: 78vh; overflow-y: auto; color: var(--text); }
.dungeon-intro { padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel-2)); }
.dungeon-intro h3 { margin: .25rem 0 .2rem; font: 900 clamp(1.2rem, 2.5vw, 1.7rem) var(--font-display); }
.dungeon-intro p { max-width: 68ch; margin: 0; }
.dungeon-campaign { display: grid; gap: .45rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand-2) 8%, var(--panel)), var(--panel-2)); }
.dungeon-campaign.ready { border-color: color-mix(in srgb, var(--accent) 62%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel-2)); }
.dungeon-campaign.claimed { border-color: color-mix(in srgb, var(--call) 50%, var(--border)); }
.dungeon-campaign-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.dungeon-campaign-head > div { display: grid; gap: .08rem; min-width: 0; }
.dungeon-campaign-head strong { color: var(--text); font-size: .78rem; }
.dungeon-campaign-head b { color: var(--accent); font: 900 .72rem var(--font-mono); }
.dungeon-campaign-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font-size: 1.05rem; }
.dungeon-campaign-bar { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); }
.dungeon-campaign-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--accent)); transition: width .25s ease; }
.dungeon-campaign-reward { color: var(--accent); }
.dungeon-campaign-banner { display: grid; gap: .15rem; width: min(100%, 680px); margin-top: .35rem; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); text-align: left; }
.dungeon-campaign-banner.claimed { border-color: color-mix(in srgb, var(--call) 55%, var(--border)); background: color-mix(in srgb, var(--call) 8%, var(--panel)); }
.dungeon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.dungeon-card { display: flex; min-width: 0; flex-direction: column; gap: .35rem; padding: .75rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(160deg, var(--panel-2), var(--bg)); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.dungeon-card:hover { border-color: var(--accent); transform: translateY(-2px); transition: .16s ease; }
.dungeon-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.dungeon-card-sprite { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)); }
.dungeon-gen { padding: .18rem .4rem; border: 1px solid var(--border); border-radius: 999px; font: 800 .62rem var(--font-mono); color: var(--accent); }
.dungeon-card h4 { margin: .1rem 0 0; font: 900 1rem var(--font-display); }
.dungeon-card p { min-height: 3.1em; margin: 0; line-height: 1.35; }
.dungeon-card-stats { display: grid; gap: .18rem; min-height: 2.45em; padding: .38rem .45rem; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); font-size: .68rem; color: var(--muted); }
.dungeon-card-focus { color: var(--accent); font-weight: 800; }
.dungeon-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .45rem; border-top: 1px dashed var(--border); font-size: .72rem; color: var(--muted); }
.dungeon-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel-2)); }
.dungeon-head-copy { min-width: 0; }
.dungeon-head h3 { margin: .15rem 0 .2rem; font: 900 clamp(1.15rem, 2.5vw, 1.55rem) var(--font-display); }
.dungeon-head p { margin: 0; }
.dungeon-sprite { width: 82px; height: 82px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 5px rgba(0,0,0,.3)); }
.dungeon-step { display: grid; gap: .55rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2); }
.dungeon-step-line { display: flex; justify-content: space-between; font: 800 .75rem var(--font-mono); color: var(--muted); }
.dungeon-progress { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.dungeon-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.dungeon-question { margin: 0; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.35; }
.dungeon-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.dungeon-option { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--panel); text-align: left; cursor: pointer; line-height: 1.35; }
.dungeon-option:hover:not(:disabled), .dungeon-option.chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.dungeon-option:disabled { opacity: .7; cursor: wait; }
.dungeon-option-letter { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); color: var(--accent); font: 900 .7rem var(--font-mono); }
.dungeon-feedback { display: grid; gap: .35rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.dungeon-feedback.ok { border-color: color-mix(in srgb, var(--call) 65%, var(--border)); }
.dungeon-feedback.bad { border-color: color-mix(in srgb, var(--deadline) 65%, var(--border)); }
.dungeon-feedback span { line-height: 1.4; }
.dungeon-complete { display: grid; justify-items: center; gap: .35rem; padding: 1.7rem 1rem; border: 1px solid color-mix(in srgb, var(--call) 60%, var(--border)); border-radius: 18px; background: linear-gradient(150deg, rgba(65,190,110,.14), var(--panel-2)); text-align: center; }
.dungeon-complete h3, .dungeon-complete p { margin: 0; }
.dungeon-complete-badge { font-size: 2.8rem; filter: drop-shadow(0 4px 5px rgba(255,203,5,.3)); }
.dungeon-reward { color: var(--accent); font-size: 1.05rem; }
.dungeon-note { margin: 0; text-align: center; }
.dungeon-review { display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--panel-2), var(--bg)); }
.dungeon-review-head { display: grid; gap: .12rem; padding-bottom: .35rem; border-bottom: 1px dashed var(--border); }
.dungeon-review-head strong { font: 900 1.05rem var(--font-display); }
.dungeon-review-filter { justify-self: start; margin-top: .2rem; }
.dungeon-review-empty { padding: .75rem; border: 1px dashed color-mix(in srgb, var(--call) 50%, var(--border)); border-radius: 12px; color: var(--call); background: color-mix(in srgb, var(--call) 7%, var(--panel)); text-align: center; }
.dungeon-review-row { display: grid; gap: .22rem; padding: .65rem .7rem; border: 1px solid var(--border); border-left: 3px solid var(--call); border-radius: 12px; background: var(--panel); }
.dungeon-review-row.bad { border-left-color: var(--deadline); }
.dungeon-review-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.dungeon-review-prompt { line-height: 1.35; }
.dungeon-review-expected { color: var(--accent); font-weight: 800; }
.lq-reward { margin: .55rem auto; padding: .45rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); color: var(--accent); font-weight: 800; }
.boss-review { display: grid; gap: .42rem; width: min(100%, 720px); padding: .75rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel-2)); text-align: left; }
.boss-review > strong { color: var(--text); font: 900 1rem var(--font-display); }
.boss-review-item { display: grid; gap: .22rem; padding: .55rem .6rem; border-left: 3px solid var(--deadline); border-radius: 10px; background: var(--panel); }
.boss-review-item strong { color: var(--text); line-height: 1.3; }
.boss-review-expected { color: var(--accent); font-weight: 800; }
.ah-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .65rem; margin-top: .55rem; }
.ah-actions .small { color: color-mix(in srgb, var(--text) 70%, var(--muted)); }
.modal:has(.dungeon-modal) { width: min(980px, calc(100vw - 1rem)); max-width: 980px; padding: 1rem; }
@media (max-width: 760px) {
.dungeon-grid { grid-template-columns: 1fr; }
.dungeon-card p { min-height: 0; }
.dungeon-head { grid-template-columns: auto minmax(0, 1fr); }
.dungeon-head > .btn { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 520px) {
.modal:has(.dungeon-modal) { width: calc(100vw - .65rem); padding: .72rem; }
.wboss-options { grid-template-columns: 1fr; }
.dungeon-modal { max-height: 81vh; }
.dungeon-options { grid-template-columns: 1fr; }
.dungeon-sprite { width: 64px; height: 64px; }
.dungeon-card-sprite { width: 66px; height: 66px; }
}
/* #112 Grupos de estudo */
.sgroup-modal { display: flex; flex-direction: column; gap: .5rem; max-height: 46vh; overflow-y: auto; }
.sgroup-card { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; background: var(--bg); }
.sgroup-head { display: flex; justify-content: space-between; align-items: baseline; }
.sgroup-members { color: var(--muted); font-weight: 700; }
.sgroup-actions { display: flex; gap: .4rem; margin-top: .4rem; }
/* #114 Álbum coletivo */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .3rem; }
.album-cell { padding: .15rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.album-cell.stuck { border-color: var(--call); background: rgba(80,220,120,.12); }
.album-cell.can { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255,203,5,.35) inset; cursor: pointer; }
.album-sprite { width: 100%; height: 100%; image-rendering: pixelated; }
.album-sprite.silhouette { filter: brightness(0) opacity(.35); }
/* #106 Perfil público (fora do app) */
.public-card { max-width: 380px; margin: 8vh auto; text-align: center; padding: 1.6rem; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.public-badge { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.public-card h2 { margin: .4rem 0 .1rem; }
.public-role { color: var(--muted); }
.public-status { font-style: italic; }
.public-stats { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .8rem 0 1.2rem; }
.public-stat { padding: .3rem .7rem; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); font-weight: 700; font-size: .82rem; }
.share-url { width: 100%; font-family: var(--font-mono, monospace); font-size: .82rem; }
/* #89 Passe de temporada */
.pass-modal { display: flex; flex-direction: column; gap: .7rem; }
.pass-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pass-next-top { display: flex; justify-content: space-between; margin-bottom: .25rem; }
.pass-track { display: flex; flex-direction: column; gap: .4rem; max-height: 46vh; overflow-y: auto; }
.pass-tier { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); opacity: .6; }
.pass-tier.on { opacity: 1; border-left: 3px solid var(--call); }
.pass-tier.final { border-color: var(--brand); }
.pass-tier.final.on { box-shadow: 0 0 0 1px rgba(255,203,5,.4) inset; }
.pass-tier-n { font-family: var(--font-display); font-weight: 800; }
.pass-reward { font-weight: 600; }
.pass-lock, .pass-claimed { font-size: .8rem; color: var(--muted); }
.pass-claimed { color: var(--call); font-weight: 700; }
/* #107 Padrinho & Afilhados */
.buddy-modal { display: flex; flex-direction: column; gap: .6rem; }
.buddy-card { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; background: var(--bg); border-left: 4px solid var(--brand); }
.buddy-head { display: flex; align-items: baseline; gap: .5rem; }
.buddy-role { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.buddy-meta { margin-top: .5rem; }
.buddy-meta-top { display: flex; justify-content: space-between; margin-bottom: .25rem; }
.buddy-meta-val { font-weight: 800; font-family: var(--font-display); }
.buddy-assign { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; }
.buddy-sel { min-width: 9rem; }
.buddy-list { display: flex; flex-direction: column; gap: .4rem; max-height: 40vh; overflow-y: auto; }
.buddy-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
/* #127 Comparativo de turmas */
.cmp-list { display: flex; flex-direction: column; gap: .6rem; }
.cmp-card { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; background: var(--bg); }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.cmp-bar { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin-bottom: .5rem; }
.cmp-fill { height: 100%; border-radius: 999px; background: var(--brand); }
.cmp-fill.good { background: var(--call, #2ecc71); }
.cmp-fill.mid { background: var(--accent, #d1b83a); }
.cmp-fill.low { background: var(--deadline, #e05a5a); }
.cmp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.cmp-stat { text-align: center; background: var(--panel-2); border-radius: 8px; padding: .35rem .2rem; }
.cmp-stat-v { display: block; font-family: var(--font-display); font-weight: 800; }
.cmp-stat-l { display: block; font-size: .68rem; color: var(--muted); }
@media (max-width: 520px) { .cmp-stats { grid-template-columns: repeat(2, 1fr); } }
/* #117 Notificações + menções */
.notif-btn { position: relative; }
#notif-badge { position: absolute; top: -4px; right: -4px; }
.notif-list { display: flex; flex-direction: column; gap: .4rem; }
/* É um