/* ==========================================================================
   XPlay Nin Store — Zona Nintendo (js/nintendo.js)
   Banners con las fotos de la tienda de fondo, tráiler en un reproductor de tamaño
   medio (marco tipo Switch), comparador de consolas en panel claro (como la tienda
   oficial de Nintendo), juegos con portadas grandes, accesorios por tipo y confianza.
   Rojo Nintendo #e60012 + blanco sobre el fondo oscuro de la tienda.
   ========================================================================== */
.view--nin { --nred: #e60012; --nred-2: #ff2a3d; --nink: #16171b; }
.view--nin > .wrap { position: relative; z-index: 1; }

/* ---------- Portada: banners con la foto de fondo ---------- */
.nin-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #050608;
}
.nin-hero__top { position: absolute; left: 0; right: 0; top: 18px; z-index: 3; width: 100%; max-width: var(--shop); margin-inline: auto; padding-inline: var(--gutter); }
.nin-hero__top .crumbs { margin: 0; }
/* Los banners se apilan en la misma celda: el más alto define el alto de la portada */
.nin-slides { display: grid; }
.nin-slide {
  position: relative; grid-area: 1 / 1; display: flex; align-items: center;
  min-height: clamp(500px, calc(100svh - var(--head-h)), 760px);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s;
}
.nin-slide.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.nin-slide__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* la misma foto, difuminada, llena todo el ancho con sus colores */
.nin-slide__blur {
  position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none;
  object-fit: cover; filter: blur(38px) saturate(1.35) brightness(.42); transform: scale(1.08);
}
/* la foto nítida a la derecha, fundida con el fondo por la izquierda */
.nin-slide__img {
  position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 76%;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%);
}
.nin-slide.is-on .nin-slide__img { animation: nin-kb 9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes nin-kb { from { transform: scale(1.07); } to { transform: scale(1); } }
.nin-slide__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 8, .9) 0%, rgba(5, 6, 8, .72) 30%, rgba(5, 6, 8, .18) 52%, rgba(5, 6, 8, 0) 66%),
    linear-gradient(0deg, var(--k-bg, #04060a) 0%, rgba(4, 6, 10, 0) 24%),
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(230, 0, 18, .34), transparent 70%);
}
/* arriba deja espacio para la ruta; abajo, para la radio de la zona (fija abajo a la izquierda) */
.nin-slide__in { position: relative; width: 100%; max-width: var(--shop); margin-inline: auto; padding: 50px var(--gutter) 108px; }
.nin-slide__in > * { max-width: 640px; }
.nin-hero__badge {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 10px;
  font: 700 13px/1 var(--hud, var(--display)); letter-spacing: .22em; text-transform: uppercase; color: #fff;
  background: var(--nred); box-shadow: 0 10px 30px -10px rgba(230, 0, 18, .9);
}
.nin-hero__badge .ico-b { width: 18px; height: 18px; }
.nin-hero__title {
  display: grid; margin-top: 16px; outline: none;
  font: 900 clamp(52px, min(8.6vw, 11.5svh), 136px)/.84 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.nin-hero__title em { font-style: normal; color: var(--nred-2); text-shadow: 0 0 60px rgba(230, 0, 18, .5), 0 10px 40px rgba(0, 0, 0, .55); }
.nin-hero__lead { margin-top: 16px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: #e3e7ee; max-width: 600px; }
.nin-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.nin-slide .nin-slide__in > * { opacity: 0; translate: 0 22px; }
.nin-slide.is-on .nin-slide__in > * { animation: nin-up .9s var(--ease-expo, ease) both; }
.nin-slide.is-on .nin-slide__in > :nth-child(2) { animation-delay: .08s; }
.nin-slide.is-on .nin-slide__in > :nth-child(3) { animation-delay: .16s; }
.nin-slide.is-on .nin-slide__in > :nth-child(4) { animation-delay: .24s; }
@keyframes nin-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.nin-play { display: inline-flex; align-items: center; gap: 14px; padding: 4px 8px 4px 4px; color: #fff; text-align: left; }
.nin-play__btn {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .3s var(--ease-expo, ease), background-color .3s, border-color .3s;
}
.nin-play__btn .ico { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.nin-play__txt { display: grid; gap: 4px; }
.nin-play__txt b { font: 800 19px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.nin-play__txt small { font-size: 13.5px; color: #c3cad6; }
.nin-play:hover .nin-play__btn { transform: scale(1.08); background: var(--nred); border-color: var(--nred); }

/* Puntos (con barra de tiempo) y flechas */
.nin-hero__nav {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 56px;
  display: flex; align-items: center; gap: 8px;
}
.nin-dots { display: flex; gap: 8px; margin-right: 8px; }
.nin-dot { display: grid; align-items: center; width: 54px; height: 28px; }
.nin-dot i { position: relative; display: block; height: 4px; overflow: hidden; background: rgba(255, 255, 255, .28); }
.nin-dot i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: #fff; }
.nin-dot.is-on i { background: rgba(255, 255, 255, .4); }
.nin-dot:not(.is-on) i::after { transform: scaleX(0); }
.nin-dot:hover i { background: rgba(255, 255, 255, .6); }
.nin-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; color: #fff;
  background: rgba(5, 6, 8, .55); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .2s, border-color .2s;
}
.nin-arrow:hover { background: var(--nred); border-color: var(--nred); }
.nin-arrow .ico { width: 20px; height: 20px; }

/* ---------- Franja de números bajo la portada ---------- */
.nin-stats {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: -34px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.nin-stats li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: rgba(9, 11, 15, .96); }
.nin-stats .ico { flex: none; width: 26px; height: 26px; color: var(--nred-2); }
.nin-stats p { display: grid; gap: 6px; }
.nin-stats b { font: 700 24px/1 var(--hud, var(--display)); color: #fff; }
.nin-stats span { font: 600 11.5px/1 var(--hud, var(--display)); letter-spacing: .16em; text-transform: uppercase; color: #9aa6b6; }

/* ---------- Cuerpo de la zona ---------- */
.nin-body { width: 100%; max-width: var(--shop); margin-inline: auto; padding: 0 var(--gutter); }
.nin-sec { margin-top: clamp(64px, 8vw, 110px); }
.nin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 30px; margin-bottom: clamp(24px, 3vw, 38px); }
.nin-k { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 var(--hud, var(--display)); letter-spacing: .28em; text-transform: uppercase; color: var(--nred-2); }
.nin-k i { width: 34px; height: 3px; background: var(--nred); }
.nin-h2 { margin-top: 14px; font: 900 clamp(42px, 5.4vw, 80px)/.88 var(--display); text-transform: uppercase; color: #fff; }
.nin-h2 em { font-style: normal; color: var(--nred-2); }
.nin-sub { margin-top: 14px; max-width: 620px; font-size: 17px; line-height: 1.55; color: #b8c2cf; }
.nin-more {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px;
  font: 700 15px/1 var(--font); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .2s, border-color .2s;
}
.nin-more:hover { background: var(--nred); border-color: var(--nred); }
.nin-more .ico { width: 18px; height: 18px; }
.nin-price { display: grid; gap: 4px; }
.nin-price small { font: 600 11.5px/1 var(--hud, var(--display)); letter-spacing: .2em; text-transform: uppercase; color: #9aa6b6; }
.nin-price b { font: 700 32px/1 var(--hud, var(--display)); color: #fff; }
.nin-price s { font-size: 14px; color: #8391a4; }

/* Botones del efecto 2 dentro de la zona */
.view--nin .xb2 { font: 700 15px/1 var(--font); height: 48px; padding: 0 18px; }
.view--nin .xb2--xl { height: 56px; padding: 0 22px; font-size: 16px; }
.view--nin .xb2 .xb2__label { margin-right: 44px; }
.view--nin .xb2 .xb2__label .ico { width: 18px; height: 18px; }

/* ---------- Tráiler oficial: reproductor de tamaño medio con marco tipo Switch ---------- */
.nin-trailer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.nin-trailer__player { max-width: 900px; }
.nin-screen {
  position: relative; padding: 14px 22px; border-radius: 26px;
  background: linear-gradient(180deg, #1a1b1f, #0b0b0d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(230, 0, 18, .55), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
/* rieles de los Joy-Con a los lados (azul y rojo neón, como la Switch) */
.nin-screen::before, .nin-screen::after { content: ""; position: absolute; top: 22%; bottom: 22%; width: 5px; border-radius: 5px; }
.nin-screen::before { left: 8px; background: #00c3e3; box-shadow: 0 0 14px rgba(0, 195, 227, .7); }
.nin-screen::after { right: 8px; background: #ff4554; box-shadow: 0 0 14px rgba(255, 69, 84, .7); }
.nin-screen__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; object-fit: cover; }
.nin-screen__play {
  position: absolute; inset: 14px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: 10px; color: #fff; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
  transition: opacity .35s, visibility 0s;
}
.nin-trailer.is-started .nin-screen__play { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.nin-screen__btn {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--nred); box-shadow: 0 16px 40px -10px rgba(230, 0, 18, .95), 0 0 0 10px rgba(230, 0, 18, .22);
  transition: transform .35s var(--ease-expo, ease), box-shadow .35s;
}
.nin-screen__btn .ico { width: 34px; height: 34px; margin-left: 5px; fill: #fff; stroke: none; }
.nin-screen__play:hover .nin-screen__btn { transform: scale(1.08); box-shadow: 0 20px 50px -10px rgba(230, 0, 18, 1), 0 0 0 14px rgba(230, 0, 18, .25); }
.nin-screen__txt { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; background: rgba(0, 0, 0, .55); }
.nin-screen__txt b { font: 800 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.nin-screen__txt small { font: 600 13px/1 var(--hud, var(--display)); color: #cfd6e0; }
.nin-screen__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: #8f9bab; }
.nin-screen__note .ico { width: 16px; height: 16px; }
.nin-trailer__copy .nin-h2 { font-size: clamp(44px, 5vw, 76px); }
.nin-trailer__deal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; margin-top: 26px; }
.nin-trailer__plat { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; font: 700 13px/1 var(--font); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.nin-trailer__plat .ico-b { width: 16px; height: 16px; color: var(--nred-2); }
.nin-trailer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 26px; }

/* ---------- Comparador de consolas (panel claro, como la tienda oficial) ---------- */
.nin-compare__panel {
  position: relative; overflow: hidden; padding: clamp(28px, 4vw, 60px);
  background: linear-gradient(180deg, #f6f7f9, #eceef2); border-radius: 26px; color: var(--nink);
}
.nin-compare__panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: var(--nred); }
.nin-compare .nin-h2 { color: var(--nink); }
.nin-compare .nin-h2 em, .nin-compare .nin-k { color: var(--nred); }
.nin-compare .nin-sub { color: #4b5563; }
.nin-compare__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.nin-console {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto auto auto; gap: 12px;
  padding: 22px 22px 24px; background: #fff; border-radius: 20px; border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 40px -26px rgba(16, 24, 40, .35);
  transition: transform .4s var(--ease-expo, ease), box-shadow .4s;
}
.nin-console:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 30px 60px -28px rgba(16, 24, 40, .45); }
.nin-console.is-top { border-color: var(--nred); }
.nin-console__flag {
  position: absolute; left: 50%; top: -15px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; white-space: nowrap;
  font: 700 12px/1 var(--hud, var(--display)); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--nred);
}
.nin-console__flag .ico { width: 15px; height: 15px; }
.nin-console__media { display: grid; place-items: center; height: clamp(170px, 16vw, 230px); border-radius: 14px; overflow: hidden; background: #f3f4f6; }
.nin-console__media img.is-cut { max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(16, 24, 40, .28)); transition: transform .6s var(--ease-expo, ease); }
.nin-console__media img.is-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-expo, ease); }
.nin-console:hover .nin-console__media img { transform: scale(1.05); }
.nin-console__name { font: 800 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.nin-console__name a { color: var(--nink); }
.nin-console__name a:hover { color: var(--nred); }
.nin-console__specs { display: grid; gap: 0; margin: 0; align-content: start; }
.nin-console__specs div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid #e5e7eb; }
.nin-console__specs dt { font-size: 14px; color: #6b7280; }
.nin-console__specs dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--nink); text-align: right; }
.nin-console__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nin-console__price b { font: 700 32px/1 var(--hud, var(--display)); color: var(--nink); }
.nin-console__price s { font-size: 15px; color: #9ca3af; }
.nin-console__stock { font-size: 13.5px; font-weight: 600; color: #15803d; }
.nin-console__stock.is-low { color: #c2410c; }
.nin-console__ctas { display: grid; gap: 10px; }
.nin-console__more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; font-weight: 700; font-size: 15px; color: var(--nink); }
.nin-console__more .ico { width: 16px; height: 16px; transition: transform .3s; }
.nin-console__more:hover { color: var(--nred); }
.nin-console__more:hover .ico { transform: translateX(4px); }

/* ---------- Juegos con portadas grandes ---------- */
.nin-games__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.nin-game { display: grid; align-content: start; gap: 14px; color: #fff; }
.nin-game__cover {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 16px;
  background: #0c0e13; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease-expo, ease), box-shadow .5s;
}
.nin-game__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-expo, ease); }
.nin-game:hover .nin-game__cover { transform: translateY(-8px); box-shadow: 0 40px 60px -28px var(--c, var(--nred)); }
.nin-game:hover .nin-game__cover img { transform: scale(1.05); }
.nin-game__tag {
  position: absolute; left: 12px; top: 12px; padding: 6px 10px;
  font: 700 11.5px/1 var(--hud, var(--display)); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--nred);
}
.nin-game__info { display: grid; gap: 6px; }
.nin-game__t { font: 800 clamp(20px, 1.8vw, 26px)/1.05 var(--display); text-transform: uppercase; }
.nin-game__info small { font-size: 14px; color: #9aa6b6; }
.nin-game__price { font: 700 22px/1 var(--hud, var(--display)); color: #fff; margin-top: 4px; }

/* ---------- Accesorios por tipo ---------- */
.nin-acc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.nin-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-align: left; color: #fff;
  background: #0c0e13; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  transition: border-color .3s, transform .45s var(--ease-expo, ease);
}
.nin-tile:hover { border-color: rgba(255, 42, 61, .6); transform: translateY(-5px); }
.nin-tile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.nin-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-expo, ease); }
.nin-tile:hover .nin-tile__media img { transform: scale(1.06); }
.nin-tile__txt { display: grid; gap: 6px; padding: 16px 56px 18px 18px; }
.nin-tile__txt b { font: 800 22px/1 var(--display); text-transform: uppercase; }
.nin-tile__txt small { font-size: 13.5px; color: #9aa6b6; }
.nin-tile__go {
  position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 34px; height: 34px;
  color: #fff; background: rgba(255, 255, 255, .08); transition: background-color .25s, transform .3s;
}
.nin-tile:hover .nin-tile__go { background: var(--nred); transform: translateX(3px); }
.nin-tile__go .ico { width: 16px; height: 16px; }

/* ---------- Confianza ---------- */
.nin-trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; overflow: hidden; }
.nin-trust li { display: flex; gap: 16px; align-items: flex-start; padding: 26px 24px; background: #090b0f; }
.nin-trust__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--nred); }
.nin-trust__ico .ico { width: 22px; height: 22px; }
.nin-trust p { display: grid; gap: 5px; }
.nin-trust b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.nin-trust p span { font-size: 14.5px; line-height: 1.5; color: #a9b3c1; }

/* ---------- Encabezado de la lista de productos ---------- */
.nin-listhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 30px; margin: clamp(70px, 8vw, 110px) 0 22px; scroll-margin-top: calc(var(--hh) + 16px); }
.nin-listhead__s { font-size: 15.5px; color: #9aa6b6; }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1180px) {
  .nin-games__row { grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .nin-game { scroll-snap-align: start; }
  .nin-acc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nin-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nin-trailer__grid { grid-template-columns: minmax(0, 1fr); }
  .nin-trailer__player { max-width: 820px; width: 100%; margin-inline: auto; }
}
@media (max-width: 960px) {
  .nin-compare__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 760px) {
  /* En el celular: la foto arriba a lo ancho y el texto debajo */
  .nin-slide { display: block; min-height: 0; }
  .nin-slide__img {
    position: relative; display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 28%); mask-image: linear-gradient(0deg, transparent 0%, #000 28%);
  }
  .nin-slide__bg { position: relative; }
  .nin-slide__shade { background: linear-gradient(0deg, var(--k-bg, #04060a) 0%, rgba(4, 6, 10, 0) 40%); }
  .nin-slide__in { margin-top: -40px; padding: 0 var(--gutter) 84px; }
  .nin-hero__top { display: none; }
  .nin-hero__title { font-size: clamp(50px, 15vw, 84px); }
  .nin-hero__ctas .xb2 { flex: 1 1 100%; }
  .nin-hero__nav { left: var(--gutter); right: auto; bottom: 26px; }
  .nin-stats { margin-top: 0; }
  .nin-stats li { padding: 16px; }
  .nin-stats b { font-size: 20px; }
  .nin-screen { padding: 10px 14px; border-radius: 18px; }
  .nin-screen__play { inset: 10px 14px; }
  .nin-screen__btn { width: 68px; height: 68px; }
  .nin-games__row { grid-template-columns: repeat(4, 62vw); }
  .nin-acc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nin-tile__txt { padding: 14px 46px 16px 14px; }
  .nin-tile__txt b { font-size: 18px; }
  .nin-trust ul { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .nin-slide.is-on .nin-slide__img, .nin-slide.is-on .nin-slide__in > * { animation: none; opacity: 1; translate: none; }
  .nin-slide { transition: none; }
  .nin-console, .nin-tile, .nin-game__cover, .nin-tile__media img, .nin-game__cover img, .nin-console__media img { transition: none; }
}