/* =========================================================
   SUPER MARIO BROS. (1985) - tema 8-bit NES
   ========================================================= */
.smb {
  --px: 3px;                       /* 1 pixel do NES */
  --t: calc(var(--px) * 16);       /* 1 bloco (16×16) */
  --sky: #5c94fc;
  --brick: #c84c0c;
  --brick-hi: #fc9838;
  --pipe: #00a800;
  --pipe-hi: #80d010;
  --pipe-dk: #005800;
  --peach: #fcbcb0;
  --ink: #000;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 25px;
  line-height: 1.3;
  color: #fff;
  background: var(--sky);
  overflow-x: clip;
}
@media (max-width: 700px) { .smb { --px: 2px; font-size: 22px; } }

.smb .px { display: inline-block; line-height: 0; vertical-align: middle; }
.smb .px svg { display: block; image-rendering: pixelated; shape-rendering: crispEdges; }
.smb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }
.smb-h {
  font-family: var(--mbr-font-pixel); font-weight: 400; font-size: clamp(20px, 3.2vw, 34px); line-height: 1.35;
  margin: 0 0 22px; color: #fff; text-shadow: var(--px) var(--px) 0 #000, calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(0,0,0,.35);
  text-transform: uppercase;
}
.smb-h--sm { font-size: clamp(15px, 2.2vw, 22px); }
.smb-lead { font-size: 1.1em; max-width: 820px; margin: 0 0 30px; }
.smb strong { color: #fff3b0; font-weight: 400; }
.smb .mbr-coin {
  width: calc(var(--px) * 10); height: calc(var(--px) * 14);
  background: var(--coin-px, url("../../img/itens/moeda.webp")) center / contain no-repeat;
  image-rendering: pixelated; filter: drop-shadow(var(--px) var(--px) 0 rgba(0,0,0,.35));
  animation: smb-coinflash .6s steps(1) infinite;
}
@keyframes smb-coinflash { 50% { filter: brightness(1.35) drop-shadow(var(--px) var(--px) 0 rgba(0,0,0,.35)); } }
.smb [data-coin].is-collected { animation: mbr-collect .6s ease-out forwards; }
.smb-btn {
  font-family: var(--mbr-font-pixel); font-size: 12px; color: #fff; background: #000; border: 0; padding: 14px 18px;
  box-shadow: 0 0 0 var(--px) #fff, 0 0 0 calc(var(--px) * 2) #000; cursor: pointer;
}
.smb-btn:hover { background: var(--brick); }

/* ---------- HUD ---------- */
.smb-hud {
  position: sticky; top: var(--mbr-header-h); z-index: 60;
  font-family: var(--mbr-font-pixel); font-size: 12px; line-height: 1.6; letter-spacing: 1px;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.25)); backdrop-filter: blur(3px);
  text-shadow: 2px 2px 0 #000;
}
.smb-hud__in { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.smb-hud__in > div { display: flex; flex-direction: column; align-items: center; }
.smb-hud__in b { font-weight: 400; }
.smb-hud__coins { flex-direction: row !important; justify-content: center; gap: 6px; }
.smb-hud__coins .px { animation: smb-coinflash .6s steps(1) infinite; }
.smb-hud.is-hurry [data-hud-time] { color: #ff6b6b; animation: smb-blink .4s steps(1) infinite; }
@keyframes smb-blink { 50% { opacity: .3; } }
@media (max-width: 520px) { .smb-hud { font-size: 9px; } }

/* ---------- HERO / TELA DE TÍTULO ---------- */
.smb-hero { position: relative; padding-top: 42px; overflow: hidden; }
.smb-cloud {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--t) * 2); height: calc(var(--t) * .9);
  background: #fff; border-radius: calc(var(--t) * .45);
  filter: drop-shadow(var(--px) 0 0 #000) drop-shadow(calc(var(--px) * -1) 0 0 #000) drop-shadow(0 var(--px) 0 #000) drop-shadow(0 calc(var(--px) * -1) 0 #000);
  animation: smb-cloud 40s steps(80) infinite alternate;
}
.smb-cloud::before { content: ""; position: absolute; left: 22%; top: -55%; width: 56%; height: 120%; background: #fff; border-radius: 50%; }
.smb-cloud::after { content: ""; position: absolute; left: 30%; top: 30%; width: 8%; height: 22%; background: #000; border-radius: 1px; box-shadow: calc(var(--px) * 5) 0 0 #000; opacity: .0; }
.smb-cloud--2 { width: calc(var(--t) * 3); }
.smb-cloud--3 { width: calc(var(--t) * 4); }
@keyframes smb-cloud { to { transform: translateX(calc(var(--t) * 2)); } }

.smb-title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.smb-board {
  position: relative; background: var(--brick); padding: 22px 34px 34px; max-width: 760px; width: 100%;
  box-shadow:
    inset var(--px) var(--px) 0 var(--brick-hi),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #000,
    0 0 0 var(--px) #000,
    calc(var(--px) * 3) calc(var(--px) * 3) 0 rgba(0,0,0,.3);
}
.smb-board::before, .smb-board::after {
  content: ""; position: absolute; top: 10px; width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--brick-hi);
  box-shadow: 0 calc(100% + 0px) 0 transparent;
}
.smb-board::before { left: 10px; box-shadow: 0 0 0 0 transparent; }
.smb-board::after { right: 10px; }
.smb-board h1 { margin: 0; text-transform: uppercase; font-family: var(--mbr-font-pixel); font-weight: 400; color: var(--peach); line-height: 1.1; text-shadow: var(--px) var(--px) 0 #000, calc(var(--px) * 2) calc(var(--px) * 2) 0 #000; }
.smb-board__l1 { display: block; text-align: left; font-size: clamp(22px, 4vw, 40px); margin-bottom: 12px; }
.smb-board__l2 { display: block; font-size: clamp(22px, 5.6vw, 58px); letter-spacing: -1px; white-space: nowrap; }
.smb-board__c { position: absolute; right: 18px; bottom: 10px; font-family: var(--mbr-font-pixel); font-size: 10px; color: var(--peach); }
.smb-menu { list-style: none; margin: 26px 0 8px; padding: 0; display: grid; gap: 10px; justify-items: start; }
.smb-menu button {
  display: flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; padding: 4px 8px;
  font-family: var(--mbr-font-pixel); font-size: clamp(11px, 1.6vw, 15px); text-shadow: 2px 2px 0 #000;
}
.smb-menu__cur { visibility: hidden; }
.smb-menu button[aria-pressed="true"] .smb-menu__cur { visibility: visible; }
.smb-menu button:hover .smb-menu__cur { visibility: visible; opacity: .6; }
.smb-top { font-family: var(--mbr-font-pixel); font-size: 13px; margin: 8px 0 6px; text-shadow: 2px 2px 0 #000; }
.smb-hero__hint { margin: 10px 0 0; font-size: 17px; background: rgba(0,0,0,.35); padding: 6px 14px; }

.smb-stage { position: relative; height: calc(var(--t) * 6.5); max-width: 1180px; margin: 10px auto 0; }
.smb-hill {
  position: absolute; left: 2%; bottom: 0; width: calc(var(--t) * 5); height: calc(var(--t) * 2.6);
  background: var(--pipe); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset 0 var(--px) 0 #000, 0 0 0 var(--px) #000;
}
.smb-hill::before {
  content: ""; position: absolute; left: 30%; top: 32%; width: calc(var(--px) * 3); height: calc(var(--px) * 8); background: #000;
  box-shadow: calc(var(--px) * 6) calc(var(--px) * -4) 0 #000, calc(var(--px) * 18) calc(var(--px) * 3) 0 #000, calc(var(--px) * 12) calc(var(--px) * 10) 0 #000;
  border-radius: var(--px);
}
.smb-hill--sm { left: 40%; width: calc(var(--t) * 3); height: calc(var(--t) * 1.3); }
.smb-hill--sm::before { display: none; }
.smb-bush {
  position: absolute; left: 47%; bottom: 0; width: calc(var(--t) * 3); height: calc(var(--t) * .8);
  background: var(--pipe-hi); border-radius: calc(var(--t) * .5) calc(var(--t) * .5) 0 0;
  filter: drop-shadow(var(--px) 0 0 #000) drop-shadow(calc(var(--px) * -1) 0 0 #000) drop-shadow(0 calc(var(--px) * -1) 0 #000);
}
.smb-bush::before { content: ""; position: absolute; left: 25%; top: -50%; width: 50%; height: 110%; border-radius: 50%; background: var(--pipe-hi); }

/* Blocos */
.smb-block {
  position: absolute; left: var(--x); bottom: calc(var(--t) * 3); width: var(--t); height: var(--t);
  border: 0; padding: 0; cursor: pointer; z-index: 3;
}
.smb-block--q, .smb-item__block {
  background:
    radial-gradient(circle at calc(var(--px) * 2.5) calc(var(--px) * 2.5), #000 calc(var(--px) * .9), transparent calc(var(--px) * 1)) top left / 50% 50% no-repeat,
    radial-gradient(circle at calc(100% - var(--px) * 2.5) calc(var(--px) * 2.5), #000 calc(var(--px) * .9), transparent calc(var(--px) * 1)) top right / 50% 50% no-repeat,
    radial-gradient(circle at calc(var(--px) * 2.5) calc(100% - var(--px) * 2.5), #000 calc(var(--px) * .9), transparent calc(var(--px) * 1)) bottom left / 50% 50% no-repeat,
    radial-gradient(circle at calc(100% - var(--px) * 2.5) calc(100% - var(--px) * 2.5), #000 calc(var(--px) * .9), transparent calc(var(--px) * 1)) bottom right / 50% 50% no-repeat,
    var(--q, #fc9838);
  box-shadow: inset var(--px) var(--px) 0 #fcd8a8, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #000, 0 0 0 var(--px) var(--brick);
  animation: smb-qflash 1.2s steps(1) infinite;
}
.smb-block--q::after, .smb-item__block::after {
  content: "?"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mbr-font-pixel); font-size: calc(var(--t) * .56); color: var(--brick); text-shadow: var(--px) var(--px) 0 #000; padding-left: var(--px);
}
@keyframes smb-qflash { 0%, 55% { --q: #fc9838; background-color: #fc9838; } 70% { background-color: #e47c18; } 85% { background-color: #c84c0c; } }
.smb-block--brick {
  background:
    linear-gradient(#0000 calc(50% - var(--px)), #000 calc(50% - var(--px)) 50%, #0000 50%) 0 0 / 100% 100%,
    linear-gradient(#0000 calc(100% - var(--px)), #000 0) 0 0 / 100% 100%,
    linear-gradient(90deg, #0000 calc(50% - var(--px)), #000 calc(50% - var(--px)) 50%, #0000 50%) 0 0 / 100% 50% no-repeat,
    linear-gradient(90deg, #000 var(--px), #0000 var(--px)) 0 100% / 100% 50% no-repeat,
    var(--brick);
  box-shadow: inset 0 var(--px) 0 var(--brick-hi);
}
.smb-block--hidden { background: transparent; }
.smb-block--hidden:focus-visible { outline: 2px dashed #fff; }
.smb-block.is-used, .smb-item__block.is-used {
  animation: none; background: #c84c0c;
  box-shadow: inset var(--px) var(--px) 0 #e47c18, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #000, 0 0 0 var(--px) #000;
}
.smb-block.is-used::after, .smb-item__block.is-used::after { content: ""; }
.smb-block.is-bump { animation: smb-bump .22s ease-out; }
@keyframes smb-bump { 50% { transform: translateY(calc(var(--px) * -6)); } }

/* Canos */
.smb-pipe {
  position: absolute; left: var(--x); bottom: 0; width: calc(var(--t) * 1.75); height: calc(var(--t) * var(--h));
  background: linear-gradient(90deg, #000 var(--px), var(--pipe-hi) var(--px) 22%, var(--pipe) 22% 30%, var(--pipe-hi) 30% 36%, var(--pipe) 36% 82%, var(--pipe-dk) 82% calc(100% - var(--px)), #000 0);
  z-index: 2;
}
.smb-pipe::before {
  content: ""; position: absolute; left: calc(var(--t) * -.15); right: calc(var(--t) * -.15); top: 0; height: calc(var(--t) * .9);
  background: inherit; box-shadow: 0 0 0 var(--px) #000;
}

/* Goombas */
.smb-goomba {
  position: absolute; bottom: 0; left: 100%; width: var(--t); height: var(--t); padding: 0; border: 0; background: none; z-index: 4;
  animation: smb-walk 16s linear infinite;
}
.smb-goomba--2 { animation-delay: -9s; animation-duration: 19s; }
.smb-goomba .px { animation: smb-step .35s steps(1) infinite; }
@keyframes smb-walk { from { left: 100%; } to { left: calc(var(--t) * -1.5); } }
@keyframes smb-step { 50% { transform: scaleX(-1); } }
.smb-goomba.is-squashed { animation-play-state: paused; pointer-events: none; }
.smb-goomba.is-squashed .px { animation: none; transform: scaleY(.45); transform-origin: bottom; }
.smb-goomba.is-gone { visibility: hidden; }

/* Mario */
.smb-mario {
  position: absolute; bottom: 0; left: var(--mx, 4%); width: calc(var(--px) * 12); height: var(--t); z-index: 5;
  transition: left var(--dur, .6s) linear;
}
.smb-mario .px { transform-origin: center; }
.smb-mario.is-left .px { transform: scaleX(-1); }
.smb-mario.is-run { animation: smb-run .18s steps(2) infinite; }
@keyframes smb-run { 50% { transform: translateY(calc(var(--px) * -2)); } }
.smb-mario.is-jump { animation: smb-jump .5s cubic-bezier(.3,.7,.5,1); }
@keyframes smb-jump { 0% { transform: translateY(0); } 44% { transform: translateY(calc(var(--t) * -2)); } 100% { transform: translateY(0); } }

/* Chão */
.smb-ground {
  height: calc(var(--t) * 2); position: relative; z-index: 3;
  background:
    linear-gradient(#0000 calc(var(--t) - var(--px)), #000 0) 0 0 / var(--t) var(--t),
    linear-gradient(90deg, #0000 calc(var(--t) - var(--px)), #000 0) 0 0 / var(--t) var(--t),
    linear-gradient(135deg, #0000 45%, #00000040 45% 52%, #0000 52%) 0 0 / var(--t) var(--t),
    var(--brick);
  box-shadow: inset 0 var(--px) 0 var(--brick-hi);
}

/* ---------- SOBRE ---------- */
.smb-over { position: relative; padding: 80px 0 0; background: var(--sky); }
.smb-sobre { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.smb-box {
  background: rgba(0,0,0,.82); padding: 30px 32px; position: relative;
  box-shadow: 0 0 0 var(--px) #fff, 0 0 0 calc(var(--px) * 2) #000, calc(var(--px) * 4) calc(var(--px) * 4) 0 rgba(0,0,0,.35);
}
.smb-box p { margin: 0 0 14px; }
.smb-box p:last-child { margin: 0; }
.smb-cart { position: relative; margin: 0; justify-self: center; text-align: center; }
.smb-cart img {
  width: min(320px, 70vw); transform: rotate(3deg); image-rendering: auto;
  box-shadow: 0 0 0 var(--px) #000, calc(var(--px) * 4) calc(var(--px) * 4) 0 #000;
  transition: transform .3s;
}
.smb-cart:hover img { transform: rotate(0) scale(1.03); }
.smb-cart figcaption { font-family: var(--mbr-font-pixel); font-size: 10px; margin-top: 16px; text-shadow: 2px 2px 0 #000; }
.smb-cart__coin { position: absolute; right: -6px; top: -16px; }
.smb-why { margin-top: 70px; }
.smb-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.smb-why__grid li { background: #fff; color: #000; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 var(--px) #000, var(--px) calc(var(--px) * 3) 0 #000; }
.smb-why__grid b { font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--brick); }
.smb-why__grid span { font-size: .92em; line-height: 1.45; }
@media (max-width: 960px) { .smb-sobre { grid-template-columns: 1fr; } .smb-why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .smb-why__grid { grid-template-columns: 1fr; } .smb-box { padding: 22px 18px; } }

/* ---------- MASTRO ---------- */
.smb-flagzone { margin-top: 80px; position: relative; }
.smb-flagzone__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: end; }
.smb-flagzone__txt { padding-bottom: 40px; }
.smb-flagzone__txt p { background: rgba(0,0,0,.35); padding: 10px 14px; margin: 0 0 12px; }
.smb-flag__result:empty { display: none; }
.smb-flag__result { font-family: var(--mbr-font-pixel); font-size: 13px; line-height: 1.7; color: #fff3b0; }
.smb-flag { position: relative; height: calc(var(--t) * 10.5); }
.smb-flag__pole {
  position: absolute; left: calc(var(--t) * 1.5); bottom: var(--t); width: calc(var(--t) * .9); height: calc(var(--t) * 9.2);
  background: linear-gradient(90deg, transparent calc(50% - var(--px) * 1.5), #80d010 calc(50% - var(--px) * 1.5) calc(50% + var(--px) * .5), #00a800 calc(50% + var(--px) * .5) calc(50% + var(--px) * 1.5), transparent 0);
  border: 0; padding: 0; cursor: pointer;
}
.smb-flag__pole::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--t) * -1); height: var(--t); background: #c84c0c; box-shadow: inset var(--px) var(--px) 0 #fc9838, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #000; }
.smb-flag__pole:hover { filter: brightness(1.2); }
.smb-flag__ball { position: absolute; left: 50%; top: calc(var(--t) * -.5); width: calc(var(--t) * .5); height: calc(var(--t) * .5); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #80d010 25%, #00a800 26%); box-shadow: 0 0 0 var(--px) #000; }
.smb-flag__flag {
  position: absolute; left: calc(var(--t) * .95); bottom: calc(var(--t) * 9); width: var(--t); height: var(--t);
  background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); transition: bottom 1s linear;
  transform-origin: right;
}
.smb-flag__flag::after { content: ""; position: absolute; right: 14%; top: 12%; width: 40%; height: 40%; border-radius: 50%; background: #00a800; }
.smb-flag__mario { position: absolute; left: calc(var(--t) * 1.6); bottom: calc(var(--t) * 9); width: calc(var(--px) * 12); opacity: 0; }
.smb-flag__mario.is-on { opacity: 1; }
.smb-castle { position: absolute; right: 4%; bottom: var(--t); width: calc(var(--t) * 5); height: calc(var(--t) * 5); }
.smb-castle__body {
  position: absolute; inset: 0;
  background:
    linear-gradient(#0000 calc(50% - var(--px)), #000 0 50%, #0000 0) 0 0 / var(--t) calc(var(--t) * .5),
    linear-gradient(90deg, #0000 calc(100% - var(--px)), #000 0) 0 0 / var(--t) calc(var(--t) * .5),
    #c84c0c;
  clip-path: polygon(0 100%, 0 32%, 8% 32%, 8% 40%, 16% 40%, 16% 32%, 20% 32%, 20% 0, 28% 0, 28% 8%, 36% 8%, 36% 0, 46% 0, 46% 8%, 54% 8%, 54% 0, 64% 0, 64% 8%, 72% 8%, 72% 0, 80% 0, 80% 32%, 84% 32%, 84% 40%, 92% 40%, 92% 32%, 100% 32%, 100% 100%);
}
.smb-castle__body::before { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--t); height: calc(var(--t) * 1.6); transform: translateX(-50%); background: #000; border-radius: calc(var(--t) * .5) calc(var(--t) * .5) 0 0; }
.smb-castle__body::after { content: ""; position: absolute; left: 33%; top: 18%; width: calc(var(--t) * .45); height: calc(var(--t) * .8); background: #000; box-shadow: calc(var(--t) * 1.2) 0 0 #000; }
.smb-castle__flag {
  position: absolute; left: 50%; top: 0; width: calc(var(--t) * .8); height: calc(var(--t) * .8); transform: translate(-50%, 10%);
  background: #fff; transition: transform 1s steps(8), opacity .1s; opacity: 0;
}
.smb-castle__flag::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #d82800; font-size: calc(var(--t) * .5); line-height: 1; }
.smb-castle__flag.is-up { transform: translate(-50%, -110%); opacity: 1; }
.smb-fireworks { position: absolute; inset: 0; pointer-events: none; }
.smb-fw { position: absolute; width: calc(var(--t) * 2); height: calc(var(--t) * 2); transform: translate(-50%, -50%) scale(.2); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, transparent 9%), conic-gradient(from 0deg, #fcbc3c 0 10deg, transparent 10deg 45deg, #fc7460 45deg 55deg, transparent 55deg 90deg, #fcbc3c 90deg 100deg, transparent 100deg 135deg, #fc7460 135deg 145deg, transparent 145deg 180deg, #fcbc3c 180deg 190deg, transparent 190deg 225deg, #fc7460 225deg 235deg, transparent 235deg 270deg, #fcbc3c 270deg 280deg, transparent 280deg 315deg, #fc7460 315deg 325deg, transparent 325deg);
  -webkit-mask: radial-gradient(circle, #000 0 62%, transparent 63%); mask: radial-gradient(circle, #000 0 62%, transparent 63%);
  animation: smb-fw .7s steps(5) forwards;
}
@keyframes smb-fw { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.smb-flag__coin { position: absolute; left: calc(var(--t) * 1.6); top: 0; }
@media (max-width: 760px) { .smb-flagzone__in { grid-template-columns: 1fr; } .smb-flagzone__txt { padding-bottom: 0; } }

/* ---------- TELA PRETA ---------- */
.smb-intermission { background: #000; padding: 90px 0; text-align: center; }
.smb-intermission__world { font-family: var(--mbr-font-pixel); font-size: clamp(16px, 2.6vw, 24px); margin: 0 0 26px; }
.smb-intermission__lives { font-family: var(--mbr-font-pixel); font-size: clamp(14px, 2.2vw, 20px); margin: 0 0 60px; display: flex; justify-content: center; align-items: center; gap: 22px; }
.smb-ficha { max-width: 880px; margin: 0 auto; text-align: left; display: grid; gap: 4px; }
.smb-ficha div { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 12px 0; border-bottom: var(--px) dashed #333; }
.smb-ficha dt { font-family: var(--mbr-font-pixel); font-size: 11px; color: var(--brick-hi); line-height: 1.8; }
.smb-ficha dd { margin: 0; }
@media (max-width: 620px) { .smb-ficha div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- SUBTERRÂNEO ---------- */
.smb-under {
  --ub: #0070ec; --ub-hi: #3cbcfc; --ub-dk: #001c6a;
  position: relative; background: #000; padding: calc(var(--t) * 1.5 + 60px) 0 90px;
}
.smb-under::before, .smb-under::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--t);
  background:
    linear-gradient(#0000 calc(50% - var(--px)), #000 calc(50% - var(--px)) 50%, #0000 50%) 0 0 / var(--t) var(--t),
    linear-gradient(90deg, #0000 calc(100% - var(--px)), #000 0) 0 0 / var(--t) calc(var(--t) / 2),
    linear-gradient(90deg, #0000 calc(50% - var(--px)), #000 calc(50% - var(--px)) 50%, #0000 50%) 0 calc(var(--t) / 2) / var(--t) var(--t),
    var(--ub);
  box-shadow: inset 0 var(--px) 0 var(--ub-hi);
}
.smb-under::before { top: 0; }
.smb-under::after { bottom: 0; }
.smb-worlds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.smb-world {
  border: var(--px) solid var(--ub-hi); background: #001044; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--px) var(--px) 0 var(--ub);
}
.smb-world > b { font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 13px; color: #fff; }
.smb-world em { font-style: normal; font-size: .9em; color: #b9d8ff; }
.smb-world--final { border-color: #fc7460; background: #2a0000; box-shadow: var(--px) var(--px) 0 #d82800; }
.smb-levels { display: flex; gap: 8px; }
.lv { display: inline-grid; place-items: center; width: calc(var(--px) * 12); height: calc(var(--px) * 12); font-style: normal; font-family: var(--mbr-font-pixel); font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000; box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff3; }
.lv--o { background: #5c94fc; } .lv--n { background: #000; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fff3; } .lv--u { background: #0070ec; }
.lv--w { background: #2038ec; background-image: repeating-linear-gradient(0deg, #0000 0 4px, #ffffff33 4px 6px); } .lv--t { background: #00a800; } .lv--c { background: #7c7c7c; }
.smb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 24px 0 0; font-size: .9em; color: #b9d8ff; }
.smb-legend li { display: flex; align-items: center; gap: 8px; }
.smb-legend .lv { width: 14px; height: 14px; }
.smb-toad { margin: 70px auto 0; text-align: center; font-family: var(--mbr-font-pixel); font-size: clamp(12px, 2vw, 18px); line-height: 2.1; }
.smb-toad p { margin: 0; }
.smb-warp { position: relative; margin: 80px auto 0; text-align: center; max-width: 900px; }
.smb-warp__t { font-family: var(--mbr-font-pixel); font-size: clamp(12px, 2vw, 18px); margin: 0 0 12px; }
.smb-warp__sub { margin: 0 auto 30px; max-width: 700px; color: #b9d8ff; }
.smb-warp__pipes { margin-top: calc(var(--t) * 1.6); display: flex; justify-content: center; gap: clamp(20px, 8vw, 110px); align-items: flex-end; }
.smb-warp__pipe {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-decoration: none; color: #fff;
  width: calc(var(--t) * 1.75); height: calc(var(--t) * 2.5); padding-bottom: 10px;
  background: linear-gradient(90deg, #000 var(--px), var(--pipe-hi) var(--px) 22%, var(--pipe) 22% 30%, var(--pipe-hi) 30% 36%, var(--pipe) 36% 82%, var(--pipe-dk) 82% calc(100% - var(--px)), #000 0);
  transition: transform .2s;
}
.smb-warp__pipe::before { content: ""; position: absolute; left: calc(var(--t) * -.15); right: calc(var(--t) * -.15); top: 0; height: calc(var(--t) * .9); background: inherit; box-shadow: 0 0 0 var(--px) #000; }
.smb-warp__pipe b { position: absolute; top: calc(var(--t) * -1.1); font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 14px; }
.smb-warp__pipe span { position: relative; font-size: 12px; background: #000c; padding: 2px 6px; line-height: 1.3; text-align: center; }
.smb-warp__pipe:hover { transform: translateY(calc(var(--px) * 3)); }
.smb-warp__coin { position: absolute; right: 2%; top: 0; }

/* ---------- COPAS (1-3) ---------- */
.smb-trees { position: relative; padding: 90px 0 100px; background: linear-gradient(var(--sky), #8cb4fc); overflow: hidden; }
.smb-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 40px; }
.smb-item { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--t) * 2.6); }
.smb-item__block { position: absolute; top: 0; left: 50%; width: var(--t); height: var(--t); transform: translateX(-50%); border: 0; padding: 0; cursor: pointer; }
.smb-item__block.is-bump { animation: smb-bump2 .22s ease-out; }
@keyframes smb-bump2 { 50% { transform: translate(-50%, calc(var(--px) * -6)); } }
.smb-item__sprite { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); opacity: 0; z-index: -1; transition: transform .6s steps(6), opacity .1s; }
.smb-item.is-open .smb-item__sprite { opacity: 1; transform: translate(-50%, calc(var(--t) * -1.05)); }
.smb-item.is-open .smb-item__sprite svg { animation: smb-float 1s steps(2) infinite .6s; }
@keyframes smb-float { 50% { transform: translateY(calc(var(--px) * -2)); } }
.smb-item__card {
  width: 100%; flex: 1; position: relative; background: #00a800; color: #fff; padding: 22px 18px 26px; text-align: center;
  border-radius: calc(var(--t) * .5) calc(var(--t) * .5) 0 0;
  box-shadow: inset 0 calc(var(--px) * 2) 0 var(--pipe-hi), 0 0 0 var(--px) #000;
}
.smb-item__card::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--t) * -1.6); width: 40%; height: calc(var(--t) * 1.6); transform: translateX(-50%); background: repeating-linear-gradient(90deg, #c84c0c 0 calc(var(--px) * 4), #fcbcb0 calc(var(--px) * 4) calc(var(--px) * 5)); box-shadow: 0 0 0 var(--px) #000; z-index: -1; }
.smb-item__card b { display: block; font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 12px; line-height: 1.6; margin-bottom: 8px; text-shadow: 2px 2px 0 #000; }
.smb-item__card span { font-size: .92em; line-height: 1.45; display: block; }
.smb-enemies__t { margin-top: 110px; }
.smb-enemies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.smb-enemies li { background: rgba(0,0,0,.78); padding: 14px 16px; box-shadow: 0 0 0 var(--px) #000; display: flex; flex-direction: column; gap: 4px; }
.smb-enemies b { font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 11px; color: #fcbc3c; }
.smb-enemies span { font-size: .9em; line-height: 1.4; }
@media (max-width: 900px) { .smb-items { grid-template-columns: 1fr 1fr; row-gap: 90px; } }
@media (max-width: 460px) { .smb-items { grid-template-columns: 1fr; } }

/* ---------- AQUÁTICA (2-2) ---------- */
.smb-water { position: relative; padding: 110px 0 120px; background: linear-gradient(#2038ec, #1428a8 60%, #0c1a78); overflow: hidden; }
.smb-water__surface {
  position: absolute; left: 0; right: 0; top: 0; height: var(--t);
  background: radial-gradient(circle at 50% 0, #5c94fc 0 calc(var(--t) * .42), transparent calc(var(--t) * .44)) 0 0 / var(--t) var(--t), #fcfcfc;
}
.smb-water::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--t) * 1.2);
  background: repeating-linear-gradient(90deg, #fcbcb0 0 calc(var(--t) * .5), #fc7460 calc(var(--t) * .5) var(--t));
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 60%, transparent 61%) 0 0 / var(--t) var(--t) repeat-x; mask: radial-gradient(circle at 50% 100%, #000 0 60%, transparent 61%) 0 0 / var(--t) var(--t) repeat-x;
  opacity: .9;
}
.smb-bubbles i { position: absolute; bottom: -20px; width: calc(var(--px) * 4); height: calc(var(--px) * 4); background: #fff; box-shadow: 0 0 0 var(--px) #9cc8ff; animation: smb-bubble 7s linear infinite; }
.smb-bubbles i:nth-child(1) { left: 8%; } .smb-bubbles i:nth-child(2) { left: 22%; animation-delay: -2s; } .smb-bubbles i:nth-child(3) { left: 41%; animation-delay: -4s; }
.smb-bubbles i:nth-child(4) { left: 63%; animation-delay: -1s; } .smb-bubbles i:nth-child(5) { left: 79%; animation-delay: -5s; } .smb-bubbles i:nth-child(6) { left: 92%; animation-delay: -3s; }
@keyframes smb-bubble { to { transform: translateY(-1200px); opacity: 0; } }
.smb-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; position: relative; z-index: 1; }
.smb-facts li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: rgba(0,0,40,.55); padding: 18px 20px; box-shadow: 0 0 0 var(--px) #fff; }
.smb-facts b { font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 14px; color: #fcbc3c; padding-top: 4px; }
.smb-facts p { margin: 0; line-height: 1.5; }
.smb-minus { font: inherit; color: #fcbc3c; background: none; border: 0; padding: 0; text-decoration: underline dotted; cursor: pointer; }
.smb-minus.was-collected { opacity: .5; filter: none; }
@media (max-width: 760px) { .smb-facts { grid-template-columns: 1fr; } }

/* ---------- CASTELO (8-4) ---------- */
.smb-castle-sec {
  position: relative; padding: calc(var(--t) + 70px) 0 0; background: #000;
}
.smb-castle-sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--t);
  background:
    linear-gradient(#0000 calc(50% - var(--px)), #000 calc(50% - var(--px)) 50%, #0000 50%) 0 0 / var(--t) var(--t),
    linear-gradient(90deg, #0000 calc(100% - var(--px)), #000 0) 0 0 / var(--t) calc(var(--t) / 2),
    #7c7c7c;
  box-shadow: inset 0 var(--px) 0 #bcbcbc;
}
.smb-where { list-style: none; margin: 0 0 80px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.smb-where li { background: #1c1c1c; padding: 18px; box-shadow: 0 0 0 var(--px) #7c7c7c; display: flex; flex-direction: column; gap: 6px; }
.smb-where b { font-family: var(--mbr-font-pixel); font-weight: 400; font-size: 11px; line-height: 1.6; color: #fcbc3c; }
.smb-where span { font-size: .92em; line-height: 1.45; }
@media (max-width: 960px) { .smb-where { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .smb-where { grid-template-columns: 1fr; } }
.smb-bridge { text-align: center; }
.smb-bridge__hint { margin: -10px 0 20px; color: #bcbcbc; }
.smb-bridge__stage { position: relative; height: calc(var(--t) * 7); max-width: 900px; margin: 0 auto; }
.smb-bridge__deck { position: absolute; left: 0; right: calc(var(--t) * 1.5); bottom: calc(var(--t) * 2); height: calc(var(--t) * .5); display: flex; }
.smb-bridge__deck span {
  flex: 1; height: 100%; background:
    linear-gradient(90deg, #0000 calc(50% - var(--px)), #000 0 calc(50% + var(--px)), #0000 0) 0 0 / calc(var(--t) * .5) 100%,
    #c84c0c;
  box-shadow: inset 0 var(--px) 0 #fc9838; transition: transform .5s ease-in, opacity .5s;
}
.smb-bridge__deck span.is-fall { transform: translateY(calc(var(--t) * 4)) rotate(20deg); opacity: 0; }
.smb-bridge__bowser { position: absolute; left: 30%; bottom: calc(var(--t) * 2.5); width: calc(var(--t) * 3.6); transition: transform 1.2s cubic-bezier(.5,0,.9,.4); }
.smb-bridge__bowser img { width: 100%; height: auto; transform: scaleX(-1); animation: smb-bowser 1.4s steps(2) infinite; }
@keyframes smb-bowser { 50% { transform: scaleX(-1) translateY(calc(var(--px) * -4)); } }
.smb-bridge__bowser.is-fall { transform: translateY(calc(var(--t) * 6)) rotate(25deg); }
.smb-bridge__axe { position: absolute; right: calc(var(--t) * .25); bottom: calc(var(--t) * 2.5); width: var(--t); height: var(--t); padding: 0; border: 0; background: none; cursor: pointer; animation: smb-coinflash .6s steps(1) infinite; }
.smb-bridge__axe::after { content: ""; position: absolute; left: calc(var(--t) * -.25); right: calc(var(--t) * -.25); top: 100%; height: calc(var(--t) * 2); background: #7c7c7c; box-shadow: inset 0 var(--px) 0 #bcbcbc; z-index: -1; }
.smb-bridge__axe.is-gone { visibility: hidden; }
.smb-lava {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--t) * 1.4);
  background: radial-gradient(circle at 50% 0, #000 0 calc(var(--t) * .3), transparent calc(var(--t) * .32)) 0 calc(var(--t) * -.18) / var(--t) var(--t) repeat-x, linear-gradient(#fc9838, #d82800);
  animation: smb-lava 1s steps(4) infinite;
}
@keyframes smb-lava { to { background-position: var(--t) calc(var(--t) * -.18), 0 0; } }
.smb-bridge__end { padding: 30px 16px 80px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.smb-bridge__end img { width: 110px; }
.smb-bridge__end p { font-family: var(--mbr-font-pixel); font-size: clamp(11px, 1.8vw, 16px); line-height: 2.1; margin: 0; }
.smb-bridge__stage + .smb-bridge__end[hidden] { display: none; }
.smb-bridge__stage { margin-bottom: 0; }
.smb-castle-sec .smb-bridge { padding-bottom: 0; }

/* ---------- Modo Luigi (2 PLAYER GAME) ---------- */
.smb.is-luigi .smb-hud span[data-hud-name] { color: #80d010; }

/* Nav entre jogos combinando */
body[data-game="smb"] .mbr-gamenav { background: #000; }

@media (prefers-reduced-motion: reduce) {
  .smb-goomba { animation: none; left: 75%; }
  .smb-goomba--2 { display: none; }
  .smb-cloud, .smb-bubbles i { animation: none; }
}

.smb [hidden] { display: none !important; }
.smb-pts {
  position: fixed; z-index: 9000; pointer-events: none; transform: translateX(-50%);
  font-family: var(--mbr-font-pixel); font-size: 12px; color: #fff; text-shadow: 2px 2px 0 #000;
  animation: smb-pts .8s ease-out forwards;
}
@keyframes smb-pts { to { transform: translate(-50%, -60px); opacity: 0; } }