/* =========================================================
   MARIO KART 8 DELUXE & WORLD - tema "autódromo"
   Tudo escopado em .kart / body[data-game="kart"]
   ========================================================= */

body[data-game="kart"] { background: #1d1f23; }
body[data-game="kart"] .mbr-gamenav { background: #141518; }

.mk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

body[data-game="kart"] {
  --mk-asphalt: #2a2c31;
  --mk-dark: #17181c;
  --mk-red: #e4202a;
  --mk-red-dk: #8f0c12;
  --mk-yellow: #ffd400;
  --mk-blue: #1e7bff;
  --mk-green: #19c94b;
  --mk-display: "Racing Sans One", "Lilita One", system-ui, sans-serif;
  --mk-hud: "Russo One", "Lilita One", system-ui, sans-serif;
  --mk-body: "Titillium Web", "Nunito", system-ui, sans-serif;
  --asphalt:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(rgba(0,0,0,.28) 1px, transparent 1.6px) 3px 4px / 11px 11px,
    radial-gradient(rgba(255,255,255,.03) 2px, transparent 2.5px) 5px 2px / 19px 19px;
}
.kart {
  font-family: var(--mk-body);
  font-size: 1.06rem;
  color: #eceef2;
  background: var(--asphalt), var(--mk-asphalt);
  overflow-x: clip;
  position: relative;
}
.kart img { max-width: 100%; }
.mk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 2; }
.kart strong { color: #fff; }

/* ---------- Tipografia / cabeçalhos ---------- */
.mk-h2 {
  font-family: var(--mk-display); font-weight: 400; text-transform: uppercase; font-style: italic;
  font-size: clamp(2.1rem, 5.4vw, 3.8rem); line-height: .95; letter-spacing: .5px; margin: 0;
  color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.mk-h3 { font-family: var(--mk-display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; margin: 40px 0 16px; color: #fff; }
.mk-h3 small { font-family: var(--mk-body); text-transform: none; font-size: .95rem; color: #b9bdc7; }
.mk-kicker { margin: 0 0 4px; font-family: var(--mk-hud); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mk-yellow); }
.mk-head { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.mk-head__pos {
  flex-shrink: 0; font-family: var(--mk-display); font-style: italic; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: .8;
  background: linear-gradient(180deg, #fff6a0 0%, #ffd400 45%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(0 6px 0 rgba(0,0,0,.4));
  padding-right: 6px;
}
.mk-lead { max-width: 820px; font-size: 1.12rem; margin: -10px 0 28px; color: #d8dbe2; }
.mk-c-blue { color: #4cb8ff; } .mk-c-orange { color: #ff9d2e; } .mk-c-purple { color: #d07bff; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0;
  font-family: var(--mk-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .5px; color: #fff;
  padding: 12px 26px 10px; background: var(--mk-red); transform: skewX(-12deg);
  box-shadow: 5px 5px 0 #000; transition: transform .15s, box-shadow .15s, background .2s;
}
.mk-btn:hover { transform: skewX(-12deg) translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.mk-btn:active { transform: skewX(-12deg) translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
.mk-btn--ghost { background: transparent; border: 2px solid #fff; box-shadow: 5px 5px 0 rgba(0,0,0,.6); font-size: 1rem; }
.mk-btn--ghost:hover { background: rgba(255,255,255,.1); }

.mk-curb { position: absolute; left: 0; right: 0; height: 18px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--mk-red) 0 48px, #fff 48px 96px);
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.mk-curb--top { top: 0; }
.mk-curb--bottom { bottom: 0; }

/* ---------- Seções ---------- */
.mk-sec { position: relative; padding: clamp(70px, 8vw, 110px) 0; overflow-x: clip; }
.mk-sec::before { /* zebra entre seções */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: repeating-linear-gradient(90deg, var(--mk-red) 0 36px, #fff 36px 72px);
}

/* ===================== HERÓI ===================== */
.mk-hero { position: relative; overflow: hidden; padding: 60px 0 96px; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(30,123,255,.22), transparent 70%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(228,32,42,.18), transparent 70%);
}
.mk-hero::after { /* linha de largada quadriculada */
  content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 28px; z-index: 1;
  background: conic-gradient(#111 25%, #f4f4f4 0 50%, #111 0 75%, #f4f4f4 0) 0 0 / 28px 28px;
  opacity: .92;
}
.mk-hero__lane { position: absolute; left: 0; right: 0; bottom: 62px; height: 6px; z-index: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 70px, transparent 70px 140px); animation: mk-lane 1.2s linear infinite; }
@keyframes mk-lane { to { background-position: -140px 0; } }
.mk-hero__eight { position: absolute; right: -60px; top: 40px; width: 560px; opacity: .14; transform: rotate(-12deg); z-index: 0; pointer-events: none; }
.mk-hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.mk-chips span { font-family: var(--mk-hud); font-size: .9rem; letter-spacing: .5px; background: #0d0e10; color: var(--mk-yellow); padding: 7px 14px; transform: skewX(-12deg); border-left: 5px solid var(--mk-red); }
.mk-hero__logos { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.mk-hero__logos img { filter: drop-shadow(0 6px 0 rgba(0,0,0,.5)); }
.mk-hero__logos img:first-child { width: min(380px, 100%); }
.mk-hero__logos img:last-of-type { width: min(300px, 80%); }
.mk-amp { font-family: var(--mk-display); font-size: 3.4rem; color: var(--mk-yellow); text-shadow: 3px 3px 0 #000; line-height: 1; }
.mk-hook { font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 600px; margin: 18px 0 26px; color: #e7e9ee; }
.mk-hook strong { color: var(--mk-yellow); }
.mk-hero__cta { display: flex; flex-wrap: wrap; gap: 18px; padding-left: 6px; }

.mk-hero__art { position: relative; min-height: 520px; }
.mk-lakitu { position: absolute; left: 4%; top: 0; width: 170px; z-index: 3; animation: mk-hover 3s ease-in-out infinite; }
@keyframes mk-hover { 50% { transform: translateY(-10px); } }
.mk-lakitu img { width: 100%; filter: drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
.mk-rod { position: absolute; left: 66%; top: 34%; width: 4px; height: 120px; background: #6b4a2a; transform-origin: top; transform: rotate(-38deg); border-radius: 2px; }
.mk-lights {
  position: absolute; left: 112%; top: 52%; width: 56px; padding: 8px; display: grid; gap: 8px;
  background: #111; border: 3px solid #444; border-radius: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.5);
}
.mk-lights::before { content: ""; position: absolute; left: 50%; top: -26px; width: 2px; height: 26px; background: #ddd; }
.mk-lights i { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5a1a1a, #2a0b0b); box-shadow: inset 0 -3px 0 rgba(0,0,0,.5); transition: background .1s, box-shadow .1s; }
.mk-lights.l1 i:nth-child(1), .mk-lights.l2 i:nth-child(-n+2), .mk-lights.l3 i { background: radial-gradient(circle at 35% 35%, #ffb3a8, #ff2a1a 55%, #a30d00); box-shadow: 0 0 18px #ff2a1a; }
.mk-lights.go i { background: radial-gradient(circle at 35% 35%, #c8ffd2, #19e055 55%, #0a8a2e) !important; box-shadow: 0 0 22px #19e055 !important; }
.mk-covers { position: absolute; right: 0; bottom: 0; width: 100%; height: 380px; }
.mk-cover { position: absolute; bottom: 0; width: 210px; border-radius: 10px; border: 4px solid #fff; box-shadow: 0 20px 40px rgba(0,0,0,.55); transition: transform .3s; }
.mk-cover--a { right: 190px; transform: rotate(-8deg); }
.mk-cover--b { right: 20px; transform: rotate(6deg); z-index: 1; }
.mk-cover:hover { transform: rotate(0) translateY(-10px) scale(1.03); z-index: 2; }
.mk-coin-track { position: absolute; left: 38%; bottom: 52px; z-index: 3; }

/* ===================== SOBRE / FICHA ===================== */
.mk-about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.mk-about__txt p { margin: 0 0 16px; font-size: 1.1rem; }
.mk-timing { background: #0b0c0e; border: 3px solid #3a3d45; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.mk-timing__title { margin: 0; padding: 12px 18px; font-family: var(--mk-hud); font-weight: 400; font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase; background: var(--mk-red); color: #fff; }
.mk-tablewrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.mk-table th, .mk-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #23262c; vertical-align: top; }
.mk-table thead th { font-family: var(--mk-hud); font-weight: 400; color: var(--mk-yellow); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; background: #15171b; }
.mk-table tbody th { font-family: var(--mk-hud); font-weight: 400; font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; color: #9aa0ad; white-space: nowrap; }
.mk-table tbody tr:nth-child(odd) td, .mk-table tbody tr:nth-child(odd) th { background: rgba(255,255,255,.025); }
.mk-table td b { font-family: var(--mk-hud); font-weight: 400; color: var(--mk-yellow); font-size: 1.15rem; }

/* ===================== CAIXA DE ITENS ===================== */
.mk-items { background: radial-gradient(ellipse 50% 50% at 30% 45%, rgba(255,255,255,.06), transparent 70%), var(--mk-dark); }
.mk-roulette {
  position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: center;
  padding: 34px; border-radius: 26px; background: linear-gradient(135deg, #22252b, #15171b); border: 3px solid #34373f;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.mk-roulette__box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mk-roulette__hint { margin: 0; color: #b9bdc7; font-size: .95rem; }
.mk-itembox { width: 220px; height: 220px; border: 0; background: none; padding: 0; perspective: 700px; display: grid; place-items: center; border-radius: 30px; }
.mk-itembox:focus-visible { outline-offset: 8px; }
.mk-cube { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; animation: mk-cube 7s linear infinite; transition: scale .25s, opacity .25s; }
.mk-cube i {
  position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,80,80,.6), rgba(255,210,0,.55) 30%, rgba(60,220,120,.55) 55%, rgba(60,150,255,.6) 78%, rgba(200,90,255,.6));
  border: 3px solid rgba(255,255,255,.85); box-shadow: inset 0 0 30px rgba(255,255,255,.45), 0 0 24px rgba(255,255,255,.25);
}
.mk-cube i::after { content: "?"; font-family: var(--mk-display); font-size: 84px; line-height: 1; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.9), 3px 3px 0 rgba(0,0,0,.25); }
.mk-cube i:nth-child(1) { transform: translateZ(66px); }
.mk-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(66px); }
.mk-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(66px); }
.mk-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(66px); }
.mk-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(66px); }
.mk-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(66px); }
@keyframes mk-cube { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
.mk-itembox:hover .mk-cube { animation-duration: 2.4s; }
.mk-itembox.is-open .mk-cube { scale: 1.6; opacity: 0; }
.mk-itembox[aria-disabled="true"] { cursor: progress; }

.mk-roulette__panel { display: flex; gap: 24px; align-items: center; }
.mk-slot {
  flex-shrink: 0; width: 158px; height: 158px; border-radius: 30px; padding: 8px;
  background: linear-gradient(#fff, #cfd3da); box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.mk-slot__in {
  width: 100%; height: 100%; border-radius: 23px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3d4250, #0f1013 75%); box-shadow: inset 0 4px 12px rgba(0,0,0,.7);
}
.mk-slot__in img, .mk-slot__in svg { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.mk-slot__in.is-spin img, .mk-slot__in.is-spin svg { animation: mk-tick .09s linear; }
@keyframes mk-tick { from { transform: translateY(-30%); opacity: .3; } }
.mk-slot__in.is-final img, .mk-slot__in.is-final svg { animation: mk-land .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes mk-land { from { transform: scale(.4); } }
.mk-result__label { margin: 0; font-family: var(--mk-hud); font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: #9aa0ad; }
.mk-result__name { margin: 2px 0 6px; font-family: var(--mk-display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--mk-yellow); text-transform: uppercase; line-height: 1; text-shadow: 3px 3px 0 #000; }
.mk-result__desc { margin: 0; color: #e2e4ea; }
.mk-result__tip { display: block; margin-top: 8px; font-size: .95rem; color: #9fe3ff; }
.mk-minibox { position: absolute; right: 18px; top: -26px; width: 46px; height: 46px; border-radius: 10px; }
.kart .mk-minibox, .kart .mk-qtrivia {
  background: linear-gradient(135deg, rgba(255,80,80,.85), rgba(255,210,0,.85) 30%, rgba(60,220,120,.85) 55%, rgba(60,150,255,.85) 78%, rgba(200,90,255,.85));
  border: 3px solid #fff; box-shadow: 0 0 14px rgba(255,255,255,.5);
}
.kart .mk-minibox::after, .kart .mk-qtrivia::after { content: "?"; display: grid; place-items: center; height: 100%; font-family: var(--mk-display); font-size: 26px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.3); }

.mk-inventory { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.mk-inventory button {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px;
  background: #22252b; border: 2px solid #34373f; border-radius: 16px; color: #fff;
  font-family: var(--mk-body); font-weight: 700; font-size: .95rem; line-height: 1.1;
  transition: transform .15s, border-color .15s, background .15s;
}
.mk-inventory button:hover, .mk-inventory button[aria-pressed="true"] { transform: translateY(-4px); border-color: var(--mk-yellow); background: #2b2f37; }
.mk-inventory svg, .mk-inventory img { width: 56px; height: 56px; object-fit: contain; }
.kart .is-gold { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.15); }

/* ===================== DRIFT ===================== */
.mk-drill { display: grid; grid-template-columns: 1fr; gap: 22px; }
.mk-strip {
  --kartw: 118px;
  position: relative; height: 190px; border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7) 0 60px, transparent 60px) 0 50% / 120px 6px repeat-x,
    var(--asphalt), #33363c;
  box-shadow: inset 0 0 0 3px #0b0c0e, 0 20px 40px rgba(0,0,0,.4);
}
.mk-strip::before, .mk-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--mk-red) 0 34px, #fff 34px 68px); z-index: 1; }
.mk-strip::before { top: 0; } .mk-strip::after { bottom: 0; }
.mk-strip__start { position: absolute; left: 18px; top: 14px; bottom: 14px; width: 10px; background: #fff; writing-mode: vertical-rl; font: 10px var(--mk-hud); color: transparent; }
.mk-strip__finish { position: absolute; right: 0; top: 14px; bottom: 14px; width: 36px; background: conic-gradient(#111 25%, #f4f4f4 0 50%, #111 0 75%, #f4f4f4 0) 0 0 / 18px 18px; }
.mk-strip__marks { position: absolute; inset: 14px 36px 14px 28px; display: flex; justify-content: space-around; pointer-events: none; }
.mk-strip__marks i { font-style: normal; font-family: var(--mk-hud); font-size: .75rem; color: rgba(255,255,255,.4); border-left: 2px dashed rgba(255,255,255,.18); padding: 6px 0 0 6px; height: 100%; }
.mk-coin-finish { position: absolute; right: 50px; top: 50%; margin-top: -20px; z-index: 2; }
.mk-kart { position: absolute; left: 32px; bottom: 26px; width: var(--kartw); z-index: 3; transition: transform 1s cubic-bezier(.15,.85,.25,1); }
.mk-kart__svg { width: 100%; height: auto; overflow: visible; display: block; filter: drop-shadow(0 8px 4px rgba(0,0,0,.45)); transform-origin: 30% 90%; }
.mk-kart.is-drifting .mk-kart__svg { animation: mk-drift .12s linear infinite alternate; }
.mk-kart__img { image-rendering: pixelated; transform-origin: 50% 95%; }
@keyframes mk-drift { from { transform: rotate(-5deg) translateY(-1px); } to { transform: rotate(-3deg) translateY(1px); } }
.mk-kart__sparks { position: absolute; left: -6px; bottom: -8px; width: 96px; height: 56px; opacity: 0; pointer-events: none; z-index: 2; }
.mk-kart__sparks::before { content: ""; position: absolute; left: 4px; bottom: 0; width: 80px; height: 26px; border-radius: 50%; background: radial-gradient(var(--spark, #fff), transparent 70%); opacity: .9; }
.mk-kart.is-drifting[data-tier="1"] .mk-kart__sparks, .mk-kart.is-drifting[data-tier="2"] .mk-kart__sparks, .mk-kart.is-drifting[data-tier="3"] .mk-kart__sparks { opacity: 1; }
.mk-kart[data-tier="1"] { --spark: #3fb2ff; } .mk-kart[data-tier="2"] { --spark: #ff9a1f; } .mk-kart[data-tier="3"] { --spark: #c45bff; }
.mk-kart__sparks i { position: absolute; bottom: 6px; width: 15px; height: 30px; background: var(--spark, #fff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 10px var(--spark); filter: drop-shadow(0 0 6px var(--spark)); animation: mk-spark .18s linear infinite; }
.mk-kart__sparks i:nth-child(1) { left: 8px; } .mk-kart__sparks i:nth-child(2) { left: 26px; animation-delay: -.06s; height: 38px; }
.mk-kart__sparks i:nth-child(3) { left: 46px; animation-delay: -.1s; } .mk-kart__sparks i:nth-child(4) { left: 64px; animation-delay: -.14s; height: 22px; }
@keyframes mk-spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(-22px, -18px) scale(.3); opacity: 0; } }
.mk-kart__flame { position: absolute; left: -46px; bottom: 22px; width: 60px; height: 22px; border-radius: 50% 0 0 50%; opacity: 0; transform-origin: right center; transform: scaleX(.2);
  background: radial-gradient(ellipse at 100% 50%, #fff 0 18%, var(--flame, #ffb300) 40%, transparent 72%); transition: opacity .15s, transform .15s; }
.mk-kart.is-boost .mk-kart__flame { opacity: 1; transform: scaleX(1.4); animation: mk-flame .08s linear infinite alternate; }
.mk-kart[data-tier="1"] { --flame: #3fb2ff; } .mk-kart[data-tier="2"] { --flame: #ff8a00; } .mk-kart[data-tier="3"] { --flame: #c45bff; }
@keyframes mk-flame { to { transform: scaleX(1.1) scaleY(.85); } }

.mk-drill__controls { display: grid; grid-template-columns: 1.2fr auto; grid-template-areas: "meter btn" "help btn" "out out"; gap: 12px 24px; align-items: center; }
.mk-meter { grid-area: meter; position: relative; height: 34px; border-radius: 10px; overflow: hidden; background:
  linear-gradient(90deg, #3a3d45 0 23%, rgba(63,178,255,.35) 23% 53%, rgba(255,154,31,.35) 53% 87%, rgba(196,91,255,.4) 87%); border: 2px solid #0b0c0e; }
.mk-meter__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8a8f9b 0 23%, #3fb2ff 23% 53%, #ff9a1f 53% 87%, #c45bff 87%) 0 0 / var(--mw, 100%) 100% no-repeat; }
.mk-meter__z { position: absolute; top: 50%; translate: 0 -50%; font-family: var(--mk-hud); font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 #000; }
.mk-meter__z--b { left: calc(23% + 8px); } .mk-meter__z--o { left: calc(53% + 8px); } .mk-meter__z--p { left: calc(87% + 6px); }
.mk-driftbtn {
  grid-area: btn; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 230px; min-height: 120px; padding: 14px 26px; border: 0; color: #111; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #ffe45c, #ffc400); border-radius: 22px; box-shadow: 0 8px 0 #a37a00, 0 16px 30px rgba(0,0,0,.4);
  transition: transform .1s, box-shadow .1s;
}
.mk-driftbtn__big { font-family: var(--mk-display); font-size: 2.4rem; line-height: 1; }
.mk-driftbtn__small { font-weight: 700; font-size: .85rem; }
.mk-driftbtn.is-held { transform: translateY(6px); box-shadow: 0 2px 0 #a37a00, 0 0 0 6px rgba(255,212,0,.35), 0 6px 14px rgba(0,0,0,.4); background: linear-gradient(180deg, #ffd21f, #f0a800); }
.mk-drill__help { grid-area: help; margin: 0; font-size: .92rem; color: #b9bdc7; }
.mk-drill__out { grid-area: out; margin: 0; font-family: var(--mk-display); font-size: 1.6rem; text-transform: uppercase; color: var(--mk-yellow); min-height: 1.3em; text-shadow: 2px 2px 0 #000; }

/* ===================== RAINBOW ROAD ===================== */
.mk-rainbow { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: flex-start; padding: 100px 0 260px; isolation: isolate;
  background: radial-gradient(ellipse 60% 50% at 70% 20%, rgba(130,60,255,.35), transparent 70%), radial-gradient(ellipse 40% 40% at 15% 30%, rgba(255,60,180,.25), transparent 70%), #05040f;
}
.mk-rainbow__space { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle, #fff 0 1.2px, transparent 1.8px) 0 0 / 90px 90px,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.6px) 45px 30px / 70px 70px,
    radial-gradient(circle, #ffe9a8 0 1.6px, transparent 2.2px) 20px 60px / 160px 160px;
  animation: mk-twinkle 4s ease-in-out infinite alternate;
}
@keyframes mk-twinkle { to { opacity: .55; } }
.mk-rainbow__road { position: absolute; left: 50%; bottom: -10px; width: 760px; height: 2200px; margin-left: -380px; z-index: -1;
  transform: perspective(1200px) rotateX(60deg); transform-origin: 50% 100%; }
.mk-rainbow__surface { position: absolute; inset: 0; border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 8px, transparent 8px 90px),
    linear-gradient(90deg, #ff2d55 0 14.2%, #ff9500 14.2% 28.4%, #ffd60a 28.4% 42.6%, #34c759 42.6% 56.8%, #0a84ff 56.8% 71%, #5e5ce6 71% 85.2%, #bf5af2 85.2%);
  box-shadow: 0 0 0 10px rgba(255,255,255,.85), 0 0 60px 20px rgba(255,255,255,.45), 0 0 120px 40px rgba(160,90,255,.5);
  animation: mk-road 1.1s linear infinite;
}
@keyframes mk-road { to { background-position: 0 90px, 0 0; } }
.mk-rainbow:hover .mk-rainbow__surface { animation-duration: .45s; }
.mk-rainbow__card { max-width: 600px; padding: 28px 30px; border-radius: 20px; background: rgba(8,6,24,.78); border: 2px solid rgba(255,255,255,.25); box-shadow: 0 0 40px rgba(140,80,255,.35); backdrop-filter: blur(4px); }
.mk-rainbow__card .mk-h2 { background: linear-gradient(90deg, #ff2d55, #ff9500, #ffd60a, #34c759, #0a84ff, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(3px 3px 0 #000); margin-bottom: 12px; }
.mk-rainbow__card p { margin: 0 0 12px; }
.mk-coin-space { position: absolute; right: 14%; top: 18%; z-index: 2; animation: mbr-spin 1.6s linear infinite, mk-hover 3s ease-in-out infinite; }

/* ===================== PISTAS ===================== */
.mk-tracks { background: repeating-linear-gradient(90deg, #2f7d32 0 90px, #3a8f3c 90px 180px); }
.mk-tracks .mk-h2 { text-shadow: 0 4px 0 rgba(0,0,0,.45); }
.mk-trackgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-track { position: relative; padding: 18px 20px 20px; border-radius: 18px; background: var(--asphalt), #24262b; border: 3px solid #111; box-shadow: 0 14px 0 rgba(0,0,0,.25); }
.mk-track__map { width: 100%; height: 110px; margin-bottom: 8px; border-radius: 12px; background: rgba(0,0,0,.25); padding: 8px; }
.mk-track__map path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 6; animation: mk-dash 3s linear infinite; }
@keyframes mk-dash { to { stroke-dashoffset: -64; } }
.mk-track h3 { font-family: var(--mk-display); font-weight: 400; font-size: 1.55rem; text-transform: uppercase; margin: 8px 0 4px; color: #fff; line-height: 1; }
.mk-track p { margin: 0; font-size: 1rem; color: #d3d6dd; }
.mk-tag { display: inline-block; font-family: var(--mk-hud); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; color: #fff; transform: skewX(-10deg); }
.mk-tag--8 { background: var(--mk-red); } .mk-tag--dlc { background: #8a3ffc; } .mk-tag--bcp { background: #e8a600; color: #1b1300; } .mk-tag--w { background: var(--mk-blue); }

/* ===================== MECÂNICAS ===================== */
.mk-mechgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mk-mechcol { padding: 24px; border-radius: 20px; background: rgba(10,11,13,.72); border: 2px solid #3a3d45; border-top: 6px solid var(--mk-red); }
.mk-mechcol--w { border-top-color: var(--mk-blue); }
.mk-mechcol .mk-h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 1.4rem; }
.mk-mechcol .mk-h3 img { height: 64px; width: auto; }
.mk-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mk-feats li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 4px solid rgba(255,255,255,.18); }
.mk-feats b { display: block; font-family: var(--mk-hud); font-weight: 400; color: var(--mk-yellow); font-size: .95rem; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 2px; }
.mk-mechcol--w .mk-feats b { color: #7cc0ff; }

/* ===================== GRID DE LARGADA ===================== */
.mk-racers { list-style: none; margin: 0; padding: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 30px 16px; }
.mk-racers li { position: relative; text-align: center; padding: 18px 8px 10px; border-top: 4px solid rgba(255,255,255,.85); }
.mk-racers li::before, .mk-racers li::after { content: ""; position: absolute; top: -4px; width: 4px; height: 40px; background: rgba(255,255,255,.85); }
.mk-racers li::before { left: 0; } .mk-racers li::after { right: 0; }
.mk-racers li:nth-child(even) { transform: translateY(34px); }
.mk-racers__n { position: absolute; left: 10px; top: 6px; font-family: var(--mk-display); font-size: 2.2rem; color: rgba(255,255,255,.18); line-height: 1; }
.mk-racers img { height: 130px; width: 100%; object-fit: contain; position: relative; filter: drop-shadow(0 8px 6px rgba(0,0,0,.5)); transition: transform .25s; }
.mk-racers li:hover img { transform: translateY(-6px) scale(1.05); }
.kart.mk-zapped .mk-racers img { transform: scale(.42) translateY(60%); filter: drop-shadow(0 0 8px #ffd400); }
.mk-racers b { display: block; margin-top: 6px; font-family: var(--mk-hud); font-weight: 400; font-size: .95rem; letter-spacing: .5px; }
.mk-racers__empty { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.mk-racers__empty .mbr-coin { margin: 44px auto 28px; }
.mk-racers__empty b { color: #9aa0ad; }

/* ===================== LINHA DO TEMPO ===================== */
.mk-history { background: var(--asphalt), #1f2125; }
.mk-smk { display: flex; gap: 24px; align-items: center; max-width: 900px; margin: 0 auto 40px; padding: 18px; border-radius: 18px; background: rgba(0,0,0,.35); border: 2px dashed rgba(255,255,255,.25); }
.mk-smk img { width: 220px; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,.5); flex-shrink: 0; }
.mk-smk p { margin: 0; font-size: 1.1rem; }
.mk-timeline { list-style: none; margin: 0; padding: 0 0 80px; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 92px; row-gap: 22px; }
.mk-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 46px; margin-left: -23px; border-radius: 10px;
  background: repeating-linear-gradient(180deg, var(--mk-yellow) 0 22px, transparent 22px 44px) 50% 0 / 6px 100% no-repeat, #3a3d45;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.5), inset -4px 0 0 rgba(255,255,255,.5); }
.mk-timeline li { position: relative; padding: 16px 18px; border-radius: 16px; background: #2a2d33; border: 2px solid #3a3d45; }
.mk-timeline li:nth-child(odd) { grid-column: 1; text-align: right; }
.mk-timeline li:nth-child(even) { grid-column: 2; transform: translateY(80px); }
.mk-timeline li::after { content: ""; position: absolute; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--mk-red); border: 3px solid #fff; }
.mk-timeline li:nth-child(odd)::after { right: -59px; }
.mk-timeline li:nth-child(even)::after { left: -59px; }
.mk-timeline li.is-hl { background: linear-gradient(135deg, #3b1d22, #2a2d33); border-color: var(--mk-red); }
.mk-tl__y { display: inline-block; font-family: var(--mk-hud); font-size: 1.1rem; background: var(--mk-yellow); color: #111; padding: 2px 10px; transform: skewX(-10deg); }
.mk-timeline h3 { margin: 6px 0 2px; font-family: var(--mk-display); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; line-height: 1.05; }
.mk-timeline h3 small { display: block; font-family: var(--mk-body); font-size: .85rem; text-transform: none; color: #9aa0ad; font-weight: 700; }
.mk-timeline p { margin: 2px 0 0; font-size: .98rem; color: #d3d6dd; }
.mk-coin-tl { position: absolute; top: -16px; left: -12px; }

/* ===================== CURIOSIDADES ===================== */
.mk-trivia { background: linear-gradient(135deg, #f4f5f7, #e6e8ec); color: #1b1c20; }
.mk-trivia .mk-h2 { color: #111; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.mk-trivia .mk-kicker { color: var(--mk-red); }
.mk-trivia strong { color: #000; }
.mk-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
.mk-facts li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
.mk-facts b { flex-shrink: 0; font-family: var(--mk-display); font-size: 2rem; line-height: 1; color: var(--mk-red); }
.mk-facts p { margin: 0; }
.mk-qtrivia { position: absolute; right: 24px; top: 70px; width: 52px; height: 52px; border-radius: 12px; }

/* ===================== ONDE JOGAR ===================== */
.mk-play { padding-bottom: 0; }
.mk-playgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mk-platform { display: flex; gap: 18px; padding: 18px; border-radius: 18px; background: rgba(10,11,13,.75); border: 2px solid #3a3d45; }
.mk-platform img { width: 110px; height: auto; align-self: flex-start; border-radius: 6px; box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.mk-platform h3 { margin: 10px 0 6px; font-family: var(--mk-display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.mk-platform p { margin: 0; font-size: 1rem; }
.mk-chip { display: inline-block; font-family: var(--mk-hud); font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; background: #fff; color: #111; }
.mk-chip--red { background: var(--mk-red); color: #fff; }
.mk-finish { position: relative; margin-top: 56px; height: 120px; display: grid; place-items: center;
  background: conic-gradient(#111 25%, #f4f4f4 0 50%, #111 0 75%, #f4f4f4 0) 0 0 / 40px 40px; }
.mk-finish span { font-family: var(--mk-display); font-size: clamp(2rem, 6vw, 3.6rem); color: #fff; background: var(--mk-red); padding: 6px 30px 2px; transform: skewX(-12deg); box-shadow: 6px 6px 0 #000; }
.mk-coin-finishline { position: absolute; right: 12%; top: -20px; }

/* ===================== HUD FIXO ===================== */
.mk-hud {
  position: fixed; right: 14px; bottom: 14px; z-index: 400; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 16px; background: rgba(8,9,11,.86); border: 2px solid rgba(255,255,255,.18);
  color: #fff; font-family: var(--mk-hud); pointer-events: none; box-shadow: 0 10px 24px rgba(0,0,0,.4);
  transition: opacity .3s, transform .3s;
}
.mk-hud.is-hidden { opacity: 0; transform: translateY(20px); }
.mk-hud svg { width: 86px; height: 52px; overflow: visible; }
.mk-hud__needle { transform-origin: 50px 50px; transition: transform .25s ease-out; }
.mk-hud__txt { display: grid; line-height: 1.05; }
.mk-hud__speed { font-size: 1.35rem; } .mk-hud__speed small { font-size: .6rem; color: #9aa0ad; margin-left: 2px; }
.mk-hud__lap { font-size: .72rem; letter-spacing: 1px; color: var(--mk-yellow); }
.mk-hud__lap.is-final { color: #ff5a5f; animation: mk-blink .5s steps(2) 6; }
@keyframes mk-blink { 50% { opacity: .2; } }
.mk-hud__pos { font-family: var(--mk-display); font-style: italic; font-size: 2rem; line-height: .9; padding: 0 .12em 0 .02em; background: linear-gradient(180deg, #fff6a0, #ffd400 45%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #000); }

/* ===================== CONTAGEM DE LARGADA ===================== */
.mk-count { position: fixed; inset: 0; z-index: 460; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.55)); transition: opacity .4s; }
.mk-count.is-done { opacity: 0; }
.mk-count__n { font-family: var(--mk-display); font-style: italic; font-size: clamp(7rem, 26vw, 16rem); line-height: 1; color: #fff;
  -webkit-text-stroke: 6px #111; paint-order: stroke fill; text-shadow: 0 10px 0 rgba(0,0,0,.4); }
.mk-count__n.is-pop { animation: mk-pop .9s cubic-bezier(.2,1.6,.4,1); }
.mk-count__n.is-go { color: var(--mk-green); background: linear-gradient(180deg, #d6ffe0, #19e055 50%, #0a8a2e); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(5px 5px 0 #111) drop-shadow(-2px -2px 0 #111); }
@keyframes mk-pop { 0% { transform: scale(2.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.9); opacity: .0; } }
.mk-count__skip { position: absolute; left: 50%; bottom: 40px; translate: -50% 0; pointer-events: auto; border: 2px solid #fff; background: rgba(0,0,0,.6); color: #fff; font-family: var(--mk-hud); font-size: .85rem; letter-spacing: 1px; padding: 10px 18px; border-radius: 999px; }
.mk-count__skip:hover { background: #000; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1100px) {
  .mk-inventory { grid-template-columns: repeat(4, 1fr); }
  .mk-trackgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mk-hero__in, .mk-about__grid, .mk-mechgrid, .mk-playgrid { grid-template-columns: 1fr; }
  .mk-hero__art { min-height: 440px; max-width: 560px; width: 100%; margin: 0 auto; }
  .mk-roulette { grid-template-columns: 1fr; padding: 26px 18px; }
  .mk-drill__controls { grid-template-columns: 1fr; grid-template-areas: "meter" "btn" "help" "out"; }
  .mk-driftbtn { width: 100%; }
  .mk-timeline { grid-template-columns: 1fr; padding-bottom: 0; }
  .mk-timeline::before { left: 22px; }
  .mk-timeline li, .mk-timeline li:nth-child(odd), .mk-timeline li:nth-child(even) { grid-column: 1; transform: none; margin-left: 58px; text-align: left; }
  .mk-timeline li:nth-child(odd)::after, .mk-timeline li:nth-child(even)::after { left: -47px; right: auto; }
  .mk-facts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kart { font-size: 1rem; }
  .mk-hero { padding: 40px 0 90px; }
  .mk-hero__eight { width: 340px; right: -80px; top: 10px; }
  .mk-hero__art { min-height: 380px; }
  .mk-lakitu { width: 120px; left: 0; }
  .mk-lights { width: 44px; padding: 6px; gap: 6px; }
  .mk-lights i { width: 28px; height: 28px; }
  .mk-covers { height: 300px; }
  .mk-cover { width: 150px; }
  .mk-cover--a { right: 120px; }
  .mk-cover--b { right: 6px; }
  .mk-amp { font-size: 2.4rem; }
  .mk-coin-track { left: auto; right: 24px; bottom: 50px; }
  .mk-head { gap: 12px; }
  .mk-roulette__panel { flex-direction: column; text-align: center; }
  .mk-itembox { width: 180px; height: 180px; }
  .mk-inventory { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mk-inventory button { font-size: .82rem; padding: 10px 4px 8px; }
  .mk-inventory svg, .mk-inventory img { width: 44px; height: 44px; }
  .mk-strip { --kartw: 96px; height: 160px; }
  .mk-kart { left: 26px; bottom: 22px; }
  .mk-coin-finish { right: 42px; }
  .mk-strip__marks i { font-size: .6rem; }
  .mk-trackgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 24px; scrollbar-width: none; }
  .mk-trackgrid::-webkit-scrollbar { display: none; }
  .mk-track { scroll-snap-align: center; }
  .mk-track__map { height: 84px; }
  .mk-feats li { padding: 10px 12px; font-size: .95rem; }
  .mk-timeline li { padding: 12px 14px; }
  .mk-timeline p { font-size: .92rem; }
  .mk-coin-space { right: 18px; top: auto; bottom: 150px; }
  .mk-hud.is-idle { opacity: 0; transform: translateY(16px); }
  .mk-racers { grid-template-columns: repeat(3, 1fr); gap: 26px 8px; }
  .mk-racers img { height: 96px; }
  .mk-racers b { font-size: .8rem; }
  .mk-racers__n { font-size: 1.6rem; left: 6px; }
  .mk-smk { flex-direction: column; text-align: center; }
  .mk-smk img { width: 100%; max-width: 300px; }
  .mk-platform { flex-direction: column; }
  .mk-platform img { width: 90px; }
  .mk-rainbow { min-height: 0; padding: 70px 0 240px; }
  .mk-rainbow__road { width: 460px; margin-left: -230px; height: 1500px; }
  .mk-rainbow__card { padding: 22px 20px; }
  .mk-hud { right: 8px; bottom: 8px; padding: 6px 10px 6px 6px; gap: 6px; }
  .mk-hud svg { width: 62px; height: 38px; }
  .mk-hud__speed { font-size: 1.05rem; }
  .mk-hud__pos { font-size: 1.5rem; }
  .mk-qtrivia { top: 40px; right: 16px; width: 44px; height: 44px; }
}

/* ===================== MOVIMENTO REDUZIDO ===================== */
@media (prefers-reduced-motion: reduce) {
  .kart :not([data-coin]), .kart :not([data-coin])::before, .kart :not([data-coin])::after { animation: none !important; }
  .mk-cube { transform: rotateX(-20deg) rotateY(-30deg); }
  .mk-kart { transition: none; }
}