/* Public status page — standalone (the SPA css is not loaded here). */
:root {
  --bg: #0c0f14; --panel: #131820; --border: #232b36;
  --text: #e6ecf2; --dim: #8fa1b3; --faint: #5c6b7a;
  --green: #2ecc71; --grey: #5c6b7a; --yellow: #e2b93b; --blue: #4aa3df;
  --accent: #2ecc71; --radius: 12px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f5f8; --panel: #ffffff; --border: #d8e0e8;
    --text: #17222c; --dim: #46586a; --faint: #7a8a99;
  }
}

/* ---- theme presets (picked in Status page → Appearance; override the vars
   at body level so they beat the system light/dark preference) ---- */
body.theme-dark { --bg: #0c0f14; --panel: #131820; --border: #232b36; --text: #e6ecf2; --dim: #8fa1b3; --faint: #5c6b7a; --accent: #2ecc71; }
body.theme-light { --bg: #f2f5f8; --panel: #ffffff; --border: #d8e0e8; --text: #17222c; --dim: #46586a; --faint: #7a8a99; --accent: #1fa85b; }
body.theme-minecraft { --bg: #101609; --panel: #1a2312; --border: #2c3a1e; --text: #e8f0dd; --dim: #9db38a; --faint: #6d8259; --accent: #6cc644; --radius: 4px; }
body.theme-ark { --bg: #14100b; --panel: #1e1811; --border: #3a2f1e; --text: #f0e8d8; --dim: #b3a68a; --faint: #827259; --accent: #e09a35; }
body.theme-zombie { --bg: #120c0c; --panel: #1c1212; --border: #3a1e1e; --text: #f0dddd; --dim: #b38a8a; --faint: #825959; --accent: #e0483d; }
body.theme-conan { --bg: #131008; --panel: #1d1a10; --border: #3a331e; --text: #f0ead8; --dim: #b3aa8a; --faint: #7f7659; --accent: #d4af37; }
body.theme-ocean { --bg: #081018; --panel: #101b26; --border: #1e3040; --text: #ddeaf2; --dim: #8aa6b3; --faint: #597082; --accent: #29aae1; }
body.theme-synthwave { --bg: #120a1c; --panel: #1b1028; --border: #35204d; --text: #eaddf2; --dim: #a98ab3; --faint: #715982; --accent: #e05fd0; }

/* ---- custom background image ---- */
body.has-bg { background-size: cover; background-position: center; background-attachment: fixed; }
body.has-bg .server, body.has-bg .faq details, body.has-bg .announce, body.has-bg .head {
  background: var(--panel);
}
@supports (backdrop-filter: blur(4px)) {
  body.has-bg .server, body.has-bg .faq details, body.has-bg .announce {
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    backdrop-filter: blur(7px);
  }
}
body.has-bg .head { padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); }
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, "Segoe UI", sans-serif; min-height: 100vh; }
.wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px 40px; }
/* Layouts: 'wide' stretches across the page and lays servers out as a board;
   'left' hugs the left edge. Default stays centered. */
body.layout-wide .wrap { max-width: 1500px; }
body.layout-wide .servers { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
body.layout-left .wrap { margin: 0; max-width: 860px; }
.head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.logo { width: 46px; height: 46px; object-fit: contain; }
h1 { font-size: 24px; line-height: 1.2; }
.summary { color: var(--dim); margin-top: 2px; }
.servers { display: grid; gap: 10px; }
.cat-head { font-size: 15px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
#servers > .cat-head:first-child { margin-top: 4px; }
/* Over a background image the plain gray heading washes out — give it the same
   translucent blurred chip treatment the cards get. display:table shrink-wraps. */
body.has-bg .cat-head {
  display: table; color: #e6ecf2; background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.10);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Card arrangement "Centered": cards shrink to a fixed width and center as a
   group (partial rows included) instead of left-filling the grid. Headings follow. */
.servers.cards-center { display: flex; flex-wrap: wrap; justify-content: center; }
.servers.cards-center .server { flex: 0 1 360px; min-width: 280px; }
.cat-head.center-head { display: table; margin-left: auto; margin-right: auto; text-align: center; }
/* Countdown to a scheduled stop/restart/update on a server card. */
.pend { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #e0b13c; font-variant-numeric: tabular-nums; }
/* Quiet "next restart in 6h" line (informational, not an active countdown). */
.sched { margin-top: 4px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.server { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.server .top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---- game-themed flair (toggle in Status page → Appearance) ----
   Tinted edge + a big low-opacity watermark glyph; a few games get a texture.
   Content sits above the decoration; the watermark never captures clicks. */
.server.flair { position: relative; overflow: hidden; border-left: 3px solid var(--tint, var(--border)); }
.server.flair .top, .server.flair .join { position: relative; z-index: 1; }
.server .wm {
  position: absolute; right: 6px; bottom: -14px; font-size: 68px; line-height: 1;
  opacity: 0.09; pointer-events: none; user-select: none; transform: rotate(-10deg);
  filter: saturate(0.8);
}
.server .wm.wm-svg { opacity: 0.16; bottom: -18px; right: 2px; }
.server .wm.wm-svg svg { width: 84px; height: 84px; display: block; }
.server.flair::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, color-mix(in srgb, var(--tint, transparent) 7%, transparent), transparent 45%);
}
/* Textures (shared by the style catalog in statuspage.js — .tex-<name>) */
.server.tex-blocks::after { /* pixel blocks along the bottom */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; opacity: 0.35; pointer-events: none;
  background: repeating-linear-gradient(90deg, #6cc644 0 8px, #4f9e2f 8px 16px, #7d5a3a 16px 24px, #5c3f27 24px 32px);
  image-rendering: pixelated;
}
.server.tex-sand::after { /* dunes along the bottom */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; opacity: 0.3; pointer-events: none;
  background:
    radial-gradient(60px 16px at 15% 100%, #d4af37 0 60%, transparent 62%),
    radial-gradient(90px 20px at 55% 100%, #b8912c 0 60%, transparent 62%),
    radial-gradient(70px 14px at 90% 100%, #d4af37 0 60%, transparent 62%);
}
.server.tex-rust::after { /* corrosion speckles */
  content: ''; position: absolute; inset: 0; opacity: 0.16; pointer-events: none;
  background:
    radial-gradient(3px 3px at 12% 30%, var(--tint) 50%, transparent 52%),
    radial-gradient(2px 2px at 28% 75%, var(--tint) 50%, transparent 52%),
    radial-gradient(4px 4px at 55% 20%, var(--tint) 50%, transparent 52%),
    radial-gradient(2px 2px at 70% 60%, var(--tint) 50%, transparent 52%),
    radial-gradient(3px 3px at 88% 40%, var(--tint) 50%, transparent 52%),
    radial-gradient(2px 2px at 40% 50%, var(--tint) 50%, transparent 52%);
}
.server.tex-snow::after { /* falling flakes */
  content: ''; position: absolute; inset: 0; opacity: 0.28; pointer-events: none;
  background:
    radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 30% 55%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 48% 15%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 65% 70%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 82% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 93% 60%, #fff 50%, transparent 52%);
}
.server.tex-waves::after { /* rolling swell along the bottom */
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 20px; opacity: 0.3; pointer-events: none;
  background:
    radial-gradient(34px 14px at 10% 0%, transparent 58%, var(--tint) 60%, transparent 74%),
    radial-gradient(34px 14px at 35% 0%, transparent 58%, var(--tint) 60%, transparent 74%),
    radial-gradient(34px 14px at 60% 0%, transparent 58%, var(--tint) 60%, transparent 74%),
    radial-gradient(34px 14px at 85% 0%, transparent 58%, var(--tint) 60%, transparent 74%);
}
.server.tex-fire::after { /* ember glow rising from the bottom edge */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; opacity: 0.3; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--tint) 55%, transparent), transparent 80%),
    radial-gradient(2px 2px at 22% 40%, #ffb347 50%, transparent 52%),
    radial-gradient(2px 2px at 58% 25%, #ff7847 50%, transparent 52%),
    radial-gradient(2px 2px at 80% 50%, #ffb347 50%, transparent 52%);
}
.server.tex-stars::after { /* night sky speckle */
  content: ''; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 35% 65%, #cfd8ff 50%, transparent 52%),
    radial-gradient(2px 2px at 55% 20%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 55%, #cfd8ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 90% 35%, #fff 50%, transparent 52%);
}
.server.tex-vines::after { /* leafy fringe hanging from the top edge */
  content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 16px; opacity: 0.3; pointer-events: none;
  background:
    radial-gradient(16px 14px at 12% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(20px 18px at 34% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(14px 12px at 56% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(18px 16px at 78% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(14px 12px at 95% 0%, var(--tint) 0 58%, transparent 60%);
}
.server.tex-blood::after { /* drips from the top edge */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; opacity: 0.3; pointer-events: none;
  background:
    radial-gradient(5px 14px at 18% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(4px 9px at 42% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(6px 17px at 66% 0%, var(--tint) 0 58%, transparent 60%),
    radial-gradient(4px 8px at 88% 0%, var(--tint) 0 58%, transparent 60%);
}
.server.tex-spheres::after { /* scattered capture-sphere rings */
  content: ''; position: absolute; inset: 0; opacity: 0.2; pointer-events: none;
  background:
    radial-gradient(circle 9px at 20% 70%, transparent 6px, var(--tint) 6.5px 8px, transparent 8.5px),
    radial-gradient(circle 6px at 47% 30%, transparent 3.5px, var(--tint) 4px 5.5px, transparent 6px),
    radial-gradient(circle 11px at 76% 65%, transparent 8px, var(--tint) 8.5px 10px, transparent 10.5px);
}
.server.tex-circuit::after { /* faint trace grid */
  content: ''; position: absolute; inset: 0; opacity: 0.10; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, var(--tint) 17px 18px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--tint) 23px 24px);
}
.server.tex-paws::after { /* scattered paw pads */
  content: ''; position: absolute; inset: 0; opacity: 0.14; pointer-events: none;
  background:
    radial-gradient(4px 5px at 18% 65%, var(--tint) 55%, transparent 58%),
    radial-gradient(2px 2px at 15% 55%, var(--tint) 55%, transparent 58%),
    radial-gradient(2px 2px at 21% 55%, var(--tint) 55%, transparent 58%),
    radial-gradient(4px 5px at 62% 30%, var(--tint) 55%, transparent 58%),
    radial-gradient(2px 2px at 59% 21%, var(--tint) 55%, transparent 58%),
    radial-gradient(2px 2px at 65% 21%, var(--tint) 55%, transparent 58%),
    radial-gradient(4px 5px at 85% 72%, var(--tint) 55%, transparent 58%);
}
.server.tex-spots::after { /* soft egg speckle */
  content: ''; position: absolute; inset: 0; opacity: 0.16; pointer-events: none;
  background:
    radial-gradient(5px 5px at 22% 34%, var(--tint) 55%, transparent 58%),
    radial-gradient(7px 7px at 54% 62%, var(--tint) 55%, transparent 58%),
    radial-gradient(4px 4px at 78% 30%, var(--tint) 55%, transparent 58%),
    radial-gradient(6px 6px at 88% 70%, var(--tint) 55%, transparent 58%);
}
.left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.left .text { min-width: 0; }
.note { font-size: 12.5px; color: var(--dim); margin-top: 3px; overflow-wrap: anywhere; }
.note a { color: var(--blue); }
.join { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.addr, .connect { font: inherit; font-size: 13px; border-radius: 8px; padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.addr { font-family: ui-monospace, Consolas, monospace; background: transparent; border: 1px dashed var(--border); color: var(--dim); }
.addr:hover { color: var(--text); border-color: var(--dim); }
.connect { background: var(--accent); border: 1px solid var(--accent); color: #0b0f0a; font-weight: 700; }
.connect:hover { filter: brightness(1.08); }
.faq { margin-top: 26px; display: grid; gap: 8px; }
.faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; }
.faq summary { cursor: pointer; padding: 11px 16px; font-weight: 650; user-select: none; }
.faq .faq-body { padding: 0 16px 13px; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--grey); }
.dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18); }
.dot.starting, .dot.stopping, .dot.restarting { background: var(--yellow); }
.dot.degraded { background: var(--yellow); box-shadow: 0 0 0 4px rgba(226, 185, 59, 0.18); }
.dot.maintenance, .dot.updating, .dot.whitelist { background: var(--blue); }
.dot.new, .dot.wipe { background: var(--green); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18); }
.dot.event { background: #b06ce0; box-shadow: 0 0 0 4px rgba(176, 108, 224, 0.18); }
.dot.planned { background: #e08a3c; box-shadow: 0 0 0 4px rgba(224, 138, 60, 0.18); }
.dot.custom { background: var(--blue); box-shadow: 0 0 0 4px rgba(74, 163, 223, 0.18); }
/* Wrap long names to a second line instead of truncating (custom names help too). */
.name { font-weight: 650; overflow-wrap: anywhere; line-height: 1.25; }
.game { font-size: 12.5px; color: var(--faint); }
.right { display: flex; align-items: center; gap: 14px; flex: none; }
.badge { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey); }
.badge.online { color: var(--green); }
.badge.starting, .badge.stopping, .badge.restarting { color: var(--yellow); }
.badge.degraded { color: var(--yellow); }
.badge.maintenance, .badge.updating, .badge.whitelist { color: var(--blue); }
.badge.new, .badge.wipe { color: var(--green); }
.badge.event { color: #b06ce0; }
.badge.planned { color: #e08a3c; }
.badge.custom { color: var(--blue); }
.announce { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; white-space: pre-wrap; }
.meta { font-size: 12.5px; color: var(--dim); }
.none { color: var(--faint); text-align: center; padding: 40px 0; }
.updated { color: var(--faint); font-size: 12px; text-align: center; margin-top: 22px; }
@media (max-width: 520px) { .right .meta { display: none; } }