/* ===================================================================
   MISFITS GAMING — four worlds, four climates.
   Shared chrome is neutral graphite; every server section re-declares
   the --w-* tokens so the page changes colour world as you scroll.
   Type: Archivo Black (loud) + Chakra Petch (HUD) + JetBrains Mono (addresses)
   =================================================================== */

:root{
  /* shared chrome */
  --hull:      #0e1014;
  --hull-2:    #161a20;
  --hull-line: #262c35;
  --hull-text: #e9ecf1;
  --hull-mute: #8b93a1;
  --hull-key:  #ff8a3d;

  /* world tokens — overwritten per section */
  --w-bg:     #0e1014;
  --w-panel:  #161a20;
  --w-line:   #262c35;
  --w-text:   #e9ecf1;
  --w-mute:   #8b93a1;
  --w-key:    #ff8a3d;
  --w-key-2:  #ff8a3d;
  --w-ink:    #12090a;

  --shell: 1200px;
  --gutter: clamp(16px, 4.6vw, 48px);

  --f-loud: "Archivo Black", "Arial Black", Impact, sans-serif;
  --f-hud:  "Chakra Petch", "Trebuchet MS", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

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

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

img{ max-width: 100%; display: block; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--w-key); outline-offset: 3px; }

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared type ---------- */
.hud{
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
}
.loud{
  font-family: var(--f-loud);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .88;
  text-wrap: balance;
  margin: 0;
}

/* ---------- HUD corner brackets ---------- */
.brackets{ position: relative; }
.brackets::before,
.brackets::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--w-key);
  opacity: .8;
  pointer-events: none;
}
.brackets::before{ top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brackets::after{ bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--w-key);
  background: transparent;
  color: var(--w-key);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover{ background: var(--w-key); color: var(--w-ink); transform: translateY(-2px); }
.btn--fill{ background: var(--w-key); color: var(--w-ink); }
.btn--fill:hover{ filter: brightness(1.12); background: var(--w-key); color: var(--w-ink); }
.btn--ghost{ border-color: var(--w-line); color: var(--w-text); }
.btn--ghost:hover{ background: var(--w-text); color: var(--w-bg); }

/* ===================================================================
   NAV — server-select HUD bar
   =================================================================== */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 600;
  background: rgba(14, 16, 20, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hull-line);
}
.nav{
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding-block: 9px;
}
.nav__mark{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.nav__mark img{ width: 36px; height: 36px; object-fit: contain; }
.nav__mark b{
  font-family: var(--f-loud);
  font-size: 1.02rem;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.nav__jump{
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__jump a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hull-mute);
  border: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.nav__jump a:hover{ color: var(--hull-text); border-color: var(--hull-line); background: var(--hull-2); }
.dot{
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--d);
  box-shadow: 0 0 8px var(--d);
}
.nav__cta{ padding: 10px 18px; font-size: .88rem; --w-key: var(--hull-key); --w-ink: #1a0d04; }

/* nav link behaviour on narrow screens lives in the portrait block below */

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(255,138,61,.16), transparent 70%),
    var(--hull);
  padding-block: clamp(46px, 7vw, 84px) clamp(34px, 5vw, 56px);
}
.hero__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,340px);
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
}
.hero__eyebrow{ color: var(--hull-key); margin-bottom: 16px; }
.hero h1{
  font-size: clamp(2.9rem, 9.4vw, 5.6rem);
  margin-bottom: 20px;
}
.hero h1 em{ font-style: normal; color: var(--hull-key); }
.hero__lede{
  margin: 0 0 28px;
  max-width: 50ch;
  font-size: 1.1rem;
  color: #c3c9d4;
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: 13px; }
.hero__logo{
  width: 100%;
  max-width: 340px;
  justify-self: center;
  filter: drop-shadow(0 0 44px rgba(255,138,61,.3)) drop-shadow(0 0 12px rgba(255,255,255,.16));
}
@media (max-width: 860px){
  .hero__grid{ grid-template-columns: minmax(0,1fr); }
  .hero__logo-wrap{ max-width: 250px; }
}

/* ---------- world select tiles ---------- */
.select{
  padding-block: 0 clamp(40px, 6vw, 68px);
  background: var(--hull);
}
.select__label{
  color: var(--hull-mute);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.select__label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hull-line);
}
.tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.tile{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 20px 22px;
  text-decoration: none;
  background: var(--hull-2);
  border: 1px solid var(--hull-line);
  border-top: 3px solid var(--d);
  transition: background .18s ease, transform .18s ease;
}
.tile:hover{ background: #1d222a; transform: translateY(-3px); }
.tile__game{
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d);
}
.tile__name{
  font-family: var(--f-loud);
  font-size: 1.24rem;
  line-height: 1.02;
  text-transform: uppercase;
}
.tile__meta{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hull-mute);
  margin-top: 4px;
}

/* ===================================================================
   WORLDS — each section re-declares the palette
   =================================================================== */
.world{
  position: relative;
  overflow: hidden;
  background: var(--w-bg);
  color: var(--w-text);
  padding-block: clamp(56px, 8vw, 104px);
}
/* soft atmospheric wash + faint scanlines, tinted by the world's key */
.world::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 82% 6%, color-mix(in srgb, var(--w-key) 26%, transparent), transparent 68%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 2px, transparent 2px 4px);
  opacity: .5;
}
.world > *{ position: relative; }

.world--metro{
  --w-bg:#150b26; --w-panel:#20113a; --w-line:#3a2160;
  --w-text:#f4ecff; --w-mute:#a992cc; --w-key:#ff2d78; --w-key-2:#2ad4ee; --w-ink:#2b0416;
}
.world--rust{
  --w-bg:#23150d; --w-panel:#31200f; --w-line:#4d3418;
  --w-text:#f4e7d4; --w-mute:#b6997a; --w-key:#e2571f; --w-key-2:#f0a73f; --w-ink:#1f0c04;
}
.world--sevendays{
  --w-bg:#13180f; --w-panel:#1c2315; --w-line:#33401f;
  --w-text:#e8eedc; --w-mute:#8d987a; --w-key:#9fcf30; --w-key-2:#a52c2c; --w-ink:#121a04;
}
.world--discord{
  --w-bg:#1b1d2e; --w-panel:#23263a; --w-line:#3b4060;
  --w-text:#eef0fb; --w-mute:#9aa0c2; --w-key:#5865f2; --w-key-2:#57f287; --w-ink:#ffffff;
}
/* the bright one — deliberate break in the rhythm */
/* the facility: cold slate, hazard yellow, warning stripes */
.world--scp{
  --w-bg:#14171b; --w-panel:#1c2026; --w-line:#2e343c;
  --w-text:#e8ebef; --w-mute:#8d96a3; --w-key:#ffd400; --w-key-2:#ff3b30; --w-ink:#14171b;
}
.world--scp::before{
  background:
    radial-gradient(900px 480px at 82% 6%, rgba(255,212,0,.10), transparent 68%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  opacity: 1;
}
.world--scp::after{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #14171b 14px 28px);
  opacity: .9;
}
.world--scp h2{ font-family: var(--f-mono); font-weight: 700; letter-spacing: -.02em; text-transform: none; }
.world--scp h2::before{
  content: "SITE-MISFITS // CONTAINMENT"; display: block; margin-bottom: 10px;
  font-family: var(--f-hud); font-size: .74rem; letter-spacing: .3em; color: var(--w-key-2);
}
.world--scp .connect{ border-left: 4px solid var(--w-key); }

/* the bright one: newsprint and an emergency broadcast */
.world--zomboid{
  --w-bg:#e7e2d4; --w-panel:#f6f2e7; --w-line:#c9c0aa;
  --w-text:#1c1b18; --w-mute:#5b574c; --w-key:#b3261e; --w-key-2:#3d6b35; --w-ink:#ffffff;
}
.world--zomboid::before{
  background:
    radial-gradient(900px 480px at 82% 6%, rgba(179,38,30,.12), transparent 68%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
}
.world--zomboid h2{ letter-spacing: -.035em; }
.world--zomboid h2::after{
  content: "THESE ARE THE LAST DAYS"; display: block; margin-top: 10px;
  font-family: var(--f-hud); font-size: .78rem; letter-spacing: .3em; color: var(--w-key);
}

/* ---------- WORLD 5 — MISFITS VALLEY (RedM, Old West) ----------
   Dusk over the desert: burnt umber ground, brass and blood-red keys,
   saloon-sign lettering, and the connect panel as a nailed-up poster. */
.world--redm{
  --w-bg:#24170f; --w-panel:#ead9b0; --w-line:#5a3f26;
  --w-text:#f3e6cc; --w-mute:#c4ab88; --w-key:#e0a43c; --w-key-2:#c2412b; --w-ink:#22140a;
  background:
    radial-gradient(520px 260px at 78% 100%, rgba(255,170,80,.30), transparent 70%),
    linear-gradient(to bottom, #1b100b 0%, #2c1a10 45%, #4a2614 100%);
}
.world--redm::before{
  /* setting sun + film grain instead of the usual scanlines */
  background:
    radial-gradient(150px 150px at 78% 84%, rgba(255,190,110,.55), rgba(255,140,60,.18) 60%, transparent 72%),
    repeating-radial-gradient(circle at 30% 20%, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  opacity: .8;
}
.world--redm::after{
  /* mesa skyline along the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 11vw, 140px);
  pointer-events: none;
  background: #140b07;
  clip-path: polygon(0 100%, 0 62%, 7% 62%, 9% 38%, 19% 38%, 21% 60%, 33% 64%, 38% 70%, 46% 52%, 50% 28%, 58% 28%, 60% 50%, 66% 66%, 74% 70%, 80% 58%, 82% 44%, 90% 44%, 92% 64%, 100% 66%, 100% 100%);
  opacity: .9;
}
.world--redm .shell{ position: relative; z-index: 1; padding-bottom: clamp(30px, 6vw, 70px); }
.world--redm h2{
  font-family: "Rye", Georgia, serif;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  color: #f6dfa8;
  text-shadow: 0 3px 0 #6b2a17, 0 0 30px rgba(224,164,60,.25);
}
.world--redm .world__lede{ color: #d9c4a2; }
.world--redm .hook{ background: rgba(194,65,43,.16); border-left-color: var(--w-key-2); }
.world--redm .hook span{ color: #f08a6c; }
.world--redm .specs li{ border-color: #6b4a2c; color: #e2cba4; }
.world--redm .feats{ border-top-color: #5a3f26; }
.world--redm .feats li{ color: #cdb592; }
.world--redm .feats li::before{ background: none; border: 0; width: auto; height: auto; content: "\2605"; color: var(--w-key); font-size: .8em; top: .15em; }
.status-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 14px 7px 12px;
  border: 2px dashed var(--w-key);
  color: var(--w-key);
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.status-badge i{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--w-key);
  box-shadow: 0 0 10px var(--w-key);
  animation: mg-blink 1.6s ease-in-out infinite;
}
@keyframes mg-blink{ 50%{ opacity: .25; } }

/* the poster */
.poster{
  position: relative;
  padding: 30px 26px 26px;
  background:
    radial-gradient(circle at 12% 10%, rgba(120,80,30,.22), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(120,70,25,.28), transparent 45%),
    linear-gradient(180deg, #efe0bb, #e2cc9c);
  color: #2b1a0e;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 40px rgba(110,70,30,.35);
  transform: rotate(1.2deg);
  font-family: "Special Elite", "Courier New", monospace;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.poster::before, .poster::after{
  content: "";
  position: absolute;
  top: 10px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b9b2a6, #4a4339);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.poster::before{ left: 12px; }
.poster::after{ right: 12px; }
.poster .poster__wanted{
  margin: 0;
  font-family: "Rye", Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  color: #5b1c10;
  letter-spacing: .04em;
}
.poster .poster__for{
  margin: 6px 0 14px;
  font-family: "Rye", Georgia, serif;
  font-size: 1.35rem;
  color: #2b1a0e;
}
.poster__rule{ height: 0; border: 0; border-top: 2px solid #2b1a0e; border-bottom: 1px solid #2b1a0e; padding-top: 3px; margin: 0 0 14px; }
.poster p{ margin: 0 0 12px; font-size: .98rem; line-height: 1.5; }
.poster .connect__key{ color: #5a3f26; font-family: "Special Elite", "Courier New", monospace; letter-spacing: .08em; text-transform: none; font-size: .9rem; }
.poster .addr{ background: rgba(255,250,235,.55); border-color: #6b4a2c; text-align: left; }
.poster .addr code{ color: #2b1a0e; }
.poster .copy{ color: #5b1c10; border-left-color: #6b4a2c; }
.poster .copy:hover{ background: #5b1c10; color: #f3e6cc; }
.poster .poster__reward{
  margin: 18px 0 4px;
  font-family: "Rye", Georgia, serif;
  font-size: 1.15rem;
  color: #5b1c10;
}
.poster .btn{ --w-key: #5b1c10; --w-ink: #f3e6cc; margin-top: 8px; }
.poster__small{ font-size: .8rem !important; color: #5a3f26; margin: 14px 0 0 !important; }
@media (max-width: 640px){
  .poster{ transform: none; padding: 28px 18px 22px; }
}

/* FiveM relaunch flag */
.flash{
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  background: var(--w-key);
  color: var(--w-ink);
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}

/* status tag on a select tile */
.tile__tag{
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 8px;
  border: 1px dashed var(--d);
  color: var(--d);
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.world__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px){
  .world__grid{ grid-template-columns: minmax(0,1fr); }
}

.world__game{
  color: var(--w-key);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.world__game::after{
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--w-key), transparent);
  opacity: .6;
}
.world h2{
  font-size: clamp(2.4rem, 6.4vw, 4.3rem);
  margin-bottom: 18px;
}
.world__lede{
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: 1.08rem;
  color: var(--w-mute);
}

/* the one-line hook for each server */
.hook{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--w-key) 12%, transparent);
  border-left: 4px solid var(--w-key);
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .01em;
  color: var(--w-text);
}
.hook span{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w-key);
  flex: none;
}
@media (max-width: 560px){
  .hook{ flex-direction: column; gap: 6px; font-size: 1rem; }
}

.specs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.specs li{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--w-line);
  color: var(--w-mute);
}

/* per-server feature list */
.feats{
  list-style: none;
  margin: 0 0 28px;
  padding: 22px 0 0;
  border-top: 1px solid var(--w-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px 26px;
}
.feats li{
  position: relative;
  padding-left: 18px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--w-mute);
}
.feats li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--w-key);
}
.feats li b{ color: var(--w-text); font-weight: 600; }
.feats li code{
  font-family: var(--f-mono);
  font-size: .86em;
  color: var(--w-text);
  background: color-mix(in srgb, var(--w-key) 14%, transparent);
  padding: 1px 5px;
}
.feats__head{
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w-key);
  margin: 0 0 -6px;
}

.world__actions{ display: flex; flex-wrap: wrap; gap: 13px; }

/* ---------- connect panel ---------- */
.connect{
  padding: 22px 22px 24px;
  background: var(--w-panel);
  border: 1px solid var(--w-line);
}
.connect__head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--w-line);
}
.connect__head .hud{ color: var(--w-mute); }
.led{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--w-key-2);
  box-shadow: 0 0 10px var(--w-key-2);
  flex: none;
}
.connect__row + .connect__row{ margin-top: 16px; }
.connect__key{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w-mute);
  margin: 0 0 6px;
}
.addr{
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--w-line);
  background: color-mix(in srgb, var(--w-bg) 55%, transparent);
}
.addr code{
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .94rem;
  color: var(--w-text);
  overflow-x: auto;
  white-space: nowrap;
}
.addr--pending code{ color: var(--w-mute); font-style: italic; }
.copy{
  flex: none;
  padding: 0 15px;
  border: 0;
  border-left: 1px solid var(--w-line);
  background: transparent;
  color: var(--w-key);
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.copy:hover{ background: var(--w-key); color: var(--w-ink); }
.copy[data-done="1"]{ background: var(--w-key-2); color: var(--w-ink); }

.connect__note{
  margin: 16px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--w-mute);
}
.connect__note code{
  font-family: var(--f-mono);
  font-size: .88em;
  color: var(--w-text);
  background: color-mix(in srgb, var(--w-key) 14%, transparent);
  padding: 1px 5px;
  white-space: nowrap;
}

/* ===================================================================
   ARCADE + CTA + FOOTER  (back on hull palette)
   =================================================================== */
.plain{
  background: var(--hull);
  color: var(--hull-text);
  --w-bg: var(--hull); --w-panel: var(--hull-2); --w-line: var(--hull-line);
  --w-text: var(--hull-text); --w-mute: var(--hull-mute);
  --w-key: var(--hull-key); --w-key-2: var(--hull-key); --w-ink: #1a0d04;
  padding-block: clamp(56px, 7vw, 92px);
}
.sec-head{ margin-bottom: 34px; }
.sec-head--row{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.sec-head--row > div{ flex: 1 1 380px; }
.sec-head .hud{ color: var(--w-key); margin-bottom: 12px; }
.sec-head h2{ font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 12px; }
.sec-head p{ margin: 0; max-width: 58ch; color: var(--w-mute); }


.game__save{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 260px;
}
.game__save[hidden]{ display: none !important; }
.game__save label{ color: var(--w-key); }
.game__saverow{ display: flex; gap: 8px; }
.game__saverow input{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: .95rem;
  color: var(--w-text);
  background: rgba(0,0,0,.4);
  border: 1px solid var(--w-line);
}
.game__saverow input:focus-visible{ outline: 2px solid var(--w-key); outline-offset: 1px; }
.game__saverow .game__go{ margin-top: 0; padding: 10px 16px; }

.board{
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
}
.board__head{ color: var(--w-mute); text-align: center; margin-bottom: 10px; }
.board__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.board__list li{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  background: var(--w-panel);
  font-size: .92rem;
}
.board__list li span:first-child{
  width: 1.6em;
  flex: none;
  font-family: var(--f-hud);
  font-weight: 700;
  color: var(--w-key);
  font-variant-numeric: tabular-nums;
}
.board__tabs{ display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.board__tabs button{
  padding: 6px 12px; background: transparent; border: 1px solid var(--w-line); color: var(--w-mute);
  font-family: var(--f-hud); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.board__tabs button.is-on{ border-color: var(--w-key); color: var(--w-key); }
.board__del{
  flex: none; margin-left: 4px; padding: 2px 8px; border: 1px solid #c0392b; background: transparent; color: #ff6b5a;
  font-family: var(--f-hud); font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.board__del.is-sure{ background: #c0392b; color: #fff; }
.board__admin{ margin-top: 12px; padding: 12px; border: 1px dashed #c0392b; text-align: center; }
.board__admin[hidden], .board__adminrow[hidden]{ display: none !important; }
.board__admin .hud{ color: #ff6b5a; margin-bottom: 8px; }
.board__adminrow{ display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: .9rem; color: var(--w-mute); }
.board__adminrow input{ flex: 1; min-width: 0; max-width: 220px; padding: 8px 10px; background: var(--w-panel); border: 1px solid var(--w-line); color: var(--w-text); font: inherit; }
.board__adminmsg{ margin: 8px 0 0; font-size: .85rem; color: var(--w-mute); min-height: 1em; }
.board__name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__pts{
  font-family: var(--f-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--w-text);
}
.board__empty{
  padding: 14px;
  text-align: center;
  color: var(--w-mute);
  background: var(--w-panel);
  font-size: .92rem;
}

/* ---------- logo: streetlight flicker, glow pulse, headlight sweep ---------- */
.hero__logo-wrap{
  position: relative;
  width: 100%;
  max-width: 300px;
  justify-self: center;
  grid-row: 1;
  line-height: 0;
}
.hero__logo-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 38%,
    rgba(255,190,110,.7) 47%,
    rgba(255,255,255,.92) 50%,
    rgba(255,190,110,.7) 53%,
    transparent 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--logo-mask, none);
  mask-image: var(--logo-mask, none);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  mix-blend-mode: screen;
  opacity: 0;
}

/* ---------- arcade tabs ---------- */
.arc{ display: flex; flex-direction: column; gap: 18px; align-items: center; }
.tabs{
  display: grid;
  /* auto-fit rather than a fixed count, so adding a game doesn't mean
     rewriting the grid - and an odd one out spans the row on a phone */
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 660px;
}
.tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 6px 12px;
  cursor: pointer;
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  border-top: 3px solid var(--d);
  color: var(--w-mute);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.tab:hover{ background: #1d222a; color: var(--w-text); transform: translateY(-2px); }
.tab b{
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.tab small{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.tab.is-on{ background: #20262f; color: var(--w-text); }
.tab.is-on b{ color: var(--d); }
@media (max-width: 560px){
  .tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs .tab:last-child:nth-child(odd){ grid-column: 1 / -1; }
}

/* ---------- on-screen control pad ----------
   Portrait phones are the main way this gets played, so the pad is a
   first-class control, not a fallback: big targets, no page scroll while
   a run is live, and no 300ms tap delay. It shows on touch pointers and
   on narrow screens; a desktop with a keyboard doesn't need it. */
.pad{
  display: none;
  overscroll-behavior: contain;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 300px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pad__b{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0;
  cursor: pointer;
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  color: var(--w-key);
  touch-action: none;
  transition: background .1s ease, transform .1s ease;
}
.pad__b span{
  width: 0; height: 0;
  border: 11px solid transparent;
}
.pad__up    { grid-area: 1 / 2; }
.pad__left  { grid-area: 2 / 1; }
.pad__down  { grid-area: 2 / 2; }
.pad__right { grid-area: 2 / 3; }
.pad__up span   { border-bottom-color: currentColor; margin-bottom: 11px; }
.pad__down span { border-top-color: currentColor;    margin-top: 11px; }
.pad__left span { border-right-color: currentColor;  margin-right: 11px; }
.pad__right span{ border-left-color: currentColor;   margin-left: 11px; }
.pad__b.is-down{
  background: var(--w-key);
  color: var(--w-ink);
  transform: translateY(1px);
}
/* a left/right game hides the vertical keys and spreads the other two */
.pad[data-mode="lr"] .pad__up,
.pad[data-mode="lr"] .pad__down{ display: none; }

/* a platformer needs run and jump at the same time, so steering goes under
   one thumb and a tall jump pad under the other */
.pad[data-mode="run"] .pad__down{ display: none; }
.pad[data-mode="run"] .pad__left { grid-area: 1 / 1 / 3 / 2; }
.pad[data-mode="run"] .pad__right{ grid-area: 1 / 2 / 3 / 3; }
.pad[data-mode="run"] .pad__up   { grid-area: 1 / 3 / 3 / 4; }
.pad[data-mode="run"] .pad__up span{ margin-bottom: 20px; }
.pad[data-mode="run"] .pad__up::after{
  content: "JUMP";
  position: absolute;
  bottom: 10px;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .14em;
}
.pad[data-mode="lr"]{ grid-template-rows: 1fr; max-width: 300px; }
.pad[data-mode="lr"] .pad__left { grid-area: 1 / 1 / 2 / 2; }
.pad[data-mode="lr"] .pad__right{ grid-area: 1 / 3 / 2 / 4; }

/* ---------- what this game actually is ---------- */
.ginfo{
  width: 100%;
  max-width: 460px;
  padding: 16px 18px 18px;
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  border-top: 3px solid var(--w-key);
  text-align: left;
}
.ginfo__srv{ color: var(--w-key); margin: 0 0 8px; }
.ginfo__blurb{
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--w-text);
}
.ginfo__cast{
  margin: 10px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--w-key);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--w-mute);
}
.ginfo__cast[hidden]{ display: none !important; }
.ginfo__cast b{ color: var(--w-text); font-weight: 600; }
.ginfo__tips{
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--w-line);
  display: grid;
  gap: 7px;
}
.ginfo__tips li{
  position: relative;
  padding-left: 16px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--w-mute);
}
.ginfo__tips li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px; height: 5px;
  background: var(--w-key);
}
.ginfo__tips li b{ color: var(--w-text); font-weight: 600; }

/* the brawler: steering on the left thumb, punch and jump on the right */
.pad__hit, .pad__jmp, .pad__sp, .pad__b4, .pad__b5, .pad__grd{
  display: none;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
}
.pad[data-mode="brawl"]{
  grid-template-columns: repeat(5, 1fr);
  max-width: 400px;
}
.pad[data-mode="brawl"] .pad__hit,
.pad[data-mode="brawl"] .pad__jmp,
.pad[data-mode="brawl"] .pad__sp{ display: flex; }
.pad[data-mode="brawl"] .pad__hit{ grid-area: 1 / 4 / 3 / 5; color: var(--w-key); }
.pad[data-mode="brawl"] .pad__jmp{ grid-area: 1 / 5 / 2 / 6; color: var(--w-mute); }
.pad[data-mode="brawl"] .pad__sp{ grid-area: 2 / 5 / 3 / 6; color: #57f287; }

/* the gallery: steer the sight on the left, fire and reload on the right */
.pad[data-mode="aim"]{
  grid-template-columns: repeat(5, 1fr);
  max-width: 400px;
}
.pad[data-mode="aim"] .pad__hit,
.pad[data-mode="aim"] .pad__jmp{ display: flex; }
.pad[data-mode="aim"] .pad__hit{ grid-area: 1 / 4 / 3 / 5; color: var(--w-key); }
.pad[data-mode="aim"] .pad__jmp{ grid-area: 1 / 5 / 3 / 6; color: var(--w-mute); }
.game__frame.is-aim.is-live canvas{ cursor: none; }
/* a game that is mouse and touch only shows no pad at all */
.pad[data-mode="none"], .game.is-max .pad[data-mode="none"]{ display: none !important; }

/* the boxer: steering and the two modifiers on the left thumb, four
   punches on the right, guard and the star down the middle */
.pad[data-mode="box"]{
  grid-template-columns: repeat(6, 1fr);
  max-width: 460px;
}
.pad[data-mode="box"] .pad__hit,
.pad[data-mode="box"] .pad__jmp,
.pad[data-mode="box"] .pad__sp,
.pad[data-mode="box"] .pad__b4,
.pad[data-mode="box"] .pad__b5,
.pad[data-mode="box"] .pad__grd{ display: flex; }
.pad[data-mode="box"] .pad__grd{ grid-area: 1 / 4 / 2 / 5; color: #8fd8ff; }
.pad[data-mode="box"] .pad__b5 { grid-area: 2 / 4 / 3 / 5; color: #ffd77a; }
.pad[data-mode="box"] .pad__hit{ grid-area: 1 / 5 / 2 / 6; color: var(--w-key); }
.pad[data-mode="box"] .pad__sp { grid-area: 2 / 5 / 3 / 6; color: #ff5d7a; }
.pad[data-mode="box"] .pad__jmp{ grid-area: 1 / 6 / 2 / 7; color: var(--w-key); }
.pad[data-mode="box"] .pad__b4 { grid-area: 2 / 6 / 3 / 7; color: #ff5d7a; }
.pad[data-mode="box"] .pad__b{ font-size: .62rem; }
/* up is no longer a guard, it is where the punch goes */
.pad[data-mode="box"] .pad__up::after{
  content: "HIGH";
  position: absolute; bottom: 5px;
  font-family: var(--f-hud); font-weight: 700;
  font-size: .56rem; letter-spacing: .12em;
}
@media (max-width: 430px){
  .pad[data-mode="box"] .pad__b{ font-size: .55rem; height: 52px; }
}
.pad[data-mode="box"] .pad__down::after{
  content: "DUCK / HOLD BLOCK";
  position: absolute; bottom: 4px;
  font-family: var(--f-hud); font-weight: 700;
  font-size: .44rem; letter-spacing: .03em;
}

/* a wide game gets a wider frame; the aspect ratio itself is set in JS
   from the canvas the game asked for */
.game__frame.is-wide{ max-width: 640px; }

@media (pointer: coarse){ .pad{ display: grid; } }
@media (max-width: 900px){ .pad{ display: grid; } }

/* The frame and the pad own every gesture that starts on them, always -
   not just while a run is live. A game you can accidentally scroll is a
   game you can't play one-handed. */
.game__frame,
.game__frame canvas{
  touch-action: none;
  overscroll-behavior: contain;
}
.arc{
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* ---------- full screen ----------
   Native fullscreen on the canvas alone would leave the control pad
   outside it, which is useless on a phone. The whole play area goes fixed
   over the viewport instead, and native fullscreen is layered on top
   where the browser allows it. */
.game.is-max{
  position: fixed;
  inset: 0;
  z-index: 9000;
  gap: 10px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #07080c;
  justify-content: center;
  overscroll-behavior: none;
}
.game.is-max .ginfo,
.game.is-max .board,
.game.is-max .game__keys{ display: none; }
.game.is-max .game__frame{
  max-width: min(100%, calc((100dvh - 168px) * var(--arw, 360) / var(--arh, 540)));
  max-height: calc(100dvh - 168px);
}
.game.is-max .pad{ display: grid; }

/* ---------- game controller ----------
   With a pad plugged in the touch buttons are just clutter, and the
   overlay says which button does what. */
.game.has-gp .pad,
.game.is-max.has-gp .pad{ display: none; }
.game__gp{
  margin: 4px 0 0;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .74rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w-key) !important;
}
.game__gp[hidden]{ display: none !important; }
.gp-line{
  display: block;
  margin-top: 4px;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--w-key);
}
html.ar-max, html.ar-max body{ overflow: hidden !important; }

/* and while a run is live on a touch screen, the document itself is pinned */
html.ar-lock,
html.ar-lock body{
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

.game__util{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  width: 100%;
  max-width: 420px;
}
.game__util .game__keys{ margin: 0; }
.util{
  padding: 7px 14px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--w-line);
  color: var(--w-mute);
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease;
}
.util:hover{ color: var(--w-text); border-color: var(--w-text); }
.util.is-off{ color: #6b7280; }
.util::before{
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--w-key);
  vertical-align: middle;
}
.util.is-off::before{ background: #4b5563; }

/* ---------- arcade frame ---------- */
.game{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.game__frame{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 360 / 540;
  background: #0a0c10;
  border: 1px solid var(--w-line);
  overflow: hidden;
  /* not 'manipulation' - this element must swallow pans outright, or a
     thumb that drifts off the controls scrolls the page mid-run */
  touch-action: none;
  overscroll-behavior: contain;
}
.game__frame canvas{
  display: block;
  width: 100%;
  height: 100%;
}
.game__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 12, 16, .82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}
.game__overlay[hidden]{ display: none !important; }
.game__overlay h3{
  font-family: var(--f-loud);
  font-size: 1.7rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--w-text);
}
.game__overlay p{
  margin: 0;
  max-width: 26ch;
  font-size: .94rem;
  color: var(--w-mute);
}
.game__go{
  margin-top: 6px;
  padding: 11px 22px;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid var(--w-key);
  background: var(--w-key);
  color: var(--w-ink);
  cursor: pointer;
}
.game__scores{
  display: flex;
  gap: 26px;
  width: 100%;
  max-width: 420px;
  justify-content: center;
  font-family: var(--f-hud);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w-mute);
}
.game__scores b{
  color: var(--w-key);
  font-variant-numeric: tabular-nums;
}
.game__keys{
  margin: 0;
  font-size: .86rem;
  color: var(--w-mute);
  text-align: center;
}

/* ---------- live Discord chat ---------- */
.chatbox{
  position: relative;
  min-height: 560px;
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  overflow: hidden;
}
.chatbox iframe{
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: var(--w-panel);
}
.chatbox__fallback{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 560px;
  padding: 40px 24px;
  text-align: center;
}
.chatbox__fallback p{
  margin: 0;
  max-width: 44ch;
  color: var(--w-mute);
}
.chatbox__fallback .hud{ color: var(--w-key); }
.chatbox__dots{
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.chatbox__dots i{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--w-mute);
  opacity: .45;
}
.chatbox__dots i:nth-child(2){ opacity: .7; }
.chatbox__dots i:nth-child(3){ opacity: 1; background: var(--w-key); }

.band{
  position: relative;
  overflow: hidden;
  background: var(--hull-2);
  padding-block: clamp(52px, 7vw, 84px);
}
.band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 132%, rgba(255,138,61,.24), transparent 62%);
  pointer-events: none;
}
.band__inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  --w-key: var(--hull-key); --w-ink: #1a0d04; --w-line: var(--hull-line); --w-text: var(--hull-text);
}
.band h2{ font-size: clamp(2.1rem, 6vw, 3.6rem); }
.band p{ margin: 0; max-width: 46ch; color: var(--hull-mute); }
.band__actions{ display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

footer{ padding-block: 38px 46px; border-top: 1px solid var(--hull-line); background: var(--hull); }
.foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.foot__mark{ display: flex; align-items: center; gap: 10px; margin-right: auto; }
.foot__mark img{ width: 40px; height: 40px; object-fit: contain; }
.foot__mark b{ font-family: var(--f-loud); font-size: 1rem; line-height: 1.05; text-transform: uppercase; }
.foot__links{ display: flex; flex-wrap: wrap; gap: 20px; }
.foot a{
  font-family: var(--f-hud);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hull-mute);
  transition: color .16s ease;
}
.foot a:hover{ color: var(--hull-key); }
.foot__note{
  width: 100%;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--hull-line);
  font-family: var(--f-hud);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5d6572;
}



@media (prefers-reduced-motion: no-preference){
  .hero__logo{
    animation: logo-flicker 1.7s linear 1 both, logo-glow 5.5s ease-in-out 1.7s infinite;
  }
  .hero__logo-wrap::after{
    animation: logo-sweep 8s ease-in-out 2.6s infinite;
  }
  .hero__logo-wrap{
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
    transform: perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  }
}
@keyframes logo-flicker{
  0%{ opacity: 0 } 7%{ opacity: 1 } 11%{ opacity: .18 } 17%{ opacity: 1 }
  23%{ opacity: .35 } 29%{ opacity: 1 } 37%{ opacity: .6 } 43%{ opacity: 1 }
  100%{ opacity: 1 }
}
@keyframes logo-glow{
  0%, 100%{ filter: drop-shadow(0 0 38px rgba(255,138,61,.26)) drop-shadow(0 0 10px rgba(255,255,255,.14)); }
  50%{ filter: drop-shadow(0 0 64px rgba(255,138,61,.46)) drop-shadow(0 0 18px rgba(255,255,255,.24)); }
}
@keyframes logo-sweep{
  0%, 52%{ background-position: 170% 0; opacity: 0 }
  56%{ opacity: .95 }
  84%{ background-position: -70% 0; opacity: .95 }
  90%, 100%{ background-position: -70% 0; opacity: 0 }
}

/* ===================================================================
   CENTRED LAYOUT — every screen size
   One centred column throughout. The connect panel drops beneath each
   server's description instead of sitting beside it, so desktop, tablet
   and phone all read the same way down the middle of the page.
   Addresses and feature lists stay left-aligned inside their own boxes,
   because centring a column of IPs makes them hard to scan.
   =================================================================== */

/* hero: logo on top, words centred under it */
.hero__grid{
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.hero__logo{ width: 100%; }
.hero__eyebrow{ justify-content: center; }
.hero__lede{ margin-inline: auto; }
.hero__actions{ justify-content: center; }

/* section headers */
.select__label{ justify-content: center; }
.select__label::after{ display: none; }
.sec-head{ text-align: center; }
.sec-head p{ margin-inline: auto; }
.sec-head--row{ justify-content: center; text-align: center; }
.sec-head--row > div{ flex: 1 1 100%; }

/* server sections: single centred column */
.world__grid{
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 34px;
}
.world__grid > *{ width: 100%; }
.world__grid > div:first-child{
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.world__game{ justify-content: center; }
.world__game::after{ display: none; }
.world__lede{ margin-inline: auto; }
.specs, .world__actions{ justify-content: center; }
.feats__head{ text-align: center; }

/* these stay left-aligned inside a centred box */
.hook, .feats{
  max-width: 700px;
  margin-inline: auto;
  text-align: left;
}
.connect{
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}

.foot{ justify-content: center; text-align: center; }
.foot__mark{ margin-right: 0; }
.foot__note{ text-align: center; }

/* ===================================================================
   PORTRAIT — phone and tablet
   The page is read one-handed more than it's read on a desktop, so
   narrow screens get: a reachable nav, a single column, centred
   headers, and structured data (addresses, feature lists) left
   aligned where centring would hurt scanning.
   =================================================================== */

/* anchor jumps must clear the sticky header */
section[id], header[id]{ scroll-margin-top: 78px; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ---------- tablet ---------- */
@media (max-width: 1080px){
  .nav{ flex-wrap: wrap; padding-bottom: 0; }
  .nav__jump{
    display: flex;
    order: 3;
    width: 100%;
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 9px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav__jump::-webkit-scrollbar{ display: none; }
  .nav__jump a{ flex: none; white-space: nowrap; }
  section[id], header[id]{ scroll-margin-top: 116px; }
}

/* one column well before the two-column layout gets cramped */
@media (max-width: 1024px){
  .world__grid{ grid-template-columns: minmax(0, 1fr); }
  .connect{ max-width: 620px; }
}

@media (min-width: 1001px){
  .tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 1000px){
  .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile:last-child:nth-child(odd){ grid-column: 1 / -1; }
}

/* hero stacks at 860 and the logo centres, so centre the words with it */
@media (max-width: 860px){
  .hero__grid{ text-align: center; }
  .hero__eyebrow{ justify-content: center; }
  .hero__lede{ margin-inline: auto; }
  .hero__actions{ justify-content: center; }
}

/* ---------- phone portrait ---------- */
@media (max-width: 640px){
  body{ font-size: 16px; }

  .tiles{ grid-template-columns: minmax(0, 1fr); }
  .feats{ grid-template-columns: minmax(0, 1fr); }

  /* centre the headers, leave data left-aligned */
  .hero__grid, .world__grid, .sec-head, .sec-head--row{ text-align: center; }
  .hero__eyebrow, .world__game, .select__label{ justify-content: center; }
  .world__game::after, .select__label::after{ display: none; }
  .hero__lede, .world__lede, .sec-head p{ margin-inline: auto; }
  .hero__actions, .world__actions, .specs, .sec-head--row{ justify-content: center; }
  .sec-head--row > div{ flex: 1 1 100%; }
  .btn{ justify-content: center; }

  .hook, .feats, .connect, .feats__head{ text-align: left; }
  .feats li{ text-align: left; }
  .hook{ align-items: flex-start; }

  .hero__logo-wrap{ max-width: 230px; }
  .hero h1{ line-height: .9; }

  /* the chat embed shouldn't eat a whole phone screen */
  .chatbox{ min-height: 430px; }
  .chatbox iframe{ height: 470px; }
  .chatbox__fallback{ min-height: 430px; padding: 32px 20px; }

  .connect{ padding: 20px 18px 22px; }
  .addr code{ font-size: .88rem; }

  .foot{ justify-content: center; text-align: center; }
  .foot__mark{ width: 100%; margin-right: 0; justify-content: center; }
  .foot__links{ justify-content: center; }
  .foot__note{ text-align: center; }
}

/* the small cross-link from a server to its arcade game */
.arcade-link{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--w-line);
  font-family: var(--f-hud); font-size: .82rem; letter-spacing: .06em; text-decoration: none;
  color: var(--w-mute); transition: color .15s ease;
}
.arcade-link span{ font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.arcade-link b{ color: var(--w-key); font-weight: 700; }
.arcade-link:hover{ color: var(--w-text); }
.poster .arcade-link{ justify-content: center; border-top-color: rgba(90,63,38,.45); color: #5a3f26; font-family: "Special Elite", "Courier New", monospace; }
.poster .arcade-link b{ color: #5b1c10; }

/* ---------- live status ---------- */
.live{
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-hud); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--w-mute); white-space: nowrap;
}
.live[hidden], .tile__live[hidden], .dc-live[hidden]{ display: none !important; }
.live::before, .tile__live::before, .dc-live::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none;
}
.live.is-on, .tile__live.is-on{ color: #3ddc84; }
.live.is-on::before, .tile__live.is-on::before, .dc-live::before{ box-shadow: 0 0 8px currentColor; animation: mg-pulse 2.2s ease-in-out infinite; }
.live.is-off, .tile__live.is-off{ color: #ff6b5a; }
.world--scp .live.is-on{ color: #3ddc84; }
.world--zomboid .live.is-on{ color: #2f7a2a; }
.world--zomboid .live.is-off{ color: #b3261e; }
.live--poster{ justify-content: center; margin: -6px 0 12px !important; color: #5a3f26; }
.live--poster.is-on{ color: #2f6b2a; }
@keyframes mg-pulse{ 50%{ opacity: .45; } }
.tile__live{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: var(--f-hud); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hull-mute);
}
.dc-live{
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px !important;
  font-family: var(--f-hud); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #57f287 !important;
}
.dc-live b{ color: var(--w-text); }
.dc-live--band{ justify-content: center; margin: 0 0 18px !important; }

/* ---------- rules ---------- */
.rules{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.rules__card{ padding: 18px 20px 8px; background: var(--hull-2); border: 1px solid var(--hull-line); border-top: 3px solid var(--d); text-align: left; }
.rules__card .hud{ color: var(--d); margin-bottom: 10px; }
.rules__card ul{ list-style: none; margin: 0; padding: 0; }
.rules__card li{ position: relative; padding: 0 0 10px 16px; font-size: .94rem; line-height: 1.5; color: var(--hull-mute); }
.rules__card li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--d); }
.rules__card li b{ color: var(--hull-text); font-weight: 600; }

/* ---------- crawlable game list + FAQ ---------- */
.glist-wrap{ padding-block: 0 clamp(40px, 6vw, 72px); }
.glist__label{ color: var(--hull-mute); margin-bottom: 14px; text-align: center; }
.glist{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.glist a{
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 14px 16px; text-decoration: none;
  background: var(--hull-2); border: 1px solid var(--hull-line);
  transition: background .16s ease, border-color .16s ease;
}
.glist a:hover{ background: #1d222a; border-color: var(--hull-key); }
.glist b{ font-family: var(--f-loud); font-weight: 400; text-transform: uppercase; font-size: 1rem; color: var(--hull-text); }
.glist span{ font-family: var(--f-hud); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hull-key); }
.glist em{ font-style: normal; font-size: .9rem; line-height: 1.45; color: var(--hull-mute); }
.faq{ max-width: 780px; margin-inline: auto; display: grid; gap: 8px; }
.faq__q{ background: var(--hull-2); border: 1px solid var(--hull-line); }
.faq__q summary{
  cursor: pointer; list-style: none; padding: 15px 44px 15px 18px; position: relative;
  font-family: var(--f-hud); font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--hull-text);
}
.faq__q summary::-webkit-details-marker{ display: none; }
.faq__q summary::after{
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-loud); color: var(--hull-key); font-size: 1.2rem;
}
.faq__q[open] summary::after{ content: "\2013"; }
.faq__q p{ margin: 0; padding: 0 18px 16px; color: var(--hull-mute); font-size: .96rem; line-height: 1.55; text-align: left; }

/* ---------- very small phones ---------- */
@media (max-width: 380px){
  .nav__mark b{ font-size: .92rem; }
  .btn{ padding: 12px 18px; font-size: .88rem; }
  .world h2{ font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}