.bc-title { text-align: center; color: #ffffff; margin-bottom: 16px; } .bc-intro { margin-bottom: 12px; text-align: center; } .bc-world-form { margin-bottom: 12px; } /* Table */ .bc-table th { white-space: nowrap; } .bc-sortable { cursor: pointer; } .bc-td-sort, .bc-price { text-align: center; } .bc-skills { font-size: 12px; line-height: 1.4; vertical-align: middle; } .bc-skills-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 1px; min-width: 120px; } .bc-skill { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; } .bc-skill-key { color: var(--color-text-muted); } .bc-skill-val { font-variant-numeric: tabular-nums; color: var(--color-text); } .bc-skill--primary .bc-skill-key, .bc-skill--primary .bc-skill-val { color: var(--color-accent-soft); font-weight: 600; text-shadow: 0 0 4px rgba(255, 200, 110, 0.35); } .bc-buy-cell { text-align: center; white-space: nowrap; } .bc-login-hint { font-size: 12px; color: #8af; } /* Name cell with outfit tooltip */ .bc-name-cell { vertical-align: top; width: 80px; } .bc-tooltip-wrap { position: relative; display: inline-block; } .bc-char-name { text-align: center; margin-bottom: 4px; font-size: 12px; } /* Subtitle "Vocation · Level" exibido SOMENTE em mobile (substitui as duas colunas Voc/Level que sao escondidas pra liberar espaco horizontal). */ .bc-name-meta { display: none; text-align: center; font-size: 10px; color: var(--color-text-muted); margin-bottom: 4px; } .bc-outfit-container { width: 64px; height: 64px; background-repeat: no-repeat; background-position: right bottom; position: relative; margin: 0 auto; cursor: pointer; } .bc-skull-img { position: absolute; right: 0; top: 8px; } /* Desktop: nao mostrar nenhum outline em click/focus na outfit. Click nao deve ter feedback visual (a popup aparece via :hover, sai do hover fecha). */ @media (hover: hover) { .bc-outfit-container:focus, .bc-outfit-container:focus-visible { outline: none; } } /* Touch (sem hover real): outline em focus-visible pra teclado a11y. */ @media (hover: none) { .bc-outfit-container:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 2px; } } /* Tooltip — abre via :hover (desktop), :focus-within (teclado) ou .is-open (toggle JS pra touch devices). */ .bc-tooltip-box { display: none; position: absolute; left: 70px; top: 0; z-index: 100; width: max-content; max-width: 280px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 8px; font-size: 12px; line-height: 1.6; } /* Desktop (mouse): hover abre, sai do hover fecha. Sem comportamento de click. */ .bc-tooltip-wrap:hover .bc-tooltip-box { display: block; } /* Touch devices (sem hover real): focus-within (keyboard a11y) e .is-open (toggle JS) tomam o lugar do :hover. Gating evita que click em desktop foque a outfit e segure a popup aberta. Em mobile a popup eh portalizada pro via JS (escapar do stacking context do #content_text z:1) — entao .bc-tooltip-box.is-open tambem precisa funcionar standalone (sem ser descendente do wrap). */ @media (hover: none) { .bc-tooltip-wrap:focus-within .bc-tooltip-box, .bc-tooltip-wrap.is-open .bc-tooltip-box, .bc-tooltip-box.is-open { display: block; } } /* Speech-bubble arrow no desktop — a popup esta a 70px da outfit (left:70px), entao a flecha aponta pra ESQUERDA, na altura do meio-vertical da outfit (~32px). Tecnica: dois triangles CSS sobrepostos (::before = border, ::after = fill). */ .bc-tooltip-box::before, .bc-tooltip-box::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; } .bc-tooltip-box::before { top: 24px; left: -8px; border-width: 7px 8px 7px 0; border-color: transparent var(--color-border) transparent transparent; } .bc-tooltip-box::after { top: 25px; left: -7px; border-width: 6px 7px 6px 0; border-color: transparent var(--color-surface) transparent transparent; } /* Outfit-fonte: glow dourado quando a popup esta aberta (visualmente liga o modal mobile a outfit que disparou; em desktop reforca o anchor da flecha). */ .bc-tooltip-wrap.is-open .bc-outfit-container { outline: 2px solid var(--color-accent-soft); outline-offset: 2px; box-shadow: 0 0 10px rgba(255, 200, 110, 0.5); } .bc-tooltip-section { margin: 6px 0 2px; } /* * Tabela de slots de equipamento — réplica fiel do HTML do código original * pré-refactor. A estrutura visual vem do HTML inline no template * (buychar/index.php), mas precisamos de 2 overrides CSS pra anular regras * herdadas do site refatorado: * * 1) `.table-standard td` em components.css aplica `padding: 6px` E * `border: 1px solid #000000`. Como a tabela EXTERNA `#tableChars` * tem `.table-standard`, essas regras cascateiam para os tds da * tabela de slots ANINHADA. Zeramos ambos só nos tds da tabela de * slots (`.bc-slots-table td`) — a tabela externa preserva as bordas. * * 2) `#textnew_content_inside img { max-width: 100%; height: auto }` em * layout.css (regra universal para prints de troubleshooting/downloads) * redimensiona qualquer dentro do conteúdo. Forçamos 32×32 com * selector mais específico + `max-width: none`. */ .bc-slots-table td { padding: 0; border: 0; } #textnew_content_inside .bc-slot-img { width: 32px; height: 32px; max-width: none; border: 0; image-rendering: pixelated; } .bc-accs { line-height: 1.6; } .bc-yes { color: #6f6; } .bc-no { color: #f66; } /* Buttons */ .bc-btn { display: inline-block; padding: 4px 10px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); cursor: pointer; font-size: 12px; } .bc-btn-primary { border-color: var(--color-primary); color: var(--color-primary); } /* Mobile: aperta cells e celula de skills pra evitar overflow horizontal sem recorrer a scroll arrastavel (proibido por feedback_mobile_fixes). */ @media (max-width: 680px) { .bc-table th, .bc-table td { padding: 4px 3px !important; } .bc-skills { font-size: 11px; } .bc-skills-grid { column-gap: 6px; min-width: 96px; } .bc-name-cell { width: auto; } /* Mobile: esconder colunas Vocation e Level (info movida pra subtitle dentro da Name cell). Libera ~90px pra coluna Buy aparecer sem overflow. */ .bc-voc-cell, .bc-lvl-cell { display: none; } .bc-name-meta { display: block; } .bc-buy-cell { white-space: normal; } .bc-btn { padding: 3px 6px; font-size: 11px; } /* Mobile: cursor pointer na celula inteira pra sinalizar tap-zone alargado (handler do tap esta na .bc-name-cell em buychar.js). */ .bc-name-cell { cursor: pointer; } /* Tooltip mobile: vira modal centralizado (position:fixed) — sempre visivel, indiferente da posicao da outfit dentro da celula. Click outside fecha (handler em buychar.js). z-index alto pra ficar acima da mobile navbar (z:1000) e da topbar (z:1002). */ .bc-tooltip-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 86vw; max-height: 80vh; overflow-y: auto; z-index: 9000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } /* Flecha some no mobile — modal centralizado nao anchora visualmente a outfit. O glow no .bc-outfit-container faz esse papel. */ .bc-tooltip-box::before, .bc-tooltip-box::after { display: none; } } @media (max-width: 480px) { .bc-skills { font-size: 10px; } .bc-skills-grid { column-gap: 4px; min-width: 84px; } .bc-table th { font-size: 11px; } }