/* ==========================================================================
   GB Store · topo novo da página principal (só o menu e a primeira seção)
   Estilo inspirado no collapse: título condensado e pesado, menos caixas,
   produto em destaque sobre uma plataforma com brilho.
   As cores continuam vindo do tema atual (Halloween ou padrão).
   Carregado por último no index.html; não muda IDs nem nada do JS.
   ========================================================================== */
@font-face { font-family: "GB Condensed"; src: url("/public/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "GB Condensed"; src: url("/public/fonts/anton-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --v3-head: "GB Condensed", "Chakra Petch", Impact, sans-serif; --v3-border: rgba(255, 255, 255, .08); --v3-border-2: rgba(255, 255, 255, .13); }

/* ---------- Menu do topo: links soltos no centro, controles numa caixa só ---------- */
html body .topbar { background: rgba(9, 8, 11, .8) !important; border-bottom: 1px solid var(--v3-border) !important; }
html body .nav, html.gb-halloween body .nav { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; gap: 4px !important; }
html body .nav a { background: transparent !important; border-radius: 0 !important; color: var(--muted) !important; }
html body .nav a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--signal); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
html body .nav a:hover { color: var(--text) !important; }
html body .nav a:hover::after { opacity: 1; transform: none; }
html body .header-actions .shop-controls { border: 1px solid var(--v3-border-2) !important; border-radius: 12px !important; background: rgba(255, 255, 255, .02) !important; }

/* ---------- Primeira seção ---------- */
html body .gbh { background: radial-gradient(640px 460px at 74% 52%, var(--glow), transparent 70%), transparent !important; }
html body .gbh::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--v3-border-2) 20%, var(--v3-border-2) 80%, transparent); }

/* selo de cima mais discreto */
html body .gbh-pill { background: transparent !important; border: 1px solid var(--v3-border-2) !important; }

/* título: condensado e pesado; a última linha deixa de ser contorno */
html body .gbh-title {
  font-family: var(--v3-head) !important; font-weight: 400 !important;
  font-size: clamp(56px, calc(7vw / var(--site-zoom, 1)), 112px) !important;
  line-height: .94 !important; letter-spacing: .004em !important;
}
html body .gbh-title .gbh-line:last-child { -webkit-text-stroke: 0 !important; color: var(--text) !important; }
html body .gbh-title em { filter: none !important; }
html body .gbh-title .gbh-line:last-child { letter-spacing: .004em; }
html body .gbh-lead { max-width: 460px !important; color: var(--muted) !important; }

/* botões: pílulas; os secundários viram contorno simples */
html body .gbh-btn { border-radius: 999px !important; }
html body .gbh-btn-ghost { background: transparent !important; border: 1px solid var(--v3-border-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .gbh-btn-ghost:hover { border-color: var(--signal) !important; }

/* passos: sem caixas, uma linha com números e um traço que acompanha o passo ativo */
html body .gbh-steps { gap: 0 !important; margin-top: 30px !important; max-width: 540px !important; border-top: 1px solid var(--v3-border) !important; }
html body .gbh-steps li { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 16px 0 0 !important; min-height: 0 !important; }
html body .gbh-steps li::before { display: none !important; }
html body .gbh-steps li::after { top: -1px !important; bottom: auto !important; height: 2px !important; }
html body .gbh-steps li b { font-family: var(--v3-head) !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: .1em !important; }

/* números: condensados, sem divisórias */
html body .gbh-stats { gap: 34px !important; margin-top: 22px !important; }
html body .gbh-stats > div { padding: 0 !important; border: 0 !important; }
html body .gbh-stats strong { font-family: var(--v3-head) !important; font-weight: 400 !important; font-size: 34px !important; letter-spacing: .02em !important; }

/* ---------- Vitrine: produto em destaque sobre uma plataforma com brilho ---------- */
/* anéis viram uma plataforma deitada embaixo do card */
html body .gbh-ring { inset: auto 10% 9% !important; height: 30% !important; transform: perspective(700px) rotateX(68deg); border-radius: 50% !important; }
html body .gbh-ring::before { background: radial-gradient(closest-side, var(--glow), transparent 75%) !important; filter: blur(10px) !important; }
html body .gbh-ring i { border: 2px solid var(--signal) !important; opacity: .55; box-shadow: 0 0 30px var(--glow), inset 0 0 30px var(--glow); }
html body .gbh-ring i + i { inset: 16% !important; border: 1px dashed var(--teal, var(--signal)) !important; opacity: .5; }
/* um feixe de luz subindo da plataforma */
html body .gbh-stage::before { content: ""; position: absolute; left: 50%; bottom: 16%; width: 46%; height: 70%; transform: translateX(-50%); background: linear-gradient(0deg, var(--glow), transparent 80%); clip-path: polygon(18% 100%, 82% 100%, 100% 0, 0 0); opacity: .45; pointer-events: none; z-index: 0; }
/* card do meio maior e reto; os dos lados quase somem, só para dar profundidade */
html body .gbh-card { border-radius: 16px !important; background: linear-gradient(180deg, #121016, #08070a) !important; }
html body .gbh-card[data-pos="0"] { --s: 1.06 !important; border-color: var(--signal) !important; box-shadow: 0 50px 90px -30px #000, 0 0 0 1px var(--signal), 0 0 70px -18px var(--glow) !important; }
html body .gbh-card[data-pos="1"], html body .gbh-card[data-pos="-1"] { --s: .74 !important; --o: .35 !important; filter: brightness(.45) saturate(.6) blur(1px) !important; }
html body .gbh-card[data-pos="1"] { --x: 66% !important; } html body .gbh-card[data-pos="-1"] { --x: -66% !important; }
html body .gbh-card-media em { border-radius: 6px !important; }
html body .gbh-card-body strong { font-family: var(--v3-head) !important; font-weight: 400 !important; font-size: 26px !important; letter-spacing: .01em !important; }
html body .gbh-card-foot b { font-family: var(--v3-head) !important; font-weight: 400 !important; font-size: 24px !important; }
html body .gbh-card-cta { border-radius: 999px !important; }
/* avisos flutuantes: chips menores e retos */
html body .gbh-float { border-radius: 12px !important; background: rgba(12, 10, 15, .88) !important; border: 1px solid var(--v3-border-2) !important; }
html body .gbh-dots button { height: 4px !important; }

/* ---------- Faixa que corre embaixo: vira divisória fina com selo no meio ---------- */
html body .strip { position: relative; height: 1px; margin: 0 var(--page-x); padding: 0 !important; overflow: visible; border: 0 !important; background: transparent !important; }
html body .strip-track { display: none !important; }
html body .strip::after { content: ""; position: absolute; left: 50%; top: -4px; width: 30px; height: 9px; margin-left: -15px; border: 1px solid var(--signal); border-radius: 99px; background: #0a090c; box-shadow: 0 0 14px var(--glow); }

@media (max-width: 999px) {
  html body .gbh-title { font-size: clamp(50px, calc(15vw / var(--site-zoom, 1)), 72px) !important; }
  html body .gbh-stats { gap: 22px !important; }
}

/* ---------- Fundo contínuo: as seções deixam de ter fundo próprio sólido ----------
   Antes "Por que comprar", o catálogo e o suporte pintavam um preto liso por cima
   do fundo do site, e ele "quebrava" de repente entre uma seção e outra. */
html body :is(#confianca, #produtos, #suporte, #como-funciona, #faq) {
  background-color: transparent !important;
  background-image: none !important;
}

/* ---------- Barra de jogos: vira grade de quadrados (logo em cima, nome embaixo) ---------- */
html body .catalog-section > .gf-hint { display: none !important; }
html body #gameFilters.game-filters {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  margin: 8px 0 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  cursor: default !important;
}
html body #gameFilters.game-filters .game-filter {
  height: auto !important;
  aspect-ratio: 1 / 1;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 8px !important;
  border: 1.5px solid var(--v3-border-2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  transform: none !important;
}
html body #gameFilters.game-filters .game-filter .game-logo { width: 34px !important; height: 34px !important; object-fit: contain; }
html body #gameFilters.game-filters .game-filter .game-logo-wide { width: 46px !important; }
html body #gameFilters.game-filters .game-filter b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px !important; letter-spacing: .08em !important; text-align: center; }
html body #gameFilters.game-filters .game-filter:hover { border-color: rgba(255, 255, 255, .3) !important; color: var(--text) !important; }
html body #gameFilters.game-filters .game-filter.active { border-color: var(--signal) !important; color: var(--text) !important; background: linear-gradient(180deg, var(--signal-deep, rgba(255,255,255,.05)), transparent) !important; box-shadow: 0 0 0 1px var(--signal), 0 10px 30px -12px var(--glow) !important; }
html body #gameFilters.game-filters .game-filter.active b { color: var(--text) !important; }
html body #gameFilters.game-filters .game-filter.active .game-logo { filter: none !important; opacity: 1 !important; }
@media (max-width: 999px) {
  html body #gameFilters.game-filters { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; cursor: grab !important; gap: 10px; margin-inline: calc(var(--page-x) * -1) !important; padding: 2px var(--page-x) 8px !important; scrollbar-width: none; }
  html body #gameFilters.game-filters .game-filter { flex: 0 0 86px; }
  html body #gameFilters.game-filters .game-filter .game-logo { width: 28px !important; height: 28px !important; }
}

/* ---------- Canto direito do menu: carrinho e idioma soltos, botão de conta em contorno ---------- */
html body .header-actions { gap: 14px !important; }
html body .header-actions .shop-controls, html.gb-halloween body .header-actions .shop-controls {
  height: 40px !important; gap: 4px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .12) !important;
}
html body .header-actions .header-cart, html.gb-halloween body .header-actions .header-cart {
  width: 40px !important; height: 40px !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .03) !important; color: var(--text) !important;
}
html body .header-actions .header-cart:hover, html.gb-halloween body .header-actions .header-cart:hover { border-color: var(--signal) !important; color: var(--signal) !important; background: transparent !important; }
html body .header-actions .language-toggle, html.gb-halloween body .header-actions .language-toggle {
  height: 40px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--muted) !important;
}
html body .header-actions .language-toggle:hover, html.gb-halloween body .header-actions .language-toggle:hover,
html body .header-actions .language-toggle[aria-expanded="true"], html.gb-halloween body .header-actions .language-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .04) !important; color: var(--text) !important; }
html body .header-actions .language-flag { border-radius: 50% !important; overflow: hidden; width: 20px !important; height: 20px !important; }
html body .header-actions .language-flag img { width: 100% !important; height: 100% !important; object-fit: cover; }
html body .header-actions .login-button, html.gb-halloween body .header-actions .login-button {
  height: 40px !important; padding: 0 18px !important; border-radius: 10px !important;
  border: 1.5px solid var(--signal) !important; background: transparent !important; color: var(--signal) !important;
  box-shadow: none !important; filter: none !important;
}
html body .header-actions .login-button:hover, html.gb-halloween body .header-actions .login-button:hover { background: var(--signal) !important; color: #0b0311 !important; box-shadow: 0 10px 26px -12px var(--glow) !important; }

/* ---------- Conta logada: menu do perfil + sininho (página principal e dashboard) ---------- */
html body.gb-logged .header-actions .login-button { display: none !important; }
html body .gb-bell, html body .gb-acc { position: relative; }
html body .gb-bell[hidden], html body .gb-acc[hidden], html body .gb-pop[hidden] { display: none !important; }
html body .gb-bell-btn {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer;
  transition: border-color .2s, color .2s;
}
html body .gb-bell-btn:hover, html body .gb-bell-btn[aria-expanded="true"] { border-color: var(--signal); color: var(--signal); }
html body .gb-bell-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .gb-bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--signal); color: #0b0311; font: 800 10.5px/18px var(--font-body); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0a090c; }
html body .gb-acc-btn {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s;
}
html body .gb-acc-btn:hover, html body .gb-acc-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }
html body .gb-acc-av {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--signal) 18%, #0d1210); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  color: var(--text); font: 800 11.5px/1 var(--font-body); letter-spacing: .04em;
}
html body .gb-acc-av img { width: 100%; height: 100%; object-fit: cover; }
html body .gb-acc-av-lg { width: 44px; height: 44px; font-size: 14px; }
html body .gb-acc-txt { display: grid; gap: 3px; min-width: 0; }
html body .gb-acc-txt b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1 var(--font-body); }
html body .gb-acc-txt small { color: var(--muted); font: 600 11.5px/1 var(--font-body); }
html body .gb-acc-chev { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.8; transform: rotate(180deg); transition: transform .2s; }
html body .gb-acc-btn[aria-expanded="true"] .gb-acc-chev { transform: none; }
html body .gb-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; width: 280px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(13, 11, 16, .98);
  box-shadow: 0 30px 70px -20px #000; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: gbDrop .22s ease;
}
html body .gb-acc-menu { padding: 14px; }
html body .gb-acc-head { display: flex; align-items: center; gap: 12px; }
html body .gb-acc-head div { display: grid; gap: 4px; min-width: 0; }
html body .gb-acc-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.1 var(--font-body); }
html body .gb-acc-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
html body .gb-acc-badge { display: inline-flex; margin: 12px 0 12px; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--signal) 22%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); color: var(--signal); font: 700 12px/1 var(--font-body); }
html body .gb-acc-menu nav { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html body .gb-acc-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--font-body); text-align: left; cursor: pointer; }
html body .gb-acc-menu button:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
html body .gb-acc-menu button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .gb-acc-menu .gb-acc-out { margin-top: 8px; color: #ff7a82; }
html body .gb-acc-menu .gb-acc-out:hover { background: rgba(255, 92, 108, .1); color: #ff9aa1; }
html body .gb-bell-menu { width: 330px; overflow: hidden; }
html body .gb-bell-menu header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html body .gb-bell-menu header b { font: 700 14px/1 var(--font-body); }
html body .gb-bell-menu header small { color: var(--signal); font: 700 12px/1 var(--font-body); }
html body .gb-bell-list { max-height: 360px; overflow-y: auto; }
html body .gb-note { display: grid; gap: 5px; padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--text); text-decoration: none; }
html body a.gb-note:hover { background: rgba(255, 255, 255, .04); }
html body .gb-note.is-new { box-shadow: inset 3px 0 0 var(--signal); background: rgba(255, 255, 255, .02); }
html body .gb-note b { font: 700 13.5px/1.25 var(--font-body); }
html body .gb-note p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
html body .gb-note small { color: var(--dim, #6f6f78); font-size: 11px; }
html body .gb-note-empty { margin: 0; padding: 26px 16px; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 760px) {
  html body .gb-acc-txt { display: none; }
  html body .gb-acc-btn { padding: 0 8px 0 4px; height: 40px; gap: 6px; }
  html body .gb-pop { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; }
}

/* ---------- Conta logada v2: visual próprio (anel no avatar, cargo em selo, sino sem caixa) ---------- */
html body .gb-bell-btn { width: 40px; height: 40px; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--muted) !important; }
html body .gb-bell-btn:hover, html body .gb-bell-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .06) !important; color: var(--text) !important; }
html body .gb-bell-btn svg { width: 21px; height: 21px; }
html body .gb-bell-count { top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 16px; background: linear-gradient(135deg, var(--signal), var(--teal, var(--signal))); color: #04140a; box-shadow: 0 0 0 2px #0a090c, 0 0 10px color-mix(in srgb, var(--signal) 60%, transparent); }
html body .gb-acc-btn { height: 44px; gap: 10px; padding: 0 4px 0 0; border: 0 !important; border-radius: 99px !important; background: transparent !important; }
html body .gb-acc-btn:hover, html body .gb-acc-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .05) !important; }
html body .gb-acc-btn .gb-acc-av { width: 38px; height: 38px; border: 0; padding: 2px; background: conic-gradient(from 210deg, var(--signal), var(--teal, var(--signal)), var(--signal)); }
html body .gb-acc-btn .gb-acc-av > img, html body .gb-acc-btn .gb-acc-av { font-size: 12px; }
html body .gb-acc-btn .gb-acc-av img { border-radius: 50%; border: 2px solid #0a090c; }
html body .gb-acc-txt { grid-auto-flow: row; gap: 4px; }
html body .gb-acc-txt b { font-size: 13.5px; }
html body .gb-acc-txt small { justify-self: start; padding: 2px 7px; border-radius: 5px; background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--signal) !important; font: 800 9.5px/1.3 var(--font-body) !important; letter-spacing: .1em; text-transform: uppercase; }
html body .gb-acc-chev { display: none; }
/* menu aberto: faixa colorida no topo com o avatar sobreposto */
html body .gb-acc-menu { padding: 0 !important; overflow: hidden; }
html body .gb-acc-menu::before { content: ""; display: block; height: 54px; background: linear-gradient(120deg, color-mix(in srgb, var(--signal) 55%, transparent), color-mix(in srgb, var(--teal, var(--signal)) 45%, transparent)), radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.2px) 0 0 / 12px 12px; }
html body .gb-acc-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: -28px; padding: 0 16px; }
html body .gb-acc-head .gb-acc-av-lg { width: 56px; height: 56px; border: 3px solid #0d0b10; box-shadow: 0 8px 20px -6px #000; font-size: 16px; }
html body .gb-acc-badge { margin: 10px 16px 12px; border-radius: 6px; background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: color-mix(in srgb, var(--signal) 35%, transparent); color: var(--signal); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
html body .gb-acc-menu nav { margin: 0 8px; border: 0 !important; padding: 0 0 6px; }
html body .gb-acc-menu nav button { padding: 9px 10px; }
html body .gb-acc-menu nav button svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
html body .gb-acc-menu nav button:hover svg { background: color-mix(in srgb, var(--signal) 15%, transparent); color: var(--signal); }
html body .gb-acc-menu .gb-acc-out { width: auto; margin: 0; padding: 13px 18px; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .07); justify-content: center; }

/* ---------- Barra de jogos: ícones sempre em cinza (também ao passar o mouse e no selecionado) ---------- */
html body #gameFilters .game-filter .game-logo,
html body #gameFilters .game-filter:hover .game-logo,
html body #gameFilters .game-filter.active .game-logo,
html body #gameFilters .game-filter .game-logo.game-logo-official,
html body #gameFilters .game-filter:hover .game-logo.game-logo-official,
html body #gameFilters .game-filter.active .game-logo.game-logo-official {
  filter: grayscale(1) brightness(1.15) contrast(1.05) !important;
  opacity: .8 !important;
}