/* ==========================================================================
   bumbum — «no tan duro»
   Recreativa de los 90: atardecer en pixel art, HUD, select de personaje,
   niveles y una tele de tubo. Todo en píxeles enteros.
   ========================================================================== */

:root {
  --night: #0a0714;
  --night-2: #140d26;
  --ink: #14101f;
  --paper: #fffaf0;
  --mute: #a9a1c4;
  --dim: #6f688a;
  --peri: #8babfe;
  --red: #ec2a2a;
  --red-d: #9e1420;
  --gold: #ffcb2b;
  --gold-d: #a06a00;
  --blue: #2b8cff;
  --blue-d: #164f9e;
  --pink: #ff5ccf;
  --violet: #7a5cff;
  --orange: #ff7a1a;
  --yellow: #ffd23f;
  --cyan: #1fc3ec;
  --teal: #157c89;
  --navy: #161242;

  --arcade: 'Press Start 2P', 'Courier New', monospace;
  --pixel: 'Silkscreen', 'Courier New', monospace;
  --body: 'Pixelify Sans', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(72px, 10vw, 140px);
  --hud-h: 64px;
  --floor: 18vh;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--hud-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

/* líneas de tubo sobre toda la pantalla */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px);
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--arcade);
  font-size: 11px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* sprites en SVG: escalan sin suavizar */
[data-sprite] svg, .coin svg { width: 100%; height: auto; }

/* ---------- títulos de recreativa ---------- */

.arcade {
  display: inline-block;
  font-family: var(--arcade);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: .02em;
  color: transparent;
  background-image: var(--fill);
  -webkit-background-clip: text;
  background-clip: text;
  filter: var(--edge);
  padding: .1em .12em .22em;
}

/* contorno: cuatro sombras sin desenfoque; volumen: sombras escalonadas */
.arcade--candy {
  --fill: linear-gradient(180deg, #ff9ae8 0 26%, #ff5ccf 26% 50%, #c25cff 50% 74%, #7a5cff 74%);
  --edge: drop-shadow(.07em 0 0 var(--navy)) drop-shadow(-.07em 0 0 var(--navy)) drop-shadow(0 .07em 0 var(--navy)) drop-shadow(0 -.07em 0 var(--navy)) drop-shadow(.06em .08em 0 #3b2fc9) drop-shadow(.04em .06em 0 #221a7a);
}
.arcade--fire {
  --fill: linear-gradient(180deg, #ff4a1c 0 22%, #ff6a1a 22% 42%, #ff8f1f 42% 62%, #ffb72b 62% 80%, #ffdc4f 80%);
  --edge: drop-shadow(.06em 0 0 var(--ink)) drop-shadow(-.06em 0 0 var(--ink)) drop-shadow(0 .06em 0 var(--ink)) drop-shadow(0 -.06em 0 var(--ink)) drop-shadow(.06em .08em 0 #1d8c99) drop-shadow(.04em .06em 0 #0e5560);
}
.arcade--flag {
  --fill: linear-gradient(180deg, #ff3b3b 0 36%, #fff 36% 48%, #2f5fe0 48% 72%, #fff 72% 79%, #2f5fe0 79%);
  --edge: drop-shadow(.07em 0 0 #fff) drop-shadow(-.07em 0 0 #fff) drop-shadow(0 .07em 0 #fff) drop-shadow(0 -.07em 0 #fff) drop-shadow(.05em 0 0 var(--ink)) drop-shadow(-.05em 0 0 var(--ink)) drop-shadow(0 .05em 0 var(--ink)) drop-shadow(.05em .08em 0 var(--ink));
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 4.6vw, 52px);
}
.heading__sub {
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 7, 20, .7);
  padding: 4px 12px;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink);
}

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 14px;
  font-family: var(--arcade);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--red);
  box-shadow:
    0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink),
    inset 0 -5px 0 var(--red-d), inset 0 3px 0 rgba(255, 255, 255, .35),
    0 10px 0 rgba(10, 7, 20, .45);
  transition: transform .12s steps(2);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); }
.btn--ghost {
  background: transparent;
  box-shadow: 0 -3px 0 var(--paper), 0 3px 0 var(--paper), -3px 0 0 var(--paper), 3px 0 0 var(--paper);
}

/* ==========================================================================
   HUD
   ========================================================================== */

.hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  padding: 0 var(--gutter);
  font-family: var(--arcade);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink);
  transition: background-color .3s steps(3);
}
.hud.is-solid {
  background: var(--night);
  box-shadow: 0 4px 0 #1f1835;
}

.hud__label { display: block; font-size: 8px; color: #e8e2ff; letter-spacing: .08em; }

.hud__player {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.hud__logo { width: auto; height: 40px; filter: drop-shadow(0 3px 0 rgba(20, 16, 31, .6)); }
.hud__player:hover .hud__logo { transform: translateY(-1px); }

.hud__nav {
  display: none;
  gap: 6px;
  margin-left: 12px;
}
.hud__nav a {
  position: relative;
  padding: 8px 10px 8px 22px;
  font-size: 10px;
  text-decoration: none;
  color: #fff;
}
.hud__nav a::before {
  content: '▶';
  position: absolute;
  left: 6px;
  top: 8px;
  font-size: 8px;
  opacity: 0;
  color: var(--yellow);
}
.hud__nav a:hover::before, .hud__nav a[aria-current]::before { opacity: 1; }
.hud__nav a[aria-current] { color: var(--yellow); }

.hud__meter {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
}
.hud__meter .hud__label { grid-column: 1 / -1; }
.meter {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ink);
  box-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
}
.meter i {
  width: 7px;
  height: 12px;
  background: #2a2340;
}
.meter i.on { background: var(--yellow); }
.meter i.on:nth-child(n+5) { background: var(--orange); }
.meter i.on:nth-child(n+8) { background: var(--red); }
.hud__pct { font-size: 9px; min-width: 4ch; }
.is-hot .meter { animation: hot .2s steps(2) infinite; }
@keyframes hot { 50% { transform: translateX(1px); } }

.hud__score { text-align: right; }
.hud__value { display: block; margin-top: 6px; font-size: 14px; color: #fff; }
.hud__value.is-up { animation: score-up .3s steps(3); }
@keyframes score-up { 0% { color: var(--yellow); transform: translateY(-3px); } }

.hud__btn {
  flex: 0 0 auto;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border: 0;
  background: rgba(10, 7, 20, .6);
  color: #fff;
  font-family: var(--arcade);
  font-size: 9px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
}
.hud__btn:hover { background: var(--red); }
.hud__sound { display: none; }
.hud__sound[aria-pressed="false"] { color: var(--dim); }

@media (max-width: 560px) {
  :root { --hud-h: 56px; }
  .hud { gap: 10px; }
  .hud__logo { height: 28px; }
  .hud__label { font-size: 7px; }
  .meter i { width: 4px; height: 10px; }
  .hud__pct { display: none; }
  .hud__value { font-size: 11px; }
}
@media (min-width: 760px) {
  .hud__sound { display: block; }
}
@media (min-width: 1180px) {
  .hud__nav { display: flex; }
  .hud__pause { display: none; }
}

/* ---------- menú de pausa ---------- */

.pause {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 7, 20, .82);
}
.pause[hidden] { display: none; }
.pause__box {
  width: min(380px, 100%);
  padding: 30px 28px 24px;
  background: var(--night);
  text-align: center;
  font-family: var(--arcade);
  text-transform: uppercase;
  box-shadow:
    0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff,
    0 0 0 10px var(--night), 0 0 0 14px var(--violet);
  animation: pop .25s steps(3);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.pause__title { font-size: 22px; color: var(--yellow); margin-bottom: 22px; }
.pause__nav { display: grid; gap: 4px; margin-bottom: 18px; }
.pause__nav a, .pause__opt, .pause__resume {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 13px;
  text-decoration: none;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--arcade);
}
.pause__nav a:hover, .pause__nav a:focus-visible, .pause__opt:hover, .pause__resume:hover { color: var(--yellow); }
.pause__nav a:hover::before, .pause__nav a:focus-visible::before { content: '▶ '; }
.pause__opt { color: var(--mute); font-size: 10px; }
.pause__resume { color: var(--red); margin-top: 6px; }
.pause__cheat { margin-top: 16px; font-family: var(--pixel); font-size: 11px; color: var(--dim); text-transform: none; letter-spacing: .08em; }

/* ==========================================================================
   TITLE SCREEN
   ========================================================================== */

.title {
  position: relative;
  min-height: max(620px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--hud-h) + 24px) var(--gutter) calc(var(--floor) + 24px);
  overflow: hidden;
  background: linear-gradient(#1d1240, #7d2b80 45%, #f47a62 80%, #ffd97e);
  isolation: isolate;
}

.title__world {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.title__world canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  max-width: none;
  transform: translateX(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.title__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.8vh, 20px);
}
.is-bum .title__inner { animation: bump .2s steps(2); }
@keyframes bump { 50% { transform: translateY(5px) scale(1.01); } }

.title__kicker {
  font-family: var(--arcade);
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}

.title__h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
}
.title__logo {
  width: min(78vw, 560px, 58vh);
  height: auto;
  filter: drop-shadow(0 6px 0 rgba(20, 16, 31, .55));
}
/* «no tan duro.» del banner, con el mismo borde de pegatina que el logo */
.title__tagline {
  width: min(56vw, 380px, 40vh);
  height: auto;
  margin-top: clamp(8px, 1.6vh, 16px);
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 6px 0 rgba(20, 16, 31, .55));
}

.press-start {
  font-family: var(--arcade);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 4px 4px 0 var(--ink);
  padding: 10px 16px;
  border: 0;
  background: none;
  cursor: pointer;
}
.press-start:hover { color: var(--yellow); }
.press-start:hover .blink { animation: none; }

.title__how {
  max-width: 34em;
  margin-top: -6px;
  font-family: var(--pixel);
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}

.title__next {
  font-family: var(--pixel);
  font-size: clamp(12px, 1.4vw, 15px);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(10, 7, 20, .72);
  padding: 7px 14px;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink);
}
.title__next b { color: var(--yellow); }
.title__next:hover { background: var(--ink); }

/* botón BUM: empezar y saltar, siempre a mano sobre la muralla */
.title__bum {
  position: absolute;
  right: calc(var(--gutter) + 8px);
  bottom: max(18px, calc(var(--floor) / 2 - 60px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bum {
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 40% 32%, #ff8a8a 0 12%, var(--red) 13% 62%, #c41a22 63%);
  box-shadow:
    0 0 0 5px var(--ink),
    0 0 0 10px #2a2340,
    0 0 0 13px var(--ink),
    0 9px 0 8px var(--ink),
    inset 0 -8px 0 var(--red-d);
  transition: transform .06s steps(1);
  -webkit-tap-highlight-color: transparent;
}
.bum span {
  font-family: var(--arcade);
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 var(--red-d);
}
.bum:active, .bum.is-hit { transform: translateY(6px); box-shadow: 0 0 0 5px var(--ink), 0 0 0 10px #2a2340, 0 0 0 13px var(--ink), 0 3px 0 8px var(--ink), inset 0 -3px 0 var(--red-d); }
.title__bum-hint {
  font-family: var(--pixel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  margin-top: 8px;
}

.title__credits {
  position: absolute;
  left: var(--gutter);
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: calc(100% - 2 * var(--gutter) - 130px);
  font-family: var(--arcade);
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}
.title__credits b { color: var(--yellow); font-weight: 400; }
.title__credits a { text-decoration: none; }
.title__credits a:hover { color: var(--yellow); }

/* ---------- bumbum run ---------- */

.title__inner { transition: opacity .3s steps(3), visibility 0s .3s; }
.title.is-playing .title__inner { opacity: 0; visibility: hidden; pointer-events: none; }
.title:not(.is-playing) .title__inner { transition-delay: 0s; }
.title.is-playing:not(.is-over) { touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }

.game-hud, .game-quit { display: none; }
.title.is-playing .game-hud, .title.is-playing .game-quit { display: flex; }

.game-hud {
  position: absolute;
  top: calc(var(--hud-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  gap: 22px;
  font-family: var(--arcade);
  font-size: clamp(13px, 1.8vw, 18px);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}
.game-hud span:first-child { color: #e8e2ff; opacity: .8; }
.game-hud b { font-weight: 400; }
.game-hud .is-up { animation: blink .25s steps(1) 4; }

.game-quit {
  position: absolute;
  top: calc(var(--hud-h) + 12px);
  left: var(--gutter);
  padding: 8px 10px 7px;
  border: 0;
  background: rgba(10, 7, 20, .6);
  color: #fff;
  font-family: var(--arcade);
  font-size: 9px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
}
.game-quit:hover { background: var(--red); }

.game-panel {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-h) + (100% - var(--hud-h) - var(--floor)) / 2);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(460px, calc(100% - 2 * var(--gutter)));
  padding: 26px 22px 22px;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(10, 7, 20, .9);
  box-shadow:
    0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff,
    0 0 0 9px rgba(10, 7, 20, .9), 0 0 0 12px var(--violet);
  animation: pop .25s steps(3);
}
.game-panel[hidden] { display: none; }
.game-panel__title { font-family: var(--arcade); font-size: 22px; text-transform: uppercase; color: var(--yellow); }
.game-panel__big { font-size: clamp(28px, 5.4vw, 48px); }
.game-panel__quote { font-family: var(--pixel); font-weight: 700; font-size: 16px; text-transform: lowercase; color: var(--peri); }
.game-panel__score { font-family: var(--arcade); font-size: 12px; text-transform: uppercase; }
.game-panel__score b { font-weight: 400; color: var(--yellow); }
.game-panel__record { font-family: var(--arcade); font-size: 11px; color: var(--yellow); text-transform: uppercase; animation: blink .6s steps(1) infinite; }
.game-panel__record[hidden], .game-panel__tip[hidden] { display: none; }
.game-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 6px; }
.game-panel__tip { max-width: 30em; font-family: var(--pixel); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.game-panel__exit { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.game-panel__exit:hover { color: var(--yellow); }

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow:
    0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink),
    inset 0 -5px 0 var(--gold-d), inset 0 3px 0 rgba(255, 255, 255, .45),
    0 10px 0 rgba(10, 7, 20, .45);
}
.btn { border: 0; cursor: pointer; }
.btn[hidden] { display: none; }

@media (max-width: 560px) {
  .game-hud { left: auto; right: var(--gutter); transform: none; gap: 12px; font-size: 11px; top: calc(var(--hud-h) + 20px); }
  .title__credits > span { font-size: 8px; }
  .game-panel { gap: 12px; padding: 22px 16px 18px; }
  .title__how { font-size: 10px; }
}

/* bocadillo que sigue a la mascota */
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 10px 5px;
  background: #fff;
  color: var(--ink);
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink);
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: #fff;
  box-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink);
}
.bubble--world {
  --bx: -999;
  --by: -999;
  transform: translate(calc(var(--bx) * 1px - 50%), calc(var(--by) * 1px - 100% - 16px));
  opacity: 0;
  transition: opacity .2s steps(2);
}
.bubble--world.is-on { opacity: 1; }

/* ==========================================================================
   SELECT PLAYER · BIO
   ========================================================================== */

.select {
  position: relative;
  padding: var(--section) 0;
  overflow: hidden;
  isolation: isolate;
  background: #21195a;
}
.select__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.select__sky canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  max-width: none;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: blur(1.5px) saturate(1.1);
}
.select::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(10, 7, 20, .9), rgba(10, 7, 20, .15) 22%, rgba(10, 7, 20, .25) 70%, rgba(10, 7, 20, .9));
}

.roster {
  display: grid;
  place-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.card {
  --c: var(--red);
  --cd: var(--red-d);
  grid-area: 1 / 1;
  position: relative;
  width: min(330px, 80vw);
  padding: 18px 18px 20px;
  background: #07060c;
  color: var(--c);
  text-align: center;
  font-family: var(--arcade);
  text-transform: uppercase;
}
.card::before {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  box-shadow: 0 -3px 0 var(--c), 0 3px 0 var(--c), -3px 0 0 var(--c), 3px 0 0 var(--c);
}
.card::after {
  content: '';
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 2px dotted color-mix(in srgb, var(--c) 45%, transparent);
  border-width: 0 2px;
}

.card--p1 { --c: var(--gold); --cd: var(--gold-d); }
.card--p3 { --c: var(--blue); --cd: var(--blue-d); }

.card--p2 {
  z-index: 2;
  box-shadow:
    0 -9px 0 #fff, 0 9px 0 #fff, -9px 0 0 #fff, 9px 0 0 #fff,
    0 0 70px 18px rgba(255, 255, 255, .28);
}
.card--p1, .card--p3 {
  z-index: 1;
  width: min(280px, 70vw);
  box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), -4px 0 0 var(--c), 4px 0 0 var(--c);
}
/* las laterales se colocan con translate/scale para no pelearse con transform */
.card--p1, .card--p3 { scale: .82; filter: brightness(.55); }
.card--p1 { translate: -62% 0; }
.card--p3 { translate: 62% 0; }

@media (min-width: 760px) {
  .card--p1, .card--p3 { scale: .84; }
  .card--p1 { translate: -78% 0; }
  .card--p3 { translate: 78% 0; }
}
@media (min-width: 1040px) {
  .card--p1, .card--p3 { scale: .88; filter: none; }
  .card--p1 { translate: -118% 30px; }
  .card--p3 { translate: 118% 30px; }
}

.card.is-shake { animation: shake .3s steps(6); }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }

.card__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: none;
  cursor: not-allowed;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 14px;
  font-size: 14px;
}
.card--p2 .card__head { font-size: 19px; }
.card__head h3 { font-size: inherit; font-weight: 400; }
.card__head i { width: 22px; flex: 0 0 auto; }
.card--p1 .card__head i, .card--p3 .card__head i { width: 14px; }

.card__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #cfd4d8;
  box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff, 0 0 0 8px #07060c, 0 0 0 11px var(--c);
}
.card--p2 .card__frame { width: calc(100% - 44px); }
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.card__frame.is-glitch { animation: glitch .3s steps(4); }
@keyframes glitch {
  0% { filter: none; }
  25% { filter: hue-rotate(90deg) contrast(1.6); transform: translateX(-4px); clip-path: inset(10% 0 40% 0); }
  50% { filter: invert(1); transform: translateX(4px); clip-path: inset(50% 0 5% 0); }
  75% { filter: saturate(3); transform: none; clip-path: inset(0 0 70% 0); }
}
/* P1 y P3: foto de estudio cuadrada, como en el póster */
.card__frame--side {
  width: calc(100% - 36px);
  aspect-ratio: 1;
  background: #c9ced3;
}
.card__frame--side img { object-position: 50% 40%; }
.card--p1 .card__arrow, .card--p3 .card__arrow { border-top-width: 10px; border-bottom-width: 10px; cursor: inherit; }
.card--p1 .card__arrow--prev, .card--p3 .card__arrow--prev { border-right-width: 8px; }
.card--p1 .card__arrow--next, .card--p3 .card__arrow--next { border-left-width: 8px; }

.card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.card__foot::before, .card__foot::after {
  content: '';
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 7px);
}
.card__foot i { width: 18px; color: var(--c); }

.card__arrow {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.card__arrow--prev { border-right: 12px solid var(--c); }
.card__arrow--next { border-left: 12px solid var(--c); }
.card__arrow:hover { filter: brightness(1.4); }
.card__arrow:focus-visible { outline-offset: 6px; }

.card__skin {
  margin-top: 16px;
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .1em;
}
.card__skin span { color: #fff; }

.card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: 11px;
  white-space: nowrap;
}
.card__tag::before, .card__tag::after {
  content: '';
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 8px);
}
.card--p2 .card__tag { color: #fff; font-size: 12px; }

.card__mascot {
  display: block;
  width: 118px;
  margin: 8px auto 10px;
}
.card--p1 .card__mascot, .card--p3 .card__mascot { width: 74px; }

.stats {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  text-align: left;
  box-shadow: 0 -3px 0 var(--c), 0 3px 0 var(--c), -3px 0 0 var(--c), 3px 0 0 var(--c);
}
.stats div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 10px;
}
.stats dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pixel); /* la arcade no tiene Ñ */
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.stats dt i { width: 12px; color: var(--c); }
.bar {
  position: relative;
  display: block;
  height: 14px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #07060c) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--c) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  clip-path: inset(0 calc(100% - var(--v) * 10%) 0 0);
}
.js .bar::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(10) .2s; }
.js .is-in .bar::before { clip-path: inset(0 calc(100% - var(--v) * 10%) 0 0); }

.loading {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 10px;
  color: #fff;
}
.loading__bar {
  position: relative;
  height: 14px;
  margin: 0 6px;
  box-shadow: 0 -2px 0 var(--c), 0 2px 0 var(--c), -2px 0 0 var(--c), 2px 0 0 var(--c);
}
.loading__bar::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: repeating-linear-gradient(90deg, var(--c) 0 calc(6.25% - 2px), transparent calc(6.25% - 2px) 6.25%);
  clip-path: inset(0 calc(100% - var(--v) * 6.25%) 0 0);
}
.js .loading__bar::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s steps(16) .5s; }
.js .is-in .loading__bar::before { clip-path: inset(0 calc(100% - var(--v) * 6.25%) 0 0); }
.is-locked .loading__txt { animation: blink 1.2s steps(1) infinite; }
/* P2 termina de cargar y pasa a READY! */
.card--p2.is-in .loading__txt { animation: ready 0s 2.1s forwards; }
@keyframes ready { to { font-size: 0; } }
.card--p2.is-in .loading__txt::after {
  content: 'ready!';
  font-size: 0;
  color: var(--yellow);
  animation: ready-on 0s 2.1s forwards, blink .8s steps(1) 2.1s infinite;
}
@keyframes ready-on { to { font-size: 10px; } }

/* diálogo de la bio */
.dialog {
  position: relative;
  max-width: 780px;
  margin: clamp(56px, 7vw, 84px) auto 0;
  padding: 30px clamp(20px, 3vw, 34px) 28px;
  background: rgba(7, 6, 12, .94);
  cursor: default;
  box-shadow:
    0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff,
    0 0 0 8px #07060c, 0 0 0 11px var(--violet);
}
.dialog__name {
  position: absolute;
  top: -18px;
  left: 22px;
  padding: 8px 12px 7px;
  background: var(--red);
  font-family: var(--arcade);
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff;
}
.dialog__text { position: relative; display: grid; gap: 14px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; }
.dialog__text.is-typing > p { color: transparent; }
.dialog__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}
.dialog__next {
  position: absolute;
  right: 18px;
  bottom: 8px;
  font-size: 12px;
  color: var(--yellow);
  opacity: 0;
}
.dialog.is-done .dialog__next { opacity: 1; animation: nudge .7s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }

/* ==========================================================================
   SELECT STAGE · FECHAS
   ========================================================================== */

.stages {
  position: relative;
  padding-bottom: var(--section);
  background: #000;
}
.stages__banner {
  position: relative;
  overflow: hidden;
}
.stages__banner img {
  width: 100%;
  height: clamp(260px, 50vw, 620px);
  object-fit: cover;
  object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.stages__world {
  position: absolute;
  top: calc(var(--hud-h) + 6px);
  left: var(--gutter);
  font-family: var(--arcade);
  font-size: clamp(9px, 1.1vw, 12px);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}
.stages__world span { color: var(--yellow); }

.stages__wrap { position: relative; margin-top: clamp(-120px, -8vw, -40px); }

.next-level {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label label label" "date where eta" "cta cta cta";
  align-items: center;
  gap: 10px 20px;
  max-width: 780px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 18px 22px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--pixel);
  text-transform: uppercase;
  box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff, 0 0 0 8px #000, 0 0 0 11px var(--yellow);
}
.next-level[hidden] { display: none; }
.next-level__label { grid-area: label; font-family: var(--arcade); font-size: 10px; letter-spacing: .14em; }
.next-level__label::before { content: '★ '; }
.next-level__date { grid-area: date; font-family: var(--arcade); font-size: clamp(22px, 3.4vw, 34px); }
.next-level__where { grid-area: where; font-size: clamp(15px, 1.8vw, 20px); line-height: 1.3; }
.next-level__where b { font-weight: 700; }
.next-level__eta {
  grid-area: eta;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--yellow);
}
.next-level__cta {
  grid-area: cta;
  justify-self: start;
  margin-top: 6px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 15px;
}
.next-level__cta.is-soon {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 8px 0 rgba(10, 7, 20, .35);
}
@media (max-width: 560px) {
  .next-level { grid-template-columns: auto 1fr; grid-template-areas: "label label" "date eta" "where where" "cta cta"; }
  .next-level__eta { justify-self: end; }
  .next-level__cta { justify-self: stretch; justify-content: center; }
}

.months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 40px clamp(32px, 6vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
}
.months__empty { font-family: var(--pixel); text-transform: uppercase; color: var(--mute); }
.months__empty a { color: var(--yellow); }

.month__name {
  margin-bottom: 14px;
  font-family: var(--pixel);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.month__list { display: grid; gap: 2px; }

.stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 6px;
  transition: background-color .15s steps(2);
}
.stage:hover { background: #17112a; }
.stage__in {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 5px 0 5px 26px;
  font-family: var(--pixel);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.35;
  text-transform: uppercase;
}
.stage__in::before {
  content: '▶';
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 11px;
  color: var(--yellow);
  opacity: 0;
}
.stage:hover .stage__in::before { opacity: 1; }
.stage__date { font-weight: 700; }
.stage__sep { color: var(--mute); }
.stage__city { font-weight: 700; }
.is-tba .stage__in { color: var(--dim); }
.stage.is-next { background: #1d1535; }
.is-next .stage__in { color: #fff; }
.is-next .stage__in::before { opacity: 1; animation: blink 1s steps(1) infinite; }
.stage__flag {
  margin-left: 10px;
  padding: 2px 6px 1px;
  font-family: var(--arcade);
  font-size: 8px;
  vertical-align: 2px;
  background: var(--yellow);
  color: var(--ink);
}

/* botón de entradas de cada fecha */
.stage__tix {
  flex: 0 0 auto;
  padding: 6px 9px 5px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), inset 0 -3px 0 var(--red-d);
}
.stage__tix:hover, .stage__tix:focus-visible { background: var(--yellow); color: var(--ink); box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink); }
.stage__tix.is-soon {
  background: transparent;
  color: var(--mute);
  box-shadow: 0 -2px 0 var(--dim), 0 2px 0 var(--dim), -2px 0 0 var(--dim), 2px 0 0 var(--dim);
}
.stage__tix.is-soon:hover, .stage__tix.is-soon:focus-visible { color: var(--yellow); box-shadow: 0 -2px 0 var(--yellow), 0 2px 0 var(--yellow), -2px 0 0 var(--yellow), 2px 0 0 var(--yellow); }

.cleared {
  margin-top: 36px;
  font-family: var(--pixel);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--dim);
}
.cleared[hidden] { display: none; }
.cleared summary { cursor: pointer; width: max-content; padding: 4px 0; }
.cleared summary b { color: var(--mute); }
.cleared ul { display: grid; gap: 2px; margin-top: 10px; columns: 2; }
@media (max-width: 560px) { .cleared ul { columns: 1; } }

.stages__more {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.stages__booking {
  margin-top: 22px;
  text-align: center;
  font-family: var(--pixel);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--mute);
  letter-spacing: .06em;
}
.stages__booking a { color: var(--yellow); text-transform: none; }
.stages__booking a[href^="#"] { text-transform: uppercase; }

/* ==========================================================================
   NO TAN DURO TV
   ========================================================================== */

.tv {
  position: relative;
  padding: var(--section) 0;
  background-color: #1cbde8;
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .45), transparent 62%),
    conic-gradient(rgba(255, 255, 255, .08) 25%, transparent 0 50%, rgba(255, 255, 255, .08) 0 75%, transparent 0);
  background-size: auto, 72px 72px;
  color: var(--ink);
}
.heading--tv .heading__sub { color: #fff; background: var(--ink); letter-spacing: .16em; }
.heading--tv .arcade--fire { font-size: 1.9em; margin-top: -.25em; }

.crt {
  max-width: 880px;
  margin: clamp(40px, 5vw, 60px) auto 0;
}
.crt__bezel {
  padding: clamp(14px, 2.6vw, 30px);
  border-radius: 34px 34px 10px 10px;
  background: linear-gradient(#3a3546, #24202e);
  box-shadow:
    0 0 0 4px var(--ink),
    inset 0 4px 0 #5b566b,
    inset 0 -6px 0 #17131f;
}
.crt__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px / 26px;
  background: #050407;
  box-shadow: 0 0 0 4px var(--ink), inset 0 0 60px rgba(0, 0, 0, .9);
}
.crt__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .12), transparent 40%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
}
.crt__screen.is-on::after { background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 40%); }
.crt__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.crt__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: 100%;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--arcade);
  text-transform: uppercase;
  background:
    linear-gradient(rgba(5, 4, 7, .55), rgba(5, 4, 7, .55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise .25s steps(4) infinite;
}
@keyframes noise {
  0% { background-position: 0 0, 0 0; }
  25% { background-position: 0 0, -40px 20px; }
  50% { background-position: 0 0, 30px -50px; }
  75% { background-position: 0 0, -20px -10px; }
}
.crt__ch {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: clamp(12px, 1.8vw, 18px);
  color: #5dff7a;
  text-shadow: 2px 2px 0 #000;
}
.crt__cta {
  font-size: clamp(13px, 2.2vw, 20px);
  padding: 12px 16px;
  background: rgba(0, 0, 0, .7);
}
.crt__play:hover .crt__cta { color: var(--yellow); }
.crt__info { font-family: var(--pixel); font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .12em; color: #e8e2ff; }
.crt__screen.is-on .crt__play { animation: power .42s steps(4) forwards; }
@keyframes power {
  0% { transform: none; }
  60% { transform: scale(1, .02); background: #fff; }
  100% { transform: scale(0, .02); background: #fff; }
}

.crt__panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 18px;
  padding: 12px 22px;
  background: #24202e;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 0 4px var(--ink), inset 0 -4px 0 #17131f;
}
.crt__brand {
  font-family: var(--arcade);
  font-size: 11px;
  color: #cfc8e6;
  text-transform: uppercase;
}
.crt__grill {
  flex: 1;
  height: 12px;
  background: repeating-linear-gradient(90deg, #17131f 0 3px, transparent 3px 6px);
}
.crt__knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8a8499, #3a3546 70%);
  box-shadow: 0 0 0 3px var(--ink);
}
.crt__led { width: 8px; height: 8px; background: #5a1015; box-shadow: 0 0 0 2px var(--ink); }
.crt__led.is-on { background: #5dff7a; box-shadow: 0 0 0 2px var(--ink), 0 0 10px #5dff7a; }

.tv__cta { margin-top: 40px; text-align: center; }

.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 44px);
  max-width: 1000px;
  margin: clamp(56px, 7vw, 84px) auto 0;
}
.items li:nth-child(1) .item { --tilt: -2.5deg; }
.items li:nth-child(2) .item { --tilt: 2deg; }
.items li:nth-child(3) .item { --tilt: -1.5deg; }
.item {
  --tilt: 0deg;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 16px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)),
    conic-gradient(#9fe6f7 25%, #b9eefa 0 50%, #9fe6f7 0 75%, #b9eefa 0);
  background-size: auto, 24px 24px;
  rotate: var(--tilt);
  box-shadow:
    0 -6px 0 #fff, 0 6px 0 #fff, -6px 0 0 #fff, 6px 0 0 #fff,
    0 0 0 9px var(--ink),
    10px 14px 0 rgba(10, 7, 20, .25);
  transition: rotate .2s steps(2), translate .2s steps(2);
}
.item:hover, .item:focus-visible { rotate: 0deg; translate: 0 -6px; }
.item__bar {
  justify-self: stretch;
  margin: 0 -16px 8px;
  padding: 10px 12px 9px;
  background: var(--ink);
  color: #fff;
  font-family: var(--arcade);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: left;
  position: relative;
}
.item__bar::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0);
  background-size: 6px 6px;
}
.item__icon { width: 74px; margin: 6px 0 2px; }
.item__name { font-family: var(--pixel); font-weight: 700; font-size: 16px; line-height: 1.25; }
.item__desc { font-family: var(--pixel); font-size: 12px; color: #2a3a5a; }
.item__bonus { font-family: var(--pixel); font-weight: 700; font-size: 13px; color: var(--red-d); margin-top: 2px; }

/* ==========================================================================
   CONTINUE? · CONTACTO
   ========================================================================== */

.continue {
  position: relative;
  padding: var(--section) 0 48px;
  background: radial-gradient(ellipse at 50% 10%, #241640, var(--night) 60%);
  text-align: center;
}
.continue .heading { font-size: clamp(30px, 6vw, 64px); }
.continue__count {
  margin-top: 26px;
  font-family: var(--arcade);
  font-size: clamp(56px, 10vw, 110px);
  line-height: 1;
  color: var(--yellow);
  text-shadow: 6px 6px 0 var(--red-d);
}
.continue__count.is-over { font-size: clamp(22px, 4vw, 40px); color: var(--red); text-shadow: 4px 4px 0 var(--ink); padding: .9em 0; }
.continue__lead {
  margin-top: 26px;
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* newsletter: entrada de récord de recreativa */
.join {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 30px clamp(18px, 3vw, 34px) 26px;
  background: #07060c;
  text-align: center;
  scroll-margin-top: calc(var(--hud-h) + 24px);
  box-shadow:
    0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff,
    0 0 0 9px #07060c, 0 0 0 12px var(--orange);
}
.join__kicker {
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mute);
}
.join__title { margin-top: 8px; font-weight: 400; font-size: clamp(20px, 3.6vw, 34px); }
.join__lead {
  margin-top: 8px;
  font-family: var(--pixel);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.join__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.join__input {
  flex: 2 1 220px;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background-color: #14101f;
  color: var(--yellow);
  caret-color: var(--yellow);
  font-family: var(--arcade);
  font-size: 13px;
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff;
}
.join__input--city {
  flex: 1 1 210px;
  letter-spacing: .02em;
  padding-right: 38px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* flecha pixel ▼ */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 8px;
}
.join__input--city:has(option[value=""]:checked) { color: var(--dim); }
.join__input--city option { background: #14101f; color: #fff; text-transform: none; }
.join__input::placeholder { color: var(--dim); opacity: 1; }
.join__input:focus { outline: none; background-color: #1d1535; box-shadow: 0 -3px 0 var(--yellow), 0 3px 0 var(--yellow), -3px 0 0 var(--yellow), 3px 0 0 var(--yellow); }
.join__row .btn { flex: 0 0 auto; height: 52px; }
.join__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  text-align: left;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mute);
  cursor: pointer;
}
.join__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #14101f;
  cursor: pointer;
  box-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
}
.join__check input:checked { background: var(--yellow); box-shadow: inset 0 0 0 3px #14101f, 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff; }
.join__check input:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }
.join__msg:empty { display: none; }
.join__msg {
  margin-top: 16px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--yellow);
}

.pads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  margin: 44px 0 52px;
}
.pad {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-decoration: none;
}
.pad__btn {
  --b: var(--red);
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-family: var(--arcade);
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, .55) 0 10%, var(--b) 11% 64%, color-mix(in srgb, var(--b) 70%, #000) 65%);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px #2a2340, 0 0 0 11px var(--ink), 0 7px 0 7px var(--ink);
  transition: transform .06s steps(1);
}
.pad:hover .pad__btn, .pad:focus-visible .pad__btn { transform: translateY(5px); }
.pad:active .pad__btn { transform: translateY(7px); }
.pad--ig .pad__btn { --b: #ff3d9a; }
.pad--tt .pad__btn { --b: #18c6d9; }
.pad--yt .pad__btn { --b: var(--red); }
.pad--x .pad__btn { --b: #8a85a0; }
.pad--mail .pad__btn { --b: var(--gold); color: var(--ink); text-shadow: none; }
.pad__label {
  display: grid;
  gap: 4px;
  font-family: var(--arcade);
  font-size: 9px;
  text-transform: uppercase;
}
.pad__label small { font-family: var(--pixel); font-size: 12px; color: var(--mute); text-transform: none; }

.continue__fine {
  display: grid;
  gap: 6px;
  margin-top: 64px;
  font-family: var(--pixel);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
}
.continue__fine span { color: var(--peri); text-transform: lowercase; }

/* ==========================================================================
   MONEDAS, MASCOTA Y EFECTOS
   ========================================================================== */

.coin {
  position: absolute;
  left: min(var(--x), calc(100% - 40px));
  top: var(--y);
  z-index: 5;
  width: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: bob 1.4s steps(2) infinite;
  filter: drop-shadow(3px 3px 0 rgba(10, 7, 20, .5));
}
.coin svg { animation: spin .9s steps(1) infinite; }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes spin {
  0% { transform: scaleX(1); }
  25% { transform: scaleX(.66); }
  50% { transform: scaleX(.2); }
  75% { transform: scaleX(.66); }
}
.coin:hover { filter: drop-shadow(3px 3px 0 rgba(10, 7, 20, .5)) brightness(1.2); }
.coin.is-got { animation: got .5s steps(4) forwards; pointer-events: none; }
@keyframes got { to { translate: 0 -60px; opacity: 0; } }

.float {
  position: absolute;
  z-index: 6;
  font-family: var(--arcade);
  font-size: 12px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  animation: float .9s steps(6) forwards;
}
@keyframes float { to { translate: 0 -70px; opacity: 0; } }

.popup {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  transform: translateY(160%);
  transition: transform .3s steps(4);
}
.popup.is-on { transform: none; }
.popup__mascot { width: 68px; flex: 0 0 auto; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .5)); }
.popup.is-on .popup__mascot { animation: hop .5s steps(2) 2; }
@keyframes hop { 50% { transform: translateY(-10px); } }
.popup__bubble {
  position: relative;
  max-width: min(320px, calc(100vw - 110px));
  margin-bottom: 44px;
  padding: 12px 14px 11px;
  background: #fff;
  color: var(--ink);
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: lowercase;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink);
}
.popup__bubble::before {
  content: '';
  position: absolute;
  left: -11px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink), 0 -3px 0 var(--ink), -3px 0 0 var(--ink);
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  background: var(--red);
  opacity: 0;
  mix-blend-mode: multiply;
}
.is-duro .flash { animation: flash 1.3s steps(8); }
@keyframes flash { 10%, 30%, 50% { opacity: .55; } 20%, 40%, 60% { opacity: 0; } }
.is-duro main, .is-duro .continue { animation: quake .12s steps(2) 10; }
@keyframes quake {
  0% { transform: translate(-6px, 3px); }
  50% { transform: translate(6px, -4px); }
}

/* ---------- aparición ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s steps(5), transform .5s steps(5); }
.js .card--p1[data-reveal], .js .card--p3[data-reveal] { transition-delay: .3s; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .blink { animation: none; }
}