/* ==========================================================================
   Boxfight landing page. Layered on ../../css/v4.css (shared header, footer,
   tokens, the cinematic hero, gallery and lightbox). Everything here is
   scoped to body.game.
   2026-10-19: the original September Boxfight site's look (big condensed
   uppercase headlines, square buttons, mono eyebrows, a feature strip) in the
   site's gray and amber.
   2026-10-20: condensed (Evan: "a lot of wasted space"). Six sections, not
   eight: maps as image cards with the text on the picture, an "In the game"
   frame beside the modes (it takes a gameplay video later), the range in two
   columns, a six-across gallery, and the download sharing a row with
   multiplayer.
   1 type · 2 buttons · 3 hero · 4 strip · 5 sections · 6 maps · 7 in the game
   8 range · 9 gallery · 10 get the game + multiplayer · 11 small screens
   ========================================================================== */

body.game { --display: "Anton", Impact, "Arial Narrow", sans-serif; }

/* 1. Type ----------------------------------------------------------------- */
.game .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.game .eyebrow::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent-dim); }
.game .display { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.95; letter-spacing: 0.005em; }
.game .display span { color: var(--accent); }
/* Headlines break on their own beat, never with one word left over (2026-10-20). */
.game .display, .gsub { text-wrap: balance; }
.game .display--stack span { display: block; }
.game .lead, .gstations span, .gmodes p, .gsteps span, .gget__note { text-wrap: pretty; }
.game .lead { max-width: 52ch; margin-top: 16px; color: var(--soft); }
.gsub { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: 0.01em; }

/* 2. Buttons: square, like the original -------------------------------- */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 13px 24px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 600 15px/1.2 var(--font); letter-spacing: 0.02em; text-decoration: none; transition: transform 0.15s, filter 0.15s, background 0.15s, border-color 0.15s; }
.gbtn:hover { color: var(--on-accent); filter: brightness(1.08); transform: translateY(-2px); }
.gbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gbtn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.gbtn--ghost:hover { color: var(--text); border-color: var(--accent); background: rgba(255, 255, 255, 0.04); filter: none; }
.gactions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Meta lines break between items, never inside one ("50.4 / MB" on a phone). */
.game .seg { white-space: nowrap; }

/* 3. Hero: the shared .cine reel, with the original's headline ---------- */
.game .cine { min-height: min(76vh, 740px); padding-block: clamp(88px, 11vw, 140px) clamp(36px, 5vw, 60px); }
.game .cine h1 { margin-top: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(60px, 8.4vw, 128px); line-height: 0.9; letter-spacing: 0.005em; }
.game .cine h1 span { display: block; color: var(--cine-accent); }
.game .cine .eyebrow { color: var(--cine-accent); }
.game .cine .eyebrow::before { background: var(--cine-accent); }
.game .cine .hero__lede { margin-top: 22px; max-width: 50ch; }
/* "A game by Evan Curole" under the headline (Evan, 2026-10-20). */
.game .cine .gby { margin-top: 18px; font: 500 15px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #b8b8b8; }
.game .cine .gby a { color: #ffffff; text-decoration: underline; text-decoration-color: var(--cine-accent); text-underline-offset: 0.25em; }
.game .cine .gby a:hover { color: var(--cine-accent); }
/* The hero is always dark, so its bold stays white even in light mode. */
.game .cine strong { color: #ffffff; }
.game .cine .gbtn { background: var(--cine-accent); border-color: var(--cine-accent); color: var(--cine-on-accent); }
.game .cine .gbtn--ghost { background: rgba(14, 14, 14, 0.55); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.game .cine .gbtn--ghost:hover { border-color: var(--cine-accent); }
.game .cine .meta-line { margin-top: 14px; color: #b8b8b8; }
.game .cine__note { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.game .cine__note::before { content: "+"; font: 400 28px/1 var(--font); color: var(--cine-accent); }

/* 4. Feature strip ------------------------------------------------------- */
.gstrip { border-bottom: 1px solid var(--line); background: var(--band); }
.gstrip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 26px; padding-block: 18px; }
.gstrip__item { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1.3 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text); }
.gstrip__item::before { content: "+"; font: 500 18px/1 var(--mono); color: var(--accent); }
.gstrip__note { font: 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* 5. Sections ------------------------------------------------------------ */
.gsec { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.gstrip + .gsec { border-top: 0; }
.gsec--band { background: var(--band); }
.gtop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 26px; }
.garrow { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.garrow::after { content: "\2192"; color: var(--accent); transition: transform 0.15s; }
.garrow:hover { color: var(--text); }
.garrow:hover::after { transform: translateX(4px); }

/* 6. Maps: picture on top, a solid text panel under it ------------------
   2026-10-20 (Evan: the text "is not wrapping properly"): the text moved off the picture onto its own
   panel, the tagline is two beats on two lines (accent, then white), and the screenshot counts are gone. */
.gmaps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gmap { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--raise); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.gmap:hover { color: var(--text); border-color: var(--accent); transform: translateY(-3px); }
.gmap__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #111111; }
.gmap__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, filter 0.4s; }
.gmap:hover .gmap__img img { transform: scale(1.05); filter: brightness(1.08); }
.gmap__badge { position: absolute; top: 12px; left: 12px; padding: 4px 9px; background: var(--cine-accent); color: var(--cine-on-accent); font: 600 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.gmap__info { position: relative; display: grid; gap: 10px; padding: 18px 20px 20px; border-top: 2px solid var(--accent); }
.gmap__name { padding-right: 28px; font-family: var(--display); font-size: clamp(26px, 2.3vw, 32px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.gmap__line { font-size: 15.5px; line-height: 1.45; color: var(--soft); }
.gmap__line b { display: block; font-weight: 600; color: var(--accent); }
.gmap__arrow { position: absolute; top: 18px; right: 18px; font-size: 20px; line-height: 1; color: var(--accent); transition: transform 0.15s; }
.gmap:hover .gmap__arrow { transform: translate(2px, -2px); }

/* 7. In the game: a framed reel (a video later) beside the modes ----------- */
.gplay { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.greel { margin: 0; }
.greel__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-strong); background: #111111; }
.greel__frame img, .greel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.greel__frame img { opacity: 0; animation: greel-fade 24s linear infinite both; }
.greel__frame img:nth-child(1) { animation-delay: -0.8s; }
.greel__frame img:nth-child(2) { animation-delay: 3.2s; }
.greel__frame img:nth-child(3) { animation-delay: 7.2s; }
.greel__frame img:nth-child(4) { animation-delay: 11.2s; }
.greel__frame img:nth-child(5) { animation-delay: 15.2s; }
.greel__frame img:nth-child(6) { animation-delay: 19.2s; }
@keyframes greel-fade { 0% { opacity: 0; } 3.5% { opacity: 1; } 16.7% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
/* HUD-style corner marks on the frame */
.greel__frame::before, .greel__frame::after { content: ""; position: absolute; z-index: 1; width: 26px; height: 26px; pointer-events: none; }
.greel__frame::before { top: 10px; left: 10px; border-top: 2px solid var(--cine-accent); border-left: 2px solid var(--cine-accent); }
.greel__frame::after { right: 10px; bottom: 10px; border-right: 2px solid var(--cine-accent); border-bottom: 2px solid var(--cine-accent); }
.greel figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.greel__dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 10px rgba(229, 72, 77, 0.7); animation: greel-blink 1.6s steps(1, end) infinite; }
@keyframes greel-blink { 50% { opacity: 0.25; } }
.gmodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 22px; border-top: 1px solid var(--line-strong); }
.gmodes li { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.gmodes span { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.gmodes b { display: block; margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.gmodes p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--soft); }

/* 8. Firing Range -------------------------------------------------------- */
.grange { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.grange__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gshot { display: block; overflow: hidden; border: 1px solid var(--line); background: #111111; }
.gshot--big { grid-column: 1 / -1; }
.gshot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.4s; }
.gshot:hover { border-color: var(--accent); }
.gshot:hover img { transform: scale(1.03); }
.gstations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-top: 20px; border-top: 1px solid var(--line); }
.gstations li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); position: relative; }
.gstations li::before { content: "+"; position: absolute; left: 0; top: 11px; font: 500 16px/1.3 var(--mono); color: var(--accent); }
.gstations b { display: block; font-size: 15.5px; font-weight: 600; }
.gstations span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--soft); }

/* 9. Gallery: the shared one, six across, captions on the picture -------- */
.game #gallery .gtop { align-items: flex-end; }
.game .gallery-bar { margin-top: 0; justify-content: flex-end; }
.game .filter { border-radius: 0; }
.game .gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
.game .gallery-card { position: relative; }
.game .gallery-image { border-radius: 0; }
.game .gallery-card figcaption { position: absolute; inset: auto 1px 1px; display: grid; gap: 2px; padding: 26px 10px 8px; background: linear-gradient(0deg, rgba(10, 10, 10, 0.88), rgba(10, 10, 10, 0)); color: #ffffff; font-size: 13px; line-height: 1.25; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.game .gallery-card figcaption span { font-size: 11px; color: var(--cine-accent); }
.game .gallery-card:hover figcaption, .game .gallery-card:focus-within figcaption { opacity: 1; }
.game .lightbox, .game .lightbox-image, .game .icon-button { border-radius: 0; }

/* 10. Get the game, multiplayer beside it -------------------------------- */
.gget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.gget .meta-line { margin-top: 16px; }
.gsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; counter-reset: gstep; }
.gsteps li { counter-increment: gstep; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.gsteps li::before { content: "0" counter(gstep); display: block; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.gsteps b { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; }
.gsteps span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.gget__note { margin-top: 22px; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.gsub + .gget__note { margin-top: 14px; }
.gget__note a, #multiplayer a { text-decoration: underline; text-decoration-color: var(--accent); }
.game .guides { margin-top: 20px; }
.game .guide { border-radius: 0; }
.game .guide + .guide { margin-top: 8px; }
.game .guide summary { padding: 15px 20px; font-size: 16px; }

/* 11. Small screens ------------------------------------------------------ */
@media (max-width: 1100px) {
  .game .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game .gallery-card figcaption { opacity: 1; }
}
/* The three side-by-side sections stack below 1300 px, where their text columns got narrow enough to
   wrap the station, mode and step lines (measured 2026-10-20). */
@media (max-width: 1300px) {
  .gplay, .grange, .gget { grid-template-columns: minmax(0, 1fr); }
  .greel, .grange__shots { max-width: 860px; }
}
@media (max-width: 1000px) {
  .gmaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gstrip__note { display: none; }
}
@media (max-width: 680px) {
  .gmaps { grid-template-columns: minmax(0, 1fr); }
  .gmodes, .gstations, .gsteps { grid-template-columns: minmax(0, 1fr); }
  .game .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game .gallery-card figcaption { padding: 20px 8px 6px; font-size: 12px; }
  .game .gallery-card figcaption span { display: none; }
  .gactions .gbtn { flex: 1 1 auto; }
  .gstrip__row { justify-content: flex-start; gap: 10px 18px; }
  .gstrip__item { font-size: 11.5px; letter-spacing: 0.06em; }
  .game .cine h1 { font-size: clamp(52px, 15vw, 84px); }
  .gtop { align-items: flex-start; }
  .game .gallery-bar { justify-content: flex-start; }
}
/* Phones (2026-10-20): four full-width map cards ran 1,673 px at 390, so they go two across with
   smaller type, and the hero and sections tighten up. */
@media (max-width: 680px) {
  .gmaps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gmap__info { gap: 6px; padding: 12px 12px 14px; }
  .gmap__name { padding-right: 16px; font-size: 21px; }
  .gmap__line { font-size: 13.5px; line-height: 1.4; }
  .gmap__arrow { top: 12px; right: 10px; font-size: 16px; }
  .gmap__badge { top: 8px; left: 8px; padding: 3px 7px; font-size: 10px; }
  .game .cine { padding-block: 72px 32px; }
  .game .cine .hero__lede { margin-top: 16px; font-size: 16.5px; }
  .game .gactions { margin-top: 22px; }
  .gsec { padding-block: 44px; }
  .gtop { margin-bottom: 20px; }
  .game .display { font-size: clamp(36px, 11vw, 46px); }
  .gstations li { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gbtn, .gmap, .gmap__img img, .gshot img, .garrow::after, .gmap__arrow { transition: none; }
  .gbtn:hover, .gmap:hover, .gmap:hover .gmap__img img, .gshot:hover img, .gmap:hover .gmap__arrow { transform: none; }
  .greel__frame img { animation: none; }
  .greel__frame img:first-child { opacity: 1; }
  .greel__dot { animation: none; }
}