/* BlockNation website. One stylesheet, mobile first, no framework.
   The palette is the key art's: a blue night, the red of the banner, the orange of the campfire. */

:root {
  --bg: #05070d;
  --bg-2: #090d18;
  --bg-3: #0f1524;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(140, 160, 210, 0.14);
  --line-strong: rgba(140, 160, 210, 0.28);
  --text: #eef1f8;
  --muted: #a2abc4;
  --dim: #6f7893;
  --red: #e5322d;
  --red-2: #ff5a4f;
  --orange: #ff8a1f;
  --amber: #ffb347;
  --blue: #6fb6ff;
  --blue-2: #a8d4ff;
  --green: #34d399;
  --danger: #f87171;
  --radius: 18px;
  --radius-sm: 10px;
  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --container: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
code, .inline-code { font-family: var(--font-mono); }
.inline-code {
  font-size: 0.92em;
  padding: 0.1em 0.45em;
  border-radius: 6px;
  background: rgba(111, 182, 255, 0.1);
  border: 1px solid rgba(111, 182, 255, 0.22);
  color: var(--blue-2);
  overflow-wrap: anywhere;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 860px; }
@media (max-width: 600px) { .container { width: min(100% - 32px, var(--container)); } }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 14px; background: var(--red); color: #fff; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 0.88rem; }
.btn--lg { min-height: 54px; padding: 16px 28px; font-size: 1.02rem; }
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #e5322d 0%, #ff6a1f 100%);
  box-shadow: 0 8px 30px rgba(229, 50, 45, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 106, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn--ghost { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--amber); background: rgba(255, 179, 71, 0.08); transform: translateY(-2px); }

/* -------------------------------------------------------------- the address */
/* mc.playblocknation.net with its copy button: the secondary action, and the thing a player who
   already wants in is looking for. Copying swaps the icon for a check and the label for Copied. */
.addr {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(5, 7, 13, 0.7); border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.addr:hover { border-color: rgba(255, 179, 71, 0.5); }
.addr:has(.is-copied) { border-color: rgba(52, 211, 153, 0.6); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12); }
.addr__label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.addr__value { font-size: 1rem; color: var(--text); letter-spacing: 0.01em; }
.addr__copy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 12px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--amber); font-weight: 600; font-size: 0.85rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.addr__copy:hover { background: rgba(255, 179, 71, 0.16); }
.addr__copy .icon { width: 16px; height: 16px; }
.addr__copy .icon--check { display: none; }
.addr__copy.is-copied { background: rgba(52, 211, 153, 0.18); color: var(--green); }
.addr__copy.is-copied .icon--copy { display: none; }
.addr__copy.is-copied .icon--check { display: block; animation: pop 0.35s var(--ease); }
@keyframes pop { from { transform: scale(0.4); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
.addr--lg { padding: 8px 8px 8px 20px; }
.addr--lg .addr__value { font-size: 1.08rem; }
.addr--lg .addr__copy { min-height: 44px; padding: 10px 18px 10px 14px; }
/* the block form sits in a join step: the address and its button on one line when there is room,
   the button under it when there is not - the address itself never breaks */
.addr--block { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; row-gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; margin-top: 16px; }
.addr--block .addr__value { font-size: 0.95rem; white-space: nowrap; align-self: center; }
.addr--block .addr__copy { margin-left: auto; }
/* on a phone the label goes (the address explains itself) and the pill spans the width, so the
   address and its button stay on one line instead of stacking into a three-row card */
@media (max-width: 600px) {
  .hero .addr { display: flex; width: 100%; justify-content: space-between; padding: 6px 6px 6px 16px; }
  .hero .addr__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero .addr__value { font-size: 0.98rem; }
}
@media (max-width: 360px) {
  .addr__value { font-size: 0.88rem !important; }
  .addr__copy { padding: 8px 11px; }
}
/* the smallest phones: the button keeps its icon (and its check when copied) and drops the word */
@media (max-width: 340px) {
  .addr__copy .js-copy-label { display: none; }
}

/* --------------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  background: rgba(5, 7, 13, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.nav.is-scrolled { background: rgba(5, 7, 13, 0.88); border-bottom-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 40px, var(--container)); margin-inline: auto; }
@media (max-width: 600px) { .nav__inner { width: min(100% - 32px, var(--container)); } }
.nav__logo { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none !important; }
.emblem { width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(229, 50, 45, 0.35); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.01em; }
.nav__menu { display: flex; align-items: center; gap: 18px; }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav__links a {
  display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted);
  font-weight: 500; font-size: 0.93rem; text-decoration: none !important;
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 16px 20px 22px; background: rgba(5, 7, 13, 0.97);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .nav.is-open .nav__menu { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav__links { flex-direction: column; gap: 2px; }
  .nav__links a { padding: 12px 14px; font-size: 1rem; }
  .nav__menu .btn { margin-top: 6px; }
}

/* -------------------------------------------------------------------- hero */
/* The key art is the hero: full width, faded out at the foot, with the words right under it. It is
   only as tall as the screen leaves room for, so the button and the address are in the first screen
   on a laptop as well: --hero-copy is the height of the words and buttons below the picture. A short
   screen crops sky and ground off the picture and keeps the logo, which sits between 21% and 70% of
   its height. Phones get the square version of the same picture. */
.hero { --hero-copy: 262px; --hero-overlap: 34px; position: relative; overflow: hidden; isolation: isolate; padding: var(--nav-h) 0 clamp(36px, 4vw, 56px); }
.hero__art { position: relative; z-index: 0; margin: 0; display: block; overflow: hidden; }
/* the fade into the page is a gradient laid over the picture, not a mask: a mask on a large layer
   has blanked whole frames in embedded browsers */
.hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0) 80%, rgba(5, 7, 13, 0.6) 93%, var(--bg) 100%);
}
/* The picture itself does not move: an animated transform on it blanked the hero in the
   editor's embedded browser, and the words rising beneath it are entrance enough.
   Its height, --art-h, is what the screen leaves after the words (--hero-copy), but never less than
   holds the banner and the name: in the art of 2026-09-17 the red banner starts at 18% of the art's
   height and the letters end at 60%, and the art is 56.25vw tall at full width, so 27.5vw keeps
   both whole with the words underneath rather than over them. On a screen too short even for that,
   the button slips just below the fold; the one in the menu bar stays. When the picture is cut
   short, the sky goes rather than the ground: it is lifted so that the line 65% of the way down
   (just under the letters, 0.65 x 56.25vw = 36.5vw) sits at its foot. **Measure both again after
   replacing the art**: `python website/tools/logo_band.py website/brand/keyart-wide.png` finds the
   letters. They are the picture's numbers, not the layout's. */
.hero__art { --art-h: clamp(max(320px, 27.5vw), calc(100vh - var(--nav-h) - var(--hero-copy)), min(56.25vw, 1000px)); }
@supports (height: 1svh) {
  .hero__art { --art-h: clamp(max(320px, 27.5vw), calc(100svh - var(--nav-h) - var(--hero-copy)), min(56.25vw, 1000px)); }
}
.hero__art img {
  width: 100%; height: var(--art-h);
  object-fit: cover; object-position: 50% min(0px, calc(var(--art-h) - 36.5vw));
}
@media (max-width: 699px) {
  .hero { --hero-overlap: 18vw; }
  .hero__art img { height: auto; aspect-ratio: 1; object-position: center; }
}
/* the glows lie over the foot of the picture as well as the page under it, so the colour runs on
   past the picture's edge instead of stopping at a line; each ends inside the hero, never at its edge */
.hero__glow { position: absolute; z-index: 1; bottom: 0; border-radius: 50%; filter: blur(90px); opacity: 0.45; pointer-events: none; }
.hero__glow--a { width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; left: -22vw; background: radial-gradient(circle, rgba(229, 50, 45, 0.5), transparent 65%); }
.hero__glow--b { width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; right: -16vw; background: radial-gradient(circle, rgba(111, 182, 255, 0.3), transparent 65%); }

.hero__content { position: relative; z-index: 2; text-align: center; max-width: 1000px; margin: calc(-1 * var(--hero-overlap)) auto 0; }
/* entrance: each line rises in turn once the page is in */
.hero__content > * { animation: rise 0.8s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: 0.08s; }
.hero__content > :nth-child(3) { animation-delay: 0.16s; }
.hero__content > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero__title {
  font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em;
  background: linear-gradient(90deg, #fff 0%, #ffd9c2 45%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.hero__lead { margin: 14px auto 0; max-width: 680px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem); color: #c6cde0; text-wrap: balance; }
.hero__actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; }
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .hero__actions .btn { width: 100%; }
}

/* the live status as one quiet line: online or not, and who is on when anybody is */
.status { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 0.88rem; font-weight: 500; color: var(--muted); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.status.is-online { color: var(--text); }
.status.is-online .status__dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.status.is-offline .status__dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

/* a short laptop screen: the words close up a little so the buttons still make the first screen.
   After the rules it changes, which it overrides by coming later. */
@media (min-width: 700px) and (max-height: 780px) {
  .hero { --hero-copy: 220px; }
  .hero__title { font-size: clamp(2rem, 1.1rem + 2.4vw, 2.8rem); }
  .hero__lead { margin-top: 8px; }
  .hero__actions { margin-top: 14px; }
  .hero__actions .btn--lg { min-height: 50px; padding-block: 14px; }
  .hero .addr--lg { padding-block: 6px; }
  .status { margin-top: 10px; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(56px, 4vw + 32px, 96px) 0; position: relative; }
.section--alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.section--alt::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
/* the glow is centred a little way down, so it has faded to nothing by the section's top edge */
.section--join { background: radial-gradient(60% 55% at 50% 32%, rgba(229, 50, 45, 0.13), transparent 75%); }
.section__head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-2); margin-bottom: 12px; }
.lead { margin-top: 14px; color: var(--muted); font-size: 1.05rem; text-wrap: balance; }

/* expandable detail blocks: the long form, kept below the short one */
.more { margin: 22px auto 0; max-width: 760px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.more summary {
  cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--text);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.more[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.more[open] { border-color: rgba(255, 179, 71, 0.35); }
.more > :not(summary) { padding: 0 20px 20px; }
.more__body p { color: var(--muted); }
.more__body p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- gameplay */
/* Six scenes. Each tile is a picture of the real thing, the repo's own renders, over a light of its
   own, and one sentence on top. The text sits in the flow at the foot of the tile rather than being
   pinned there, so a long line makes the tile taller instead of spilling over its pictures. */
.play { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 188px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 20px; border: 1px solid var(--line); background: var(--bg-3);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tile:hover { transform: translateY(-3px); border-color: rgba(255, 179, 71, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0) 34%, rgba(5, 7, 13, 0.6) 64%, rgba(5, 7, 13, 0.95) 100%);
}
.tile__body { position: relative; z-index: 2; padding: 22px 24px 22px; }
.tile__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.tile h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.tile p { margin-top: 6px; color: #c9d0e2; font-size: 0.93rem; max-width: 52ch; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: rgba(5, 7, 13, 0.7); border: 1px solid var(--line-strong); }
.chip b { color: var(--amber); font-family: var(--font-head); }

.tile__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover .tile__bg { transform: scale(1.04); }
.tile__item, .tile__gun { position: absolute; z-index: 0; height: auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6)); transition: transform 0.8s var(--ease); }

.tile--raid { grid-column: 1 / 8; grid-row: span 2; }
.tile--guns { grid-column: 8 / 13; grid-row: span 2; }
.tile--events { grid-column: 1 / 5; grid-row: span 2; }
.tile--clans { grid-column: 5 / 9; grid-row: span 2; }
.tile--vehicles { grid-column: 9 / 13; grid-row: span 2; }
.tile--farm { grid-column: 1 / 13; grid-row: span 1; }

/* build & raid: the four wall textures in the order a raid strips them, the charge and the crate in front */
.tile__tiers { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.tile__tiers::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 74% 34%, rgba(229, 50, 45, 0.22), rgba(5, 7, 13, 0.45) 72%); }
.tile__tier { background-size: 128px 128px; image-rendering: pixelated; filter: saturate(0.9) brightness(0.8); }
.tile__tier--wood { background-image: url("img/tiers/oak_planks.png"); }
.tile__tier--stone { background-image: url("img/tiers/stone_bricks.png"); }
.tile__tier--metal { background-image: url("img/tiers/deepslate_bricks.png"); }
.tile__tier--armored { background-image: url("img/tiers/tuff_bricks.png"); }
.tile__item--crate { right: 4%; top: 5%; width: 38%; }
.tile__item--c4 { right: 38%; top: 20%; width: 22%; transform: rotate(-8deg); }
.tile:hover .tile__item--crate { transform: translateY(-6px); }
.tile:hover .tile__item--c4 { transform: rotate(-4deg) translateY(-4px); }

/* guns: two of the twenty-three, rendered from the models the server sends */
.tile--guns { background: radial-gradient(80% 60% at 72% 30%, rgba(255, 138, 31, 0.2), transparent 70%), linear-gradient(160deg, #151c2d, #0a0e18); }
.tile__gun--awp { width: 80%; left: 14%; top: 8%; transform: rotate(-7deg); opacity: 0.9; }
.tile__gun--ak { width: 90%; left: 3%; top: 26%; transform: rotate(-4deg); }
.tile:hover .tile__gun--awp { transform: rotate(-9deg) translateX(6px); }
.tile:hover .tile__gun--ak { transform: rotate(-5deg) translateY(-4px); }

/* events: the oil rig's locked crate and the countdown it shows while it is hacked */
.tile--events { background: radial-gradient(70% 55% at 60% 26%, rgba(229, 50, 45, 0.28), transparent 70%), #0c0f1a; }
.tile__timer {
  position: absolute; z-index: 0; left: 22px; top: 18px;
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.1rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--red-2); text-shadow: 0 0 24px rgba(229, 50, 45, 0.7);
}
.tile__item--cage { right: 4%; top: 7%; width: 50%; }
.tile:hover .tile__item--cage { transform: translateY(-5px); }

/* clans: the flag a clan is founded on */
.tile--clans { background: radial-gradient(60% 55% at 50% 28%, rgba(229, 50, 45, 0.24), transparent 70%), #0c0f1a; }
.tile__item--flag { left: 50%; top: 0; width: 66%; margin-left: -33%; }
.tile:hover .tile__item--flag { transform: translateY(-5px); }

/* vehicles: a quad under a night sky and the SAM site that watches it */
.tile--vehicles { background: radial-gradient(90% 70% at 70% 18%, rgba(111, 182, 255, 0.22), transparent 70%), linear-gradient(180deg, #0d1733, #0a0e18); }
.tile__item--sam { right: 0; top: 0; width: 52%; }
.tile__item--quad { left: 4%; top: 20%; width: 52%; }
.tile:hover .tile__item--sam { transform: translateY(-5px); }
.tile:hover .tile__item--quad { transform: translateX(-5px); }

/* farm & craft: a band, the farm on the right and the words on the dark to its left */
.tile--farm .tile__bg { left: auto; width: 64%; object-position: center 58%; }
.tile--farm::after { background: linear-gradient(90deg, var(--bg-3) 34%, rgba(15, 21, 36, 0.55) 52%, rgba(15, 21, 36, 0) 78%); }
.tile--farm .tile__body { max-width: 56%; }

@media (max-width: 1100px) {
  .play { grid-auto-rows: 176px; }
}
/* a tablet: two across */
@media (max-width: 999px) {
  .play { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tile { min-height: 320px; grid-column: auto !important; grid-row: auto !important; }
  .tile--raid, .tile--farm { grid-column: 1 / -1 !important; }
  .tile--farm { min-height: 220px; }
}
/* a phone: the scenes become a row to swipe through, the next one peeking in at the edge, so the
   whole section is one screen tall instead of six */
@media (max-width: 699px) {
  .play {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 14px;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .tile { flex: 0 0 84%; min-height: 380px; scroll-snap-align: start; }
  .tile:hover { transform: none; }
  .play .reveal { opacity: 1; transform: none; }
  .tile__body { padding: 18px 18px 20px; }
  .tile h3 { font-size: 1.3rem; }
  .tile p { font-size: 0.9rem; }
  .tile--farm .tile__bg { width: 100%; object-position: center 40%; }
  .tile--farm::after { background: linear-gradient(180deg, rgba(5, 7, 13, 0) 30%, rgba(5, 7, 13, 0.6) 60%, rgba(5, 7, 13, 0.95) 100%); }
  .tile--farm .tile__body { max-width: none; }
  .tile--raid { min-height: 410px; }
  .tile__item--crate { width: 44%; top: 2%; }
  .tile__item--c4 { width: 28%; right: 42%; top: 9%; }
  .chip { padding: 4px 9px; font-size: 0.74rem; }
}

/* --------------------------------------------------------------------- faq */
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); overflow: hidden; }
.faq__item[open] { border-color: rgba(229, 50, 45, 0.4); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--red-2); border-bottom: 2px solid var(--red-2); transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq__body { padding: 0 20px 18px; color: var(--muted); }

/* -------------------------------------------------------------------- join */
/* three steps side by side, the number beside each heading and everything under them the card's full
   width; the button is in the first step, the address in the last */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-content: start;
  padding: 20px 22px 22px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}
.step > * { grid-column: 1 / -1; }
.step__num {
  grid-column: 1; grid-row: 1; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 8px 20px rgba(229, 50, 45, 0.3);
}
.step h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.12rem; }
.step p { margin-top: 12px; color: var(--muted); font-size: 0.94rem; }
.step .btn { justify-self: start; margin-top: 16px; }
.step__hint { margin-top: 10px; font-size: 0.84rem; font-weight: 600; color: var(--green) !important; }
@media (max-width: 999px) {
  .steps { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; gap: 12px; }
}
@media (max-width: 600px) {
  .step { padding: 18px 18px 20px; }
  .step .btn { justify-self: stretch; }
}

/* ------------------------------------------------------------------ footer */
.footer { border-top: 1px solid var(--line); background: #03040a; padding: 26px 0 30px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; }
.footer__legal { color: var(--dim); font-size: 0.8rem; max-width: 620px; }

/* ------------------------------------------------------------------ reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal, .no-observer .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__content > * { opacity: 1; transform: none; }
}