/* The header. The logo is the Play button and sits alone in the middle; the links are split evenly on both sides of it
   (bottom row) and the utilities (search, friends, notifications, account) take the top row. */

:root { --hdr-h: 106px; --brand: #4cff00; --brand-glow: 76, 255, 0; }

#header.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr);
  grid-template-rows: 52px 54px;
  gap: 0 22px; /* no row gap: the global .topbar gap would add 26px of empty space between the rows */
  align-items: center;
  height: auto;
  min-height: var(--hdr-h);
  padding: 0 max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter)));
  /* two tones: a darker band for the utilities on top, the navigation row below */
  background: linear-gradient(180deg, rgba(8, 10, 6, 0.74) 0 52px, rgba(18, 22, 15, 0.8) 52px);
}
/* a green glow under the logo */
#header.topbar::before { content: none; }
#header.topbar::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; width: min(720px, 80%); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-glow), 0.6), transparent);
}

/* top row: utilities */
#header .hd-left { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 16px; min-width: 0; width: 100%; flex: none; }
#header .search { flex: 0 1 300px; min-width: 120px; max-width: 300px; }
#header .search .field { height: 38px; padding-top: 0; padding-bottom: 0; background: rgba(190, 210, 160, 0.06); border-color: var(--line); box-shadow: none; }
#header .search .field:focus { background: rgba(8, 10, 6, 0.6); }
#header .online { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; background: rgba(190, 210, 160, 0.06); box-shadow: inset 0 0 0 1px var(--line); }
#header .top-right { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; gap: 10px; }
#header .icon-btn { width: 38px; height: 38px; }
#header .icon-btn svg { width: 18px; height: 18px; }
#header .me-chip { padding: 3px 14px 3px 4px; height: 42px; }

/* bottom row: the links, split around the logo */
#header .nav { display: contents; }
#header .nav-l, #header .nav-r { display: flex; align-items: center; gap: 2px; min-width: 0; }
#header .nav-l { grid-column: 1; grid-row: 2; justify-self: end; }
#header .nav-r { grid-column: 3; grid-row: 2; justify-self: start; }
#header .nav a { padding: 7px 15px; font-size: 19px; border-radius: 999px; white-space: nowrap; }

/* ----------------------------------------------------------------- the emblem */
#header .brand {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; position: relative; display: block;
  width: 124px; height: var(--hdr-h); z-index: 3; border-radius: 50%; outline-offset: 4px; -webkit-tap-highlight-color: transparent;
}
/* a dark disc behind the logo makes it read as a button sitting in the bar */
#header .brand::before {
  content: ''; position: absolute; left: 6px; top: 12px; width: 112px; height: 112px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 42%, #1f2a1a, var(--bg) 72%);
  box-shadow: 0 0 0 1px var(--line-2), 0 14px 30px -6px rgba(0, 0, 0, 0.75), 0 0 34px rgba(var(--brand-glow), 0.12);
  transition: box-shadow 0.25s;
}
#header .brand:hover::before, #header .brand:focus-visible::before { box-shadow: 0 0 0 1.5px rgba(var(--brand-glow), 0.55), 0 14px 30px -6px rgba(0, 0, 0, 0.75), 0 0 40px rgba(var(--brand-glow), 0.28); }
#header .emblem {
  position: absolute; left: 0; top: 6px; width: 124px; height: 124px; display: block;
  filter: drop-shadow(0 0 8px rgba(var(--brand-glow), 0.4));
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#header .emblem img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
#header .brand:hover .emblem, #header .brand:focus-visible .emblem { transform: scale(1.07); }
#header .brand:active .emblem { transform: scale(0.96); }

/* the chip under the logo says what a click does right now */
#header .play-chip {
  position: absolute; left: 50%; top: 114px; translate: -50% 0; padding: 1px 14px; border-radius: 999px; white-space: nowrap;
  font: 800 14px/1.35 var(--font-display); letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
  background: linear-gradient(#ffc84f, #ffa80f); color: var(--amber-ink);
  box-shadow: 0 4px 14px -4px rgba(255, 180, 31, 0.8), 0 0 0 2px var(--bg);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
#header .brand:hover .play-chip { transform: translateY(-2px); }
#header .brand[aria-current='page'].is-play .play-chip { background: var(--bg); color: var(--amber); box-shadow: 0 0 0 1.5px var(--amber); }
/* searching: amber glow, the ring spins faster, the chip counts up */
#header .brand.is-searching .play-chip { background: var(--bg); color: var(--amber); box-shadow: 0 0 0 1.5px var(--amber), 0 0 18px rgba(255, 180, 31, 0.5); }
#header .brand.is-searching .emblem { filter: drop-shadow(0 0 12px rgba(255, 180, 31, 0.55)); }
/* a match or lobby is waiting for you */
#header .brand.is-match .play-chip, #header .brand.is-mix .play-chip { background: linear-gradient(#a8ef6e, #7ac24a); color: #0e1d05; box-shadow: 0 4px 16px -3px rgba(var(--brand-glow), 0.7), 0 0 0 2px var(--bg); }
/* restricted */
#header .brand.is-banned .play-chip { background: #3a1d17; color: #ff9f8c; box-shadow: 0 0 0 1.5px var(--bad); }
#header .brand.is-banned .emblem { filter: grayscale(0.8) drop-shadow(0 0 6px rgba(238, 90, 67, 0.4)); }
#header .brand.is-wait .play-chip, #header .brand.is-login .play-chip { background: var(--raise); color: var(--text); box-shadow: 0 0 0 1.5px var(--line-2); }

@media (prefers-reduced-motion: no-preference) {
  #header .emblem { animation: breathe 4.2s ease-in-out infinite; }
  #header .emblem .ring { animation: ring-turn 32s linear infinite; }
  #header .brand:hover .ring, #header .brand:focus-visible .ring { animation-duration: 4s; }
  /* the letters flicker like a charge building up, twice, then rests */
  #header .emblem .mark, #splash .emblem .mark { animation: bolt-charge 6s ease-in-out infinite; }
  #header .brand:hover .mark, #header .brand:focus-visible .mark { animation-duration: 1.8s; }
  #header .brand.is-searching .mark { animation-duration: 1.4s; }
  @keyframes bolt-charge {
    0%, 82%, 100% { filter: none; }
    85% { filter: brightness(1.6) drop-shadow(0 0 7px rgba(200, 255, 70, 0.95)); }
    88% { filter: brightness(1.05); }
    91% { filter: brightness(1.85) drop-shadow(0 0 12px rgba(200, 255, 70, 1)); }
    95% { filter: brightness(1.1); }
  }
  #header .brand.is-searching .ring { animation-duration: 2.4s; }
  #header .brand.is-searching .emblem { animation-name: breathe-amber; animation-duration: 1.6s; }
  #header .brand.is-match .play-chip { animation: nudge 1.6s ease-in-out infinite; }
  @keyframes ring-turn { to { transform: rotate(360deg); } }
  @keyframes breathe {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--brand-glow), 0.3)); }
    50% { filter: drop-shadow(0 0 15px rgba(var(--brand-glow), 0.65)); }
  }
  @keyframes breathe-amber {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 180, 31, 0.35)); }
    50% { filter: drop-shadow(0 0 18px rgba(255, 180, 31, 0.75)); }
  }
  @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}

/* ------------------------------------------------------------ narrower screens */
@media (max-width: 1240px) { #header .online { display: none; } #header .nav a { padding: 7px 11px; font-size: 18px; } }
@media (max-width: 880px) { #header .search { display: none; } }
@media (max-width: 940px) {
  /* A phone cannot flank the logo with links and still fit the icons: logo left, icons right, one scrolling row of links. */
  #header.topbar { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 56px auto; gap: 0 10px; padding: 0 var(--gutter); }
  #header.topbar::before { display: none; }
  #header .hd-left { display: none; }
  #header .brand { grid-column: 1; grid-row: 1; width: 70px; height: 56px; align-self: center; }
  #header .brand::before { display: none; }
  #header .emblem { left: 3px; top: 0; width: 60px; height: 60px; }
  #header .play-chip { top: 40px; font-size: 11px; padding: 0 8px; }
  #header .top-right { grid-column: 2; grid-row: 1; gap: 8px; }
  #header .nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin: 10px -8px 0; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  #header .nav::-webkit-scrollbar { display: none; }
  #header .nav-l, #header .nav-r { display: contents; }
}
@media (max-width: 420px) { #header .top-right .icon-btn { width: 34px; height: 34px; } }

.side { top: calc(var(--hdr-h) + 16px); }
.stale-banner { top: var(--hdr-h); }
/* Anchors land below the sticky header, not under it. */
main [id], main section[id] { scroll-margin-top: calc(var(--hdr-h) + 18px); }

/* -------------------------------------------------------------------- splash */
#splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(520px 420px at 50% 45%, rgba(var(--brand-glow), 0.12), transparent 70%), var(--bg);
  transition: opacity 0.4s ease, visibility 0.4s;
  animation: splash-out 0.4s 12s forwards; /* if the app never starts, do not trap the page behind the splash */
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
#splash .emblem { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 0 22px rgba(var(--brand-glow), 0.55)); }
#splash .emblem img { position: absolute; inset: 0; width: 100%; height: 100%; }
#splash b { font: 800 30px var(--font-display); letter-spacing: 0.16em; color: var(--text); }
#splash b i { font-style: normal; color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  #splash .ring { animation: ring-turn 5s linear infinite; }
  #splash .emblem { animation: breathe 2.4s ease-in-out infinite; }
}
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ------------------------------------------------------------ logo elsewhere */
.login-logo { display: block; width: 120px; height: 120px; margin: 4px auto 0; filter: drop-shadow(0 0 16px rgba(var(--brand-glow), 0.5)); }
.radar-logo { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%; opacity: 0.55; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(var(--brand-glow), 0.5)); }

/* -------------------------------------------------------------------- footer */
#footer { position: relative; z-index: 1; margin-top: 30px; border-top: 1px solid var(--line); background: rgba(8, 10, 6, 0.45); }
#footer .ft-in { max-width: 1240px; margin: 0 auto; padding: 26px var(--gutter) 34px; display: grid; grid-template-columns: auto 1fr; gap: 14px 40px; align-items: center; }
#footer .ft-brand { display: flex; align-items: center; gap: 12px; font: 800 24px var(--font-display); letter-spacing: 0.1em; }
#footer .ft-brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(var(--brand-glow), 0.4)); }
#footer .ft-brand i { font-style: normal; color: var(--amber); }
#footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; }
#footer nav a { color: var(--muted); font: 600 17px var(--font-display); letter-spacing: 0.03em; }
#footer nav a:hover { color: var(--text); }
#footer p { grid-column: 1 / -1; color: var(--dim); font-size: 13px; max-width: 90ch; }
@media (max-width: 700px) { #footer .ft-in { grid-template-columns: 1fr; } #footer nav { justify-content: flex-start; } }

.nf { max-width: 560px; margin: 40px auto; text-align: center; display: grid; gap: 14px; justify-items: center; padding: 30px 20px; }
.nf img { width: 140px; height: 140px; filter: drop-shadow(0 0 18px rgba(var(--brand-glow), 0.45)) grayscale(0.4); }
.nf h1 { font: 800 44px/1 var(--font-display); }

#header .brand.is-banned .emblem { animation: none; }