:root {
    /* --- DARK THEME PALETTE (Axie Legend Inspired) --- */
    --bg-body: #0f172a;       /* Azul marinho muito escuro (fundo principal) */
    --bg-card: #0f172a;       /* Azul acinzentado (fundo dos cards/paineis) */
    --bg-hover: #334155;      /* Cor de hover para itens de lista/botões */
    --border-color: #334155;  /* Cor das bordas */

    --text-main: #f1f5f9;     /* Texto principal (quase branco) */
    --text-muted: #94a3b8;    /* Texto secundário (cinza claro) */

    --primary-color: #6366f1; /* Indigo vibrante */
    --secondary-color: #818cf8;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;

    /* Cores das Classes (Ajustadas para brilhar no fundo escuro) */
    --reptile-color: #dc86e6;
    --dusk-color: #129094;
    --dawn-color: #beceec;

    /* --- MOBILE: altura real da viewport ---
       100vh no iOS/Android inclui a barra de endereco, entao o rodape de
       drawers e modais fica embaixo dela, inacessivel. dvh resolve. */
    --app-h: 100vh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

@supports (height: 100dvh) {
    :root { --app-h: 100dvh; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    width: 100%;
    /* Substituir 'hidden' por 'clip' impede rolagem horizontal sem quebrar o position: sticky do Desktop */
    overflow-x: clip;
}

/* Isola o bloqueio de overscroll (que impede o pull-to-refresh) apenas para o mobile */
@media (max-width: 1024px) {
    html,
    body {
        overscroll-behavior: none;
    }
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-body);
    min-height: 100vh;
    color: var(--text-main);
}

img,
canvas,
svg,
video {
    max-width: 100%;
}

/* MOBILE: trava de rolagem do fundo quando um drawer/modal abre.
   Usada por toggleMobileMenu()/toggleMobileFilters() no app.js. */
body.scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Scrollbar Customizada (Dark) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-body);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-color);
}

.main-wrapper {
    display: flex;
    flex-direction: column; /* Empilha as abas em cima do conteúdo */
    gap: 1.5rem;
    padding: 2rem;
    flex: 1;
    height: auto;
}

.finder-grid-layout {
    display: grid;
    grid-template-columns: 400px 1fr; /* O layout original de 2 colunas */
    gap: 2rem;
    width: 100%;
}

/* Ajuste Responsivo para o novo Grid */
@media (max-width: 1024px) {
    .finder-grid-layout {
        grid-template-columns: 1fr;
    }

    .main-wrapper {
        padding: 1rem;
        gap: 1rem;
    }
}

/* --- FILTROS --- */
.filters-panel {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 2rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

/* Seção de Busca por Carteira */
.wallet-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.wallet-search-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.wallet-buttons-container {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.wallet-buttons-container .btn-wallet-search,
.wallet-buttons-container .btn-clear-wallet {
    flex: 1;
    min-width: 0;
}

.wallet-input {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.wallet-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.btn-wallet-search {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-wallet-search:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-wallet-search:disabled {
    background: var(--border-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-clear-wallet {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-clear-wallet:hover {
    background: var(--danger-color);
    color: white;
    transform: translateY(-2px);
}

.wallet-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-wallet-action {
    flex: 1;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-wallet-action:hover {
    border-color: var(--primary-color);
    color: var(--text-main);
}

.btn-wallet-action.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.wallet-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-body);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.wallet-stats {
    font-weight: 600;
    color: var(--primary-color);
}

.active-wallets-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.wallet-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    max-width: 100%;
}

.wallet-addr-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.remove-wallet-btn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
    transition: all 0.2s ease;
    margin-left: 0.25rem;
    flex-shrink: 0;
}

.remove-wallet-btn:hover {
    background: var(--danger-color);
    color: white;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
    color: var(--text-main);
}

.filter-section {
    margin-bottom: 2rem;
}

.filter-section h3 {
    color: var(--text-main);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* --- Switch Toggle --- */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-hover);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.classes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.class-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: 70px;
    justify-content: center;
}

.class-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.class-card input[type="checkbox"] {
    display: none;
}

.class-card.selected {
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.class-icon {
    width: 25.2px;
    height: 25.2px;
    border-radius: 6px;
    object-fit: contain;
}

.class-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.class-card.selected .class-name {
    color: white;
}

.global-search-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.search-box {
    position: relative;
    width: 100%;
}

#part-search, #r1-search, #r2-search {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-body);
    color: var(--text-main);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.search-result-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-main);
}

.search-result-item:hover {
    background: var(--bg-hover);
}

.search-result-item:last-child {
    border-bottom: none;
}

.part-type-badge {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.actions-section-compact {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.actions-section-compact .btn-search {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.actions-section-compact .btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.actions-section-compact .btn-clear {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.actions-section-compact .btn-clear:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: translateY(-2px);
}

.selected-parts-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.selected-parts-global {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 3rem;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-body);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.parts-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.part-type-title {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.part-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.part-select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-main);
}

.selected-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2rem;
}

.selected-part {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-part .remove {
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
}

.selected-part .remove:hover {
    background: rgba(255, 255, 255, 0.3);
}

.advanced-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.filter-group select,
.filter-group input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-main);
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.range-inputs input {
    flex: 1;
}

.pp-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.pp-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-body);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    justify-content: space-between;
}

.pp-class-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pp-class-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
}

.pp-class-name {
    display: none;
}

.pp-input {
    width: 60px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.8rem;
    text-align: center;
}

.pp-input::placeholder {
    color: var(--border-color);
}

/* --- RESULTADOS --- */
.results-panel {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    height: fit-content;
    border: 1px solid var(--border-color);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.results-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.results-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.results-title-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-main);
}

.results-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.btn-view-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.btn-view-toggle:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

.btn-view-toggle.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-create-team-header {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    font-size: 0.9rem;
}

.btn-create-team-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-filters {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.quick-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.quick-filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-main);
    min-width: 150px;
}

body.teams-view .results-grid {
    display: block;
    grid-template-columns: none;
    gap: 0;
}

.loading-spinner {
    color: var(--primary-color);
}

.results-container {
    position: relative;
    min-height: 400px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 0.8rem;
    padding: 1rem 0;
}

.results-grid:not(:empty) {
    display: grid;
}

.results-grid:empty {
    display: none;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border-color);
}

.results-grid:not(:empty) + .no-results {
    display: none;
}

.results-grid:empty + .no-results {
    display: flex;
}

/* --- CARD Styles --- */
.axie-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    width: 245px;
    margin: 0 auto;
}

.axie-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.axie-card.breed-view {
    height: auto;
    min-height: 320px;
}

.breed-card-content {
    padding: 0.5rem;
    font-size: 0.75rem;
}

.compact-genes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.compact-genes-table th {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.7rem;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.compact-genes-table td {
    padding: 2px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.part-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
}

.gene-cell {
    position: relative;
    padding: 2px 4px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65px;
    background: transparent !important;
}

.gene-cell.aquatic { color: #00B8CE; }
.gene-cell.beast { color: #FFB812; }
.gene-cell.plant { color: #6BCF53; }
.gene-cell.bug { color: #FF5341; }
.gene-cell.bird { color: #FF8BB9; }
.gene-cell.reptile { color: var(--reptile-color); }
.gene-cell.mech { color: #C5C5C5; }
.gene-cell.dawn { color: var(--dawn-color); }
.gene-cell.dusk { color: var(--dusk-color); }
.gene-cell.unknown { color: var(--text-muted); }

.purity-stat {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
}

.axie-card.selectable {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.axie-card.selectable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.axie-card.selectable.selected-red {
    border: 2px solid var(--danger-color);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.axie-card.selectable.selected-red .selection-checkbox {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.axie-card.selectable.selected-red .selection-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.axie-card.used-in-team {
    opacity: 0.5;
    cursor: not-allowed;
}

.axie-card.used-in-team:hover {
    transform: none;
    box-shadow: none;
}

.axie-image-container {
    position: relative;
    width: 100%;
    height: 157px;
}

.axie-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: linear-gradient(135deg, #0f172a, #0f172a);
    border-radius: 8px 8px 0 0;
}

.collection-badges-container {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 120px;
    z-index: 10;
}

.collection-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    flex-shrink: 0;
}

.collection-badge img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
}

.collection-badge.agamogenesis { background: linear-gradient(135deg, #8B4513, #A0522D); }
.collection-badge.mystic { background: linear-gradient(135deg, #8B5FBF, #6A0DAD); }
.collection-badge.shiny { background: linear-gradient(135deg, #87CEEB, #B0E2FF); }
.collection-badge.xmas { background: linear-gradient(135deg, #228B22, #32CD32); }
.collection-badge.nightmare { background: linear-gradient(135deg, #8B008B, #BA55D3); }
.collection-badge.summer { background: linear-gradient(135deg, #00CED1, #20B2AA); }
.collection-badge.japan { background: linear-gradient(135deg, #8B4513, #CD853F); }
.collection-badge.origin { background: linear-gradient(135deg, #FF4500, #FF6347); }
.collection-badge.meo { background: linear-gradient(135deg, #1E3A8A, #3B82F6); }

.selection-checkbox {
    display: none !important;
}

.marketplace-button {
    position: absolute;
    top: 43px;
    right: 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.marketplace-button:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

.axie-info {
    padding: 0.75rem;
}

.axie-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.axie-class-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.axie-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.axie-level {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-left: auto;
}

.axie-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success-color);
    margin-bottom: 0.5rem;
}

.axie-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.9;
}

.btn-marketplace {
    background: var(--success-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-marketplace:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- MODAL --- */
.modal {
    display: none;
    position: fixed;
    z-index: 10020;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 2% auto;
    padding: 2rem;
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.close {
    color: var(--text-muted);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.close:hover {
    color: var(--danger-color);
}

.axie-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1rem;
}

.modal-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.collection-badge-large {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.collection-badge-large img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
}

.badge-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-body);
    color: var(--text-main);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border: 1px solid var(--border-color);
}

.collection-badge-large:hover .badge-tooltip {
    opacity: 1;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.axie-image-large {
    width: 100%;
    max-width: 400px;
    height: 300px;
    object-fit: contain;
    background: linear-gradient(135deg, #0f172a, #0f172a);
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    display: block;
}

.axie-image-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stat-label {
    font-weight: 600;
    color: var(--text-muted);
}

.stat-value {
    font-weight: 700;
    color: var(--primary-color);
}

.axie-genes-section {
    background: var(--bg-body);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.axie-genes-section h3 {
    margin-bottom: 1rem;
    color: var(--text-main);
}

.genes-container {
    position: relative;
    background: #000;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.genes-code {
    color: #00ff88;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.btn-copy-genes {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-copy-genes:hover {
    background: rgba(255,255,255,0.2);
}

.genes-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.genes-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.genes-table th,
.genes-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.genes-table th {
    background: var(--bg-card);
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

.genes-table thead th:first-child {
    text-align: left;
    width: 80px;
}

.genes-table .body-row td {
    font-weight: 600;
}

.body-shape-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.genes-table .part-icon-cell {
    width: 80px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: capitalize;
    text-align: center;
}

.genes-table .part-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.genes-table .header-icon {
    width: 32px;
    height: 32px;
}

.genes-table td.gene-name {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
}

.gene-name.aquatic { color: #00B8CE !important; }
.gene-name.beast { color: #FFB812 !important; }
.gene-name.plant { color: #6BCF53 !important; }
.gene-name.bug { color: #FF5341 !important; }
.gene-name.bird { color: #FF8BB9 !important; }
.gene-name.reptile { color: var(--reptile-color) !important; }
.gene-name.mech { color: #C5C5C5 !important; }
.gene-name.dawn { color: var(--dawn-color) !important; }
.gene-name.dusk { color: var(--dusk-color) !important; }
.gene-name.unknown { color: var(--text-muted) !important; }

.genes-raw-container {
    position: relative;
    background: #000;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.genes-raw-container .genes-code {
    color: #00ff88;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.genes-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.part-item {
    padding: 0.75rem;
    background: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.part-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.7;
    text-transform: capitalize;
}

.part-name {
    font-weight: 600;
    color: var(--text-main);
}

.part-class {
    font-size: 0.8rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--primary-color);
    color: white;
    align-self: flex-start;
    text-transform: capitalize;
}

.part-item.aquatic .part-class { background: #00B8CE; }
.part-item.beast .part-class { background: #FFB812; }
.part-item.plant .part-class { background: #6BCF53; }
.part-item.bug .part-class { background: #FF5341; }
.part-item.bird .part-class { background: #FF8BB9; }
.part-item.reptile .part-class { background: var(--reptile-color); }
.part-item.mech .part-class { background: #C5C5C5; color: #333; }
.part-item.dawn .part-class { background: var(--dawn-color); color: #333; }
.part-item.dusk .part-class { background: var(--dusk-color); color: white; }
.part-item.unknown .part-class { background: #9CA3AF; }

.team-modal-content h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
}

.team-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--text-muted);
}

.form-input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-body);
    color: var(--text-main);
}

.form-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.selected-axies-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-height: 140px;
}

.selected-axie-preview.empty {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.selected-axie-preview.empty:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.selected-axie-preview.empty i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.selected-axie-preview.filled {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.selected-axie-preview {
    background: var(--bg-card);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    text-align: center;
    position: relative;
}

.selected-axie-preview img {
    width: 240px;
    height: 200px;
    object-fit: contain;
    border-radius: 4px;
}

.selected-axie-preview .axie-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--text-main);
}

.remove-axie-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.remove-axie-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.change-axie-btn {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--warning-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.change-axie-btn:hover {
    background: #e69500;
    transform: scale(1.1);
}

.team-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-cancel {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: #dc2626;
}

.btn-create-team {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create-team:hover {
    background: #059669;
}

.teams-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
}

.team-card-new {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    min-height: auto;
    display: flex;
    flex-direction: column;
}

.team-card-new:hover {
    transform: translateY(-2.4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.team-header-new.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.team-name-new {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
}

.team-wallet-new {
    font-size: 1.08rem;
    color: var(--text-muted);
    opacity: 0.7;
    word-break: break-all;
    max-width: 240px;
    text-align: right;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-icon-action {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: white;
}

.btn-icon-action.edit { background: var(--warning-color); }
.btn-icon-action.edit:hover { background: #e69500; }

.btn-icon-action.delete { background: var(--danger-color); }
.btn-icon-action.delete:hover { background: #dc2626; }

.team-axies-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
}

.team-actions-new { display: none; }

.team-axie-new {
    position: relative;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.6rem;
    border-radius: 9.6px;
    border: 1px solid transparent;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.team-axie-new:hover {
    border-color: var(--primary-color);
    transform: translateY(-2.4px);
    box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.2);
}

.team-axie-new.selected-red {
    border: 2px solid var(--danger-color);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.team-axie-new:hover .team-axie-actions { opacity: 1; }

.btn-quick-swap {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--warning-color);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.team-axie-new:hover .btn-quick-swap { opacity: 1; }
.btn-quick-swap:hover { background: #e69500; transform: scale(1.1); }

.btn-marketplace { background: var(--success-color); color: white; }
.btn-marketplace:hover { background: #059669; }

.btn-quick-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--danger-color);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.team-axie-new:hover .btn-quick-remove { opacity: 1; }
.btn-quick-remove:hover { background: #dc2626; transform: scale(1.1); }

.team-axie-new img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    border-radius: 9.6px;
    background: linear-gradient(135deg, #0f172a, #0f172a);
}

.team-morph-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
}

.team-actions-new {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
    padding-top: 1.2rem;
    border-top: 1.2px solid var(--border-color);
}

.btn-edit-team {
    background: var(--warning-color);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4.8px;
    font-size: 0.96rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-edit-team:hover { background: #e69500; }

.btn-delete-team-new {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4.8px;
    font-size: 0.96rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-delete-team-new:hover { background: #dc2626; }

.axie-selection-modal {
    display: none;
    position: fixed;
    z-index: 10021;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.axie-selection-content {
    background-color: var(--bg-card);
    margin: 2% auto;
    padding: 2rem;
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.axie-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.selection-class-filters {
    background: var(--bg-body);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.class-filters-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.class-filters-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.5rem;
}

.class-filter-btn {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
}

.class-filter-btn:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.class-filter-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.class-filter-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.axie-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.axie-selection-grid .axie-card { width: 100%; }

.axie-selection-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-confirm-selection {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-confirm-selection:hover { background: #059669; }

.btn-cancel-selection {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel-selection:hover { background: #dc2626; }

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.team-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.team-wallet {
    font-size: 0.9rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.team-axies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.team-axie { text-align: center; }

.team-axie img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #0f172a);
}

.team-axie .axie-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--text-main);
}

.team-actions-small {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.btn-delete-team {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-delete-team:hover { background: #dc2626; }

.selection-controls {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    border: 1px solid var(--border-color);
}

.selection-count {
    font-weight: 600;
    color: var(--primary-color);
}

.btn-create-from-selection {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create-from-selection:hover { background: #059669; }

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-left: 4px solid var(--primary-color);
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    max-width: 400px;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.success { border-left-color: #10b981; }
.notification.error { border-left-color: #ef4444; }
.notification.warning { border-left-color: #f59e0b; }

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-content i { font-size: 1.25rem; }
.notification.success i { color: #10b981; }
.notification.error i { color: #ef4444; }
.notification.warning i { color: #f59e0b; }

.btn-show-ids {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all 0.3s ease;
}

.btn-show-ids:hover {
    background: var(--secondary-color);
    transform: scale(1.05);
}

.ids-list-container { margin-top: 1rem; }

.ids-list-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.btn-copy-all {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.btn-copy-all:hover { background: #059669; }

.ids-count {
    font-weight: 600;
    color: var(--primary-color);
}

.ids-list {
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-body);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.id-item {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-main);
}

.id-item:last-child { border-bottom: none; }

@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
        height: auto;
    }

    .filters-panel {
        position: static;
        height: auto;
        max-height: 70vh;
    }

    .classes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pp-filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .teams-grid-layout {
        grid-template-columns: 1fr;
    }

    .team-axies-new {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-axie-new img {
        width: 180px;
        height: 180px;
    }

    .team-card-new {
        min-height: 432px;
    }

    .class-filters-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================
   NOVA ADAPTAÇÃO MOBILE COMPLETA (MAX-WIDTH 768px)
   ========================================== */
@media (max-width: 768px) {
    .app-header { padding: 1rem; }

    /* NOVA ESTRUTURA EDGE-TO-EDGE */
    .main-wrapper {
        padding: 0 !important;
        gap: 0 !important;
    }

    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
    input, select, textarea, .form-input, .wallet-input, .pp-input {
        font-size: 16px !important;
        padding: 0.55rem 0.7rem !important;
    }

    .btn-wallet-search, .btn-search {
        font-size: 0.9rem !important;
        padding: 0.6rem !important;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .quick-filters {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .quick-filter-group { flex: 1; }
    .quick-filter-group select { min-width: auto; width: 100%; }

    .stats-grid { grid-template-columns: 1fr; }
    .parts-grid { grid-template-columns: 1fr; }

    .results-container { min-height: 300px; }

    .no-results {
        min-height: 250px;
        padding: 2rem;
    }

    .classes-grid { grid-template-columns: repeat(3, 1fr); }
    .selected-parts-global { max-height: 100px; }
    .actions-section-compact { flex-direction: column; }

    .collection-badges-container { max-width: 90px; }
    .collection-badge { width: 24px; height: 24px; }
    .collection-badge img { width: 16px; height: 16px; }

    .modal-header-right {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-end;
    }

    .pp-filters-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-filter-item {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }
    .pp-input { width: 100%; }

    .wallet-buttons-container { flex-direction: column; }
    .wallet-info {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    .wallet-actions { flex-direction: column; }

    .selection-controls {
        flex-direction: column;
        padding: 1rem;
        width: 90%;
    }

    .team-actions { flex-direction: column; }

    .team-axies-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    .team-axie-new img {
        width: 156px;
        height: 156px;
    }

    .team-card-new {
        padding: 1.8rem;
        min-height: 384px;
    }

    .team-header-new {
        flex-direction: column;
        gap: 0.5rem;
    }

    .team-wallet-new {
        text-align: left;
        max-width: 100%;
    }

    .btn-create-team-header {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }

    .results-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .axie-selection-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .axie-selection-content { width: 98%; margin: 1% auto; padding: 1rem; }
    .class-filters-grid { grid-template-columns: repeat(3, 1fr); }

    /* ==========================================
       LEADERBOARD: VISUAL DE APLICATIVO NATIVO
       ========================================== */
    .leaderboard-container {
        margin: 0 !important;
        padding: 0.5rem 0 !important; /* Remove padding lateral totalmente */
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .leaderboard-table-wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    .leaderboard-table {
        width: 100%;
        table-layout: fixed;
        border-spacing: 0;
    }

    /* As larguras de coluna, fontes e tamanhos de imagem do Leaderboard
       ficam agora no bloco "M7. LEADERBOARD NO MOBILE" no fim do arquivo. */

    .builder-slot { flex: 0 0 100% !important; padding: 10px !important; }
    .builder-canvas-area { height: 220px !important; }

    .leaderboard-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .lb-controls-group { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .sniping-filters-panel { flex-direction: column; width: 100%; align-items: flex-start; gap: 10px; }
    .sniping-filter-item { width: 100%; align-items: flex-start; }
    .sniping-input-row { width: 100%; margin-left: 0; justify-content: flex-start; gap: 10px; }
    .sniping-slider-wrapper { padding: 0; }
}

@media (max-width: 480px) {
    .pp-filters-grid { grid-template-columns: 1fr; }
    .classes-grid { grid-template-columns: repeat(3, 1fr); }
    .class-card { padding: 0.25rem; min-height: 60px; }
    .class-icon { width: 22px; height: 22px; }
    .class-name { font-size: 0.6rem; }

    .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.4rem !important;
        padding: 0.5rem !important;
    }

    .axie-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 8px !important;
    }

    .axie-image-container { height: 110px !important; }
    .axie-info { padding: 0.4rem !important; }
    .axie-name { font-size: 0.7rem !important; max-width: 80px !important; }
    .axie-price { font-size: 0.8rem !important; margin-bottom: 0.2rem !important; }
    .axie-details { font-size: 0.65rem !important; flex-direction: column; align-items: flex-start; }
    .purity-stat { font-size: 0.6rem !important; padding: 2px 4px !important; top: 4px !important; left: 4px !important; }

    .team-axies { grid-template-columns: repeat(2, 1fr); }
    .selected-axies-preview { grid-template-columns: repeat(2, 1fr); }

    .team-axies-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .team-axie-new img {
        width: 132px;
        height: 132px;
    }

    .teams-grid-layout { gap: 1.2rem; }
    .team-card-new { padding: 1.2rem; min-height: 384px; }
    .axie-selection-grid { grid-template-columns: 1fr; }
    .class-filters-grid { grid-template-columns: repeat(3, 1fr); }
}

.visual-genes-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.visual-wing {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.visual-center {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.visual-center .axie-image-large {
    margin: 0;
    width: 100%;
    max-width: 320px;
    height: auto;
    background: transparent;
}

.visual-part-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: var(--bg-body);
    border-radius: 8px;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.visual-part-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.visual-wing.left .visual-part-item {
    flex-direction: row-reverse;
    text-align: right;
}

.visual-wing.right .visual-part-item {
    flex-direction: row;
    text-align: left;
}

.visual-part-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.visual-part-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.visual-part-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.visual-part-name {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.visual-part-name.aquatic { background: #00B8CE; }
.visual-part-name.beast { background: #FFB812; color: #333; text-shadow: none; }
.visual-part-name.plant { background: #6BCF53; }
.visual-part-name.bug { background: #FF5341; }
.visual-part-name.bird { background: #FF8BB9; }
.visual-part-name.reptile { background: #656ABC; }
.visual-part-name.mech { background: #C5C5C5; color: #333; text-shadow: none; }
.visual-part-name.dawn { background: #F8F6F1; color: #333; text-shadow: none; border: 1px solid #ddd; }
.visual-part-name.dusk { background: #00AEB7; }
.visual-part-name.unknown { background: #9CA3AF; }
.visual-part-name.morphed {
    background: linear-gradient(90deg, #8B008B, #d946ef);
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border: 1px solid #6A0DAD;
}

.visual-part-item.metamorph-diff {
    border-color: #8B008B;
    box-shadow: 0 0 10px rgba(139, 0, 139, 0.3);
    background: linear-gradient(to right, #2a0a2a, #0f172a);
}

.metamorph-indicator {
    font-size: 0.75rem;
    color: #8B008B;
    font-weight: 600;
}

.metamorph-badge {
    background: #8B008B;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-top: -10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}

@media (max-width: 768px) {
    .visual-genes-layout {
        flex-direction: column;
    }

    .visual-wing {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .visual-part-item {
        flex: 1 1 45%;
        justify-content: center;
    }

    .visual-wing.left .visual-part-item,
    .visual-wing.right .visual-part-item {
        flex-direction: row;
        text-align: left;
    }

    .visual-center {
        order: -1;
    }
}
.view-toggles {
    margin-left: 1.5rem;
    display: flex;
    background: #334155;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   ESTILOS DO MODO MORPH E BOTÃO
   ========================================================================== */
.axie-card .morph-button {
    position: absolute;
    top: 8px;
    right: 6px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 50;
    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.axie-card .morph-button:hover {
    transform: scale(1.15) rotate(15deg);
}

.axie-card .morph-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

.axie-card.morph-active {
    background: linear-gradient(145deg, #0f172a, #0f172a);
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 50;
    overflow: hidden;
}

.morph-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    height: 100%;
    position: relative;
    width: 100%;
}

.morph-image-container {
    height: 157px !important;
    width: 100%;
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.morph-image-container img {
    height: 112%;
    width: auto;
    object-fit: contain;
}

.morph-label {
    font-size: 0.7rem;
    color: #d946ef;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
}

.morph-parts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
    width: 100%;
    margin-top: 1px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    border-radius: 5px;
    padding: 0.3rem;
    border: 1px solid rgba(255,255,255,0.05);
    z-index: 10;
}

.morph-actions-group {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}

.morph-actions-group button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

.morph-actions-group button:hover {
    transform: scale(1.2);
    color: white;
}

.morph-btn-close i {
    font-size: 1.1rem;
}

.morph-col-left, .morph-col-right {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.morph-col-left { align-items: flex-end; text-align: right; border-right: 1px solid rgba(255,255,255,0.1); padding-right: 4px; }
.morph-col-right { align-items: flex-start; text-align: left; padding-left: 4px; }

.morph-part-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    line-height: 1.1;
    min-height: 18px;
}

.morph-col-left .morph-part-item { flex-direction: row-reverse; }

.morph-part-icon {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.morph-part-icon img {
    width: 11px;
    height: 11px;
}

.morph-part-name {
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    color: var(--text-muted);
}

.morph-part-name.morphed {
    background: linear-gradient(90deg, #8B008B, #d946ef);
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.morph-image-container .collection-badges-container {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 120px;
}

.morph-image-container .collection-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.morph-image-container .collection-badge img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
}

.morph-drawing-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.morph-drawing-area img {
    max-height: 85%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4));
}

.morph-level-badge {
    position: absolute;
    top: 152px;
    right: 1px;
    z-index: 20;
    color: var(--primary-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
}

.loading-morph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 0 0;
}

#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: all 0.3s ease;
    opacity: 0.8;
}

#btn-back-to-top:hover {
    background: var(--secondary-color);
    transform: translateY(-5px);
    opacity: 1;
}

body.teams-view .quick-filters {
    display: flex !important;
}

/* ==========================================
   SLIDERS ROXOS (CLICÁVEIS E INTELIGENTES)
   ========================================== */
.dual-range-slider {
    position: relative;
    width: 100%;
    height: 20px;
    margin: 25px 0 10px 0;
    z-index: 1;
    padding: 0;
}

.slider-track {
    z-index: 1;
    position: absolute;
    margin: auto;
    top: 0; bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--primary-color);
    opacity: 0.3;
    border-radius: 5px;
}

.slider-range {
    left: 0;
    width: 100%;
    z-index: 2;
    position: absolute;
    margin: auto;
    top: 0; bottom: 0;
    height: 5px;
    background: var(--primary-color);
    border-radius: 5px;
}

.slider-ticks {
    z-index: 3;
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
}

.tick-dot {
    width: 8px;
    height: 8px;
    background-color: #0f172a;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.tick-dot.active {
    background-color: #0f172a;
    border-color: var(--primary-color);
    transform: scale(1.2);
}

.dual-range-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    height: 6px;
    background: transparent;
    pointer-events: none;
    top: 2px;
    margin: 0;
    z-index: 4;
    outline: none;
    width: calc(100% + 20px);
    left: -12px;
    border: none;
    box-shadow: none;
}

.dual-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #0f172a;
    border: 3px solid var(--primary-color);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: 0px;
    position: relative;
    z-index: 100;
}

.dual-range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #0f172a;
    border: 3px solid var(--primary-color);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: translateZ(1px);
    position: relative;
    z-index: 100;
}

/* --- ESTILOS DAS COLEÇÕES ESPECIAIS --- */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.collection-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    padding: 0.24rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 28px;
    position: relative;
    overflow: hidden;
}

.collection-card span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    z-index: 2;
}

.collection-card img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

.collection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.collection-card.selected {
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.collection-card.bg-agamo { background: linear-gradient(135deg, #8B4513, #A0522D); }
.collection-card.bg-mystic { background: linear-gradient(135deg, #8B5FBF, #6A0DAD); }
.collection-card.bg-origin { background: linear-gradient(135deg, #FF4500, #FF6347); }
.collection-card.bg-meo { background: linear-gradient(135deg, #1E3A8A, #3B82F6); }
.collection-card.bg-xmas { background: linear-gradient(135deg, #228B22, #32CD32); }
.collection-card.bg-shiny { background: linear-gradient(135deg, #87CEEB, #B0E2FF); }
.collection-card.bg-japan { background: linear-gradient(135deg, #8B4513, #CD853F); }
.collection-card.bg-night { background: linear-gradient(135deg, #8B008B, #BA55D3); }
.collection-card.bg-summer { background: linear-gradient(135deg, #00CED1, #20B2AA); }

.collection-card:not(.selected) { opacity: 0.90; }
.collection-card:not(.selected):hover { opacity: 1; }

.fa-spinner {
    animation: spin-pulse 1.2s infinite linear !important;
    display: inline-block;
    color: var(--primary-color);
}

#results-count .fa-spinner { font-size: 1.4rem; }

@keyframes spin-pulse {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(180deg) scale(0.8); opacity: 0.6; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

/* ==========================================
   NAVEGAÇÃO POR ABAS
   ========================================== */
.app-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 30px 0;
    width: 100%;
}

.nav-tab {
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 12px;
}

.nav-tab:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

.nav-tab.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active { animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

#tab-finder.active {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    #tab-finder.active { grid-template-columns: 1fr; }
}

/* ==========================================
   ESTILOS DO LEADERBOARD
   ========================================== */
#tab-leaderboard.active { display: block; }

.leaderboard-container {
    margin-top: 0 !important;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 2rem;
    max-width: 1200px;
    width: 95%;
    margin: 2rem auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.lb-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.leaderboard-table-wrapper { overflow-x: auto; }

.leaderboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0px;
}

.leaderboard-table thead th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    border-bottom: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-table tbody tr {
    background-color: var(--bg-card);
    transition: background-color 0.2s;
}

.leaderboard-table tbody tr:hover {
    background-color: #263345;
}

.leaderboard-table tbody tr td:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    padding-left: 1.5rem;
}

.leaderboard-table tbody tr td:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    padding-right: 1.5rem;
}

.leaderboard-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-table td {
    padding: 5px 1px;
    vertical-align: middle;
    border: none;
    /* Divisoria entre um player e o outro */
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

.leaderboard-table tr:hover { background: var(--bg-hover); }

.rank-cell { font-weight: 700; font-size: 1.1rem; }
.rank-1 { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); font-size: 1.3rem; }
.rank-2 { color: #C0C0C0; text-shadow: 0 0 10px rgba(192, 192, 192, 0.3); font-size: 1.2rem; }
.rank-3 { color: #CD7F32; text-shadow: 0 0 10px rgba(205, 127, 50, 0.3); font-size: 1.2rem; }

.player-info {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 1px;
    width: 100%;
}

.player-name {
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
    display: block;
    line-height: 1.2;
}

.vstar-cell {
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
}

.vstar-cell i {
    color: #fbbf24;
    margin-right: 4px;
}

.vstar-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.vstar-change {
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
}

@media (min-width: 769px) {
    .team-cell { min-width: 500px; }
}

.lb-team-container {
    display: flex;
    gap: 0px;
    justify-content: center;
}

.lb-fighter-slot {
    position: relative;
    width: 135px;
    height: 101px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.lb-fighter-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.lb-fighter-preview:hover {
    transform: scale(1.05);
    border: 1px solid var(--primary-color);
}

.lb-fighter-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.40) translateY(-5px);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

.lb-footer {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.lb-pagination-numbers {
    display: flex;
    gap: 8px;
    background: transparent;
    padding: 0;
    border: none;
    align-items: center;
}

.page-num-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-num-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-main);
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.page-num-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transform: scale(1.05);
}

.page-nav-arrow {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-nav-arrow:hover:not(:disabled) { background: var(--primary-color); color: white; }
.page-nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }

.lb-loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 1.2rem;
    display: none;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.blink-dot {
    width: 8px;
    height: 8px;
    background-color: var(--success-color);
    border-radius: 50%;
    display: inline-block;
    animation: blink-live 2s infinite;
}

.lb-loading-placeholder { font-size: 2rem; color: var(--primary-color); opacity: 0.5; }

.sniping-control-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #334155;
    width: fit-content;
}

.sniping-label {
    font-weight: bold;
    color: #94a3b8;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.lb-rune-icon {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 28px;
    height: 28px;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.2s ease;
}

.lb-rune-icon:hover {
    transform: scale(1.5);
    z-index: 20;
}

.rune-overlay {
    position: absolute;
    top: 10px;
    left: 2px;
    width: 27px;
    height: 27px;
    z-index: 20;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
    pointer-events: none;
}

.rune-stars-container {
    position: absolute;
    top: 35px;
    left: 11%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 1px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    width: fit-content;
    min-width: 12px;
    display: flex;
    justify-content: center;
    gap: 0px;
    z-index: 22;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.lb-fighter-slot:hover .rune-overlay,
.lb-fighter-slot:hover .rune-stars-container {
    transform: scale(1.1) translateX(calc(-50% / 1.1));
    z-index: 30;
}

.lb-fighter-slot:hover .rune-overlay { transform: scale(1.1); }

.rune-star {
    font-size: 9px;
    line-height: 8px;
    color: #00e5ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    font-weight: 900;
}

@keyframes blink-live {
    0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { opacity: 0.5; transform: scale(0.9); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.lb-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-left: 5px;
}

.lb-controls-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.sniping-filters-panel { order: 1; }
.sniping-control { order: 2; }
.lb-timer {
    order: 3;
    padding-left: 20px;
    margin-left: 5px;
    border-left: 1px solid var(--border-color);
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #94a3b8;
    font-family: 'Roboto Mono', monospace;
    min-width: 70px;
    text-align: right;
    font-weight: 600;
}

.sniping-filters-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fadeIn 0.3s ease-out;
    padding: 0;
    background: none;
    border: none;
}

.sniping-filters-panel .sniping-filter-item:nth-child(3) { order: 1; }
.sniping-filters-panel .sniping-separator { order: 2; height: 40px; margin: 0 10px; }
.sniping-filters-panel .sniping-filter-item:nth-child(1) { order: 3; }

.sniping-filter-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    justify-content: center;
    align-items: center;
    min-width: 170px;
}

.sniping-input-row {
    display: flex;
    align-items: center;
    width: 210px;
    margin-left: -25px;
    justify-content: space-between;
    margin-bottom: 5px;
}

.sniping-icon {
    color: var(--warning-color);
    font-size: 1.1em;
    margin-right: -35px;
}

.sniping-input-square {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px;
    border-radius: 6px;
    width: 50px;
    font-size: 0.9em;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    transition: all 0.2s;
    font-weight: 600;
}

.sniping-input-square:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.sniping-input-square::-webkit-outer-spin-button,
.sniping-input-square::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sniping-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 5px;
}

.sniping-slider-container {
    width: 100%;
    max-width: 150px;
    position: relative;
    height: 15px;
    display: flex;
    align-items: center;
}

.sniping-slider-container .slider-track { height: 4px; background: #334155; width: 100%; border-radius: 2px; position: absolute; }
.sniping-slider-container .slider-range { height: 4px; background: var(--primary-color); position: absolute; border-radius: 2px; }
.sniping-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    appearance: none;
    background: none;
    height: 100%;
    top: -1px;
    margin: 0;
    z-index: 10;
}
.sniping-slider-container input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #0f172a;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-top: 1px;
    border: 2px solid var(--primary-color);
    transition: transform 0.1s;
}
.sniping-slider-container input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.sniping-control {
    display:flex;
    align-items:center;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    height: 44px;
    transition: all 0.3s ease;
}

.sniping-control:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.2);
}

.sniping-label-text {
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.9rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   SPLIT VIEW E BOTÃO DE COMPRA
   ========================================================================== */
.split-view-active .app-navigation { display: none; }

.split-view-container {
    display: grid;
    grid-template-columns: 55fr 55fr;
    gap: 5px;
    height: calc(100vh - 40px);
    overflow: hidden;
}

.split-view-active #tab-leaderboard {
    display: block !important;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding-right: 1px;
}

.split-view-active #tab-finder {
    display: block !important;
    height: 100%;
    overflow-y: auto;
    padding-left: 1px;
    padding-top: 2rem !important;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.btn-close-split {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-close-split:hover { transform: scale(1.05); background: #dc2626; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

.lb-fighter-preview { position: relative; cursor: pointer; overflow: hidden; }
.lb-action-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: all 0.2s ease;
    border-radius: 8px; z-index: 100;
}
.lb-fighter-preview.active .lb-action-overlay { opacity: 1; pointer-events: auto; }
.btn-buy-overlay {
    background: var(--success-color); color: white; border: none;
    padding: 8px 16px; border-radius: 20px; font-weight: 800; font-size: 0.9rem;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transform: scale(0.8);
    transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.btn-buy-overlay:hover { background: #059669; transform: scale(1); }
.lb-fighter-preview.active .btn-buy-overlay { transform: scale(1); }

body.split-view-active .finder-grid-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
}

body.split-view-active .filters-panel {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 1.2rem 1rem !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    width: 95% !important;
    margin-left: 25px;
    margin-right: 0;
}

body.split-view-active .results-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box;
}

body.split-view-active .results-header {
    min-height: 90px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

body.split-view-active .results-grid {
    margin-top: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 0.8rem;
    box-sizing: border-box;
}

body.split-view-active .results-grid .axie-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.split-view-active #tab-finder .wallet-section,
body.split-view-active #tab-finder .panel-header { display: none !important; }

body.split-view-active #tab-finder .filter-section { display: none !important; }

body.split-view-active #tab-finder .filter-section:has(.collections-grid) {
    display: block !important;
    margin-bottom: 0 !important;
}

body.split-view-active .collections-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    margin-bottom: 0 !important;
    overflow-x: auto;
    padding-bottom: 5px;
}

body.split-view-active .collection-card {
    min-height: 26px !important;
    padding: 0.3rem 0.6rem !important;
    flex: 1;
    white-space: nowrap;
    justify-content: center;
}

body.split-view-active .collection-card span { font-size: 0.8rem !important; }

body.split-view-active .quick-filters label[for="auction-type"],
body.split-view-active .quick-filters label[for="sort-by"],
body.split-view-active .view-toggles,
body.split-view-active .axie-card .morph-button {
    display: none !important;
}

.buy-mode-filters { display: none !important; }

body.split-view-active .buy-mode-filters {
    display: flex !important;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
}

.quick-filter-slider {
    width: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quick-filter-slider label {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 4px;
    white-space: nowrap;
}

.quick-filter-slider .dual-slider-container {
    position: relative;
    width: 100%;
    height: 6px;
    margin: 5px 0;
    background: #334155;
    border-radius: 3px;
    z-index: 1;
}

.quick-filter-slider .slider-range {
    position: absolute;
    height: 100%;
    background: var(--primary-color);
    z-index: 2;
    border-radius: 3px;
}

.quick-filter-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    background: none;
    -webkit-appearance: none;
    z-index: 3;
    margin: 0;
}

.quick-filter-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    margin-top: -1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: relative;
    z-index: 10;
}

.quick-filter-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: relative;
    z-index: 10;
}

.season-dropdown {
    background: var(--bg-hover);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    margin-bottom: 10px;
    width: 200px;
}

.season-dropdown:focus { border-color: var(--primary-color); }

.body-shapes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    justify-items: center;
    margin-top: 15px;
}

.body-shape-btn {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.body-shape-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.body-shape-btn.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.body-shape-icon { width: 34px; height: 34px; object-fit: contain; }

.main-wrapper {
    padding-top: 1rem !important;
    gap: 1rem !important;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 70px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.logo {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    width: 200px;
    cursor: pointer;
}

.logo-axie { color: var(--text-main); }
.logo-pro { color: var(--primary-color); }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav_links { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }

.nav-item a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item a:hover { color: var(--text-main); background: var(--bg-hover); }
.nav-item.active a { color: white; background: var(--primary-color); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }

.header-right-empty { width: 200px; }

.lb-header-select {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}
#era-selector { color: var(--warning-color); margin-left: 10px; }

.morph-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}
.morph-toggle-label {
    font-weight: bold;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: color 0.3s;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 80px;
}

.lb-header-left { display: flex; align-items: center; gap: 10px; }
.lb-header-left h2 {
    margin: 0;
    font-size: 1.4rem !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-controls-group { display: flex; align-items: center; gap: 15px; }

.sniping-filter-group { display: flex; align-items: center; gap: 10px; }
.sniping-filter-group .sniping-icon {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin: 0;
    position: relative;
    top: -12px;
    left: -8px;
}
.sniping-filter-item { display: flex; flex-direction: column; width: 150px; }
.sniping-input-row { display: flex; justify-content: space-between; width: 100%; margin-bottom: -15px; }
.sniping-input-row input:first-child { margin-left: 8px; }
.sniping-slider-container input[type="range"] { width: calc(100% + 14px) !important; }

/* ==========================================
   CSS DO NOVO TEAM BUILDER VISUAL
========================================== */
.builder-title-header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.team-builder-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.builder-slot {
    flex: 0 0 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.builder-header { display: flex; justify-content: center; gap: 20px; }

.icon-dropdown {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-dropdown:hover { border-color: var(--primary-color); background: rgba(255,255,255,0.05); }
.icon-dropdown > img { width: 30px; height: 30px; object-fit: contain; }

.icon-dropdown-list {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    max-height: 200px;
    overflow-y: auto;
}

.icon-dropdown.open .icon-dropdown-list { display: grid; }
.icon-item { width: 45px; height: 45px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.icon-item:hover { background: rgba(255,255,255,0.15); }
.icon-item img { width: 30px; height: 30px; object-fit: contain; }

.builder-canvas-area {
    width: 100%;
    height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    border: 2px dashed rgba(255,255,255,0.1);
}

.builder-parts-layout { display: flex; justify-content: space-between; gap: 15px; }
.builder-parts-col { display: flex; flex-direction: column; gap: 10px; flex: 1; width: 50%; }
.part-dropdown { position: relative; width: 100%; }

.part-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.part-toggle:hover { border-color: var(--primary-color); }
.part-toggle img { width: 24px; height: 24px; object-fit: contain; }
.part-toggle span {
    font-size: 0.85rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-transform: capitalize;
}

.part-toggle-icon { color: var(--text-muted); font-size: 0.8rem; }

.part-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    z-index: 200;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    margin-top: 5px;
    overflow: hidden;
}

.part-dropdown.open .part-list { display: flex; }
.part-search-container { padding: 10px; background: var(--bg-card); border-bottom: 1px solid rgba(255,255,255,0.05); }
.builder-part-search { width: 100%; padding: 8px 10px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; color: white; outline: none; font-size: 0.85rem; }
.builder-part-search:focus { border-color: var(--primary-color); }
.part-options-container { max-height: 220px; overflow-y: auto; }

.part-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.part-item:hover { background: rgba(255,255,255,0.1); }
.part-item img { width: 35px; height: 35px; object-fit: contain; }
.part-item span { font-size: 0.85rem; font-weight: 500; }
.part-none-icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.1); border-radius: 6px; color: var(--danger-color); }

#inventory-controls, #team-controls { display: none; }
.single-search-section { margin-top: 1.5rem; }

/* ==========================================================================
   ADAPTAÇÕES NATIVAS MOBILE (AXIE PRO) E EDGE-TO-EDGE
   ========================================================================== */

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-overlay.show { display: block; opacity: 1; }

.mobile-menu-btn, .mobile-menu-header, .mobile-filters-trigger, .btn-close-filters-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .split-view-container {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    .split-view-active #tab-leaderboard,
    .split-view-active #tab-finder {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        padding: 0 !important;
    }

    .header-right-empty { display: none; }

    .mobile-menu-btn {
        display: block;
        background: transparent;
        color: var(--text-main);
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
    }

    .main-nav {
        position: fixed;
        top: 0; right: -300px;
        width: 280px;
        height: var(--app-h);
        max-height: var(--app-h);
        padding-top: var(--safe-top);
        padding-bottom: calc(var(--safe-bottom) + 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-card);
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        z-index: 10005;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 20px rgba(0,0,0,0.5);
    }

    .main-nav.open { right: 0; }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 1rem;
    }

    .close-menu-btn {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger-color);
        border: none;
        width: 32px; height: 32px;
        border-radius: 8px;
        font-size: 1.2rem;
        cursor: pointer;
    }

    .nav_links { flex-direction: column; gap: 0.5rem; padding: 0 1.5rem; }
    .nav-item a { padding: 1rem; font-size: 1.1rem; }

    .mobile-filters-trigger { display: block; margin-bottom: 1rem; width: 100%; }

    .btn-mobile-filters {
        width: 100%;
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 14px;
        border-radius: 8px;
        font-size: 1.1rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .filters-panel,
    body.split-view-active .filters-panel,
    body.builder-split-active .filters-panel {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 380px !important;
        height: var(--app-h) !important;
        max-height: var(--app-h) !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 16px 16px 0 !important;
        z-index: 10005 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        padding-top: calc(var(--safe-top) + 1.5rem) !important;
        padding-bottom: calc(var(--safe-bottom) + 80px) !important;
        box-shadow: 10px 0 25px rgba(0,0,0,0.5) !important;
    }

    .filters-panel.open,
    body.split-view-active .filters-panel.open,
    body.builder-split-active .filters-panel.open {
        left: 0 !important;
    }

    .btn-close-filters-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger-color);
        border: 1px solid var(--danger-color);
        border-radius: 8px;
        font-weight: bold;
        font-size: 1rem;
        margin-bottom: 1.5rem;
        cursor: pointer;
    }
}


/* ==========================================================================
   ==========================================================================
   ADAPTACAO MOBILE — bloco adicionado
   Correcoes que nao tinham equivalente no arquivo original.
   Depende das variaveis --app-h e --safe-* definidas no :root.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   TABLET E MOBILE (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Drawer fechado nao deve ser alcancavel por teclado nem leitor de tela */
    .main-nav:not(.open),
    .filters-panel:not(.open) {
        visibility: hidden;
        pointer-events: none;
    }

    .mobile-overlay:not(.show) {
        pointer-events: none;
    }

    .main-nav.open,
    .filters-panel.open {
        visibility: visible;
    }

    /* O overlay precisa cobrir tambem a area sob o notch */
    .mobile-overlay {
        top: calc(var(--safe-top) * -1);
        bottom: calc(var(--safe-bottom) * -1);
    }

    .main-header {
        padding-top: var(--safe-top);
        height: calc(70px + var(--safe-top));
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }
}


/* ==========================================================================
   MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* --- Leaderboard: cabecalho fixo e feedback de toque --- */
    .leaderboard-table-wrapper {
        width: 100%;
    }

    .player-name {
        max-width: 100% !important;
    }

    .leaderboard-table thead th {
        padding: 0.5rem 0 !important;
        font-size: 0.6rem !important;
        letter-spacing: 0.3px;
    }

    /* Sem hover no toque, o feedback vira o estado :active */
    .leaderboard-table tbody tr:active {
        background-color: #263345;
    }

    /* --- Tabela de genes: rola na horizontal em vez de estourar a pagina --- */
    .genes-table {
        min-width: 460px;
        font-size: 0.78rem;
    }

    .genes-table th,
    .genes-table td {
        padding: 0.5rem 0.4rem;
    }

    .genes-table-wrapper,
    .genes-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* --- Modais viram bottom sheet, que e o padrao nativo de app --- */
    .modal-content,
    .axie-selection-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        max-height: calc(var(--app-h) * 0.92);
        border-radius: 20px 20px 0 0 !important;
        padding: 1.25rem !important;
        padding-bottom: calc(var(--safe-bottom) + 1.25rem) !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Alca visual do sheet */
    .modal-content::before,
    .axie-selection-content::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-color);
        margin: -0.25rem auto 0.9rem;
    }

    /* O X precisa ser um alvo de toque de verdade */
    .modal .close,
    .axie-selection-modal .close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }

    /* --- Sliders duplos utilizaveis com o dedo ---
       O thumb de 18px com pointer-events:none no trilho exige uma precisao
       que o toque nao tem. 28px + area de toque estendida resolve. */
    .dual-range-slider {
        height: 32px;
        margin: 28px 0 14px 0;
        touch-action: pan-y;
    }

    .dual-range-slider input[type="range"] {
        height: 32px;
        top: -8px;
    }

    .dual-range-slider input[type="range"]::-webkit-slider-thumb {
        height: 28px !important;
        width: 28px !important;
        border-width: 4px !important;
    }

    .dual-range-slider input[type="range"]::-moz-range-thumb {
        height: 28px !important;
        width: 28px !important;
        border-width: 4px !important;
    }

    .slider-track,
    .slider-range {
        pointer-events: none;
    }

    /* --- Alvos de toque minimos (44px e o recomendado) --- */
    button,
    .nav-item a,
    .class-card,
    .collection-card,
    .class-filter-btn,
    .btn-view-toggle,
    .lb-pagination-numbers > * {
        min-height: 44px;
        touch-action: manipulation;
    }

    .morph-button,
    .close-menu-btn,
    .mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Remove o flash cinza do Android e o atraso de 300ms no toque */
    a,
    button,
    [onclick] {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
        touch-action: manipulation;
    }

    /* --- Paginacao rola na horizontal em vez de quebrar linha --- */
    .lb-footer {
        padding: 0.75rem 0.5rem calc(var(--safe-bottom) + 0.75rem);
    }

    .lb-pagination-numbers {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 8px;
        justify-content: flex-start;
    }

    .lb-pagination-numbers::-webkit-scrollbar {
        display: none;
    }

    .lb-pagination-numbers > * {
        flex: 0 0 auto;
    }

    /* --- Team Builder --- */
    .team-builder-grid {
        gap: 14px !important;
        padding: 0 0.75rem calc(var(--safe-bottom) + 20px) !important;
    }

    .builder-slot {
        flex: 0 0 100% !important;
        max-width: 100%;
        padding: 14px !important;
        border-radius: 12px;
    }

    .builder-canvas-area {
        height: 240px !important;
    }

    .builder-title-header {
        padding: 0 0.75rem 10px !important;
    }

    /* --- Area segura no rodape (barra de gestos do iPhone/Android) --- */
    .main-wrapper {
        padding-bottom: calc(var(--safe-bottom) + 12px) !important;
    }

    .mobile-filters-trigger {
        padding: 0 0.75rem;
    }
}


/* ==========================================================================
   CELULARES PEQUENOS (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .collections-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .team-modal-content h2 {
        font-size: 1.05rem;
    }
}


/* ==========================================================================
   DISPOSITIVOS DE TOQUE — desliga o :hover
   Em tela de toque o :hover "gruda" depois do tap: a linha fica levantada
   e o card destacado ate o usuario tocar em outro lugar.
   ========================================================================== */
@media (hover: none) {
    .leaderboard-table tbody tr:hover {
        transform: none;
        background-color: var(--bg-card);
    }

    .axie-card:hover,
    .team-card-new:hover,
    .class-card:hover,
    .collection-card:hover,
    .builder-slot:hover {
        transform: none;
    }

    .axie-card:active,
    .class-card:active,
    .collection-card:active {
        transform: scale(0.97);
        transition: transform 0.08s ease;
    }
}


/* ==========================================================================
   PAISAGEM EM TELA BAIXA
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .main-header {
        height: calc(56px + var(--safe-top));
    }

    .builder-canvas-area {
        height: 180px !important;
    }

    .modal-content,
    .axie-selection-content {
        max-height: var(--app-h);
        border-radius: 0 !important;
    }
}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


/* ==========================================================================
   LEADERBOARD — estrutura da linha
   O JS deixou de usar estilo inline nas celulas. As regras abaixo reproduzem
   a aparencia do desktop; o bloco seguinte reorganiza tudo no mobile.
   ========================================================================== */

.rank-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 0;
    flex-wrap: nowrap;
}

.rank-number {
    min-width: 35px;
    text-align: left;
}

.rank-diff {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    white-space: nowrap;
}

.rank-diff.up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.rank-diff.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.score-cell {
    text-align: center;
    vertical-align: middle;
    padding: 0 15px;
}

.leaderboard-table .vstar-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vstar-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vstar-line .fa-star {
    color: #fbbf24;
    font-size: 1.1rem;
}

.vstar-value {
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
}

.player-tier {
    font-size: 0.8rem;
    color: #64748b;
    display: block;
}

.stats-cell {
    text-align: left;
    vertical-align: middle;
}

/* O selo NEW e sempre renderizado e so aparece no Sniping Mode. Antes ele
   entrava e saia do innerHTML a cada ciclo, o que fazia a celula piscar. */
.new-badge {
    display: none;
    background: #8b5cf6;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

body.sniping-on .leaderboard-row.is-new .score-cell .new-badge {
    display: inline-block;
    margin-top: 2px;
}

/* Copia do score que aparece embaixo do nome — so no mobile */
.player-score-mobile {
    display: none;
}

/* --- Historico --- */
.history-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}

.history-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.time-ago {
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 85px;
    white-space: nowrap;
}

.history-score {
    font-size: 0.85rem;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.history-queue {
    color: #f97316;
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 8px;
    white-space: nowrap;
}

.history-queue i {
    font-size: 0.75rem;
}

.history-duration {
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.history-duration i {
    color: #94a3b8;
    font-size: 0.9rem;
}

.history-duration.is-pending {
    color: #64748b;
}

/* Icone de podio: so no mobile */
.th-podium {
    display: none;
    width: 15px;
    height: 10px;
    color: var(--text-muted);
}


/* ==========================================================================
   LEADERBOARD NO MOBILE (<= 768px)
   Quatro colunas visiveis: podio | player (com o score embaixo) | time.
   A coluna Score sai da tabela e vira uma linha sob o nome, liberando
   espaco para as imagens do time.
   ========================================================================== */
@media (max-width: 768px) {
    /* Cabecalho: "Rank" vira icone de podio */
    .th-rank .th-text { display: none; }
    .th-rank .th-podium { display: inline-block; }

    /* --- Colunas da tabela ao vivo (5 celulas) --- */

    /* 1. Rank — o minimo necessario, colado na borda */
    .leaderboard-row:not(.archived-row) > td:nth-child(1),
    .leaderboard-table th:nth-child(1) {
        width: 11% !important;
        padding: 0.4rem 0 0.4rem 0.25rem !important;
    }

    /* 2. Score — sai da tabela, vai para baixo do nome */
    .leaderboard-row:not(.archived-row) > td:nth-child(2),
    .leaderboard-table th:nth-child(2) {
        display: none !important;
    }

    /* 3. Player — encostado no rank */
    .leaderboard-row:not(.archived-row) > td:nth-child(3),
    .leaderboard-table th:nth-child(3) {
        width: 27% !important;
        padding: 0.4rem 0 !important;
    }

    /* 4. Imagens do time — fica com o resto do espaco */
    .leaderboard-row:not(.archived-row) > td:nth-child(4),
    .leaderboard-table th:nth-child(4) {
        width: 62% !important;
        padding: 0.4rem 0.25rem 0.4rem 0 !important;
    }

    /* 5. Historico — so aparece no Sniping Mode */
    .leaderboard-row:not(.archived-row) > td:nth-child(5),
    .leaderboard-table th:nth-child(5) {
        display: none !important;
    }

    /* --- Rank: numero em cima, variacao embaixo --- */
    .rank-cell {
        font-size: 0.7rem !important;
        vertical-align: middle;
    }

    .rank-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding-left: 0;
    }

    .rank-number {
        min-width: 0;
    }

    .rank-diff {
        font-size: 0.52rem;
        padding: 0 3px;
        border-radius: 6px;
        line-height: 1.35;
    }

    /* --- Player: nome, e o score logo abaixo, alinhado a esquerda --- */
    .player-info {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    .player-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .player-name {
        font-size: 0.68rem !important;
        max-width: 100% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
    }

    .player-score-mobile {
        display: flex !important;
        align-items: center;
        gap: 2px;
        line-height: 1.2;
        margin-top: 1px;
    }

    .player-score-mobile .fa-star {
        color: #fbbf24;
        font-size: 0.5rem;
    }

    .vstar-value-mobile {
        font-weight: 800;
        color: #fff;
        font-size: 0.58rem;
    }

    body.sniping-on .leaderboard-row.is-new .player-score-mobile .new-badge {
        display: inline-block;
        font-size: 0.45rem;
        padding: 0 3px;
        margin-left: 3px;
    }

    .player-tier {
        font-size: 0.5rem !important;
        line-height: 1.2;
    }

    /* --- Imagens do time --- */
    .lb-team-container {
        gap: 0px !important;
        justify-content: flex-end !important;
    }

    .lb-fighter-slot {
        width: 68px !important;
        height: 52px !important;
        border-radius: 6px !important;
    }

    /* Runas reposicionadas para o novo tamanho */
    .rune-overlay { width: 17px !important; height: 17px !important; top: 2px !important; left: 2px !important; }
    .rune-stars-container { top: 20px !important; padding: 0 2px !important; }
    .rune-star { font-size: 7px !important; line-height: 7px !important; }
}


/* ==========================================================================
   SNIPING MODE NO MOBILE
   O History passa a aparecer. Sem a duracao da partida e sem o tempo de
   fila — no celular o que importa e "ha quanto tempo" e "quantos pontos".
   ========================================================================== */
@media (max-width: 768px) {
    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(5),
    body.sniping-on .leaderboard-table th:nth-child(5) {
        display: table-cell !important;
        width: 26% !important;
        padding: 0.4rem 0.25rem 0.4rem 0 !important;
    }

    /* Com o History na tela, as outras colunas cedem espaco */
    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(3),
    body.sniping-on .leaderboard-table th:nth-child(3) {
        width: 24% !important;
    }

    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(4),
    body.sniping-on .leaderboard-table th:nth-child(4) {
        width: 39% !important;
    }

    body.sniping-on .lb-fighter-slot {
        width: 56px !important;
        height: 44px !important;
    }

    body.sniping-on .rune-overlay { width: 15px !important; height: 15px !important; }
    body.sniping-on .rune-stars-container { top: 17px !important; }

    /* Duracao da partida e tempo de fila ficam de fora no celular */
    .history-duration,
    .history-queue {
        display: none !important;
    }

    .history-item {
        gap: 3px;
        margin-top: 2px;
    }

    .history-right {
        margin-left: 0;
    }

    .time-ago {
        font-size: 0.55rem !important;
        min-width: 0 !important;
        font-weight: 600;
    }

    .history-score {
        font-size: 0.55rem !important;
        padding: 0 3px !important;
        gap: 2px;
        border-radius: 3px;
    }
}


/* ==========================================================================
   SLIDERS — a barra inteira aceita toque
   ========================================================================== */
.dual-range-slider {
    cursor: pointer;
}

.dual-range-slider .slider-track,
.dual-range-slider .slider-range {
    pointer-events: none;
}


/* ==========================================================================
   LEADERBOARD — ajustes finos — rodada 3
   ========================================================================== */

/* --- Desktop: o texto do cabecalho alinha com o numero do rank.
       td:first-child tem padding-left 1.5rem; o th precisa do mesmo. --- */
.leaderboard-table th.th-rank {
    padding-left: 1.5rem;
}

/* --- Sniping Mode ligado: o controle vai para o lado do "Live" e o texto
       "Sniping ON" some. O JS move o elemento; aqui so cuidamos do visual. --- */
body.sniping-on .lb-header-left .sniping-control {
    height: 32px;
    padding: 4px 10px;
    gap: 8px;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
}

body.sniping-on .lb-header-left .sniping-control .sniping-label-text {
    display: none;
}


/* ==========================================================================
   LEADERBOARD NO MOBILE — tamanhos — rodada 3 (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* --- Fontes menores em toda a linha --- */
    .rank-cell {
        font-size: 0.6rem !important;
    }

    .rank-diff {
        font-size: 0.46rem;
        padding: 0 2px;
    }

    .player-name {
        font-size: 0.6rem !important;
    }

    .vstar-value-mobile {
        font-size: 0.5rem;
    }

    .player-score-mobile .fa-star {
        font-size: 0.42rem;
    }

    .player-tier {
        font-size: 0.45rem !important;
    }

    /* --- Colunas: o time recebe mais espaco para as imagens maiores --- */
    .leaderboard-row:not(.archived-row) > td:nth-child(1),
    .leaderboard-table th:nth-child(1) {
        width: 10% !important;
    }

    .leaderboard-row:not(.archived-row) > td:nth-child(3),
    .leaderboard-table th:nth-child(3) {
        width: 23% !important;
    }

    .leaderboard-row:not(.archived-row) > td:nth-child(4),
    .leaderboard-table th:nth-child(4) {
        width: 67% !important;
    }

    /* --- Imagens ~15% maiores. O max-width impede que estourem a coluna em
           telas estreitas: os tres slots dividem o espaco disponivel. --- */
    .lb-team-container {
        width: 100%;
        gap: 0px !important;
    }

    .lb-fighter-slot {
        width: 70px !important;
        height: 52px !important;
        max-width: calc((100% - 4px) / 3) !important;
        flex: 0 1 auto;
    }
        .lb-fighter-preview img {
        transform: scale(1.35) translateY(-3px);
    }

    /* Runas mantem o tamanho e vao um pouco mais para a esquerda */
    .rune-overlay {
        width: 15px !important;
        height: 15px !important;
        top: 1px !important;
        left: 2px !important;
    }


    .rune-stars-container {
    top: 16px !important;
    left: 9px !important;          /* em px, não em % */
    transform: translateX(-48%) !important;
    padding: 0 2px !important;
    }

    .rune-star {
        font-size: 6px !important;
        line-height: 6px !important;
    }

    /* --- Linhas coladas, com a divisoria entre os players --- */
    .leaderboard-table td {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* --- Historico: sai a diferenca de pontos, entra o intervalo entre as
           partidas. Alinhado a direita, como no desktop. --- */
    .history-score {
        display: none !important;
    }

    .history-queue {
        display: inline-block !important;
        font-size: 0.52rem !important;
        margin-right: 0 !important;
        font-weight: 700;
    }

    .history-queue i {
        font-size: 0.45rem !important;
    }

    .history-right {
        margin-left: auto !important;
    }

    .time-ago {
        font-size: 0.52rem !important;
    }

    /* --- Filtros de trofeu e tempo lado a lado e compactos --- */
    .sniping-filters-panel {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100%;
    }

    .sniping-filter-group {
        flex: 1 1 0;
        min-width: 0;
        gap: 4px !important;
        align-items: flex-start;
    }

    .sniping-filter-group .sniping-icon {
        font-size: 0.85rem !important;
        top: 2px !important;
        left: 0 !important;
    }

    .sniping-filter-item {
        width: 100% !important;
        min-width: 0;
    }

    .sniping-input-row {
        margin-bottom: -10px !important;
        gap: 6px !important;
        justify-content: space-between !important;
    }

    /* A fonte fica em 16px de proposito: abaixo disso o Safari iOS da zoom
       ao focar o campo. A largura e o padding e que compactam. */
    .sniping-input-square {
        width: 46px !important;
        padding: 2px !important;
        font-size: 16px !important;
    }

    .sniping-slider-wrapper {
        width: 100%;
        padding: 0 !important;
    }

    .sniping-slider-container.dual-range-slider {
        margin: 20px 0 6px 0;
        height: 26px;
    }

    .sniping-slider-container.dual-range-slider input[type="range"] {
        height: 26px;
        top: -6px;
    }

    .sniping-slider-container.dual-range-slider input[type="range"]::-webkit-slider-thumb {
        height: 22px !important;
        width: 22px !important;
        border-width: 3px !important;
    }

    .sniping-slider-container.dual-range-slider input[type="range"]::-moz-range-thumb {
        height: 22px !important;
        width: 22px !important;
        border-width: 3px !important;
    }

    /* --- Sniping ligado: controle ao lado do "Live" --- */
    body.sniping-on .lb-header-left {
        flex-wrap: wrap;
        gap: 10px;
    }

    body.sniping-on .lb-header-left .sniping-control {
        height: 28px;
        padding: 2px 8px;
    }

    .btn-buy-overlay {
        min-height: 0 !important;
    }

    .lb-action-overlay {
        gap: 2px !important;
        padding: 2px;
    }

    .btn-buy-overlay {
        padding: 2px 6px !important;
        font-size: 0.42rem !important;
        border-radius: 8px !important;
        gap: 3px !important;
        box-shadow: none !important;
        line-height: 1.3 !important;
        white-space: nowrap;
    }

    .btn-buy-overlay i {
        font-size: 0.4rem !important;
    }
}


/* ==========================================================================
   SNIPING NO MOBILE — larguras das colunas — larguras com o History na tela
   ========================================================================== */
@media (max-width: 768px) {
    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(3),
    body.sniping-on .leaderboard-table th:nth-child(3) {
        width: 21% !important;
    }

    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(4),
    body.sniping-on .leaderboard-table th:nth-child(4) {
        width: 46% !important;
    }

    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(5),
    body.sniping-on .leaderboard-table th:nth-child(5) {
        width: 23% !important;
    }

    body.sniping-on .lb-fighter-slot {
        width: 70px !important;
        height: 52px !important;
        max-width: calc((100% - 4px) / 3) !important;
    }

    body.sniping-on .rune-overlay {
        width: 13px !important;
        height: 13px !important;
    }

    body.sniping-on .rune-stars-container {
    top: 14px !important;
    left: 8px !important;          /* em px, não em % */
    transform: translateX(-48%) !important;
    padding: 0 2px !important;
    }
    body.sniping-on .rune-star {
        font-size: 5px !important;
        line-height: 5px !important;
    }
}

@media (max-width: 768px) {
    /* --- Botoes de ajuste fino ---------------------------------------------
       Mexa so nestes tres valores para calibrar no olho:

       --lb-row-pad-y : ar acima/abaixo do axie. 0px = divisoria colada.
       --lb-slot-h    : altura da moldura do axie. Menor = linha mais baixa,
                        mas corta mais do bicho (a imagem tem scale 1.35).
       --lb-img-shift : sobe/desce o axie dentro da moldura. Se ao diminuir
                        a altura os pes ficarem cortados, use 0px ou 1px.
       ---------------------------------------------------------------------- */
    :root {
        --lb-row-pad-y: 0px;
        --lb-slot-h: 48px;
        --lb-img-shift: -2px;
    }

    /* 1. Rank */
    .leaderboard-row:not(.archived-row) > td:nth-child(1),
    .leaderboard-table th:nth-child(1) {
        padding: var(--lb-row-pad-y) 0 var(--lb-row-pad-y) 0.25rem !important;
    }

    /* 3. Player */
    .leaderboard-row:not(.archived-row) > td:nth-child(3),
    .leaderboard-table th:nth-child(3) {
        padding: var(--lb-row-pad-y) 0 !important;
    }

    /* 4. Time (imagens dos axies) */
    .leaderboard-row:not(.archived-row) > td:nth-child(4),
    .leaderboard-table th:nth-child(4) {
        padding: var(--lb-row-pad-y) 0.25rem var(--lb-row-pad-y) 0 !important;
    }

    /* 5. History — so existe com o Sniping Mode ligado */
    body.sniping-on .leaderboard-row:not(.archived-row) > td:nth-child(5),
    body.sniping-on .leaderboard-table th:nth-child(5) {
        padding: var(--lb-row-pad-y) 0.25rem var(--lb-row-pad-y) 0 !important;
    }

    /* Linhas arquivadas (temporadas passadas) seguem a mesma regra */
    .leaderboard-row.archived-row > td {
        padding-top: var(--lb-row-pad-y) !important;
        padding-bottom: var(--lb-row-pad-y) !important;
    }

    /* --- Altura da linha ---------------------------------------------------
       Com o padding zerado, quem manda na altura e o slot do axie (a celula
       mais alta da linha). O line-height solto das celulas de texto tambem
       somava alguns pixels invisiveis.
       ---------------------------------------------------------------------- */
    .lb-fighter-slot,
    body.sniping-on .lb-fighter-slot {
        height: var(--lb-slot-h) !important;
    }

    .lb-fighter-preview img {
        transform: scale(1.35) translateY(var(--lb-img-shift));
    }

    .leaderboard-table tbody tr td {
        line-height: 1.1 !important;
    }

    /* A divisoria fica encostada no axie, sem folga vertical herdada */
    .lb-team-container {
        align-items: center;
        line-height: 0;
    }
}


/* ==========================================================================
   LEADERBOARD NO DESKTOP — linhas compactas
   ========================================================================== */
@media (min-width: 769px) {
    /* --- O UNICO botao de ajuste ------------------------------------------
       Altura da moldura do axie, sem unidade (o calc adiciona o px).
         101  = como esta hoje (linha de 102px)
          84  = sugerido        (linha de  85px, -17%)
          72  = bem colado      (linha de  73px, -28%)
       Quanto menor, mais margem transparente e cortada. Se chegar ao ponto
       de cortar as patas ou as orelhas do axie, subiu demais: volte um pouco.
       ---------------------------------------------------------------------- */
    :root {
        --lb-slot-desktop: 95;
    }
    .lb-fighter-slot {
        height: calc(var(--lb-slot-desktop) * 1px) !important;
    }
    /* Zoom compensado: mantem a imagem com os mesmos 141.4px de altura real,
       entao o axie nao muda de tamanho — so a moldura em volta encolhe. */
    .lb-fighter-preview img {
        transform: scale(calc(141.4 / var(--lb-slot-desktop)))
                   translateY(calc(-7px * var(--lb-slot-desktop) / 141.4));
    }
    /* Garante que nenhuma celula reintroduza folga vertical */
    .leaderboard-table td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .leaderboard-table tbody tr td {
        line-height: 1.2;
    }
}
/* Desfaz o "some com o nome" que existia no bloco M11 */
body.sniping-on .lb-header-left .sniping-control .sniping-label-text {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
/* Icone vermelho quando ligado */
body.sniping-on .sniping-control .sniping-label-text i.fa-crosshairs {
    color: var(--danger-color) !important;
}
/* Desligado: icone no cinza padrao, com transicao suave */
.sniping-control .sniping-label-text i.fa-crosshairs {
    color: var(--text-muted);
    transition: color 0.25s ease;
}

@media (max-width: 768px) {
    /* Apaga so o texto, preserva o icone */
    .sniping-control .sniping-label-text {
        font-size: 0 !important;
        gap: 0 !important;
        letter-spacing: 0 !important;
    }

    .sniping-control .sniping-label-text i.fa-crosshairs {
        font-size: 1.05rem !important;
    }

    .sniping-control {
        gap: 8px !important;
        padding: 4px 10px !important;
    }

    /* O min-width de 170px do desktop fazia os dois grupos estourarem a
       largura da tela e cortava a ultima caixinha. Aqui eles encolhem. */
    .sniping-filter-item {
        min-width: 0 !important;
        width: 100% !important;
    }

    .sniping-filter-group { gap: 6px !important; }
    .sniping-input-row { gap: 6px !important; }

    .sniping-input-square {
        max-width: none !important;
        padding: 7px 8px !important;
    }
}


.dual-range-slider { --thumb: 18px; }

.dual-range-slider input[type="range"] {
    width: calc(100% + var(--thumb)) !important;
    left: calc(var(--thumb) / -2) !important;
}

.dual-range-slider input[type="range"]::-webkit-slider-thumb {
    width: var(--thumb) !important;
    height: var(--thumb) !important;
}

.dual-range-slider input[type="range"]::-moz-range-thumb {
    width: var(--thumb) !important;
    height: var(--thumb) !important;
}

/* Sliders do Sniping (thumb menor que os do painel de filtros) */
.sniping-slider-container.dual-range-slider { --thumb: 14px; }

.sniping-slider-container input[type="range"] {
    width: calc(100% + var(--thumb)) !important;
    left: calc(var(--thumb) / -2) !important;
}

.sniping-slider-container input[type="range"]::-webkit-slider-thumb {
    width: var(--thumb) !important;
    height: var(--thumb) !important;
}

/* Sliders de Level / Evolved do split view */
.quick-filter-slider { --thumb: 14px; }

.quick-filter-slider input[type="range"] {
    width: calc(100% + var(--thumb)) !important;
    left: calc(var(--thumb) / -2) !important;
}

.quick-filter-slider input[type="range"]::-webkit-slider-thumb {
    width: var(--thumb) !important;
    height: var(--thumb) !important;
}

.quick-filter-slider input[type="range"]::-moz-range-thumb {
    width: var(--thumb) !important;
    height: var(--thumb) !important;
}

@media (max-width: 768px) {
    .dual-range-slider { --thumb: 28px; }
    .sniping-slider-container.dual-range-slider { --thumb: 22px; }
    .quick-filter-slider { --thumb: 18px; }
}

/* As bolinhas de marcacao (aparecem em faixas de ate 15 passos) tambem
   estavam fora de compasso: o `space-between` alinha as BORDAS dos pontos,
   nao os centros. Alargar 1 ponto e recuar meio ponto casa os centros com
   as pontas do trilho, igual foi feito com o thumb. */
.dual-range-slider .slider-ticks {
    padding: 0 !important;
    width: calc(100% + 8px) !important;
    left: -4px !important;
}


.sniping-filter-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.sniping-slider-wrapper {
    order: 1;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sniping-slider-container {
    max-width: none !important;
    width: 100% !important;
}

.sniping-input-row {
    order: 2;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.sniping-input-row input:first-of-type  { order: 0; }
.sniping-input-row input:last-of-type   { order: 2; }

.sniping-input-row::after {
    content: "–";
    order: 1;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

/* Caixinhas arredondadas, cores originais do tema mantidas */
.sniping-input-square {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 110px;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    text-align: left !important;
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
}

/* Desfaz os deslocamentos negativos que desalinhavam o conjunto */
.sniping-icon { margin-right: 0 !important; }

.sniping-filter-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.sniping-filter-group .sniping-icon { margin-top: 2px; }


/* --- Level / Evolved do split view: o rotulo desce para baixo da barra --- */
.quick-filter-slider {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* A barra tem so 6px de altura, mas o thumb tem 14-18px e vaza para fora.
   A margem vertical reserva esse espaco para ele nao colidir com o rotulo. */
.quick-filter-slider .dual-slider-container {
    order: 1;
    margin: calc(var(--thumb) / 2) 0 !important;
}

.quick-filter-slider label {
    order: 2;
    margin: 0 !important;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 10px;
}


@media (max-width: 1024px) {
    /* Some com o botao "Filtros e Carteira" quando o split view esta ativo */
    body.split-view-active .mobile-filters-trigger { display: none !important; }
}

@media (max-width: 768px) {
    /* O painel de filtros inteiro sai de cena: o que interessa dele
       (os icones de colecao) foi movido para o cabecalho pelo JS. */
    body.split-view-active .filters-panel { display: none !important; }

    /* O `flex-direction: column` que o mobile ja aplicava em .results-header
       empilhava tudo. Aqui volta para linha, com quebra controlada. */
    body.split-view-active .results-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 0 !important;
        padding: 0.7rem !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Dissolve o wrapper para que os dropdowns subam de nivel */
    body.split-view-active .results-header .quick-filters {
        display: contents !important;
    }

    /* --- linha 1: identificacao --- */
    body.split-view-active .results-title {
        order: 1;
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        text-align: left !important;
    }

    body.split-view-active .results-title > div:not(.view-toggles) {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
    }

    body.split-view-active .results-title-icon {
        width: 20px !important;
        height: 20px !important;
    }

    body.split-view-active .results-count {
        font-size: 0.95rem !important;
        font-weight: 800;
    }

    body.split-view-active .results-title-text {
        font-size: 0.72rem !important;
        color: var(--text-muted);
    }

    /* --- linha 1: dropdowns, encostados a direita --- */
    body.split-view-active #inventory-controls {
        order: 2;
        flex: 0 0 auto;
        display: flex !important;
        gap: 6px !important;
    }

    body.split-view-active #inventory-controls .quick-filter-group {
        display: flex !important;
        min-width: 0;
    }

    body.split-view-active #inventory-controls select {
        min-width: 0 !important;
        width: auto !important;
        max-width: 96px;
        font-size: 16px !important;   /* < 16px faz o Safari iOS dar zoom */
        padding: 5px 7px !important;
        border-radius: 8px;
    }

    /* --- linha 2: os dois sliders --- */
    body.split-view-active .buy-mode-filters {
        order: 3;
        flex: 1 0 100%;
        display: flex !important;
        gap: 14px !important;
        margin-right: 0 !important;
    }

    body.split-view-active .buy-mode-filters .quick-filter-slider {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    /* --- linha 3: os 9 icones de colecao, sem nome --- */
    body.split-view-active .results-header .collections-grid {
        order: 4;
        flex: 1 0 100%;
        display: grid !important;
        grid-template-columns: repeat(9, 1fr) !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.split-view-active .results-header .collection-card {
        min-height: 38px !important;
        padding: 3px !important;
        border-radius: 8px !important;
        flex: none !important;
        gap: 0 !important;
    }

    body.split-view-active .results-header .collection-card span {
        display: none !important;
    }

    body.split-view-active .results-header .collection-card img {
        width: 18px !important;
        height: 18px !important;
    }
}


@media (max-width: 768px) {
    .results-grid,
    body.split-view-active .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.6rem !important;
    }

    .axie-card,
    body.split-view-active .results-grid .axie-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    /* Conteudo interno proporcional ao card menor */
    .axie-image-container { height: 118px !important; }
    .axie-info { padding: 0.45rem !important; }

    .axie-name {
        font-size: 0.72rem !important;
        max-width: 100% !important;
    }

    .axie-price {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }

    .axie-details {
        font-size: 0.65rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .axie-class-icon { width: 16px !important; height: 16px !important; }
    .axie-level { font-size: 0.7rem !important; }

    .purity-stat {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
        top: 4px !important;
        left: 4px !important;
    }

    .collection-badges-container { max-width: 70px !important; gap: 2px !important; }
    .collection-badge { width: 20px !important; height: 20px !important; }
    .collection-badge img { width: 14px !important; height: 14px !important; }

    .marketplace-button {
        width: 24px !important;
        height: 24px !important;
        top: 34px !important;
        right: 4px !important;
        font-size: 0.7rem !important;
    }
}

/* ==========================================================================
   M17. LEADERBOARD, SLIDERS E CABECALHO DO FINDER
   Cole no FINAL do style.css, depois do bloco M16.
   Precisa tambem do M17-patch-app.js para as partes de JS.
   ========================================================================== */


/* ==========================================================================
   1. HISTORY SEMPRE VISIVEL NO MOBILE
   Ate agora a coluna 5 so aparecia com o Sniping Mode ligado. As larguras
   que o M9/M13 usavam no modo sniping viram o padrao.
   ========================================================================== */

@media (max-width: 768px) {
    .leaderboard-row:not(.archived-row) > td:nth-child(5),
    .leaderboard-table th:nth-child(5) {
        display: table-cell !important;
        width: 23% !important;
        padding: 0 0.25rem 0 0 !important;
    }

    .leaderboard-row:not(.archived-row) > td:nth-child(3),
    .leaderboard-table th:nth-child(3) {
        width: 21% !important;
    }

    .leaderboard-row:not(.archived-row) > td:nth-child(4),
    .leaderboard-table th:nth-child(4) {
        width: 46% !important;
    }

    /* Com menos espaco para o time, o slot segue o mesmo --lb-slot-h do M14 */
    .lb-fighter-slot,
    body.sniping-on .lb-fighter-slot {
        width: 70px !important;
        max-width: calc((100% - 4px) / 3) !important;
    }

    /* O history ja vinha compacto do M9/M12; so garantimos que valha sempre */
    .history-duration { display: none !important; }
    .history-score { display: none !important; }
    .history-queue { display: inline-block !important; }
}


/* ==========================================================================
   2. CONTROLE DO SNIPING — LOGICA INVERTIDA EM RELACAO AO M16

   Desktop      -> nome + icone SEMPRE (ligado ou desligado).
   Mobile OFF   -> nome + icone.
   Mobile ON    -> so o icone, vermelho.

   O texto "Sniping Mode" e um no solto dentro do <span>, sem tag propria,
   entao continua sendo escondido com font-size: 0 no pai.
   ========================================================================== */

@media (max-width: 768px) {
    /* Desfaz o "sempre escondido" do M16: desligado, o nome aparece */
    .sniping-control .sniping-label-text {
        font-size: 0.78rem !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px !important;
        letter-spacing: 0 !important;
    }

    /* Ligado: some so o texto, o icone fica */
    body.sniping-on .sniping-control .sniping-label-text {
        font-size: 0 !important;
        gap: 0 !important;
    }

    body.sniping-on .sniping-control .sniping-label-text i.fa-crosshairs {
        font-size: 1.05rem !important;
    }
}


/* ==========================================================================
   3. SLIDERS DO SNIPING — ICONE A ESQUERDA E CABECALHO MAIS BAIXO

   O culpado pelo icone ir parar em cima do slider era o
   `.sniping-filter-item { width: 100% }` do M16: ocupando a linha inteira,
   ele empurrava o icone para a linha de cima. Voltando o item para
   `flex: 1 1 0`, o icone fica ao lado e o conjunto perde uma linha inteira
   de altura.
   ========================================================================== */

.sniping-filter-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.sniping-filter-group .sniping-icon {
    flex: 0 0 auto;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
}

.sniping-filter-item {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* Espaco entre a barra e as caixinhas de numero */
    gap: 16px !important;
}

/* O .lb-controls-group tinha `margin-left: auto` e `min-width: auto`: no
   celular ele nao encolhia e vazava 26px para fora da tela, cortando a
   ultima caixinha de tempo. Aqui o cabecalho vira coluna de largura cheia
   e todo mundo passa a poder encolher. */
@media (max-width: 768px) {
    .leaderboard-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .lb-controls-group {
        width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .sniping-filters-panel {
        width: 100% !important;
        min-width: 0 !important;
    }

    .sniping-filter-group {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Mesma coisa na linha de cima: titulo + seletor de temporada + Live
       nao cabiam em 390px e o "Live" ficava cortado pela borda. */
    .lb-header-left {
        flex-wrap: wrap !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    .lb-header-left h2 { font-size: 1rem !important; }

    .lb-header-select {
        max-width: 150px;
        min-width: 0;
        font-size: 16px !important;   /* abaixo disso o Safari iOS da zoom */
        padding: 5px 7px !important;
    }
}


/* ==========================================================================
   4. SLIDERS — BARRA MAIS FINA, BOLINHA MENOR E CENTRADA NA LINHA

   Alinhamento horizontal ja foi resolvido no M16 (--thumb).
   Faltava o VERTICAL: o trilho do Sniping nao tinha `top`, entao encostava
   no topo do container enquanto o thumb era centralizado pelo navegador —
   por isso a bolinha parecia flutuar fora da linha.

   A correcao: trilho e preenchimento ancorados em 50% da altura, e o input
   ocupando 100% do container (o Chrome centraliza o thumb dentro do input).
   ========================================================================== */

.sniping-slider-container .slider-track,
.sniping-slider-container .slider-range,
.dual-range-slider .slider-track,
.dual-range-slider .slider-range {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.sniping-slider-container input[type="range"],
.dual-range-slider input[type="range"] {
    top: 0 !important;
    height: 100% !important;
}

.dual-range-slider .slider-ticks {
    top: 0 !important;
    bottom: 0 !important;
}

/* --- Barra mais fina e bolinha menor --- */
.sniping-slider-container.dual-range-slider {
    --thumb: 13px;
    height: 16px !important;
}

.sniping-slider-container .slider-track,
.sniping-slider-container .slider-range {
    height: 3px !important;
}

@media (max-width: 768px) {
    .sniping-slider-container.dual-range-slider {
        --thumb: 14px;
        height: 18px !important;
        margin: 0 !important;
    }

    .sniping-slider-container.dual-range-slider input[type="range"] {
        top: 0 !important;
        height: 100% !important;
    }

    /* Anula os tamanhos fixos do M12, que sobrepunham a variavel */
    .sniping-slider-container.dual-range-slider input[type="range"]::-webkit-slider-thumb {
        width: var(--thumb) !important;
        height: var(--thumb) !important;
        border-width: 2px !important;
    }

    .sniping-slider-container.dual-range-slider input[type="range"]::-moz-range-thumb {
        width: var(--thumb) !important;
        height: var(--thumb) !important;
        border-width: 2px !important;
    }

    .sniping-filter-item { gap: 14px !important; }

    .sniping-input-square {
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }
}


/* ==========================================================================
   5. SLIDERS DE LEVEL / EVOLVED DO SPLIT VIEW — 10% MAIS BAIXOS
   Largura intacta; muda so a altura da bolinha e o respiro vertical.
   ========================================================================== */

@media (max-width: 768px) {
    body.split-view-active .quick-filter-slider { --thumb: 16px; }

    body.split-view-active .quick-filter-slider .dual-slider-container {
        height: 5px !important;
    }

    body.split-view-active .quick-filter-slider label {
        padding: 5px 8px !important;
        font-size: 0.68rem !important;
    }
}


/* ==========================================================================
   6. ABA AXIE FINDER NO MOBILE — CABECALHO EM UMA LINHA SO
   Ordem: [icone do axie] [quantidade] [Axies] ... [grids de view] [IDs]
   O botao de IDs e criado por JS; o patch o coloca dentro do .results-title.
   ========================================================================== */

@media (max-width: 768px) {
    #tab-finder:not(.split-view-active) .results-header,
    body:not(.split-view-active) #tab-finder .results-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0.7rem !important;
    }

    body:not(.split-view-active) #tab-finder .results-title {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100%;
        margin: 0 !important;
    }

    body:not(.split-view-active) #tab-finder .results-title-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 auto;
    }

    body:not(.split-view-active) #tab-finder .results-title > div:not(.view-toggles) {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        flex: 0 0 auto;
    }

    body:not(.split-view-active) #tab-finder .results-count { font-size: 1rem !important; }
    body:not(.split-view-active) #tab-finder .results-title-text {
        font-size: 0.75rem !important;
        color: var(--text-muted);
    }

    /* Grids de visualizacao empurrados para a direita */
    body:not(.split-view-active) #tab-finder .view-toggles {
        margin-left: auto !important;
        padding: 3px !important;
        gap: 2px;
        flex: 0 0 auto;
    }

    body:not(.split-view-active) #tab-finder .btn-view-toggle {
        min-height: 30px !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Os dois dropdowns ficavam espremidos ao lado do rotulo e o texto
       aparecia como "Tc" / "H". Rotulo em cima, select na largura toda. */
    body:not(.split-view-active) #tab-finder #inventory-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }

    body:not(.split-view-active) #tab-finder #inventory-controls .quick-filter-group {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    body:not(.split-view-active) #tab-finder #inventory-controls label {
        font-size: 0.62rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    body:not(.split-view-active) #tab-finder #inventory-controls select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
        padding: 5px 7px !important;
    }

    /* Botao de IDs logo a direita dos grids */
    body:not(.split-view-active) #tab-finder .results-title .btn-show-ids {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        margin-left: 6px !important;
        flex: 0 0 auto;
        font-size: 0.8rem;
    }
}


/* ==========================================================================
   7. BARRA DE BUSCA FIXA ACIMA DO CABECALHO (MOBILE, ABA FINDER)

   O JS move para dentro de .mobile-search-bar, nesta ordem:
     1) os botoes Inventory / Teams
     2) a caixa de carteira  (titulo pequeno em cima, lupa a direita)
     3) a caixa de busca por ID (mesmo formato)
   O botao "Filtros e Carteira" continua existindo, logo abaixo.
   ========================================================================== */

.mobile-search-bar { display: none; }

@media (max-width: 1024px) {
    body:not(.split-view-active) #tab-finder .mobile-search-bar {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0.8rem;
        margin-bottom: 0.75rem;
    }

    /* --- 1. Inventory / Teams --- */
    .mobile-search-bar .wallet-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .mobile-search-bar .btn-wallet-action {
        flex: 1 1 0;
        padding: 8px !important;
        font-size: 0.8rem !important;
        min-height: 38px;
    }

    /* --- 2 e 3. As duas caixas de busca, coladas uma na outra --- */
    .mobile-search-bar .wallet-section {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* O <h3> vira um rotulo pequeno em cima da caixa */
    .mobile-search-bar .wallet-section h3 {
        font-size: 0.62rem !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 4px 0 !important;
    }

    .mobile-search-bar .wallet-section h3 i { font-size: 0.6rem; margin-right: 3px; }

    /* Caixa e lupa na mesma linha */
    .mobile-search-bar .wallet-search-box {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .mobile-search-bar .wallet-input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.5rem 0.6rem !important;
        border-radius: 8px;
    }

    .mobile-search-bar .wallet-buttons-container {
        flex: 0 0 auto;
        width: auto !important;
        gap: 6px !important;
    }

    /* So a lupa: o texto do botao some, o icone fica */
    .mobile-search-bar .btn-wallet-search {
        font-size: 0 !important;
        width: 42px;
        min-width: 42px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        flex: 0 0 auto;
    }

    .mobile-search-bar .btn-wallet-search i {
        font-size: 0.95rem !important;
        margin: 0 !important;
    }

    .mobile-search-bar .btn-clear-wallet {
        width: 42px;
        min-width: 42px;
        font-size: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto;
    }

    .mobile-search-bar .btn-clear-wallet i { font-size: 0.95rem !important; }

    .mobile-search-bar .wallet-info {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem;
        margin-top: 6px;
    }

    .mobile-search-bar .active-wallets-container { margin-top: 6px; }

    /* O gatilho dos filtros vem logo abaixo da barra */
    body:not(.split-view-active) #tab-finder .mobile-filters-trigger {
        margin-bottom: 0.75rem !important;
    }
}


/* ==========================================================================
   AJUSTES FINOS — CABECALHOS, TEAMS E MORPH
   ========================================================================== */



/* ==========================================================================
   1. DESKTOP — ICONE A ESQUERDA E NO ALTO DO SLIDER

   Com `align-items: center` o icone era centralizado em relacao a coluna
   inteira (barra + caixinhas), o que o deixava exatamente no meio dos dois.
   Ancorando no topo ele volta para a altura da barra, e o cabecalho perde
   a folga que existia so para acomodar essa centralizacao.
   ========================================================================== */

@media (min-width: 769px) {

    .sniping-filter-group {
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .sniping-filter-group .sniping-icon {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        line-height: 16px;
        flex: 0 0 auto;
    }

    /* Distancia entre a barra e as caixinhas */
    .sniping-filter-item { gap: 9px !important; }

    /* Caixinhas alinhadas com as pontas da barra: cada uma ocupa metade
       do espaco, entao as bordas externas caem sob as bolinhas. */
    .sniping-input-row {
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .sniping-input-square {
        max-width: none !important;
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    /* A base do .dual-range-slider tem `margin: 25px 0 10px`. Eram esses
       35px que empurravam a barra para longe do icone e esticavam o
       cabecalho inteiro. */
    .sniping-slider-container.dual-range-slider {
        height: 14px !important;
        margin: 0 !important;
    }

    .sniping-slider-wrapper { height: 14px !important; }

    /* Cabecalho mais baixo */
    .leaderboard-header {
        min-height: 0 !important;
        padding: 12px 22px !important;
        gap: 14px !important;
    }
}


/* --------------------------------------------------------------------------
   Correcoes que valem nas duas larguras
   -------------------------------------------------------------------------- */

/* O bloco mobile aplica `padding: .55rem .7rem` em TODO input, e isso atinge
   tambem o input[type=range]: o thumb passa a percorrer so a caixa de
   conteudo, recuada 11px de cada lado, enquanto o trilho ocupa a largura
   inteira. Era a causa real das bolinhas fora do lugar no celular — e o
   padding vertical ainda inflava a altura do input, desalinhando o eixo Y. */
.dual-range-slider input[type="range"],
.sniping-slider-container input[type="range"],
.quick-filter-slider input[type="range"] {
    padding: 0 !important;
}

/* Deslocamento herdado do layout antigo, quando as caixinhas ficavam acima */
.sniping-input-row input:first-child { margin-left: 0 !important; }


/* ==========================================================================
   2. DESKTOP — SPLIT VIEW VOLTA AO VISUAL ANTERIOR

   Quem mudou a aparencia foi o JS: moveCollectionsToHeader() movia os
   icones de colecao para o cabecalho em qualquer largura. O patch do
   app.js passa a mover so no celular. As regras abaixo sao a rede de
   seguranca caso a grade ja tenha sido movida antes do patch entrar.
   ========================================================================== */

@media (min-width: 769px) {

    body.split-view-active .results-header .collections-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        overflow-x: auto !important;
        order: 0 !important;
        flex: 1 1 auto !important;
    }

    body.split-view-active .results-header .collection-card {
        min-height: 26px !important;
        padding: 0.3rem 0.6rem !important;
        flex: 1 !important;
        justify-content: center !important;
        gap: 0.3rem !important;
    }

    /* Nome e icone inteiros, como era antes */
    body.split-view-active .results-header .collection-card span {
        display: inline !important;
        font-size: 0.8rem !important;
    }

    body.split-view-active .results-header .collection-card img {
        width: 20px !important;
        height: 20px !important;
    }
}


/* ==========================================================================
   3. MOBILE — ORDEM DO CABECALHO DO LEADERBOARD
   Leaderboard | Live | Temporada Atual (esta some com o Sniping ligado)
   ========================================================================== */

@media (max-width: 768px) {

    .lb-header-left {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
    }

    .lb-header-left h2          { order: 1; margin-right: 2px; }
    .lb-header-left #live-badge { order: 2; flex: 0 0 auto; }
    .lb-header-left .lb-header-select { order: 3; }
    .lb-header-left .sniping-control  { order: 4; margin-left: auto; }

    /* Com o Sniping ligado o seletor de temporada cede o lugar */
    body.sniping-on .lb-header-left #season-selector { display: none !important; }
}


/* ==========================================================================
   4. MOBILE — SLIDERS DO SNIPING

   Mesma ancoragem do desktop para o icone, caixinhas menores e barra e
   bolinhas explicitamente alinhadas nos dois eixos.
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Botao de ajuste: tamanho do numero dentro da caixinha ------------
       ATENCAO: abaixo de 16px o Safari do iPhone amplia a tela quando o
       dedo toca o campo. Se isso te incomodar, volte para 16px.
       ---------------------------------------------------------------------- */
    :root { --sniping-num: 13px; }

    .sniping-filter-group {
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .sniping-filter-group .sniping-icon {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 18px;
        flex: 0 0 auto;
    }

    /* Barra e caixinhas mais proximas */
    .sniping-filter-item { gap: 7px !important; }

    .sniping-input-row {
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .sniping-input-square {
        padding: 4px 6px !important;
        font-size: var(--sniping-num) !important;
        border-radius: 8px !important;
        max-width: none !important;
        text-align: center !important;
    }

    .sniping-input-row::after { font-size: 0.8rem !important; }

    /* --- Alinhamento das bolinhas -----------------------------------------
       Horizontal: o trilho vai de 0 a C, mas o thumb nativo so percorre de
       thumb/2 ate C - thumb/2. Alargar o input em 1 thumb e recuar meio
       thumb faz os dois coincidirem.
       Vertical: o trilho nao tinha `top`, entao encostava no topo da caixa
       enquanto o navegador centralizava o thumb.
       ---------------------------------------------------------------------- */
    .sniping-slider-container.dual-range-slider {
        --thumb: 13px;
        height: 16px !important;
        margin: 0 !important;
        position: relative !important;
    }

    .sniping-slider-container .slider-track {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 3px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .sniping-slider-container .slider-range {
        height: 3px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .sniping-slider-container input[type="range"] {
        position: absolute !important;
        top: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        width: calc(100% + var(--thumb)) !important;
        left: calc(var(--thumb) / -2) !important;
    }

    .sniping-slider-container input[type="range"]::-webkit-slider-thumb {
        width: var(--thumb) !important;
        height: var(--thumb) !important;
        border-width: 2px !important;
        margin-top: 0 !important;
    }

    .sniping-slider-container input[type="range"]::-moz-range-thumb {
        width: var(--thumb) !important;
        height: var(--thumb) !important;
        border-width: 2px !important;
    }
}


/* ==========================================================================
   5. MOBILE — ABA TEAMS DO AXIE FINDER

   linha 1: icone + quantidade .......... Ordenar Times
   linha 2: Create Team ................. Morph View

   O `display: contents` dissolve .results-title, .quick-filters e
   #team-controls, promovendo os seis elementos a itens diretos do
   cabecalho — so assim da para ordena-los entre si. A quebra entre as
   duas linhas e um ::after de largura total com order 4.
   ========================================================================== */

@media (max-width: 768px) {

    /* Uma regra do bloco anterior forcava display:flex nos dropdowns de
       inventario mesmo na aba Teams; o :not() devolve o controle ao JS. */
    body.teams-view #tab-finder #inventory-controls { display: none !important; }

    body.teams-view #tab-finder .results-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0.7rem !important;
    }

    body.teams-view #tab-finder .results-title,
    body.teams-view #tab-finder .quick-filters,
    body.teams-view #tab-finder #team-controls {
        display: contents !important;
    }

    body.teams-view #tab-finder .results-title-icon {
        order: 1;
        width: 22px !important;
        height: 22px !important;
    }

    body.teams-view #tab-finder .results-title > div:not(.view-toggles) {
        order: 2;
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        flex: 1 1 auto;
    }

    body.teams-view #tab-finder .results-count { font-size: 1rem !important; }
    body.teams-view #tab-finder .results-title-text {
        font-size: 0.75rem !important;
        color: var(--text-muted);
    }

    /* Ordenar Times fecha a linha 1 */
    body.teams-view #tab-finder #team-controls .quick-filter-group:last-child {
        order: 3;
        display: flex !important;
        align-items: center;
        gap: 5px !important;
        flex: 0 0 auto;
    }

    body.teams-view #tab-finder #team-controls label {
        font-size: 0.62rem !important;
        white-space: nowrap;
    }

    body.teams-view #tab-finder #team-sort-by {
        min-width: 0 !important;
        max-width: 128px;
        font-size: 16px !important;
        padding: 5px 7px !important;
        border-radius: 8px;
    }

    /* Quebra de linha */
    body.teams-view #tab-finder .results-header::after {
        content: "";
        order: 4;
        flex: 1 0 100%;
        height: 0;
    }

    /* Create Team e Morph View dividem a linha 2 */
    body.teams-view #tab-finder .btn-create-team-header {
        order: 5;
        flex: 1 1 0;
        margin: 0 !important;
        justify-content: center;
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }

    body.teams-view #tab-finder #team-controls .quick-filter-group:first-child {
        order: 6;
        flex: 1 1 0;
        justify-content: center;
        padding: 4px 10px !important;
        gap: 7px !important;
    }

    body.teams-view #tab-finder .morph-toggle-label { font-size: 0.72rem !important; }

    /* Os modos de visualizacao nao se aplicam a times */
    body.teams-view #tab-finder .view-toggles { display: none !important; }
}


/* ==========================================================================
   6. MOBILE — CARDS DE TIME COM 3 AXIES POR LINHA

   O axie mantem o tamanho: quem encolhe e a moldura em volta. Reduzindo o
   padding do card, do slot e do painel de resultados, sobra largura para
   os tres caberem lado a lado.
   ========================================================================== */

@media (max-width: 768px) {

    body.teams-view .results-panel {
        padding: 0.5rem !important;
    }

    .teams-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.5rem 0 !important;
    }

    .team-card-new {
        padding: 0.7rem !important;
        min-height: 0 !important;
    }

    .team-axies-new {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem !important;
    }

    .team-axie-new {
        padding: 0.2rem !important;
        border-radius: 8px !important;
    }

    .team-axie-new img,
    .team-morph-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        border-radius: 8px !important;
    }

    /* O cabecalho do card virava coluna no mobile e roubava altura */
    .team-header-new,
    .team-header-new.compact {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.35rem !important;
    }

    .team-name-new { font-size: 0.95rem !important; margin-right: 0 !important; }
    .team-wallet-new {
        font-size: 0.65rem !important;
        max-width: 45% !important;
        text-align: right !important;
        margin-left: auto;
    }

    .btn-quick-swap,
    .btn-quick-remove {
        width: 24px !important;
        height: 24px !important;
        top: 3px !important;
        font-size: 0.65rem !important;
    }

    .btn-quick-swap { left: 3px !important; }
    .btn-quick-remove { right: 3px !important; }
}


/* ==========================================================================
   7. MOBILE — CRIACAO DE TIME

   slots de adicionar : 3 por linha
   filtros de classe  : as 9 classes em uma linha so, preenchendo a largura
   resultados         : 2 por linha, igual a busca normal
   ========================================================================== */

@media (max-width: 768px) {

    .selected-axies-preview {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
        padding: 0.5rem !important;
        min-height: 0 !important;
    }

    .selected-axie-preview {
        padding: 0.3rem !important;
        border-radius: 8px !important;
    }

    .selected-axie-preview.empty {
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
        font-size: 0.65rem;
    }

    .selected-axie-preview.empty i { font-size: 1.1rem !important; margin-bottom: 0.2rem !important; }

    /* O 240x200 fixo estourava a coluna; agora o axie acompanha o slot */
    .selected-axie-preview img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .selected-axie-preview .axie-name {
        font-size: 0.6rem !important;
        margin-top: 0.2rem !important;
    }

    /* As 9 classes em uma linha, dividindo a largura por igual */
    .class-filters-grid {
        grid-template-columns: repeat(9, 1fr) !important;
        gap: 3px !important;
    }

    .class-filter-btn {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        min-height: 0 !important;
        padding: 3px !important;
        border-radius: 6px !important;
    }

    .class-filter-icon { width: 100% !important; height: auto !important; }

    .selection-class-filters { padding: 0.6rem !important; }
    .class-filters-title { font-size: 0.7rem !important; margin-bottom: 0.4rem !important; }

    /* Resultados da selecao: 2 por linha, como na busca */
    .axie-selection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .axie-selection-grid .axie-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   8. MOBILE — MORPH VIEW NA PROPORCAO DO CARD

   O card no celular tem a imagem em 118px (bloco dos cards 2 por linha),
   mas o morph continuava com os 157px do desktop e a grade de partes com
   as fontes originais. Aqui os dois passam a acompanhar o card.
   ========================================================================== */

@media (max-width: 768px) {

    .morph-image-container {
        height: 118px !important;
    }

    .morph-image-container img { height: 108% !important; }

    .morph-view-container { padding: 0.3rem !important; }

    .morph-label { font-size: 0.55rem !important; margin-bottom: 3px !important; }

    .morph-parts-grid {
        gap: 0.15rem !important;
        padding: 0.2rem !important;
        border-radius: 4px !important;
    }

    .morph-part-item {
        gap: 2px !important;
        font-size: 0.55rem !important;
        min-height: 13px !important;
    }

    .morph-part-icon {
        width: 13px !important;
        height: 13px !important;
    }

    .morph-part-icon img { width: 8px !important; height: 8px !important; }

    .morph-part-name {
        max-width: 52px !important;
        padding: 0 3px !important;
        border-radius: 2px !important;
    }

    .morph-col-left { padding-right: 2px !important; }
    .morph-col-right { padding-left: 2px !important; }

    .morph-level-badge {
        top: 112px !important;
        font-size: 0.55rem !important;
        padding: 1px 5px !important;
    }

    .morph-actions-group {
        top: 5px !important;
        right: 5px !important;
        gap: 7px !important;
    }

    .morph-actions-group button { font-size: 0.8rem !important; }

    .morph-image-container .collection-badge {
        width: 20px !important;
        height: 20px !important;
    }

    .morph-image-container .collection-badge img {
        width: 13px !important;
        height: 13px !important;
    }
}


/* ==========================================================================
   AJUSTES — ICONES DO SNIPING, PAINEL DE BUSCA E SELECAO DE AXIES
   ========================================================================== */



/* ==========================================================================
   1. POSICAO DOS ICONES DE TROFEU E RELOGIO   <<< AJUSTE MANUAL AQUI

   Dois botoes por largura de tela:

     --sniping-icon-gap  : distancia entre o icone e a barra do slider.
                           Maior = mais afastado.
     --sniping-icon-lift : quanto o icone sobe em relacao a barra.
                           NEGATIVO sobe, POSITIVO desce. 0 = na linha.

   Exemplos:
     --sniping-icon-lift: -8px;  -> bem acima da barra
     --sniping-icon-lift:  0px;  -> exatamente na altura da barra
     --sniping-icon-lift:  4px;  -> um pouco abaixo
   ========================================================================== */

@media (min-width: 769px) {
    :root {
        --sniping-icon-gap: 10px;
        --sniping-icon-lift: -3px;
    }
}

@media (max-width: 768px) {
    :root {
        --sniping-icon-gap: 11px;
        --sniping-icon-lift: -5px;
    }
}

.sniping-filter-group {
    gap: var(--sniping-icon-gap) !important;
}

.sniping-filter-group .sniping-icon {
    position: relative !important;
    top: var(--sniping-icon-lift) !important;
    left: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}


/* ==========================================================================
   2. DESKTOP — OS DOIS SLIDERS DO SNIPING COM O MESMO TAMANHO

   O grupo tem largura de conteudo (`flex: 0 1 auto`), entao quem mandava na
   largura eram as caixinhas. As do rank sao input[type=number] e as de
   tempo input[type=text], que tem largura intrinseca bem maior — dai o
   slider de tempo ficar quase 3x o do trofeu (427px contra 155px).
   Fixando a largura do item, os dois passam a medir igual.
   ========================================================================== */

@media (min-width: 769px) {

    .sniping-filter-item {
        flex: 0 0 155px !important;
        width: 155px !important;
    }

    .sniping-input-square {
        width: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}


/* ==========================================================================
   3. PAINEL DE BUSCA — MESMO DESENHO NO DESKTOP E NO MOBILE

   Ordem dentro do bloco:
     1) Inventory / Teams
     2) rotulo pequeno  ("Buscar por Carteira")
     3) caixa do endereco + lupa + X
     4) contador e etiquetas das carteiras ativas

   No mobile o JS ja move esses blocos para a #mobile-search-bar. No desktop
   eles continuam onde estao, dentro do .filters-panel: aqui so reordenamos
   e reestilizamos, sem mover nada no DOM.
   ========================================================================== */

@media (min-width: 1025px) {

    .filters-panel .wallet-section {
        display: flex;
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1rem;
    }

    /* Inventory / Teams sobem para o topo */
    .filters-panel #wallet-actions   { order: 1; margin-bottom: 0.9rem; }
    .filters-panel .wallet-section h3 { order: 2; }
    .filters-panel .wallet-search-box { order: 3; }
    .filters-panel #wallet-info       { order: 4; margin-top: 0.5rem; }
    .filters-panel #active-wallets-list { order: 5; }

    .filters-panel .btn-wallet-action {
        padding: 0.55rem !important;
        font-size: 0.85rem;
    }
}

/* --- O rotulo, a caixa e os botoes: identicos nas duas larguras --------- */

.filters-panel .wallet-section h3,
.mobile-search-bar .wallet-section h3 {
    font-size: 0.62rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 4px 0 !important;
}

.filters-panel .wallet-section h3 i,
.mobile-search-bar .wallet-section h3 i {
    font-size: 0.6rem;
    margin-right: 3px;
}

.filters-panel .wallet-search-box,
.mobile-search-bar .wallet-search-box {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 0 !important;
}

.filters-panel .wallet-input,
.mobile-search-bar .wallet-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.6rem !important;
    border-radius: 8px;
}

.filters-panel .wallet-buttons-container,
.mobile-search-bar .wallet-buttons-container {
    flex: 0 0 auto;
    width: auto !important;
    gap: 6px !important;
}

/* Lupa: so o icone */
.filters-panel .btn-wallet-search,
.mobile-search-bar .btn-wallet-search {
    font-size: 0 !important;
    width: 42px;
    min-width: 42px;
    flex: 0 0 auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.filters-panel .btn-wallet-search i,
.mobile-search-bar .btn-wallet-search i {
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* --- O "Limpar" vira um X ao lado direito da lupa ----------------------
   O icone no HTML e uma vassoura (fa-broom) e o texto e um no solto. Em
   vez de mexer no HTML, escondemos os dois e desenhamos o X com ::after. */
.btn-clear-wallet {
    font-size: 0 !important;
    width: 42px;
    min-width: 42px;
    flex: 0 0 auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    gap: 0 !important;
}

.btn-clear-wallet i { display: none !important; }

.btn-clear-wallet::after {
    content: "\00d7";          /* × */
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
}


/* ==========================================================================
   4. MOBILE — ABA TEAMS SEM AS CAIXAS DE BUSCA
   Os botoes Inventory / Teams continuam; as duas buscas somem.
   ========================================================================== */

@media (max-width: 1024px) {
    body.teams-view .mobile-search-bar .wallet-section {
        display: none !important;
    }

    body.teams-view .mobile-search-bar {
        padding-bottom: 0.8rem !important;
    }
}


/* ==========================================================================
   5. SELECAO DE AXIES — BUSCA POR CARTEIRA AO LADO DA BUSCA POR ID
   A caixa nova e criada pelo app.js; aqui fica so o visual.
   ========================================================================== */

#external-id-search-container {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}

.selection-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.selection-search-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-main);
}

.selection-search-row button {
    flex: 0 0 auto;
    width: 42px;
    height: 38px;
    padding: 0;
    background: var(--primary-color);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.selection-search-row button:hover { background: var(--secondary-color); }
.selection-search-row button:disabled { background: var(--border-color); cursor: not-allowed; }

@media (max-width: 768px) {
    #external-id-search-container {
        padding: 8px !important;
        margin-bottom: 10px !important;
    }

    .selection-search-row input {
        font-size: 16px !important;   /* < 16px faz o Safari iOS dar zoom */
        padding: 6px 9px !important;
    }

    .selection-search-row button { width: 38px; height: 34px; }
}


/* ==========================================================================
   6. MOBILE — AXIE ADICIONADO OCUPA O SLOT INTEIRO, SEM O NOME EMBAIXO
   O slot preenchido passa a ter exatamente a mesma caixa do slot vazio.
   ========================================================================== */

@media (max-width: 768px) {

    .selected-axie-preview.filled {
        padding: 0.15rem !important;
        aspect-ratio: 1 / 1;
        min-height: 0 !important;
        height: auto !important;
        justify-content: center !important;
        overflow: hidden;
    }

    .selected-axie-preview.filled img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain;
        border-radius: 6px;
    }

    /* O nome roubava altura do slot e forcava o axie a encolher */
    .selected-axie-preview .axie-name { display: none !important; }

    .remove-axie-btn,
    .change-axie-btn {
        width: 17px !important;
        height: 17px !important;
        font-size: 0.55rem !important;
        top: 2px !important;
    }

    .remove-axie-btn { right: 2px !important; }
    .change-axie-btn { left: 2px !important; }
}


/* ==========================================================================
   AJUSTES — BUSCA, CARDS DE TIME, MORPH E CREATE TEAM
   ========================================================================== */



/* ==========================================================================
   1. BOTAO DE RECARREGAR (era o "Limpar")

   O app.js agora troca o conteudo do botao por um icone de refresh, entao o
   "x" que o bloco anterior desenhava com ::after precisa sair de cena.
   ========================================================================== */

.btn-clear-wallet::after { content: none !important; }
.btn-clear-wallet i { display: block !important; font-size: 0.95rem !important; }

.btn-clear-wallet {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-clear-wallet:hover {
    background: var(--primary-color);
    color: #fff;
}

/* As duas caixas de busca ficam lado a lado tambem no celular: o bloco
   mobile empilhava os botoes em coluna, jogando o refresh para baixo do +. */
@media (max-width: 768px) {
    .wallet-buttons-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}


/* ==========================================================================
   2. CONTAGEM POR CARTEIRA E ETIQUETAS DE AXIE POR ID
   ========================================================================== */

.wallet-tag-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
}

.wallet-count-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-left: 4px;
}

.searched-axies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.axie-id-tag {
    background: rgba(16, 185, 129, 0.12);
    border-color: var(--success-color);
    color: var(--success-color);
    font-family: 'Roboto Mono', monospace;
}

.axie-id-tag .remove-wallet-btn {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
}


/* ==========================================================================
   3. CENTRALIZACAO DO AXIE NO CARD   <<< AJUSTE MANUAL AQUI

   O PNG do marketplace tem o bicho na metade de cima e espaco vazio
   embaixo, entao com `object-fit: contain` ele parece jogado para cima.
   O Morph nao sofria disso porque ja usava um deslocamento proprio.

     --axie-img-shift : negativo sobe, positivo desce
     --axie-img-zoom  : 1 = tamanho original
   ========================================================================== */

:root {
    --axie-img-shift: 4%;
    --axie-img-zoom: 1.06;
}

.axie-image {
    transform: translateY(var(--axie-img-shift)) scale(var(--axie-img-zoom));
    transform-origin: center center;
}

.axie-image-container { overflow: hidden; }


/* ==========================================================================
   4. CARDS DE TIME — BADGE, CLASSE + ID, LEVEL E BOTOES MENORES

   O JS monta a marcacao; aqui so posicionamos:
     topo esquerdo   -> badge de colecao especial
     topo direito    -> troca e X, nessa ordem
     base esquerda   -> icone de classe + ID
     base direita    -> level
   ========================================================================== */

.team-axie-new { position: relative; overflow: hidden; }

.team-axie-badges {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    gap: 3px;
    z-index: 6;
    pointer-events: none;
}

.team-axie-badges .collection-badge {
    width: 20px;
    height: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.team-axie-badges .collection-badge img { width: 14px; height: 14px; }

.team-axie-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px 5px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0));
    font-size: 0.62rem;
    font-weight: 700;
    z-index: 6;
    pointer-events: none;
}

.team-axie-id {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A regra base `.team-axie-new img { width:100%; aspect-ratio:1/1 }` tem
   especificidade maior que uma classe sozinha e esticava este icone para o
   tamanho do card inteiro. Daqui sai com o tamanho certo. */
.team-axie-meta .team-axie-class {
    width: 14px !important;
    height: 14px !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
    transform: none !important;
}

.team-axie-level {
    color: var(--primary-color);
    white-space: nowrap;
}

/* --- Troca e X juntos no canto superior direito ------------------------
   O botao de troca ficava no canto oposto; agora os dois formam um par. */
.btn-quick-swap,
.btn-quick-remove {
    width: 22px !important;
    height: 22px !important;
    top: 4px !important;
    font-size: 0.62rem !important;
    border-radius: 5px !important;
}

.btn-quick-remove { right: 4px !important; left: auto !important; }
.btn-quick-swap   { right: 30px !important; left: auto !important; }


/* ==========================================================================
   5. TAMANHO DO AXIE DENTRO DO QUADRO DO TIME   <<< AJUSTE MANUAL AQUI
   O quadro nao muda; so o bicho cresce dentro dele.
   ========================================================================== */

:root { --team-axie-zoom: 1.10; }

.team-morph-container img,
.team-axie-new > img {
    transform: scale(var(--team-axie-zoom));
    transform-origin: center center;
}

/* Badges e icone de classe ficam de fora do zoom */
.team-axie-badges img,
.team-axie-meta img { transform: none !important; }


/* ==========================================================================
   6. CREATE TEAM — SLOT VAZIO DO MESMO TAMANHO DO PREENCHIDO (DESKTOP)
   ========================================================================== */

@media (min-width: 769px) {
    .selected-axies-preview { min-height: 0; }

    .selected-axie-preview.empty,
    .selected-axie-preview.filled {
        aspect-ratio: 1 / 1;
        height: auto !important;
        min-height: 0 !important;
        justify-content: center;
    }

    .selected-axie-preview img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
}


/* ==========================================================================
   7. MOBILE — BOTOES DE MORPH E MARKETPLACE NO CANTO SUPERIOR DIREITO

   Os dois passam a ter o mesmo tamanho dos badges de colecao e a mesma
   distancia da borda, um abaixo do outro.
   ========================================================================== */

@media (max-width: 768px) {

    .axie-card .morph-button {
        top: 4px !important;
        right: 4px !important;
        width: 20px !important;
        height: 20px !important;
        z-index: 12;
    }

    .marketplace-button {
        top: 28px !important;
        right: 4px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 0.55rem !important;
        border-radius: 5px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
    }

    .collection-badges-container {
        top: 4px !important;
        left: 4px !important;
    }

    /* --- Modo morph: X e link do marketplace empilhados no mesmo canto --- */
    .morph-actions-group {
        top: 4px !important;
        right: 4px !important;
        gap: 4px !important;
        flex-direction: column !important;
        align-items: center !important;
        z-index: 25;
    }

    .morph-actions-group button,
    .morph-btn-close,
    .marketplace-link {
        width: 20px !important;
        height: 20px !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem !important;
        border-radius: 5px !important;
        background: rgba(15, 23, 42, 0.75) !important;
        color: #fff !important;
    }

    .morph-image-container .collection-badges-container {
        top: 4px !important;
        left: 4px !important;
    }
}


/* ==========================================================================
   8. MOBILE — TEAMS COM O AXIE MAIOR   <<< AJUSTE MANUAL AQUI
   Os tres continuam lado a lado; o espaco vem do gap e do padding.
   ========================================================================== */

@media (max-width: 768px) {
    :root { --team-axie-zoom: 1.22; }

    .team-axies-new {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.2rem !important;
    }

    .team-axie-new {
        padding: 0.1rem !important;
    }

    .team-card-new { padding: 0.55rem !important; }

    .team-axie-badges { top: 2px; left: 2px; }
    .team-axie-badges .collection-badge { width: 15px; height: 15px; }
    .team-axie-badges .collection-badge img { width: 10px; height: 10px; }

    .team-axie-meta {
        padding: 2px 3px;
        font-size: 0.5rem;
    }

    .team-axie-meta .team-axie-class { width: 11px !important; height: 11px !important; }

    .btn-quick-swap,
    .btn-quick-remove {
        width: 17px !important;
        height: 17px !important;
        top: 2px !important;
        font-size: 0.5rem !important;
        border-radius: 4px !important;
    }

    .btn-quick-remove { right: 2px !important; }
    .btn-quick-swap   { right: 21px !important; }
}

/* Em tela de toque nao existe :hover, entao os dois botoes ficavam
   invisiveis para sempre. Aqui eles aparecem direto. */
@media (hover: none), (max-width: 768px) {
    .btn-quick-swap,
    .btn-quick-remove {
        opacity: 1 !important;
    }
}


/* ==========================================================================
   9. MOBILE — CREATE TEAM: AXIE MAIOR, BOTOES MENORES
   Os quadros mantem o tamanho atual e os tres seguem lado a lado.
   ========================================================================== */

@media (max-width: 768px) {

    .selected-axie-preview.filled img {
        transform: scale(1.18);
        transform-origin: center center;
    }

    .selected-axie-preview.filled { overflow: hidden; }

    .remove-axie-btn,
    .change-axie-btn {
        width: 15px !important;
        height: 15px !important;
        font-size: 0.5rem !important;
        top: 2px !important;
        z-index: 8;
    }

    .remove-axie-btn { right: 2px !important; }
    .change-axie-btn { left: 2px !important; }
}


/* ==========================================================================
   10. TEAM BUILDER — DROPDOWNS DA COLUNA ESQUERDA ABREM PARA A DIREITA
   A coluna da direita continua como esta.
   ========================================================================== */

.builder-parts-col:first-child .part-list {
    left: 0 !important;
    right: auto !important;
    min-width: 240px;
}

.builder-header .icon-dropdown:first-child .icon-dropdown-list {
    left: 0 !important;
    transform: none !important;
}


/* ==========================================================================
   AJUSTES — BOTOES, CARDS, MORPH E MENU MOBILE
   ========================================================================== */



/* ==========================================================================
   1. MENU MOBILE QUE NAO APARECIA COM A PAGINA ROLADA

   Causa: `backdrop-filter` no .main-header faz dele o bloco de contencao de
   qualquer descendente `position: fixed` — e o #main-nav e filho do header.
   Quando o drawer abre, lockBodyScroll() poe `body { position: fixed;
   top: -Ypx }`, o header sticky desce para a posicao estatica e leva o menu
   junto: com a pagina rolada 900px, o menu ia parar em top: -900px.

   Sem o backdrop-filter no mobile, o `fixed` volta a se resolver contra a
   janela e o menu aparece onde deveria. O fundo translucido continua.
   ========================================================================== */

@media (max-width: 1024px) {
    .main-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 23, 42, 0.98) !important;
    }
}


/* ==========================================================================
   2. BOTOES PEQUENOS QUE FICAVAM ESTICADOS NO MOBILE

   O bloco de alvos de toque aplica `min-height: 44px` em TODO <button>.
   Como `min-height` vence `height` quando e maior, os botoes de 15-22px
   ficavam com 44px de altura e a largura pedida — dai o aspecto "esticado".
   Zerar o min-height nestes casos especificos resolve; os demais botoes da
   interface continuam com os 44px de area de toque.
   ========================================================================== */

@media (max-width: 768px) {
    .btn-quick-swap,
    .btn-quick-remove,
    .remove-axie-btn,
    .change-axie-btn,
    .morph-button,
    .marketplace-button,
    .morph-actions-group button,
    .morph-btn-close,
    .marketplace-link,
    .remove-wallet-btn {
        min-height: 0 !important;
        min-width: 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1;
    }
}


/* ==========================================================================
   3. MOBILE — BREED A ESQUERDA E ID A DIREITA NO CARD
   ========================================================================== */

@media (max-width: 768px) {
    .axie-details {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        width: 100%;
    }

    .axie-details > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .axie-details > div:last-child { text-align: right; }
}


/* ==========================================================================
   4. DESKTOP — CARD DE TIME COM AS MEDIDAS DO CARD DE INVENTARIO
   badge 28px / icone de classe 20px / textos 0.8-0.9rem / botoes 35px
   ========================================================================== */

@media (min-width: 769px) {

    .team-axie-badges { top: 8px; left: 8px; gap: 4px; }

    .team-axie-badges .collection-badge {
        width: 28px;
        height: 28px;
    }

    .team-axie-badges .collection-badge img {
        width: 20px !important;
        height: 20px !important;
        max-width: none !important;
    }

    .team-axie-meta {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    /* O `img { max-width: 100% }` global colapsava este icone para 0 quando
       o container flex encolhia; o max-width: none impede isso. */
    .team-axie-meta .team-axie-class {
        width: 20px !important;
        height: 20px !important;
        max-width: none !important;
        flex: 0 0 20px !important;
    }

    .team-axie-id { gap: 5px; }
    .team-axie-level { font-size: 0.9rem; }

    /* Volta ao tamanho que os botoes tinham antes no desktop */
    .btn-quick-swap,
    .btn-quick-remove {
        width: 35px !important;
        height: 35px !important;
        top: 8px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .btn-quick-remove { right: 8px !important; left: auto !important; }
    .btn-quick-swap   { right: 49px !important; left: auto !important; }
}


/* ==========================================================================
   5. MOBILE — BADGES DOS TIMES MENORES, COM O FUNDO COLORIDO
   O fundo vem das classes .mystic / .origin / ... ; aqui garantimos que o
   circulo apareca mesmo quando alguma regra generica tenta zera-lo.
   ========================================================================== */

@media (max-width: 768px) {

    .team-axie-badges { top: 3px; left: 3px; gap: 2px; }

    .team-axie-badges .collection-badge {
        width: 14px !important;
        height: 14px !important;
        min-height: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        background-color: rgba(15, 23, 42, 0.9);
    }

    .team-axie-badges .collection-badge img {
        width: 10px !important;
        height: 10px !important;
        max-width: none !important;
    }

    .team-axie-meta .team-axie-class {
        max-width: none !important;
        flex: 0 0 10px !important;
    }

    .team-axie-meta { padding: 2px 4px; font-size: 0.48rem; }
    .team-axie-meta .team-axie-class { width: 10px !important; height: 10px !important; }

    .btn-quick-swap,
    .btn-quick-remove {
        width: 16px !important;
        height: 16px !important;
        top: 3px !important;
        font-size: 0.45rem !important;
        border-radius: 4px !important;
    }

    .btn-quick-remove { right: 3px !important; }
    .btn-quick-swap   { right: 21px !important; }

    /* Create team: mesmos botoes, mesmo tamanho */
    .remove-axie-btn,
    .change-axie-btn {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.45rem !important;
        border-radius: 4px !important;
        top: 3px !important;
    }

    .remove-axie-btn { right: 3px !important; }
    .change-axie-btn { left: 3px !important; }
}


/* ==========================================================================
   6. MORPH TRUE VIEW — OS TRES ICONES MAIS PROXIMOS
   Vale para as duas larguras.
   ========================================================================== */

.morph-actions-group {
    gap: 5px !important;
}

@media (min-width: 769px) {
    .morph-actions-group {
        top: 8px !important;
        right: 8px !important;
        gap: 5px !important;
    }

    /* A regra base usa `width: auto !important; height: auto !important`,
       entao aqui tambem precisa de !important para valer. */
    .morph-actions-group button {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.95rem !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .morph-actions-group { gap: 3px !important; }
}


/* ==========================================================================
   7. MOBILE — CABECALHO DO LEADERBOARD COM O SNIPING DESLIGADO
   Leaderboard | Live | Temporada Atual ......... Sniping Mode
   A caixa da temporada encolhe para os tres caberem na mesma linha.
   ========================================================================== */

@media (max-width: 768px) {

    .lb-header-left {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .lb-header-left h2 {
        font-size: 0.92rem !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .lb-header-left #live-badge {
        flex: 0 0 auto;
        padding: 3px 6px !important;
        font-size: 0.6rem !important;
    }

    .lb-header-left .lb-header-select {
        flex: 0 1 auto;
        min-width: 0 !important;
        max-width: 116px;
        font-size: 16px !important;    /* < 16px faz o Safari iOS dar zoom */
        padding: 4px 5px !important;
        text-overflow: ellipsis;
    }

    /* Desligado, o controle fecha a linha pela direita */
    body:not(.sniping-on) .lb-header-left .sniping-control {
        margin-left: auto !important;
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   8. ETIQUETAS DE AXIE POR ID TAMBEM NO DESKTOP
   O container e criado pelo JS dentro da secao "Buscar por ID".
   ========================================================================== */

.searched-axies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    width: 100%;
}

.filters-panel .searched-axies-container { order: 6; }

.axie-id-tag .wallet-addr-text { max-width: 120px; }


/* ==========================================================================
   AJUSTES FINOS — SNIPING, BADGES DOS TIMES E BOTOES
   ========================================================================== */



/* ==========================================================================
   1. MOBILE — POSICAO DO CONTROLE DO SNIPING

   Desligado -> fecha a linha pela direita.
   Ligado    -> volta a ficar logo ao lado do "Live", como era antes.

   O bloco anterior aplicava `margin-left: auto` nos dois estados, entao o
   controle ia para a direita mesmo com o Sniping ligado.
   ========================================================================== */

@media (max-width: 768px) {

    /* Desligado, o controle nem esta no .lb-header-left: o JS so o move
       para la quando o Sniping liga. Enquanto isso ele vive no
       .lb-controls-group, e e ali que precisa ser empurrado para a direita. */
    body:not(.sniping-on) .lb-controls-group {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    body:not(.sniping-on) .lb-controls-group .sniping-control {
        margin-left: auto !important;
        flex: 0 0 auto;
    }

    body.sniping-on .lb-header-left .sniping-control {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/* ==========================================================================
   2. MOBILE — BADGE DO TIME IDENTICO AO DO INVENTARIO

   O bloco anterior forcava `background-color` e `box-shadow` proprios, o
   que mudava o acabamento em relacao aos badges do inventario. Aqui o badge
   volta a herdar tudo das classes .mystic / .origin / ... e so o tamanho e
   ajustado — exatamente a mesma proporcao do card de inventario
   (28px de circulo para 20px de icone).
   ========================================================================== */

@media (max-width: 768px) {

    .team-axie-badges .collection-badge {
        width: 18px !important;
        height: 18px !important;
        min-height: 0 !important;
        background-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }

    .team-axie-badges .collection-badge img {
        width: 13px !important;
        height: 13px !important;
        max-width: none !important;
        border-radius: 50%;
        object-fit: contain;
    }
}


/* ==========================================================================
   3. MOBILE — TROCA E "X" 15% MAIORES

   Vale para os cards da aba Teams, para o Editar Time e para o Criar Novo
   Time. 16px -> 18px (a distancia lateral acompanha para os dois nao se
   encostarem).
   ========================================================================== */

@media (max-width: 768px) {

    .btn-quick-swap,
    .btn-quick-remove {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.52rem !important;
    }

    .btn-quick-remove { right: 3px !important; }
    .btn-quick-swap   { right: 24px !important; }

    /* Editar time / criar novo time */
    .remove-axie-btn,
    .change-axie-btn {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.52rem !important;
    }
}


/* ==========================================================================
   AJUSTES — BADGE DOS TIMES, BOTOES E CLASSE NO MORPH
   ========================================================================== */



/* ==========================================================================
   1. O BADGE DOS TIMES QUE INSISTIA EM FICAR DIFERENTE

   Causa, enfim: a regra do bloco de cards de time

       .team-axie-new img { border-radius: 8px !important;
                            background: linear-gradient(...); aspect-ratio: 1/1 }

   nao vale so para a foto do axie — ela casa com QUALQUER <img> dentro do
   card, inclusive a do badge e a do icone de classe. O badge saia como um
   quadradinho de cantos arredondados, com fundo escuro por tras do icone,
   em vez do circulo do inventario.

   Aqui as duas imagens sao devolvidas ao estado normal.
   ========================================================================== */

.team-axie-badges .collection-badge img {
    border-radius: 50% !important;
    background: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Mesma sombra do badge de inventario nas duas larguras */
.team-axie-badges .collection-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.team-axie-meta .team-axie-class {
    border-radius: 4px !important;
    background: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Mesma proporcao do inventario: circulo 20px para icone 14px */
@media (max-width: 768px) {
    .team-axie-badges .collection-badge {
        width: 20px !important;
        height: 20px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
        background-color: transparent !important;
    }

    .team-axie-badges .collection-badge img {
        width: 14px !important;
        height: 14px !important;
    }
}


/* ==========================================================================
   2. MOBILE — TAMANHOS DOS BOTOES

   morph do inventario   20px -> 23px  (+15%)
   troca / X criar time  18px -> 21px  (+15%)
   troca / X dos times   18px -> 20px  (+10%)
   ========================================================================== */

@media (max-width: 768px) {

    .axie-card .morph-button {
        width: 23px !important;
        height: 23px !important;
    }

    /* O botao do marketplace desce junto para nao encostar no morph */
    .marketplace-button {
        top: 31px !important;
    }

    /* Criar novo time / editar time */
    .remove-axie-btn,
    .change-axie-btn {
        width: 21px !important;
        height: 21px !important;
        font-size: 0.58rem !important;
    }

    /* Cards da aba Teams */
    .btn-quick-swap,
    .btn-quick-remove {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.55rem !important;
    }

    .btn-quick-remove { right: 3px !important; }
    .btn-quick-swap   { right: 26px !important; }
}


/* ==========================================================================
   3. MORPH GENE VIEW — ICONE DA CLASSE A ESQUERDA, NA ALTURA DO LEVEL

   O level ja ficava ancorado a direita logo abaixo da imagem; a classe
   entra do lado oposto, na mesma linha, alinhada com o badge de colecao.
   ========================================================================== */

.morph-class-badge {
    position: absolute;
    top: 152px;
    left: 1px;
    z-index: 20;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.morph-class-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    background: none !important;
    aspect-ratio: auto !important;
}

@media (max-width: 768px) {
    .morph-class-badge {
        top: 112px !important;
        left: 1px;
        padding: 1px 5px !important;
    }

    .morph-class-badge img {
        width: 13px !important;
        height: 13px !important;
    }
}


/* ==========================================================================
   4. MODAL DE SELECAO — O BOTAO DE MORPH APARECE NOS CARDS
   O app.js passou a renderizar o botao tambem ali; aqui garantimos que ele
   fique acima da imagem e clicavel.
   ========================================================================== */

.axie-selection-grid .axie-card .morph-button {
    display: block;
    z-index: 20;
    pointer-events: auto;
}


/* ==========================================================================
   AJUSTES FINAIS — TEAMS NO MOBILE, AVISOS E BOTOES DE COMPRA
   ========================================================================== */



/* ==========================================================================
   1. O AVISO QUE NAO APARECIA (nome de time repetido)

   A validacao sempre existiu no createTeam(); o problema era de camada:

       .notification { z-index: 10000 }
       .modal        { z-index: 10020 }

   O fundo escuro do modal cobre a tela inteira e ficava POR CIMA do aviso.
   O app.js ainda injeta um segundo bloco `.notification` em tempo de
   execucao, tambem com 10000 e depois do style.css na ordem do documento,
   entao aqui e preciso !important para vencer os dois.
   ========================================================================== */

.notification {
    z-index: 10050 !important;
}

@media (max-width: 768px) {
    /* No celular o modal vira bottom sheet; o aviso desce um pouco para nao
       encostar no topo da tela nem na area do notch. */
    .notification {
        top: calc(var(--safe-top) + 12px) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        font-size: 0.85rem;
    }
}


/* ==========================================================================
   2. MOBILE — ABA TEAMS SEM O BOTAO "FILTROS E CARTEIRA"
   ========================================================================== */

@media (max-width: 1024px) {
    body.teams-view #tab-finder .mobile-filters-trigger {
        display: none !important;
    }
}


/* ==========================================================================
   3. MOBILE — BOTOES DO CABECALHO DO TIME MAIS BAIXOS
   Morph, editar e excluir. No desktop continuam 32x32.
   ========================================================================== */

@media (max-width: 768px) {
    .btn-icon-action {
        width: 26px !important;
        height: 22px !important;
        min-height: 0 !important;
        border-radius: 5px !important;
        font-size: 0.7rem !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .header-actions { gap: 4px !important; }
}


/* ==========================================================================
   4. ICONE DE MORPH DOS TIMES
   O mesmo icone usado nos cards de axie, no lugar da varinha.
   ========================================================================== */

.morph-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    background: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
}

.btn-icon-action.morph .morph-icon-img {
    width: 17px;
    height: 17px;
}

.morph-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.morph-toggle-label .morph-icon-img {
    width: 15px;
    height: 15px;
}

@media (max-width: 768px) {
    .btn-icon-action.morph .morph-icon-img { width: 14px; height: 14px; }
    .morph-toggle-label .morph-icon-img { width: 13px; height: 13px; }
}


/* ==========================================================================
   5. MOBILE — BOTOES BUY / BUY NGT MAIORES NO LEADERBOARD

   O slot do axie tem 70x48px: nao cabe um botao legivel dentro dele. Com o
   slot ativo, o `overflow: hidden` e liberado e o painel de acoes cresce
   para fora do quadro, centralizado sobre o axie. A celula e a linha
   tambem precisam liberar o recorte, senao a tabela corta o excedente.
   ========================================================================== */

@media (max-width: 768px) {

    /* Libera o recorte apenas na linha que tem um axie selecionado */
    .leaderboard-row:has(.lb-fighter-preview.active) > td,
    .leaderboard-row:has(.lb-fighter-preview.active) .lb-team-container,
    .lb-fighter-slot:has(.lb-fighter-preview.active) {
        overflow: visible !important;
    }

    .lb-fighter-slot:has(.lb-fighter-preview.active) {
        z-index: 40 !important;
    }

    .lb-fighter-preview.active { overflow: visible !important; }

    .lb-fighter-preview.active .lb-action-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 112px;
        height: auto;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid var(--border-color);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
        z-index: 50;
    }

    .lb-fighter-preview.active .btn-buy-overlay {
        width: 100%;
        font-size: 0.66rem !important;
        padding: 7px 6px !important;
        border-radius: 7px !important;
        gap: 5px !important;
        line-height: 1.2 !important;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }

    .lb-fighter-preview.active .btn-buy-overlay i {
        font-size: 0.62rem !important;
    }
}