/* Estilos específicos da Dex Tracking (dex-paldea.html) — separado do style.css principal de propósito (arquivo já grande, ver auditoria de organização de código). Reusa as variáveis de cor (--header-purple, --active-green, --stat-bg, --pill-bg etc.) definidas em style.css, então esse arquivo sempre carrega DEPOIS dele. O conteúdo inteiro vive dentro de um "dispositivo" (.dex-device) desenhado pra lembrar uma Pokédex física de verdade: casco vermelho brilhante, lente azul, luzes indicadoras, e uma "tela" escura (.dex-device-screen) onde o grid de Pokémon vira dado digital -- silhueta clara (não capturado) até cor cheia (capturado), como se estivesse sendo escaneado. Os elementos compartilhados com o resto do site (.search-input, .sort-btn, .empty-state etc., de style.css) só ganham um tema escuro por escopo (".dex-device-screen .search-input") -- a regra original em style.css nunca é tocada, então index.html/tags.html continuam exatamente como estavam. */ /* Fundo evocando a região ativa (Paldea, Kitakami ou Blueberry) no lugar do padrão de triângulos do resto do site -- só nesta página (sobrescreve body::before de style.css só aqui, por escopo; as outras páginas continuam com o fundo padrão). A classe no troca junto com a região selecionada. Kitakami/Blueberry usam gradiente puro (evocando a paisagem); Paldea usa a arte oficial de Scarlet/Violet (Koraidon/ Miraidon) desfocada e escurecida, com um degradê por cima só pra garantir contraste do conteúdo. */ body::before { background: radial-gradient(140% 45% at 20% 100%, #5f7a3d 0%, #5f7a3d 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #d68a4a 0%, #d68a4a 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #82974c 0%, #82974c 45%, transparent 48%), linear-gradient(180deg, #fde3a7 0%, #fbc978 32%, #f4a35f 58%, #e8834f 100%); background-repeat: no-repeat; background-size: cover; } body.dex-bg-paldea::before { background: linear-gradient(180deg, rgba(30, 10, 20, 0.35) 0%, rgba(20, 8, 30, 0.55) 100%), url("../img/paldea-sv-bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* Kitakami: aldeia rural de outono (Máscara Turquesa/Ogerpon) -- terra e folhagem em tons de bordo/vermelho, montanhas verde-azuladas ao fundo, céu de outono enevoado. */ body.dex-bg-kitakami::before { background: radial-gradient(140% 45% at 20% 100%, #4a3324 0%, #4a3324 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #7a2f2f 0%, #7a2f2f 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #2f5c4a 0%, #2f5c4a 45%, transparent 48%), linear-gradient(180deg, #f0d9c0 0%, #e3b98f 32%, #c98a6b 58%, #8a5a52 100%); background-repeat: no-repeat; background-size: cover; } /* Blueberry: academia submarina (Disco Índigo) -- profundezas azul-índigo com brilho ciano, sem colinas (é uma cúpula debaixo d'água). */ body.dex-bg-blueberry::before { background: radial-gradient(140% 45% at 20% 100%, #0d3b4f 0%, #0d3b4f 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #1b5c73 0%, #1b5c73 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #114a63 0%, #114a63 45%, transparent 48%), linear-gradient(180deg, #bfe9f0 0%, #7cc9dc 32%, #3a8fae 58%, #1c4f66 100%); background-repeat: no-repeat; background-size: cover; } /* Galar: campo britânico (Sword/Shield) -- colinas verdes onduladas sob céu nublado, mesma inspiração de paisagem real que o jogo usa. */ body.dex-bg-galar::before { background: radial-gradient(140% 45% at 20% 100%, #2f5c34 0%, #2f5c34 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #3d6b3f 0%, #3d6b3f 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #4f7a48 0%, #4f7a48 45%, transparent 48%), linear-gradient(180deg, #d8e6df 0%, #b7cfc0 32%, #8fae94 58%, #5d7d5f 100%); background-repeat: no-repeat; background-size: cover; } /* Isle of Armor: ilha tropical (Okinawa) -- verde de floresta e areia sob céu de verão. */ body.dex-bg-isle-of-armor::before { background: radial-gradient(140% 45% at 20% 100%, #1f6b4a 0%, #1f6b4a 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #2f8a6a 0%, #2f8a6a 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #e0c185 0%, #e0c185 45%, transparent 48%), linear-gradient(180deg, #bfe8e0 0%, #8fd0c4 32%, #4fae9a 58%, #1f6e5c 100%); background-repeat: no-repeat; background-size: cover; } /* Crown Tundra: tundra nevada -- montanhas geladas azul-acinzentadas sob céu claro de inverno. */ body.dex-bg-crown-tundra::before { background: radial-gradient(140% 45% at 20% 100%, #3a4a5c 0%, #3a4a5c 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #5c7690 0%, #5c7690 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #dce8f0 0%, #dce8f0 45%, transparent 48%), linear-gradient(180deg, #eef6fb 0%, #cfe3ee 32%, #9db8cc 58%, #5c7690 100%); background-repeat: no-repeat; background-size: cover; } /* Lumiose: cidade grande à noite (Torre Prisma ao fundo) -- azul-aço e dourado das luzes urbanas. */ body.dex-bg-lumiose::before { background: radial-gradient(140% 45% at 20% 100%, #1c3b5c 0%, #1c3b5c 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #2f5f8f 0%, #2f5f8f 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #e8c878 0%, #e8c878 45%, transparent 48%), linear-gradient(180deg, #0e1a2c 0%, #1c3452 32%, #2f5478 58%, #1c3b5c 100%); background-repeat: no-repeat; background-size: cover; } /* Hyperspace: dimensão distorcida -- roxo profundo com fendas verdes, no mesmo espírito visual da fenda do logo de Legends Z-A. */ body.dex-bg-hyperspace::before { background: radial-gradient(140% 45% at 20% 100%, #3a1f5c 0%, #3a1f5c 55%, transparent 58%), radial-gradient(120% 38% at 78% 100%, #5b2d91 0%, #5b2d91 50%, transparent 53%), radial-gradient(160% 30% at 50% 100%, #7be0a8 0%, #7be0a8 45%, transparent 48%), linear-gradient(180deg, #150c26 0%, #2a1748 32%, #4a2670 58%, #3a1f5c 100%); background-repeat: no-repeat; background-size: cover; } .dex-device { max-width: 1100px; margin: 4px auto 0; padding: 18px 18px 0; border-radius: 30px 30px 18px 18px; background: linear-gradient(165deg, #ff4a3d 0%, #e0291b 45%, #a81810 100%); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 14px rgba(0, 0, 0, 0.25); position: relative; } /* Friso de "dobradiça" à esquerda, lembrando o corpo de duas partes de uma Pokédex clássica -- só um detalhe decorativo, não estrutural. */ .dex-device-hinge { position: absolute; left: 0; top: 14px; bottom: 14px; width: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); } .dex-device-top { display: flex; align-items: center; gap: 14px; padding: 4px 6px 16px; } /* Lente flat de propósito -- sem gradiente esférico, sem glow, sem pulso. Só a cor sólida + o anel de borda, pra ficar mais gráfico/minimalista em vez de "objeto 3D brilhando". */ .dex-device-lens { position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: #4fc3ff; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); } .dex-device-lens-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); } .dex-device-lens-highlight { position: absolute; top: 22%; left: 26%; width: 20%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.65); } .dex-device-lights { display: flex; gap: 8px; } .dex-light { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.18); } .dex-light-blue { background: #3fa9ff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 8px 1px #3fa9ff; } .dex-light-yellow { background: #ffd23f; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 8px 1px #ffd23f; } .dex-light-green { background: #4ade80; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 8px 1px #4ade80; } .dex-device-screen { background: linear-gradient(165deg, #101a30 0%, #0b1120 55%, #05070f 100%); border-radius: 20px; padding: 18px 16px 22px; box-shadow: inset 0 0 0 2px rgba(94, 213, 255, 0.18), inset 0 10px 24px rgba(0, 0, 0, 0.55); } .dex-device-grille { display: flex; justify-content: center; gap: 6px; padding: 12px 0 14px; } .dex-device-grille span { width: 26px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.25); } .dex-intro { padding: 4px 4px 0; } .dex-intro h2 { color: #f2fbff; font-size: 1.25rem; margin: 4px 0 6px; text-shadow: 0 0 10px rgba(94, 213, 255, 0.35); } /* ---- Nav entre as 3 páginas de região (dex-paldea/kitakami/blueberry.html) ---- Substituiu o seletor em tela cheia: agora cada região é sua própria página (F5 não perde o lugar), e essa barra é só a navegação entre elas. */ .dex-region-nav { display: flex; gap: 8px; margin-bottom: 12px; } .dex-region-nav-link { font-family: inherit; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.07); color: #cfe4f7; border: 1px solid rgba(94, 213, 255, 0.25); border-radius: 999px; padding: 5px 12px 5px 8px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .dex-region-nav-link:hover { border-color: #5ed5ff; color: #eafcff; } .dex-region-nav-link.active { background: var(--active-green); border-color: var(--active-green); color: #1a1f0a; } /* .dex-region-mini-device/.dex-region-mini-lens moraram pra style.css -- o dock (assets/css/style.css) precisa deles em index.html/tags.html, páginas que não carregam este arquivo. */ .dex-subtitle { color: #a9c1de; font-size: 0.86rem; max-width: 62ch; margin: 0 0 16px; } .dex-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .dex-progress-bar { flex: 1; height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } .dex-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-grad-a), var(--green-grad-b)); border-radius: 999px; transition: width 0.3s ease; box-shadow: 0 0 8px rgba(194, 236, 32, 0.6); } .dex-progress-label { color: #eafcff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; } .dex-sync { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .dex-sync-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(94, 213, 255, 0.25); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; } .dex-sync-panel[hidden] { display: none; } .dex-sync-textarea { width: 100%; resize: vertical; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; background: rgba(0, 0, 0, 0.35); color: #eafcff; border: 2px solid rgba(94, 213, 255, 0.25); border-radius: 10px; padding: 10px 12px; box-sizing: border-box; } .dex-sync-textarea:focus { outline: none; border-color: var(--active-green); } .dex-sync-actions { display: flex; gap: 8px; margin-top: 10px; } .dex-sync-msg { color: #eafcff; font-size: 0.8rem; font-weight: 600; margin: 8px 0 0; min-height: 1em; } .dex-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid rgba(94, 213, 255, 0.15); } .dex-tab { font-family: inherit; font-size: 0.82rem; font-weight: 700; background: transparent; border: none; border-bottom: 2px solid transparent; color: #7891ad; padding: 8px 4px; cursor: pointer; margin-right: 14px; } .dex-tab:hover { color: #cfe4f7; } .dex-tab.active { color: #eafcff; border-bottom-color: var(--active-green); } /* ---- Tema escuro pros componentes compartilhados de style.css ---- */ .dex-device-screen .search-input { background: rgba(255, 255, 255, 0.06); color: #eafcff; box-shadow: inset 0 0 0 2px rgba(94, 213, 255, 0.18); } .dex-device-screen .search-input::placeholder { color: #7891ad; } .dex-device-screen .search-input:focus { border-color: #5ed5ff; } /* Os filtros (Todos/Capturados/Faltando/Shiny) viram uma única pílula segmentada, centralizada, igual ao mesmo tratamento aplicado na Living Dex -- em vez de 4 botões soltos alinhados à esquerda. */ .dex-device-screen .sort-bar { align-self: center; flex-wrap: nowrap; gap: 2px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(94, 213, 255, 0.18); border-radius: 999px; padding: 3px; } .dex-device-screen .sort-btn { background: transparent; border: 2px solid transparent; color: #cfe4f7; padding: 6px 14px; } .dex-device-screen .sort-btn:hover { border-color: transparent; color: #eafcff; } .dex-device-screen .sort-btn.active { background: var(--active-green); border-color: var(--active-green); color: #1a1f0a; } .dex-device-screen .results-bar { color: #7891ad; } .dex-device-screen .empty-state { color: #a9c1de; } .dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; } .dex-card { position: relative; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(94, 213, 255, 0.12); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; transition: border-color 0.15s, background 0.15s; } .dex-card[hidden] { display: none; } .dex-card.is-caught { border-color: var(--active-green); background: rgba(194, 236, 32, 0.06); } .dex-card-num { align-self: flex-start; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; color: #5ed5ff; font-weight: 700; } .dex-card-sprite-wrap { position: relative; width: 84px; height: 84px; cursor: pointer; } /* Não capturado: silhueta clara (como um contorno escaneado, sem dado completo ainda) -- o oposto do card antigo (silhueta ESCURA), porque aqui o fundo do card é escuro, e uma silhueta preta em cima de um fundo quase preto simplesmente sumiria. */ .dex-card-sprite { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) opacity(0.28); transition: filter 0.15s; } .dex-card.is-caught .dex-card-sprite { filter: none; } .dex-card-shiny-badge { position: absolute; top: -2px; right: -2px; font-size: 0.9rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); display: none; } .dex-card.is-shiny .dex-card-shiny-badge { display: block; } .dex-card-lock-badge { position: absolute; top: -2px; left: -2px; font-size: 0.8rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); cursor: help; } .dex-card-name { color: #7891ad; font-weight: 700; font-size: 0.82rem; line-height: 1.2; } .dex-card.is-caught .dex-card-name { color: #f2fbff; } .dex-card-version-icon { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; margin-left: 4px; border-radius: 3px; } .dex-card-toggles { display: flex; gap: 6px; margin-top: 2px; } .dex-toggle { font-family: inherit; font-size: 0.7rem; font-weight: 700; border: 2px solid transparent; background: rgba(255, 255, 255, 0.08); color: #cfe4f7; border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .dex-toggle:hover { border-color: #5ed5ff; } .dex-toggle-normal { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; } .dex-toggle-normal img { width: 16px; height: 16px; display: block; } .dex-toggle-normal img[hidden] { display: none; } .dex-toggle[aria-pressed="true"] { background: var(--active-green); border-color: var(--active-green); color: #1a1f0a; } .dex-toggle-shiny[aria-pressed="true"] { background: linear-gradient(110deg, #ffd76a, #ffb347); border-color: #ffb347; color: #4a3200; } /* Marca: dentro do sprite, canto inferior esquerdo. Sem marca ainda = círculo tracejado vazio (convite discreto pra clicar); com marca = sprite oficial dela. */ /* Pino de localização: canto inferior direito do sprite (o único canto ainda livre -- shiny fica no superior direito, cadeado no superior esquerdo, marca no inferior esquerdo). Sempre visível, não muda de estado (não é um toggle de progresso). */ .dex-location-badge { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1.5px solid rgba(94, 213, 255, 0.4); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; line-height: 1; } .dex-location-badge:hover { border-color: #5ed5ff; } .dex-mark-badge { position: absolute; bottom: -4px; left: -4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1.5px dashed rgba(94, 213, 255, 0.4); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .dex-mark-badge.has-value { border-style: solid; border-color: var(--active-green); background: #0b1120; } .dex-mark-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dex-mark-badge[data-extra]:not([data-extra=""])::after { content: attr(data-extra); position: absolute; bottom: -4px; right: -4px; background: var(--active-green); color: #1a1f0a; font-size: 0.5rem; font-weight: 700; border-radius: 999px; padding: 1px 3px; line-height: 1; } /* Fita: "pendurada" saindo pela borda direita do card, como uma fita de verdade presa nele. */ .dex-ribbon-badge { position: absolute; top: 10px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1.5px dashed rgba(94, 213, 255, 0.4); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .dex-ribbon-badge.has-value { border-style: solid; border-color: #ffb347; background: #0b1120; } .dex-ribbon-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dex-ribbon-badge[data-extra]:not([data-extra=""])::after { content: attr(data-extra); position: absolute; bottom: -4px; right: -4px; background: #ffb347; color: #4a3200; font-size: 0.5rem; font-weight: 700; border-radius: 999px; padding: 1px 3px; line-height: 1; } /* ---- Painel de detalhes (marcas/fitas) por espécie ---- */ .dex-modal-overlay { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.72); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .dex-modal-overlay[hidden] { display: none; } .dex-modal { position: relative; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; background: linear-gradient(165deg, #101a30 0%, #0b1120 55%, #05070f 100%); border: 1px solid rgba(94, 213, 255, 0.25); border-radius: 18px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .dex-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #7891ad; font-size: 1.4rem; line-height: 1; cursor: pointer; } .dex-modal-close:hover { color: #eafcff; } .dex-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .dex-modal-sprite { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; } .dex-modal-name { color: #f2fbff; font-size: 1.05rem; margin: 2px 0 0; } .dex-modal-kind { color: #a9c1de; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; } .dex-modal-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } .dex-modal-icon-grid.dex-modal-text-mode { display: block; } .dex-location-text { color: #cfe4f7; font-size: 0.85rem; line-height: 1.5; margin: 0 0 12px; } .dex-location-map-wrap { position: relative; margin: 0 0 12px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(94, 213, 255, 0.2); } .dex-location-map { display: block; width: 100%; } .dex-location-highlight { position: absolute; background: rgba(94, 213, 255, 0.35); border: 2px solid rgba(94, 213, 255, 0.9); box-shadow: 0 0 8px rgba(94, 213, 255, 0.6); pointer-events: none; } .dex-location-guide-link { display: inline-block; color: #5ed5ff; font-size: 0.75rem; font-weight: 600; } .dex-location-guide-link:hover { color: #eafcff; } .dex-evo-section-label { color: #a9c1de; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px; } .dex-evo-section-label:first-child { margin-top: 0; } .dex-evo-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(94, 213, 255, 0.15); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .dex-evo-sprite { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .dex-evo-name { color: #f2fbff; font-weight: 700; font-size: 0.82rem; } .dex-evo-condition { color: #cfe4f7; font-size: 0.72rem; margin-top: 2px; } .dex-evo-empty { color: rgba(242, 251, 255, 0.45); font-size: 0.85rem; font-style: italic; text-align: center; padding: 12px 0; } .dex-modal-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; border-radius: 10px; padding: 8px 4px; cursor: pointer; font-family: inherit; } .dex-modal-icon-btn:hover { border-color: rgba(94, 213, 255, 0.4); } .dex-modal-icon-btn img { width: 36px; height: 36px; object-fit: contain; } .dex-modal-icon-btn span { color: #cfe4f7; font-size: 0.62rem; font-weight: 600; line-height: 1.15; text-align: center; } .dex-modal-icon-btn[aria-pressed="true"] { background: rgba(194, 236, 32, 0.12); border-color: var(--active-green); } .dex-modal-icon-btn[aria-pressed="true"] span { color: #f2fbff; } /* ---- Abas Fitas / Marcas ---- */ .dex-ribbons-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .dex-badge-row { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(94, 213, 255, 0.15); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; } .dex-badge-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .dex-badge-name { color: #f2fbff; font-weight: 700; font-size: 0.78rem; flex-shrink: 0; min-width: 150px; } .dex-badge-species { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 160px; } .dex-badge-species-chip { color: #1a1f0a; background: var(--active-green); font-weight: 700; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .dex-badge-empty { color: rgba(242, 251, 255, 0.45); font-size: 0.72rem; font-style: italic; } @media (max-width: 480px) { .dex-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .dex-card-sprite-wrap { width: 64px; height: 64px; } .dex-device { border-radius: 22px 22px 14px 14px; padding: 14px 14px 0; } .dex-device-screen { padding: 14px 12px 18px; border-radius: 16px; } }