/* ==========================================================================
   CONTAS — listagem (/accounts) e detalhe (/account/<id>)
   ==========================================================================

   POR QUE UM ARQUIVO PARA 14 PÁGINAS
   ----------------------------------
   São 7 páginas de listagem e 7 de detalhe, uma por jogo, e o vocabulário de
   classes é praticamente o mesmo em todas: `.account-card`, `.card-header`,
   `.info-tag`, `.badge`, `.account-actions.unified`, `.pagination*`, os
   filtros, e no detalhe o `.account-layout`/`.price-card`. Um CSS por jogo
   duplicaria sete vezes o mesmo código — foi assim que o style.css chegou a
   9442 linhas com `.game-details` declarada 4 vezes.

   Só três ilhas são exclusivas, e estão em seções marcadas no fim:
     - grade de skins do Valorant (116x79, raridades)
     - capes do Minecraft
     - `.games-section` do Steam

   ONDE ESTE ARQUIVO PRECISA SER LIGADO
   ------------------------------------
   IMEDIATAMENTE ANTES DE `</head>`, não ao lado do style.css. Motivo: cinco
   desses templates (Accounts/{valorant,lol,fortnite,supercell,roblox}) têm um
   `<style>` no PRÓPRIO <head>, depois do <link> do style.css. Entrando ao
   lado do style.css, esses blocos ganhariam por ordem; entrando antes do
   `</head>`, a ordem passa a ser nossa.

   Os outros blocos `<style>` desses templates ficam no <body> (todos os 14
   têm pelo menos um), e esses vêm depois de qualquer <link>. Para eles a
   especificidade resolve: `body .classe` (0,1,1) ganha de `.classe` (0,1,0).

   SOBRE O !important AQUI
   -----------------------
   Usado em dois lugares, os dois por necessidade comprovada:
     1. o botão de compra do detalhe, porque o style.css o declara em
        `.account-details .price-card .buy-button` (0,3,0) COM !important;
     2. o dropdown do menu nas 7 páginas de detalhe, que tem um bloco de 156
        linhas com 98 !important replicado byte a byte em todas elas.
   Fora disso, especificidade.

   O QUE NÃO MEXER
   ---------------
   `static/style.css:9437` esconde `.risk-badge` e `.risk-assessment-section`
   com `display: none !important`, e o comentário acima diz que é desligamento
   intencional ("Para REATIVAR, basta remover este bloco"). Não estilizei esses
   dois, e quem vier depois não deve "consertar" achando que é defeito.
   ========================================================================== */

html body {
    background: var(--aa-bg);
    color: var(--aa-text);
}

/* ======================================================================== */
/* CABEÇALHO DA LISTAGEM                                                     */
/* ======================================================================== */

body .presentation {
    text-align: center;
    padding: var(--aa-7) 0 var(--aa-5);
}

body .presentation h1 {
    font-family: var(--aa-display);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--aa-text);
    margin: var(--aa-3) 0 var(--aa-2);
}

body .presentation .subtitle {
    color: var(--aa-text-dim);
    font-size: 1rem;
}

body .presentation .logo {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    filter: drop-shadow(0 10px 26px rgba(34, 229, 250, 0.22));
}

/* ------------------------------------------------------ seletor de jogos -- */
body .game-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--aa-2);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    transition: border-color var(--aa-fast), background var(--aa-fast),
                transform var(--aa-fast);
}

body .game-filter:hover {
    border-color: rgba(34, 229, 250, 0.4);
    background: rgba(34, 229, 250, 0.06);
    transform: translateY(-2px);
}

/* o jogo atual: borda de acento, não fundo cheio — a arte do ícone continua
   legível, que é o que o usuário está procurando */
body .game-filter.active {
    border-color: var(--aa-cyan);
    background: rgba(34, 229, 250, 0.1);
    box-shadow: var(--aa-shadow-cyan);
}

body .game-filter .category-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* ======================================================================== */
/* FILTROS                                                                   */
/* ======================================================================== */

body .toggle-filters-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line-strong);
    color: var(--aa-text);
    font-family: var(--aa-display);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    transition: border-color var(--aa-fast), background var(--aa-fast),
                transform var(--aa-fast);
}

body .toggle-filters-btn:hover {
    background: rgba(34, 229, 250, 0.08);
    border-color: var(--aa-cyan);
    transform: translateY(-2px);
}

body .filters-panel,
body .filters-container .filters-content {
    background: linear-gradient(170deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
}

body .filter-section h4 {
    font-family: var(--aa-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aa-cyan);
}

body .filter-group label {
    font-family: var(--aa-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-text-dim);
}

body .filter-group label i {
    color: var(--aa-cyan);
}

body .filter-group select,
body .filter-group input[type="number"],
body .filter-group input[type="text"],
body .autocomplete-container input[type="text"],
body .valorant-autocomplete-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
    color: var(--aa-text);
    transition: border-color var(--aa-fast), background var(--aa-fast),
                box-shadow var(--aa-fast);
}

/* o foco dos filtros tinha box-shadow VERDE (rgba(0,255,136)) sobre borda
   ciano — sobra do tema anterior. Agora o halo é da mesma cor da borda. */
body .filter-group select:focus,
body .filter-group input[type="number"]:focus,
body .filter-group input[type="text"]:focus,
body .valorant-autocomplete-input:focus {
    outline: none;
    border-color: var(--aa-cyan);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(34, 229, 250, 0.15);
}

body .valorant-autocomplete-dropdown,
body .autocomplete-container .autocomplete-dropdown {
    background: var(--aa-surface-2);
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
}

/* ------------------------------------------------------------ ordenação --- */
body .sort-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line-strong);
    color: var(--aa-text-dim);
    font-family: var(--aa-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    transition: all var(--aa-fast);
}

body .sort-btn:hover {
    color: var(--aa-text);
    border-color: var(--aa-cyan);
    background: rgba(34, 229, 250, 0.06);
}

body .sort-btn.active {
    background: rgba(34, 229, 250, 0.12);
    border-color: var(--aa-cyan);
    color: var(--aa-cyan);
}

body .sort-buttons h4 {
    font-family: var(--aa-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
}

/* ------------------------------------------------- aplicar / limpar ------- */
body .apply-filters-btn,
body .clear-filters-btn {
    font-family: var(--aa-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    border: 1px solid transparent;
    text-shadow: none;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    transition: transform var(--aa-fast), box-shadow var(--aa-fast),
                background var(--aa-fast), border-color var(--aa-fast);
}

body .apply-filters-btn {
    background: linear-gradient(135deg, var(--aa-cyan) 0%, #5af0ff 100%);
    color: #04161a;
}

body .apply-filters-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--aa-cyan-glow);
}

/* limpar não é ação destrutiva de dados: era vermelho sangue e competia com o
   aplicar. Virou fantasma, que é o peso certo para "desfazer filtro". */
body .clear-filters-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--aa-line-strong);
    color: var(--aa-text-dim);
}

body .clear-filters-btn:hover {
    border-color: var(--aa-erro);
    color: #ffc2cd;
    background: rgba(255, 92, 122, 0.1);
    transform: translateY(-2px);
    box-shadow: none;
}

/* ======================================================================== */
/* CARD DE CONTA                                                             */
/* ======================================================================== */

body .account-card {
    background: linear-gradient(165deg, var(--aa-surface-2) 0%, var(--aa-surface) 65%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    padding: var(--aa-5);
    margin-bottom: var(--aa-5);
    position: relative;
    transition: border-color var(--aa-mid), box-shadow var(--aa-mid),
                transform var(--aa-mid);
}

body .account-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 229, 250, 0.3);
    box-shadow: var(--aa-shadow-cyan);
}

/* -------------------------------------------------- bloco de cada jogo ---- */
/* O `style.css:1461` pinta este invólucro com `background: #1f1f1f` - o cinza
   chapado do tema antigo. Como o card agora é um gradiente mais escuro e mais
   azulado, aquele cinza virava uma caixa clara dentro do card, mais visível
   que o próprio conteúdo. (E com `border-radius: 8px`, era também o último
   canto arredondado sobrando num card todo chanfrado.)

   Não virou transparente porque ele tem função: uma conta com Valorant E LoL
   renderiza DOIS `.game-details` no mesmo card, e é esse fundo que separa um
   jogo do outro. Então ele continua sendo superfície — só deixou de ser de
   outra cor. Um levante de 2% sobre o card agrupa sem competir.

   Atenção: `.game-details` é declarada QUATRO vezes no style.css (1033, 1461,
   1885, 1901) e o que vale é a última de cada propriedade. Ao mexer aqui,
   confira o conjunto, não só uma das quatro. */
body .game-details {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    padding: var(--aa-4);
    margin-bottom: var(--aa-3);
}

/* o último não precisa do espaço de baixo: o rodapé do card já tem o seu */
body .game-details:last-of-type {
    margin-bottom: 0;
}

/* o status-bar compensava o padding de 10px com margens negativas de -10px.
   Com o padding agora em 16px, aquela conta não fecha mais e a barra ficava
   desencaixada das bordas. */
body .game-details .status-bar {
    margin: calc(var(--aa-4) * -1) calc(var(--aa-4) * -1) var(--aa-3);
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid var(--aa-line);
}

/* ---------------------------------------------------------- cabeçalho ----- */
body .card-header {
    padding: 0 0 var(--aa-3);
    margin-bottom: var(--aa-3);
    border-bottom: 1px solid var(--aa-line);
    border-radius: 0;
    text-align: left;
}

body .game-icons,
body .game-icons-steam,
body .game-icons-minecraft {
    display: flex;
    align-items: center;
    gap: var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aa-text);
    margin-bottom: 0;
    padding: 0;
}

/* o ícone verde (#00ff88) do `.card-header i` era resto do tema antigo */
body .card-header i {
    color: var(--aa-cyan);
}

/* ---------------------------------------------------------- tags de info -- */
body .info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--aa-3);
}

body .info-tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    padding: 4px var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aa-text-dim);
}

/* ------------------------------------------------------------- badges ----- */
/* Eram pílulas de gradiente saturado, oito cores diferentes competindo entre
   si dentro do mesmo card. Viraram chips de contorno: a cor (que carrega o
   significado — VP, RP, banimento, acesso) continua ali, mas no traço e no
   texto, não num bloco cheio. O card volta a ter hierarquia. */
body .badge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 3px var(--aa-2);
    font-family: var(--aa-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
    min-width: 0;
    height: auto;
    line-height: 1.5;
}

body .badge.blue,
body .badge.info { color: #6aa8ff; background: rgba(106, 168, 255, 0.1); }
body .badge.purple { color: #b98cff; background: rgba(185, 140, 255, 0.1); }
body .badge.orange { color: var(--aa-aviso); background: rgba(255, 171, 46, 0.1); }
body .badge.riot { color: #ff7ab8; background: rgba(255, 122, 184, 0.1); }
body .badge.green,
body .badge.success { color: var(--aa-ok); background: rgba(50, 213, 131, 0.1); }
body .badge.red { color: var(--aa-erro); background: rgba(255, 92, 122, 0.1); }
body .badge.cyan { color: var(--aa-cyan); background: rgba(34, 229, 250, 0.1); }
body .badge.yellow {
    color: var(--aa-aviso);
    background: rgba(255, 171, 46, 0.1);
    border-color: var(--aa-aviso);
}

/* ------------------------------------------------------- grade de skins --- */
body .skin-item,
body .valorant-skin-item {
    border: 1px solid var(--aa-line);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: border-color var(--aa-fast), transform var(--aa-fast);
}

body .skin-item:hover,
body .valorant-skin-item:hover {
    border-color: rgba(34, 229, 250, 0.5);
    transform: translateY(-2px);
}

body .skin-item.more-skins,
body .valorant-skin-item.more-skins {
    background: rgba(34, 229, 250, 0.08);
    border-color: rgba(34, 229, 250, 0.3);
}

body .more-skins-content {
    font-family: var(--aa-display);
    color: var(--aa-cyan);
}

body .no-skins-message {
    border: 1px dashed var(--aa-line-strong);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.02);
    color: var(--aa-text-faint);
    font-style: normal;
    font-family: var(--aa-display);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------- rodapé ------- */
body .divider,
body .separator {
    height: 1px;
    background: var(--aa-line);
    border: none;
}

body .account-actions.unified {
    border-top: 1px solid var(--aa-line);
    padding-top: var(--aa-4);
    gap: var(--aa-3);
}

body .item-id,
body .action-left .item-id {
    font-family: var(--aa-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
}

body .price-tag {
    background: rgba(34, 229, 250, 0.1);
    border: 1px solid rgba(34, 229, 250, 0.35);
    border-radius: 0;
    color: var(--aa-cyan);
    font-family: var(--aa-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: var(--aa-2) var(--aa-4);
    font-variant-numeric: tabular-nums;
}

body .details-button,
body .buy-button {
    font-family: var(--aa-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    border: 1px solid transparent;
    padding: var(--aa-2) var(--aa-4);
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    transition: transform var(--aa-fast), box-shadow var(--aa-fast),
                background var(--aa-fast), border-color var(--aa-fast);
}

body .details-button {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--aa-line-strong);
    color: var(--aa-text-dim);
}

body .details-button:hover {
    background: rgba(34, 229, 250, 0.08);
    border-color: var(--aa-cyan);
    color: var(--aa-text);
    transform: translateY(-2px);
}

/* o comprar era azul #0056b3 com hover #2d8d99 (dois azuis sem relação entre
   si, nenhum deles da marca) */
body .buy-button {
    background: linear-gradient(135deg, var(--aa-cyan) 0%, #5af0ff 100%);
    color: #04161a;
}

body .buy-button:hover {
    background: linear-gradient(135deg, #5af0ff 0%, var(--aa-cyan) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--aa-cyan-glow);
}

/* ------------------------------------------------------------- vazio ------ */
body .no-accounts {
    padding: var(--aa-8) var(--aa-5);
    background: linear-gradient(160deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px dashed var(--aa-line-strong);
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
}

body .no-accounts h3 {
    font-family: var(--aa-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--aa-text);
    margin-bottom: var(--aa-2);
}

body .no-accounts p {
    color: var(--aa-text-dim);
}

/* ======================================================================== */
/* PAGINAÇÃO                                                                 */
/* ======================================================================== */

body .pagination {
    background: linear-gradient(160deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
}

body .pagination-btn,
body .pagination-page {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line-strong);
    border-radius: 0;
    color: var(--aa-text-dim);
    font-family: var(--aa-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: all var(--aa-fast);
}

body .pagination-btn:hover,
body .pagination-page:hover {
    background: rgba(34, 229, 250, 0.08);
    border-color: var(--aa-cyan);
    color: var(--aa-text);
    transform: translateY(-1px);
}

/* a página atual era azul #4a90e2, que não existe em nenhum outro ponto do
   site */
body .pagination-page.current {
    background: linear-gradient(135deg, var(--aa-cyan) 0%, #5af0ff 100%);
    border-color: var(--aa-cyan);
    color: #04161a;
    font-weight: 700;
}

body .pagination-page.current:hover {
    transform: none;
}

body .pagination-ellipsis {
    color: var(--aa-text-faint);
}

body .pagination-info {
    font-family: var(--aa-display);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
}

/* ======================================================================== */
/* RODAPÉ DA LISTAGEM (os 3 selos + discord)                                 */
/* ======================================================================== */
/* `.feature-item` existe em DOIS lugares com significados diferentes: aqui
   (os 3 selos da listagem, dentro de `.features`) e no `.price-features` do
   detalhe. Por isso os dois seletores abaixo são escopados — sem isso, um
   estragaria o outro. */

body .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--aa-4);
    margin: var(--aa-8) auto;
    max-width: 1280px;
}

body .features .feature-item {
    display: block;
    background: linear-gradient(160deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    padding: var(--aa-5);
    margin: 0;
    text-align: left;
    transition: border-color var(--aa-mid), box-shadow var(--aa-mid);
}

body .features .feature-item:hover {
    border-color: rgba(34, 229, 250, 0.28);
    box-shadow: var(--aa-shadow-cyan);
    transform: none;
}

body .features .feature-item h3 {
    font-family: var(--aa-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aa-text);
    margin: var(--aa-3) 0 var(--aa-2);
}

body .features .feature-item p {
    color: var(--aa-text-dim);
    line-height: 1.7;
    font-size: 0.9rem;
}

body .discord-button-container {
    text-align: center;
    margin-bottom: var(--aa-8);
}

/* ======================================================================== */
/* PÁGINA DE DETALHE                                                         */
/* ======================================================================== */

body .account-details .back-button-section {
    margin: var(--aa-5) 0;
}

/* ----------------------------------------------------- coluna de preço ---- */
body .price-card {
    background: linear-gradient(170deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    padding: var(--aa-6);
}

body .price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--aa-cut);
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--aa-cyan), var(--aa-violet));
}

body .account-games {
    font-family: var(--aa-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aa-text);
}

body .account-id-accountsdetails {
    font-family: var(--aa-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
    margin-top: var(--aa-2);
}

body .price-value {
    margin: var(--aa-4) 0;
    padding: var(--aa-4) 0;
    border-top: 1px solid var(--aa-line);
    border-bottom: 1px solid var(--aa-line);
    border-radius: 0;
}

body .price-value .amount {
    font-family: var(--aa-display);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--aa-cyan);
    font-variant-numeric: tabular-nums;
}

body .price-features .feature-item {
    display: flex;
    align-items: center;
    gap: var(--aa-2);
    margin-bottom: var(--aa-3);
    padding: 0;
    border-radius: 0;
}

body .price-features .feature-item:hover {
    transform: none;
}

body .price-features .feature-item span {
    color: var(--aa-text-dim);
    font-size: 0.86rem;
    line-height: 1.6;
    padding: 0;
}

/* O style.css declara este botão em `.account-details .price-card .buy-button`
   (0,3,0) COM !important. Para vencer é preciso mais especificidade E
   !important também — não há outra saída aqui. */
body .account-details .price-card .buy-button {
    width: 100% !important;
    background: linear-gradient(135deg, var(--aa-cyan) 0%, #5af0ff 100%) !important;
    color: #04161a !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--aa-4) var(--aa-5) !important;
    font-family: var(--aa-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut)) !important;
}

body .account-details .price-card .buy-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px var(--aa-cyan-glow) !important;
}

body .payment-info p {
    font-family: var(--aa-display);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--aa-text-faint);
}

/* --------------------------------------------------- coluna de detalhes --- */
body .account-details-column {
    background: linear-gradient(170deg, var(--aa-surface-2) 0%, var(--aa-surface) 70%);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut) 0, 100% 0, 100% calc(100% - var(--aa-cut)),
                       calc(100% - var(--aa-cut)) 100%, 0 100%, 0 var(--aa-cut));
    padding: var(--aa-6);
}

/* todos os cabeçalhos de seção, de todos os jogos, de uma vez */
body .section-header-skinslol,
body .section-header-valorant,
body .section-header-championslol,
body .section-header-fortnite,
body .section-header-steam,
body .section-header-supercell,
body .section-header-roblox {
    font-family: var(--aa-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aa-cyan);
    border-radius: 0;
    padding: 0 0 var(--aa-3);
    margin-bottom: var(--aa-4);
    border-bottom: 1px solid var(--aa-line);
}

body .account-details-column .account-info.has-data p {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    padding: var(--aa-3) var(--aa-4);
}

body .account-details-column .account-info.has-data p:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--aa-line-strong);
    transform: none;
}

body .account-details-column .account-info.has-data p strong {
    font-family: var(--aa-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
}

body .account-details-column .account-info.has-data p span {
    color: var(--aa-text);
    font-weight: 700;
    text-shadow: none;
}

/* ------------------------------------------------------- credenciais ------ */
body .credential-row {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--aa-line-strong) !important;
    border-radius: 0 !important;
}

body .copy-btn {
    background: rgba(34, 229, 250, 0.1) !important;
    border: 1px solid var(--aa-cyan) !important;
    color: var(--aa-cyan) !important;
    border-radius: 0 !important;
    transition: background var(--aa-fast);
}

body .copy-btn:hover {
    background: rgba(34, 229, 250, 0.22) !important;
}

/* ----------------------------------------------- dropdown nas 7 detalhes -- */
/* As 7 páginas de detalhe repetem um bloco de 156 linhas com 98 !important no
   <body> que redefine o dropdown do menu (inclusive border-radius: 12px). Sem
   estas duas regras o cabeçalho ficaria arredondado só nessas páginas,
   enquanto no resto do site é chanfrado. */
body .user-profile-dropdown .dropdown-menu,
body .user-balance-dropdown .balance-dropdown-menu {
    border-radius: 0 !important;
    background: var(--aa-surface-2) !important;
    border: 1px solid var(--aa-line-strong) !important;
}

body .user-profile-dropdown .user-profile-trigger,
body .user-balance-dropdown .user-balance-trigger {
    border-radius: 0 !important;
}

/* ======================================================================== */
/* ILHA 1 — VALORANT                                                         */
/* ======================================================================== */
/* A grade do Valorant é a única 16:9 (116x79): as artes de arma são largas.
   lol e fortnite usam .skin-item quadrado de 57px. */

body .valorant-skin-item {
    padding: 4px;
}

/* raridade no traço: a cor diz o valor da skin sem tapar a arte */
body .valorant-skin-item.rarity-select { border-color: rgba(90, 200, 160, 0.55); }
body .valorant-skin-item.rarity-deluxe { border-color: rgba(70, 180, 230, 0.55); }
body .valorant-skin-item.rarity-premium { border-color: rgba(185, 140, 255, 0.55); }
body .valorant-skin-item.rarity-ultra { border-color: rgba(255, 190, 80, 0.6); }
body .valorant-skin-item.rarity-exclusive { border-color: rgba(255, 122, 184, 0.6); }

/* ======================================================================== */
/* ILHA 2 — MINECRAFT                                                        */
/* ======================================================================== */

body .cape-mini-item,
body .cape-more {
    border-radius: 0;
    border: 1px solid var(--aa-line-strong);
    background: rgba(0, 0, 0, 0.3);
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    transition: border-color var(--aa-fast), transform var(--aa-fast);
}

body .cape-mini-item:hover {
    border-color: rgba(34, 229, 250, 0.5);
    transform: translateY(-3px) scale(1.02);
    box-shadow: none;
}

body .cape-more {
    background: rgba(34, 229, 250, 0.08);
    border-color: rgba(34, 229, 250, 0.3);
    color: var(--aa-cyan);
    font-family: var(--aa-display);
    font-weight: 700;
}

body .cape-more:hover {
    background: rgba(34, 229, 250, 0.16);
    transform: translateY(-3px) scale(1.02);
}

body .capes-title {
    font-family: var(--aa-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-text-faint);
}

/* ======================================================================== */
/* ILHA 3 — STEAM                                                            */
/* ======================================================================== */

body .games-section h3,
body .medals-title {
    font-family: var(--aa-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-cyan);
}

body .game-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--aa-line);
    border-radius: 0;
    clip-path: polygon(var(--aa-cut-sm) 0, 100% 0, 100% calc(100% - var(--aa-cut-sm)),
                       calc(100% - var(--aa-cut-sm)) 100%, 0 100%, 0 var(--aa-cut-sm));
    transition: border-color var(--aa-fast), transform var(--aa-fast);
}

body .game-item:hover {
    border-color: rgba(34, 229, 250, 0.4);
    transform: translateY(-3px);
}

body .game-item img {
    border-radius: 0;
}

body .no-game-image {
    border-radius: 0;
    background: linear-gradient(135deg, var(--aa-surface-2), var(--aa-surface));
    border: 1px solid var(--aa-line);
}

/* ======================================================================== */
/* RESPONSIVO                                                                */
/* ======================================================================== */

@media (max-width: 768px) {
    body .account-card {
        padding: var(--aa-4);
    }

    body .presentation {
        padding: var(--aa-5) 0 var(--aa-4);
    }

    body .game-filter .category-icon {
        width: 36px;
        height: 36px;
    }

    body .account-actions.unified {
        flex-direction: column;
        align-items: stretch;
    }

    body .action-right {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    body .price-card,
    body .account-details-column {
        padding: var(--aa-5) var(--aa-4);
    }
}