/* =========================================================
   NEW SUPER MARIO BROS. - tema "DS Lite aberto + 2.5D"
   Tudo escopado em .nsmb / body[data-game="nsmb"]
   ========================================================= */

body[data-game="nsmb"] { background: #17171c; }

.nsmb {
  --n-ink: #2b1700;
  --n-red: #e52521;
  --n-red-dark: #9e1410;
  --n-sky: #3fa9f5;
  --n-sky-light: #bfeaff;
  --n-grass: #5cc84a;
  --n-grass-dark: #2c7a2a;
  --n-brick: #c8642c;
  --n-gold: #ffcc1a;
  --n-blue: #1f6fe0;
  --n-ds: #f6f8fa;
  --n-font: "M PLUS Rounded 1c", "Nunito", system-ui, sans-serif;
  --n-display: "Lilita One", "Arial Black", system-ui, sans-serif;
  display: block; color: var(--n-ink); font-family: var(--n-font); font-weight: 500;
  overflow-x: clip;
}
.nsmb .nsmb-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.nsmb .nsmb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.nsmb .nsmb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
.nsmb section { position: relative; overflow-x: clip; }
.nsmb strong, .nsmb b { font-weight: 800; }

/* ---------- Títulos estilo HUD do NSMB ---------- */
.nsmb .nsmb-h2 {
  font-family: var(--n-display); font-weight: 400; margin: 0 0 14px; line-height: 1.05;
  font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: 1.5px; word-spacing: .12em; color: #fff;
  -webkit-text-stroke: 7px var(--n-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--n-ink);
}
.nsmb .nsmb-sechead { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.nsmb .nsmb-sechead p { margin: 0; font-size: 1.08rem; font-weight: 700; }
.nsmb .nsmb-sechead--dark p { color: #e3ecff; }
.nsmb .nsmb-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 50%; background: #fff; border: 2px solid var(--n-ink); font-size: .85em; line-height: 1; box-shadow: 0 2px 0 var(--n-ink); }

/* Painel padrão: branco, contorno grosso e sombra sólida (2.5D) */
.nsmb .nsmb-panel { background: #fff; border: 5px solid var(--n-ink); border-radius: 22px; padding: 26px 28px; box-shadow: inset 0 -6px 0 #e7edf3, 0 8px 0 var(--n-ink); }
.nsmb .nsmb-panel p { margin: 0 0 12px; font-size: 1.04rem; line-height: 1.65; }
.nsmb .nsmb-panel p:last-child { margin-bottom: 0; }

/* ---------- Botões ---------- */
.nsmb .nsmb-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 4px solid var(--n-ink);
  font-family: var(--n-display); font-size: 1.12rem; letter-spacing: .4px; color: var(--n-ink);
  padding: 10px 20px; border-radius: 14px; background: linear-gradient(180deg, #fff6b8, var(--n-gold) 55%, #f0a800);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 5px 0 var(--n-ink); transition: transform .12s, box-shadow .12s;
}
.nsmb .nsmb-btn:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 7px 0 var(--n-ink); }
.nsmb .nsmb-btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 1px 0 var(--n-ink); }
.nsmb .nsmb-btn--red { color: #fff; background: linear-gradient(180deg, #ff7a6e, var(--n-red) 55%, var(--n-red-dark)); text-shadow: 0 2px 0 var(--n-ink); }

/* ---------- Chão 2.5D ---------- */
.nsmb .nsmb-ground {
  height: 58px; position: relative; z-index: 2;
  background:
    linear-gradient(180deg, #8be86a 0 9px, #49b83a 9px 15px, #2c7a2a 15px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 46px, rgba(70,25,0,.35) 46px 48px) 0 18px / 48px 20px,
    linear-gradient(90deg, transparent 0 22px, rgba(70,25,0,.35) 22px 24px, transparent 24px 46px) 0 38px / 48px 20px,
    linear-gradient(180deg, transparent 0 37px, rgba(70,25,0,.35) 37px 39px, transparent 39px),
    linear-gradient(180deg, #e09254, #b4602a);
  background-repeat: no-repeat, repeat-x, repeat-x, no-repeat, no-repeat;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
}

/* =========================================================
   HERO
   ========================================================= */
.nsmb .nsmb-hero { background: linear-gradient(180deg, #2f97ec 0%, #5cbcf8 45%, #a9e4ff 100%); padding-top: 34px; }
.nsmb .nsmb-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nsmb .nsmb-hills { position: absolute; left: 0; right: 0; bottom: 50px; width: 100%; height: 260px; }
.nsmb .nsmb-cloud { position: absolute; width: 150px; height: 44px; background: #fff; border-radius: 40px; box-shadow: 0 5px 0 #cfeaff; animation: nsmb-cloud 70s linear infinite; }
.nsmb .nsmb-cloud::before, .nsmb .nsmb-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.nsmb .nsmb-cloud::before { width: 64px; height: 64px; left: 22px; top: -30px; }
.nsmb .nsmb-cloud::after { width: 48px; height: 48px; left: 74px; top: -20px; }
.nsmb .nsmb-cloud--1 { top: 12%; left: 4%; }
.nsmb .nsmb-cloud--2 { top: 26%; left: 46%; scale: .7; animation-duration: 90s; }
.nsmb .nsmb-cloud--3 { top: 8%; left: 78%; scale: .85; animation-duration: 110s; }
@keyframes nsmb-cloud { from { translate: 0 0; } to { translate: 40vw 0; } }

.nsmb .nsmb-hero__in {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 10px 24px 34px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; align-items: center;
}
.nsmb .nsmb-kicker { display: flex; gap: 8px; margin: 0 0 4px; }
.nsmb .nsmb-kicker span { font-family: var(--mbr-font-pixel); font-size: 10px; letter-spacing: 1px; color: #fff; background: var(--n-ink); padding: 8px 10px; border-radius: 8px; }
.nsmb .nsmb-kicker span + span { background: var(--n-red); }
.nsmb .nsmb-hero__title { margin: 0; }
.nsmb .nsmb-hero__title img { width: min(100%, 560px); filter: drop-shadow(0 8px 0 rgba(20,40,90,.25)); }
.nsmb .nsmb-hero__hook { font-family: var(--n-display); font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.15; margin: 10px 0 10px; color: #fff; letter-spacing: 1px; word-spacing: .12em; -webkit-text-stroke: 5px var(--n-ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--n-ink); }
.nsmb .nsmb-hero__sub { font-size: 1.06rem; font-weight: 700; max-width: 560px; margin: 0 0 16px; background: rgba(255,255,255,.88); border: 3px solid var(--n-ink); border-radius: 16px; padding: 12px 16px; }
.nsmb .nsmb-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nsmb .nsmb-chips li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--n-ink); border-radius: 999px; padding: 4px 14px 4px 6px; font-weight: 800; font-size: .92rem; box-shadow: 0 3px 0 var(--n-ink); }
.nsmb .nsmb-chips img, .nsmb .nsmb-chips svg { width: 26px; height: 26px; object-fit: contain; }
.nsmb .nsmb-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================
   DS LITE (tamanhos em cqw = % da largura do console)
   ========================================================= */
.nsmb .ds { container: ds / inline-size; width: 100%; max-width: 560px; justify-self: center; position: relative; filter: drop-shadow(0 18px 24px rgba(10,40,90,.35)); }
.nsmb .ds__lid, .nsmb .ds__base {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f9 60%, #e2e8ee 100%);
  box-shadow: inset 0 .6cqw 0 #fff, inset 0 -.8cqw 0 rgba(120,135,155,.18), 0 0 0 .35cqw #c3ccd6;
}
.nsmb .ds__lid { height: 64cqw; border-radius: 5cqw 5cqw 1.6cqw 1.6cqw; display: flex; align-items: center; justify-content: center; gap: 4.5cqw; }
.nsmb .ds__speaker { width: 6.5cqw; height: 10cqw; background: radial-gradient(circle, #8f99a5 .42cqw, transparent .55cqw) 0 0 / 1.75cqw 1.75cqw; opacity: .8; }
.nsmb .ds__screen { position: relative; width: 62cqw; aspect-ratio: 4 / 3; border: 1.3cqw solid #2c3038; border-radius: 1.1cqw; background: #000; overflow: hidden; box-shadow: 0 0 0 .4cqw #d4dbe2, inset 0 0 0 .3cqw rgba(255,255,255,.08); }
.nsmb .ds__hinge { position: relative; z-index: 2; height: 6.5cqw; margin: -.6cqw 3cqw; border-radius: 3.2cqw; background: linear-gradient(180deg, #b9c2cb 0%, #f4f6f8 38%, #dfe5eb 62%, #a8b2bd 100%); box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.18); }
.nsmb .ds__led { position: absolute; right: 7cqw; top: 50%; width: 1.5cqw; height: 1.5cqw; translate: 0 -50%; border-radius: 50%; background: #3dff6a; box-shadow: 0 0 1.4cqw #3dff6a; animation: nsmb-led 3s ease-in-out infinite; }
@keyframes nsmb-led { 50% { opacity: .55; } }
.nsmb .ds__base { height: 64cqw; border-radius: 1.6cqw 1.6cqw 5cqw 5cqw; display: grid; grid-template-columns: 1fr 62cqw 1fr; align-items: center; justify-items: center; }

/* Direcional */
.nsmb .ds__dpad { position: relative; width: 14cqw; height: 14cqw; }
.nsmb .ds__dpad::before, .nsmb .ds__dpad-v { content: ""; position: absolute; background: linear-gradient(180deg, #4a5059, #2a2e35); border-radius: .9cqw; box-shadow: 0 .5cqw 0 #15171b; }
.nsmb .ds__dpad::before { left: 0; right: 0; top: 50%; height: 4.6cqw; translate: 0 -50%; }
.nsmb .ds__dpad-v { top: 0; bottom: 0; left: 50%; width: 4.6cqw; translate: -50% 0; }
.nsmb .ds__dpad-btn { position: absolute; top: 50%; width: 5cqw; height: 4.6cqw; translate: 0 -50%; border: 0; background: transparent; z-index: 1; border-radius: .9cqw; }
.nsmb .ds__dpad-btn--l { left: 0; }
.nsmb .ds__dpad-btn--r { right: 0; }
.nsmb .ds__dpad-btn::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 1cqw solid transparent; }
.nsmb .ds__dpad-btn--l::after { border-right-color: #9aa3ad; border-left-width: 0; }
.nsmb .ds__dpad-btn--r::after { border-left-color: #9aa3ad; border-right-width: 0; }
.nsmb .ds__dpad-btn:active, .nsmb .ds__dpad-btn.is-down { background: rgba(255,255,255,.18); }

/* A B X Y */
.nsmb .ds__abxy { position: relative; width: 16cqw; height: 16cqw; }
.nsmb .ds__btn {
  position: absolute; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; display: grid; place-items: center; padding: 0;
  font-family: var(--n-font); font-weight: 900; font-size: 2.6cqw; color: #8a95a3; border: 0;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dde3ea 70%); box-shadow: 0 .55cqw 0 #a9b3be, 0 .8cqw 1cqw rgba(0,0,0,.18);
}
.nsmb .ds__btn--x { left: 50%; top: 0; translate: -50% 0; }
.nsmb .ds__btn--b { left: 50%; bottom: 0; translate: -50% 0; }
.nsmb .ds__btn--y { left: 0; top: 50%; translate: 0 -50%; }
.nsmb .ds__btn--a { right: 0; top: 50%; translate: 0 -50%; color: var(--n-red); }
.nsmb button.ds__btn:active, .nsmb .ds__btn.is-down { box-shadow: 0 .1cqw 0 #a9b3be; transform: translateY(.45cqw); }
.nsmb .ds__startsel { position: absolute; right: 4.5cqw; bottom: 6cqw; display: flex; flex-direction: column; gap: 1.2cqw; font-size: 1.5cqw; font-weight: 900; color: #9aa3ad; letter-spacing: .1cqw; }
.nsmb .ds__startsel span::before { content: ""; display: inline-block; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #dfe5eb; box-shadow: inset 0 0 0 .2cqw #b7c0ca; margin-right: .8cqw; vertical-align: middle; }

/* ---------- Tela de cima: a fase ---------- */
.nsmb .ds-scene { container-type: inline-size; position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #3cb8ff 0%, #8fdcff 60%, #c9f0ff 100%); }
.nsmb .ds-hud { position: absolute; z-index: 6; top: 2.4cqw; left: 3cqw; right: 3cqw; display: flex; justify-content: space-between; align-items: center; font-family: var(--mbr-font-pixel); font-size: 2.5cqw; color: #fff; text-shadow: .35cqw .35cqw 0 #000; pointer-events: none; }
.nsmb .ds-hud__lives { display: inline-flex; align-items: center; gap: .8cqw; }
.nsmb .ds-hud__lives img { width: 3.2cqw; height: 4.2cqw; object-fit: cover; object-position: top; }
.nsmb .ds-cloud { position: absolute; width: 16cqw; height: 5cqw; background: #fff; border-radius: 5cqw; opacity: .95; }
.nsmb .ds-cloud::before { content: ""; position: absolute; width: 7cqw; height: 7cqw; border-radius: 50%; background: #fff; left: 3cqw; top: -3.5cqw; }
.nsmb .ds-cloud--a { top: 14cqw; left: 8cqw; animation: nsmb-drift 26s linear infinite alternate; }
.nsmb .ds-cloud--b { top: 22cqw; left: 64cqw; scale: .7; animation: nsmb-drift 34s linear infinite alternate-reverse; }
@keyframes nsmb-drift { to { translate: 14cqw 0; } }
.nsmb .ds-hill { position: absolute; left: -10cqw; bottom: 8cqw; width: 52cqw; height: 30cqw; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 1.2cqw, transparent 1.4cqw) 0 0 / 7cqw 6cqw, linear-gradient(180deg, #74d65a, #3fae3a); border: .6cqw solid #2c7a2a; }
.nsmb .ds-ground {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 12cqw;
  background:
    linear-gradient(180deg, #8be86a 0 1.8cqw, #49b83a 1.8cqw 3cqw, #2c7a2a 3cqw 3.6cqw, transparent 3.6cqw),
    linear-gradient(90deg, transparent 0 7.6cqw, rgba(70,25,0,.35) 7.6cqw 8cqw) 0 0 / 8cqw 100%,
    linear-gradient(180deg, #e09254, #a8521f);
}
.nsmb .ds-pipe { position: absolute; z-index: 2; right: 2cqw; bottom: 11cqw; width: 13cqw; height: auto; }
.nsmb .ds-goomba { position: absolute; z-index: 4; left: 58cqw; bottom: 11.6cqw; width: 6.6cqw; height: auto; transform-origin: 50% 100%; animation: nsmb-patrol 7s linear infinite alternate, nsmb-waddle .4s ease-in-out infinite alternate; }
.nsmb .ds-goomba.is-flat { animation: none; scale: 1.25 .3; translate: var(--gx, 0) 0; transition: scale .1s; }
.nsmb .ds-goomba.is-flip { animation: nsmb-flip .9s ease-in forwards; }
@keyframes nsmb-patrol { from { translate: 0 0; } to { translate: 16cqw 0; } }
@keyframes nsmb-waddle { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes nsmb-flip { 0% { translate: var(--gx, 0) 0; rotate: 0deg; } 30% { translate: var(--gx, 0) -12cqw; rotate: 180deg; } 100% { translate: var(--gx, 0) 60cqw; rotate: 180deg; } }

/* ? e tijolos 2.5D */
.nsmb .ds-q { position: absolute; z-index: 4; left: 14cqw; bottom: 41cqw; width: 8cqw; height: 8cqw; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.25)); }
.nsmb .ds-q.was-collected { opacity: 1; filter: sepia(1) saturate(.6) brightness(.75) drop-shadow(0 .6cqw 0 rgba(0,0,0,.25)); }
.nsmb .ds-bricks { position: absolute; z-index: 4; left: 40cqw; bottom: 41cqw; display: flex; }
.nsmb .ds-brick, .nsmb .nsmb-brick {
  position: relative; width: 8cqw; height: 8cqw; display: block;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.28)),
    linear-gradient(90deg, transparent calc(50% - .25cqw), #5a250a calc(50% - .25cqw) calc(50% + .25cqw), transparent 0) 0 0 / 100% 50% no-repeat,
    linear-gradient(90deg, transparent 0 calc(25% - .25cqw), #5a250a 0 calc(25% + .25cqw), transparent 0 calc(75% - .25cqw), #5a250a 0 calc(75% + .25cqw), transparent 0) 0 100% / 100% 50% no-repeat,
    linear-gradient(180deg, transparent calc(50% - .25cqw), #5a250a 0 calc(50% + .25cqw), transparent 0),
    linear-gradient(135deg, #e98a4c, var(--n-brick) 50%, #a24a1a);
  box-shadow: inset .55cqw .55cqw 0 rgba(255,220,180,.45), inset -.55cqw -.55cqw 0 rgba(60,20,0,.45);
  border-radius: .5cqw;
  transition: opacity .1s;
}
.nsmb .ds-brick.is-broken { opacity: 0; }
.nsmb .ds-brick__coin { position: absolute; left: 50%; top: 50%; width: 6cqw; height: 7cqw; translate: -50% -50%; z-index: -1; visibility: hidden; }
.nsmb .ds-brick.is-broken .ds-brick__coin { visibility: visible; }
.nsmb .ds-brick--coin.is-broken { opacity: 1; background: none; box-shadow: none; }
.nsmb .ds-debris i { position: absolute; z-index: 5; width: 3.4cqw; height: 3.4cqw; border-radius: .4cqw; background: linear-gradient(135deg, #e98a4c, #a24a1a); box-shadow: inset .4cqw .4cqw 0 rgba(255,220,180,.4); animation: nsmb-debris .8s cubic-bezier(.3,.1,.8,1) forwards; }
@keyframes nsmb-debris { 0% { transform: translate(0, 0) rotate(0); } 35% { transform: translate(calc(var(--dx) * .5), -10cqw) rotate(180deg); } 100% { transform: translate(var(--dx), 40cqw) rotate(420deg); opacity: .4; } }

/* Mario */
.nsmb .ds-mario { position: absolute; z-index: 5; bottom: 12cqw; left: var(--x, 25%); width: 11cqw; translate: -50% 0; transform-origin: 50% 100%; transition: scale .6s cubic-bezier(.3,1.6,.5,1); }
.nsmb .ds-mario img { width: 100%; height: auto; transform-origin: 50% 100%; }
.nsmb .ds-mario__jump { display: none; }
.nsmb .ds-mario.is-jump .ds-mario__stand { display: none; }
.nsmb .ds-mario.is-jump .ds-mario__jump { display: block; animation: nsmb-jump .55s cubic-bezier(.2,.7,.4,1); }
.nsmb .ds-mario.is-mini.is-jump .ds-mario__jump { animation-name: nsmb-jump-hi; }
.nsmb .ds-mario.is-flip img { transform: scaleX(-1); }
.nsmb .ds-mario.is-mega { scale: 2.5; }
.nsmb .ds-mario.is-mini { scale: .45; }
.nsmb .ds-mario.is-hidden { visibility: hidden; }
.nsmb .ds-mario.is-walk .ds-mario__stand { animation: nsmb-step .26s steps(2) infinite; }
@keyframes nsmb-jump { 0% { transform: translateY(0); } 45% { transform: translateY(-15cqw); } 100% { transform: translateY(0); } }
@keyframes nsmb-jump-hi { 0% { transform: translateY(0); } 45% { transform: translateY(-48cqw); } 100% { transform: translateY(0); } }
@keyframes nsmb-step { 50% { transform: translateY(-.8cqw) rotate(-3deg); } }
.nsmb .ds-mario.is-flip.is-walk .ds-mario__stand { animation-name: nsmb-step-f; }
@keyframes nsmb-step-f { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-.8cqw) rotate(3deg); } }
.nsmb .ds-scene.is-shake { animation: nsmb-shake .25s linear; }
@keyframes nsmb-shake { 25% { transform: translate(.6cqw, -.4cqw); } 50% { transform: translate(-.6cqw, .4cqw); } 75% { transform: translate(.4cqw, .2cqw); } }

.nsmb .ds-shell { position: absolute; z-index: 5; left: 0; bottom: 11.6cqw; width: 11cqw; height: 9cqw; display: none; }
.nsmb .ds-shell.is-on { display: block; }
.nsmb .ds-banner { position: absolute; z-index: 7; left: 50%; top: 26%; margin: 0; translate: -50% 0; font-family: var(--n-display); font-size: 9cqw; color: #fff; -webkit-text-stroke: 1.6cqw var(--n-ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; opacity: 0; }
.nsmb .ds-banner.is-on { animation: nsmb-banner 1.2s ease-out forwards; }
@keyframes nsmb-banner { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.1); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4cqw); } }

/* ---------- Tela de baixo: touchscreen ---------- */
.nsmb .ds-touch {
  container-type: inline-size; display: flex; flex-direction: column;
  background:
    linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25% 75%, rgba(255,255,255,.35) 75%) 0 0 / 8cqw 8cqw,
    linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25% 75%, rgba(255,255,255,.35) 75%) 4cqw 4cqw / 8cqw 8cqw,
    linear-gradient(180deg, #ffe58a, #ffcf3f);
  font-family: var(--n-font);
}
.nsmb .ds-touch, .nsmb .ds-touch * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M3 3 L9 5 L31 27 a3 3 0 0 1 -4 4 L5 9 Z' fill='%23d9dee4' stroke='%232b1700' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 3 L9 5 L5 9 Z' fill='%23555'/%3E%3Cpath d='M24 20 L28 24' stroke='%23e52521' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, pointer;
}
.nsmb .ds-ripple { position: absolute; z-index: 9; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; border: .6cqw solid rgba(31,111,224,.7); pointer-events: none; animation: nsmb-ripple .45s ease-out forwards; }
@keyframes nsmb-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.nsmb .ds-progress { display: flex; align-items: center; gap: 1.4cqw; height: 9.5cqw; padding: 0 14cqw 0 3cqw; background: rgba(43,23,0,.82); }
.nsmb .ds-progress__start { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #49b83a; border: .5cqw solid #fff; flex: none; }
.nsmb .ds-progress__track { position: relative; flex: 1; height: 1.4cqw; border-radius: 1cqw; background: repeating-linear-gradient(90deg, #fff 0 2cqw, transparent 2cqw 3.4cqw); }
.nsmb .ds-progress__head { position: absolute; top: 50%; left: var(--p, 0%); width: 5.6cqw; height: 5.6cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #ffd6a8 0 34%, transparent 35%), radial-gradient(circle at 50% 20%, var(--n-red) 0 60%, transparent 61%); background-color: #fff; border: .45cqw solid var(--n-ink); }
.nsmb .ds-progress__flag { width: 3.6cqw; height: 5.4cqw; flex: none; background: linear-gradient(90deg, #fff 0 .5cqw, transparent .5cqw) 0 0 / 100% 100% no-repeat, conic-gradient(from 90deg at .5cqw 0, #49b83a 0 25%, transparent 0); clip-path: polygon(0 0, 100% 25%, .5cqw 50%, .5cqw 100%, 0 100%); }
.nsmb .ds-reserve { position: absolute; top: .8cqw; right: 2.4cqw; width: 9cqw; height: 8cqw; border-radius: 1.4cqw; background: #fff; border: .55cqw solid var(--n-ink); display: grid; place-items: center; box-shadow: inset 0 -.8cqw 0 #e7edf3; }
.nsmb .ds-reserve__icon { width: 6cqw; height: 6cqw; background: center / contain no-repeat; }
.nsmb .ds-tabs { display: flex; gap: 1.2cqw; padding: 1.6cqw 2.4cqw 0; }
.nsmb .ds-tabs button { flex: 1; font-family: var(--n-display); font-size: 4.2cqw; letter-spacing: .1cqw; padding: 1.2cqw 0; border: .55cqw solid var(--n-ink); border-bottom: 0; border-radius: 2cqw 2cqw 0 0; background: #ffe9a8; color: var(--n-ink); }
.nsmb .ds-tabs button[aria-selected="true"] { background: #fff; color: var(--n-red); }
.nsmb .ds-panel { flex: 1; margin: 0 2.4cqw 2.4cqw; background: #fff; border: .55cqw solid var(--n-ink); border-radius: 0 0 2.4cqw 2.4cqw; padding: 2.2cqw; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.nsmb .ds-panel[hidden] { display: none; }
.nsmb .ds-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; flex: 1; }
.nsmb .ds-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; border: .55cqw solid var(--n-ink); border-radius: 2.4cqw; background: linear-gradient(180deg, #f2f8ff, #d8e9ff); box-shadow: 0 .8cqw 0 var(--n-ink); padding: 1cqw .5cqw; font-family: var(--n-display); font-size: 3.5cqw; line-height: 1; color: var(--n-ink); transition: transform .1s, box-shadow .1s; }
.nsmb .ds-item img, .nsmb .ds-item svg { width: 12cqw; height: 11cqw; object-fit: contain; }
.nsmb .ds-item:hover { transform: translateY(-.6cqw); }
.nsmb .ds-item:active, .nsmb .ds-item.is-active { transform: translateY(.8cqw); box-shadow: 0 0 0 var(--n-ink); background: linear-gradient(180deg, #fff6b8, var(--n-gold)); }
.nsmb .ds-tip { margin: 2cqw 0 0; text-align: center; font-size: 3.4cqw; font-weight: 800; color: #5a4a3a; }
.nsmb .ds-game { display: flex; flex-direction: column; flex: 1; gap: 1.4cqw; position: relative; }
.nsmb .ds-game__bar { display: flex; justify-content: space-between; font-family: var(--n-display); font-size: 3.6cqw; }
.nsmb .ds-game__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 1.6cqw; }
.nsmb .ds-hole { position: relative; overflow: hidden; border: 0; padding: 0; border-radius: 1.2cqw; background: linear-gradient(180deg, #bfeaff, #8fd4ff); }
.nsmb .ds-hole::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 34%; background: linear-gradient(90deg, #0a7a1c, #3fd14f 35%, #18a12a 60%, #0a6a18); border: .45cqw solid #053d0d; border-bottom: 0; border-radius: .8cqw .8cqw 0 0; }
.nsmb .ds-hole img { position: absolute; left: 50%; bottom: 10%; width: 46%; translate: -50% 110%; transition: translate .14s ease-out; z-index: 0; }
.nsmb .ds-hole.is-up img { translate: -50% 0; }
.nsmb .ds-hole.is-hit img { translate: -50% 0; scale: 1.2 .35; transform-origin: 50% 100%; transition: scale .08s; }
.nsmb .ds-game__start { position: absolute; inset: 0; background: rgba(255,255,255,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2cqw; padding: 2cqw; }
.nsmb .ds-game__start[hidden] { display: none; }
.nsmb .ds-game__start p { margin: 0; font-size: 3.3cqw; font-weight: 800; line-height: 1.35; }
.nsmb .ds-game__start small { display: block; font-size: 2.8cqw; color: #6a5a4a; }
.nsmb .ds-game__go { font-family: var(--n-display); font-size: 4.6cqw; padding: 1.4cqw 5cqw; border: .55cqw solid var(--n-ink); border-radius: 2cqw; background: linear-gradient(180deg, #ff7a6e, var(--n-red)); color: #fff; box-shadow: 0 .8cqw 0 var(--n-ink); }
.nsmb .ds-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; flex: 1; }
.nsmb .ds-menu a { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 900; font-size: 3.3cqw; line-height: 1.1; color: var(--n-blue); background: linear-gradient(180deg, #ffffff, #e3f0ff); border: .5cqw solid var(--n-blue); border-radius: 1.6cqw; padding: .6cqw; }
.nsmb .ds-menu a:hover, .nsmb .ds-menu a:focus-visible { background: var(--n-blue); color: #fff; }

/* Telinha compacta (celular): telas maiores, botões embaixo */
@container ds (max-width: 470px) {
  .nsmb .ds__lid { height: auto; padding: 6cqw 0; }
  .nsmb .ds__speaker { display: none; }
  .nsmb .ds__screen { width: 88cqw; }
  .nsmb .ds__base { height: auto; padding: 5cqw 0 6cqw; grid-template-columns: 1fr 1fr; row-gap: 4cqw; }
  .nsmb .ds__screen--touch { grid-column: 1 / -1; grid-row: 1; }
  .nsmb .ds__dpad { width: 20cqw; height: 20cqw; }
  .nsmb .ds__dpad::before { height: 6.6cqw; }
  .nsmb .ds__dpad-v { width: 6.6cqw; }
  .nsmb .ds__dpad-btn { width: 7cqw; height: 6.6cqw; }
  .nsmb .ds__dpad-btn::after { border-width: 1.4cqw; }
  .nsmb .ds__abxy { width: 23cqw; height: 23cqw; }
  .nsmb .ds__btn { width: 7.6cqw; height: 7.6cqw; font-size: 3.4cqw; }
  .nsmb .ds__startsel { display: none; }
}

/* =========================================================
   SOBRE
   ========================================================= */
.nsmb .nsmb-sky {
  padding: 80px 0 90px;
  background:
    radial-gradient(ellipse 90px 30px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 70px 24px at 88% 30%, #fff 60%, transparent 62%),
    linear-gradient(180deg, #a9e4ff, #e3f6ff);
}
.nsmb .nsmb-sky--alt { background: linear-gradient(180deg, #e3f6ff, #bfeaff); }
.nsmb .nsmb-about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 30px; align-items: center; }
.nsmb .nsmb-about__art { margin: 0; text-align: center; }
.nsmb .nsmb-about__art img { width: min(100%, 360px); margin: 0 auto; filter: drop-shadow(0 16px 18px rgba(20,60,120,.3)); animation: nsmb-float 4s ease-in-out infinite; }
@keyframes nsmb-float { 50% { transform: translateY(-14px); } }

/* =========================================================
   NASCEMOS JUNTOS
   ========================================================= */
.nsmb .nsmb-born {
  padding: 90px 0 100px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0 8%, transparent 30%),
    linear-gradient(160deg, #ffd84a 0%, #ffb01f 55%, #ff8a1f 100%);
}
.nsmb .nsmb-born::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--br-green) 0 40%, var(--br-yellow) 40% 60%, var(--br-blue) 60% 70%, var(--br-green) 70%); }
.nsmb .nsmb-born__head { text-align: center; margin: 0 auto 30px; max-width: 760px; position: relative; }
.nsmb .nsmb-born__year { font-family: var(--mbr-font-pixel); font-size: clamp(3rem, 12vw, 8rem); margin: 0; line-height: 1; color: rgba(255,255,255,.35); letter-spacing: 4px; }
.nsmb .nsmb-born__head .nsmb-h2 { margin-top: -0.9em; font-size: clamp(2.4rem, 6vw, 4rem); }
.nsmb .nsmb-born__lead { margin: 0; font-size: 1.15rem; font-weight: 800; }
.nsmb .nsmb-born__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.nsmb .nsmb-born__thanks { font-size: 1.1rem !important; color: var(--n-red-dark); }
.nsmb .nsmb-retro { min-width: 0; margin: 0; background: #d4d0c8; border: 3px solid #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 0 0 0 2px var(--n-ink), 0 14px 26px rgba(80,40,0,.3); font-family: Tahoma, Verdana, Geneva, sans-serif; rotate: 1.5deg; }
.nsmb .nsmb-retro__bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #0a246a, #a6caf0); padding: 5px 8px; color: #fff; font-weight: 700; font-size: .85rem; }
.nsmb .nsmb-retro__dots { display: flex; gap: 4px; }
.nsmb .nsmb-retro__dots i { width: 12px; height: 12px; background: #d4d0c8; border: 1px solid #fff; border-right-color: #404040; border-bottom-color: #404040; }
.nsmb .nsmb-retro__tab { display: inline-flex; align-items: center; gap: 6px; }
.nsmb .nsmb-retro__coin { width: 16px; height: 19px; }
.nsmb .nsmb-retro__addr { margin: 6px 8px; background: #fff; border: 2px inset #ccc; padding: 3px 8px; font-size: .82rem; color: #333; }
.nsmb .nsmb-retro__page { margin: 0 8px 8px; background: #000c3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='6' cy='8' r='1' fill='%23fff'/%3E%3Ccircle cx='28' cy='22' r='1.2' fill='%23ffe14a'/%3E%3Ccircle cx='16' cy='34' r='.8' fill='%23fff'/%3E%3C/svg%3E"); color: #fff; padding: 16px; text-align: center; border: 2px inset #ccc; }
.nsmb .nsmb-retro__page img { width: 130px; margin: 0 auto 8px; }
.nsmb .nsmb-retro__marquee { overflow: hidden; max-width: 100%; white-space: nowrap; margin: 0 0 10px; color: #ffe14a; font-weight: 700; font-family: "Comic Sans MS", "Comic Neue", cursive; background: #1b2f8a; padding: 4px 0; border: 1px solid #5f7bff; }
.nsmb .nsmb-retro__marquee span { display: inline-block; padding-left: 100%; animation: nsmb-marquee 16s linear infinite; }
@keyframes nsmb-marquee { to { transform: translateX(-100%); } }
.nsmb .nsmb-retro__nav { list-style: none; margin: 0 0 12px; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.nsmb .nsmb-retro__nav li { background: linear-gradient(#e52521, #8f0d0a); border: 2px outset #ff8a80; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.nsmb .nsmb-retro__wip { margin: 0; display: inline-block; padding: 4px 12px; font-size: .8rem; font-weight: 700; color: #000; background: repeating-linear-gradient(-45deg, #ffcc00 0 10px, #111 10px 20px); }
.nsmb .nsmb-retro__wip { color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.nsmb .nsmb-retro figcaption { font-size: .78rem; color: #333; padding: 0 8px 6px; font-style: italic; }
.nsmb .nsmb-born__line { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.nsmb .nsmb-born__line li { background: rgba(255,255,255,.9); border: 4px solid var(--n-ink); border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 0 var(--n-ink); display: flex; flex-direction: column; gap: 4px; }
.nsmb .nsmb-born__line b { font-family: var(--n-display); font-weight: 400; font-size: 1.6rem; color: var(--n-red); }
.nsmb .nsmb-born__line span { font-weight: 700; }

/* =========================================================
   FICHA (cartucho)
   ========================================================= */
.nsmb .nsmb-spec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.nsmb .nsmb-cart { width: 260px; margin: 0 auto; rotate: -6deg; filter: drop-shadow(0 18px 20px rgba(20,60,120,.3)); }
.nsmb .nsmb-cart__shell { background: linear-gradient(180deg, #4a4f57, #2e3238); border-radius: 14px 14px 6px 6px; padding: 16px 16px 20px; position: relative; clip-path: polygon(0 0, 88% 0, 100% 9%, 100% 100%, 0 100%); }
.nsmb .nsmb-cart__ds { display: block; color: #cfd6dd; font-weight: 900; font-size: .78rem; letter-spacing: 2px; margin-bottom: 10px; }
.nsmb .nsmb-cart__ds b { color: #fff; }
.nsmb .nsmb-cart__shell img { width: 100%; border-radius: 6px; border: 3px solid #fff; }
.nsmb .nsmb-cart__code { display: block; margin-top: 8px; color: #9aa3ad; font-family: var(--mbr-font-pixel); font-size: 8px; }
.nsmb .nsmb-cart__pins { height: 22px; margin: 0 8px; background: repeating-linear-gradient(90deg, #d9b84a 0 8px, #2e3238 8px 12px); border-radius: 0 0 6px 6px; }
.nsmb .nsmb-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.nsmb .nsmb-dl > div { padding: 10px 0; border-bottom: 3px dotted #d5dde6; }
.nsmb .nsmb-dl > div:first-child, .nsmb .nsmb-dl > div:nth-last-child(-n+2) { grid-column: 1 / -1; }
.nsmb .nsmb-dl dt { font-family: var(--n-display); color: var(--n-red); font-size: 1.05rem; letter-spacing: .3px; }
.nsmb .nsmb-dl dd { margin: 0; font-weight: 800; }

/* =========================================================
   MUNDOS (mapa)
   ========================================================= */
.nsmb .nsmb-worlds {
  padding: 80px 0 90px;
  background:
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25% 75%, rgba(0,0,0,.05) 75%) 0 0 / 60px 60px,
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25% 75%, rgba(0,0,0,.05) 75%) 30px 30px / 60px 60px,
    linear-gradient(180deg, #6fd35a, var(--n-grass));
}
.nsmb .nsmb-worlds .nsmb-sechead p { color: #10380d; }
.nsmb .nsmb-map { position: relative; height: 240px; margin: 0 auto 26px; max-width: 1060px; }
.nsmb .nsmb-map__path { position: absolute; inset: 0; width: 100%; height: 100%; }
.nsmb .nsmb-map__nodes { position: absolute; inset: 0; }
.nsmb .nsmb-node {
  --c1: #7be05a; --c2: #2c9a2a;
  position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; padding: 0; background: none; font-family: var(--n-font);
}
.nsmb .nsmb-node b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-family: var(--n-display); font-weight: 400; font-size: 1.8rem; color: #fff; -webkit-text-stroke: 5px var(--n-ink); paint-order: stroke fill; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c1) 30%, var(--c2)); border: 5px solid var(--n-ink); box-shadow: 0 6px 0 var(--n-ink); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.nsmb .nsmb-node span { background: #fff; border: 3px solid var(--n-ink); border-radius: 999px; padding: 1px 10px; font-weight: 900; font-size: .82rem; white-space: nowrap; }
.nsmb .nsmb-node:hover b, .nsmb .nsmb-node:focus-visible b { transform: translateY(-4px) scale(1.06); }
.nsmb .nsmb-node[aria-selected="true"] b { transform: scale(1.18); box-shadow: 0 6px 0 var(--n-ink), 0 0 0 8px rgba(255,255,255,.55); }
.nsmb .nsmb-node[aria-selected="true"] span { background: var(--n-ink); color: #fff; }
.nsmb .nsmb-node.is-secret b::after { content: "?"; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 6px; background: url("../../img/itens/bloco.webp") center / contain no-repeat; font-size: 0; }
.nsmb .nsmb-node b { position: relative; }
.nsmb .nsmb-node--1 { left: 4%; top: 72.7%; --c1: #8be86a; --c2: #2c9a2a; }
.nsmb .nsmb-node--2 { left: 17%; top: 27.3%; --c1: #ffe08a; --c2: #d9a21f; }
.nsmb .nsmb-node--3 { left: 30%; top: 72.7%; --c1: #7fe3ff; --c2: #138fd6; }
.nsmb .nsmb-node--4 { left: 43%; top: 27.3%; --c1: #b7f26a; --c2: #3c7a12; }
.nsmb .nsmb-node--5 { left: 56%; top: 72.7%; --c1: #ffffff; --c2: #8fc6ec; }
.nsmb .nsmb-node--6 { left: 69%; top: 27.3%; --c1: #e0b58a; --c2: #8a5a2b; }
.nsmb .nsmb-node--7 { left: 82%; top: 72.7%; --c1: #e9f6ff; --c2: #5ab4ff; }
.nsmb .nsmb-node--8 { left: 95%; top: 27.3%; --c1: #ff8a5a; --c2: #8a1a10; }
.nsmb .nsmb-minipipe { position: absolute; left: 22.5%; top: 52%; width: 30px; height: 34px; background: linear-gradient(90deg, #0a7a1c, #3fd14f 35%, #18a12a 60%, #0a6a18); border: 3px solid #053d0d; border-radius: 4px 4px 0 0; }
.nsmb .nsmb-minipipe::before { content: ""; position: absolute; left: -6px; right: -6px; top: -10px; height: 12px; background: inherit; border: 3px solid #053d0d; border-radius: 4px; }
.nsmb .nsmb-minipipe__coin { position: absolute; left: 50%; top: -34px; width: 20px; height: 24px; translate: -50% 0; }
.nsmb .nsmb-world { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; max-width: 900px; margin: 0 auto; }
.nsmb .nsmb-world.is-swap > * { animation: nsmb-swap .35s ease; }
@keyframes nsmb-swap { from { opacity: 0; transform: translateY(8px); } }
.nsmb .nsmb-world__badge b {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 16px; font-family: var(--n-display); font-weight: 400; font-size: 3rem; color: #fff; -webkit-text-stroke: 6px var(--n-ink); paint-order: stroke fill;
  background:
    radial-gradient(circle at 12px 12px, #8a5a00 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) 12px, #8a5a00 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #8a5a00 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8a5a00 3px, transparent 4px),
    linear-gradient(135deg, #fff1a0, var(--n-gold) 45%, #e29400);
  border: 4px solid var(--n-ink); box-shadow: inset 4px 4px 0 rgba(255,255,255,.55), inset -4px -4px 0 rgba(120,70,0,.4), 0 6px 0 var(--n-ink);
}
.nsmb .nsmb-world h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.7rem; margin: 0 0 6px; color: var(--n-red); }
.nsmb .nsmb-world__boss { background: #fff3c4; border-radius: 12px; padding: 8px 12px; border: 3px solid var(--n-ink); display: inline-block; }
.nsmb .nsmb-world__boss span { font-weight: 900; color: var(--n-red-dark); }

/* =========================================================
   POWER-UPS (subterrâneo azul)
   ========================================================= */
.nsmb .nsmb-under {
  padding: 80px 0 90px; color: #fff;
  background:
    linear-gradient(90deg, transparent 0 94px, rgba(0,0,0,.28) 94px 96px) 0 0 / 96px 56px,
    linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.28) 46px 48px, transparent 48px 96px) 0 28px / 96px 56px,
    linear-gradient(180deg, transparent 0 26px, rgba(0,0,0,.28) 26px 28px) 0 0 / 100% 28px,
    linear-gradient(180deg, #1d3c8f, #0e1f52);
}
.nsmb .nsmb-pus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nsmb .nsmb-pu { position: relative; background: #fff; color: var(--n-ink); border: 5px solid var(--n-ink); border-radius: 20px; padding: 18px 20px 20px; box-shadow: 0 8px 0 #050b20; }
.nsmb .nsmb-pu img, .nsmb .nsmb-pu > svg { width: 74px; height: 70px; object-fit: contain; margin-bottom: 6px; }
.nsmb .nsmb-pu h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.45rem; margin: 0 0 4px; color: var(--n-blue); }
.nsmb .nsmb-pu p { margin: 0; font-size: .98rem; }
.nsmb .nsmb-pu--new { background: linear-gradient(180deg, #fffbe0, #fff 40%); }
.nsmb .nsmb-pu__tag { position: absolute; top: 14px; right: 14px; font-family: var(--n-display); background: var(--n-red); color: #fff; padding: 3px 12px; border-radius: 999px; border: 3px solid var(--n-ink); rotate: 6deg; }
.nsmb .nsmb-moves { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.nsmb .nsmb-moves > div { background: rgba(255,255,255,.08); border: 3px solid rgba(255,255,255,.35); border-radius: 20px; padding: 20px 22px; }
.nsmb .nsmb-moves h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 8px; color: var(--n-gold); }
.nsmb .nsmb-moves ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.nsmb .nsmb-moves p { margin: 0 0 12px; }
.nsmb .nsmb-starcoins__row { display: flex; gap: 14px; align-items: center; }
.nsmb .nsmb-starcoins__row svg { width: 54px; height: 54px; animation: mbr-spin 2.4s linear infinite; }
.nsmb .nsmb-starcoins__row svg:nth-child(2) { animation-delay: -.6s; }
.nsmb .nsmb-starcoins__coin { width: 44px; height: 52px; }

/* =========================================================
   MARIO VS. LUIGI
   ========================================================= */
.nsmb .nsmb-vs { padding: 80px 0 90px; color: #fff; background: linear-gradient(115deg, #e52521 0 49.8%, var(--n-ink) 49.8% 50.2%, #1f9a35 50.2%); }
.nsmb .nsmb-vs::before { content: "VS"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--n-display); font-size: 34vw; color: rgba(255,255,255,.07); line-height: 1; pointer-events: none; }
.nsmb .nsmb-vs__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; }
.nsmb .nsmb-vs__art { margin: 0; }
.nsmb .nsmb-vs__art img { width: min(100%, 440px); margin: 0 auto; filter: drop-shadow(0 18px 18px rgba(0,0,0,.35)); }
.nsmb .nsmb-vs__txt { background: rgba(43,23,0,.55); border: 4px solid var(--n-ink); border-radius: 22px; padding: 26px 28px; backdrop-filter: blur(2px); }
.nsmb .nsmb-vs__txt p { margin: 0 0 12px; font-size: 1.04rem; line-height: 1.65; }
.nsmb .nsmb-vs__txt a { color: var(--n-gold); font-weight: 900; }
.nsmb .nsmb-vs__badge { display: flex; align-items: center; gap: 10px; font-family: var(--n-display); font-size: 1.2rem; margin: 0 0 6px !important; }
.nsmb .nsmb-vs__badge span { padding: 2px 12px; border-radius: 8px; border: 3px solid var(--n-ink); }
.nsmb .nsmb-vs__badge .is-m { background: var(--n-red); }
.nsmb .nsmb-vs__badge .is-l { background: #1f9a35; }
.nsmb .nsmb-vs__badge i { font-style: normal; color: var(--n-gold); }
.nsmb .nsmb-vs__luigi { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.12); border-radius: 14px; padding: 10px 14px; margin: 16px 0 0 !important; }
.nsmb .nsmb-vs__luigi img { width: 48px; height: 80px; object-fit: contain; flex: none; }
.nsmb .nsmb-vs__luigi .nsmb-key { color: var(--n-ink); }

/* =========================================================
   CURIOSIDADES (blocos)
   ========================================================= */
.nsmb .nsmb-facts__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 20px; }
.nsmb .nsmb-facts__grid li { position: relative; padding-top: 26px; }
.nsmb .nsmb-facts__grid li::before { content: ""; position: absolute; left: 22px; top: 0; width: 52px; height: 52px; background: url("../../img/itens/bloco.webp") center / contain no-repeat; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); z-index: 1; transition: transform .2s; }
.nsmb .nsmb-facts__grid li:hover::before { transform: translateY(-8px); }
.nsmb .nsmb-facts__grid p { margin: 0; height: 100%; background: #fff; border: 4px solid var(--n-ink); border-radius: 18px; padding: 34px 20px 18px; box-shadow: 0 6px 0 var(--n-ink); font-size: 1rem; }
.nsmb .nsmb-facts__grid b { display: block; font-family: var(--n-display); font-weight: 400; font-size: 1.3rem; color: var(--n-red); margin-bottom: 4px; }

/* =========================================================
   A SÉRIE CONTINUA (noite no castelo)
   ========================================================= */
.nsmb .nsmb-series {
  padding: 80px 0 90px; color: #fff;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 12%, #fff, transparent),
    radial-gradient(1px 1px at 40% 30%, #fff, transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent),
    radial-gradient(ellipse at 50% 120%, rgba(255,90,30,.55), transparent 55%),
    linear-gradient(180deg, #1b1650, #2a1a4f 60%, #3a1636);
}
.nsmb .nsmb-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
.nsmb .nsmb-tl::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--n-gold) 0 16px, transparent 16px 26px); }
.nsmb .nsmb-tl__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nsmb .nsmb-tl__year { position: relative; z-index: 1; font-family: var(--n-display); font-size: 1.15rem; background: linear-gradient(135deg, #e98a4c, var(--n-brick) 50%, #a24a1a); border: 4px solid var(--n-ink); border-radius: 10px; padding: 8px 12px; box-shadow: inset 3px 3px 0 rgba(255,220,180,.45), inset -3px -3px 0 rgba(60,20,0,.45), 0 5px 0 var(--n-ink); }
.nsmb .nsmb-tl__card { background: #fff; color: var(--n-ink); border: 4px solid var(--n-ink); border-radius: 16px; padding: 14px; box-shadow: 0 6px 0 #0a0820; flex: 1; width: 100%; }
.nsmb .nsmb-tl__card img { width: 46px; height: 46px; object-fit: contain; float: right; margin: 0 0 4px 6px; }
.nsmb .nsmb-tl__card h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.15rem; line-height: 1.15; margin: 0 0 4px; color: var(--n-blue); }
.nsmb .nsmb-tl__card p { margin: 0; font-size: .9rem; }
.nsmb .nsmb-tl__plat { font-weight: 900; color: var(--n-red); font-size: .8rem !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px !important; }
.nsmb .nsmb-tl__item.is-origin .nsmb-tl__card { background: linear-gradient(180deg, #fffbe0, #fff 50%); box-shadow: 0 6px 0 #0a0820, 0 0 0 4px var(--n-gold); }
.nsmb .nsmb-tl__item--block { justify-content: flex-start; }
.nsmb .nsmb-tl__q { width: 60px; height: 60px; position: relative; z-index: 1; }

/* =========================================================
   ONDE JOGAR (canos)
   ========================================================= */
.nsmb .nsmb-where { padding: 80px 0 0; background: linear-gradient(180deg, #a9e4ff, #e3f6ff); }
.nsmb .nsmb-pipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: end; margin-bottom: -4px; }
.nsmb .nsmb-pipe { display: flex; flex-direction: column; align-items: center; }
.nsmb .nsmb-pipe__top { width: 100%; height: 38px; border: 5px solid #053d0d; border-radius: 10px; background: linear-gradient(90deg, #0a7a1c, #5fe36a 30%, #22b334 55%, #0a6a18); position: relative; z-index: 1; }
.nsmb .nsmb-pipe__body { width: calc(100% - 28px); border: 5px solid #053d0d; border-top: 0; background: linear-gradient(90deg, #0a7a1c, #5fe36a 30%, #22b334 55%, #0a6a18); padding: 18px 18px 30px; color: #fff; min-height: 200px; }
.nsmb .nsmb-pipe__body h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 1px; word-spacing: .1em; margin: 0 0 6px; -webkit-text-stroke: 5px #053d0d; paint-order: stroke fill; }
.nsmb .nsmb-pipe__body p { margin: 0; font-weight: 700; background: rgba(5,61,13,.55); border-radius: 12px; padding: 10px 12px; }
.nsmb .nsmb-pipe:nth-child(2) .nsmb-pipe__body { min-height: 250px; }
.nsmb .nsmb-pipe--alt .nsmb-pipe__body { min-height: 230px; }
.nsmb .nsmb-pipe--alt .nsmb-pipe__top, .nsmb .nsmb-pipe--alt .nsmb-pipe__body { filter: hue-rotate(-100deg) saturate(1.3); }
.nsmb .nsmb-pipe--alt .nsmb-pipe__body p, .nsmb .nsmb-pipe--alt .nsmb-pipe__body h3 { filter: hue-rotate(100deg); }
body[data-game="nsmb"] .mbr-gamenav { background: #17171c; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1100px) {
  .nsmb .nsmb-hero__in { grid-template-columns: 1fr; text-align: center; }
  .nsmb .nsmb-hero__title img { margin: 0 auto; width: min(90%, 480px); }
  .nsmb .nsmb-kicker, .nsmb .nsmb-chips, .nsmb .nsmb-hero__cta { justify-content: center; }
  .nsmb .nsmb-hero__sub { margin-left: auto; margin-right: auto; }
  .nsmb .nsmb-tl { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .nsmb .nsmb-tl::before { display: none; }
}
@media (max-width: 900px) {
  .nsmb .nsmb-about, .nsmb .nsmb-born__grid, .nsmb .nsmb-spec, .nsmb .nsmb-vs__in, .nsmb .nsmb-moves { grid-template-columns: minmax(0, 1fr); }
  .nsmb .nsmb-about__art img { width: min(60%, 260px); }
  .nsmb .nsmb-pus { grid-template-columns: repeat(2, 1fr); }
  .nsmb .nsmb-born__line { grid-template-columns: 1fr; }
  .nsmb .nsmb-vs__art img { width: min(70%, 320px); }
  .nsmb .nsmb-pipes { grid-template-columns: 1fr; gap: 0; }
  .nsmb .nsmb-pipe__body, .nsmb .nsmb-pipe:nth-child(2) .nsmb-pipe__body, .nsmb .nsmb-pipe--alt .nsmb-pipe__body { min-height: 0; }
  .nsmb .nsmb-pipe + .nsmb-pipe { margin-top: 18px; }
  /* mapa vira lista em "zigue-zague" vertical */
  .nsmb .nsmb-map { height: auto; }
  .nsmb .nsmb-map__path { display: none; }
  .nsmb .nsmb-map__nodes { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
  .nsmb .nsmb-node { position: static; translate: none; }
  .nsmb .nsmb-minipipe { left: 50%; top: auto; bottom: -54px; translate: -50% 0; }
  .nsmb .nsmb-map { margin-bottom: 70px; }
}
@media (max-width: 560px) {
  .nsmb .nsmb-hero__in { padding: 6px 14px 26px; }
  .nsmb .nsmb-panel { padding: 20px 18px; }
  .nsmb .nsmb-pus { grid-template-columns: 1fr; }
  .nsmb .nsmb-tl { grid-template-columns: 1fr 1fr; }
  .nsmb .nsmb-dl { grid-template-columns: 1fr; }
  .nsmb .nsmb-node b { width: 52px; height: 52px; font-size: 1.5rem; }
  .nsmb .nsmb-node span { font-size: .72rem; padding: 1px 6px; }
  .nsmb .nsmb-world { grid-template-columns: 1fr; text-align: center; }
  .nsmb .nsmb-world__badge b { margin: 0 auto; width: 72px; height: 72px; font-size: 2.4rem; }
  .nsmb .nsmb-vs__txt { padding: 20px 18px; }
  .nsmb .nsmb-cart { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .nsmb .nsmb-cloud, .nsmb .ds-cloud, .nsmb .ds-goomba, .nsmb .ds__led, .nsmb .nsmb-about__art img, .nsmb .nsmb-retro__marquee span, .nsmb .nsmb-starcoins__row svg { animation: none !important; }
  .nsmb .nsmb-retro__marquee span { padding-left: 0; white-space: normal; }
  .nsmb .nsmb-retro__marquee { white-space: normal; }
}