/* Fusbolín landing — arcade UI, same design system as the game. */
@font-face {
  font-family: 'Fusbolin Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/rubik-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fusbolin Rubik';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/rubik-latin-wght-italic.woff2') format('woff2');
}

:root {
  --ui-surface: #0E1411;
  --ui-surface-raised: #1C2A22;
  --ui-surface-sunken: #111915;
  --ui-line: #3A4A3F;
  --ui-line-strong: #F3E9CF;
  --ui-ink: #F3E9CF;
  --ui-ink-muted: #A9A58F;
  --ui-accent: #FFD23F;
  --ui-accent-hover: #FFE07A;
  --ui-on-accent: #0E1411;
  --ui-rubio: #2F6DB5;
  --ui-gary: #C8412F;
  --ui-font: 'Fusbolin Rubik', ui-rounded, 'Avenir Next', system-ui, sans-serif;
  --ui-slant: 16px;
  --ui-slant-sm: 10px;
  --ui-stroke: 3px;
  --ui-tilt: -4deg;
  --ui-shadow-sm: 4px 4px 0 #000;
  --ui-shadow-md: 6px 6px 0 #000;
  --ui-shadow-lg: 8px 8px 0 #000;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ui-surface); color: var(--ui-ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ui-font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ui-accent); text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Display type: heavy italic uppercase. */
.display {
  font-weight: 900; font-style: italic; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.01em; margin: 0;
}
.display .accent { color: var(--ui-accent); }
.tilt { display: inline-block; transform: rotate(var(--ui-tilt)); }
.shadow-hard { text-shadow: var(--ui-shadow-md); }

/* Parallelogram button (clip-path shape on pseudo-elements, hard drop shadow). */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 calc(var(--ui-slant) + 26px);
  font-family: var(--ui-font); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 24px; line-height: 1; letter-spacing: -0.01em;
  color: var(--ui-on-accent); background: none; border: 0; cursor: pointer;
  filter: drop-shadow(var(--ui-shadow-md));
  transition: transform 120ms cubic-bezier(0.2,0.8,0.2,1);
}
.btn::before, .btn::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.btn::before { inset: 0; background: var(--btn-stroke, var(--ui-accent)); clip-path: polygon(var(--ui-slant) 0, 100% 0, calc(100% - var(--ui-slant)) 100%, 0 100%); }
.btn::after { inset: var(--ui-stroke); background: var(--btn-fill, var(--ui-accent)); clip-path: polygon(calc(var(--ui-slant) - var(--ui-stroke)) 0, 100% 0, calc(100% - var(--ui-slant) + var(--ui-stroke)) 100%, 0 100%); }
.btn:hover { --btn-fill: var(--ui-accent-hover); --btn-stroke: var(--ui-accent-hover); }
.btn:active { transform: translate(3px, 3px); filter: drop-shadow(var(--ui-shadow-sm)); }
.btn .tri { font-size: 16px; }
.btn--secondary {
  color: var(--ui-ink);
  --btn-fill: var(--ui-surface); --btn-stroke: var(--ui-line-strong);
  filter: drop-shadow(var(--ui-shadow-sm));
}

/* Slanted chip. */
.chip {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px calc(var(--ui-slant-sm) + 16px); font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.02em; color: var(--ui-ink);
}
.chip::before, .chip::after { content: ''; position: absolute; z-index: -1; }
.chip::before { inset: 0; background: var(--ui-line-strong); clip-path: polygon(var(--ui-slant-sm) 0, 100% 0, calc(100% - var(--ui-slant-sm)) 100%, 0 100%); }
.chip::after { inset: 2px; background: var(--ui-surface); clip-path: polygon(calc(var(--ui-slant-sm) - 2px) 0, 100% 0, calc(100% - var(--ui-slant-sm) + 2px) 100%, 0 100%); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-accent); }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.brand { color: var(--ui-ink); font-weight: 900; font-style: italic; font-size: 27px; letter-spacing: -0.01em; text-transform: uppercase; }
.topbar nav > a { color: var(--ui-ink-muted); margin-left: 22px; font-weight: 900; font-style: italic; font-size: 15px; text-transform: uppercase; }
.topbar nav > a:hover { color: var(--ui-ink); }
.lang { margin-left: 22px; display: inline-flex; gap: 4px; vertical-align: middle; }
.lang a { color: var(--ui-ink-muted); font-weight: 900; font-style: italic; font-size: 14px; padding: 3px 8px; }
.lang a:hover { color: var(--ui-ink); }
.lang a.on { color: var(--ui-on-accent); background: var(--ui-accent); }

.actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.actions--left { justify-content: flex-start; margin-top: 22px; }
.accent { color: var(--ui-accent); }

/* Actor canvases overhang their slots; never let that scroll the page sideways. */
main { overflow-x: clip; }

/* ---------- Hero stage: the face-off ---------- */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 8px 0 44px;
  background:
    radial-gradient(ellipse 60% 22% at 50% 64%, #2E7A4E 0%, #1B4A30 45%, transparent 72%),
    radial-gradient(ellipse 90% 70% at 50% 0%, #1E2B24 0%, var(--ui-surface) 70%);
}
/* Two stadium spotlights sweeping over the pitch. */
.lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lights i {
  position: absolute; top: -20%; width: 42%; height: 120%;
  background: linear-gradient(to bottom, rgba(255, 240, 200, 0.16), rgba(255, 240, 200, 0) 80%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: sweep 7s ease-in-out infinite alternate;
}
.lights i:first-child { left: 6%; --from: -14deg; --to: 10deg; }
.lights i:last-child { right: 6%; --from: 14deg; --to: -10deg; animation-delay: -3.5s; }
@keyframes sweep { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }

.stage-inner { text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0;
  font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em;
  color: var(--ui-ink); background: #000; padding: 7px 14px; transform: skewX(-10deg);
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #E0402E; box-shadow: 0 0 0 0 rgba(224, 64, 46, 0.7); animation: blip 1.4s infinite; }
@keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(224, 64, 46, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(224, 64, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 64, 46, 0); } }

.faceoff {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  max-width: 900px; margin: 0 auto; min-height: clamp(300px, 52vh, 520px);
}
.fighter {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.fighter:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 6px; }
.fighter--rubio { animation: enter-left 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fighter--gary { animation: enter-right 700ms cubic-bezier(0.2, 1.4, 0.4, 1) 120ms both; }
@keyframes enter-left { from { transform: translateX(-60vw) rotate(-8deg); } to { transform: none; } }
@keyframes enter-right { from { transform: translateX(60vw) rotate(8deg); } to { transform: none; } }

/* An actor is a floor-anchored slot; its canvas is wider than the slot so a
   back-flip or a samba step never gets clipped at the sides. */
.actor { position: relative; display: block; width: 100%; height: clamp(260px, 46vh, 460px); }
.actor canvas { position: absolute; bottom: 0; left: -40%; width: 180%; height: 100%; pointer-events: none; }
.fighter .actor::after {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: -8px; height: 18px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
}
.fighter:hover .actor canvas { filter: brightness(1.08); }

.nameplate {
  position: relative; z-index: 2; margin-top: 10px; display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 6px 18px 7px; transform: skewX(-10deg); box-shadow: var(--ui-shadow-sm); text-transform: uppercase; font-style: italic;
}
.nameplate b { font-weight: 900; font-size: clamp(18px, 2.6vw, 26px); line-height: 1; letter-spacing: -0.01em; }
.nameplate small { font-weight: 800; font-size: 11px; letter-spacing: 0.08em; opacity: 0.85; }
.nameplate--rubio { background: var(--ui-rubio); color: #fff; border-left: 6px solid #fff; }
.nameplate--gary { background: var(--ui-gary); color: #fff; border-right: 6px solid #fff; align-items: flex-end; }

.vs { align-self: center; margin: 0 -10px 40px; z-index: 3; }
.vs span {
  display: block; font-weight: 900; font-style: italic; font-size: clamp(54px, 10vw, 120px); line-height: 1;
  color: var(--ui-accent); text-shadow: 5px 5px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  animation: slam 900ms cubic-bezier(0.3, 1.6, 0.5, 1) 500ms both, throb 2.4s ease-in-out 1.6s infinite;
}
@keyframes slam { from { transform: scale(4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes throb { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.08) rotate(-4deg); } }

/* Comic speech bubbles. */
.bubble {
  position: absolute; top: 2%; z-index: 4; max-width: min(250px, 42vw); width: max-content;
  padding: 10px 14px; background: var(--ui-ink); color: var(--ui-on-accent);
  font-weight: 900; font-style: italic; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.15; text-transform: uppercase; text-align: left;
  box-shadow: var(--ui-shadow-sm); border: 3px solid #000;
  opacity: 0; transform: scale(0.4); pointer-events: none;
  transition: opacity 160ms ease, transform 260ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.bubble::after { content: ''; position: absolute; bottom: -14px; width: 18px; height: 14px; background: #000; }
.bubble::before { content: ''; position: absolute; bottom: -8px; width: 12px; height: 9px; background: var(--ui-ink); z-index: 1; }
.bubble--left { left: 58%; transform-origin: 0 100%; }
.bubble--left::after { left: 14px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble--left::before { left: 17px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble--right { right: 58%; transform-origin: 100% 100%; text-align: right; }
.bubble--right::after { right: 14px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble--right::before { right: 17px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble.is-on { opacity: 1; transform: scale(1) rotate(-2deg); }
.bubble--right.is-on { transform: scale(1) rotate(2deg); }
.bubble:empty { display: none; }

.hero-cta { text-align: center; padding: 26px 0 0; }
.hero-cta h1 { font-size: clamp(34px, 6.5vw, 62px); margin-bottom: 14px; }
.hero-cta p.tag { margin: 0 auto 26px; max-width: 620px; color: var(--ui-ink-muted); font-size: clamp(16px, 2.3vw, 20px); }
.hint { margin: 18px 0 0; color: var(--ui-ink-muted); font-style: italic; font-weight: 700; font-size: 14px; }
.btn--pulse { animation: nudge 2.6s ease-in-out 2s infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-4px) rotate(-1.5deg); } 96% { transform: translateY(0) rotate(1deg); } }

/* ---------- LED ticker ---------- */
.ticker { overflow: hidden; background: var(--ui-accent); color: var(--ui-on-accent); border-block: 3px solid #000; transform: rotate(-1.2deg); margin: 8px -10px 0; box-shadow: var(--ui-shadow-md); }
.ticker-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ticker span { padding: 12px 0; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; }
.ticker span::after { content: '●'; margin: 0 22px; font-size: 10px; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section.block { padding: 72px 0 6px; }
.eyebrow { color: var(--ui-accent); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; margin: 0 0 8px; }
h2.title { font-size: clamp(28px, 4.8vw, 46px); margin-bottom: 30px; }

/* ---------- The story ---------- */
.story { padding-top: 80px; }
.chapter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 8px;
  margin-bottom: 64px;
}
.chapter-actor .actor { height: clamp(240px, 34vw, 380px); }
.chapter-actor .bubble { top: -2%; max-width: 200px; }
/* Chapter bubbles stay over their own character, clear of the story card. */
.chapter-actor .bubble--left { left: 14%; }
.chapter-actor .bubble--right { right: 14%; }
.chapter-card {
  align-self: center; position: relative;
  background: var(--ui-surface-raised); border-left: 6px solid var(--ui-accent); box-shadow: var(--ui-shadow-lg);
  padding: 26px 26px 24px;
}
.chapter--flip .chapter-card { border-left: 0; border-right: 6px solid var(--ui-accent); }
.chapter-card h3 { margin: 0 0 12px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 3vw, 30px); line-height: 0.95; letter-spacing: -0.01em; }
.chapter-card p { margin: 0 0 10px; color: var(--ui-ink-muted); font-size: 16px; }
.chapter-card p:last-child { margin-bottom: 0; }
.chapter-card b { color: var(--ui-ink); }
.chapter-no { display: flex; align-items: center; gap: 10px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; color: var(--ui-ink) !important; }
.chapter-no span { background: var(--ui-accent); color: var(--ui-on-accent); padding: 3px 9px; transform: skewX(-10deg); }
.chapter--cup .chapter-card { background: linear-gradient(135deg, #2A2A18, var(--ui-surface-raised) 60%); }

.tally { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 14px; padding: 14px; background: #000; border: 3px solid var(--ui-line); }
.tally-side { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.tally-side small { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; padding: 2px 10px; color: #fff; }
.tally--rubio small { background: var(--ui-rubio); }
.tally--gary small { background: var(--ui-gary); }
.tally-side b { font-weight: 900; font-style: italic; font-size: clamp(32px, 5vw, 46px); line-height: 1.05; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.tally-dash { font-weight: 900; font-size: 30px; color: var(--ui-ink-muted); }
.aside { font-style: italic; font-size: 14.5px !important; }

/* ---------- Live match video ---------- */
.live { position: relative; border: var(--ui-stroke) solid var(--ui-line-strong); box-shadow: var(--ui-shadow-lg); background: #000; overflow: hidden; aspect-ratio: 16 / 9; }
.live video { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-badge {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: #000; color: #fff; padding: 6px 12px; transform: skewX(-10deg);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em;
}
.caption { margin: 14px 0 0; color: var(--ui-ink-muted); font-size: 14.5px; font-style: italic; }

/* ---------- Modes ---------- */
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mode {
  position: relative; overflow: hidden;
  background: var(--ui-surface-raised); border-left: 6px solid var(--ui-accent); box-shadow: var(--ui-shadow-md); padding: 24px;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms;
}
.mode:hover { transform: translate(-3px, -3px) rotate(-0.6deg); box-shadow: var(--ui-shadow-lg); }
.mode-no { position: absolute; right: 12px; top: -6px; font-weight: 900; font-style: italic; font-size: 64px; color: rgba(243, 233, 207, 0.07); line-height: 1; }
.mode h3 { margin: 0 0 8px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 20px; letter-spacing: -0.01em; }
.mode p { margin: 0; color: var(--ui-ink-muted); font-size: 15.5px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery figure { margin: 0; border: var(--ui-stroke) solid var(--ui-line-strong); box-shadow: var(--ui-shadow-md); background: #000; overflow: hidden; }
.gallery img { width: 100%; height: auto; display: block; transition: transform 400ms ease; }
.gallery figure:hover img { transform: scale(1.04); }

/* ---------- Finale ---------- */
.finale { margin: 72px 0 6px; text-align: center; background: var(--ui-surface-raised); border-left: 6px solid var(--ui-accent); box-shadow: var(--ui-shadow-lg); padding: 48px 24px; }
.finale h2 { font-size: clamp(28px, 5.4vw, 48px); margin-bottom: 10px; }
.finale p { margin: 0 0 26px; color: var(--ui-ink-muted); font-size: 18px; }

/* ---------- Footer ---------- */
footer { margin-top: 68px; border-top: var(--ui-stroke) solid var(--ui-line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 44px; }
footer .brand { font-size: 21px; }
footer nav a { color: var(--ui-ink-muted); margin-left: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 14px; }
footer nav a:first-child { margin-left: 0; }
footer .copy { color: var(--ui-ink-muted); font-weight: 500; font-size: 13px; width: 100%; margin-top: 8px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 1.2, 0.4, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.chapter.reveal .chapter-actor:first-child { transform: translateX(-40px); transition: transform 700ms cubic-bezier(0.2, 1.3, 0.4, 1) 120ms; }
.chapter.reveal .chapter-actor:last-child { transform: translateX(40px); transition: transform 700ms cubic-bezier(0.2, 1.3, 0.4, 1) 220ms; }
.chapter.reveal.is-in .chapter-actor { transform: none; }
.modes .mode.reveal:nth-child(2), .gallery .reveal:nth-child(2) { transition-delay: 100ms; }
.modes .mode.reveal:nth-child(3), .gallery .reveal:nth-child(3) { transition-delay: 200ms; }
.modes .mode.reveal:nth-child(4) { transition-delay: 300ms; }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .topbar nav > a { display: none; }
  .brand { font-size: 23px; }
  .faceoff { min-height: 0; padding-top: 78px; }
  .fighter .bubble { top: auto; bottom: calc(100% + 6px); }
  .fighter .bubble--left { left: 8%; }
  .fighter .bubble--right { right: 8%; }
  .actor { height: clamp(220px, 40vh, 320px); }
  .vs { margin: 0 -18px 30px; }
  .bubble { max-width: 44vw; font-size: 12.5px; padding: 8px 10px; }
  .bubble--left { left: 30%; }
  .bubble--right { right: 30%; }
  .chapter { grid-template-columns: 1fr 1fr; gap: 0 8px; margin-bottom: 48px; }
  .chapter-card { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
  .chapter-actor .actor { height: 230px; }
  .chapter-actor .bubble { max-width: 40vw; }
  .chapter-actor .bubble--left { left: 6%; }
  .chapter-actor .bubble--right { right: 6%; }
  .modes { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .btn { font-size: 21px; min-height: 58px; }
  .tally-side { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .chapter.reveal .chapter-actor { opacity: 1; transform: none; }
  .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Bonus chapter: La Barrida, the playable one. */
.chapter--extra .chapter-card { border-left-color: var(--ui-gary); background: linear-gradient(135deg, #2A1714, var(--ui-surface-raised) 60%); }
.chapter--extra .chapter-no span { background: var(--ui-gary); color: #fff; }

/* Chapter 2's record when it is live. */
.tally-label { display: flex; align-items: center; gap: 8px; margin: 14px 0 -4px !important; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 12px !important; letter-spacing: 0.06em; color: var(--ui-ink) !important; }
.tally.is-live { border-color: var(--ui-accent); }
.tally-cta { margin-top: 14px; }