@font-face { font-family: "Baseball Club"; src: url("fonts/baseball-club.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Layout: a fight poster that runs top to bottom — hero bill, the fight card (the mods as bouts), install, small print. */
:root {
  --night: #0c0f1d;      /* arena dark */
  --canvas: #141a31;     /* HUD navy panel */
  --rope: #26305a;       /* lines and borders */
  --ink: #f1ebdd;        /* poster paper white */
  --muted: #a4a9bf;
  --corner: #ffa040;     /* the game's own menu orange */
  --blood: #d8283f;
  --blood-dark: #8e1424;  /* all the reds on the page */
  --belt: #e6c25b;
  --display: "Big Shoulders Display", "Impact", "Arial Narrow", sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --heading: "Baseball Club", "Big Shoulders Display", "Impact", sans-serif;
  --pixel: "Silkscreen", "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
a { color: var(--corner); }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 4px solid var(--blood-dark); }
.hero-shot {
  position: absolute; inset: 0;
  background: var(--night) center 40% / cover no-repeat;
  background-image: url("img/league-fight.jpg");
  image-rendering: pixelated;
  opacity: .55;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,15,29,.35) 0%, rgba(12,15,29,.75) 55%, var(--night) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: 72px 56px; display: grid; gap: 22px; }
.tag {
  font: 400 .8rem/1 var(--pixel); letter-spacing: .08em; color: var(--corner);
  text-transform: uppercase;
}
h1 {
  margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  line-height: .86; letter-spacing: .01em; text-wrap: balance;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
}
h1 .small { display: block; font-size: .42em; color: var(--muted); letter-spacing: .06em; font-weight: 700; }
h1 .big { display: block; color: var(--ink); text-shadow: 6px 6px 0 var(--blood-dark); }
.lede { max-width: 58ch; margin: 0; font-size: 1.2rem; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border: 3px solid var(--ink);
  background: var(--corner); color: #1a1206;
  font: 700 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; box-shadow: 6px 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--ink); }
.btn:focus-visible { outline: 3px dashed var(--belt); outline-offset: 5px; }
.meta { font: 400 .78rem/1.4 var(--pixel); color: var(--muted); }

/* ---------- section heads ---------- */
section { padding-block: 72px; }
.head { display: grid; gap: 8px; margin-bottom: 36px; }
h2 {
  margin: 0; font: 900 clamp(2.4rem, 6vw, 4rem)/.95 var(--display); text-transform: uppercase;
  text-wrap: balance;
}
.head p { margin: 0; max-width: 60ch; color: var(--muted); }

/* ---------- the fight card ---------- */
.card { display: grid; gap: 28px; }
.bout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  background: var(--canvas); border: 3px solid var(--rope);
}
.bout.flip .bout-shot { order: 2; }
.bout-shot { min-width: 0; background: #000; border-right: 3px solid var(--rope); }
.bout.flip .bout-shot { border-right: 0; border-left: 3px solid var(--rope); }
.bout-shot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.bout-body { min-width: 0; padding: 28px 30px 30px; display: grid; gap: 14px; align-content: start; }
.billing {
  justify-self: start; padding: 5px 10px 4px; font: 400 .72rem/1 var(--pixel);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--blood-dark); color: var(--ink);
}
.billing.gold { background: var(--belt); color: #1a1206; }
.billing.plain { background: var(--rope); color: var(--ink); }
h3 { margin: 0; font: 900 2.4rem/.95 var(--display); text-transform: uppercase; }
.bout-body p { margin: 0; }
.facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.facts li { position: relative; padding-left: 22px; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px;
  background: var(--corner);
}
.facts b { color: var(--corner); font-weight: 700; }

/* boosts strip — mirrors the in-game pick-one-of-three boxes */
.boosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.boost {
  border: 2px solid var(--rope); padding: 10px 12px; background: var(--night);
  display: grid; gap: 4px;
}
.boost.rare { border-color: var(--belt); }
.boost .n { font: 400 .78rem/1.2 var(--pixel); text-transform: uppercase; color: var(--ink); }
.boost .d { font-size: .88rem; line-height: 1.4; color: var(--muted); }
.boost.rare .n { color: var(--belt); }

/* smaller bouts on the undercard */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pair .bout { grid-template-columns: 1fr; }
.pair .bout-shot { border-right: 0; border-bottom: 3px solid var(--rope); aspect-ratio: 16 / 9; }


.scorecard {
  display: grid; align-content: center; gap: 12px; padding: 22px 26px;
  background: var(--ink); color: #1b1a22;
}
.scorecard span { font: 400 .72rem/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--blood-dark); }
.scorecard ol {
  margin: 0; padding: 0 0 0 1.6em; columns: 2; column-gap: 26px;
  font: 400 .72rem/1.9 var(--pixel); text-transform: uppercase;
}
.scorecard li { break-inside: avoid; }
@media (max-width: 520px) { .scorecard ol { columns: 1; } .pair .bout-shot.scorecard { aspect-ratio: auto; } }

.bout-shot.stack { display: grid; gap: 3px; grid-template-rows: auto 1fr 1fr; background: var(--rope); }
.bout-shot.stack img { height: 100%; min-height: 0; object-fit: cover; }
.bout-shot.stack.pair2 { grid-template-rows: 1fr 1fr; }

/* YouTube: a poster with a play button; the player only loads when clicked */
.yt { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat;
  background-image: url("https://i.ytimg.com/vi/4bVjLlWc4oA/hqdefault.jpg"), url("img/survival-fight.jpg"); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  padding-bottom: 5%;
  text-decoration: none; background: rgba(12,15,29,.25); transition: background .15s ease; }
.yt-play:hover { background: rgba(12,15,29,.05); }
.yt-play:focus-visible { outline: 3px dashed var(--belt); outline-offset: -6px; }
.yt-btn { width: 74px; height: 52px; background: var(--blood-dark); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); position: relative; transition: transform .12s ease; }
.yt-btn::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ink); }
.yt-play:hover .yt-btn { transform: translate(-2px,-2px); }
.yt-label { align-self: flex-end; margin-bottom: 15px; font: 400 .72rem/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: rgba(12,15,29,.8); padding: 5px 8px; }
@media (max-width: 860px) {
  .bout-shot.stack, .bout-shot.stack.pair2, .bout.flip .bout-shot.stack { aspect-ratio: auto; grid-template-rows: none; grid-auto-rows: auto; }
  .bout-shot.stack img { height: auto; aspect-ratio: 16 / 9; }
}


/* ---------- the game ---------- */
.game { background: var(--canvas); border-top: 4px solid var(--corner); }
.game-inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.game-text { flex: 1 1 420px; min-width: 0; display: grid; gap: 10px; }
.game-text p { margin: 0; max-width: 62ch; color: var(--muted); }
.btn-alt { background: var(--ink); color: #111; box-shadow: 6px 6px 0 var(--corner); }
.btn-alt:hover { box-shadow: 8px 8px 0 var(--corner); }
.btn-alt:active { box-shadow: 2px 2px 0 var(--corner); }

/* ---------- street band ---------- */
.band {
  height: 180px; background: #000 center / cover no-repeat;
  background-image: url("img/alley.jpg"); image-rendering: pixelated;
  border-block: 4px solid var(--blood-dark);
}

/* ---------- install ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; counter-reset: rnd; }
.steps li {
  counter-increment: rnd; background: var(--canvas); border: 3px solid var(--rope);
  padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; min-width: 0;
}
.steps li::before {
  content: "ROUND " counter(rnd); font: 400 .72rem/1 var(--pixel); color: var(--corner); letter-spacing: .08em;
}
.steps h4 { margin: 0; font: 700 1.5rem/1 var(--display); text-transform: uppercase; }
.steps p { margin: 0; font-size: .95rem; color: var(--muted); }
code {
  font: 400 .85em/1 var(--pixel); color: var(--ink); background: var(--night);
  padding: 2px 5px; border: 1px solid var(--rope);
}
.note {
  margin-top: 28px; padding: 18px 20px; border: 2px dashed var(--rope);
  color: var(--muted); max-width: 80ch;
}
.note b { color: var(--ink); }

/* ---------- final bell ---------- */
.final { text-align: left; border-top: 3px solid var(--rope); }
.final .wrap { display: grid; gap: 22px; }
.small-print { font-size: .9rem; color: var(--muted); max-width: 70ch; margin: 0; }
footer { padding-block: 26px 40px; font: 400 .72rem/1.5 var(--pixel); color: var(--muted); }

@media (max-width: 860px) {
  .bout, .bout.flip { grid-template-columns: 1fr; }
  .bout-shot, .bout.flip .bout-shot { order: 0; border: 0; border-bottom: 3px solid var(--rope); aspect-ratio: 16 / 9; }
  .pair { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .bout-body { padding: 22px 20px 24px; }
  h3 { font-size: 2rem; }
  .band { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Headings in Baseball Club */
h1, h1 .small, h2, h3, .steps h4 { font-family: var(--heading); font-weight: 400; letter-spacing: 0; }
h1 { line-height: 1; }
h2, h3 { line-height: 1.05; }
.steps h4 { font-size: 1.45rem; line-height: 1.05; }
/* The red drop shadow from the big title, scaled down for each heading size */
h2 { text-shadow: 4px 4px 0 var(--blood-dark); }
h3 { text-shadow: 3px 3px 0 var(--blood-dark); }
.steps h4 { text-shadow: 2px 2px 0 var(--blood-dark); }

/* ---------- site nav (both pages) ---------- */
.topnav { position: sticky; top: 0; z-index: 20; background: rgba(12,15,29,.94); border-bottom: 3px solid var(--rope); backdrop-filter: blur(4px); }
.topnav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-block: 10px; }
.topnav .brand { font: 400 1.05rem/1 var(--heading); color: var(--ink); text-decoration: none; margin-right: auto; text-shadow: 2px 2px 0 var(--blood-dark); }
.topnav a.lnk { font: 400 .72rem/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.topnav a.lnk:hover { color: var(--ink); }
.topnav a.lnk[aria-current="page"] { color: var(--corner); border-bottom-color: var(--corner); }
@media (max-width: 520px) { .topnav .brand { width: 100%; } }

/* ---------- the switch: a Mod Settings row, as the game draws it ---------- */
.switch { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: stretch; font: 400 .7rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; border: 2px solid var(--rope); }
.switch .k { padding: 6px 9px 5px; background: var(--night); color: var(--ink); }
.switch .v { padding: 6px 9px 5px; background: #2b56b8; color: #fff; }
.switch .v.off { background: var(--rope); color: var(--muted); }
.switches { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- teaser on the home page ---------- */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--canvas); border: 3px solid var(--belt); }
.teaser .bout-shot { border-right: 3px solid var(--belt); }
.teaser .bout-body h3 { font-size: 2.8rem; }
.teaser .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } .teaser .bout-shot { border: 0; border-bottom: 3px solid var(--belt); } }

/* ---------- career page ---------- */
.hero.small-hero .wrap { padding-block: 56px 44px; }
.hero.small-hero h1 { font-size: clamp(3rem, 9vw, 6.5rem); }
.hero.small-hero .hero-shot { background-image: url("img/profile-fights.jpg"); opacity: .35; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; }
.jump a { font: 400 .72rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: none; padding: 8px 11px 7px; border: 2px solid var(--rope); background: var(--canvas); }
.jump a:hover { border-color: var(--corner); color: var(--corner); }
section.alt { background: #0f1426; border-block: 3px solid var(--rope); }
.rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rule { background: var(--canvas); border: 3px solid var(--rope); padding: 20px 22px 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.rule h4 { margin: 0; font: 400 1.5rem/1.05 var(--heading); text-transform: uppercase; text-shadow: 2px 2px 0 var(--blood-dark); }
.rule p { margin: 0; font-size: .97rem; color: var(--muted); }
.rule p b { color: var(--ink); }
.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.rung { border: 2px solid var(--rope); background: var(--night); padding: 12px 14px; display: grid; gap: 5px; }
.rung .n { font: 400 .78rem/1.2 var(--pixel); text-transform: uppercase; color: var(--belt); }
.rung .d { font-size: .9rem; line-height: 1.45; color: var(--muted); }
.soon { display: grid; place-items: center; text-align: center; padding: 30px; background: repeating-linear-gradient(135deg, var(--night) 0 14px, #10152a 14px 28px); font: 400 .78rem/1.6 var(--pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }