/* Pokémon Arena · interface integrada do UI Lab (apenas apresentação).
   Camada de estilo carregada por último: não altera IDs, eventos nem lógica. Para desfazer, remova o <link> em index.html
   (ou restaure .rollback/before-ui-lab-integration-20261103). Tokens e visual vêm de ui-lab/css/base.css.
   Identidade: azul-marinho, ciano + amarelo, Jersey 10, superfícies chapadas, bordas de 2px, "placas" de sombra dura. */
@font-face{font-family:ArenaPixel;src:url('./assets/fonts/Jersey10-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{
 --ui-bg:#07182a;--ui-bg2:#0a2236;--ui-panel:#0b2840;--ui-panel2:#103550;--ui-panel3:#16415f;--ui-line:#2b6d8c;--ui-soft:#1b4a66;--ui-shade:#031019;
 --ui-ink:#eaf6ff;--ui-ink2:#a9c8dc;--ui-ink3:#6f98b0;--ui-cyan:#38c9f3;--ui-yellow:#ffd83a;--ui-yellow-d:#8a6400;--ui-green:#2fd36b;--ui-green-d:#0b5a26;--ui-red:#ee4a3c;--ui-dmg:#ffe923;
 --ui-pixel:ArenaPixel,'Jersey 10',ui-monospace,monospace;--ui-ease:cubic-bezier(.2,.8,.2,1);
}
/* Cores de tipo chapadas (mesmas dos cards aprovados) a partir das cores já usadas pelo jogo (COLORS em src/data.js). */
[style*="#ffab75"]{--ui-tc:#e72b20}[style*="#82cdec"]{--ui-tc:#0769e8}[style*="#a8d77e"]{--ui-tc:#10ac37}[style*="#f4d76d"]{--ui-tc:#f5c900}
[style*="#bda2ec"]{--ui-tc:#67408d}[style*="#e9ad91"]{--ui-tc:#b83d25}[style*="#b0c7d4"]{--ui-tc:#607b91}[style*="#95a1f0"]{--ui-tc:#5838dd}
[style*="#ced8cc"]{--ui-tc:#626e7b}[style*="#b7cdf0"]{--ui-tc:#657dd9}[style*="#c498cd"]{--ui-tc:#9827c4}[style*="#cbb08a"]{--ui-tc:#8b6a2d}
[style*="#c6a76f"]{--ui-tc:#bb741b}[style*="#f1a2d7"]{--ui-tc:#e41b91}[style*="#9fe5ff"]{--ui-tc:#20bedc}[style*="#9c8bb3"]{--ui-tc:#4b4760}[style*="#b8d77d"]{--ui-tc:#809b0b}
[data-type=fire]{--ui-dt:#e72b20}[data-type=water]{--ui-dt:#0769e8}[data-type=grass]{--ui-dt:#10ac37}[data-type=electric]{--ui-dt:#f5c900}[data-type=ghost]{--ui-dt:#67408d}
[data-type=fighting]{--ui-dt:#b83d25}[data-type=steel]{--ui-dt:#607b91}[data-type=dragon]{--ui-dt:#5838dd}[data-type=normal]{--ui-dt:#626e7b}[data-type=flying]{--ui-dt:#657dd9}
[data-type=poison]{--ui-dt:#9827c4}[data-type=rock]{--ui-dt:#8b6a2d}[data-type=ground]{--ui-dt:#bb741b}[data-type=psychic]{--ui-dt:#e41b91}[data-type=ice]{--ui-dt:#20bedc}
[data-type=dark]{--ui-dt:#4b4760}[data-type=bug]{--ui-dt:#809b0b}

/* ---------- chips de tipo ---------- */
html body .type{display:inline-flex;align-items:center;padding:3px 6px 1px;border:0;border-radius:4px;background:var(--ui-tc,var(--type,#626e7b));color:#fff;font:400 14px/1 var(--ui-pixel);letter-spacing:.4px;text-shadow:1px 1px 0 #0007;box-shadow:none}
html body .type[style*="#f4d76d"]{color:#2a2000;text-shadow:none}

/* ---------- barra lateral ---------- */
html body .game-sidebar{background:var(--ui-shade);border-right:2px solid var(--ui-soft);box-shadow:none}
html body .game-sidebar nav button,html body .game-sidebar nav>a{border:2px solid transparent;border-radius:8px;background:none;box-shadow:none;color:var(--ui-ink2);font:400 22px/1 var(--ui-pixel);letter-spacing:.5px;text-transform:uppercase;transition:background .12s,color .12s,border-color .12s,transform .12s var(--ui-ease)}
html body .game-sidebar nav button:hover,html body .game-sidebar nav>a:hover{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-soft);transform:translateX(2px)}
html body .game-sidebar nav button.active{background:var(--ui-panel2);border-color:var(--ui-yellow);color:var(--ui-yellow);box-shadow:none}
html body .game-sidebar nav button:active{transform:translateY(1px)}
html body .game-sidebar .nav-divider{background:var(--ui-soft)}
html body .sidebar-note b{font:400 18px/1 var(--ui-pixel);letter-spacing:1.5px;color:var(--ui-cyan)}

/* ---------- painéis e cabeçalhos ---------- */
html body #selection .setup-panel{background:var(--ui-panel);border:2px solid var(--ui-soft);border-radius:8px;box-shadow:none;backdrop-filter:none}
html body #selection .panel-heading h2{font:400 30px/1 var(--ui-pixel);letter-spacing:.5px;text-transform:uppercase}
html body #selection .step-number{display:grid;place-items:center;width:30px;height:28px;padding:3px 0 0;border:2px solid var(--ui-line);border-radius:6px;background:var(--ui-bg2);color:var(--ui-cyan);font:400 20px/1 var(--ui-pixel)}
html body #selection .count-badge,html body #selection #selection-count{padding:6px 12px 2px;border:2px solid var(--ui-line);border-radius:6px;background:var(--ui-bg2);color:var(--ui-cyan);font:400 28px/1 var(--ui-pixel);letter-spacing:1px}
html body #selection .panel-meta{font:400 17px/1 var(--ui-pixel);letter-spacing:1px;color:var(--ui-ink3)}
html body #selection .team-help,html body #selection .picker-help{color:var(--ui-ink3)}

/* ---------- slots da equipe ---------- */
html body #selection #pokemon-picker .team-slot{--st:var(--ui-dt,var(--ui-soft));padding:30px 10px 12px;border:2px solid var(--ui-soft);border-radius:8px;background:var(--ui-panel);box-shadow:inset 0 3px 0 var(--st);transition:border-color .12s,transform .2s var(--ui-ease)}
html body #selection #pokemon-picker .team-slot.active{border-color:var(--ui-yellow);background:var(--ui-panel2);box-shadow:inset 0 3px 0 var(--st)}
html body #selection #pokemon-picker .team-slot.filled:hover{border-color:var(--ui-line);transform:translateY(-2px)}
html body #selection #pokemon-picker .team-slot:not(.filled){background:none;border:2px dashed var(--ui-line);box-shadow:none}
html body #selection .team-add{color:var(--ui-ink3);font:400 22px/1.1 var(--ui-pixel);letter-spacing:.5px;transition:background .12s,color .12s}
html body #selection .team-add>b{display:grid;place-items:center;border:2px dashed var(--ui-line);border-radius:8px;font:400 34px/1 var(--ui-pixel);transition:transform .2s var(--ui-ease),border-color .12s}
html body #selection .team-add small{font:12px var(--ui-ui,'Segoe UI',sans-serif);letter-spacing:0;color:var(--ui-ink3)}
html body #selection .team-add:hover{background:var(--ui-panel);color:var(--ui-cyan)}
html body #selection .team-add:hover>b{transform:scale(1.1);border-style:solid;border-color:var(--ui-cyan)}
html body #selection #pokemon-picker .team-info strong{font:400 28px/1 var(--ui-pixel);letter-spacing:.3px}
html body #selection #pokemon-picker .team-order{font:400 20px/1 var(--ui-pixel);color:var(--ui-ink3)}
html body #selection #pokemon-picker .team-info small,html body #selection #pokemon-picker .team-essential{font:400 16px/1 var(--ui-pixel);letter-spacing:.3px;color:var(--ui-ink3)}
html body #selection #pokemon-picker .team-hp small{font:400 16px/1 var(--ui-pixel);color:var(--ui-ink3)}
html body #selection #pokemon-picker .team-hp small b{font-weight:400;color:var(--ui-ink)}
html body #selection #pokemon-picker .team-hp i{height:8px;background:#041321;border-radius:3px}
html body #selection #pokemon-picker .team-hp i>b{background:var(--ui-green);border-radius:0}
html body #selection #pokemon-picker .team-moves,html body #selection #pokemon-picker .team-remove{border:2px solid var(--ui-soft);border-radius:6px;background:var(--ui-bg2);color:var(--ui-ink2);transition:background .12s,color .12s,border-color .12s,transform .12s}
html body #selection #pokemon-picker .team-moves:hover{border-color:var(--ui-cyan);color:var(--ui-cyan);transform:scale(1.08)}
html body #selection #pokemon-picker .team-remove:hover{background:var(--ui-red);border-color:var(--ui-red);color:#fff;transform:scale(1.08)}
html body #selection .team-actions button{border:2px solid var(--ui-soft);border-radius:6px;background:var(--ui-bg2);color:var(--ui-ink2)}
html body #selection .team-actions button:hover:not(:disabled){border-color:var(--ui-line);color:var(--ui-ink)}

/* ---------- botão iniciar ---------- */
html body #selection #pokemon-picker #start,html body #selection #start{min-height:60px;padding:4px 20px 0;border:2px solid var(--ui-green-d);border-radius:8px;background:var(--ui-green);color:#04260f;box-shadow:0 3px 0 var(--ui-green-d);font:400 34px/1 var(--ui-pixel);letter-spacing:.8px;text-transform:uppercase;transition:transform .12s var(--ui-ease),box-shadow .12s,filter .12s}
html body #selection #start:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 0 var(--ui-green-d);filter:brightness(1.07)}
html body #selection #start:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ui-green-d)}
html body #selection #start:disabled{background:#1b4a3a;border-color:#0d2a20;color:#6aa88a;box-shadow:0 3px 0 #0d2a20;opacity:.7}
html body #selection #start span{font:inherit}
html body #selection #selection-hint,html body #selection .match-summary{font:12.5px 'Segoe UI',sans-serif;color:var(--ui-ink2)}

/* ---------- configuração e arena (coluna direita) ---------- */
html body #selection .visual-options{gap:0;border:2px solid var(--ui-soft);border-radius:8px;overflow:hidden;background:var(--ui-bg2)}
html body #selection .visual-options button{min-height:34px;padding:3px 10px 0;border:0;border-right:2px solid var(--ui-soft);border-radius:0;background:none;box-shadow:none;color:var(--ui-ink2);font:400 19px/1 var(--ui-pixel);letter-spacing:.4px;text-transform:uppercase;transition:background .12s,color .12s}
html body #selection .visual-options button:last-child{border-right:0}
html body #selection .visual-options button:hover:not(:disabled){background:var(--ui-panel);color:var(--ui-ink)}
html body #selection .visual-options button[aria-pressed=true]{background:var(--ui-yellow);color:#2a1d00}
html body #selection .settings-fields label,html body #selection .settings-fields{font:400 17px/1 var(--ui-pixel);letter-spacing:.8px;color:var(--ui-ink3);text-transform:uppercase}
html body #selection select,html body #selection .roster-toolbar input{border:2px solid var(--ui-soft);border-radius:8px;background:#05192b;color:var(--ui-ink);font-size:13px}
html body #selection .arena-caption b{font:400 24px/1 var(--ui-pixel);letter-spacing:.4px}
html body #selection .arena-thumbnails button,html body #selection .arena-thumbnails>*{border-radius:6px}
html body #selection .arena-thumbnails .active,html body #selection .arena-thumbnails [aria-pressed=true],html body #selection .arena-thumbnails .selected{border-color:var(--ui-yellow)}
html body #selection .arena-arrow{border:2px solid var(--ui-soft);border-radius:6px;background:#031019cc}

/* ---------- golpes e estratégia ---------- */
html body #selection .strategy-card{border-radius:8px}
html body #selection .strategy-heading strong{font:400 24px/1 var(--ui-pixel)}
html body #selection .strategy-moves span{border-radius:5px;font:12px 'Segoe UI',sans-serif}
html body #selection .strategy-card button{border:2px solid var(--ui-soft);border-radius:6px;background:var(--ui-bg2);font:400 17px/1 var(--ui-pixel);letter-spacing:.5px;color:var(--ui-ink2)}
html body #selection .strategy-card button:hover{border-color:var(--ui-cyan);color:var(--ui-cyan)}
/* ajustes de largura */
html body .game-sidebar nav button,html body .game-sidebar nav>a{font-size:19px;white-space:nowrap;letter-spacing:.3px}
html body #selection .visual-options button{font-size:17px;padding:3px 6px 0}