/*
 * Shared chrome for every squishes page: the dark palette and the panic
 * notice. Page-specific layout stays in the page itself.
 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600&family=Poppins:wght@300;600&family=Quicksand:wght@400;500;600;700&display=swap');

:root,
html[data-theme="mint"] {
  --bg: #121816;
  --bg-elev: #1b2320;
  --bg-sunken: #0b100e;
  --fg: #e6f2ec;
  /* Every palette below is checked by scripts/theme-check.js: --fg, --fg-dim,
     --fg-faint, --accent and --alert all clear 4.5:1 against --bg, and each ink
     clears 4.5:1 against the colour it sits on. The greys this replaced were
     4.3:1 and 2.1:1, so the game count was all but invisible. */
  --fg-dim: #9ab3a8;
  --fg-faint: #82998f;
  --accent: #7ee8c7;
  --accent-ink: #062a20;
  --accent-soft: rgba(126, 232, 199, 0.16);
  --accent-glow: rgba(126, 232, 199, 0.55);
  --alert: #ff7b8a;
  --button: #9d8bff;
  --button-hover: #b4a5ff;
  --button-ink: #17112e;
  --line: #243029;
  --shadow: rgba(0, 0, 0, 0.5);
  --sheen: rgba(255, 255, 255, 0.05);

  --font-ui: Quicksand, 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-link: 'Josefin Sans', Quicksand, system-ui, sans-serif;
  --font-note: Poppins, Quicksand, system-ui, sans-serif;
}

html[data-theme="bubblegum"] {
  --bg: #16131b;
  --bg-elev: #211c29;
  --bg-sunken: #0e0c12;
  --fg: #efe9f4;
  --fg-dim: #a99fb8;
  --fg-faint: #8b8199;
  --accent: #ff8fc7;
  --accent-ink: #34101f;
  --accent-soft: rgba(255, 143, 199, 0.16);
  --accent-glow: rgba(255, 143, 199, 0.55);
  --alert: #ff6b81;
  --button: #9d8bff;
  --button-hover: #b4a5ff;
  --button-ink: #17112e;
  --line: #2e2738;
  --shadow: rgba(0, 0, 0, 0.5);
  --sheen: rgba(255, 255, 255, 0.05);
}

html[data-theme="peach"] {
  --bg: #191417;
  --bg-elev: #241d21;
  --bg-sunken: #100c0e;
  --fg: #f3ebe8;
  --fg-dim: #b5a5a0;
  --fg-faint: #988a86;
  --accent: #ffa07a;
  --accent-ink: #331709;
  --accent-soft: rgba(255, 160, 122, 0.16);
  --accent-glow: rgba(255, 160, 122, 0.55);
  --alert: #ff6b6b;
  --button: #f2739d;
  --button-hover: #ff8cb0;
  --button-ink: #35101f;
  --line: #33292e;
  --shadow: rgba(0, 0, 0, 0.5);
  --sheen: rgba(255, 255, 255, 0.05);
}

html[data-theme="periwinkle"] {
  --bg: #13141c;
  --bg-elev: #1c1e29;
  --bg-sunken: #0c0d13;
  --fg: #e8eaf7;
  --fg-dim: #9aa1c0;
  --fg-faint: #828aaa;
  --accent: #a5b4ff;
  --accent-ink: #141a3a;
  --accent-soft: rgba(165, 180, 255, 0.16);
  --accent-glow: rgba(165, 180, 255, 0.55);
  --alert: #ff7b8a;
  --button: #6a58e8;
  --button-hover: #5a49d8;
  --button-ink: #ffffff;
  --line: #282b3a;
  --shadow: rgba(0, 0, 0, 0.5);
  --sheen: rgba(255, 255, 255, 0.05);
}


html[data-theme="classic"] {
  --bg: #141414;
  --bg-elev: #1c1c1c;
  --bg-sunken: #0d0d0d;
  --fg: #d4cfcf;
  --fg-dim: #8f8f8f;
  --fg-faint: #858585;
  --accent: #70e67e;
  --accent-ink: #0d2412;
  --accent-soft: rgba(112, 230, 126, 0.16);
  --accent-glow: rgba(112, 230, 126, 0.6);
  --alert: #fc3d3d;
  --button: #454eb5;
  --button-hover: #0a6fd0;
  --button-ink: #ffffff;
  --line: #262626;
  --shadow: rgba(0, 0, 0, 0.5);
  --sheen: rgba(255, 255, 255, 0.05);
}

html[data-theme="mint"][data-mode="light"] {
  --bg: #f7fdfb;
  --bg-elev: #ffffff;
  --bg-sunken: #eafaf5;
  --fg: #293b36;
  --fg-dim: #4d665f;
  --fg-faint: #5d7971;
  --accent: #158362;
  --accent-ink: #ffffff;
  --accent-soft: rgba(21, 131, 98, 0.12);
  --accent-glow: rgba(21, 131, 98, 0.38);
  --alert: #d83232;
  --button: #745ee0;
  --button-hover: #6249dc;
  --button-ink: #ffffff;
  --line: #d4f2e9;
  --shadow: rgba(40, 24, 34, 0.14);
  --sheen: rgba(90, 60, 80, 0.06);
}
html[data-theme="bubblegum"][data-mode="light"] {
  --bg: #fdf7fa;
  --bg-elev: #ffffff;
  --bg-sunken: #faeaf1;
  --fg: #453039;
  --fg-dim: #745764;
  --fg-faint: #886977;
  --accent: #d22875;
  --accent-ink: #ffffff;
  --accent-soft: rgba(210, 40, 117, 0.12);
  --accent-glow: rgba(210, 40, 117, 0.38);
  --alert: #d72d2d;
  --button: #725ce0;
  --button-hover: #6047dc;
  --button-ink: #ffffff;
  --line: #f2d4e1;
  --shadow: rgba(40, 24, 34, 0.14);
  --sheen: rgba(90, 60, 80, 0.06);
}
html[data-theme="peach"][data-mode="light"] {
  --bg: #fdf9f7;
  --bg-elev: #ffffff;
  --bg-sunken: #faefea;
  --fg: #41332d;
  --fg-dim: #6f5c54;
  --fg-faint: #826e64;
  --accent: #ba5323;
  --accent-ink: #ffffff;
  --accent-soft: rgba(186, 83, 35, 0.12);
  --accent-glow: rgba(186, 83, 35, 0.38);
  --alert: #d72f2f;
  --button: #735de0;
  --button-hover: #6048dc;
  --button-ink: #ffffff;
  --line: #f2ddd4;
  --shadow: rgba(40, 24, 34, 0.14);
  --sheen: rgba(90, 60, 80, 0.06);
}
html[data-theme="periwinkle"][data-mode="light"] {
  --bg: #f7f8fd;
  --bg-elev: #ffffff;
  --bg-sunken: #eaedfa;
  --fg: #313446;
  --fg-dim: #595e76;
  --fg-faint: #6b708a;
  --accent: #4f67dd;
  --accent-ink: #ffffff;
  --accent-soft: rgba(79, 103, 221, 0.12);
  --accent-glow: rgba(79, 103, 221, 0.38);
  --alert: #d72d2d;
  --button: #725ce0;
  --button-hover: #5f46dc;
  --button-ink: #ffffff;
  --line: #d4d9f2;
  --shadow: rgba(40, 24, 34, 0.14);
  --sheen: rgba(90, 60, 80, 0.06);
}
html[data-theme="classic"][data-mode="light"] {
  --bg: #f7fdf8;
  --bg-elev: #ffffff;
  --bg-sunken: #eafaec;
  --fg: #293c2c;
  --fg-dim: #4e6751;
  --fg-faint: #5e7a61;
  --accent: #168523;
  --accent-ink: #ffffff;
  --accent-soft: rgba(22, 133, 35, 0.12);
  --accent-glow: rgba(22, 133, 35, 0.38);
  --alert: #d83232;
  --button: #745ee0;
  --button-hover: #6249dc;
  --button-ink: #ffffff;
  --line: #d4f2d7;
  --shadow: rgba(40, 24, 34, 0.14);
  --sheen: rgba(90, 60, 80, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------- panic */

/*
 * Bottom-centred pill. Deliberately out of the way: it sits below the game
 * stage, never takes pointer events, and takes itself off the page after five
 * seconds.
 */
.squishes-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 2147483646;
  transform: translate(-50%, 12px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px var(--shadow);
  color: var(--fg);
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
}

.squishes-toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.squishes-flash {
  bottom: 72px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.squishes-toast kbd {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--accent);
}

/* On a phone the pill is narrower than the sentence, and an ellipsised panic
   notice tells the visitor nothing. Let it use two lines instead. */
@media (max-width: 480px) {
  .squishes-toast {
    white-space: normal;
    border-radius: 16px;
    text-overflow: clip;
  }
}

@media (prefers-reduced-motion: reduce) {
  .squishes-toast { transition: opacity 400ms ease; transform: translate(-50%, 0); }
}

.sq-server-btn {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 2147483640;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
  backdrop-filter: blur(8px);
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sq-server-btn:hover,
.sq-server-btn:focus-visible {
  opacity: 1;
  color: var(--fg);
  border-color: var(--fg-faint);
}

.sq-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

.sq-panel {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.sq-panel-card {
  width: min(440px, 100%);
  max-height: min(560px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: 0 20px 60px var(--shadow);
}

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

.sq-panel-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 19px;
  color: var(--fg);
}

.sq-panel-shut {
  border: 0;
  background: none;
  color: var(--fg-faint);
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.sq-panel-shut:hover { color: var(--fg); }

.sq-panel-blurb {
  margin: 8px 0 16px;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.sq-panel-note {
  margin: 0;
  padding: 14px 0;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 13px;
  color: var(--fg-faint);
  text-align: center;
}

.sq-server-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-server {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunken);
}

.sq-server.is-current { border-color: var(--accent); }
.sq-server.is-down { opacity: 0.5; }

.sq-server-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sq-server-name b {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sq-server-name span {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 12px;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sq-server-state {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 12px;
  color: var(--fg-dim);
  white-space: nowrap;
}

.sq-server.is-up .sq-server-state { color: var(--accent); }
.sq-server.is-down .sq-server-state { color: var(--alert); }

.sq-server-go {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease;
}

.sq-server-go:hover:not(:disabled) { background: var(--button-hover); }

.sq-server-go:disabled {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-faint);
  cursor: default;
}

.squishes-fs:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  background: #000;
}

.squishes-fs:fullscreen {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  background: #000;
}

.squishes-fs:fullscreen > iframe,
.squishes-fs:fullscreen > canvas,
.squishes-fs:fullscreen > div {
  width: 100% !important;
  height: 100% !important;
}

.sq-key-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sq-key {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.sq-key-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
}

.sq-key-cap {
  flex: none;
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--button-quiet, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

.sq-key-set {
  flex: none;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease;
}

.sq-key-set:hover:not(:disabled) { background: var(--button-hover); }

.sq-key-set:disabled {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-faint);
  cursor: default;
}

.sq-key-reset {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-faint);
  font-family: var(--font-ui);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.sq-key-reset:hover { color: var(--fg); }

.squishes-toast-more {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  opacity: 0.75;
  cursor: pointer;
}

.squishes-toast-more:hover { opacity: 1; }

.sq-admin-btn {
  left: auto;
  right: 14px;
  text-decoration: none;
}

.sq-dot-admin {
  background: var(--button-hover);
  box-shadow: 0 0 6px var(--button-hover);
}

.sq-theme-btn { left: 14px; }

.sq-theme-btn.is-stacked { bottom: 52px; }

.sq-dot-theme {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

.sq-theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.sq-theme-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunken);
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.sq-theme-pick:hover,
.sq-theme-pick:focus-visible {
  color: var(--fg);
  border-color: var(--fg-faint);
}

.sq-theme-pick[aria-pressed="true"] {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sq-theme-chip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.sq-mode-row {
  display: inline-flex;
  gap: 4px;
  margin: 2px 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-sunken);
}

.sq-mode-pick {
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.sq-mode-pick:hover { color: var(--fg); }

.sq-mode-pick[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.grecaptcha-badge { visibility: hidden; }

.sq-recaptcha-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-faint);
}

.sq-recaptcha-note a { color: var(--fg-dim); font-family: inherit; }

@media (max-width: 480px) {
  .sq-server-btn { font-size: 11px; padding: 6px 11px; }
  .sq-panel-card { padding: 16px; }
  .sq-key-name { font-size: 12px; }
}

/* ------------------------------------------------------------------ shared */

a { color: var(--fg); font-family: var(--font-link); }

/* The sheen the reference site sweeps across a link on hover. */
@keyframes squishes-shine {
  from { -webkit-mask-position: 150%; mask-position: 150%; }
  to { -webkit-mask-position: -50%; mask-position: -50%; }
}

.shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
  mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
  -webkit-mask-size: 200%;
  mask-size: 200%;
  animation: squishes-shine 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .shine:hover { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* Column flex so the footer can be pinned to the bottom of the viewport when
     a filter leaves only a row or two of cards, instead of hanging in the
     middle of an otherwise empty page. */
  body {
    min-height: 100vh;
    padding: 0 0 72px;
    display: flex;
    flex-direction: column;
  }

  /* A single soft wash of the accent behind the top of the page. Fixed, so it
     stays put as the grid scrolls under it and the page keeps one light source
     instead of a flat field of #141414. */
  body::before {
    content: "";
    position: fixed;
    inset: -20% 0 auto;
    height: 420px;
    background:
      radial-gradient(60% 100% at 18% 0%, rgba(112, 230, 126, 0.10), transparent 70%),
      radial-gradient(50% 100% at 88% 6%, rgba(69, 78, 181, 0.14), transparent 72%);
    pointer-events: none;
    z-index: 0;
  }

  .top, main { position: relative; z-index: 1; }

  /* The bar stays put while the grid scrolls, so search is always one key away. */
  .top {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 18px 24px 0;
    background: rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }

  .top-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px 28px;
    flex-wrap: wrap;
  }

  .brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  #title {
    margin: 0;
    color: var(--accent);
    font-size: clamp(23px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
  }

  /* Live count, sat next to the wordmark where it reads as part of the title
     rather than as a stray number at the bottom of the page. */
  #count {
    color: var(--fg-faint);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .search-wrap {
    position: relative;
    flex: 1 1 280px;
    max-width: 460px;
    margin-left: auto;
  }

  #search {
    width: 100%;
    padding: 11px 46px 11px 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-sunken);
    color: var(--fg);
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  #search:focus {
    border-color: var(--accent);
    background: #111;
    box-shadow: 0 0 0 3px rgba(112, 230, 126, 0.14);
  }

  #search::placeholder { color: #7d7d7d; }

  /* Chrome draws its own clear button; ours is the styled one below. */
  #search::-webkit-search-cancel-button { -webkit-appearance: none; }

  .search-wrap .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: #8f8f8f;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
  }

  /* Doubles as the keyboard hint and the clear button: shows "/" until there
     is something to clear, then turns into an x. */
  .search-key {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-content: center;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #1a1a1a;
    color: var(--fg-faint);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  .search-key:hover { color: var(--fg); border-color: #3a3a3a; }

  .status-row { max-width: 1440px; margin: 12px auto 0; }

  /* Catalog announcement. The old treatment was bare red body text, which read
     as an error — and the field is used for news ("X is live"), not outages, so
     red was actively the wrong signal. Neutral pill, live-green dot. */
  #status {
    margin: 0;
    display: flex;
    visibility: hidden;
    width: fit-content;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--fg-dim);
    font-family: var(--font-note);
    font-size: 13px;
    font-weight: 500;
  }

  #status.on { visibility: visible; }

  #status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(112, 230, 126, 0.45); }
    50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(112, 230, 126, 0); }
  }

  /* Genre chips. Horizontally scrollable on a phone rather than wrapping into
     four rows and pushing the grid off the screen. */
  .chips {
    max-width: 1440px;
    margin: 14px auto 0;
    display: flex;
    gap: 8px;
    min-height: 44px;
    padding-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fades the last chip out at the right edge so it's obvious the row keeps
       going when it doesn't fit. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }

  .chips::-webkit-scrollbar { display: none; }

  .chip {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--fg-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .chip:hover { color: var(--fg); border-color: #3a3a3a; }

  .chip[aria-pressed="true"] {
    background: rgba(112, 230, 126, 0.12);
    border-color: rgba(112, 230, 126, 0.45);
    color: var(--accent);
  }

  .tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
  }

  .sort-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sort-label {
    color: var(--fg-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .sort-field::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--fg-faint);
    border-bottom: 2px solid var(--fg-faint);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
  }

  .sort-select {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    padding: 9px 32px 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-sunken);
    color: var(--fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .sort-select:hover { border-color: #3a3a3a; }

  .sort-select:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(112, 230, 126, 0.14);
  }

  .switch-server {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--fg-dim);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .switch-server:hover,
  .switch-server:focus-visible {
    color: var(--fg);
    border-color: var(--accent);
    background: rgba(112, 230, 126, 0.08);
  }

  .switch-server b { color: var(--accent); font-weight: 700; }

  .switch-server .sq-dot { flex: 0 0 auto; }

  button.switch-server { cursor: pointer; line-height: 1.2; }

  .auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 152px;
    justify-content: flex-end;
  }

  .auth[hidden] { display: flex; visibility: hidden; }

  .auth-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--fg-dim);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .auth-btn:hover,
  .auth-btn:focus-visible {
    color: var(--fg);
    border-color: var(--accent);
    background: rgba(112, 230, 126, 0.08);
  }

  .auth-btn.is-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  .auth-btn.is-primary:hover,
  .auth-btn.is-primary:focus-visible {
    color: var(--accent-ink);
    background: var(--accent);
    filter: brightness(1.08);
  }

  .auth-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .auth-btn[hidden] { display: none; }

  .auth-who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--fg-dim);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  .auth-who[hidden] { display: none; }

  .auth-who b {
    color: var(--fg);
    font-weight: 700;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 24px 0;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }

  .intro {
    max-width: 74ch;
    margin: 0 0 26px;
  }

  .intro h1 {
    margin: 0 0 8px;
    color: var(--fg);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.25;
  }

  .intro p {
    margin: 0 0 10px;
    color: var(--fg-dim);
    font-family: var(--font-note);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
  }

  .intro p:last-child { margin-bottom: 0; }

  .intro a { color: var(--accent); }

  /* auto-fill keeps the cards a consistent size and just reflows the count,
     rather than stretching four cards across a wide monitor. */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 18px;
  }

  .cell {
    position: relative;
    display: flex;
    content-visibility: auto;
    contain-intrinsic-size: auto 172px;
  }

  .cell > .card { flex: 1 1 auto; min-width: 0; }

  .pin {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--fg-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.18s ease;
  }

  .pin svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: currentColor;
  }

  .cell:hover .pin,
  .pin:focus-visible { opacity: 1; }

  .pin:hover { color: var(--fg); border-color: #3a3a3a; }

  .pin[aria-pressed="true"] {
    opacity: 1;
    color: var(--accent);
    border-color: rgba(112, 230, 126, 0.45);
    background: rgba(10, 10, 10, 0.82);
  }

  .pin[aria-pressed="true"]:hover { color: var(--accent); border-color: var(--accent); }

  .pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .cell:hover .pin { transform: translateY(-4px); }

  .section-head {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }

  .rest-head { margin-top: 28px; }

  .section-head[hidden],
  .section[hidden] { display: none; }

  .card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--fg);
    font-family: var(--font-ui);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .cell:hover .card,
  .card:focus-visible {
    outline: none;
    transform: translateY(-4px);
    border-color: rgba(112, 230, 126, 0.55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(112, 230, 126, 0.2);
  }

  .card:focus-visible { box-shadow: 0 0 0 3px rgba(112, 230, 126, 0.35); }

  .card .thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-sunken);
    overflow: hidden;
  }

  /* Sits on top of the generated tile rather than replacing it, so a card is
     never an empty black box while its art comes down the proxy — the tile
     shows through until the image decodes, then fades over it. */
  .card .thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s ease;
  }

  .card .thumb img.ready { opacity: 1; }

  /* Harvested art is whatever the game happened to ship — square icons and
     letterbox banners both turn up. Cropping those to 16:10 decapitates them,
     so anything far off the card's ratio is fitted whole onto the tile's
     gradient instead, which reads as a deliberate logo treatment. */
  .card .thumb img.fit {
    object-fit: contain;
    padding: 13px;
  }

  /* Once real art is up, the monogram behind it would otherwise show through
     any transparency in the image. */
  .card .thumb.has-art .tile b { display: none; }

  .cell:hover .thumb img { transform: scale(1.06); }

  /* Keeps the art from running flush into the title strip. */
  .card .thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(12, 12, 12, 0.55), transparent);
    pointer-events: none;
  }

  /* Play affordance, revealed on hover so the card is obviously clickable. */
  .play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    background: rgba(10, 10, 10, 0.42);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }

  .cell:hover .play,
  .card:focus-visible .play { opacity: 1; }

  .play span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #0d0d0d;
    display: grid;
    place-content: center;
    font-size: 15px;
    padding-left: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  /* Games that ship no art of their own get a generated tile instead, so the
     grid never has a hole in it. Colour is derived from the slug, so a given
     game always looks the same. The dot grid and the corner light are what stop
     62 of these reading as 62 failed images. */
  .card .tile {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
  }

  .card .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.16), transparent 55%),
      radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px);
    background-size: 100% 100%, 11px 11px;
  }

  .card .tile b {
    position: relative;
    font-family: var(--font-link);
    font-size: 33px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }

  .card .name {
    padding: 11px 12px 13px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    /* Two lines then ellipsis, and always reserve both — otherwise a wrapping
       title makes its whole row taller than the ones around it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em + 24px);
  }

  .card .name:has(+ .plays) {
    padding-bottom: 2px;
    min-height: calc(2 * 1.35em + 13px);
  }

  .card .plays {
    padding: 0 12px 11px;
    font-family: var(--font-note);
    font-size: 11px;
    line-height: 1;
    text-align: center;
    color: var(--fg-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Placeholder cards while /api/games is in flight, so the page has its final
     shape before the data lands instead of jumping. */
  .skeleton {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    position: relative;
    overflow: hidden;
    font-size: 14px;
    /* Reserves the title strip, so the skeleton is the exact height of the card
       that replaces it and the grid doesn't jump when the data arrives. */
    padding-bottom: calc(2 * 1.35em + 24px);
  }

  .skeleton::before {
    content: "";
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--bg-sunken);
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 50%, transparent 80%);
    animation: sweep 1.3s linear infinite;
  }

  @keyframes sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  .note {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--fg-dim);
    font-size: 16px;
    padding: 60px 0;
  }

  .note b { display: block; color: var(--fg); font-size: 18px; margin-bottom: 6px; }

  .note button {
    margin-top: 14px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .note button:hover { border-color: var(--accent); }

  /* auto pushes the tail of the page down when the grid is short. */
  .actions {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 44px;
  }

  #comment-btn {
    background: var(--button);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 11px 22px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  #comment-btn:hover {
    background: var(--button-hover);
    box-shadow: 0 15px 24px rgba(66, 135, 245, 0.14);
  }

  .heads-up {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 11px 8px 11px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-elev);
    font-size: 13.5px;
    color: var(--fg-dim);
  }

  html[data-tour="done"] .heads-up { display: none; }

  .heads-up-lead {
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
  }

  .heads-up-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    flex: 1 1 auto;
  }

  .heads-up-links a {
    text-decoration: none;
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .heads-up-links a:hover { border-color: var(--accent); }

  .heads-up-close {
    background: none;
    border: 0;
    color: var(--fg-faint);
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
  }

  .heads-up-close:hover { color: var(--accent); }

  footer {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--fg-faint);
  }

  .legal {
    display: block;
    margin-top: 7px;
  }

  .legal a {
    color: var(--fg-faint);
    text-decoration: none;
  }

  .legal a:hover { color: var(--fg-dim); text-decoration: underline; }

  /* The relay pool, shown as what it actually is: a row of hostnames. */
  .nodes {
    margin: 10px 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    font-size: 11px;
  }

  .node {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--fg-faint);
    letter-spacing: 0.04em;
    transition: color 120ms ease, border-color 120ms ease, opacity 120ms ease;
  }

  .node.up { color: var(--fg); border-color: var(--accent); }
  .node.down { opacity: 0.35; text-decoration: line-through; }

  .node.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b0b0b;
    font-weight: 700;
  }

  dialog {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0c0c0c;
    color: var(--fg);
    padding: 24px;
    width: min(520px, calc(100vw - 40px));
    font-family: inherit;
  }

  dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(2px); }

  dialog h2 { margin: 0 0 14px; font-size: 20px; color: var(--accent); }

  dialog textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #000;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
    outline: none;
  }

  dialog textarea:focus { border-color: var(--accent); }

  .dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
  }

  .dialog-actions button {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
  }

  .dialog-actions button[value="send"] {
    background: var(--button);
    border-color: var(--button);
    color: #fff;
  }

  .wall {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

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

  .wall-head h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }

  .wall-retry {
    font: inherit;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg-dim);
    cursor: pointer;
  }

  .wall-retry:hover { border-color: var(--accent); color: var(--fg); }
  .wall-retry[hidden] { display: none; }

  .wall-state {
    margin: 0;
    font-size: 13px;
    color: var(--fg-faint);
  }

  .wall-state:empty { display: none; }

  .wall-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 252px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .wall-list:empty { display: none; }

  .wall-item {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
  }

  .wall-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .wall-when {
    display: block;
    font-size: 11px;
    color: var(--fg-faint);
    letter-spacing: 0.03em;
  }

  .wall-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
  }

  .wall-foot .wall-when { margin-right: auto; }

  .wall-act {
    font: inherit;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: none;
    color: var(--fg-faint);
    cursor: pointer;
  }

  .wall-act:hover:not(:disabled) { border-color: var(--line); color: var(--fg); }
  .wall-act:disabled { cursor: default; opacity: 0.6; }
  .wall-act.danger:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .wall-item.gone { opacity: 0.45; }

  .wall-item.pinned { border-color: var(--accent); }

  .wall-pin {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 1px 7px;
  }

  /* Between phone and desktop the base 172px minimum only fits three columns,
     which leaves the cards oversized and the page half empty. */
  @media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
  }

  @media (max-width: 620px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 13px; }
    .top { padding: 14px 16px 0; }
    main { padding: 18px 16px 0; }
    .search-wrap { margin-left: 0; max-width: none; }
    .card .name { font-size: 13px; padding: 9px 10px 11px; }
    .card .name:has(+ .plays) { padding-bottom: 2px; }
    .card .plays { font-size: 10px; padding: 0 10px 9px; }
    .chips { margin-top: 12px; padding-bottom: 12px; min-height: 42px; }
    .search-key { display: none; }
    .tools { margin-left: 0; width: 100%; justify-content: space-between; }
    .switch-server { font-size: 12px; padding: 7px 12px; }
    .sort-label { display: none; }
    .auth { min-width: 0; gap: 6px; }
    .auth-btn { font-size: 12px; padding: 7px 12px; }
  }

  @media (hover: none) {
    .pin { opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .card, .card .thumb img, .play, .pin { transition: none; }
    .cell:hover .card { transform: none; }
    .cell:hover .thumb img { transform: none; }
    .cell:hover .pin { transform: none; }
    .skeleton::after, #status::before { animation: none; }
  }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 60;
  background: var(--accent);
  color: #0b0b0b;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
}

.skip:focus { left: 12px; }

.brand-name {
  margin: 0;
  color: var(--accent);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
}

.panel {
  grid-column: 1 / -1;
  width: min(100%, 440px);
  margin: 4px auto 0;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
}

.panel p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--fg-dim);
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
}

.panel .go {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.panel .go:hover { background: var(--button-hover); }

.panel .seat {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  min-height: 78px;
}

.panel .seat > div {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}

.panel .said {
  margin: 14px auto 0;
  max-width: 46ch;
  color: var(--fg-dim);
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  min-height: 1.3em;
}

.panel .said.bad { color: var(--alert); }

.panel-aside {
  width: min(100%, 560px);
  margin: 0 auto 20px;
  padding: 18px 20px;
}

.panel-aside h2 { font-size: 16px; }

.panel-aside p { font-size: 14px; }

.notice {
  border: 1px solid rgba(252, 61, 61, 0.4);
  background: rgba(252, 61, 61, 0.09);
  border-radius: 12px;
  padding: 12px 15px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
}

.notice button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  text-decoration: underline;
  cursor: pointer;
}

.about {
  width: min(760px, 100%);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.about h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.about p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-faint);
}

#comment-check { margin-top: 14px; display: flex; justify-content: center; }

#comment-check:empty { display: none; }

#comment-note {
  margin: 12px 0 0;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 13px;
  color: var(--fg-dim);
  min-height: 1.3em;
}

.sq-recaptcha-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-faint);
}

.sq-recaptcha-note a { color: var(--fg-dim); font-family: inherit; }

.grecaptcha-badge { visibility: hidden; }

.wall {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

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

.wall-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.wall-retry {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-dim);
  cursor: pointer;
}

.wall-retry:hover { border-color: var(--accent); color: var(--fg); }
.wall-retry[hidden] { display: none; }

.wall-state {
  margin: 0;
  font-size: 13px;
  color: var(--fg-faint);
}

.wall-state:empty { display: none; }

.wall-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 252px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wall-list:empty { display: none; }

.wall-item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
}

.wall-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wall-when {
  display: block;
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.03em;
}

.wall-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.wall-foot .wall-when { margin-right: auto; }

.wall-act {
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--fg-faint);
  cursor: pointer;
}

.wall-act:hover:not(:disabled) { border-color: var(--line); color: var(--fg); }
.wall-act:disabled { cursor: default; opacity: 0.6; }
.wall-act.danger:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wall-item.gone { opacity: 0.45; }

.squishes-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 2147483646;
  transform: translate(-50%, 12px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--fg);
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
}

.squishes-toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.squishes-flash {
  bottom: 72px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.squishes-toast kbd {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
}

.sq-server-btn {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 2147483640;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.86);
  backdrop-filter: blur(8px);
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sq-server-btn:hover,
.sq-server-btn:focus-visible {
  opacity: 1;
  color: var(--fg);
  border-color: var(--fg-faint);
}

.sq-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(112, 230, 126, 0.6);
}

.sq-panel {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.sq-panel-card {
  width: min(440px, 100%);
  max-height: min(560px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

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

.sq-panel-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 19px;
  color: var(--fg);
}

.sq-panel-shut {
  border: 0;
  background: none;
  color: var(--fg-faint);
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.sq-panel-shut:hover { color: var(--fg); }

.sq-panel-blurb {
  margin: 8px 0 16px;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.sq-server-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-server {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunken);
}

.sq-server.is-current { border-color: var(--accent); }
.sq-server.is-down { opacity: 0.5; }

.sq-server-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sq-server-name b {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sq-server-name span {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 12px;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sq-server-state {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 12px;
  color: var(--fg-dim);
  white-space: nowrap;
}

.sq-server.is-up .sq-server-state { color: var(--accent); }
.sq-server.is-down .sq-server-state { color: var(--alert); }

.sq-server-go {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease;
}

.sq-server-go:hover:not(:disabled) { background: var(--button-hover); }

.sq-server-go:disabled {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-faint);
  cursor: default;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  background: var(--bg);
}

.stage.open { display: flex; }
.stage[hidden] { display: none; }
.stage.hidecursor, .stage.hidecursor * { cursor: none; }

.stagebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  flex: 0 0 auto;
}

.stagename {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.act {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 38px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.act:hover { border-color: #3a3a3a; }

.act.primary {
  color: #0b0b0b;
  background: var(--accent);
  border-color: var(--accent);
}

.framewrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
}

.framewrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: min(300px, calc(100% - 28px));
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.legend[hidden] { display: none; }
.legend ul { margin: 0; padding: 0; list-style: none; }

.legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--fg-dim);
}

kbd {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 1px 8px;
  min-width: 26px;
  text-align: center;
}

.legend .act {
  margin-top: 10px;
  width: 100%;
  font-size: 12px;
  min-height: 34px;
  padding: 6px 10px;
}

.squishes-fs:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

.squishes-fs:fullscreen {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000;
}

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 13px; }
  .top { padding: 14px 16px 0; }
  main { padding: 18px 16px 0; }
  .search-wrap { margin-left: 0; max-width: none; }
  .card .name { font-size: 13px; padding: 9px 10px 11px; }
  .chips { margin-top: 12px; padding-bottom: 12px; }
  .search-key { display: none; }
  .tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .switch-server { font-size: 12px; padding: 7px 12px; }
  .sort-label { display: none; }
  .legend { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .stagebar { gap: 6px; padding: 8px 10px; }
  .act { padding: 8px 10px; font-size: 12px; }
  .sq-server-btn { font-size: 11px; padding: 6px 11px; }
  .sq-panel-card { padding: 16px; }
}

@media (max-width: 480px) {
  .squishes-toast {
    white-space: normal;
    border-radius: 16px;
    text-overflow: clip;
  }
}

@media (hover: none) {
  .pin { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card .thumb img, .play, .pin { transition: none; }
  .cell:hover .card { transform: none; }
  .cell:hover .thumb img { transform: none; }
  .cell:hover .pin { transform: none; }
  .skeleton::after, #status::before { animation: none; }
  .squishes-toast { transition: opacity 400ms ease; transform: translate(-50%, 0); }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--fg-faint);
}

.crumbs li { display: flex; align-items: center; gap: 6px; }

.crumbs li + li::before { content: '/'; color: var(--line); }

.crumbs a { color: var(--fg-dim); text-decoration: none; }

.crumbs a:hover { color: var(--accent); }

.crumbs [aria-current="page"] { color: var(--fg); }

.lede {
  max-width: 70ch;
  margin: 0 0 22px;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.65;
}

.genres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.genres a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  transition: border-color 160ms ease, transform 160ms ease;
}

.genres a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.genres b {
  font-weight: 500;
  font-size: 12px;
  color: var(--fg-faint);
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 26px;
}

.hero-art {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  object-fit: cover;
}

.hero-body { flex: 1 1 320px; min-width: 0; }

.hero-body h1 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.page-title,
.hub-title {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.hub-title { text-transform: capitalize; }

.hero-body p {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.6;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.hero-tags a {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-dim);
  text-decoration: none;
  text-transform: capitalize;
}

.hero-tags a:hover { color: var(--fg); border-color: #3a3a3a; }

.big-play {
  display: inline-block;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease;
}

.big-play:hover { background: var(--button-hover); }

.prose {
  max-width: 70ch;
  margin: 0 0 28px;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.7;
}

.prose h1 {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.15;
}

.prose h2 {
  margin: 26px 0 10px;
  color: var(--fg);
  font-size: 18px;
}

.prose p { margin: 0 0 12px; }

.prose ul { margin: 0 0 12px; padding-left: 1.2rem; }

.prose li { margin: 0 0 6px; }

.prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg);
}

@media (max-width: 560px) {
  .hero-art { width: 92px; height: 92px; }
  .hero-body h1 { font-size: 23px; }
}