/* FRAGSLIDE website
   The page is the game's main menu: the same "safehouse" palette, chamfered panels with a
   mint (or coral) tick and a cut corner, hard shadows, Chakra Petch, and header tabs that open
   pages under the header. On desktop everything fits one screen; on phones the page scrolls.
   Pixel art is only drawn at whole-number scales (image-rendering: pixelated). */

@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/ChakraPetch-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DotGothic16";
  src: url("../assets/fonts/DotGothic16-Regular.ttf") format("truetype");
  font-display: swap;
}

/* Values from the game's menu-layout-css.ts (--m-*). */
:root {
  --text: #f4f1e8;
  --muted: #a9bac4;
  --dim: #7f939f;
  --rule: #c3d0d6;
  --line: #9fbccb2e;
  --line-strong: #9fbccb5c;
  --coral: #ff4f6d;
  --coral-hi: #ff7d93;
  --mint: #9ff0d4;
  --on-mint: #08201a;
  --gold: #ffd27a;
  --bg: #070e16;
  --panel: linear-gradient(160deg, #0f1c25eb, #08121aeb 60%, #070f16f0);
  --well: #0a1219;
  --cut: 12px;

  --gx: clamp(16px, 3.3vw, 64px);
  --topbar-h: 84px;

  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #9ff0d457 #0b161e;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--mint);
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

b,
strong {
  font-weight: 700;
}

i {
  font-style: normal;
}

:focus-visible {
  outline: 2px dashed var(--mint);
  outline-offset: 3px;
}

.px {
  image-rendering: pixelated;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.icon-sprite {
  display: none;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--mint);
  color: var(--on-mint);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- Backdrop: real-match stills ---------- */

.backdrop,
.backdrop-shade {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.backdrop {
  z-index: -2;
  background: #000;
}
.backdrop-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.backdrop-slide.is-shown {
  opacity: 1;
}

/* Same idea as the menu's vignette: one dark pool behind the centred title stack, darker
   header and footer bands, and the match below the button left readable.
   A page view adds a flat dim so its panel reads first. */
.backdrop-shade {
  z-index: -1;
  background:
    radial-gradient(ellipse 52vw 34vh at 50% 37vh, #050b15e0, #050b15a6 45%, transparent 100%),
    linear-gradient(180deg, #050b15cc, #050b1559 var(--topbar-h), transparent 140px, transparent calc(100% - 120px), #050b15b3),
    linear-gradient(#050b153d, #050b153d);
}
.backdrop-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #050b15c2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.is-page-view .backdrop-shade::after {
  opacity: 1;
}

/* ---------- Shared pieces ---------- */

.label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
}
.label-dim {
  color: #5f7480;
}

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px #000a, inset 0 1px 0 #ffffff0d;
  backdrop-filter: blur(8px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
/* The mint tick top left and the hairline across the cut corner. */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--mint);
}
.panel-coral::before {
  background: var(--coral);
}
.panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--cut);
  height: var(--cut);
  background: linear-gradient(to top left, transparent 50%, var(--line-strong) 50%, var(--line-strong) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  background: #0d1a23;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover {
  border-color: var(--mint);
  background: #133038;
}
.btn-mint {
  background: #9ff0d41f;
  border-color: #9ff0d48c;
  color: var(--mint);
}
.btn-mint:hover {
  background: var(--mint);
  color: var(--on-mint);
}
.btn-dark {
  background: #0a151ecc;
}
.btn-coral {
  border: 0;
  background: var(--coral);
  color: #1a0710;
  box-shadow: inset 0 -3px 0 #0000002e;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.btn-coral:hover {
  background: var(--coral-hi);
}
.btn .icon {
  width: 20px;
  height: 20px;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.tag-coral {
  background: #ff4f6d26;
  color: var(--coral-hi);
}
.tag-mint {
  background: #9ff0d41f;
  color: var(--mint);
}

/* ---------- Top bar (the menu header) ---------- */

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  height: var(--topbar-h);
  margin: 0 var(--gx);
  border-bottom: 1px solid var(--line);
}

.brand {
  flex: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
/* While the big logo in the PLAY title stack is on screen, the header logo steps aside
   (main.js watches the hero logo). On other tabs, or once it scrolls away, it fades back. */
.logo-in-hero .brand {
  opacity: 0;
  visibility: hidden;
}
.brand img {
  width: clamp(150px, 12vw, 190px);
  filter: drop-shadow(0 0 12px #ff4d6a38) drop-shadow(0 4px 14px #000a);
}

.tabs {
  position: relative;
  display: flex;
  align-self: stretch;
  gap: clamp(18px, 2.2vw, 40px);
}
.tabs a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
}
.tabs a:hover,
.tabs a[aria-current="page"] {
  color: var(--text);
}
/* One coral underline that slides to the current tab (positioned by main.js). */
.tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: var(--coral);
  box-shadow: 0 0 14px #ff4f6db3;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tab-ink.is-instant {
  transition: none;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-left: auto;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  background: #0a151ecc;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
}
.chip .icon {
  width: 20px;
  height: 20px;
  color: var(--mint);
}
.chip:hover {
  border-color: var(--mint);
  background: #12262bcc;
}
.chip-join {
  border: 0;
  background: var(--coral);
  color: #1a0710;
  box-shadow: 0 8px 24px #ff4f6d40, inset 0 -3px 0 #0000002e;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.chip-join .icon {
  color: #1a0710;
}
.chip-join:hover {
  background: var(--coral-hi);
}
@media (min-width: 1000px) and (min-height: 600px) {
  .js:not(.is-page-view) .chip-join {
    visibility: hidden;
  }
  /* Desktop header in three parts: logo left, tabs centred over the centred PLAY stack, join
     button right. The side columns share the leftover width, so the logo and the button can
     appear and disappear without the tabs moving. */
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .brand {
    justify-self: start;
  }
  .chip {
    justify-self: end;
    margin-left: 0;
    white-space: nowrap;
  }
}
@media (min-width: 1000px) and (min-height: 600px) and (max-width: 1180px) {
  .topbar {
    gap: 16px;
  }
  .tabs {
    gap: 16px;
  }
  .tabs a {
    font-size: 14px;
    letter-spacing: 2px;
  }
  .chip {
    padding: 0 12px;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

.nav-toggle {
  display: none;
}

/* ---------- PLAY (home) ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--mint);
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--mint);
  box-shadow: 0 0 10px #9ff0d4a6;
}

.slogan {
  font-weight: 700;
  font-size: clamp(38px, min(4vw, 7.2vh), 76px);
  line-height: 0.98;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #0000008c, 0 0 40px #00000080;
}
.slogan span {
  color: var(--coral);
  display: inline-block;
  /* Restored at the end of the title glitch. */
  --title-shadow: 0 4px 0 #0000008c, 0 0 40px #00000080;
}

.what {
  margin-top: 16px;
  font-weight: 700;
  font-size: clamp(18px, 1.3vw, 24px);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 #000000b3;
}
.what span {
  white-space: nowrap;
}
.what b {
  margin-inline: 4px;
  color: var(--coral);
}
.tagline {
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
  text-shadow: 0 2px 0 #000000a6;
}
.home-shot {
  display: none;
}


/* PLAY is a centred title stack: eyebrow, slogan, one line on what the game is, and the button
   right under it, the way Valorant and ARC Raiders open (one block, one button). */
.home-intro {
  text-align: center;
}
.hero-logo {
  width: clamp(260px, min(30vw, 44vh), 560px);
  margin: 0 auto clamp(14px, 2.6vh, 28px);
  filter: drop-shadow(0 0 18px #ff4d6a40) drop-shadow(0 6px 16px #000c);
}
.home-intro .eyebrow {
  justify-content: center;
}
.home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(20px, 3.4vh, 36px);
}
.home-actions .play-btn {
  min-width: min(440px, 100%);
  padding: 0 44px;
}

/* The menu's PLAY button, here "Join the crew" (the Discord invite). */
.play-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 96px;
  padding: 0 28px 0 32px;
  overflow: hidden;
  background: linear-gradient(100deg, var(--coral) 0%, #ff3d61 55%, #e9305a 100%);
  color: #1a0710;
  text-decoration: none;
  box-shadow: 0 18px 44px #ff4f6d52, inset 0 1px 0 #ffffff55, inset 0 -3px 0 #0000002e;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform 0.14s ease, filter 0.2s ease;
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, #ffffff59, transparent);
  transform: skewX(-18deg);
  animation: play-sheen 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes play-sheen {
  0%, 70% { left: -40%; }
  100% { left: 140%; }
}
.play-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
/* The game's title glitch (pause menu / results: pmGlitch, mrGlitch) on the button's logo and
   label: right after every other sheen pass, and once on hover. drop-shadow splits the SVG logo
   and the text alike. */
.play-copy {
  animation: crew-glitch 9s steps(1) 5.7s infinite;
}
.play-btn:hover .play-copy {
  animation: crew-glitch-once 0.45s steps(1);
}
@keyframes crew-glitch {
  0% { transform: translateX(3px); filter: drop-shadow(-3px 0 #9ff0d4cc) drop-shadow(3px 0 #ffffffb3); }
  1% { transform: translateX(-2px); clip-path: inset(30% 0 40% 0); }
  2% { transform: translateX(1px); clip-path: inset(0); filter: drop-shadow(2px 0 #9ff0d499) drop-shadow(-2px 0 #ffffff80); }
  3%, 100% { transform: none; clip-path: none; filter: none; }
}
@keyframes crew-glitch-once {
  0% { transform: translateX(3px); filter: drop-shadow(-3px 0 #9ff0d4cc) drop-shadow(3px 0 #ffffffb3); }
  20% { transform: translateX(-2px); clip-path: inset(30% 0 40% 0); }
  40% { transform: translateX(1px); clip-path: inset(0); filter: drop-shadow(2px 0 #9ff0d499) drop-shadow(-2px 0 #ffffff80); }
  60%, 100% { transform: none; clip-path: none; filter: none; }
}
.play-btn:active {
  transform: translateY(1px);
}
.play-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -7px;
}
.play-copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.play-icon {
  flex: none;
  width: 46px;
  height: 35px;
}
.play-label {
  font-weight: 700;
  font-size: clamp(30px, 2.2vw, 40px);
  line-height: 1;
  letter-spacing: 3px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- Pages under the header ---------- */

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.page-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line);
}
.page-head h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.page-head h2:focus {
  outline: none;
}
.page-head .label {
  order: 2;
  margin-left: auto;
}
.page-body {
  padding: 20px 28px 24px;
}
.page-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--dim);
}

.well {
  padding: 14px 16px 16px;
  background: #ffffff06;
  border: 1px solid var(--line);
}
.well .label {
  margin-bottom: 10px;
}
.well-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* Screenshots open in the viewer; the frame lights mint on hover. */
.shot,
.map-card,
.gallery a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  background: #000;
  overflow: hidden;
}
.shot,
.gallery a {
  position: relative;
}
.shot:hover,
.map-card:hover,
.gallery a:hover {
  border-color: var(--mint);
}
/* A small "view full size" corner on every clickable picture. */
.shot::after,
.map-card::after,
.gallery a::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background:
    linear-gradient(var(--mint), var(--mint)) right 6px top 6px / 8px 2px no-repeat,
    linear-gradient(var(--mint), var(--mint)) right 6px top 6px / 2px 8px no-repeat,
    linear-gradient(var(--mint), var(--mint)) left 6px bottom 6px / 8px 2px no-repeat,
    linear-gradient(var(--mint), var(--mint)) left 6px bottom 6px / 2px 8px no-repeat,
    #050b15cc;
  border: 1px solid #9ff0d466;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.shot:hover::after,
.map-card:hover::after,
.gallery a:hover::after {
  opacity: 1;
}
.shot img,
.map-card img,
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.15s;
}
.shot:hover img,
.map-card:hover img,
.gallery a:hover img {
  filter: brightness(1.12);
}

/* MODES */
.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.mode .shot {
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}
.mode .tag {
  margin-bottom: 8px;
}
.mode h3 {
  margin-bottom: 6px;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mode p:not(.tag) {
  color: var(--rule);
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin-top: 12px;
  font-weight: 700;
  font-size: 14px;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.facts .icon {
  color: var(--mint);
}

/* MAPS */
.map-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.map-card {
  position: relative;
  aspect-ratio: 16 / 9;
}
.map-card > span {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 1px;
  padding: 26px 14px 10px;
  background: linear-gradient(0deg, #050b15f2, #050b15b3 60%, transparent);
}
.map-card b {
  font-size: 17px;
  color: var(--text);
}
.map-card i {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mint);
}

/* ARSENAL */
.arsenal {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 22px;
}
.class-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.class-grid li {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 12px 10px;
  background: #ffffff06;
  border: 1px solid var(--line);
  text-align: center;
}
.class-grid .gun {
  display: grid;
  place-items: center;
  height: 70px;
  margin-bottom: 4px;
}
.class-grid b {
  font-size: 16px;
}
.class-grid i {
  font-size: 13px;
  color: var(--muted);
}
.arsenal-side {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
}
.arsenal-side .well {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px 4px;
}
.icon-row.mastery-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.icon-row.grenades {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.icon-row li {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.icon-row span {
  text-align: center;
  line-height: 1.2;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

/* UNLOCKS */
.unlocks-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 16px;
}
.stats {
  display: flex;
  gap: 28px;
}
.stats li {
  display: grid;
}
.stats b {
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 3px 0 #0000008c;
}
.stats span {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.ranks-box .label {
  margin-bottom: 4px;
}
.ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.subtab-list {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.subtab-list button {
  position: relative;
  padding: 8px 14px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.subtab-list button span {
  margin-left: 4px;
  color: var(--gold);
}
.subtab-list button:hover,
.subtab-list button[aria-selected="true"] {
  color: var(--text);
}
.subtab-list button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--mint);
}

.icon-grid {
  display: grid;
  gap: 6px;
}
.icon-grid.streaks {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.icon-grid.perks {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.icon-grid li {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 8px 4px;
  background: #141b1b;
  border: 1px solid var(--line);
  text-align: center;
}
.icon-grid img {
  margin-bottom: 4px;
}
.icon-grid b {
  font-size: 14px;
  line-height: 1.2;
}
.icon-grid i {
  font-size: 12px;
  color: var(--muted);
}
.icon-grid.streaks i {
  font-weight: 700;
  color: var(--gold);
}
.icon-grid .is-top {
  border-color: #ffd27a73;
  background: #ffd27a12;
}

.faces {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}
.faces li {
  display: grid;
  place-items: end center;
  min-height: 88px;
  background: #141b1b;
  border: 1px solid var(--line);
}
.faces-more span {
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
}

/* MEDIA */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gallery-hero {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery a {
  aspect-ratio: 16 / 9;
}

/* FAQ */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 16px;
}
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.faq-join-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
  background: #ffffff06;
  border: 1px solid var(--line);
}
.faq-join-panel img {
  border: 1px solid var(--line-strong);
}
/* A gameplay picture takes whatever height the questions leave. */
.faq-shot {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
@media not ((min-width: 1000px) and (min-height: 600px)) {
  .faq-shot {
    display: none;
  }
}
/* The join button sits at the bottom, level with the last question row. */
.faq-join-panel .play-btn {
  margin-top: auto;
}
.faq-join-panel p {
  color: var(--muted);
  font-size: 15px;
}
.faq div {
  padding: 16px 18px;
  background: #ffffff06;
  border: 1px solid var(--line);
  border-left: 2px solid var(--mint);
}
.faq dt {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 18px;
}
.faq dd {
  color: var(--rule);
}

/* ---------- Footer row ---------- */

.footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gx) 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim);
}
.footbar a {
  color: var(--muted);
  text-decoration: none;
}
.footbar a:hover {
  color: var(--mint);
}
.is-page-view
/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: #050b0ff2;
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-opening {
  animation: frame-in 0.18s ease both;
}
.lightbox.is-opening .lightbox-figure {
  animation: piece-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lightbox-figure {
  max-width: 1600px;
}
.lightbox-figure img {
  max-height: calc(100vh - 140px);
  margin-inline: auto;
  border: 1px solid var(--line-strong);
}
.lightbox-figure figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  background: #0d1a23;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: var(--mint);
}
.lightbox-close {
  top: 12px;
  right: 12px;
}
.lightbox-nav {
  top: calc(50% - 24px);
}
.lightbox-prev {
  left: 8px;
}
.lightbox-next {
  right: 8px;
}

/* ---------- Views (scripted) ---------- */

.js .view:not(.is-active) {
  display: none;
}
/* ---------- Menu transitions ----------
   Switching tabs: the old view slips up and fades (0.11 s), the new panel's frame fades in, then
   its pieces arrive one after another (--i, set by main.js) with a short rise. Fades and small
   rises only; nothing pans or zooms. */
.js .view.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.11s ease-in, transform 0.11s ease-in;
}
.view-page.is-entering > .page {
  animation: frame-in 0.22s ease both;
}
.is-entering [data-enter] {
  animation: piece-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms + 60ms);
}
/* Titles glitch once as they arrive, like the game's pause-menu and results titles. */
.boot .slogan span {
  animation: title-glitch 0.45s steps(1) 0.5s;
}
.is-entering .slogan span,
.is-entering .page-head h2 {
  animation: title-glitch 0.45s steps(1) 0.22s;
}
@keyframes title-glitch {
  0% { transform: translateX(3px); text-shadow: -3px 0 #9ff0d4b3, 3px 0 #ff4f6db3; }
  20% { transform: translateX(-2px); clip-path: inset(30% 0 40% 0); }
  40% { transform: translateX(1px); clip-path: inset(0); text-shadow: 2px 0 #9ff0d480, -2px 0 #ff4f6d80; }
  60%, 100% { transform: none; clip-path: none; text-shadow: var(--title-shadow, none); }
}
@keyframes frame-in {
  from { opacity: 0; }
}
@keyframes piece-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* Without JavaScript every view shows in order, with room between them. */
html:not(.js) main {
  display: grid;
  gap: 32px;
  padding: 24px var(--gx);
}

/* ---------- Desktop: one screen, no page scroll ---------- */

@media (min-width: 1000px) and (min-height: 600px) {
  .js body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .js main {
    min-height: 0;
    padding: clamp(18px, 3.4vh, 36px) var(--gx) 0;
  }

  /* The stack sits a little above centre, leaving the lower third for the match. */
  .js .view-play.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-bottom: 28vh;
  }

  .js .view-page.is-active {
    display: flex;
    height: 100%;
  }
  .js .page {
    min-height: 0;
  }
  .js .page-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  /* Content stretches to the panel's height instead of leaving a band of empty panel. */
  .js .page-body:not(.modes):not(.arsenal) {
    display: flex;
    flex-direction: column;
  }
  .js .faq-layout,
  .js .subtabs {
    flex: 1;
    min-height: 0;
  }
  .js .modes {
    grid-template-rows: minmax(0, 1fr);
  }
  .js .mode {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .js .mode .shot {
    flex: 1;
    min-height: 140px;
    aspect-ratio: auto;
  }
  .js .faq {
    grid-auto-rows: minmax(0, 1fr);
    min-height: 0;
  }
  .js .faq div {
    padding-top: 20px;
  }
  .js .subtabs {
    display: flex;
    flex-direction: column;
  }
  .js .subtab-panel:not([hidden]) {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .js .subtab-panel > ul {
    flex: 1;
    grid-auto-rows: minmax(0, 1fr);
  }
  .js .icon-grid li {
    align-content: center;
  }
  .js .map-grid,
  .js .gallery {
    flex: 1;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .js .map-grid li,
  .js .gallery li {
    min-height: 0;
  }
  .js .map-card,
  .js .gallery a {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* 1080p and up: operator faces at 4x. */
@media (min-width: 1700px) and (min-height: 1000px) {
  .js .faces img {
    width: 152px;
    height: 152px;
  }
}

/* Big screens: weapon sprites at 3x (zoom 1.5 on the 2x size keeps whole pixels). */
@media (min-width: 1700px) and (min-height: 1000px) {
  .js .class-grid .gun {
    height: 100px;
  }
  .js .class-grid .gun img {
    zoom: 1.5;
  }
  /* Tall screens: icons at the next whole-number scale fill the panel. */
}

@media (min-width: 1300px) and (min-height: 860px) {
  .js .icon-grid.streaks img {
    width: 128px;
    height: 128px;
  }
  .js .icon-grid.perks img {
    width: 96px;
    height: 96px;
  }
  .js .faces li {
    min-height: 126px;
  }
  .js .faces img {
    width: 114px;
    height: 114px;
  }
  .js .icon-grid b {
    font-size: 16px;
  }
  .js .faq div {
    padding: 26px 26px 20px;
  }
  .js .faq dt {
    margin-bottom: 10px;
    font-size: 22px;
  }
  .js .faq dd {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* Short desktop windows (laptops at 720-800 px tall): tighter spacing, fewer extras. */
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 820px) {
  :root {
    --topbar-h: 68px;
  }
  .tagline {
    margin-top: 10px;
  }
  .play-btn {
    min-height: 80px;
  }
  .well-note,
  .faq-join-panel > img:first-child {
    display: none;
  }
  .class-grid .gun {
    height: 56px;
  }
  .class-grid li {
    padding-block: 8px;
  }
  .page-head {
    padding-block: 14px 12px;
  }
  .page-body {
    padding-block: 14px 18px;
  }
  .icon-grid li {
    padding-block: 6px;
  }
  .icon-grid.perks i {
    display: none;
  }
  .faces li {
    min-height: 80px;
  }
  .mode h3 {
    font-size: 22px;
  }
}

/* ---------- Phones, tablets and small windows: the page scrolls ---------- */

@media not ((min-width: 1000px) and (min-height: 600px)) {
  :root {
    --topbar-h: 64px;
  }
  .backdrop-shade {
    background: #050b15b3;
  }

  .topbar {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0 var(--gx);
    background: #070e16f2;
  }
  .nav-toggle {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin-left: 0;
    border: 1px solid var(--line-strong);
    background: #0a151ecc;
    cursor: pointer;
  }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    background: var(--text);
  }
  .nav-toggle-bar {
    top: 20px;
  }
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    content: "";
    left: 0;
  }
  .nav-toggle-bar::before {
    top: -6px;
  }
  .nav-toggle-bar::after {
    top: 6px;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar {
    background: transparent;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
    top: 0;
    transform: rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .tabs {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px var(--gx) 14px;
    background: #070e16fa;
    border-bottom: 1px solid var(--line);
  }
  .tabs.is-open {
    display: flex;
    animation: piece-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .tabs a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .tabs a[aria-current="page"] {
    color: var(--coral-hi);
  }
  .tab-ink {
    display: none;
  }
  .chip-join {
    order: 1;
    height: 40px;
    margin-left: 0;
    gap: 8px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .topbar {
    gap: 10px;
  }
  .brand img {
    width: 128px;
  }
  .nav-toggle {
    order: 2;
    margin-left: 0;
  }

  main {
    padding: 24px var(--gx) 8px;
  }
  .js .view-play.is-active {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .home-actions {
    margin-top: 0;
  }
  .home-actions .play-btn {
    width: 100%;
    padding: 0 20px;
  }
  .page-head h2 {
    font-size: 24px;
  }
  .home-shot {
    display: block;
    margin-top: 16px;
  }
  .home-shot img {
    width: 100%;
    border: 1px solid var(--line-strong);
  }
    .what span:first-child {
    display: block;
  }
  .what span:first-child b {
    display: none;
  }
  .js:not(.is-page-view) .chip-join {
    display: none;
  }
  .brand {
    margin-right: auto;
  }
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .slogan {
    font-size: clamp(40px, 11vw, 64px);
  }
  .play-btn {
    min-height: 84px;
    padding: 0 20px 0 22px;
  }
  .play-label {
    font-size: 26px;
    letter-spacing: 2px;
  }
  .faq-join-panel {
    padding: 0;
    border: 0;
    background: none;
  }
  .play-btn {
    gap: 10px;
  }

  .modes,
  .arsenal {
    grid-template-columns: 1fr;
  }
  .map-grid,
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .class-grid li {
    padding: 10px 6px;
  }
  .class-grid .gun {
    height: 56px;
  }
  .class-grid i {
    display: none;
  }
  /* Nine classes in two columns: Melee spans the last row instead of sitting alone. */
  .class-grid li:last-child {
    grid-column: span 2;
  }
  .faces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .icon-grid.streaks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .icon-grid.perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .page-head {
    flex-wrap: wrap;
    padding: 16px 18px 12px;
  }
  .page-head .label {
    order: 0;
    width: 100%;
    margin: 0;
  }
  .page-body {
    padding: 16px 18px 20px;
  }
  .footbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Phones draw the wide gun sprites at 1x (their natural size) so pixels stay whole. */
@media (max-width: 600px) {
  /* 2x sprites wider than the 150px sprite column drop to 1x (whole pixels either way). */
  .class-grid img[width="220"],
  .class-grid img[width="218"],
  .class-grid img[width="204"],
  .class-grid img[width="200"],
  .class-grid img[width="186"],
  .class-grid img[width="164"] {
    width: auto;
    height: auto;
  }
  .map-grid,
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* Phones: the name sits under the picture instead of over it. */
  .js .map-card,
  .map-card {
    aspect-ratio: auto;
    border: 0;
    background: none;
  }
  .map-card img {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-strong);
  }
  .map-card::after {
    display: none;
  }
  .map-card > span {
    position: static;
    padding: 5px 2px 0;
    background: none;
  }
  .icon-row:not(.grenades):not(.mastery-row) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .map-card b {
    font-size: 14px;
  }
  .map-card i {
    font-size: 11px;
    letter-spacing: 0.8px;
  }
  .stats {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  .ranks {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: start;
  }
  .subtab-list button {
    padding-inline: 8px;
    font-size: 13px;
    letter-spacing: 1px;
  }
  .lightbox {
    padding: 56px 12px;
  }
  .lightbox-nav {
    top: auto;
    bottom: 12px;
  }
  .lightbox-prev {
    left: calc(50% - 56px);
  }
  .lightbox-next {
    right: calc(50% - 56px);
  }
}

@media (max-width: 600px) {
  .shot::after,
  .map-card::after,
  .gallery a::after {
    display: none;
  }
}

@media (max-width: 400px) {
  .play-btn {
    padding: 0 16px;
  }
  .play-label {
    font-size: 22px;
    letter-spacing: 1.5px;
  }
}

/* ---------- Boot-in ----------
   The first load opens like the game's menu: logo and tabs, then the headline, then the panels,
   with the coral button landing last. Fades and a 10px rise only; nothing pans or zooms.
   Small UI motion plays for everyone, like the game, which ignores the reduce-animations
   setting. Only the backdrop cross-fade (main.js) stays off for visitors who ask for less motion. */

@keyframes boot-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes boot-fade {
  from { opacity: 0; }
}
.boot .brand,
.boot .tabs a,
.boot .chip,
.boot .home-intro > *,
.boot .play-btn,
.boot .view-page.is-active .page {
  animation: boot-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.boot .backdrop,
.boot .tab-ink,
.boot .footbar {
  animation: boot-fade 0.5s ease both;
}
.boot .view.is-active {
  animation: none;
}
.boot .tabs a:nth-child(1) { animation-delay: 0.05s; }
.boot .tabs a:nth-child(2) { animation-delay: 0.08s; }
.boot .tabs a:nth-child(3) { animation-delay: 0.11s; }
.boot .tabs a:nth-child(4) { animation-delay: 0.14s; }
.boot .tabs a:nth-child(5) { animation-delay: 0.17s; }
.boot .tabs a:nth-child(6) { animation-delay: 0.2s; }
.boot .tabs a:nth-child(7) { animation-delay: 0.23s; }
.boot .chip,
.boot .tab-ink { animation-delay: 0.23s; }
.boot .home-intro > :nth-child(1) { animation-delay: 0.06s; }
.boot .home-intro > :nth-child(2) { animation-delay: 0.12s; }
.boot .home-intro > :nth-child(3) { animation-delay: 0.16s; }
.boot .home-intro > :nth-child(4) { animation-delay: 0.22s; }
.boot .home-intro > :nth-child(5) { animation-delay: 0.26s; }
.boot .home-intro > :nth-child(6) { animation-delay: 0.3s; }
.boot .view-page.is-active .page { animation-delay: 0.15s; }
.boot .play-btn { animation-delay: 0.34s; }
.boot .footbar { animation-delay: 0.3s; }