/* legado cabeca, linha 169 do index.html original.
   Gerado pelo divisor. Nao editar a mao: quando esta tela
   for remodelada, este arquivo some inteiro. */

/* ═══════════════════════════════════════════════
   VARIÁVEIS MASTER
═══════════════════════════════════════════════ */
:root {
    --panel-bg: rgba(31, 40, 51, 0.7);
    --text-color: #7fe3dc;
    --accent: #45a29e;
    --danger: #ff4757;
    --primary: #00f2ff;
    --primary-glow: rgba(0, 242, 255, 0.10);
    --bg-deep: #050508;
    --glass: rgba(10, 10, 15, 0.65);
    --glass-border: rgba(255, 255, 255, 0.09);
    --gold: #e8b73a;
    --silver: #e0e6ed;
    --bronze: #cd7f32;
    --card-radius: 12px;
    --font-title: 'Barlow Condensed', 'Teko', sans-serif;
    --font-main: 'Barlow Condensed', 'Russo One', sans-serif;
    --font-body: 'Barlow', 'Chakra Petch', sans-serif;
    --font-tech: 'Barlow Semi Condensed', 'Rajdhani', sans-serif;
    --top10-grad-color: #050508;
    /* Theme extras */
    --theme-scanline: rgba(0,242,255,0.03);
    --theme-grid: rgba(0,242,255,0.04);
    --lobby-btn-glow: rgba(0,242,255,0.10);
    --lobby-btn-border: rgba(0,242,255,0.12);
    --lobby-btn-bg: rgba(10,18,28,0.85);
}

/* ═══════ CURSOR ═══════ */
html, body, * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='font-size:20px'%3E%3Ctext y='20'%3E%E2%9A%BD%3C/text%3E%3C/svg%3E"), auto !important;
    margin: 0; padding: 0; box-sizing: border-box; user-select: none;
}
.btn, .main-btn, .card-container, .card-slot, button, select, input,
.tag-del, .tag-edit, .btn-x, .btn-circle-config, label, .pos-chip, .kbd-badge {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' style='font-size:24px'%3E%3Ctext y='24'%3E%E2%9A%BD%3C/text%3E%3C/svg%3E"), pointer !important;
}

/* ═══════════════════════════════════
   TEMA BASE
═══════════════════════════════════ */
body {
    background-color: var(--bg-deep);
    background-attachment: fixed;
    color: #c5c6c7;
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─────────────────────────────────────
   TEMA 1: MIDNIGHT — Scanner/HUD
   Ciano frio, scanlines sutis, grid HUD
───────────────────────────────────── */
body.theme-midnight {
    --text-color: #00ffe7;
    --primary: #00f2ff;
    --primary-glow: rgba(0, 242, 255, 0.12);
    --lobby-btn-glow: rgba(0,242,255,0.12);
    --lobby-btn-border: rgba(0,242,255,0.12);
    --lobby-btn-bg: rgba(4,12,20,0.9);
    background-color: #020408;
    /* 16/08: a grade fina fica (é textura); saiu o glow radial do topo. */
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,242,255,0.04) 39px, rgba(0,242,255,0.04) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(0,242,255,0.03) 79px, rgba(0,242,255,0.03) 80px),
        linear-gradient(180deg, #050a12 0%, #030710 55%, #020408 100%);
}
body.theme-midnight::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
    pointer-events: none;
    z-index: 0;
}
body.theme-midnight .tier-header,
body.theme-midnight .config-container,
body.theme-midnight .review-card-area {
    background: rgba(4,10,18,0.88);
    border-color: rgba(0,242,255,0.12);
    box-shadow: 0 0 0 1px rgba(0,242,255,0.05), 0 20px 60px rgba(0,0,0,0.8);
}

/* ─────────────────────────────────────
   TEMA 2: FC26 — EA Sports Estádio
   Azul cobalto vibrante, branco, fundo de campo
───────────────────────────────────── */
body.theme-fc26 {
    --text-color: #60d0ff;
    --primary: #0090ff;
    --primary-glow: rgba(0,144,255,0.12);   /* 16/08: era 0.65 — o tema atropelava o :root */
    --accent: #0057e7;
    --lobby-btn-glow: rgba(0,144,255,0.12); /* 16/08: era 0.5 */
    --lobby-btn-border: rgba(0,144,255,0.4);
    --lobby-btn-bg: rgba(2,8,22,0.92);
    background-color: #020510;
    /* 16/08: saíram os dois glows radiais; fica só a base azul do tema. */
    background-image:
        linear-gradient(180deg, #020510 0%, #030a1a 40%, #050d22 100%);
}
body.theme-fc26::after {
    content: '';
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 45vh;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 48px,
        rgba(0,80,200,0.04) 48px,
        rgba(0,80,200,0.04) 50px
    );
    pointer-events: none;
    z-index: 0;
}
body.theme-fc26 .tier-header,
body.theme-fc26 .config-container,
body.theme-fc26 .review-card-area {
    background: rgba(2,6,18,0.9);
    border-color: rgba(26,127,255,0.2);
    box-shadow: 0 0 0 1px rgba(26,127,255,0.07), 0 20px 60px rgba(0,0,0,0.9);
}

/* ─────────────────────────────────────
   TEMA 3: GOLD — Boss VIP / Luxo
   Preto fosco pesado, ouro quente, partículas âmbar
───────────────────────────────────── */
body.theme-gold {
    --text-color: #edc36a;                  /* 16/08: era #ffd060 */
    --primary: #e8a000;
    --primary-glow: rgba(232,160,0,0.12);   /* 16/08: era 0.5 */
    --accent: #b37800;
    --gold: #e8b73a;                        /* 16/08: era #ffd060 */
    --lobby-btn-glow: rgba(232,160,0,0.12); /* 16/08: era 0.4 */
    --lobby-btn-border: rgba(232,160,0,0.25);
    --lobby-btn-bg: rgba(10,7,0,0.95);
    background-color: #080600;
    /* 16/08: saíram os três glows radiais; fica a base quente do tema. */
    background-image:
        linear-gradient(160deg, #0a0800 0%, #060400 50%, #030200 100%);
}
body.theme-gold::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}
body.theme-gold .tier-header,
body.theme-gold .config-container,
body.theme-gold .review-card-area {
    background: rgba(10,7,2,0.92);
    border-color: rgba(232,160,0,0.2);
    box-shadow: 0 0 0 1px rgba(232,160,0,0.06), inset 0 1px 0 rgba(232,160,0,0.08), 0 20px 60px rgba(0,0,0,0.9);
}

/* ─────────────────────────────────────
   TEMA 4: COPA DO MUNDO — Verde Amarelo
   Gramado vibrante, verde-amarelo, luz de estádio
───────────────────────────────────── */
body.theme-copa {
    --text-color: #f0d24d;                  /* 16/08: era #ffe600, amarelo puro */
    --primary: #00c84b;
    --primary-glow: rgba(0,200,75,0.12);    /* 16/08: era 0.55 */
    --accent: #009933;
    --gold: #e8b73a;                        /* 16/08: era #ffe600 */
    --lobby-btn-glow: rgba(0,200,75,0.12);  /* 16/08: era 0.45 */
    --lobby-btn-border: rgba(0,200,75,0.35);
    --lobby-btn-bg: rgba(0,10,4,0.88);
    background-color: #010a02;
    /* 16/08: saíram os três glows radiais (o verde do topo era o mais forte do app);
       fica a base verde-escura, que é a identidade do tema. */
    background-image:
        linear-gradient(170deg, #010a02 0%, #010802 50%, #020b02 100%);
}
body.theme-copa::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 44px,
            rgba(0,180,50,0.025) 44px,
            rgba(0,180,50,0.025) 46px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 44px,
            rgba(0,180,50,0.015) 44px,
            rgba(0,180,50,0.015) 46px
        );
    pointer-events: none;
    z-index: 0;
}
body.theme-copa .tier-header,
body.theme-copa .config-container,
body.theme-copa .review-card-area {
    background: rgba(0,8,2,0.9);
    border-color: rgba(0,200,75,0.2);
    box-shadow: 0 0 0 1px rgba(0,200,75,0.06), inset 0 1px 0 rgba(255,230,0,0.06), 0 20px 60px rgba(0,0,0,0.9);
}
body.theme-copa .main-btn { border-color: rgba(0,200,75,0.3); }
body.theme-copa .main-btn:hover { border-color: #ffe600; box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 40px rgba(0,200,75,0.3); }
body.theme-copa .btn-gold { background: linear-gradient(135deg,#009933,#ffe600); color:#000; }
body.theme-copa .pos-chip.selected { background:var(--primary); border-color:var(--primary); color:#000; box-shadow:0 0 12px var(--primary-glow); }
body.theme-copa .lobby-stat-card { border-color: rgba(0,200,75,0.2); }
body.theme-copa .lobby-stat-card:hover { border-color:#ffe600; }
/* ═══════ ANTI-LAG DO TECLADO ═══════ */
/* Quando qualquer input está focado, desativa efeitos pesados */
body.keyboard-open #particles-bg { visibility:hidden; }
body.keyboard-open .particle { animation:none !important; }
body.keyboard-open .montar-filter-bar,
body.keyboard-open .tier-header,
body.keyboard-open .tier-controls-collapsible { backdrop-filter:none !important; }

/* ═══════ GRÃO DE FUNDO (16/08/2026) ═══════
   Esta camada era o berço das 32 partículas animadas. Agora ela carrega um GRÃO
   ESTÁTICO — ruído fino, do tipo que dá textura de impresso. Troca movimento por
   material: custo zero de CPU/bateria e o fundo para de parecer protetor de tela.
   O ruído é um SVG inline (feTurbulence), então não baixa arquivo nenhum.
   A mesma técnica já era usada no theme-gold; agora vale para todos os temas.     */
#particles-bg {
    position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1;
    overflow:hidden; pointer-events:none;
    /* GRÃO DESLIGADO em 16/08/2026 (2ª rodada) — a 0.5 ele deixava o app com cara
       de "sujo": ruído por cima da tela inteira. Fundo chapado é mais nítido.
       Pra trazer textura de volta, descomentar com valor BAIXO (0.12–0.18, nunca 0.5). */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
       background-size: 160px 160px;
       opacity: .15; */
}
.particle { position:absolute; background:var(--primary); border-radius:50%; opacity:0; animation:floatUp linear infinite; box-shadow:0 0 10px var(--primary), 0 0 20px var(--primary); }
.particle.p-cross { border-radius:0; clip-path:polygon(40% 0%,60% 0%,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%); background:var(--text-color); box-shadow:none; }
.particle.p-diamond { border-radius:0; clip-path:polygon(50% 0%,100% 50%,50% 100%,0 50%); background:var(--text-color); box-shadow:none; }
@keyframes floatUp { 0%{transform:translateY(100vh) scale(0) rotate(0deg);opacity:0}15%{opacity:0.7}75%{opacity:0.5}100%{transform:translateY(-10vh) scale(1.5) rotate(180deg);opacity:0} }

/* ═══════ BOTÕES GERAIS ═══════ */
.btn { background:#1e2830; color:white; border:1px solid #3c4a5c; padding:9px 18px; font-family:var(--font-body); text-transform:uppercase; border-radius:6px; transition:all 0.2s; font-size:0.78rem; font-weight:700; display:flex; align-items:center; gap:6px; justify-content:center; backdrop-filter:blur(5px); letter-spacing:.5px; }
.btn:hover { background:#2e3d4d; border-color:var(--text-color); box-shadow:0 0 12px var(--primary-glow); transform:translateY(-2px); }
.btn:active { transform:scale(0.97); }
.btn-gold { background:linear-gradient(135deg,#c9a800,#ffcc00); color:#000; border:none; font-weight:900; }
.btn-gold:hover { filter:brightness(1.1); box-shadow:0 0 16px rgba(255,204,0,0.5); }
.btn-danger { background:rgba(255,71,87,0.1); color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:white; }
.btn-success { background:rgba(0,255,150,0.12); color:#00ff96; border-color:#00ff96; }
.btn-success:hover { background:#00ff96; color:#000; }
/* safe-area: no iPhone instalado o topo/lateral fica sob a barra de status (toque é engolido pelo iOS).
   Fora do iOS env() vale 0px → geometria idêntica à de sempre. z-index 400 = acima do breadcrumb (300). */
.btn-circle-config { position:fixed; top:calc(18px + env(safe-area-inset-top, 0px)); right:calc(18px + env(safe-area-inset-right, 0px)); width:38px; height:38px; border-radius:50%; border:1px solid var(--lobby-btn-border); background:var(--lobby-btn-bg); color:var(--text-color); font-size:0.95rem; display:flex; align-items:center; justify-content:center; transition:0.3s; box-shadow:0 0 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); z-index:400; }
.btn-circle-config:hover { background:var(--text-color); color:#000; transform:rotate(90deg); box-shadow:0 0 20px var(--primary-glow); }

/* ═══════ TOAST ═══════ */
#toast-container { position:fixed; bottom:30px; right:30px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background:rgba(10,12,20,0.95); border:1px solid var(--glass-border); border-left:3px solid var(--primary); color:#fff; padding:12px 20px; border-radius:8px; font-family:var(--font-tech); font-size:1rem; letter-spacing:.5px; animation:toastIn 0.3s ease; backdrop-filter:blur(15px); box-shadow:0 8px 30px rgba(0,0,0,0.6); }
.toast.toast-ok { border-left-color:#00ff96; }
.toast.toast-err { border-left-color:var(--danger); }
.toast.toast-warn { border-left-color:var(--gold); }
.toast.toast-out { animation:toastOut 0.3s ease forwards; }
@keyframes toastIn { from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)} }

/* ═══════ MODAL CONFIRM ═══════ */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:5000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
#modal-overlay.active { display:flex; }
.modal-box { background:#0e1117; border:1px solid var(--glass-border); border-radius:14px; padding:36px 40px; max-width:440px; width:90%; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,0.8); }
.modal-box h3 { font-family:var(--font-main); color:var(--text-color); font-size:1.3rem; margin-bottom:12px; }
.modal-box p { color:#aaa; font-family:var(--font-tech); margin-bottom:28px; font-size:1.1rem; line-height:1.5; }
.modal-actions { display:flex; gap:12px; justify-content:center; }

/* ═══════ SCREENS ═══════ */
.screen { display:none; opacity:0; width:100%; max-width:1600px; padding:36px 40px; min-height:100vh; flex-direction:column; align-items:center; position:relative; }
.screen.active { display:flex; opacity:1; animation:fadeIn 0.35s ease forwards; }
.screen.fade-out { display:flex; animation:fadeOut 0.25s ease forwards; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeOut { from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)} }

/* ═══════════════════════════════════
   LOBBY REDESIGN
═══════════════════════════════════ */
#screen-lobby { justify-content: flex-start; padding-top: 48px; }

/* ─── Logo ─── */
.lobby-header-wrap { width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; position: relative; }
.app-logo { font-family:var(--font-title); font-size:3.5rem; color:var(--text-color); text-shadow:0 0 30px var(--primary-glow); letter-spacing:5px; text-align:center; line-height:1; max-height:105px; display:flex; justify-content:center; position: relative; }
.app-logo img { max-height:84px; object-fit:contain; filter:drop-shadow(0 0 20px var(--primary-glow)); }
/* Glitch effect on logo hover */
.app-logo-text { position: relative; display: inline-block; }
.app-logo-text::before, .app-logo-text::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0;
}
.app-logo-text:hover::before {
    animation: glitchTop 0.4s steps(2) forwards;
    color: #ff00aa; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translateX(-3px);
}
.app-logo-text:hover::after {
    animation: glitchBot 0.4s steps(2) 0.05s forwards;
    color: #00f2ff; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translateX(3px);
}
@keyframes glitchTop { 0%,100%{opacity:0} 20%,80%{opacity:0.9} }
@keyframes glitchBot { 0%,100%{opacity:0} 30%,70%{opacity:0.9} }

.lobby-subtitle { font-family: var(--font-tech); font-size: 0.78rem; letter-spacing: 6px; opacity: 0.35; margin-top: 6px; text-transform: uppercase; color: var(--text-color); }

/* Linha decorativa abaixo do logo */
.lobby-divider { width: 360px; height: 1px; margin: 20px auto 0; background: linear-gradient(90deg, transparent, var(--primary), var(--text-color), var(--primary), transparent); opacity: 0.4; position: relative; }
.lobby-divider::before { content: ''; position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); }

/* ─── Grid de botões ─── */
.lobby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: row dense;
    gap: 16px;
    max-width: 1100px;
    width: 100%;
}

/* Botão principal grande ocupa 1 linha à esquerda */
.main-btn {
    background: var(--lobby-btn-bg);
    border: 1px solid var(--lobby-btn-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 28px 32px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    min-height: 160px;
}
.main-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
    pointer-events: none;
}
/* Corner accent top-right */
.main-btn::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: linear-gradient(225deg, var(--lobby-btn-border) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.main-btn:hover {
    border-color: var(--text-color);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px var(--lobby-btn-border), 0 0 40px var(--lobby-btn-glow);
}
.main-btn:hover::after { opacity: 1; }

/* Ícone grande no fundo do card */
.main-btn .btn-bg-icon {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    font-size: 5.5rem;
    opacity: 0.07;
    pointer-events: none;
    transition: all 0.4s;
    line-height: 1;
}
.main-btn:hover .btn-bg-icon { opacity: 0.13; transform: translateY(-50%) scale(1.1); }

/* Etiqueta de categoria (topo) */
.main-btn .btn-category {
    font-family: var(--font-tech);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-color);
    opacity: 0.5;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.main-btn .btn-category::before {
    content: '';
    display: inline-block;
    width: 18px; height: 1px;
    background: var(--text-color);
    opacity: 0.6;
}
/* Título do botão */
.main-btn .btn-title {
    font-family: var(--font-main);
    font-size: 1.45rem;
    letter-spacing: 2px;
    color: white;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
/* Descrição */
.main-btn .btn-desc {
    font-family: var(--font-tech);
    font-size: 0.82rem;
    color: #666;
    letter-spacing: 0.5px;
    margin-top: 6px;
}
/* Badge (anel de pendentes) */
.main-btn .pending-badge { position:absolute; top:16px; right:16px; }

/* Botão HERO (novas cartas) — maior */
.main-btn.btn-hero {
    grid-row: span 2;
    min-height: 336px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 36px;
    background: var(--lobby-btn-bg);
    border-color: var(--text-color);
    border-width: 1px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.main-btn.btn-hero .btn-bg-icon {
    font-size: 9rem;
    right: -10px;
    top: 55%;
    opacity: 0.06;
}
.main-btn.btn-hero:hover .btn-bg-icon { opacity: 0.12; }
.main-btn.btn-hero .btn-title { font-size: 2rem; }

/* Viewer: ÚLTIMAS NOTÍCIAS — célula normal, do mesmo tamanho dos demais */
.main-btn.btn-noticias {
    justify-content: flex-end;
    cursor: pointer;
}
.main-btn.btn-noticias .btn-title {
    color: var(--text-color);
    text-shadow: 0 0 20px var(--primary-glow);
}
.main-btn.btn-noticias .btn-category { opacity: 0.7; }

/* Linha de status no hero */
.btn-hero-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.3);
}
.btn-hero-footer span { font-family: var(--font-tech); font-size: 0.78rem; color: #555; letter-spacing: 1px; }
.btn-hero-footer strong { color: var(--text-color); }

/* ─── Barra de stats no lobby ─── */
.lobby-stats-bar {
    width: 100%;
    max-width: 1100px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.lobby-stat-card {
    background: var(--lobby-btn-bg);
    border: 1px solid var(--lobby-btn-border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: 0.25s;
}
.lobby-stat-card:hover { border-color: var(--text-color); transform: translateY(-2px); }
.lobby-stat-card .stat-icon { font-size: 1.4rem; opacity: 0.7; flex-shrink: 0; }
.lobby-stat-card .stat-body { flex: 1; }
.lobby-stat-card .stat-num {
    font-family: var(--font-main);
    font-size: 1.5rem;
    color: var(--text-color);
    line-height: 1;
}
.lobby-stat-card .stat-lbl {
    font-family: var(--font-tech);
    font-size: 0.72rem;
    color: #555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
/* Barra de progresso minúscula */
.lobby-stat-card .stat-micro-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--text-color));
    border-radius: 0 0 10px 10px;
    transition: width 0.8s ease;
}

/* DB Health integrado */
.lobby-db-row {
    width: 100%;
    max-width: 1100px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-tech);
    padding: 10px 0;
}
.lobby-db-row .db-label { font-size: 0.75rem; color: #444; letter-spacing: 2px; white-space: nowrap; }
.db-bar-wrap { flex: 1; background:rgba(255,255,255,0.04); border-radius:4px; overflow:hidden; height:4px; }
.db-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:0.6s; width:0%; border-radius:4px; }
.lobby-db-row .db-pct { font-family: var(--font-main); font-size: 0.8rem; color: var(--primary); white-space: nowrap; }
.lobby-db-row .db-backup-text { font-size: 0.72rem; color: #3a3a3a; margin-left: auto; }

/* ─── LEGACY DB MONITOR (manter compatibilidade) ─── */
.db-monitor { display: none; }
.db-stats-grid { display: none; }
#db-health-fill { /* controlado pelo novo .db-fill */ }

/* ═══════ PROGRESS RING ═══════ */
.prog-ring { position:relative; width:60px; height:60px; }
.prog-ring svg { transform:rotate(-90deg); }
.prog-ring .ring-bg { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:3; }
.prog-ring .ring-fill { fill:none; stroke:var(--text-color); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 0.6s ease; }
.prog-ring .ring-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-main); font-size:0.82rem; color:var(--text-color); }

/* ═══════ HEADER DAS TELAS ═══════ */
.tier-header {
    display:flex; justify-content:space-between; align-items:center;
    width:100%; margin-bottom:22px;
    background:var(--glass); backdrop-filter:blur(12px);
    padding:14px 28px;
    border-radius:12px;
    border:1px solid var(--glass-border);
    gap:12px;
    position: relative;
    overflow: hidden;
}
/* Linha decorativa na borda esquerda */
.tier-header::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--text-color), transparent);
    border-radius: 2px;
}
.page-title { font-family:var(--font-title); font-size:3.2rem; text-transform:uppercase; color:white; letter-spacing:2px; line-height:1; text-shadow:0 0 12px var(--primary-glow); white-space:nowrap; }

/* ═══════ CONFIGS ═══════ */
.config-container { max-width:960px; width:100%; background:var(--glass); backdrop-filter:blur(18px); padding:36px; border-radius:14px; border:1px solid var(--glass-border); }
.config-section { background:rgba(0,0,0,0.25); border-radius:10px; padding:20px; margin-bottom:18px; border:1px solid var(--glass-border); }
.config-section-title { font-family:var(--font-title); color:var(--gold); font-size:1.35rem; letter-spacing:1px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.config-row { display:flex; gap:10px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }
.config-item-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tag { background:rgba(0,0,0,0.5); padding:7px 16px; border-radius:5px; display:flex; align-items:center; gap:8px; font-size:0.88rem; border:1px solid #333; font-family:var(--font-tech); }
.tag.immutable { border-color:var(--gold); color:var(--gold); }
.tag-del { color:var(--danger); font-weight:bold; font-size:1.1rem; line-height:1; }
.tag-edit { color:var(--gold); font-size:0.95rem; line-height:1; opacity:0.75; transition:opacity 0.15s; }
.tag-edit:hover { opacity:1; }
/* Modal genérico de edição (config / nome de carta) */
.gen-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:5200; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.gen-modal-overlay.active { display:flex; }
.gen-modal-overlay .modal-box { text-align:left; }
.gen-modal-label { font-family:var(--font-tech); color:#888; font-size:0.82rem; display:block; margin:14px 0 5px; letter-spacing:1px; }
.selector-group label { display:block; font-family:var(--font-title); font-size:1.5rem; color:var(--text-color); margin-bottom:6px; letter-spacing:1px; }
input[type="text"], input[type="number"] { background:rgba(0,0,0,0.5); border:1px solid #444; color:white; padding:11px 14px; border-radius:6px; flex:1; font-family:var(--font-body); font-size:0.95rem; outline:none; transition:border-color .2s; min-width:120px; }
input[type="text"]:focus, input[type="number"]:focus { border-color:var(--primary); }
textarea:focus { border-color:var(--primary); outline:none; }
select { background:rgba(0,0,0,0.55); color:white; border:1px solid #444; padding:12px 14px; border-radius:6px; font-family:var(--font-main); font-size:0.95rem; letter-spacing:.5px; outline:none; }

/* ── Atalhos de teclado ── */
.kbd-section { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kbd-row { display:flex; align-items:center; gap:10px; }
.kbd-label { font-family:var(--font-tech); color:#aaa; font-size:0.95rem; flex:1; }
.kbd-badge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; background:rgba(0,0,0,0.6); border:2px solid #555; border-bottom-width:4px; border-radius:5px; font-family:var(--font-main); font-size:0.9rem; color:white; padding:0 8px; transition:0.2s; }
.kbd-badge:hover { border-color:var(--primary); color:var(--text-color); }
.kbd-badge.recording { border-color:var(--danger); color:var(--danger); animation:pulse 0.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

/* ═══ BREADCRUMB ═══ */
#breadcrumb-bar { position:fixed; top:0; left:0; right:0; height:34px; background:rgba(3,4,8,0.97); border-bottom:1px solid rgba(255,255,255,0.06); z-index:300; display:flex; align-items:center; padding:0 16px; gap:5px; font-family:var(--font-tech); font-size:0.72rem; color:#444; letter-spacing:1px; backdrop-filter:blur(12px); transform:translateY(-100%); transition:transform 0.3s ease; }
#breadcrumb-bar.visible { transform:translateY(0); }
.bc-item { color:#555; cursor:pointer; transition:color 0.15s; padding:0 2px; }
.bc-item:hover { color:var(--text-color); }
.bc-item.current { color:var(--text-color); cursor:default; pointer-events:none; }
.bc-sep { color:#2a2a2a; }
body.bc-active .screen { padding-top:56px !important; }

/* ═══ BOTÃO FULLSCREEN GLOBAL ═══ */
.btn-circle-fs { position:fixed; top:calc(18px + env(safe-area-inset-top, 0px)); right:calc(18px + env(safe-area-inset-right, 0px)); width:38px; height:38px; border-radius:50%; border:1px solid var(--lobby-btn-border); background:var(--lobby-btn-bg); color:var(--text-color); font-size:0.9rem; display:flex; align-items:center; justify-content:center; transition:0.3s; box-shadow:0 0 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); z-index:400; cursor:pointer; }
.btn-circle-fs:hover { background:var(--text-color); color:#000; box-shadow:0 0 20px var(--primary-glow); }
.btn-circle-fs.fs-active { background:var(--primary); border-color:var(--primary); color:#000; }

/* ═══ RICH TEXT EDITOR ═══ */
.rte-wrap { display:flex; flex-direction:column; gap:0; margin-top:4px; }
.rte-toolbar { display:flex; gap:3px; padding:4px 6px; background:rgba(0,0,0,0.6); border:1px solid #444; border-bottom:none; border-radius:6px 6px 0 0; flex-wrap:wrap; }
.rte-btn { background:rgba(255,255,255,0.05); border:1px solid #333; color:#aaa; padding:3px 8px; border-radius:4px; font-size:0.72rem; cursor:pointer; font-family:var(--font-body); transition:all 0.14s; line-height:1.4; }
.rte-btn:hover { background:rgba(255,255,255,0.12); color:white; border-color:#666; }
.rte-editor { background:rgba(0,0,0,0.4); border:1px solid #444; color:#ccc; padding:8px 10px; border-radius:0 0 6px 6px; font-family:var(--font-body); font-size:0.82rem; min-height:68px; outline:none; line-height:1.6; transition:border-color .2s; word-break:break-word; }
.rte-editor:focus { border-color:var(--primary); }
.rte-editor:empty::before { content:attr(data-placeholder); color:#3a3a4a; pointer-events:none; }
.rte-editor ul, .rte-editor ol { padding-left:14px; margin:3px 0; }
.rte-editor li { margin:1px 0; }
.rte-editor strong { color:var(--text-color); }
.rte-editor em { color:#aaddff; font-style:italic; }

/* ═══ RECONSIDERAÇÃO ═══ */
#screen-reconsider { justify-content:flex-start; padding-top:36px; }
#rc-grid { display:flex; flex-wrap:wrap; gap:12px; }
.rc-card-item { position:relative; width:108px; cursor:pointer; transition:all 0.18s; border:2px solid transparent; border-radius:8px; padding:5px; background:rgba(255,255,255,0.02); }
.rc-card-item:hover { border-color:var(--text-color); transform:translateY(-4px); background:rgba(255,255,255,0.04); }
.rc-card-item.rc-selected { border-color:var(--primary); background:rgba(0,242,255,0.07); box-shadow:0 0 14px var(--primary-glow); }
.rc-card-img { width:100%; border-radius:5px; display:block; pointer-events:none; }
.rc-card-check { position:absolute; top:3px; left:3px; width:18px; height:18px; background:rgba(0,0,0,0.75); border:1px solid #444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:#fff; transition:all 0.14s; z-index:2; }
.rc-card-check.checked { background:var(--primary); border-color:var(--primary); color:#000; font-weight:bold; }
.rc-card-info { display:flex; gap:4px; justify-content:center; margin-top:3px; flex-wrap:wrap; align-items:center; }
.rc-card-pos  { font-family:var(--font-tech); font-size:0.58rem; color:#666; letter-spacing:1px; }
.rc-card-frags { font-family:var(--font-main); font-size:0.58rem; color:#ffd060; }
.rc-edit-btn { position:absolute; top:3px; right:3px; background:rgba(0,0,0,0.8); border:none; color:#555; border-radius:3px; padding:1px 4px; font-size:0.62rem; cursor:pointer; opacity:0; transition:opacity 0.14s; z-index:2; }
.rc-card-item:hover .rc-edit-btn { opacity:1; }

/* ═══ ARENA ═══ */
#screen-arena { justify-content:flex-start; padding-top:36px; align-items:center; }
.arena-setup-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:32px; width:100%; max-width:680px; margin-top:10px; }
.arena-setup-title { font-family:var(--font-main); font-size:1.5rem; color:var(--gold); letter-spacing:3px; text-align:center; margin-bottom:24px; }
.arena-setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
.arena-setup-label { font-family:var(--font-tech); font-size:0.75rem; color:#666; letter-spacing:2px; margin-bottom:5px; }
.arena-size-btn { background:rgba(255,255,255,0.04); border:1px solid #444; color:#888; padding:9px 16px; border-radius:6px; font-family:var(--font-main); font-size:1rem; cursor:pointer; transition:all 0.2s; flex:1; }
.arena-size-btn.active { background:rgba(0,242,255,0.12); border-color:var(--primary); color:var(--primary); box-shadow:0 0 10px var(--primary-glow); font-weight:bold; }
.arena-vs-header { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:16px; width:100%; flex-wrap:wrap; }
.arena-round-badge { font-family:var(--font-main); font-size:1rem; color:var(--text-color); letter-spacing:2px; background:rgba(0,242,255,0.08); border:1px solid rgba(0,242,255,0.12); padding:7px 18px; border-radius:20px; }
.arena-match-progress { font-family:var(--font-tech); font-size:0.8rem; color:#444; letter-spacing:2px; }
.arena-vs-layout { display:flex; align-items:stretch; width:100%; max-width:820px; }
.arena-card-side { flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px; cursor:pointer; border-radius:12px; border:2px solid rgba(255,255,255,0.06); transition:all 0.22s; background:rgba(255,255,255,0.02); }
.arena-card-side:hover { border-color:var(--primary); background:rgba(0,242,255,0.05); transform:scale(1.02); box-shadow:0 0 30px var(--primary-glow); }
.arena-card-img { width:min(150px, 38vw); border-radius:10px; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.9)); pointer-events:none; }
.arena-card-details { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
.arena-card-event, .arena-card-pos { font-family:var(--font-tech); font-size:0.72rem; color:#555; letter-spacing:1px; }
.arena-vote-hint { font-family:var(--font-tech); font-size:0.65rem; color:#333; letter-spacing:1px; text-transform:uppercase; margin-top:auto; }
.arena-vs-divider { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 16px; min-width:60px; }
.arena-vs-text { font-family:var(--font-main); font-size:2.5rem; color:var(--danger); text-shadow:0 0 20px rgba(255,71,87,0.5); letter-spacing:4px; }
.arena-winner-flash { animation:arenaWin 0.7s ease forwards !important; pointer-events:none; }
.arena-loser-fade  { animation:arenaLose 0.7s ease forwards !important; pointer-events:none; }
@keyframes arenaWin  { 0%{transform:scale(1)} 35%{transform:scale(1.07); filter:brightness(1.5) drop-shadow(0 0 16px var(--primary))} 100%{transform:scale(1.04)} }
@keyframes arenaLose { 0%{opacity:1} 100%{opacity:0.2; filter:grayscale(1) blur(1px); transform:scale(0.94)} }
.arena-bracket-wrap { width:100%; margin-top:20px; overflow-x:auto; padding-bottom:8px; }
.arena-bracket-mini { display:flex; gap:10px; padding:10px; background:rgba(0,0,0,0.3); border-radius:10px; min-width:max-content; }
.arena-bracket-round { display:flex; flex-direction:column; gap:6px; align-items:center; min-width:70px; }
.arena-bracket-round-label { font-family:var(--font-tech); font-size:0.6rem; color:#444; letter-spacing:1px; text-align:center; margin-bottom:3px; }
.arena-bracket-match { background:rgba(255,255,255,0.03); border:1px solid #1a1a2a; border-radius:5px; padding:3px; display:flex; flex-direction:column; gap:2px; transition:border-color 0.2s; }
.arena-bracket-match.active { border-color:rgba(0,242,255,0.12); box-shadow:0 0 6px var(--primary-glow); }
.arena-bracket-slot { display:flex; align-items:center; padding:2px 3px; border-radius:3px; min-height:22px; }
.arena-bracket-slot.won  { background:rgba(0,255,120,0.12); }
.arena-bracket-slot.lost { opacity:0.35; filter:grayscale(0.8); }
.arena-champion-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:32px 16px; width:100%; max-width:820px; }
.arena-champion-label { font-family:var(--font-title); font-size:2.4rem; color:var(--gold); letter-spacing:4px; text-shadow:0 0 30px rgba(255,215,0,0.5); animation:championGlow 2s ease infinite; }
@keyframes championGlow { 0%,100%{text-shadow:0 0 20px rgba(255,215,0,0.4)} 50%{text-shadow:0 0 50px rgba(255,215,0,0.9)} }
.arena-champion-img-wrap { position:relative; display:inline-block; }
.arena-champion-img-wrap::before { content:''; position:absolute; inset:-24px; background:radial-gradient(ellipse,rgba(255,215,0,0.25) 0%,transparent 70%); border-radius:50%; animation:chPulse 2.2s ease infinite; }
.arena-champion-img { width:min(200px,50vw); border-radius:14px; filter:drop-shadow(0 16px 40px rgba(255,215,0,0.5)) drop-shadow(0 0 24px rgba(255,215,0,0.3)); position:relative; z-index:1; }
@keyframes chPulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.12);opacity:0.9} }
.arena-champion-meta { font-family:var(--font-main); font-size:0.9rem; color:#777; letter-spacing:2px; }
.arena-final-bracket { width:100%; overflow-x:auto; margin-top:16px; }

/* ═══ TIER MULTI-POS FILTER ═══ */
select[multiple]#tier-pos-filter { min-height:44px; max-height:90px; padding:4px 6px; font-size:0.82rem; }
.tier-pos-hint { font-family:var(--font-tech); font-size:0.6rem; color:#3a3a3a; letter-spacing:1px; margin-top:3px; text-align:center; }

/* ═══ POS CHIPS (substitui o select multiple) ═══ */
.tier-pos-chips { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.tier-pos-chip-btn {
    padding:7px 12px; border-radius:6px; border:1px solid #3a4a5c;
    background:rgba(255,255,255,0.04); color:#888;
    font-family:var(--font-main); font-size:0.78rem; letter-spacing:.5px;
    transition:all 0.18s;
}
.tier-pos-chip-btn:hover { border-color:var(--text-color); color:white; background:rgba(255,255,255,0.08); }
.tier-pos-chip-btn.active {
    background:var(--primary); border-color:var(--primary); color:#000;
    font-weight:900; box-shadow:0 0 10px var(--primary-glow);
}
/* Tags das posições selecionadas (dropdown da Tier de Posições) */
.tier-pos-tag {
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 8px 7px 12px; border-radius:6px;
    background:var(--primary); border:1px solid var(--primary); color:#000;
    font-family:var(--font-main); font-size:0.78rem; letter-spacing:.5px; font-weight:900;
    box-shadow:0 0 10px var(--primary-glow);
}
.tier-pos-tag .tier-pos-tag-x {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; cursor:pointer;
    background:rgba(0,0,0,0.25); color:#000; font-size:0.85rem; line-height:1; font-weight:900;
    transition:background 0.15s;
}
.tier-pos-tag .tier-pos-tag-x:hover { background:rgba(0,0,0,0.5); color:#fff; }

/* ═══ STICKY TIER HEADER (apenas quando ativado) ═══ */
body.sticky-tier-header #tier-header-bar {
    position: sticky !important;
    top: 0;
    z-index: 150;
}
body.sticky-tier-header.bc-active #tier-header-bar { top: 34px; }

/* ═══ TIER CONTROLS COLLAPSIBLE — nivelado ═══ */
.tier-controls-collapsible {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.tier-controls-collapsible.collapsed { display:none; }
.tier-controls-collapsible select,
.tier-controls-collapsible input[type="text"],
.tier-controls-collapsible input[type="number"] {
    height:40px; padding:8px 12px; box-sizing:border-box; font-size:0.85rem;
}
.tier-controls-collapsible .btn { height:40px; }
.tier-controls-collapsible .tier-search-wrap input { height:40px; padding:8px 14px 8px 38px; box-sizing:border-box; }
.tier-filter-combo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ═══ PAINEL FILTROS (abre ao clicar em FILTROS) ═══ */
.tier-filtros-panel {
    display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
    width:100%; margin-top:10px; padding-top:10px;
    border-top:1px dashed rgba(255,255,255,0.10);
}
.filtros-group-label {
    width:100%; font-family:var(--font-tech); font-size:0.65rem;
    color:#556; letter-spacing:1.5px; text-transform:uppercase;
    padding:2px 0;
}
.filtros-group-label.filtros-sep {
    border-top:1px solid rgba(255,255,255,0.07);
    padding-top:8px; margin-top:2px;
}
/* Linha com múltiplos controles de filtro lado a lado */
.filtros-row-multi {
    width:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
/* Grade 2 colunas para botões de exibição */
.filtros-btn-grid {
    width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
/* Atributos inline (sem popup flutuante) */
.attrf-inline { width:100%; display:flex; flex-direction:column; gap:7px; }
.attrf-il-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.attrf-il-lbl { font-family:var(--font-tech); font-size:0.68rem; letter-spacing:1px; color:#8a9aab; text-transform:uppercase; min-width:88px; flex-shrink:0; }
.attrf-il-row .attrf-seg { flex:1; min-width:0; }
.attrf-il-row .attrf-wr-select { height:34px; flex:1; min-width:120px; }
#tier-header-bar { overflow:visible; }
#btn-tier-filtros.active { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
#btn-tier-comparar.active { border-color:var(--gold,#e8b73a); color:var(--gold,#e8b73a); box-shadow:0 0 0 1px var(--gold,#e8b73a) inset; }
/* ── modo seleção pra comparar direto da tier ── */
body.tier-selecionando #capture-tier .card-container { cursor:pointer; }
body.tier-selecionando #capture-tier .card-container:not(.tier-marcada) { opacity:0.62; }
#capture-tier .card-container.tier-marcada {
    outline:2.5px solid var(--gold,#e8b73a); outline-offset:1px; border-radius:6px;
    box-shadow:0 0 18px -2px rgba(232,183,58,0.6); opacity:1 !important; }
.tier-selo-sel { position:absolute; top:4px; left:4px; z-index:6; width:24px; height:24px; border-radius:50%;
    background:var(--gold,#e8b73a); color:#12100a; font-family:var(--font-title); font-size:0.95rem;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.7); }
.tier-barra-sel { position:fixed; left:12px; right:12px; z-index:9400;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:11px 14px; border-radius:14px; background:rgba(10,14,22,0.97);
    border:1px solid rgba(232,183,58,0.4); box-shadow:0 14px 40px rgba(0,0,0,0.7); }
.tbs-conta { font-family:var(--font-tech); font-size:0.72rem; letter-spacing:0.8px; color:#cfd9e4; }
.tbs-acoes { display:flex; gap:8px; margin-left:auto; }
.tbs-btn { min-height:40px; padding:0 15px; border-radius:9px; cursor:pointer; background:transparent;
    border:1px solid rgba(255,255,255,0.22); color:#dfe8f2; font-family:var(--font-tech);
    font-size:0.66rem; letter-spacing:1.4px; }
.tbs-btn:hover:not(:disabled) { border-color:var(--text-color); color:#fff; }
.tbs-btn.tbs-ok { background:var(--gold,#e8b73a); border-color:var(--gold,#e8b73a); color:#12100a; font-weight:800; }
.tbs-btn:disabled { opacity:0.35; cursor:not-allowed; }

/* ═══ PIN BUTTON NO CARD ═══ */
.card-pin-btn {
    position:absolute; top:-7px; left:-7px;
    background:rgba(0,0,0,0.85); border:2px solid #555;
    color:#888; border-radius:50%;
    width:22px; height:22px; font-size:11px; font-weight:bold;
    opacity:0; transition:0.18s; z-index:11;
    box-shadow:0 2px 5px rgba(0,0,0,0.8);
    display:flex; justify-content:center; align-items:center;
    line-height:1;
}
.card-container:hover .card-pin-btn { opacity:1; }
.card-container.is-pinned .card-pin-btn {
    opacity:1; background:var(--gold); border-color:var(--gold); color:#000;
}
.card-container.is-pinned {
    outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

/* ═══ ÚLTIMA AVALIAÇÃO NO LOBBY ═══ */
.lobby-last-eval {
    width:100%; max-width:1100px;
    display:flex; align-items:center; gap:16px;
    background:var(--lobby-btn-bg);
    border:1px solid var(--lobby-btn-border);
    border-radius:12px; padding:12px 20px;
    margin-top:10px;
    transition:0.25s; cursor:pointer;
}
.lobby-last-eval:hover { border-color:var(--text-color); transform:translateY(-1px); }
.lobby-last-eval-img { width:46px; height:64px; object-fit:cover; border-radius:6px; flex-shrink:0; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.8)); }
.lobby-last-eval-info { flex:1; }
.lobby-last-eval-title { font-family:var(--font-tech); font-size:0.65rem; color:#444; letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.lobby-last-eval-meta { font-family:var(--font-main); font-size:0.88rem; color:var(--text-color); letter-spacing:1px; }
.lobby-last-eval-cat { display:inline-block; font-family:var(--font-main); font-size:0.68rem; padding:2px 9px; border-radius:4px; color:#000; font-weight:900; margin-top:4px; letter-spacing:.5px; }

/* ═══ CONFIG TOGGLES ═══ */
.config-toggle-wrap {
    display:flex; align-items:flex-start; gap:14px; cursor:pointer;
    background:rgba(0,0,0,0.25); padding:14px 18px; border-radius:8px;
    border:1px solid rgba(255,255,255,0.05); transition:border-color 0.2s;
    flex:1; min-width:260px;
}
.config-toggle-wrap:hover { border-color:rgba(0,242,255,0.12); }
.config-toggle-wrap input[type="checkbox"] {
    width:20px; height:20px; flex-shrink:0; margin-top:3px;
    accent-color:var(--primary); cursor:pointer;
}
.config-toggle-label { display:flex; flex-direction:column; gap:4px; }
.config-toggle-label strong { font-family:var(--font-main); font-size:0.9rem; letter-spacing:.5px; }
.config-toggle-label span { font-family:var(--font-tech); font-size:0.8rem; color:#555; line-height:1.4; }

/* ═══ MONTAR SORT ═══ */
#montar-sort { width:185px; }

/* ═══ FULLSCREEN MODE ═══ */
.fullscreen-mode { position:fixed !important; inset:0 !important; z-index:1000 !important; max-width:none !important; padding:20px !important; overflow-y:auto !important; background:var(--bg-deep) !important; }

/* ═══ NOVAS CARTAS ═══ */
#upload-grid { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px; width:100%; }
.card-wait { position:relative; width:145px; background:rgba(255,255,255,0.02); border:1px solid #2a3444; border-radius:9px; padding:9px; display:flex; flex-direction:column; align-items:center; transition:0.2s; }
.card-wait:hover { border-color:var(--text-color); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.5); }
.card-wait img { width:100%; border-radius:4px; margin-bottom:8px; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.8)); }
.upload-more-btn { width:100%; margin-top:20px; font-size:0.85rem; display:flex; justify-content:center; }

/* ═══════ MODO AVALIAÇÃO ═══════ */
.review-progress-text { font-family:var(--font-tech); font-size:1.7rem; color:var(--gold); letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; text-align:center; }
.review-card-area { display:flex; gap:50px; align-items:flex-start; justify-content:center; margin-top:16px; background:var(--glass); backdrop-filter:blur(20px); padding:44px; border-radius:20px; border:1px solid var(--glass-border); width:100%; max-width:1150px; box-shadow:0 20px 60px rgba(0,0,0,0.8); }
.pedestal-glow { position:relative; display:flex; justify-content:center; align-items:center; }
.pedestal-glow::before { content:''; position:absolute; width:260px; height:260px; background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%); z-index:0; opacity:0.8; }
.card-big { width:300px; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.9)); border-radius:8px; z-index:1; }
.anim-glow { animation:holoCard 3s infinite linear, fadeInGlow 0.5s ease-out; }
.anim-zoom { animation:popZoom 0.55s cubic-bezier(0.175,0.885,0.32,1.275); }
.anim-slide { animation:slideInLeft 0.5s ease-out; }
@keyframes holoCard { 0%{filter:brightness(1) drop-shadow(0 0 10px var(--text-color))}50%{filter:brightness(1.2) drop-shadow(0 0 28px var(--text-color))}100%{filter:brightness(1) drop-shadow(0 0 10px var(--text-color))} }
@keyframes fadeInGlow { from{opacity:0;filter:brightness(3)}to{opacity:1;filter:brightness(1)} }
@keyframes popZoom { 0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1} }
@keyframes slideInLeft { 0%{transform:translateX(-100px) rotate(-8deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1} }

.review-controls { flex:1; max-width:460px; }

/* Seletor de Evento */
.event-selector-wrap { background:rgba(0,0,0,0.35); padding:18px 20px; border-radius:10px; border:1px solid rgba(255,255,255,0.05); margin-bottom:14px; }
.event-selector-wrap .ctrl-label { font-family:var(--font-title); font-size:1.45rem; color:var(--text-color); margin-bottom:8px; display:block; letter-spacing:1px; }
.event-selector-wrap select { width:100%; }

/* Chips de Posição */
.pos-chips-wrap { background:rgba(0,0,0,0.35); padding:18px 20px; border-radius:10px; border:1px solid rgba(255,255,255,0.05); margin-bottom:14px; }
.pos-chips-wrap .ctrl-label { font-family:var(--font-title); font-size:1.45rem; color:var(--text-color); margin-bottom:10px; display:block; letter-spacing:1px; }
.pos-chips-grid { display:flex; flex-wrap:wrap; gap:7px; }
.pos-chip { padding:8px 14px; border-radius:6px; border:1px solid #3a4a5c; background:rgba(255,255,255,0.04); color:#bbb; font-family:var(--font-main); font-size:0.82rem; letter-spacing:.5px; transition:all 0.18s; }
.pos-chip:hover { border-color:var(--text-color); color:white; background:rgba(255,255,255,0.08); }
.pos-chip.selected { background:var(--primary); border-color:var(--primary); color:#000; font-weight:900; box-shadow:0 0 12px var(--primary-glow); }

/* Botões de Nota */
.grade-wrap { background:rgba(0,0,0,0.35); padding:20px; border-radius:10px; border:1px solid rgba(255,255,255,0.05); }
.grade-label { font-family:var(--font-title); font-size:1.45rem; color:var(--gold); margin-bottom:14px; display:block; text-align:center; letter-spacing:1px; }
.grade-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-grade { padding:18px 12px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; font-family:var(--font-main); transition:all 0.2s; text-transform:uppercase; font-size:0.95rem; color:#000; font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.btn-grade .kbd-hint { position:absolute; top:5px; right:7px; font-family:var(--font-tech); font-size:0.7rem; opacity:0.6; color:#000; background:rgba(0,0,0,0.2); border-radius:3px; padding:1px 5px; }
.btn-grade:hover { filter:brightness(1.25); transform:scale(1.04) translateY(-2px); border-color:white; }

/* Undo Button */
#btn-undo-review { width:100%; margin-top:12px; font-size:0.82rem; opacity:0.7; }
#btn-undo-review:hover { opacity:1; }
#btn-undo-review:disabled { opacity:0.2; }

/* ═══════ TIER LIST ═══════ */
.tier-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tier-search-wrap { position:relative; }
.tier-search-wrap input { background:rgba(0,0,0,0.5); border:1px solid #444; color:white; padding:10px 14px 10px 38px; border-radius:6px; font-family:var(--font-body); font-size:0.9rem; width:200px; outline:none; transition:all .2s; }
.tier-search-wrap input:focus { border-color:var(--primary); width:240px; }
.tier-search-wrap .search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:1.1rem; opacity:0.5; pointer-events:none; }
.tier-filter-combo { display:flex; gap:8px; align-items:center; }

#capture-tier { width:100%; background:linear-gradient(160deg,#050505,#111318); padding:20px; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.8); border:1px solid rgba(255,255,255,0.05); }
.tier-row { display:flex; min-height:130px; background:rgba(0,0,0,0.18); margin-bottom:4px; border-radius:4px; overflow:hidden; }
.tier-label-box { width:150px; min-width:150px; display:flex; align-items:center; justify-content:center; }
.tier-label-text { font-family:var(--font-title); font-size:2rem; color:#fff; text-align:center; line-height:1; text-shadow:2px 2px 0 rgba(0,0,0,0.8); padding:10px; word-break:break-word; }
.tier-label-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; flex:1; }
.tier-label-stack .tier-label-text { padding-bottom:0; }
/* contador da faixa — segue o nome, sem competir com ele */
.tier-count { font-family:var(--font-tech); font-size:0.68rem; letter-spacing:1.4px; margin-top:5px; padding:0 8px;
              color:rgba(255,255,255,0.82); text-shadow:1px 1px 0 rgba(0,0,0,0.7); white-space:nowrap; }
.tier-count.vazia { opacity:0.45; }
/* aviso de ordenação — discreto, mas presente sempre que a tier está aberta */
.tier-aviso-ordem { display:flex; align-items:center; gap:8px; padding:9px 14px 2px;
    font-family:var(--font-tech); font-size:0.68rem; line-height:1.4; letter-spacing:0.4px; color:#7d8b98; }
.tier-aviso-ordem b { color:var(--gold,#e8b73a); font-weight:700; }
.tier-aviso-ordem .tao-ic { flex:0 0 auto; font-size:0.9rem; color:var(--gold,#e8b73a); opacity:0.8; }
.fullscreen-mode .tier-aviso-ordem { display:none; }
/* ── botão que abre a janela de playstyles (com os escolhidos minimizados) ── */
.tps-abrir { display:flex; align-items:center; gap:9px; width:100%; flex:1 1 100%; min-height:44px;
    padding:7px 12px; box-sizing:border-box; cursor:pointer; border-radius:9px;
    background:rgba(0,0,0,0.5); border:1px solid #444; color:#c9d4e0;
    font-family:var(--font-tech); font-size:0.72rem; letter-spacing:1.2px; }
.tps-abrir:hover { border-color:var(--text-color,#00f2ff); }
.tps-abrir.on { border-color:var(--text-color,#00f2ff); color:var(--text-color,#00f2ff); }
.tps-abrir-txt { flex:0 0 auto; }
.tps-mini { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto; }
.tps-mini-ic { width:22px; height:22px; border-radius:5px; object-fit:cover; display:block; }
.tps-mini-mais { font-family:var(--font-tech); font-size:0.62rem; color:#8b98a5; }

/* ── janela de seleção de playstyles ── */
.tps-overlay { position:fixed; inset:0; z-index:9600; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.78); backdrop-filter:blur(5px); padding:16px; }
.tps-overlay.open { display:flex; }
.tps-janela { width:100%; max-width:520px; max-height:86vh; display:flex; flex-direction:column;
    border-radius:16px; background:#0c101a; border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 20px 60px rgba(0,0,0,0.8); overflow:hidden; }
.tps-topo { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.tps-titulo { font-family:var(--font-title); font-size:1.25rem; letter-spacing:2px; color:var(--text-color,#00f2ff); }
.tps-x { width:36px; height:36px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.18); color:#c9d4e0; font-size:0.95rem; }
.tps-x:hover { background:rgba(255,71,87,0.8); color:#fff; }
.tps-sub { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
    padding:0 16px 12px; font-family:var(--font-tech); font-size:0.66rem; letter-spacing:1px; color:#8b98a5;
    border-bottom:1px solid rgba(255,255,255,0.07); }
.tps-rodape { display:flex; gap:9px; justify-content:flex-end; padding:12px 16px;
    border-top:1px solid rgba(255,255,255,0.07); }
.tps-btn { min-height:42px; padding:0 20px; border-radius:9px; cursor:pointer; background:transparent;
    border:1px solid rgba(255,255,255,0.22); color:#dfe8f2;
    font-family:var(--font-tech); font-size:0.68rem; letter-spacing:1.6px; }
.tps-btn:hover { border-color:var(--text-color,#00f2ff); color:#fff; }
.tps-btn.tps-ok { background:var(--text-color,#00f2ff); border-color:var(--text-color,#00f2ff);
    color:#050810; font-weight:800; min-width:96px; }
/* a grade agora mora na janela: rola junto com ela, sem barra própria confusa */
.tier-ps-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:8px;
    padding:14px 16px; overflow-y:auto; flex:1 1 auto; }
.tps-cel { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
    padding:11px 5px 9px; min-height:84px; cursor:pointer; border-radius:10px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); transition:.15s; }
.tps-cel:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.06); }
.tps-cel.on { border-color:var(--text-color,#00f2ff); background:rgba(0,242,255,0.12);
    box-shadow:0 0 0 1px var(--text-color,#00f2ff) inset; }
.tps-ic { width:36px; height:36px; min-width:36px; object-fit:cover; border-radius:7px; display:block; }
.tps-ic-txt { display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.tps-cel.on .tps-ic { filter:drop-shadow(0 0 6px rgba(0,242,255,0.6)); }
.tps-nome { font-family:var(--font-tech); font-size:0.53rem; letter-spacing:0.3px; line-height:1.15;
    text-align:center; color:#7e8c99; word-break:break-word; }
.tps-cel.on .tps-nome { color:#dff4fa; }
.tps-vazio { font-family:var(--font-tech); font-size:0.68rem; color:#5d6772; padding:8px 2px; }
/* QUALQUER / TODOS — só aparece com 2+ marcados */
.tier-ps-modo { display:none; gap:4px; margin-left:8px; vertical-align:middle; }
.tps-modo { padding:3px 9px; border-radius:11px; cursor:pointer; background:transparent;
    border:1px solid rgba(255,255,255,0.16); color:#6d7a86;
    font-family:var(--font-tech); font-size:0.54rem; letter-spacing:1px; }
.tps-modo.on { border-color:var(--text-color,#00f2ff); color:var(--text-color,#00f2ff); }
.tchip-ic { width:17px; height:17px; border-radius:4px; object-fit:cover; vertical-align:middle; }
.tier-chip-f.tchip-modo { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.18);
    color:#8d99a5; padding:0 11px; }
/* ── chips do que está filtrado (fora do painel 🔧 FILTROS) ── */
.tier-chips-ativos { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:9px 12px 3px; }
.tier-chip-f { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 6px 0 11px;
    border-radius:16px; background:rgba(0,242,255,0.10); border:1px solid rgba(0,242,255,0.34);
    font-family:var(--font-tech); font-size:0.7rem; letter-spacing:0.6px; color:#cfe6ee; white-space:nowrap; }
.tier-chip-f b { color:#fff; font-weight:700; }
.tier-chip-f button { width:22px; height:22px; min-width:22px; border:none; border-radius:50%; cursor:pointer;
    background:rgba(0,0,0,0.38); color:#cfe6ee; font-size:0.78rem; line-height:1; display:flex;
    align-items:center; justify-content:center; padding:0; }
.tier-chip-f button:hover { background:rgba(255,71,87,0.85); color:#fff; }
.tier-chip-limpar { height:32px; padding:0 13px; border-radius:16px; cursor:pointer;
    background:rgba(255,71,87,0.14); border:1px solid rgba(255,71,87,0.42); color:#ff8f99;
    font-family:var(--font-tech); font-size:0.68rem; letter-spacing:1.2px; }
.tier-chip-limpar:hover { background:rgba(255,71,87,0.3); color:#fff; }
.tier-content { flex:1; display:flex; flex-wrap:wrap; gap:7px; padding:10px; align-items:flex-start; min-height:130px; transition:background 0.2s; align-content:flex-start; }
.tier-content.drag-over { background:rgba(0,242,255,0.07); box-shadow:inset 0 0 20px rgba(0,242,255,0.08); }
.tier-content.drag-over-before::before { content:''; display:block; width:4px; height:90px; background:var(--primary); border-radius:2px; align-self:center; }

/* ═══════ CARTAS (container) ═══════ */
.card-container { position:relative; transition:transform 0.22s cubic-bezier(0.22,0.61,0.36,1); width:100px; flex-shrink:0; }
.card-container.dragging { opacity:0.4; transform:scale(0.92); }
/* Hover padrão — sutil, não atrapalha arrastar */
.card-container:not(.dragging):hover { transform:translateY(-4px) scale(1.04); z-index:20; }
/* Zoom 2× — ativado apenas com body.zoom-enabled */
body.zoom-enabled .card-container:not(.dragging):hover { transform:translateY(-6px) scale(2.0); z-index:400; }
body.zoom-enabled .tier-row { overflow:visible !important; }
body.zoom-enabled .tier-content { overflow:visible !important; }
body.zoom-enabled #capture-tier { overflow:visible !important; }
.card-container img { width:100%; border-radius:5px; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6)); display:block; pointer-events:none; }
.card-drop-indicator { width:4px; height:90px; background:var(--primary); border-radius:2px; align-self:center; flex-shrink:0; display:none; box-shadow:0 0 8px var(--primary); }
.card-drop-indicator.visible { display:block; }
.btn-x { position:absolute; top:-7px; right:-7px; background:var(--danger); border:2px solid #fff; color:white; border-radius:50%; width:22px; height:22px; font-size:13px; font-weight:bold; opacity:0; transition:0.18s; z-index:10; box-shadow:0 2px 5px rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; }
.card-container:hover .btn-x, .card-wait:hover .btn-x, .card-slot:hover .btn-x { opacity:1; }

/* ═══════ TOP 10 ═══════ */
#capture-top10 { width:100%; display:flex; flex-direction:column; align-items:center; padding:20px; border-radius:12px; background-image:radial-gradient(circle at 50% 0%, rgba(20,20,40,0.5), transparent 80%); }
.podium-container { display:flex; justify-content:center; align-items:flex-end; gap:18px; margin-bottom:36px; min-height:420px; padding-top:20px; }
.card-slot { position:relative; background:rgba(255,255,255,0.025); border-radius:var(--card-radius); box-shadow:0 10px 30px rgba(0,0,0,0.5); transition:all 0.2s; border:1px solid var(--glass-border); background-image:radial-gradient(rgba(255,255,255,0.07) 1px,transparent 1px); background-size:12px 12px; }
.card-slot:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:0 0 28px var(--primary-glow); z-index:50; }
.card-slot.drag-over { border-color:var(--gold); background-color:rgba(255,215,0,0.08); transform:scale(1.03); }
.card-image { width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center bottom; position:absolute; top:0; left:0; border-radius:var(--card-radius); z-index:1; transition:filter 0.35s; }
.blurred { filter:blur(28px) brightness(0.15) !important; }
.reveal-flash { animation:flashBang 0.7s ease-out forwards; }
.reveal-glitch { animation:glitchRev 0.5s steps(2,end) forwards; }
.reveal-slide { animation:slideRev 0.6s ease-out forwards; }
.reveal-holo { animation:holoRev 1s ease-in-out forwards; }
.reveal-particle { animation:particleRev 0.8s ease-out forwards; }
@keyframes flashBang { 0%{filter:brightness(5) blur(12px);transform:scale(1.18)}100%{filter:brightness(1) blur(0);transform:scale(1)} }
@keyframes glitchRev { 0%{filter:hue-rotate(90deg) blur(5px);transform:translateX(-12px)}50%{filter:hue-rotate(-90deg) blur(5px);transform:translateX(12px)}100%{filter:hue-rotate(0) blur(0);transform:translateX(0)} }
@keyframes slideRev { 0%{transform:translateY(-55px);opacity:0;filter:blur(10px)}100%{transform:translateY(0);opacity:1;filter:blur(0)} }
@keyframes holoRev { 0%{filter:brightness(2.5) drop-shadow(0 0 25px var(--primary));opacity:0.4}100%{filter:brightness(1) drop-shadow(0 0 0 transparent);opacity:1} }
@keyframes particleRev { 0%{filter:brightness(3) saturate(3);transform:scale(1.2)}40%{filter:brightness(1.5) saturate(2);transform:scale(1.05)}100%{filter:brightness(1) saturate(1);transform:scale(1)} }
.rank-1 { width:270px; height:390px; order:2; z-index:10; border:2px solid var(--gold); box-shadow:0 0 50px rgba(255,215,0,0.12); }
.rank-2 { width:210px; height:310px; order:1; border:2px solid var(--silver); }
.rank-3 { width:210px; height:310px; order:3; border:2px solid var(--bronze); }
.rank-badge { position:absolute; top:-10px; left:-10px; width:34px; height:34px; background:#111; color:white; display:flex; align-items:center; justify-content:center; font-family:var(--font-main); font-size:0.95rem; border:1px solid #444; z-index:100; clip-path:polygon(20% 0%,80% 0%,100% 20%,100% 80%,80% 100%,20% 100%,0% 80%,0% 20%); }
.rank-1 .rank-badge { background:var(--gold); color:#000; border-color:white; width:50px; height:50px; font-size:1.8rem; top:-25px; left:50%; transform:translateX(-50%); clip-path:none; border-radius:50%; box-shadow:0 0 18px var(--gold); }
.rank-2 .rank-badge { background:var(--silver); color:#000; }
.rank-3 .rank-badge { background:var(--bronze); color:#000; }
.grid-container { display:grid; grid-template-columns:repeat(7,125px); gap:14px; justify-items:center; margin-bottom:28px; }
.grid-slot { width:125px; height:178px; }
.dock-separator { margin-top:8px; border-top:1px solid var(--glass-border); text-align:center; width:100%; max-width:1200px; }
.dock-title { background:var(--bg-deep); padding:0 20px; color:#666; font-size:0.95rem; position:relative; top:-12px; letter-spacing:3px; font-family:var(--font-tech); font-weight:700; }
.dock-container { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:18px; width:100%; max-width:1200px; min-height:90px; }
.dock-slot { width:95px; height:138px; border-color:#333; }
.dock-slot:hover { border-color:#666; }
.ex-top10-slot { opacity:0.35; filter:grayscale(1); }
.ex-top10-slot:hover { opacity:0.8; filter:grayscale(0); }

/* ═══ MH RANK BADGE (11°, 12°...) ═══ */
.mh-rank-badge {
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:#0d0f18; border:1px solid #3a4a5c; color:#667;
    font-family:var(--font-main); font-size:0.6rem; padding:2px 9px;
    border-radius:10px; z-index:20; white-space:nowrap; letter-spacing:.5px;
    pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,0.7);
}
/* ═══ MH DRAG ═══ */
.dock-slot.mh-drag-over {
    border-color:var(--gold) !important;
    background-color:rgba(255,215,0,0.08) !important;
    transform:scale(1.05) !important;
    box-shadow:0 0 14px rgba(255,215,0,0.25) !important;
}
.dock-slot.mh-dragging { opacity:0.3; filter:grayscale(0.6); transform:scale(0.96); }
/* ═══ TOP10 OBTAIN FILTER CHIPS ═══ */
.top10-obtain-filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.top10-filter-chip {
    padding:5px 14px; border-radius:20px;
    border:1px solid rgba(0,242,255,0.12); background:rgba(0,242,255,0.07);
    color:var(--text-color); font-family:var(--font-main); font-size:0.72rem;
    letter-spacing:.5px; transition:all 0.18s; cursor:pointer; user-select:none;
}
.top10-filter-chip:hover { filter:brightness(1.2); }
.top10-filter-chip.excluded {
    background:rgba(255,71,87,0.06); border-color:rgba(255,71,87,0.3);
    color:rgba(255,71,87,0.5); text-decoration:line-through;
}
.top10-filter-chip.frag-only-on { background:rgba(0,200,100,0.18)!important; border-color:rgba(0,200,100,0.55)!important; color:#00e07a!important; font-weight:700!important; }
/* ═══ TOP10 FILTER WARNING ═══ */
.top10-filter-warning {
    width:100%; margin-top:9px; padding:9px 12px; border-radius:11px;
    background:rgba(255,204,0,0.07); border:1px solid rgba(255,204,0,0.26);
    font-family:var(--font-tech); font-size:0.68rem; line-height:1.5; color:#e6d9a8;
    display:none; align-items:center; gap:9px; flex-wrap:wrap; box-sizing:border-box;
}
.top10-filter-warning.visible { display:flex; }
.t10w-tag { flex:0 0 auto; padding:3px 9px; border-radius:20px; background:var(--gold,#e8b73a);
    color:#12100a; font-size:0.58rem; letter-spacing:1.4px; font-weight:800; }
.t10w-txt { flex:1 1 200px; min-width:0; }
.t10w-txt b { color:var(--gold,#e8b73a); }
.t10w-x { flex:0 0 auto; min-height:32px; padding:0 12px; border-radius:8px; cursor:pointer;
    background:transparent; border:1px solid rgba(255,204,0,0.4); color:#e6d9a8;
    font-family:var(--font-tech); font-size:0.6rem; letter-spacing:1.2px; }
.t10w-x:hover { background:rgba(255,204,0,0.18); color:#fff; }

/* ═══ TOP10 — cabeçalho compacto (o foco da tela é o ranking) ═══ */
.t10-essenciais { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.t10-essenciais #top10-filter-select { width:120px; height:38px; padding:6px 8px; font-size:0.82rem; }
.btn.t10-mini { height:38px; min-width:38px; padding:0 9px; font-size:0.9rem; }
.btn.t10-revelar { height:38px; padding:0 13px; font-size:0.7rem; letter-spacing:.8px; }
/* ⚙️ aceso quando o painel está aberto, pra não parecer que sumiu conteúdo */
#btn-top10-eye.t10-aberto { border-color:var(--text-color,#00f2ff); color:var(--text-color,#00f2ff); }
.t10-controles { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.btn.t10-compacto { height:34px; padding:0 11px; font-size:0.72rem; letter-spacing:.6px; }
.t10-controles #sel-reveal-anim { width:auto; min-width:118px; height:34px; padding:4px 8px; font-size:0.74rem; }
.t10-obtencao { display:flex; align-items:center; gap:7px; flex-wrap:wrap; width:100%;
    margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,0.08); }
.t10-obt-rot { font-family:var(--font-tech); font-size:0.58rem; color:#4f5a66; letter-spacing:1.6px; white-space:nowrap; }
.t10-obtencao .top10-filter-chip { padding:4px 11px; font-size:0.66rem; }

/* ═══ TOP10 — carta promovida da menção honrosa pelo filtro ═══ */
.card-slot.slot-promovido { outline:2px dashed rgba(255,204,0,0.55); outline-offset:2px; }
.card-slot.slot-promovido .rank-badge { background:rgba(120,110,70,0.9) !important; color:#f0e3b0 !important; }
/* Canto superior DIREITO: embaixo moram fragmentos e playstyles, e à esquerda o
   número do rank (que estoura pra fora do slot) — os dois lugares batiam no selo.
   O texto é curto de propósito; a explicação inteira está no title e no aviso do topo. */
.slot-mh-selo { position:absolute; right:3px; top:3px; z-index:7;
    display:flex; align-items:center; gap:3px; white-space:nowrap; max-width:calc(100% - 34px);
    padding:3px 7px; border-radius:20px; background:rgba(12,10,4,0.94);
    border:1px solid rgba(255,204,0,0.5); color:#f0dc9a;
    font-family:var(--font-tech); font-size:0.47rem; letter-spacing:0.6px; }
.slot-mh-selo span { color:var(--gold,#e8b73a); font-size:0.66rem; line-height:1; }

/* ═══ TOP10 — dica da 1ª visita (o ranking abre borrado de propósito) ═══ */
.t10-dica { display:flex; align-items:flex-start; gap:11px; margin:10px auto 0; max-width:640px;
    padding:12px 14px; border-radius:13px; background:rgba(0,242,255,0.06);
    border:1px solid rgba(0,242,255,0.28); box-sizing:border-box; }
.t10-dica-mao { font-size:1.5rem; line-height:1; flex:0 0 auto; animation:t10Toca 1.6s ease-in-out infinite; }
@keyframes t10Toca { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.t10-dica div { flex:1 1 auto; min-width:0; font-family:var(--font-tech); font-size:0.7rem; line-height:1.55; color:#9fb3c2; }
.t10-dica b { display:block; color:#fff; font-size:0.82rem; margin-bottom:3px; letter-spacing:.5px; }
.t10-dica i { font-style:normal; color:var(--gold,#e8b73a); }
.t10-dica-x { flex:0 0 auto; width:32px; height:32px; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#c9d4e0; font-size:0.8rem; }
.t10-dica-x:hover { background:rgba(255,255,255,0.16); color:#fff; }
.fullscreen-mode .t10-dica { display:none !important; }

/* Top10 grad color picker */
.top10-bg-swatch { width:32px; height:32px; border-radius:50%; border:2px solid #555; overflow:hidden; padding:0; }
.top10-bg-swatch input[type=color] { width:200%; height:200%; margin:-50%; border:none; cursor:pointer; }

/* ═══════ FULLSCREEN ═══════ */
.fullscreen-mode #tier-header-bar,
.fullscreen-mode #top10-header-bar { display:none !important; }
.fullscreen-mode { padding:10px !important; }
.fullscreen-mode #capture-tier,
.fullscreen-mode #capture-top10 { border-radius:0; }
#btn-fs-exit { display:none; position:fixed; top:14px; left:14px; z-index:5000; }
.fullscreen-mode #btn-fs-exit { display:flex; }

/* ═══════ SEARCH HIGHLIGHT ═══════ */
.card-container.search-hidden { display:none; }
.card-container.search-match { outline:2px solid var(--primary); outline-offset:2px; border-radius:5px; }

.hidden { display:none !important; }

        /* ═══ HISTORY TIMELINE ═══ */
        #screen-history { justify-content:flex-start; padding-top:36px; }
        .history-entry { display:flex; align-items:center; gap:18px; background:var(--lobby-btn-bg); border:1px solid var(--glass-border); border-radius:12px; padding:14px 20px; margin-bottom:10px; width:100%; max-width:960px; transition:0.2s; }
        .history-entry:hover { border-color:var(--text-color); }
        .history-thumb { width:60px; height:86px; border-radius:6px; overflow:hidden; flex-shrink:0; background:#111; }
        .history-thumb img { width:100%; height:100%; object-fit:cover; }
        .history-body { flex:1; }
        .history-move { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
        .history-cat { font-family:var(--font-main); font-size:0.85rem; padding:4px 12px; border-radius:4px; color:#000; font-weight:bold; }
        .history-arrow { font-size:1.3rem; color:var(--text-color); }
        .history-meta { font-family:var(--font-tech); font-size:0.82rem; color:#555; letter-spacing:1px; }
        .history-time { font-family:var(--font-tech); font-size:0.8rem; color:#444; white-space:nowrap; text-align:right; }
        .history-empty { text-align:center; color:#444; font-family:var(--font-tech); font-size:1.3rem; letter-spacing:2px; margin:80px auto; }
        /* ═══ TAGS ═══ */
        .card-tags-wrap { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; justify-content:center; }
        .card-tag-chip { font-family:var(--font-tech); font-size:0.6rem; font-weight:700; letter-spacing:.5px; padding:2px 6px; border-radius:3px; color:#000; text-transform:uppercase; line-height:1.4; opacity:0.92; }
        /* ═══ BATCH SELECT ═══ */
        .batch-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; background:rgba(0,242,255,0.07); border:1px solid rgba(0,242,255,0.12); border-radius:10px; padding:14px 20px; margin-bottom:16px; }
        .batch-bar-count { font-family:var(--font-main); color:var(--text-color); font-size:1rem; white-space:nowrap; }
        .card-wait.batch-selected { border-color:var(--text-color); box-shadow:0 0 16px var(--primary-glow); background:rgba(0,242,255,0.06); }
        .batch-check { width:100%; height:26px; display:flex; align-items:center; justify-content:center; border-radius:4px; border:1px solid #444; background:rgba(0,0,0,0.5); font-family:var(--font-main); font-size:1rem; margin-bottom:6px; transition:0.2s; color:var(--text-color); }
        .batch-check.checked { background:var(--primary); border-color:var(--primary); color:#000; }
        /* ═══ DASHBOARD MODAL ═══ */
        .dash-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:6000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
        .dash-modal-overlay.active { display:flex; }
        .dash-modal-box { background:#0a0c12; border:1px solid var(--glass-border); border-radius:16px; padding:32px 36px; max-width:820px; width:95%; max-height:90vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,0.9); }
        .dash-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
        .dash-modal-header h2 { font-family:var(--font-title); font-size:2rem; color:var(--text-color); letter-spacing:2px; }
        .dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
        .dash-kpi { background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:10px; padding:16px; text-align:center; }
        .dash-kpi-num { font-family:var(--font-main); font-size:2.2rem; color:var(--text-color); line-height:1; }
        .dash-kpi-lbl { font-family:var(--font-tech); font-size:0.72rem; color:#555; letter-spacing:2px; margin-top:4px; }
        .dash-body { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
        .dash-section h3 { font-family:var(--font-title); color:var(--gold); font-size:1.3rem; letter-spacing:1px; margin-bottom:16px; }
        .dash-pie-wrap { display:flex; align-items:center; gap:18px; }
        .dash-legend { flex:1; display:flex; flex-direction:column; gap:7px; }
        .dash-legend-item { display:flex; align-items:center; gap:8px; font-family:var(--font-tech); font-size:0.85rem; }
        .dash-legend-color { width:12px; height:12px; border-radius:2px; flex-shrink:0; }
        .dash-legend-label { flex:1; color:#aaa; }
        .dash-legend-count { font-family:var(--font-main); color:var(--text-color); font-size:1rem; }
        .dash-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
        .dash-bar-label { font-family:var(--font-tech); font-size:0.82rem; color:#aaa; width:80px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .dash-bar-wrap { flex:1; background:rgba(255,255,255,0.05); border-radius:3px; height:8px; overflow:hidden; }
        .dash-bar-fill { height:100%; border-radius:3px; transition:width 0.8s ease; }
        .dash-bar-count { font-family:var(--font-main); font-size:0.85rem; color:var(--text-color); width:32px; text-align:right; }
        /* ═══ CARD EDITOR MODAL (fixed) ═══ */
        .ce-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.87); z-index:6500; display:none; align-items:center; justify-content:center; backdrop-filter:blur(10px); padding:16px; }
        .ce-modal-overlay.active { display:flex; }
        .ce-modal-box { background:linear-gradient(160deg,#0d0f18,#0a0c10); border:1px solid rgba(255,255,255,0.1); border-radius:18px; width:95%; max-width:920px; max-height:92vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04); display:flex; flex-direction:column; }
        .ce-header { display:flex; justify-content:space-between; align-items:center; padding:22px 32px; border-bottom:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.025); border-radius:18px 18px 0 0; position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
        .ce-header h2 { font-family:var(--font-main); font-size:1.35rem; color:var(--text-color); letter-spacing:2px; margin:0; }
        .ce-body { display:grid; grid-template-columns:200px 1fr; gap:28px; padding:28px 32px 32px; align-items:start; }
        .ce-left { display:flex; flex-direction:column; align-items:center; gap:12px; }
        .ce-card-img { width:200px; border-radius:10px; filter:drop-shadow(0 10px 28px rgba(0,0,0,0.9)); }
        .ce-right { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
        .ce-selected { outline:3px solid white !important; outline-offset:2px; transform:scale(1.02) !important; }
        /* Fragments display */
        .card-frag-wrap { display:flex; justify-content:center; margin-top:3px; }
        .card-frag-chip { font-family:var(--font-main); font-size:0.62rem; padding:2px 7px; border-radius:3px; background:rgba(255,200,0,0.18); border:1px solid rgba(255,200,0,0.35); color:#ffd060; display:flex; align-items:center; gap:3px; }
        .card-obtain-chip { background:rgba(100,180,255,0.15) !important; border-color:rgba(100,180,255,0.35) !important; color:#aaddff !important; }
        /* Playstyle icons on cards */
        .card-ps-wrap { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; justify-content:center; max-width:100%; }
        .card-ps-icon { width:26px; height:26px; border-radius:4px; object-fit:cover; flex-shrink:0;
            image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges;
            box-shadow:0 1px 4px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12); }
        /* Fix overlays in top10 slots */
        .card-slot .card-frag-wrap { position:absolute; bottom:5px; left:0; right:0; z-index:10; pointer-events:none; }
        .card-slot .card-ps-wrap   { position:absolute; bottom:30px; left:0; right:0; z-index:10; pointer-events:none; margin-top:0; }
        /* Chips on top of card images need solid backdrop */
        .card-slot .card-frag-chip {
            background:rgba(0,0,0,0.82) !important;
            border-color:rgba(255,200,0,0.65) !important;
            color:#ffd060 !important;
            backdrop-filter:blur(3px);
            text-shadow:0 1px 3px rgba(0,0,0,0.9);
            font-size:0.65rem !important;
            padding:3px 8px !important;
        }
        .card-slot .card-obtain-chip {
            background:rgba(0,0,0,0.82) !important;
            border-color:rgba(100,180,255,0.65) !important;
            color:#aaddff !important;
        }
        /* Obtain type chips in review/editor */
        .obtain-chips-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
        .obtain-chip { padding:7px 14px; border-radius:6px; border:1px solid #3a4a5c; background:rgba(100,180,255,0.07); color:#aaddff; font-family:var(--font-main); font-size:0.78rem; letter-spacing:.5px; transition:all 0.18s; }
        .obtain-chip:hover { border-color:#aaddff; background:rgba(100,180,255,0.15); }
        .obtain-chip.selected { background:rgba(100,180,255,0.3); border-color:#aaddff; color:#fff; font-weight:900; box-shadow:0 0 10px rgba(100,180,255,0.3); }
        /* Playstyle chips in review/editor */
        .ps-chip { padding:6px 10px; border-radius:6px; border:1px solid #3a4a5c; background:rgba(255,255,255,0.04); color:#bbb; font-family:var(--font-main); font-size:0.76rem; display:flex; align-items:center; gap:5px; transition:all 0.18s; }
        .ps-chip:hover { border-color:var(--text-color); background:rgba(255,255,255,0.08); }
        .ps-chip.selected { background:rgba(0,242,255,0.12); border-color:var(--text-color); color:#fff; box-shadow:0 0 8px var(--primary-glow); }
        .ps-chip img { width:22px; height:22px; border-radius:3px; object-fit:cover; flex-shrink:0; }
        /* Chip de playstyle só com ícone (sem nome) — mais compacto, ícone maior */
        .ps-chip.ps-icon-only { padding:5px; }
        .ps-chip.ps-icon-only img { width:30px; height:30px; border-radius:4px; }
        .ps-chip.ps-icon-only.selected { transform:scale(1.06); }
        /* Groups in Apresentação */
        .apres-groups-section { width:100%; margin-top:14px; }
        .apres-group-item { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:12px 16px; margin-bottom:8px; }
        .apres-group-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
        .apres-group-name { font-family:var(--font-title); font-size:1.2rem; color:var(--text-color); letter-spacing:1px; }
        .apres-group-cards { display:flex; flex-wrap:wrap; gap:6px; }
        .apres-group-card-thumb { width:50px; border-radius:4px; cursor:pointer; transition:transform 0.15s; }
        .apres-group-card-thumb:hover { transform:scale(1.1); }
        .apres-group-search { width:100%; background:rgba(0,0,0,0.4); border:1px solid #444; color:white; padding:8px 12px; border-radius:6px; font-family:var(--font-body); font-size:0.88rem; outline:none; margin-top:8px; }
        .apres-group-search:focus { border-color:var(--primary); }
        .apres-group-search-results { max-height:200px; overflow-y:auto; background:#0d0f18; border:1px solid var(--glass-border); border-radius:8px; margin-top:4px; }
        .apres-group-result { display:flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.12s; }
        .apres-group-result:hover { background:rgba(255,255,255,0.05); }
        .apres-group-result img { width:36px; border-radius:3px; }
        /* ═══ TAGS SCREEN — Ideia D ═══ */
        #screen-tags { justify-content:flex-start; padding-top:36px; }
        .tags-screen-list { width:100%; max-width:1200px; display:flex; flex-direction:column; gap:0; margin-top:10px; }

        /* Bloco de cada tag */
        .tags-section {
            background: var(--lobby-btn-bg);
            border: 1px solid var(--lobby-btn-border);
            border-radius: 14px;
            overflow: hidden;
            margin-bottom: 14px;
            transition: box-shadow 0.2s;
        }
        .tags-section:hover { box-shadow: 0 0 0 1px var(--lobby-btn-border), 0 8px 30px rgba(0,0,0,0.5); }

        /* Linha colorida separadora no topo */
        .tags-section-bar { height: 3px; width: 100%; }

        /* Header da seção */
        .tags-section-header {
            padding: 18px 24px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .tags-section-dot {
            width: 14px; height: 14px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 0 10px currentColor;
        }
        .tags-section-name {
            font-family: var(--font-title);
            font-size: 2rem;
            letter-spacing: 2px;
            color: #fff;
            text-transform: uppercase;
            line-height: 1;
            flex: 1;
        }
        .tags-section-meta {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .tags-section-count {
            font-family: var(--font-main);
            font-size: 0.85rem;
            padding: 4px 12px;
            border-radius: 20px;
            background: rgba(255,255,255,0.06);
            color: #888;
            letter-spacing: 1px;
        }
        .tags-section-empty-msg {
            font-family: var(--font-tech);
            font-size: 0.82rem;
            color: #444;
            padding: 4px 0;
            letter-spacing: 1px;
        }

        /* ⚠️ AQUI MORAVA UM BLOCO SEM SELETOR, e ele nao era inofensivo.
           Achado em 22/09/2026: um comentario ("Container de cartas - scroll
           horizontal") seguido de 19 declaracoes SOLTAS e um `}`. Alguem
           apagou a linha do seletor em alguma edicao antiga.

           O QUE ISSO CAUSAVA, calado: o parser de CSS le `position` como o
           comeco de um SELETOR e engole tudo ate a proxima `{`. A proxima
           `{` era a do `.ps-ferramentas` - ou seja, o seletor dele virava
           parte de um seletor invalido e as declaracoes dele viravam o corpo
           de uma regra que nao casa com nada. **O `.ps-ferramentas` NUNCA
           existiu na folha**, conferido no navegador: nenhuma regra com esse
           nome aparece em `document.styleSheets`.

           Era por isso que a contagem dos PLAYSTYLES ficava colada no filtro
           (o Boss reclamou em 22/09) e o meu primeiro conserto "nao pegou": a
           regra que eu editei estava sendo destruida antes de ser lida.

           As 19 declaracoes nao estilizavam nada (sem seletor, nao casavam
           com elemento nenhum), entao apagar nao muda pixel nenhum - so
           devolve a regra de baixo. */

        /* ═══════════════════════════════════
           PLAYSTYLES — GRADE DE SELEÇÃO
        ═══════════════════════════════════ */
        /* ── ordenação da grade ── */
        .ps-ferramentas { display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%; margin:18px 0 14px; }
        /* largura automática + folga à direita: com width fixo o texto da opção
           ("Menos usados primeiro") ficava cortado pela seta do select */
        .ps-ordem-sel { height:38px; width:auto; min-width:232px; max-width:100%;
            padding:6px 34px 6px 12px; font-size:0.84rem; text-overflow:ellipsis; }
        .ps-vazio { grid-column:1/-1; text-align:center; padding:40px 20px; font-family:var(--font-tech); color:#4a5560; letter-spacing:1.4px; }
        /* ── retrato do estilo (detalhe) ── */
        .ps-retrato { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.07); border-radius:12px;
            padding:14px 16px; margin-bottom:14px; }
        .ps-retrato-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
        .ps-niveis-chips { display:flex; gap:7px; flex-wrap:wrap; }
        /* ── selo de nível na lista corrida ── */
        /* ── lista de cartas do playstyle: uma linha embaixo da outra ── */
        .pss-lista { display:flex; flex-direction:column; gap:8px; padding:4px 0 6px; }
        .pss-row { display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; cursor:pointer;
            border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
            transition:.15s; }
        .pss-row:hover { background:rgba(255,255,255,0.06); border-color:var(--text-color,#00f2ff); transform:translateX(2px); }
        .pss-img { width:76px; min-width:76px; border-radius:7px; display:block; }
        .pss-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
        .pss-nome { font-family:var(--font-title); font-size:1.02rem; line-height:1; color:#fff;
            text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .pss-linha { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
        .pss-cat { padding:2px 8px; border-radius:9px; font-family:var(--font-tech); font-size:0.52rem;
            letter-spacing:.6px; font-weight:800; }
        .pss-ger { font-family:var(--font-title); font-size:1rem; line-height:1; color:var(--text-color,#00f2ff); }
        .pss-pos, .pss-evento { font-family:var(--font-tech); font-size:0.58rem; letter-spacing:1px; color:#7d8a96; }
        .pss-custo { font-family:var(--font-tech); font-size:0.6rem; letter-spacing:.5px; color:var(--gold,#e8b73a); }
        .pss-obt   { font-family:var(--font-tech); font-size:0.6rem; letter-spacing:.5px; color:#8fc7dd; }
        /* o nível vive AQUI, ao lado da carta — nunca sobre a arte dela */
        .pss-nivel { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 3px; border-radius:11px;
            font-family:var(--font-tech); font-size:0.52rem; letter-spacing:1px; font-weight:800; }
        .pss-nivel img { width:16px; height:16px; border-radius:4px; object-fit:cover; display:block; }
        .pss-nivel.n2 { background:linear-gradient(135deg,#f0cd5c,#d29b1e); color:#141002; }
        .pss-nivel.n1 { background:linear-gradient(135deg,#e2e8ee,#a8b4c0); color:#141618; }
        .pss-seta { flex:0 0 auto; color:#4a5560; font-size:1.3rem; line-height:1; }
        @media (max-width:420px){
            .pss-img { width:62px; min-width:62px; }
            .pss-nome { font-size:0.9rem; }
            .pss-row { gap:9px; padding:8px 9px 8px 8px; }
        }
        /* ⚠️ 22/09/2026 · TRÊS POR LINHA, pedido do Boss. Eram dois no celular
           (a regra do 03-viewer-mobile.css) e `auto-fill` de 160px no resto.
           Com três, o card fica menor e a lista inteira cabe em menos rolagem. */
        .ps-grid-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:10px 0 28px; }
        @media (min-width:900px) { .ps-grid-wrap { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; } }
        .ps-grid-card {
            background:var(--lobby-btn-bg); border:1px solid var(--lobby-btn-border);
            border-radius:16px; padding:28px 16px 22px;
            display:flex; flex-direction:column; align-items:center; gap:10px;
            cursor:pointer; transition:all 0.22s; position:relative; overflow:hidden;
        }
        /* o risco do pé era CIANO cravado, de antes do tema COPA: agora ele
           sai de var(--text-color) e acompanha o tema, como o resto do app */
        .ps-grid-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; z-index:1; background:linear-gradient(90deg,var(--text-color),transparent); opacity:.75; }
        .ps-grid-card:hover { transform:translateY(-5px); border-color:var(--text-color); box-shadow:0 10px 36px rgba(0,242,255,0.12),0 0 0 1px rgba(0,242,255,0.10); }
        .ps-grid-card:hover::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,242,255,0.05),transparent); pointer-events:none; }
        .ps-grid-card:active { transform:scale(0.97); }
        /* ⚠️ O FUNDO DO CARD (22/09/2026)
           O Boss: *"hoje o fundo é muito simples/preto"*. O fundo agora tem
           DUAS camadas, e as duas são desenhadas aqui:

             1. um brilho que sobe do pé do card, na cor do tema;
             2. a arte, quando ela existir, em `img/botoes/ps-fundo.webp`.

           A arte entra por `::before` de propósito: enquanto o arquivo não
           existir, o navegador não pinta nada e o card fica com a camada 1,
           que já é bonita. Nada de buraco, nada de ícone quebrado - a mesma
           regra dos botões com arte do resto do app.

           E ela é ESCURECIDA e desfocada nas bordas: o que manda no card é o
           ícone, o nome e o número, e fundo que compete com eles é fundo que
           atrapalha. */
        .ps-grid-card { background:
            radial-gradient(120% 90% at 50% 118%, rgba(0,200,75,0.20), transparent 62%),
            linear-gradient(170deg, rgba(255,255,255,0.05), rgba(0,0,0,0.30) 62%),
            #060d08; }
        .ps-grid-card::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
            background-image:url('img/botoes/ps-fundo.webp'); background-size:cover; background-position:center;
            opacity:0.42; mix-blend-mode:screen; }
        .ps-grid-card > * { position:relative; z-index:1; }
        .ps-grid-card:hover::before { opacity:0.58; }
        .ps-grid-icon { width:56px; height:56px; border-radius:12px; object-fit:cover; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.95)); }
        .ps-grid-icon-emoji { width:46px; height:46px; color:var(--text-color); display:flex; align-items:center; justify-content:center; }
        .ps-grid-icon-emoji svg { width:100%; height:100%; }
        .ps-grid-name { font-family:var(--font-title); font-size:1rem; color:#fff; letter-spacing:0.8px; text-align:center; line-height:1.15; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,0.85); }
        .ps-grid-count { font-family:var(--font-tech); font-size:0.64rem; color:#b9c6d6; letter-spacing:1.2px; padding:3px 10px; background:rgba(0,0,0,0.45); border-radius:20px; }
        /* a etiqueta com o desenho ao lado do seletor de ordem */
        /* ── A CAPA DO PLAYSTYLE ABERTO (22/09/2026) ──────────────────
           A ordem manda: joia + nome, a EXPLICAÇÃO, e só então os fatos. */
        .psd-capa { width:100%; background:
              radial-gradient(120% 100% at 50% -20%, rgba(0,200,75,0.16), transparent 60%),
              rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.08); border-radius:16px;
            padding:18px 18px 16px; margin:4px 0 18px; box-sizing:border-box; }
        .psd-heroi { display:flex; align-items:center; gap:14px; }
        .psd-joia { width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0;
            filter:drop-shadow(0 4px 14px rgba(0,0,0,0.85)); }
        .psd-joia-vazia { display:flex; align-items:center; justify-content:center; color:var(--text-color); }
        .psd-joia-vazia svg { width:40px; height:40px; }
        .psd-nome { font-family:var(--font-title); font-size:1.6rem; line-height:1.05; color:#fff;
            letter-spacing:1px; text-transform:uppercase; min-width:0; word-break:break-word; }
        /* ⚠️ RESPIRO ENTRE A EXPLICACAO E OS FATOS (22/09, 3a leva)
           O Boss: *"ao clicar em playstyle as estatisticas ainda estao muito
           proximas"*. A explicacao e os tres fatos eram dois paragrafos
           colados; agora existe uma linha entre eles. */
        .psd-desc { font-family:var(--font-main,sans-serif); font-size:0.94rem; line-height:1.55;
            color:#d3dde8; margin:16px 0 0; padding-bottom:16px;
            border-bottom:1px solid rgba(255,255,255,0.07); }
        .psd-desc-vazia { color:#6f7d8f; font-style:italic; }
        /* ⚠️ OS TRES FATOS NAO TINHAM REGRA NENHUMA. Conferido em 22/09: nao
           existe `.ps-fatos` em folha nenhuma - eles estavam saindo com o
           estilo de paragrafo solto, colados na explicacao. Era isso que o
           Boss viu como *"as estatisticas ainda estao muito proximas"*.
           (Provavelmente a regra era uma das que o bloco sem seletor comeu.) */
        /* o desenho no rotulo do painel de carta, no lugar do emoji */
        .ps-stat-lbl, .ps-info-lbl { display:flex; align-items:center; gap:6px; }
        .ps-stat-ico { width:14px; height:14px; flex-shrink:0; opacity:0.85; }

        .ps-fatos { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; }
        .ps-fato { font-family:var(--font-tech); font-size:0.8rem; color:#93a2b4; letter-spacing:0.4px; }
        .ps-fato b { color:#eaf1f8; font-weight:700; }

        .psd-listahdr { display:flex; align-items:center; justify-content:space-between; gap:12px;
            padding:0 2px 10px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:12px; }
        .psd-listahdr-tit { font-family:var(--font-tech); font-size:0.7rem; letter-spacing:2px;
            color:#7a8698; text-transform:uppercase; }
        @media (max-width:420px) { .psd-nome { font-size:1.3rem; } .psd-joia { width:48px; height:48px; } }
        /* ⚠️ ESPACO ENTRE A CONTAGEM E O FILTRO (22/09, 3a leva)
           O Boss: *"a parte de 18 estilo ta muito perto do filtro deixe
           espacamento entre os dois"*. Eram vizinhos de flex com o gap de
           8px da fileira; agora a contagem ocupa a linha inteira e o filtro
           desce, com respiro entre os dois. */
        .ps-contagem { flex:1 0 100%; font-family:var(--font-tech); font-size:0.72rem;
            color:#7a8698; letter-spacing:1px; margin-bottom:10px; }
        .ps-filtro { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05);
            border:1px solid rgba(255,255,255,0.12); border-radius:9px; padding:0 10px; cursor:pointer; }
        .ps-filtro .ps-ordem-sel { background:none; border:none; height:36px; }
        .ps-filtro-ico { display:inline-flex; align-items:center; flex-shrink:0; color:#8aa0b4; }
        .ps-filtro-ico svg { width:16px; height:16px; }
        .ps-bt-img { display:inline-flex; align-items:center; gap:7px; }
        .ps-bt-img .ps-filtro-ico { color:inherit; }
        .ps-hdr-ico { width:40px; height:40px; color:var(--text-color); }
        .ps-hdr-ico svg { width:100%; height:100%; }

        /* ═══════════════════════════════════
           PLAYSTYLES — TELA DE DETALHE
        ═══════════════════════════════════ */
        .ps-detail-desc-wrap { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px 20px; margin-bottom:16px; }
        .ps-detail-desc-label { font-family:var(--font-tech); font-size:0.68rem; color:#444; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:8px; }
        .ps-detail-desc-input { font-family:var(--font-body); font-size:0.92rem; color:#aaa; line-height:1.7; border:none; background:transparent; resize:none; width:100%; outline:none; }
        .ps-detail-desc-input::placeholder { color:#2a2a2a; font-style:italic; }
        .ps-detail-desc-foot { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:8px; border-top:1px solid rgba(255,255,255,0.04); padding-top:10px; }
        .ps-saved-badge { font-family:var(--font-tech); font-size:0.7rem; color:#00ff96; letter-spacing:1px; opacity:0; transition:opacity 0.4s; }

        /* ═══════════════════════════════════
           PLAYSTYLES — PAINEL LATERAL (carta)
        ═══════════════════════════════════ */
        .ps-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:6200; display:none; align-items:stretch; justify-content:flex-end; backdrop-filter:blur(8px); }
        .ps-panel-overlay.active { display:flex; }
        .ps-panel-box { background:linear-gradient(160deg,#0d0f18,#0a0c10); border-left:1px solid rgba(255,255,255,0.1); border-top:1px solid rgba(255,255,255,0.06); width:min(860px,100vw); display:flex; flex-direction:column; overflow:hidden; box-shadow:-24px 0 70px rgba(0,0,0,0.95); animation:psPanelIn 0.3s cubic-bezier(0.22,1,0.36,1); }
        @keyframes psPanelIn { from{transform:translateX(80px);opacity:0} to{transform:translateX(0);opacity:1} }
        .ps-panel-hdr { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; border-bottom:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.025); flex-shrink:0; backdrop-filter:blur(12px); gap:12px; }
        .ps-panel-hdr-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
        .ps-panel-hdr-cat { font-family:var(--font-tech); font-size:0.78rem; font-weight:700; padding:5px 14px; border-radius:5px; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
        .ps-panel-hdr-meta { font-family:var(--font-tech); font-size:0.82rem; color:#555; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .ps-panel-body { display:grid; grid-template-columns:240px 1fr; gap:28px; padding:28px; overflow-y:auto; flex:1; align-items:start; }
        .ps-panel-left { display:flex; flex-direction:column; align-items:center; gap:14px; }
        .ps-panel-card-img { width:240px; border-radius:14px; filter:drop-shadow(0 16px 40px rgba(0,0,0,0.95)); }
        .ps-panel-right { display:flex; flex-direction:column; gap:10px; }
        .ps-info-block { background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:13px 16px; }
        .ps-info-lbl { font-family:var(--font-title); font-size:1rem; color:var(--text-color); letter-spacing:1px; margin-bottom:5px; }
        .ps-info-val { font-family:var(--font-tech); font-size:0.98rem; color:#ccc; letter-spacing:0.5px; }
        .ps-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .ps-stat-item { background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:12px 14px; }
        .ps-stat-lbl { font-family:var(--font-tech); font-size:0.66rem; color:#555; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
        .ps-stat-val { font-family:var(--font-main); font-size:1.5rem; color:var(--text-color); line-height:1; }
        .ps-stat-stars { font-size:0.85rem; letter-spacing:1px; display:block; margin-top:2px; }
        .ps-panel-ps-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
        .ps-panel-ps-chip { display:flex; align-items:center; gap:6px; background:rgba(0,242,255,0.08); border:1px solid rgba(0,242,255,0.12); border-radius:7px; padding:5px 10px; font-family:var(--font-main); font-size:0.78rem; color:var(--text-color); letter-spacing:.5px; }
        .ps-panel-ps-chip img { width:24px; height:24px; border-radius:4px; object-fit:cover; }
        .ps-notes-text { font-family:var(--font-body); font-size:0.88rem; color:#aaa; line-height:1.7; white-space:pre-wrap; }

        /* ═══ CARD PRESENTATION SCREEN ═══ */
        #screen-apresentacao { justify-content:flex-start; padding-top:36px; }
        .apres-layout { width:100%; max-width:1100px; display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:flex-start; margin-top:16px; }
        .apres-left { display:flex; flex-direction:column; gap:16px; }
        /* Search panel */
        .apres-search-wrap { position:relative; }
        .apres-search-wrap input { width:100%; background:rgba(0,0,0,0.5); border:1px solid #444; color:white; padding:12px 16px 12px 42px; border-radius:8px; font-family:var(--font-body); font-size:0.95rem; outline:none; transition:all .2s; }
        .apres-search-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-glow); }
        .apres-search-wrap .search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:1.2rem; opacity:0.5; pointer-events:none; }
        .apres-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#0d0f18; border:1px solid var(--glass-border); border-radius:10px; z-index:500; max-height:360px; overflow-y:auto; box-shadow:0 16px 50px rgba(0,0,0,0.8); }
        .apres-result-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; transition:background 0.15s; }
        .apres-result-item:hover { background:rgba(255,255,255,0.06); }
        .apres-result-item:last-child { border-bottom:none; }
        .apres-result-img { width:46px; border-radius:4px; flex-shrink:0; }
        .apres-result-body { flex:1; }
        .apres-result-cat { font-family:var(--font-tech); font-size:0.65rem; padding:2px 7px; border-radius:3px; font-weight:700; }
        .apres-result-meta { font-family:var(--font-tech); font-size:0.75rem; color:#555; margin-top:3px; }
        .apres-empty { font-family:var(--font-tech); color:#444; font-size:0.85rem; padding:16px; text-align:center; letter-spacing:1px; }
        /* Card preview */
        .apres-card-preview { background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:14px; min-height:200px; }
        .apres-placeholder { font-family:var(--font-tech); color:#333; font-size:1rem; letter-spacing:2px; text-align:center; margin:auto; }
        /* Presentation card (right side) */
        .apres-card-output { display:none; }
        .apres-card-output.visible { display:block; }
        #apres-capture { border-radius:16px; overflow:hidden; background:linear-gradient(160deg,#0a0c16,#050508); border:1px solid var(--glass-border); padding:32px 28px; display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; min-height:500px; }
        #apres-capture::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--primary-glow) 0%, transparent 60%); opacity:0.4; pointer-events:none; }
        .apres-event-label { font-family:var(--font-tech); font-size:0.7rem; letter-spacing:4px; color:var(--text-color); opacity:0.5; text-transform:uppercase; }
        .apres-card-img { width:240px; filter:drop-shadow(0 12px 36px rgba(0,0,0,0.9)); border-radius:8px; position:relative; z-index:1; }
        .apres-cat-banner { font-family:var(--font-title); font-size:2.2rem; font-weight:900; letter-spacing:3px; text-align:center; padding:10px 32px; border-radius:8px; color:#000; text-shadow:none; }
        .apres-info-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
        .apres-info-chip { font-family:var(--font-main); font-size:0.78rem; padding:5px 14px; border-radius:20px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#ccc; letter-spacing:1px; }
        .apres-tags-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
        .apres-frag-display { font-family:var(--font-main); font-size:1rem; color:var(--gold); letter-spacing:1px; display:flex; align-items:center; gap:6px; }
        .apres-notes-text { font-family:var(--font-tech); font-size:0.82rem; color:#bbb; max-width:280px; text-align:center; line-height:1.5; font-style:italic; position:relative; z-index:1; }
        .apres-watermark { font-family:var(--font-title); font-size:0.9rem; letter-spacing:4px; opacity:0.2; color:var(--text-color); margin-top:auto; }
        /* ═══ TIER FILTERS ═══ */
        .tier-tag-filter-wrap { display:flex; align-items:center; gap:6px; }
        .tier-tag-filter-mode { font-size:0.75rem; font-family:var(--font-tech); color:#555; white-space:nowrap; }
        .tier-row-drag-handle { width:28px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; opacity:0.25; cursor:grab; transition:opacity 0.2s; color:white; flex-shrink:0; }
        .tier-row-drag-handle:hover { opacity:0.7; }
        .tier-row.dragging-row { opacity:0.4; }
        .tier-row.drag-row-over { outline:2px dashed var(--text-color); outline-offset:2px; }
        /* ═══ TOP10 HISTORY MODAL ═══ */
        .t10hist-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:6200; display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
        .t10hist-overlay.active { display:flex; }
        .t10hist-box { background:#0a0c12; border:1px solid var(--glass-border); border-radius:16px; padding:0; max-width:720px; width:95%; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 40px 100px rgba(0,0,0,0.9); }
        .t10hist-header { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.02); }
        .t10hist-header h2 { font-family:var(--font-title); font-size:1.6rem; color:var(--gold); letter-spacing:2px; }
        .t10hist-body { overflow-y:auto; padding:20px 28px; flex:1; }
        .t10hist-entry { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.05); border-radius:10px; padding:12px 16px; margin-bottom:8px; transition:0.2s; }
        .t10hist-entry:hover { border-color:var(--text-color); }
        .t10hist-thumb { width:52px; border-radius:5px; flex-shrink:0; }
        .t10hist-body-text { flex:1; }
        .t10hist-rank { font-family:var(--font-main); font-size:1.1rem; }
        .t10hist-rank.enter { color:#00ff96; }
        .t10hist-rank.exit { color:var(--danger); }
        .t10hist-meta { font-family:var(--font-tech); font-size:0.75rem; color:#555; letter-spacing:1px; margin-top:3px; }
        .t10hist-time { font-family:var(--font-tech); font-size:0.75rem; color:#444; white-space:nowrap; text-align:right; }
        .t10hist-pos-filter { background:rgba(0,0,0,0.5); border:1px solid #444; color:white; padding:8px 12px; border-radius:6px; font-family:var(--font-main); outline:none; }
        /* ═══ TIER HEADER COLLAPSE ═══ */
        .tier-controls-collapsible { display:flex; gap:9px; row-gap:9px; align-items:center; flex-wrap:wrap; transition:all 0.3s; }
        .tier-controls-collapsible.collapsed { display:none; }
        .tier-controls-collapsible > * { flex:0 0 auto; }
        .tier-ctrl-divider { width:1px; align-self:stretch; min-height:30px; background:rgba(255,255,255,0.08); margin:0 1px; }
        .btn-eye-toggle { width:40px; padding:10px 0; font-size:1.1rem; }
        /* ═══ TIER THEMES PANEL ═══ */
        .tier-theme-panel-wrap { position:relative; }
        .tier-theme-panel { position:absolute; top:calc(100% + 8px); right:0; background:#0d0f18; border:1px solid var(--glass-border); border-radius:12px; padding:16px; z-index:300; box-shadow:0 16px 50px rgba(0,0,0,0.9); width:340px; display:none; }
        .tier-theme-panel.open { display:block; }
        .tier-theme-panel-title { font-family:var(--font-tech); font-size:0.72rem; letter-spacing:3px; color:#555; margin-bottom:12px; text-transform:uppercase; }
        .tier-theme-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
        .tier-theme-swatch { border-radius:8px; height:52px; cursor:pointer; border:2px solid transparent; transition:all 0.2s; overflow:hidden; display:flex; align-items:flex-end; }
        .tier-theme-swatch:hover { transform:scale(1.06); border-color:rgba(255,255,255,0.4); }
        .tier-theme-swatch.active { border-color:var(--text-color); box-shadow:0 0 12px var(--primary-glow); }
        .tier-theme-swatch span { font-family:var(--font-tech); font-size:0.58rem; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.6); padding:2px 5px; width:100%; text-align:center; }
        /* Tier themes on capture area */
        #capture-tier.tier-th-stadium,#capture-top10.tier-th-stadium { background:linear-gradient(180deg,#0a1a0a,#061206)!important; background-image:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(0,120,30,0.04) 60px,rgba(0,120,30,0.04) 62px)!important; }
        #capture-tier.tier-th-neon,#capture-top10.tier-th-neon { background:linear-gradient(135deg,#04001a,#0a0020,#000a18)!important; box-shadow:inset 0 0 80px rgba(0,200,255,0.07)!important; }
        #capture-tier.tier-th-gold,#capture-top10.tier-th-gold { background:linear-gradient(160deg,#120c00,#1a1000,#0e0800)!important; box-shadow:inset 0 0 60px rgba(255,200,0,0.05)!important; }
        #capture-tier.tier-th-fire,#capture-top10.tier-th-fire { background:linear-gradient(180deg,#1a0400,#120200,#0a0100)!important; box-shadow:inset 0 0 80px rgba(255,60,0,0.07)!important; }
        #capture-tier.tier-th-ice,#capture-top10.tier-th-ice { background:linear-gradient(180deg,#00101a,#001525,#000e18)!important; box-shadow:inset 0 0 80px rgba(130,220,255,0.07)!important; }
        #capture-tier.tier-th-minimal,#capture-top10.tier-th-minimal { background:#141414!important; }
        #capture-tier.tier-th-copa,#capture-top10.tier-th-copa { background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(0,60,15,0.6),transparent 60%),linear-gradient(180deg,#010a02,#020b02)!important; }
        #capture-tier.tier-th-purple,#capture-top10.tier-th-purple { background:linear-gradient(135deg,#080012,#040008,#060010)!important; box-shadow:inset 0 0 80px rgba(150,0,255,0.07)!important; }
        /* ═══ REVIEW SCREEN REDESIGN ═══ */
        #screen-review { padding-top:20px; }
        .review-layout { display:grid; grid-template-columns:280px 1fr; gap:24px; width:100%; max-width:1200px; margin-top:0; align-items:start; }
        .review-left { display:flex; flex-direction:column; align-items:center; gap:12px; position:sticky; top:20px; }
        .review-card-frame { position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
        .review-card-frame::before { content:''; position:absolute; width:240px; height:240px; background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%); pointer-events:none; }
        #review-img { width:260px; border-radius:10px; filter:drop-shadow(0 12px 32px rgba(0,0,0,0.9)); z-index:1; position:relative; }
        .review-prog-badge { background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; padding:10px 16px; font-family:var(--font-main); font-size:0.82rem; color:var(--gold); letter-spacing:2px; text-align:center; width:100%; }
        .review-right { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
        .review-block { background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px 16px; }
        .review-block.full { grid-column:span 2; }
        .review-block-label { font-family:var(--font-title); font-size:1.1rem; color:var(--text-color); letter-spacing:1px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
        .review-block-label.gold { color:var(--gold); }
        .grade-buttons-compact { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
        .btn-grade-compact { padding:11px 8px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; font-family:var(--font-main); font-size:0.8rem; color:#000; font-weight:bold; text-transform:uppercase; transition:all 0.2s; position:relative; overflow:hidden; letter-spacing:.5px; cursor:pointer; }
        .btn-grade-compact:hover { filter:brightness(1.2); transform:scale(1.03) translateY(-1px); }
        .btn-grade-compact .kbd-hint { position:absolute; top:3px; right:5px; font-family:var(--font-tech); font-size:0.6rem; opacity:0.6; color:inherit; background:rgba(0,0,0,0.25); border-radius:2px; padding:1px 4px; }
        /* ═══ APRESENTAÇÃO IMPROVED ═══ */
        .apres-layout { grid-template-columns:360px 1fr; gap:36px; }
        #apres-capture { background:linear-gradient(160deg,#0a0c16,#050508); border-radius:20px; border:1px solid rgba(255,255,255,0.08); padding:36px 28px 28px; display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; overflow:hidden; min-height:520px; }
        #apres-capture::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% -10%,var(--primary-glow),transparent 60%); opacity:0.5; pointer-events:none; }
        .apres-card-img { width:260px; filter:drop-shadow(0 16px 40px rgba(0,0,0,0.95)); border-radius:10px; position:relative; z-index:1; }
        .apres-cat-banner { font-family:var(--font-title); font-size:2.5rem; font-weight:900; letter-spacing:4px; text-align:center; padding:12px 36px; border-radius:10px; z-index:1; position:relative; }
        .apres-left { gap:20px; }
        .apres-card-preview { min-height:160px; }
        /* ═══ LIVE MODE ═══ */
        .banco-search-wrap { position:relative; }
        .banco-search-wrap input { background:rgba(0,0,0,0.5); border:1px solid #444; color:white; padding:10px 14px 10px 38px; border-radius:6px; font-family:var(--font-body); font-size:0.9rem; width:220px; outline:none; transition:all .2s; }
        .banco-search-wrap input:focus { border-color:var(--primary); width:280px; }
        .banco-search-wrap .search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:1.1rem; opacity:0.5; pointer-events:none; }
        /* Search results panel */
        .banco-search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#0d0f18; border:1px solid var(--glass-border); border-radius:10px; z-index:500; max-height:380px; overflow-y:auto; box-shadow:0 16px 50px rgba(0,0,0,0.8); }
        .banco-search-result-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; transition:background 0.15s; }
        .banco-search-result-item:hover { background:rgba(255,255,255,0.05); }
        .banco-search-result-item:last-child { border-bottom:none; }
        .banco-result-img { width:44px; border-radius:4px; flex-shrink:0; }
        .banco-result-body { flex:1; }
        .banco-result-cat { font-family:var(--font-tech); font-size:0.65rem; padding:2px 7px; border-radius:3px; font-weight:700; }
        .banco-result-meta { font-family:var(--font-tech); font-size:0.75rem; color:#555; margin-top:3px; }
        .banco-search-empty { font-family:var(--font-tech); color:#444; font-size:0.85rem; padding:16px; text-align:center; letter-spacing:1px; }
        /* ═══ FULLSCREEN EXIT ═══ */
        /* safe-area: deitado (como se usa a apresentação) o notch come a lateral esquerda e engolia este botão. */
        #btn-fs-exit { display:none; position:fixed; top:calc(18px + env(safe-area-inset-top, 0px)); left:calc(18px + env(safe-area-inset-left, 0px)); z-index:5000; padding:12px 22px; font-size:1rem; box-shadow:0 4px 20px rgba(0,0,0,0.8); }
        .fullscreen-mode #btn-fs-exit { display:flex; }
        /* ═══ LIVE MODE ═══ */
        #screen-live { background:transparent; padding:0; justify-content:flex-start; }
        .live-header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 36px; position:relative; z-index:10; background:linear-gradient(180deg,rgba(0,0,0,0.8),transparent); }
        .live-event-badge { font-family:var(--font-title); font-size:2.8rem; color:white; letter-spacing:4px; text-shadow:0 0 30px var(--primary-glow); }
        .live-cat-badge { font-family:var(--font-main); font-size:0.95rem; padding:8px 22px; border-radius:6px; background:var(--primary); color:#000; font-weight:900; letter-spacing:1px; }
        .live-controls { display:flex; align-items:center; gap:10px; }
        .live-counter { font-family:var(--font-main); font-size:1rem; color:#666; letter-spacing:2px; min-width:60px; text-align:center; }
        .live-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:100%; }
        .live-card-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
        .live-glow { position:absolute; width:500px; height:500px; background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%); pointer-events:none; z-index:0; }
        .live-card-img { width:340px; height:auto; border-radius:10px; position:relative; z-index:1; transition:filter 0.5s,transform 0.3s; filter:drop-shadow(0 20px 50px rgba(0,0,0,0.9)); }
        .live-card-img.live-blurred { filter:blur(40px) brightness(0.1); }
        .live-card-img.live-revealed { animation:liveReveal 0.7s cubic-bezier(0.23,1,0.32,1) forwards; }
        @keyframes liveReveal { 0%{filter:brightness(4) blur(8px);transform:scale(1.15)}100%{filter:drop-shadow(0 20px 50px rgba(0,0,0,0.9));transform:scale(1)} }
        .live-hint { font-family:var(--font-tech); font-size:1rem; color:var(--text-color); letter-spacing:4px; text-transform:uppercase; margin-top:24px; opacity:0.5; transition:opacity 0.4s; animation:livePulse 2s infinite; }
        @keyframes livePulse { 0%,100%{opacity:0.4}50%{opacity:0.8} }
        .live-nav-hint { position:fixed; bottom:28px; font-family:var(--font-tech); font-size:0.75rem; color:#333; letter-spacing:3px; }
        /* ═══ TIER LIST ESPECIAL ═══ */
        #screen-special-tier { justify-content:flex-start; padding-top:20px; }
        .special-tier-list { width:100%; max-width:1200px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:14px; }
        .special-tier-card { background:var(--lobby-btn-bg); border:1px solid var(--lobby-btn-border); border-radius:12px; padding:18px 20px; cursor:pointer; transition:0.2s; }
        .special-tier-card:hover { border-color:var(--text-color); box-shadow:0 0 20px var(--primary-glow); transform:translateY(-2px); }
        .special-tier-card-name { font-family:var(--font-title); font-size:1.5rem; color:var(--text-color); letter-spacing:2px; margin-bottom:6px; }
        .special-tier-card-meta { font-family:var(--font-tech); font-size:0.75rem; color:#555; letter-spacing:1px; }
        /* Editor */
        .special-tier-editor { width:100%; max-width:1400px; }
        #capture-special-tier { width:100%; background:linear-gradient(160deg,#050505,#111318); padding:16px; border-radius:10px; border:1px solid rgba(255,255,255,0.05); }
        .special-row { display:flex; min-height:120px; background:rgba(0,0,0,0.18); margin-bottom:4px; border-radius:4px; overflow:hidden; }
        .special-label-box { width:130px; min-width:130px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer; position:relative; }
        .special-label-text { font-family:var(--font-title); font-size:1.8rem; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,0.8); }
        .special-label-edit { display:none; position:absolute; inset:6px; display:flex; flex-direction:column; gap:4px; }
        .special-label-input { background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.3); color:white; border-radius:4px; padding:4px 6px; font-family:var(--font-title); font-size:1rem; text-align:center; outline:none; width:100%; }
        .special-content { flex:1; display:flex; flex-wrap:wrap; gap:6px; padding:8px; align-items:flex-start; min-height:120px; align-content:flex-start; transition:background 0.2s; }
        .special-content.drag-over { background:rgba(0,242,255,0.07); }
        .special-img-wrap { position:relative; width:88px; flex-shrink:0; cursor:grab; transition:transform 0.18s; }
        .special-img-wrap:hover { transform:translateY(-3px) scale(1.04); z-index:10; }
        .special-img-wrap img { width:88px; border-radius:5px; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.7)); display:block; pointer-events:none; }
        .special-img-wrap.dragging { opacity:0.3; }
        .special-img-del { position:absolute; top:-5px; right:-5px; background:var(--danger); border:2px solid #fff; color:white; border-radius:50%; width:18px; height:18px; font-size:10px; display:flex; align-items:center; justify-content:center; opacity:0; transition:0.15s; cursor:pointer; }
        .special-img-wrap:hover .special-img-del { opacity:1; }
        /* Hide-controls mode */
        .sp-no-ctrl .special-row-controls { display:none !important; }
        .sp-no-ctrl .special-img-del       { display:none !important; opacity:0 !important; }
        /* Cover image on list cards */
        .special-tier-card { position:relative; overflow:hidden; }
        .special-tier-card-cover { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.25; border-radius:12px; pointer-events:none; transition:opacity 0.3s; }
        .special-tier-card:hover .special-tier-card-cover { opacity:0.38; }
        .special-tier-card-inner { position:relative; z-index:1; }
        /* Pool */
        .special-pool-section { margin-top:12px; background:rgba(0,0,0,0.25); border-radius:8px; border:1px solid rgba(255,255,255,0.05); padding:10px 12px; }
        .special-pool-title { font-family:var(--font-tech); font-size:0.72rem; color:#555; letter-spacing:3px; margin-bottom:8px; }
        .special-pool-area { display:flex; flex-wrap:wrap; gap:6px; min-height:60px; align-content:flex-start; }
        .special-pool-area.drag-over { background:rgba(0,242,255,0.05); border-radius:6px; }

        /* ── ÁREA VIP · Tier Lists Especiais (exibição read-only) ── */
        #screen-vip-tier { align-items:flex-start; padding-top:20px; }
        /* 🎨 o roxo (#b39ddb/#8a7fb0) saiu em 16/09/2026: era da versão antiga da
           ÁREA VIP e não existia em mais nenhuma tela do app novo. */
        .vip-tier-intro { width:100%; max-width:1200px; margin:2px auto 10px; font-family:var(--font-tech); font-size:0.8rem; letter-spacing:1px; color:#8fbfa3; text-align:center; }
        .vip-tier-empty { text-align:center; padding:60px 20px; font-family:var(--font-tech); color:#7d9a89; font-size:0.95rem; letter-spacing:1px; line-height:1.7; }
        .special-tier-card-fallback { position:absolute; right:12px; bottom:6px; font-size:2.6rem; opacity:0.14; pointer-events:none; }
        #vip-tier-capture { width:100%; background:linear-gradient(160deg,#050b07,#0b1510); padding:20px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.8); border:1px solid rgba(0,200,75,0.14); }
        #vip-tier-capture .card-container { cursor:default; }
        .vip-tier-select { width:220px; max-width:58vw; height:40px; }
        .fullscreen-mode #vip-tier-header { display:none !important; }
        .fullscreen-mode #vip-tier-capture { border-radius:0; }
        /* ═══ MONTAR MODE ═══ */
        #screen-montar { justify-content:flex-start; padding-top:20px; }
        .montar-filter-bar { width:100%; max-width:1400px; display:flex; gap:14px 16px; align-items:flex-start; flex-wrap:wrap; background:var(--glass); padding:14px 18px; border-radius:12px; border:1px solid var(--glass-border); margin-bottom:14px; backdrop-filter:blur(12px); }
        .montar-field { display:flex; flex-direction:column; gap:5px; }
        .montar-field-label { font-family:var(--font-tech); font-size:0.58rem; letter-spacing:1.5px; color:#6a7a8c; text-transform:uppercase; padding-left:3px; white-space:nowrap; }
        .montar-field-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
        .montar-field select, .montar-field input[type="text"], .montar-field input[type="number"] { height:40px; box-sizing:border-box; padding:8px 12px; }
        .montar-tags { display:flex; flex-wrap:wrap; gap:5px; }
        .montar-tags:empty { display:none; }
        .montar-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 11px; border-radius:7px; background:var(--primary); border:1px solid var(--primary); color:#000; font-family:var(--font-main); font-size:0.74rem; font-weight:800; letter-spacing:.3px; box-shadow:0 0 8px var(--primary-glow); max-width:170px; }
        .montar-tag-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .montar-tag-x { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; cursor:pointer; background:rgba(0,0,0,0.28); color:inherit; font-size:0.8rem; line-height:1; font-weight:900; transition:background 0.15s; flex-shrink:0; }
        .montar-tag-x:hover { background:rgba(0,0,0,0.55); }
        .montar-frag-range { display:flex; align-items:center; gap:6px; }
        .montar-frag-range input { width:92px; }
        .montar-frag-range .sep { color:#556; font-size:0.9rem; }
        .montar-layout { width:100%; max-width:1400px; display:grid; grid-template-columns:1fr 420px; gap:18px; align-items:start; }
        /* Results */
        .montar-results-grid { display:flex; flex-wrap:wrap; gap:8px; padding:14px; background:var(--glass); border-radius:10px; border:1px solid var(--glass-border); min-height:280px; max-height:calc(100vh - 260px); overflow-y:auto; align-content:flex-start; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
        .montar-results-grid::-webkit-scrollbar { width:5px; }
        .montar-results-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
        /* Card item in results */
        .montar-card-item { position:relative; width:104px; cursor:pointer; border-radius:8px; padding:3px; border:2px solid transparent; transition:all 0.18s; background:rgba(255,255,255,0.02); }
        .montar-card-item:hover { transform:translateY(-3px) scale(1.03); border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.06); z-index:5; }
        .montar-card-item.selected { border-color:var(--text-color); background:rgba(0,242,255,0.07); box-shadow:0 0 16px var(--primary-glow); }
        .montar-card-check { position:absolute; top:1px; right:1px; background:var(--primary); color:#000; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:900; z-index:10; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,0.6); }
        .montar-card-img { width:98px; border-radius:5px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.7)); }
        .montar-card-pos { font-family:var(--font-main); font-size:0.6rem; color:var(--text-color); text-align:center; letter-spacing:.5px; margin-top:2px; opacity:0.7; }
        .montar-card-cost { font-family:var(--font-main); font-size:0.62rem; text-align:center; margin-top:1px; color:var(--gold); }
        /* Right panel */
        .montar-right { position:sticky; top:20px; }
        #montar-capture { background:linear-gradient(145deg,#04040a,#080c14,#050408); border-radius:16px; border:1px solid rgba(255,255,255,0.07); padding:22px 18px 18px; position:relative; overflow:hidden; }
        #montar-capture::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 40% at 50% -5%, var(--primary-glow) 0%, transparent 60%); opacity:0.35; pointer-events:none; z-index:0; }
        .montar-capture-watermark { font-family:var(--font-tech); font-size:0.65rem; letter-spacing:4px; color:rgba(255,255,255,0.15); text-align:center; margin-bottom:8px; position:relative; z-index:1; }
        .montar-capture-title { font-family:var(--font-title); font-size:1.9rem; color:var(--text-color); letter-spacing:4px; text-align:center; margin-bottom:14px; text-shadow:0 0 25px var(--primary-glow); position:relative; z-index:1; text-transform:uppercase; }
        .montar-selected-grid { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; min-height:80px; position:relative; z-index:1; }
        .montar-placeholder { width:100%; text-align:center; padding:30px 10px; font-family:var(--font-tech); color:#2a2a3a; font-size:0.82rem; letter-spacing:2px; }
        /* Selected card items */
        .montar-sel-item { position:relative; }
        .montar-sel-img { width:114px; border-radius:8px; display:block; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.95)); }
        .montar-sel-badge { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.88); font-family:var(--font-main); font-size:0.6rem; padding:3px 8px; border-radius:10px; white-space:nowrap; color:var(--gold); border:1px solid rgba(255,200,0,0.35); backdrop-filter:blur(4px); text-shadow:0 1px 3px rgba(0,0,0,0.9); }
        .montar-sel-del { position:absolute; top:-5px; right:-5px; background:var(--danger); border:2px solid #fff; color:white; border-radius:50%; width:20px; height:20px; font-size:11px; display:flex; align-items:center; justify-content:center; opacity:0; transition:0.15s; cursor:pointer; z-index:10; }
        .montar-sel-item:hover .montar-sel-del { opacity:1; }
        /* Cost summary */
        .montar-total-strip { margin-top:14px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,200,0,0.22); border-radius:10px; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
        .montar-total-label { font-family:var(--font-tech); font-size:0.68rem; color:#555; letter-spacing:2px; text-transform:uppercase; }
        .montar-total-value { font-family:var(--font-title); font-size:1.7rem; color:var(--gold); text-shadow:0 0 14px rgba(255,200,0,0.45); letter-spacing:2px; }
        .montar-cost-rows { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; justify-content:center; position:relative; z-index:1; }
        .montar-cost-chip { font-family:var(--font-main); font-size:0.72rem; padding:4px 12px; border-radius:16px; background:rgba(255,200,0,0.1); border:1px solid rgba(255,200,0,0.25); color:var(--gold); }
        .montar-cost-chip.troca { background:rgba(100,180,255,0.1); border-color:rgba(100,180,255,0.3); color:#aaddff; }
        /* Modals */
        .montar-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.87); z-index:7500; display:none; align-items:center; justify-content:center; backdrop-filter:blur(10px); padding:16px; }
        .montar-modal-overlay.open { display:flex; }
        .montar-modal-box { background:linear-gradient(160deg,#0d0f18,#0a0c10); border:1px solid rgba(255,255,255,0.1); border-radius:18px; width:95%; max-width:700px; max-height:88vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,0.95); }
        .montar-modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid rgba(255,255,255,0.07); position:sticky; top:0; background:rgba(10,12,20,0.95); z-index:10; border-radius:18px 18px 0 0; }
        .montar-modal-header h2 { font-family:var(--font-title); color:var(--text-color); font-size:1.6rem; letter-spacing:2px; margin:0; }
        .montar-modal-body { padding:24px 28px 28px; }
        /* Draft entries */
        .montar-draft-entry { display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid rgba(255,255,255,0.05); border-radius:10px; margin-bottom:8px; background:rgba(255,255,255,0.025); cursor:pointer; transition:0.15s; }
        .montar-draft-entry:hover { border-color:var(--text-color); background:rgba(255,255,255,0.05); }
        .montar-draft-label-badge { font-family:var(--font-main); font-size:0.7rem; padding:4px 12px; border-radius:12px; background:rgba(0,242,255,0.12); color:var(--text-color); border:1px solid rgba(0,242,255,0.12); white-space:nowrap; letter-spacing:.5px; flex-shrink:0; }
        .montar-draft-name { font-family:var(--font-title); font-size:1.2rem; color:white; letter-spacing:1px; flex:1; }
        .montar-draft-meta { font-family:var(--font-tech); font-size:0.72rem; color:#555; letter-spacing:1px; margin-top:2px; }
        .montar-draft-thumbs { display:flex; gap:3px; flex-shrink:0; }
        .montar-draft-thumb { width:36px; border-radius:3px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
        /* Save form */
        .montar-save-row { margin-bottom:14px; }
        .montar-save-label-text { font-family:var(--font-title); font-size:1.1rem; color:var(--text-color); letter-spacing:1px; display:block; margin-bottom:6px; }
        /* ═══ STAGGER ═══ */
        .stagger-in > * { animation:staggerIn 0.4s ease both; }
        .stagger-in > *:nth-child(1) { animation-delay:0.04s; }
        .stagger-in > *:nth-child(2) { animation-delay:0.10s; }
        .stagger-in > *:nth-child(3) { animation-delay:0.16s; }
        .stagger-in > *:nth-child(4) { animation-delay:0.22s; }
        .stagger-in > *:nth-child(5) { animation-delay:0.28s; }
        .stagger-in > *:nth-child(n+6) { animation-delay:0.32s; }
        @keyframes staggerIn { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
        /* ═══ UNDO REWIND ═══ */
        @keyframes rewindCard { 0%{transform:scale(1.12) rotate(4deg);filter:hue-rotate(160deg) brightness(2)}40%{transform:scale(0.88) rotate(-3deg);filter:hue-rotate(-80deg) brightness(1.5)}100%{transform:scale(1) rotate(0);filter:none} }
        .anim-rewind { animation:rewindCard 0.55s cubic-bezier(0.23,1,0.32,1); }
        /* ═══ POS FILTER ═══ */
        #tier-pos-filter { width:130px; }

        /* ═══════════════════════════════════════════════
           ATRIBUTOS DA CARTA (Perna Ruim, Fintas, Fôlego, Dedicação)
        ═══════════════════════════════════════════════ */
        .attr-panel { width:100%; background:rgba(0,0,0,0.42); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:11px; }
        .attr-panel-title { font-family:var(--font-title); font-size:1.05rem; letter-spacing:1.5px; color:var(--gold); text-align:center; margin-bottom:1px; opacity:0.9; }
        .attr-row { display:flex; flex-direction:column; gap:4px; }
        .attr-row-label { font-family:var(--font-tech); font-size:0.72rem; letter-spacing:1.5px; color:#7a8a99; text-transform:uppercase; font-weight:700; }
        /* Perna ruim */
        .attr-weak { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .attr-foot { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:4px 7px; }
        .attr-foot-lbl { font-family:var(--font-main); font-size:0.82rem; color:var(--text-color); width:14px; text-align:center; }
        .attr-foot-input { width:38px !important; padding:4px 2px !important; text-align:center; font-family:var(--font-main); font-size:0.9rem; background:rgba(0,0,0,0.4) !important; border:1px solid rgba(255,255,255,0.12) !important; border-radius:6px !important; color:var(--gold) !important; -moz-appearance:textfield; }
        .attr-foot-input::-webkit-outer-spin-button, .attr-foot-input::-webkit-inner-spin-button { opacity:1; }
        .attr-invert-btn { background:rgba(0,242,255,0.08); border:1px solid rgba(0,242,255,0.12); color:var(--text-color); border-radius:8px; padding:5px 10px; font-size:1rem; line-height:1; transition:0.15s; }
        .attr-invert-btn:hover { background:rgba(0,242,255,0.12); box-shadow:0 0 10px var(--primary-glow); transform:scale(1.05); }
        /* Estrelas (fintas + fôlego) */
        .attr-stars { display:flex; align-items:center; gap:3px; }
        .attr-star { position:relative; display:inline-block; font-size:1.45rem; line-height:1; cursor:pointer; user-select:none; transition:transform 0.12s; }
        .attr-star:hover { transform:scale(1.18); }
        .attr-star-bg { color:#33414f; }
        .attr-star-fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--gold); text-shadow:0 0 8px rgba(255,215,0,0.5); pointer-events:none; }
        .attr-star-val { font-family:var(--font-main); font-size:0.82rem; color:var(--gold); margin-left:7px; min-width:26px; }
        .attr-stars-hint { font-family:var(--font-tech); font-size:0.6rem; color:#566; letter-spacing:0.5px; margin-left:4px; }
        /* Dedicação (work rate) */
        .attr-wr-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
        .attr-wr-chip { font-family:var(--font-main); font-size:0.74rem; padding:6px 0; border-radius:7px; border:1px solid #3a4a5c; background:rgba(255,255,255,0.03); color:#aab; letter-spacing:0.5px; transition:all 0.15s; text-align:center; }
        .attr-wr-chip:hover { border-color:var(--text-color); color:#fff; background:rgba(255,255,255,0.07); }
        .attr-wr-chip.selected { background:var(--primary); border-color:var(--primary); color:#000; font-weight:900; box-shadow:0 0 10px var(--primary-glow); }
        .attr-wr-legend { font-family:var(--font-tech); font-size:0.6rem; color:#566; letter-spacing:0.5px; text-align:center; margin-top:2px; }
        /* Posições secundárias chips (multi-select) */
        .secpos-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
        .secpos-chip { padding:7px 13px; border-radius:6px; border:1px solid #3a4a5c; background:rgba(255,255,255,0.04); color:#bbb; font-family:var(--font-main); font-size:0.8rem; letter-spacing:.5px; transition:all 0.18s; }
        .secpos-chip:hover { border-color:var(--silver); color:white; background:rgba(255,255,255,0.08); }
        .secpos-chip.selected { background:var(--silver); border-color:var(--silver); color:#000; font-weight:900; box-shadow:0 0 12px rgba(224,230,237,0.4); }
        .secpos-chip.is-primary { opacity:0.4; pointer-events:none; text-decoration:line-through; }
        /* Botão toggle posição secundária (tier/montar) */
        .btn-secpos-toggle.active { background:var(--silver) !important; color:#000 !important; border-color:var(--silver) !important; box-shadow:0 0 12px rgba(224,230,237,0.45) !important; font-weight:900; }
        .card-secpos-badge { position:absolute; top:3px; left:3px; background:rgba(224,230,237,0.92); color:#000; font-family:var(--font-main); font-size:0.52rem; padding:2px 5px; border-radius:5px; letter-spacing:0.3px; z-index:6; box-shadow:0 2px 5px rgba(0,0,0,0.6); pointer-events:none; }

        /* ═══ FILTRO DE ATRIBUTOS (Tier List + Montar) ═══ */
        .attrf-wrap { position:relative; display:inline-block; }
        .attrf-btn { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
        .attrf-btn.active { background:linear-gradient(135deg, rgba(0,242,255,0.12), rgba(0,242,255,0.06)) !important; border-color:var(--primary) !important; color:var(--primary) !important; box-shadow:0 0 12px var(--primary-glow); }
        .attrf-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--primary); color:#001016; font-family:var(--font-main); font-size:0.66rem; line-height:1; }
        .attrf-panel {
            position:fixed; z-index:2000; top:0; left:0;
            width:298px; max-width:92vw;
            max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto;
            background:rgba(8,12,18,0.97); backdrop-filter:blur(16px);
            border:1px solid rgba(0,242,255,0.12); border-radius:13px;
            box-shadow:0 14px 40px rgba(0,0,0,0.6), 0 0 22px rgba(0,242,255,0.08);
            padding:15px 16px 14px; display:none; animation:attrfPop 0.16s ease;
        }
        .attrf-panel.open { display:block; }
        @keyframes attrfPop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
        .attrf-panel-title { font-family:var(--font-title); font-size:1.25rem; letter-spacing:1.5px; color:var(--text-color); display:flex; align-items:center; gap:7px; margin-bottom:12px; }
        .attrf-row { margin-bottom:12px; }
        .attrf-row-label { font-family:var(--font-tech); font-size:0.72rem; letter-spacing:1.5px; color:#8a9aab; text-transform:uppercase; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
        .attrf-seg { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
        .attrf-seg-btn {
            font-family:var(--font-main); font-size:0.74rem; letter-spacing:0.3px;
            padding:8px 0; text-align:center; border-radius:8px;
            border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
            color:#aab; transition:all 0.15s;
        }
        .attrf-seg-btn:hover { border-color:var(--text-color); color:#fff; background:rgba(255,255,255,0.07); }
        .attrf-seg-btn.active { background:var(--primary); border-color:var(--primary); color:#001016; font-weight:900; box-shadow:0 0 10px var(--primary-glow); }
        .attrf-wr-select {
            width:100%; height:38px; padding:6px 10px; border-radius:8px;
            background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.12);
            color:#dfe; font-family:var(--font-body); font-size:0.85rem; outline:none;
        }
        .attrf-wr-select:focus { border-color:var(--primary); }
        .attrf-clear {
            width:100%; margin-top:4px; padding:9px 0; border-radius:8px;
            background:rgba(255,71,87,0.08); border:1px solid rgba(255,71,87,0.3);
            color:#ff7785; font-family:var(--font-main); font-size:0.75rem; letter-spacing:0.5px; transition:all 0.15s;
        }
        .attrf-clear:hover { background:rgba(255,71,87,0.18); color:#fff; }
        .attrf-panel.left-align { right:auto; left:0; }

        .btn-live { background:rgba(160,15,25,.4) !important; border-color:rgba(255,50,60,.75) !important; color:#ff4757 !important; font-family:var(--font-title) !important; letter-spacing:2px; animation:live-pulse 2s ease-in-out infinite; margin-top:12px; }
        @keyframes live-pulse { 0%,100%{box-shadow:0 0 8px rgba(255,71,87,.3);} 50%{box-shadow:0 0 22px rgba(255,71,87,.7), 0 0 44px rgba(255,71,87,.2);} }

/* ═══════════════════════════════════════════════
   NOVO · LOBBY PERSONALIZÁVEL (arrastar / ocultar / favoritar)
═══════════════════════════════════════════════ */
.lobby-edit-bar {
    display: none;
    width: 100%; max-width: 1100px;
    margin-bottom: 16px;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,200,0,0.10), rgba(0,242,255,0.06));
    border: 1px solid rgba(255,200,0,0.35);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
body.lobby-edit-on .lobby-edit-bar { display: flex; }
.lobby-edit-hint { font-family: var(--font-tech); font-size: 0.86rem; color: #cdd6e0; letter-spacing: 0.4px; }
.lobby-edit-hint strong { color: var(--gold); letter-spacing: 1.5px; }
.lobby-edit-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Esconder módulos ocultos (fora do modo edição) */
.main-btn.lobby-hidden { display: none; }
/* Em modo edição, mostrar ocultos esmaecidos para poder reativá-los */
body.lobby-edit-on .main-btn.lobby-hidden {
    display: flex !important;
    opacity: 0.32;
    filter: grayscale(0.85);
}
/* Cursor e estado durante edição */
body.lobby-edit-on .main-btn {
    cursor: grab;
    user-select: none;
}
body.lobby-edit-on .main-btn:active { cursor: grabbing; }
body.lobby-edit-on .main-btn:hover { transform: none; }
.main-btn.lobby-dragging { opacity: 0.4; transform: scale(0.96); }
.main-btn.lobby-drop-target { outline: 2px dashed var(--gold); outline-offset: 3px; }

/* Controles que aparecem em cada módulo no modo edição */
.lobby-mod-ctrls {
    position: absolute;
    top: 10px; left: 10px;
    display: none;
    gap: 6px; z-index: 30;
}
body.lobby-edit-on .lobby-mod-ctrls { display: flex; }
.lobby-mod-ctrls button {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(8,12,18,0.92);
    color: #fff; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.7);
    transition: 0.15s; cursor: pointer; padding: 0;
}
.lobby-mod-ctrls button:hover { transform: scale(1.1); border-color: var(--text-color); }
.lobby-mod-ctrls .lmc-fav.on { background: var(--gold); color: #000; border-color: var(--gold); }
.lobby-mod-ctrls .lmc-hide.on { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Marca de favorito (visível sempre, mesmo fora do modo edição) */
.lobby-fav-star {
    position: absolute;
    top: 10px; right: 12px;
    font-size: 1.05rem;
    z-index: 12;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    display: none;
    pointer-events: none;
}
.main-btn.is-fav .lobby-fav-star { display: block; }
.main-btn.is-fav {
    border-color: rgba(255,215,0,0.55) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 26px rgba(255,200,0,0.18) !important;
}
.main-btn.btn-hero .lobby-fav-star { top: 14px; right: 16px; }

/* ═══════════════════════════════════════════════
   NOVO · BADGES NA TIER LIST: PERNA RUIM (pé ruim) + FINTAS (skill moves)
   Posicionados na LATERAL da carta, empilhados, sem sobrepor um ao outro
═══════════════════════════════════════════════ */
.card-wf-badge, .card-sk-badge {
    position: absolute;
    right: -1px;
    z-index: 9;
    font-family: var(--font-main);
    font-size: 0.55rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 7px;
    pointer-events: none;
    display: flex; align-items: center; gap: 2px;
    white-space: nowrap;
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 7px rgba(0,0,0,0.75);
    letter-spacing: 0.3px;
}
/* Empilhados em torno do meio vertical da carta (sem sobrepor) */
.card-wf-badge { top: 50%; transform: translateY(calc(-100% - 3px)); background: rgba(14,24,40,0.86); border: 1px solid rgba(120,180,255,0.55); color: #c4ddff; }
.card-sk-badge { top: 50%; transform: translateY(3px); background: rgba(38,28,4,0.86); border: 1px solid rgba(255,205,70,0.6); color: #ffe18c; }
.card-wf-badge .cwf-slash { opacity: 0.5; font-size: 0.85em; }
/* Em card-slot (Top 10) as cartas são maiores → badges um pouco maiores */
.card-slot .card-wf-badge, .card-slot .card-sk-badge { font-size: 0.52rem; padding: 2px 4px; right: 1px; }
.card-slot .card-wf-badge { transform: translateY(calc(-100% - 4px)); }
.card-slot .card-sk-badge { transform: translateY(4px); }

/* ═══════════════════════════════════════════════
   NOVO · EDITOR DE TEMA DO CANAL (cores personalizadas)
═══════════════════════════════════════════════ */
/* Base estrutural do tema personalizado — cores reais vêm via style inline no body (JS) */
body.theme-custom { background-color: var(--bg-deep); }
body.theme-custom::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
    pointer-events: none; z-index: 0;
}
body.theme-custom .tier-header,
body.theme-custom .config-container,
body.theme-custom .review-card-area {
    background: rgba(8,10,16,0.88);
    border-color: var(--lobby-btn-border);
    box-shadow: 0 0 0 1px var(--lobby-btn-border), 0 20px 60px rgba(0,0,0,0.8);
}
.theme-editor-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.theme-editor-color { display: flex; flex-direction: column; gap: 6px; }
.theme-editor-color label { font-family: var(--font-tech); font-size: 0.78rem; color: #aaa; letter-spacing: 0.5px; }
.theme-editor-swatch {
    position: relative; width: 64px; height: 44px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15); overflow: hidden; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.theme-editor-swatch input[type=color] { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: none; padding: 0; cursor: pointer; background: transparent; }
.theme-editor-preview {
    display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px;
    border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.3);
}
.tep-chip { font-family: var(--font-main); font-size: 0.8rem; padding: 8px 14px; border-radius: 8px; letter-spacing: 1px; }
.tep-primary { background: rgba(0,0,0,0.5); color: var(--text-color); border: 1px solid var(--primary); box-shadow: 0 0 14px var(--primary-glow); }
.tep-gold { background: var(--gold); color: #000; }
.tep-bg { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.2); background: var(--bg-deep); }