/* 🧨 GLASS v5 — os EFEITOS de identidade do Bomb Idle Site.
   D1 do DS v2 (25/08/2026): os tokens, botões, badges/pills e utils que moravam aqui
   MIGRARAM pro ds.css (que carrega antes em toda página). Este arquivo ficou com o que é
   identidade de EFEITO: atmosfera do fundo, pavio, vidro, painel pixel, carta v2 por
   raridade, marquee, shimmer, px-tear e o banner de manutenção.
   ⚠️ Nenhum token nasce aqui — tudo vem do ds.css. Nenhum seletor .btn vive aqui. */

/* fundo: noite do VOID — brasa de ouro subindo do chão + rasgo de ametista no alto
   (retinta D1: o âmbar saiu do chrome; o fogo continua no jogo, não no site) */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(70vw 46vh at 50% 108%, color-mix(in srgb, var(--au-600) 22%, transparent), transparent 62%),
    radial-gradient(46vw 40vh at 88% -6%, color-mix(in srgb, var(--am-400) 20%, transparent), transparent 60%),
    radial-gradient(34vw 30vh at 8% 12%, color-mix(in srgb, var(--cy-400) 8%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 45%);
  pointer-events: none;
  animation: nebula 16s ease-in-out infinite alternate;
}
@keyframes nebula { 0% { opacity: .82; } 100% { opacity: 1; } }
/* scanlines CRT sutis — textura de fliperama */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
}
#fx-embers { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* 🧨 PAVIO GLOBAL — linha na borda esquerda com faísca que segue o scroll (JS seta --fuse-p 0..1)
   O pavio é FOGO: ele continua âmbar de propósito (--ember), é a exceção viva da retinta. */
#fuse { position: fixed; left: 16px; top: 0; bottom: 0; width: 3px; z-index: 5; pointer-events: none; --fuse-p: 0; }
#fuse .fuse-rope {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, #3a3142 0 7px, #2a2331 7px 12px);
  border-radius: 2px; opacity: .8;
}
/* trecho já queimado (acima da faísca) */
#fuse .fuse-burnt {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fuse-p) * 100%);
  background: repeating-linear-gradient(180deg, #17121c 0 7px, #0d0a12 7px 12px);
  border-radius: 2px; transition: height .15s linear;
}
#fuse .fuse-spark {
  position: absolute; left: 50%; top: calc(var(--fuse-p) * 100%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--warn) 40%, var(--ember-2) 75%, transparent 100%);
  box-shadow: 0 0 14px 3px rgba(255,178,71,.85), 0 0 34px 10px rgba(255,106,0,.4);
  animation: spark-flick .14s steps(2) infinite; transition: top .15s linear;
}
@keyframes spark-flick { 50% { transform: scale(1.35); filter: hue-rotate(-8deg); } }
@media (max-width: 1100px) { #fuse { display: none; } }

/* ---------- gradientes de texto/marca (retinta D1: fogo -> ouro do kit) ---------- */
.grad-text { background: linear-gradient(100deg, #ffe08a 0%, var(--au-400) 55%, var(--au-600) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-gold { background: linear-gradient(135deg, #ffe08a, var(--au-400) 50%, var(--au-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* título com brilho varrendo — ouro sobre o void */
.shine-text {
  background: linear-gradient(110deg, #ffe08a 0%, var(--au-400) 30%, #fff6da 46%, var(--au-400) 58%, var(--au-600) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine-sweep 5.5s linear infinite;
}
@keyframes shine-sweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* rótulo HUD em fonte pixel — SÓ conteúdo ASCII (números, HP, #rank, timer).
   O piso de 12px vale até aqui: em contexto pequeno a pixel não desce do legível. */
.hud-num { font-family: var(--font-px); font-size: max(.78em, 12px); letter-spacing: .04em; }

/* ---------- GLASS (retinta ametista; mesma API) ---------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(255,203,69,.05), rgba(255,255,255,.015) 55%), rgba(27,15,51,.5);
  border: 1px solid rgba(165,107,255,.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
}
.glass::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255,236,200,.07) 46%, rgba(255,255,255,.02) 54%, transparent 74%);
  opacity: .7;
}
.glass-glow { --mx: 50%; --my: 50%; }
.glass-glow::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,203,69,.14), transparent 55%),
    radial-gradient(220px circle at var(--mx) var(--my), rgba(255,236,200,.07), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.glass-glow:hover::before { opacity: 1; }
.glass > * { position: relative; z-index: 1; }

/* ---------- PAINEL PIXEL-CORNER — cantos em degraus de 8px ---------- */
.panel-px {
  position: relative;
  background: linear-gradient(165deg, rgba(255,203,69,.06), transparent 40%), var(--panel);
  border: none; border-radius: 0;
  clip-path: polygon(
    0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0,
    calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px,
    100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%,
    16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px)
  );
}
/* borda interna quente do painel pixel */
.panel-px::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 2px rgba(255,203,69,.14), inset 0 2px 0 2px rgba(255,236,200,.05);
}
.panel-px > * { position: relative; z-index: 1; }
/* wrapper que devolve a sombra clipada */
.px-shadow { filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }

/* pulse genérico (o .dot do ds.css tem o dele; este fica pra quem já referenciava `pulse`,
   ex.: o indicador de online da wiki) */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ============================================================
   CARTA v2 — tilt 3D + specular + moldura/aura por raridade (API mantida)
   ============================================================ */
.card {
  position: relative; display: block; cursor: pointer;
  --rc: var(--common); --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  perspective: 800px;
  animation: card-in .55s cubic-bezier(.22,.9,.3,1.2) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }

.card-aura {
  position: absolute; inset: -3px; border-radius: 14px; pointer-events: none;
  background: var(--rc); opacity: 0; filter: blur(16px);
  transition: opacity .45s;
}
.card:hover .card-aura { opacity: .55; }
.card-aura.holo-gradient { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ffcb45); background-size: 300% 300%; }

.holo-gradient { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ffcb45); background-size: 300% 300%; animation: holo-shift 4s ease infinite; }
@keyframes holo-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.card-inner {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--rc) 35%, rgba(255,255,255,.12));
  background: var(--panel);
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .25s ease-out, box-shadow .3s, border-color .3s;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover .card-inner {
  box-shadow:
    0 18px 44px rgba(0,0,0,.6),
    0 0 26px color-mix(in srgb, var(--rc) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.14);
  border-color: color-mix(in srgb, var(--rc) 75%, rgba(255,255,255,.2));
}
.card-frame {
  position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rc), transparent);
  opacity: .85;
}
.card-art { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--rc) 16%, var(--elevated)), var(--panel) 70%); display: grid; place-items: center; }
.card-art img { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; transition: transform .45s cubic-bezier(.2,.8,.3,1.1); filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
/* 🎨 tamanho por CATEGORIA (Giba 18/07): sprites de ITEM/ÍCONE/MAGIA são pequenos e quadrados → menores no
   card; personagens (bomber/monster/pet/boss) são o corpo inteiro → um pouco maiores. Nada estoura a moldura. */
.card.cat-item .card-art img, .card.cat-icon .card-art img, .card.cat-spell .card-art img { width: 50%; height: 50%; }
.card.cat-bomber .card-art img, .card.cat-monster .card-art img, .card.cat-boss .card-art img, .card.cat-pet .card-art img { width: 76%; height: 76%; }
.card:hover .card-art img { transform: scale(1.1) translateY(-3px); filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 55%, transparent)); }

.card-art::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 7%; height: 12%;
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 75%);
  opacity: .35; transition: opacity .4s; pointer-events: none;
}
.card:hover .card-art::after { opacity: .8; }

.card-holo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(140% 90% at var(--mx) var(--my), rgba(255,255,255,.24), transparent 40%),
    conic-gradient(from 210deg at var(--mx) var(--my), #ff6b6b22, #feca5730, #48dbfb2e, #ff9ff32b, #ffcb4530, #ff6b6b22);
  mix-blend-mode: color-dodge;
  transition: opacity .4s;
}
.card:hover .card-holo { opacity: .8; }

.card-spec {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,.22), rgba(255,255,255,.05) 40%, transparent 65%);
  mix-blend-mode: screen;
  transition: opacity .3s;
}
.card:hover .card-spec { opacity: 1; }

.card-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.card-shine::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
}
.card:hover .card-shine::after { animation: card-sweep .8s ease .05s; }
@keyframes card-sweep { from { left: -60%; } to { left: 140%; } }

.card-rb { position: absolute; top: 8px; left: 8px; z-index: 4; }
.card-cat { position: absolute; top: 8px; right: 8px; z-index: 4; font-size: 12px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); color: var(--text-dim); }
.card-body { padding: 10px 12px 12px; position: relative; z-index: 1; background: linear-gradient(rgba(255,255,255,.02), transparent); }
.card-name { font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.card-sub .rdot { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 7px var(--rc); flex: none; }

/* ---------- MARQUEE ---------- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee var(--mq-dur, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mq-item {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); transition: border-color .25s, background .25s, transform .25s;
}
.mq-item:hover { border-color: var(--rc, rgba(255,255,255,.3)); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.mq-item img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.mq-item .mq-name { font-size: 12px; font-weight: 700; font-family: var(--font-head); white-space: nowrap; }
.mq-item .rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }

/* skeleton shimmer */
.shimmer { position: relative; overflow: hidden; background: var(--elevated); }
.shimmer::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes beam-spin { to { transform: rotate(360deg); } }

/* ---------- RASGO PIXEL entre seções (versão bomba do "drip" do CotL) ---------- */
.px-tear { height: 18px; width: 100%; position: relative; z-index: 2;
  background:
    conic-gradient(from 90deg at 50% 0, var(--bg-2) 0 25%, transparent 0) 0 0 / 24px 9px repeat-x,
    conic-gradient(from 90deg at 50% 0, var(--bg-2) 0 25%, transparent 0) 12px 9px / 24px 9px repeat-x;
}
.px-tear.flip { transform: scaleY(-1); }

/* ---------- ícones pixel art (PixelLab) ---------- */
.pxi { image-rendering: pixelated; display: inline-block; vertical-align: middle; flex: none; object-fit: contain; }
.badge .pxi { margin-right: 3px; }
.chip .pxi { margin-right: 1px; }
.btn .pxi { filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

@media (prefers-reduced-motion: reduce) {
  .dot, .holo-gradient, .card, .marquee-track, .shine-text, body::before,
  .eyebrow::before, #fuse .fuse-spark { animation: none !important; }
  .card-inner { transform: none !important; }
  #fuse { display: none; }
}

/* 🏗️ MODO VITRINE (manutenção/fallback) — banner topo fixo + espaço pro corpo */
#scBanner{position:fixed;top:0;left:0;right:0;z-index:var(--z-banner);
  background:linear-gradient(90deg,#3a1d6e,#5a2ea6 50%,#3a1d6e);
  color:#fff;text-align:center;font-weight:800;font-size:13.5px;letter-spacing:.2px;
  padding:9px 14px;box-shadow:0 2px 18px rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.14)}
#scBanner b{color:#ffd25a}
/* o banner soma-se ao header fixo do ds.css (66px) — antes ele SUBSTITUÍA o padding e o
   conteúdo nascia por baixo do header */
body.has-sc-banner{padding-top:calc(66px + 38px + var(--safe-t))}
body.has-sc-banner .site-head{top:38px}
@media (max-width:600px){#scBanner{font-size:11.5px;padding:7px 10px}body.has-sc-banner{padding-top:calc(66px + 32px + var(--safe-t))}}