/* Logicalgamer theme for this install of Static (private: this file is git-ignored).
   Loaded after style.css on every page, so everything here overrides the public neon theme.
   Matches logicalgamer.com, its AMP panel, webmail and status page: deep-space navy with a faint
   starfield, rounded blueprint-grid panels, one sky-blue accent, the controller-button colours
   (red, yellow, green, purple) for states and the reply's stages, Fredoka + Atkinson Hyperlegible,
   and Glorp, Logicalgamer's alien, in the footer of every page and on the admin login card.
   To go back to the public theme, delete or rename this file. Edits are live on the next reload. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap");

:root {
  --bg: #0b1745;                    /* space */
  --surface: #122258;               /* raised panels */
  --surface2: #1b2e6e;              /* inputs-on-panels, tracks, chips */
  --rule: #2a4180;                  /* lines */
  --ink: #eef3ff;
  --ink2: #aebbe0;
  --ink3: #7f8cb8;
  --cyan: #56b4f0;                  /* the website's sky blue */
  --blue: #3f86f0;                  /* the planet */
  --violet: #7f8cd6;                /* controller purple */
  --magenta: #4cb96a;               /* controller green: Static speaking, on air */
  --yellow: #f2b705;                /* controller yellow */
  --red: #e0534a;                   /* controller red */
  --signal: var(--cyan);            /* links, focus, primary actions */
  --ring: linear-gradient(90deg, var(--cyan), var(--blue));
  --ok: #4cb96a;
  --warn: #f2b705;
  --bad: #e0534a;
  --s-hear: var(--cyan);            /* the reply's stages: sky -> purple -> yellow -> green */
  --s-look: var(--violet);
  --s-think: var(--yellow);
  --s-speak: var(--magenta);
  --grid: rgba(86, 180, 240, .06);  /* the blueprint grid on panels */
  --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --split: none;                    /* the old CRT colour split, retired */
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1100px 600px at 80% -200px, color-mix(in srgb, var(--blue) 22%, transparent), transparent 70%),
    radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* The public theme's CRT scanlines, swapped for the website's starfield */
/* A faint starfield behind everything, like the website (replaces the CRT scanlines). */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1px 1px at 23px 41px, rgba(238, 243, 255, .7), transparent) 0 0 / 347px 347px,
    radial-gradient(1.5px 1.5px at 211px 167px, rgba(238, 243, 255, .7), transparent) 0 0 / 347px 347px,
    radial-gradient(1px 1px at 131px 297px, rgba(159, 214, 250, .6), transparent) 0 0 / 347px 347px,
    radial-gradient(2px 2px at 457px 401px, rgba(242, 183, 5, .45), transparent) 0 0 / 523px 523px,
    radial-gradient(1.5px 1.5px at 97px 131px, rgba(238, 243, 255, .8), transparent) 0 0 / 523px 523px;
}

/* ---------------------------------------------------------------- the Logicalgamer look
   Shapes and details shared with logicalgamer.com, layered over the sections above: rounded panels
   on a blueprint grid, sentence-case Fredoka headings (the old condensed capitals are retired),
   controller dots on section titles, and the website's pill buttons with a pressable edge. */

/* Panels */
.card, .panel, details.cfg, .call, .ppl-item, .notes, .lines, .logs, dialog {
  border-radius: 16px;
}
.card, .panel, details.cfg, .call, dialog {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--surface);
  border: 2px solid var(--rule);
}
.card .trend svg, .hero .trend svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cyan) 45%, transparent)); }
.tally { border-radius: 16px; overflow: hidden; border: 2px solid var(--rule); }
.tally div { border-color: var(--rule); }
pre, code { border-radius: 8px; }
.logs, .notes, .lines, pre { background: #060d2b; }

/* Headings: Fredoka, sentence case */
section.block > h2, .section-title, .login h2, dialog h3, .h-stages h3 {
  font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; text-shadow: none;
}
.h-title, .h-doc h2, .legal-title, .big-none { font-weight: 600; letter-spacing: -.01em; text-shadow: none; }
.big { font-weight: 700; letter-spacing: -.02em; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 30%, transparent)); }
.metric, .tally b { font-weight: 600; letter-spacing: 0; }
/* Fredoka is much wider than the old condensed face, so the giant headlines come down a size */
.big { font-size: clamp(44px, 10vw, 104px); }
.big-none { font-size: clamp(30px, 5vw, 48px); }
.h-title { font-size: clamp(40px, 7vw, 76px); }
.legal-title { font-size: clamp(34px, 6vw, 60px); }

/* Controller dots before the board's section titles, like the website's console bars */
section.block > h2 {
  padding-left: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Ccircle cx='5' cy='5' r='4.5' fill='%23e0534a'/%3E%3Ccircle cx='19' cy='5' r='4.5' fill='%23f2b705'/%3E%3Ccircle cx='33' cy='5' r='4.5' fill='%234cb96a'/%3E%3C/svg%3E") 0 50% / 38px 10px no-repeat;
}

/* Buttons, pills and inputs */
button, .btn { border-radius: 10px; font-family: var(--sans); }
button.primary, .btn.primary {
  background: var(--cyan); border-color: var(--cyan); color: #060d2b; font-family: var(--display); font-weight: 600;
  border-radius: 999px; box-shadow: 0 3px 0 #2f7fbf;
}
button.primary:hover, .btn.primary:hover { background: #7cc6f5; border-color: #7cc6f5; box-shadow: 0 3px 0 #2f7fbf; }
button.primary:active, .btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f7fbf; }
button.solid-danger { border-radius: 999px; box-shadow: 0 3px 0 #9e2f28; }
.btn.discord { border-radius: 999px; }
.pill, .lamp, .ptag, .tags span, .off { border-radius: 999px; }
.lamp { padding: 4px 9px 3px; }
.lamp.on { background: var(--magenta); border-color: var(--magenta); color: #060d2b; box-shadow: 0 0 14px color-mix(in srgb, var(--magenta) 55%, transparent); }
input, select, textarea { border-radius: 10px; border-width: 2px; }
input[type="checkbox"] { border-width: 1px; }
:focus-visible { outline-color: var(--yellow); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.seg, .plat-tabs { border-radius: 999px; }
.dot.on { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

/* Unsaved settings are the one thing that should shout: yellow, like a warning */
.setting.changed .name { color: var(--yellow); }
.savebar {
  border-color: var(--yellow); border-radius: 14px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--yellow) 22%, transparent), 0 10px 30px rgba(0, 0, 0, .4);
}

/* Top strip and footer */
.strip { background: color-mix(in srgb, #060d2b 88%, transparent); }
.toast { border-radius: 12px; }
.h-foot-credit .heart { color: var(--red); }
.call { box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--cyan) 45%, transparent); }
/* The login card's old top accent line doesn't fit the rounder corners */
.login::before { display: none; }

/* ---------------------------------------------------------------- Glorp */
:root {
  --glorp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpolygon points='44,62 76,62 100,100 20,100' fill='rgba(159,214,250,0.35)'/%3E%3Cellipse cx='60' cy='56' rx='50' ry='12' fill='%237d8a99'/%3E%3Cellipse cx='60' cy='52' rx='50' ry='11' fill='%23c9d0d6'/%3E%3Cellipse cx='60' cy='50' rx='30' ry='4' fill='%23aeb7c0'/%3E%3Cline x1='56.5' y1='31.5' x2='54.5' y2='28' stroke='%234cb96a' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='63.5' y1='31.5' x2='65.5' y2='28' stroke='%234cb96a' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='54.5' cy='28' r='2.2' fill='%23f2b705'/%3E%3Ccircle cx='65.5' cy='28' r='2.2' fill='%23f2b705'/%3E%3Cpath d='M69 45 q6 -3 7 -9' fill='none' stroke='%234cb96a' stroke-width='4' stroke-linecap='round' transform='rotate(12 69 45)'/%3E%3Cellipse cx='60' cy='40' rx='10.5' ry='10' fill='%234cb96a'/%3E%3Cellipse cx='55.8' cy='39' rx='3' ry='3.8' fill='%230b1745'/%3E%3Cellipse cx='64.2' cy='39' rx='3' ry='3.8' fill='%230b1745'/%3E%3Ccircle cx='56.8' cy='37.7' r='1' fill='%23fff'/%3E%3Ccircle cx='65.2' cy='37.7' r='1' fill='%23fff'/%3E%3Cpath d='M57 44.5 q3 2.2 6 0' fill='none' stroke='%230b1745' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M34 50 a26 26 0 0 1 52 0 z' fill='rgba(86,180,240,0.28)' stroke='%239fd6fa' stroke-width='2'/%3E%3Cpath d='M42 40 a18 18 0 0 1 12 -11' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M30 50 a30 4 0 0 0 60 0 z' fill='%23aeb7c0'/%3E%3Ccircle cx='25' cy='55' r='3' fill='%23e0534a'/%3E%3Ccircle cx='47' cy='60' r='3' fill='%23f2b705'/%3E%3Ccircle cx='73' cy='60' r='3' fill='%234cb96a'/%3E%3Ccircle cx='95' cy='55' r='3' fill='%237f8cd6'/%3E%3C/svg%3E");
}
@keyframes glorp-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}
/* Beside the name in the footer, on every page */
.h-foot-name { display: inline-flex; align-items: center; gap: 10px; }
.h-foot-name::before {
  content: ""; width: 52px; height: 43px; flex: none;
  background: var(--glorp) center / contain no-repeat;
  animation: glorp-bob 3.2s ease-in-out infinite;
}
/* Parked on the top-right corner of the admin login card */
.login { margin-top: 40px; }
.login::after {
  content: ""; position: absolute; top: -54px; right: 18px; width: 120px; height: 100px; pointer-events: none;
  background: var(--glorp) center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(6, 13, 43, .7));
  animation: glorp-bob 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .h-foot-name::before, .login::after { animation: none; }
}

/* ---------------------------------------------------------------- planets
   A ringed purple planet and a small green moon peeking in from the screen edges, like the
   website. Wide screens only (1500 px+: the 1180 px column leaves room at the edges); they sit behind everything. */
@media (min-width: 1500px) {
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='p' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23c9cff7'/%3E%3Cstop offset='.55' stop-color='%237f8cd6'/%3E%3Cstop offset='1' stop-color='%234a549e'/%3E%3C/radialGradient%3E%3CclipPath id='f'%3E%3Crect x='0' y='100' width='200' height='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='100' cy='104' rx='96' ry='22' fill='none' stroke='%23b0b7bd' stroke-width='6' opacity='.9'/%3E%3Ccircle cx='100' cy='100' r='66' fill='url(%23p)'/%3E%3Cg fill='rgba(255,255,255,.14)' stroke='rgba(255,255,255,.28)' stroke-width='2'%3E%3Cellipse cx='78' cy='78' rx='14' ry='9'/%3E%3Cellipse cx='124' cy='122' rx='18' ry='11'/%3E%3Cellipse cx='120' cy='72' rx='7' ry='4.5'/%3E%3Cellipse cx='70' cy='128' rx='8' ry='5'/%3E%3C/g%3E%3Cellipse cx='100' cy='104' rx='96' ry='22' fill='none' stroke='%23b0b7bd' stroke-width='6' opacity='.9' clip-path='url(%23f)'/%3E%3C/svg%3E") calc(100% + 110px) 24% / 240px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23a8e6b9'/%3E%3Cstop offset='.55' stop-color='%234cb96a'/%3E%3Cstop offset='1' stop-color='%232c7a44'/%3E%3C/radialGradient%3E%3CclipPath id='f'%3E%3Crect x='0' y='100' width='200' height='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='66' fill='url(%23g)'/%3E%3Cg fill='rgba(255,255,255,.14)' stroke='rgba(255,255,255,.28)' stroke-width='2'%3E%3Cellipse cx='78' cy='78' rx='14' ry='9'/%3E%3Cellipse cx='124' cy='122' rx='18' ry='11'/%3E%3Cellipse cx='120' cy='72' rx='7' ry='4.5'/%3E%3Cellipse cx='70' cy='128' rx='8' ry='5'/%3E%3C/g%3E%3C/svg%3E") -46px 74% / 108px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='y' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23ffe39a'/%3E%3Cstop offset='.55' stop-color='%23f2b705'/%3E%3Cstop offset='1' stop-color='%23b07f00'/%3E%3C/radialGradient%3E%3CclipPath id='f'%3E%3Crect x='0' y='100' width='200' height='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='66' fill='url(%23y)'/%3E%3Cg fill='rgba(255,255,255,.14)' stroke='rgba(255,255,255,.28)' stroke-width='2'%3E%3Cellipse cx='78' cy='78' rx='14' ry='9'/%3E%3Cellipse cx='124' cy='122' rx='18' ry='11'/%3E%3Cellipse cx='120' cy='72' rx='7' ry='4.5'/%3E%3Cellipse cx='70' cy='128' rx='8' ry='5'/%3E%3C/g%3E%3C/svg%3E") calc(100% + 18px) 88% / 44px auto no-repeat;
  }
}

/* ---------------------------------------------------------------- more Glorp */
/* Help page: bobbing at the end of "Talk to Static" */
.h-title::after {
  content: ""; display: inline-block; width: .95em; height: .8em; margin-left: .18em; vertical-align: -.02em;
  background: var(--glorp) center / contain no-repeat;
  animation: glorp-bob 3.2s ease-in-out infinite;
}
/* Status board, "On air now" when nobody's in a call: Glorp scanning with his beam */
section.block > p.quiet { display: flex; align-items: center; gap: 14px; }
section.block > p.quiet::before {
  content: ""; width: 76px; height: 63px; flex: none;
  background: var(--glorp) center / contain no-repeat;
  animation: glorp-bob 3.2s ease-in-out infinite;
}
/* Terms and privacy: perched on the "short version" box */
.legal .h-doc .legal-summary { position: relative; padding-right: 120px; margin-top: 40px; }
.legal-summary::after {
  content: ""; position: absolute; top: -46px; right: 14px; width: 104px; height: 86px; pointer-events: none;
  background: var(--glorp) center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(6, 13, 43, .6));
  animation: glorp-bob 3.2s ease-in-out infinite;
}
@media (max-width: 560px) {
  .legal .h-doc .legal-summary { padding-right: 18px; margin-top: 84px; }
  .legal-summary::after { width: 84px; height: 70px; top: -76px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-title::after, section.block > p.quiet::before, .legal-summary::after { animation: none; }
}

/* ---------------------------------------------------------------- tidier top strip
   The name and on-air lamp lead; the live facts are quieter. "updated …" only shows when updates
   stop (it turns red), the Discord ping hides on narrower screens, and phones get two short rows. */
.strip-meta { gap: 4px 14px; font-size: 12px; color: var(--ink3); }
#updated { display: none; }
#updated.bad { display: inline; color: var(--bad); }
@media (max-width: 1200px) { #ping { display: none; } }
/* Phones, status page only (the one with the platform lights): two short rows */
@media (max-width: 600px) {
  .strip-in:has(#plats) { gap: 6px 12px; padding: 8px 16px; }
  .strip-in:has(#plats) img { width: 32px; height: 32px; }
  .strip-in:has(#plats) .who { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .strip-in:has(#plats) :is(.who-line, #uptime, #guilds) { display: none; }
  .strip-in:has(#plats) .strip-meta { order: 2; flex: 1 1 auto; }
  .strip-in:has(#plats) .help-nav { order: 3; margin-left: auto; gap: 14px; }
}

/* ---------------------------------------------------------------- Logicalgamer bar
   Added by local.js: a slim bar above every page with the Logicalgamer logo and links back to
   logicalgamer.com, plus a logicalgamer.com link in the footer. It scrolls away; the strip below
   stays sticky. */
.lg-bar { background: #060d2b; border-bottom: 1px solid var(--rule); position: relative; z-index: 11; }
.lg-bar-in { max-width: 1180px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 8px 22px; }
.lg-logo { display: block; flex: none; line-height: 0; }
.lg-logo img { height: 30px; width: auto; filter: drop-shadow(0 0 6px rgba(176, 183, 189, .3)); }
.lg-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font: 500 14px var(--display); }
.lg-links a { color: var(--ink2); }
.lg-links a:hover { color: var(--ink); text-decoration: none; }
.lg-links a.lg-here { color: var(--cyan); }
.lg-foot-home { color: var(--cyan) !important; }
@media (max-width: 480px) {
  .lg-bar-in { gap: 6px 14px; }
  .lg-links { gap: 4px 12px; font-size: 13px; }
  .lg-links a:first-child { display: none; }   /* the logo already goes home */
}