/* =========================================================
   Donkey Kong Bananza - tema "destruição"
   Camadas de rocha, veios de ouro, raios neon e voxels.
   Tudo escopado em .bz / body[data-game="bananza"].
   ========================================================= */

body[data-game="bananza"] {
  --bz-ink: #1d1714;
  --bz-cream: #fff3e2;
  --bz-gold: #ffc21a;
  --bz-gold-l: #ffe14d;
  --bz-gold-d: #b86b00;
  --bz-cyan: #1fe0ff;
  --bz-magenta: #ff2fa8;
  --bz-red: #e8202a;
  --bz-lava: #ff5a1f;
  --bz-display: "Bowlby One", "Lilita One", "Arial Black", sans-serif;
  --bz-ui: "Rubik", "Nunito", system-ui, sans-serif;
  --bz-dirt: "Rubik Dirt", "Bowlby One", sans-serif;
  --bz-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bz-veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360'%3E%3Cg fill='none' stroke='%23ffc21a' stroke-linecap='round'%3E%3Cpath d='M-10 80c60-20 90 30 150 10s80-50 140-30 90 40 150 10 60-20 110 0' stroke-width='4' opacity='.38'/%3E%3Cpath d='M-10 250c50 10 80-30 130-20s70 50 130 40 90-60 150-50 70 30 140 20' stroke-width='3' opacity='.28'/%3E%3Cpath d='M140 90c10 40-20 70 0 110M380 70c-20 50 20 80 0 130' stroke-width='2' opacity='.35'/%3E%3C/g%3E%3Cg fill='%23ffe14d' opacity='.7'%3E%3Ccircle cx='90' cy='86' r='3'/%3E%3Ccircle cx='300' cy='72' r='2.5'/%3E%3Ccircle cx='430' cy='260' r='3'/%3E%3Ccircle cx='200' cy='238' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--bz-ink);
}

.bz {
  position: relative; color: var(--bz-cream); background: var(--bz-ink);
  overflow-x: clip; font-size: 17px;
}
.bz [hidden] { display: none !important; }
.bz ::selection { background: var(--bz-gold); color: var(--bz-ink); }
.bz a { color: var(--bz-gold); }
.bz kbd { font-family: var(--bz-ui); font-weight: 700; font-size: .85em; background: #000; color: var(--bz-gold); border: 1px solid var(--bz-gold); border-radius: 6px; padding: 1px 6px; }
.bz-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }
.bz-sec { position: relative; padding: 96px 0 90px; }

/* ---------- Tipografia ---------- */
.bz-kicker { margin: 0 0 6px; font-family: var(--bz-ui); font-weight: 900; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--bz-cyan); text-shadow: 0 0 10px rgba(31, 224, 255, .5); }
.bz-h2 {
  margin: 0 0 18px; font-family: var(--bz-display); font-weight: 400; line-height: 1.02; letter-spacing: .5px;
  font-size: clamp(34px, 5.2vw, 62px); color: var(--bz-gold-l);
  text-shadow: 0 3px 0 var(--bz-gold-d), 0 6px 0 #5a2d00, 0 8px 0 #2a1500, 0 14px 18px rgba(0, 0, 0, .55);
}
.bz-h3 { margin: 0 0 14px; font-family: var(--bz-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: var(--bz-gold-l); text-shadow: 0 3px 0 #5a2d00; }
.bz-h3 small { font-family: var(--bz-ui); font-size: 14px; font-weight: 700; color: #d9c4ae; text-shadow: none; letter-spacing: 1px; }
.bz-sechead { max-width: 800px; margin: 0 auto 36px; text-align: center; }
.bz-sechead p:not(.bz-kicker) { margin: 0; font-size: 18px; color: #f3e4d4; background: rgba(15, 10, 8, .55); padding: 14px 18px; border-radius: 12px; }

.bz-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--bz-display); font-size: 19px; letter-spacing: .5px; color: #3a1f0a !important;
  background: linear-gradient(#ffe066, #ffb000); border: 3px solid #2a1500; border-radius: 12px 16px 12px 18px;
  padding: 10px 22px; box-shadow: 0 6px 0 #2a1500, 0 10px 20px rgba(0, 0, 0, .4); transition: transform .12s, box-shadow .12s;
}
.bz-btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 0 #2a1500, 0 14px 24px rgba(0, 0, 0, .4); }
.bz-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a1500; }
.bz-btn--dark { background: #2b211d; color: var(--bz-gold) !important; border-color: var(--bz-gold); box-shadow: 0 6px 0 #000, 0 10px 20px rgba(0, 0, 0, .4); }
.bz-btn--small { font-size: 16px; padding: 8px 16px; }

/* ---------- Camadas ---------- */
.bz-layer { background-color: var(--bz-bg); background-image: var(--bz-noise), var(--bz-strata, none); }
.bz-layer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; z-index: 2; pointer-events: none;
  background: var(--bz-bg);
  clip-path: polygon(0 100%, 0 62%, 4% 34%, 8% 58%, 13% 14%, 19% 48%, 24% 22%, 30% 62%, 36% 26%, 42% 52%, 48% 8%, 54% 44%, 60% 20%, 66% 56%, 72% 16%, 78% 46%, 84% 24%, 90% 60%, 95% 30%, 100% 52%, 100% 100%);
}
.bz-layer > .bz-wrap { z-index: 3; }
.bz-layer--sand {
  --bz-bg: #a8622e;
  --bz-strata: repeating-linear-gradient(176deg, transparent 0 46px, rgba(255, 210, 150, .14) 46px 58px, transparent 58px 94px, rgba(80, 30, 0, .16) 94px 102px);
}
.bz-layer--clay {
  --bz-bg: #7a321b;
  --bz-strata: repeating-linear-gradient(183deg, transparent 0 60px, rgba(0, 0, 0, .14) 60px 70px, transparent 70px 120px, rgba(255, 160, 110, .1) 120px 128px);
}
.bz-layer--gold { --bz-bg: #2a2220; --bz-strata: var(--bz-veins); }
.bz-layer--slate {
  --bz-bg: #3a4252;
  --bz-strata: repeating-linear-gradient(178deg, transparent 0 34px, rgba(255, 255, 255, .05) 34px 38px, transparent 38px 80px, rgba(0, 0, 0, .14) 80px 86px);
}
.bz-layer--fossil { --bz-bg: #29211d; }
.bz-layer--magma {
  --bz-bg: #170c09;
  --bz-strata: radial-gradient(ellipse 30% 8% at 20% 30%, rgba(255, 90, 31, .35), transparent 70%), radial-gradient(ellipse 26% 6% at 75% 70%, rgba(255, 140, 31, .3), transparent 70%), radial-gradient(ellipse 18% 5% at 60% 15%, rgba(255, 60, 20, .25), transparent 70%);
}

/* ===================== MEDIDOR DE PROFUNDIDADE ===================== */
.bz-depth {
  position: fixed; z-index: 320; right: 14px; top: 50%; translate: 0 -40%;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.bz-depth__track {
  position: relative; width: 16px; height: min(44vh, 380px); border-radius: 10px; border: 2px solid #000;
  background: linear-gradient(#7fc4ff 0 6%, #a8622e 6% 22%, #7a321b 22% 38%, #6b5420 38% 52%, #3a4252 52% 66%, #29211d 66% 78%, #ff5a1f 78% 92%, #ffe14d 92%);
  box-shadow: 0 0 0 2px rgba(255, 194, 26, .5), 0 6px 16px rgba(0, 0, 0, .5);
}
.bz-depth__fill { position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); transform-origin: 50% 100%; transform: scaleY(var(--rest, 1)); }
.bz-depth__head {
  position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: url("../../img/personagens/dk.webp") 50% 12% / 170% no-repeat, #6b3a1f; border: 3px solid var(--bz-gold); box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.bz-depth__read { display: flex; flex-direction: column; align-items: center; background: rgba(10, 6, 4, .85); border: 2px solid var(--bz-gold); border-radius: 12px; padding: 5px 9px; min-width: 88px; text-align: center; }
.bz-depth__read b { font-family: var(--bz-display); font-weight: 400; color: var(--bz-gold-l); font-size: 15px; line-height: 1.1; white-space: nowrap; }
.bz-depth__read small { font-family: var(--bz-ui); font-weight: 700; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--bz-cyan); white-space: nowrap; }

/* ===================== HERÓI ===================== */
.bz-hero {
  position: relative; overflow: hidden; isolation: isolate; min-height: clamp(600px, 84vh, 800px); padding: 56px 0 150px;
  background:
    radial-gradient(ellipse 50% 46% at 64% 50%, #fff2a8 0%, #ffcf4a 18%, #ff9a1f 40%, #c2410c 64%, rgba(40, 14, 4, 0) 86%),
    linear-gradient(#1d1714, #2a140a);
}
.bz-hero__bolts { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bz-bolt path { fill: #0d0907; stroke: var(--c); stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 10px var(--c)); }
.bz-bolt { animation: bz-flicker 3.4s ease-in-out infinite; }
.bz-bolt:nth-child(2n) { animation-delay: -1.3s; }
.bz-bolt:nth-child(3n) { animation-delay: -2.2s; }
@keyframes bz-flicker { 0%, 100% { opacity: 1; } 46% { opacity: .75; } 50% { opacity: 1; } 53% { opacity: .55; } 56% { opacity: 1; } }
.bz-hero__debris i {
  position: absolute; z-index: 0; width: var(--s, 26px); height: var(--s, 26px); left: var(--x); top: var(--y);
  background: linear-gradient(135deg, #ffe680, #ffb000 45%, #b86b00);
  clip-path: polygon(30% 0, 80% 10%, 100% 50%, 75% 100%, 20% 90%, 0 40%);
  filter: drop-shadow(0 0 8px rgba(255, 200, 40, .8)); animation: bz-float 6s ease-in-out infinite; animation-delay: var(--dl, 0s);
}
.bz-hero__debris i:nth-child(1) { --x: 8%; --y: 18%; --s: 30px; }
.bz-hero__debris i:nth-child(2) { --x: 46%; --y: 10%; --s: 18px; --dl: -2s; }
.bz-hero__debris i:nth-child(3) { --x: 88%; --y: 22%; --s: 34px; --dl: -4s; }
.bz-hero__debris i:nth-child(4) { --x: 92%; --y: 66%; --s: 22px; --dl: -1s; }
.bz-hero__debris i:nth-child(5) { --x: 4%; --y: 70%; --s: 24px; --dl: -3s; background: linear-gradient(135deg, #8a7a70, #4a3d35); filter: none; }
.bz-hero__debris i:nth-child(6) { --x: 56%; --y: 80%; --s: 16px; --dl: -5s; }
.bz-hero__debris i:nth-child(7) { --x: 30%; --y: 6%; --s: 20px; --dl: -2.6s; background: linear-gradient(135deg, #8a7a70, #4a3d35); filter: none; }
.bz-hero__debris i:nth-child(8) { --x: 72%; --y: 8%; --s: 14px; --dl: -3.8s; }
@keyframes bz-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(40deg); } }

.bz-hero__in {
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 6vw, 110px) 0 16px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 20px;
}
.bz-hero__logo { margin: 0 0 4px; }
.bz-hero__logo img { width: min(600px, 100%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); animation: bz-logo-in .9s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes bz-logo-in { 0% { transform: translateY(-40px) scale(1.2); opacity: 0; } }
.bz-hero__hook { margin: 0 0 16px; font-size: clamp(18px, 2vw, 22px); font-weight: 800; max-width: 560px; background: rgba(15, 8, 4, .62); padding: 12px 16px; border-radius: 12px; border-left: 5px solid var(--bz-gold); }
.bz-hero__hook strong { color: var(--bz-gold-l); }
.bz-hero__tags { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bz-hero__tags li { font-family: var(--bz-ui); font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bz-gold-l); background: #120b07; border: 2px solid var(--bz-gold); padding: 6px 12px; border-radius: 8px; box-shadow: 0 4px 0 #000; }
.bz-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.bz-hero__dk { margin: 0; justify-self: center; position: relative; }
.bz-hero__dk::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(10px); z-index: -1; }
.bz-hero__dk img { width: min(480px, 100%); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); animation: bz-pump 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bz-pump { 50% { transform: scale(1.03, .97); } }
.bz-hero__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 1;
  background: var(--bz-noise), linear-gradient(#5a4638, #2e231d);
  clip-path: polygon(0 40%, 6% 22%, 11% 40%, 17% 12%, 24% 36%, 30% 20%, 37% 44%, 44% 16%, 50% 34%, 57% 10%, 63% 38%, 70% 18%, 77% 42%, 83% 14%, 90% 34%, 96% 20%, 100% 30%, 100% 100%, 0 100%);
}
.bz-hero__ground::after { content: ""; position: absolute; inset: 0; background: var(--bz-veins) 0 -40px / 520px 360px; opacity: .8; }
.bz-hero__nugget.mbr-coin { position: absolute; z-index: 3; left: 18%; bottom: 46px; width: 30px; height: 36px; }
.bz-hero__down { position: absolute; z-index: 3; left: 50%; bottom: 58px; translate: -50% 0; margin: 0; font-family: var(--bz-ui); font-weight: 900; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--bz-gold-l); text-shadow: 0 2px 0 #000; animation: bz-down 1.6s ease-in-out infinite; }
@keyframes bz-down { 50% { transform: translateY(6px); } }

/* ===================== SOBRE + FICHA ===================== */
.bz-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.bz-about__text { background: rgba(26, 12, 4, .72); padding: 30px clamp(18px, 3vw, 36px); border-radius: 18px 26px 16px 30px; box-shadow: 0 10px 0 rgba(0, 0, 0, .3); border: 2px solid rgba(255, 194, 26, .3); }
.bz-about__text p:not(.bz-kicker) { margin: 0 0 14px; }
.bz-about__text p:last-child { margin-bottom: 0; }
.bz-about__text strong { color: var(--bz-gold-l); }
.bz-about__art { margin: 0; position: relative; }
.bz-about__art img {
  border-radius: 10px; box-shadow: 0 0 0 6px #1d1714, 0 0 0 9px var(--bz-gold), 0 20px 40px rgba(0, 0, 0, .5);
  clip-path: polygon(3% 0, 30% 2%, 52% 0, 78% 3%, 100% 0, 98% 30%, 100% 56%, 97% 80%, 100% 100%, 70% 98%, 45% 100%, 20% 97%, 0 100%, 2% 70%, 0 44%, 3% 20%);
  rotate: 2deg;
}
.bz-about__art figcaption { margin-top: 10px; text-align: center; font-family: var(--bz-ui); font-weight: 700; font-size: 14px; color: #ffe1bd; }

.bz-core-sample {
  margin-top: 54px; position: relative; padding: 26px clamp(16px, 3vw, 34px); border-radius: 60px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 18%, transparent 82%, rgba(0, 0, 0, .3)),
    linear-gradient(#c98a46 0 18%, #a8622e 18% 36%, #7a321b 36% 52%, #6b5420 52% 66%, #3a4252 66% 82%, #29211d 82%);
  box-shadow: 0 0 0 4px #1d1714, 0 14px 0 rgba(0, 0, 0, .35);
}
.bz-core-sample .bz-h3 { text-align: center; }
.bz-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bz-ficha div { background: rgba(14, 8, 4, .82); border-radius: 12px; padding: 12px 14px; border-top: 4px solid var(--bz-gold); }
.bz-ficha dt { font-family: var(--bz-ui); font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--bz-cyan); }
.bz-ficha dd { margin: 2px 0 0; font-weight: 800; line-height: 1.3; }

/* ===================== PAREDE ===================== */
.bz-wall { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px 22px; align-items: end; max-width: 1000px; margin: 0 auto; }
.bz-wall__dk { width: 210px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); transform-origin: 30% 100%; z-index: 4; position: relative; }
.bz-wall__dk.is-punch { animation: bz-punch .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bz-punch { 40% { transform: translateX(36px) rotate(6deg) scale(1.05); } }
.bz-wall__frame {
  position: relative; height: 380px; border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, #ffe680 0%, #ffb000 16%, #7a3b00 42%, #1a0d06 72%);
  box-shadow: 0 0 0 10px #1d1714, 0 0 0 13px rgba(255, 194, 26, .5), 0 20px 40px rgba(0, 0, 0, .5), inset 0 0 50px #000;
}
.bz-wall__frame.is-shake { animation: bz-shake .3s linear; }
@keyframes bz-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.bz-wall__treasure { position: absolute; inset: 0; display: grid; place-items: center; }
.bz-wall__banana { width: 150px; position: absolute; top: 34%; left: 50%; translate: -86% -50%; rotate: -14deg; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.bz-wall__coin.mbr-coin { position: absolute; top: 50%; left: 50%; translate: 60% -40%; width: 46px; height: 54px; z-index: 1; }
.bz-wall__gold i { position: absolute; width: 22px; height: 22px; background: linear-gradient(135deg, #fff0a0, #ffb000 50%, #b86b00); clip-path: polygon(30% 0, 80% 10%, 100% 50%, 75% 100%, 20% 90%, 0 40%); }
.bz-wall__gold i:nth-child(1) { left: 24%; top: 62%; }
.bz-wall__gold i:nth-child(2) { left: 70%; top: 30%; width: 16px; height: 16px; }
.bz-wall__gold i:nth-child(3) { left: 36%; top: 24%; width: 14px; height: 14px; }
.bz-wall__gold i:nth-child(4) { left: 62%; top: 70%; width: 26px; height: 26px; }
.bz-wall__gold i:nth-child(5) { left: 48%; top: 78%; width: 12px; height: 12px; }
.bz-wall.is-broken .bz-wall__treasure { animation: bz-glow 1.6s ease-in-out infinite; }
@keyframes bz-glow { 50% { filter: brightness(1.2) drop-shadow(0 0 20px #ffcf4a); } }
.bz-wall__rock { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 18px; }
.bz-wall__rock:focus-visible { outline: 4px solid var(--bz-cyan); outline-offset: 6px; }
.bz-block {
  position: absolute; pointer-events: auto; cursor: pointer; background-color: var(--bc); background-image: var(--bz-noise); background-size: 130px;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .16), inset 0 -6px 0 rgba(0, 0, 0, .3), inset 5px 0 0 rgba(255, 255, 255, .06), inset -5px 0 0 rgba(0, 0, 0, .2);
  transition: filter .2s;
}
.bz-block--vein { background-size: auto, auto, auto, 130px; background-image: radial-gradient(circle at 30% 40%, #ffe14d 0 3px, transparent 4px), radial-gradient(circle at 70% 70%, #ffc21a 0 4px, transparent 5px), radial-gradient(circle at 60% 25%, #ffe680 0 2px, transparent 3px), var(--bz-noise); }
.bz-block.is-cracked { filter: brightness(.82) contrast(1.1); }
.bz-block.is-cracked2 { filter: brightness(.66) contrast(1.2); }
.bz-block.is-gone { pointer-events: none; }
.bz-block:hover { filter: brightness(1.12); }
.bz-wall__cracks { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .5s; }
.bz-wall__cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .35s ease-out; }
.bz-wall__cracks .c-dark { stroke: #120a06; }
.bz-wall__cracks .c-glow { stroke: #ffcf4a; opacity: .55; }
.bz-wall.is-broken .bz-wall__cracks { opacity: 0; }
.bz-wall__fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.bz-chip { position: absolute; left: 0; top: 0; width: 12px; height: 12px; background: var(--bc, #6b5a4e); clip-path: polygon(20% 0, 100% 20%, 80% 100%, 0 70%); }
.bz-dust { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(235, 205, 170, .55); }
.bz-pow {
  position: absolute; left: 0; top: 0; font-family: var(--bz-dirt); font-size: clamp(30px, 5vw, 48px); color: var(--bz-gold-l); white-space: nowrap;
  text-shadow: 3px 3px 0 #5a2d00, -2px -2px 0 #5a2d00, 2px -2px 0 #5a2d00, -2px 2px 0 #5a2d00, 0 8px 12px rgba(0, 0, 0, .5);
  animation: bz-pow .8s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
@keyframes bz-pow { 0% { scale: .3; opacity: 0; } 25% { scale: 1.15; opacity: 1; } 75% { opacity: 1; } 100% { scale: 1; opacity: 0; translate: 0 -30px; } }
.bz-wall__hud { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.bz-wall__pips { display: flex; gap: 6px; }
.bz-wall__pips i { width: 24px; height: 16px; background: #1d1714; border: 2px solid rgba(255, 194, 26, .5); clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); transition: background .2s; }
.bz-wall__pips i.is-on { background: var(--bz-gold); border-color: var(--bz-gold); }
.bz-wall__status { margin: 0; font-family: var(--bz-ui); font-weight: 700; font-size: 17px; color: #ffe1bd; flex: 1 1 220px; }
.bz-wall__status b { color: var(--bz-gold-l); }

/* ===================== PAULINE + BANANZAS ===================== */
.bz-pauline { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: 60px; }
.bz-pauline__mic { position: relative; justify-self: center; width: 170px; padding: 0; border: 0; background: none; border-radius: 20px; transition: transform .15s; }
.bz-pauline__mic:hover { transform: rotate(-4deg) scale(1.04); }
.bz-pauline__mic.is-sing svg { animation: bz-sing .4s ease-in-out 4; }
@keyframes bz-sing { 50% { transform: scale(1.08) rotate(3deg); } }
.bz-pauline__mic .bz-mic__label { display: block; margin-top: 6px; font-family: var(--bz-ui); font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffb3dd; }
.bz-pauline__mic.is-sing .bz-note { animation-duration: 1.6s; }
.bz-pauline__mic svg { filter: drop-shadow(0 0 18px rgba(255, 47, 168, .5)); }
.bz-note { position: absolute; left: 50%; top: 30%; font-size: 44px; color: var(--bz-magenta); text-shadow: 0 0 12px rgba(255, 47, 168, .8); animation: bz-note 3.2s ease-in-out infinite; animation-delay: var(--d); opacity: 0; }
.bz-note:nth-child(3) { color: var(--bz-cyan); text-shadow: 0 0 12px rgba(31, 224, 255, .8); }
@keyframes bz-note { 0% { transform: translate(0, 20px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.1) rotate(15deg); opacity: 0; } }
.bz-pauline__coin.mbr-coin { position: absolute; left: 172px; top: 4px; width: 28px; height: 34px; }
.bz-pauline__coin.mbr-coin:not(.is-collected):not(.was-collected) { animation: mbr-spin 1.6s linear infinite, bz-bob 2.6s ease-in-out infinite; }
@keyframes bz-bob { 50% { translate: 0 -10px; } }
.bz-pauline__text { background: rgba(10, 6, 4, .66); padding: 26px clamp(18px, 3vw, 34px); border-radius: 18px; border: 2px solid rgba(255, 47, 168, .35); }
.bz-pauline__text p:last-child { margin: 0; }
.bz-pauline__text .bz-h2 { font-size: clamp(30px, 4vw, 46px); }
.bz-pauline__text strong { color: #ffb3dd; }

.bz-forms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; --aura: #ff3b2f; }
.bz-forms[data-form="zebra"] { --aura: #ffffff; }
.bz-forms[data-form="ostrich"] { --aura: #ff8fc8; }
.bz-forms[data-form="snake"] { --aura: #3fe08a; }
.bz-forms[data-form="elephant"] { --aura: #8fb2ff; }
.bz-forms__stage { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; display: grid; place-items: center; isolation: isolate; }
.bz-forms__rays {
  position: absolute; inset: -6%; z-index: -2; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--aura) 55%, transparent) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: bz-spin 24s linear infinite; transition: background .4s;
}
@keyframes bz-spin { to { transform: rotate(360deg); } }
.bz-forms__aura { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--aura) 70%, transparent), transparent 66%); filter: blur(6px); transition: background .4s; animation: bz-breath 2.4s ease-in-out infinite; }
@keyframes bz-breath { 50% { transform: scale(1.06); opacity: .85; } }
.bz-forms__img { grid-area: 1 / 1; width: 86%; filter: drop-shadow(0 0 22px var(--aura)) drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); transition: opacity .25s; }
.bz-forms__img--dk { opacity: 0; }
.bz-forms:not([data-form="kong"]) .bz-forms__img--kong { opacity: 0; }
.bz-forms:not([data-form="kong"]) .bz-forms__img--dk { opacity: 1; }
.bz-forms[data-form="zebra"] .bz-forms__img--dk { filter: grayscale(1) contrast(1.7) brightness(1.18) drop-shadow(0 0 22px #fff) drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); }
.bz-forms[data-form="ostrich"] .bz-forms__img--dk { filter: hue-rotate(-48deg) saturate(1.6) brightness(1.12) drop-shadow(0 0 22px #ff8fc8) drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); }
.bz-forms[data-form="snake"] .bz-forms__img--dk { filter: hue-rotate(100deg) saturate(1.5) drop-shadow(0 0 22px #3fe08a) drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); }
.bz-forms[data-form="elephant"] .bz-forms__img--dk { filter: grayscale(.85) sepia(.2) hue-rotate(180deg) saturate(1.6) brightness(.95) drop-shadow(0 0 22px #8fb2ff) drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); }
.bz-forms.is-morph .bz-forms__stage { animation: bz-morph .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bz-morph { 0% { transform: scale(.86); filter: brightness(2.4); } 100% { transform: none; filter: none; } }
.bz-forms__emblem { position: absolute; right: 6%; bottom: 8%; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: #120b07; border: 4px solid var(--aura); color: var(--aura); box-shadow: 0 0 20px var(--aura); }
.bz-forms__emblem svg { width: 54px; height: 54px; fill: currentColor; }
.bz-forms__panel { background: rgba(10, 6, 4, .72); padding: 26px clamp(16px, 3vw, 30px); border-radius: 20px; border: 2px solid color-mix(in srgb, var(--aura) 55%, transparent); transition: border-color .4s; }
.bz-forms__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.bz-forms__list button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--fc) 60%, transparent); background: #1d1714; color: var(--fc);
  font-family: var(--bz-ui); font-weight: 900; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.bz-forms__list button svg { width: 38px; height: 38px; fill: currentColor; }
.bz-forms__list button:hover { transform: translateY(-3px); }
.bz-forms__list button[aria-checked="true"] { background: var(--fc); color: #120b07; box-shadow: 0 0 18px var(--fc), 0 5px 0 #000; }
.bz-forms__list button[aria-checked="true"] svg path[stroke="#1b1b1f"] { stroke: #fff; }
.bz-forms__tag { margin: 0; font-family: var(--bz-ui); font-weight: 900; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--aura); }
.bz-forms__info h4 { margin: 2px 0 8px; font-family: var(--bz-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; color: #fff; text-shadow: 0 3px 0 #000, 0 0 18px var(--aura); }
.bz-forms__info p:last-child { margin: 0; font-size: 17.5px; min-height: 3.2em; }
.bz-forms__progress { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-family: var(--bz-ui); font-weight: 700; font-size: 14px; color: #d9c4ae; }
.bz-forms__coin.mbr-coin { width: 28px; height: 34px; }
.bz-forms__coin[hidden] { display: none; }
.bz-forms__note { margin: 12px 0 0; font-size: 13px; color: #bfae9c; }

/* ===================== MECÂNICAS + VOIDCO ===================== */
.bz-mechs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bz-slab {
  position: relative; padding: 24px 22px 20px; color: #eef1f6;
  background: linear-gradient(160deg, #5c6778, #3e4757 60%, #343c4a);
  clip-path: polygon(0 6%, 6% 0, 40% 2%, 70% 0, 96% 3%, 100% 14%, 98% 60%, 100% 92%, 94% 100%, 50% 98%, 8% 100%, 0 92%, 2% 50%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.bz-slab::before { content: ""; position: absolute; inset: 0; background: var(--bz-noise); opacity: .5; pointer-events: none; }
.bz-slab > * { position: relative; }
.bz-slab svg { width: 50px; height: 50px; fill: var(--bz-gold); color: var(--bz-gold); filter: drop-shadow(0 3px 0 #000); margin-bottom: 8px; }
.bz-slab h3 { margin: 0 0 6px; font-family: var(--bz-display); font-weight: 400; font-size: 21px; color: var(--bz-gold-l); text-shadow: 0 2px 0 #000; }
.bz-slab p { margin: 0; font-size: 16px; }
.bz-voidco {
  position: relative; margin-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 26px clamp(18px, 3vw, 36px); border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 10% 50%, #4b0f5c, transparent 60%), linear-gradient(135deg, #160a1e, #0b0710);
  border: 2px solid rgba(255, 47, 168, .5); box-shadow: 0 0 30px rgba(255, 47, 168, .2);
}
.bz-voidco__stamp { margin: 0; font-family: var(--bz-display); font-size: clamp(34px, 5vw, 56px); letter-spacing: 2px; color: #fff; rotate: -8deg; text-shadow: 3px 0 var(--bz-magenta), -3px 0 var(--bz-cyan), 0 0 24px rgba(255, 47, 168, .6); }
.bz-voidco h3 { margin: 0 0 6px; font-family: var(--bz-display); font-weight: 400; font-size: 26px; color: #ffb3dd; }
.bz-voidco p { margin: 0; }
.bz-voidco strong { color: #fff; }

/* ===================== HISTÓRIA EM CAMADAS ===================== */
.bz-strata { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 4px #120b07, 0 20px 40px rgba(0, 0, 0, .5); }
.bz-stratum {
  --sc: #4a3b33; position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 22px clamp(14px, 3vw, 30px); background: var(--bz-noise), var(--sc);
  border-bottom: 3px solid rgba(0, 0, 0, .35);
}
.bz-stratum:nth-child(2) { --sc: #5b4636; }
.bz-stratum:nth-child(3) { --sc: #6c4a2e; }
.bz-stratum:nth-child(4) { --sc: #7a5233; }
.bz-stratum:nth-child(5) { --sc: #6a5a46; }
.bz-stratum:nth-child(6) { --sc: #55493f; }
.bz-stratum:nth-child(7) { --sc: #4a4552; }
.bz-stratum:nth-child(8) { --sc: #5a3d4a; }
.bz-stratum:nth-child(9) { --sc: #7a3b1d; }
.bz-stratum::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(0, 0, 0, .25) 30px 34px, transparent 34px 56px); pointer-events: none; }
.bz-stratum__year { font-family: var(--bz-display); font-size: clamp(32px, 4vw, 48px); color: rgba(255, 225, 160, .92); text-shadow: 0 3px 0 rgba(0, 0, 0, .5), inset 0 0 0 #000; letter-spacing: 1px; }
.bz-stratum__body h3 { margin: 0 0 4px; font-family: var(--bz-display); font-weight: 400; font-size: 21px; color: #fff; text-shadow: 0 2px 0 #000; }
.bz-stratum__body h3 small { font-family: var(--bz-ui); font-weight: 900; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bz-ink); background: var(--bz-gold); border-radius: 6px; padding: 2px 7px; vertical-align: middle; text-shadow: none; }
.bz-stratum__body p { margin: 0; font-size: 16px; color: #f6eadc; }
.bz-stratum__img { width: 110px; border-radius: 6px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .4); rotate: 3deg; }
.bz-stratum--now { --sc: #7a3b1d; box-shadow: inset 0 0 40px rgba(255, 194, 26, .25); }
.bz-fossil.mbr-coin { position: absolute; right: 26px; top: 50%; margin-top: -18px; width: 30px; height: 36px; filter: sepia(.5) drop-shadow(0 0 6px rgba(255, 200, 80, .6)); }

/* ===================== CURIOSIDADES (MAGMA) ===================== */
.bz-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bz-fact {
  position: relative; padding: 22px 18px 18px; border-radius: 14px; font-size: 15.5px; line-height: 1.5;
  background: linear-gradient(180deg, #241612, #120a08); border: 1px solid #3a1f14;
  box-shadow: inset 0 -4px 0 var(--bz-lava), 0 0 24px rgba(255, 90, 31, .18), 0 10px 20px rgba(0, 0, 0, .4);
}
.bz-fact b { display: block; margin-bottom: 6px; font-family: var(--bz-display); font-weight: 400; font-size: 19px; line-height: 1.15; color: #ffb27a; }
.bz-fact--block { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.bz-qrock.mbr-qblock { width: 64px; height: 64px; }

/* ===================== NÚCLEO ===================== */
.bz-core {
  padding-bottom: 120px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, #fff6c8 0%, #ffd23f 16%, #ff8a1f 34%, #c2310c 52%, #170c09 78%), #170c09;
}
.bz-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; z-index: 2; background: #170c09;
  clip-path: polygon(0 100%, 0 50%, 8% 20%, 16% 60%, 26% 30%, 36% 64%, 48% 16%, 58% 52%, 70% 22%, 80% 58%, 90% 26%, 100% 48%, 100% 100%);
}
.bz-core__glow { position: absolute; left: 50%; bottom: -200px; width: 700px; height: 700px; margin-left: -350px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, .8), transparent 60%); animation: bz-breath 3s ease-in-out infinite; pointer-events: none; }
.bz-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.bz-where article { background: rgba(14, 8, 4, .86); border-radius: 18px; padding: 22px; border: 2px solid rgba(255, 194, 26, .45); }
.bz-where h3 { margin: 0 0 8px; font-family: var(--bz-display); font-weight: 400; font-size: 24px; color: var(--bz-gold-l); }
.bz-where p { margin: 0; }
.bz-where__main { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; }
.bz-where__main img { border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .5); }
.bz-where__more ul { margin: 0 0 10px; padding-left: 1.1em; }
.bz-where__more li { margin: 5px 0; }
.bz-where__more li::marker { content: "◆ "; color: var(--bz-gold); }
.bz-where__small { font-size: 14px; color: #d9c4ae; }
.bz-core__orb {
  position: relative; z-index: 2; width: 130px; height: 130px; margin: 56px auto 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff, #fff2a8 30%, #ffc21a 60%, #ff8a1f);
  box-shadow: 0 0 40px #ffd23f, 0 0 90px rgba(255, 138, 31, .8); animation: bz-orb 2.2s ease-in-out infinite;
}
@keyframes bz-orb { 50% { box-shadow: 0 0 60px #fff2a8, 0 0 120px rgba(255, 138, 31, 1); } }
.bz-core__coin.mbr-coin { width: 46px; height: 54px; }

/* ===================== Gamenav combinando ===================== */
body[data-game="bananza"] .mbr-gamenav { background: #170c09; }
body[data-game="bananza"] .mbr-gamenav__link { background: #241612; border-color: #3a1f14; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1180px) {
  .bz-depth { right: auto; left: 12px; top: auto; bottom: 12px; translate: none; flex-direction: row; gap: 8px; }
  .bz-depth__track { width: 120px; height: 12px; background: linear-gradient(90deg, #7fc4ff 0 6%, #a8622e 6% 22%, #7a321b 22% 38%, #6b5420 38% 52%, #3a4252 52% 66%, #29211d 66% 78%, #ff5a1f 78% 92%, #ffe14d 92%); }
  .bz-depth__fill { transform-origin: 100% 50%; transform: scaleX(var(--rest, 1)); }
  .bz-depth__head { top: 50%; left: calc(var(--p, 0) * 100%); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-width: 2px; }
  .bz-depth__read { flex-direction: row; gap: 6px; padding: 4px 9px; min-width: 0; }
  .bz-depth__read b { font-size: 13px; }
}
@media (max-width: 960px) {
  .bz-hero__in { grid-template-columns: 1fr; text-align: center; padding: 0 16px; }
  .bz-hero__hook { margin-left: auto; margin-right: auto; text-align: left; }
  .bz-hero__tags, .bz-hero__cta { justify-content: center; }
  .bz-hero__dk img { width: 300px; }
  .bz-about, .bz-forms { grid-template-columns: 1fr; }
  .bz-about__art { max-width: 460px; margin: 0 auto; }
  .bz-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-mechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-wall { grid-template-columns: 1fr; }
  .bz-wall__dk { width: 130px; margin: 0 auto -26px; }
  .bz-wall__hud { grid-column: 1; }
  .bz-where { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bz { font-size: 16px; }
  .bz-sec { padding: 76px 0 70px; }
  .bz-hero { padding: 40px 0 140px; min-height: 0; }
  .bz-hero__dk img { width: 230px; }
  .bz-hero__tags { gap: 8px; }
  .bz-hero__tags li { font-size: 12px; letter-spacing: 1px; padding: 5px 9px; }
  .bz-hero__down { font-size: 11px; letter-spacing: 2px; white-space: nowrap; bottom: 64px; }
  .bz-h3 small { display: block; }
  .bz-hero__nugget.mbr-coin { left: 10%; bottom: 40px; }
  .bz-btn { font-size: 16px; padding: 9px 16px; }
  .bz-ficha { grid-template-columns: 1fr; }
  .bz-core-sample { border-radius: 30px; }
  .bz-mechs, .bz-facts { grid-template-columns: 1fr; }
  .bz-wall__frame { height: 290px; }
  .bz-wall__banana { width: 110px; }
  .bz-pauline { grid-template-columns: 1fr; gap: 10px; }
  .bz-pauline__mic { width: 120px; }
  .bz-pauline__coin.mbr-coin { left: auto; right: 22%; top: 10px; }
  .bz-forms__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .bz-forms__list button { font-size: 9.5px; padding: 8px 2px 6px; letter-spacing: 0; }
  .bz-forms__list button svg { width: 30px; height: 30px; }
  .bz-forms__emblem { width: 62px; height: 62px; }
  .bz-forms__emblem svg { width: 40px; height: 40px; }
  .bz-voidco { grid-template-columns: 1fr; gap: 6px; }
  .bz-stratum { grid-template-columns: 1fr; gap: 6px; padding-right: 60px; }
  .bz-stratum__img { position: absolute; right: 12px; top: 14px; width: 54px; }
  .bz-stratum--feature .bz-stratum__body { padding-right: 10px; }
  .bz-fossil.mbr-coin { right: 18px; top: auto; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-bolt, .bz-hero__debris i, .bz-hero__dk img, .bz-forms__rays, .bz-forms__aura, .bz-note, .bz-core__glow, .bz-core__orb, .bz-hero__down { animation: none; }
  .bz-note { opacity: .8; transform: translate(var(--x), var(--y)); }
}