/* ============================================================
   Starship Simulator — Core Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&family=Barlow:wght@300;400;500;600&display=swap');

/* Eurostile Extended Black is reserved for big bold card headings (h1, h2)
   to match the in-game logo. UI body text uses Rajdhani — better scaling at
   small sizes. Regular Eurostile face is preserved for future use. */
@font-face {
  font-family: 'Eurostile';
  src: url('/assets/fonts/Eurostile.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile Ext';
  src: url('/assets/fonts/EurostileExtendedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Variables ---- */
:root {
  --bg:       #060a14;
  --bg2:      #0b0f1a;
  --surface:  #0f1726;
  --surface2: #121e30;
  --text:     #dbe7ff;
  --muted:    #8aa0c8;
  --line:     #1e2d4a;
  --accent:   #6ba8ff;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { color: var(--muted); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8f0ff;
}
/* Michroma is the free stand-in for Eurostile Bold Extended (the game's logo
   font). Used for big white display headings only — UI faces stay on Rajdhani. */
h1, h2 {
  font-family: 'Eurostile Ext', 'Michroma', 'Rajdhani', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.15;
}
h3, h4 {
  font-family: 'Rajdhani', system-ui, sans-serif;
}
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
.muted { color: var(--muted); }

/* ---- Layout ---- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* Ambient page background — static SVG fractal-noise tinted accent blue,
   gently drifted with a CSS transform. The noise itself is computed once;
   only compositing happens per frame, so this is nearly free at runtime. */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
}
.bg-noise svg {
  position: absolute;
  /* Oversized so translate up to ~10% never reveals the SVG edge. */
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  animation: bg-noise-drift 45s ease-in-out infinite;
  will-change: transform;
}
@keyframes bg-noise-drift {
  0%   { transform: translate3d(0,   0,   0); }
  33%  { transform: translate3d(-7%, -4%, 0); }
  66%  { transform: translate3d(-3%, -8%, 0); }
  100% { transform: translate3d(0,   0,   0); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-noise svg { animation: none; }
}

/* ---- Pixel-bug swarm — bug tracker pages only ----
   Each bug is a tiny SVG composed of <rect> "pixels" in two-tone accent blue.
   They drift across the viewport with simple translate animations. The swarm
   sits above the noise (z-index 0) but below content (which gets z-index 1
   via .topbar / .unos-banner / .page-content / footer through default
   stacking). Pointer events disabled so they can never block clicks. */
.bug-swarm {
  position: fixed;
  inset: 0;
  z-index: -1;        /* behind cards, alongside noise; noise is in DOM first so swarm paints on top of it */
  pointer-events: none;
  overflow: hidden;
}
.bug-swarm template { display: none; }
.bug {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 3px rgba(107,168,255,0.20));
}
.bug svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* Two beetle species, four instances, ~2x previous size. */
.bug--round  { width: 72px; height: 64px; }
.bug--scarab { width: 64px; height: 72px; }

.bug--1 {
  top: 14%;
  animation: bug-march-right 130s linear infinite;
}
.bug--2 {
  left: 8%;
  animation: bug-drift-down 110s linear infinite;
  animation-delay: -30s;
}
.bug--3 {
  top: 58%;
  animation: bug-march-left 145s linear infinite;
  animation-delay: -50s;
}
.bug--4 {
  bottom: 11%;
  animation: bug-march-right 165s linear infinite;
  animation-delay: -70s;
}

@keyframes bug-march-right {
  0%   { transform: translateX(-60px)              rotate(95deg); }
  50%  { transform: translateX(50vw)               rotate(85deg); }
  100% { transform: translateX(calc(100vw + 60px)) rotate(95deg); }
}
@keyframes bug-march-left {
  0%   { transform: translateX(calc(100vw + 60px)) rotate(-95deg); }
  50%  { transform: translateX(50vw)               rotate(-85deg); }
  100% { transform: translateX(-60px)              rotate(-95deg); }
}
@keyframes bug-drift-down {
  0%   { transform: translateY(-50px)              rotate(170deg); }
  100% { transform: translateY(calc(100vh + 50px)) rotate(190deg); }
}
@keyframes bug-scuttle {
  0%   { transform: translateX(-80px)              rotate(0deg); }
  50%  { transform: translateX(50vw)               rotate(2deg); }
  100% { transform: translateX(calc(100vw + 80px)) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bug-swarm { display: none; }
}

/* ============================================================
   TOP NAV
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 10, 20, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  /* Wide enough that a signed-in admin's bar (~1290px, the widest case)
     fits in full on a 1366px laptop; anything narrower collapses into the
     menu rather than squeezing. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* The logo has a fixed height, so as a shrinkable flex item it was the
   first thing squashed when the bar ran out of room. It never shrinks now
   — running out of room collapses the menu instead. */
.brand { margin-right: auto; line-height: 0; flex-shrink: 0; }
.brand img { height: 34px; width: auto; display: block; }

/* Everything right of the logo. A plain row on desktop; the dropdown
   panel when the bar is compact. */
/* flex-shrink: 0 matters: left shrinkable, the menu quietly squeezes its
   links to fit, the bar never reports overflow, and the collapse never
   fires — the squeeze just moves from the logo to the links. */
.nav-menu { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 38px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(107,168,255,0.35);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle:hover { background: rgba(107,168,255,0.08); border-color: var(--accent); }
/* Bars fold into an ×. */
.nav--open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Same gold as the Dashboard glow, so a pending alert still shows while
   the Dashboard link is tucked inside the closed menu. */
.nav-toggle--alert::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd24d;
  box-shadow: 0 0 8px rgba(255,210,77,0.8);
}

/* ---- Compact bar ----
   Applied by the script in header.php when the full bar overflows. The
   panel hangs from the sticky .topbar (its positioned ancestor), so it
   spans the full viewport width rather than the 1440px nav column. */
.nav--compact .nav-toggle { display: inline-flex; }
.nav--compact .nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 0.6rem 1.5rem 1.2rem;
  /* Opaque — even 97% let the big banner headings ghost through the links. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.nav--compact.nav--open .nav-menu { display: flex; }
.nav--compact .nav-links { flex-direction: column; align-items: stretch; }
.nav--compact .nav-links a { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
.nav--compact .nav-divider { width: auto; height: 1px; margin: 0.5rem 0; }
.nav--compact .nav-social { padding: 0.15rem 0.35rem; gap: 0.5rem; }

.nav-links { display: flex; align-items: center; }
.nav-links a {
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(107,168,255,0.07); text-decoration: none; }
.nav-links a.active {
  color: #e9f1ff;
  background: rgba(107,168,255,0.1);
  border-color: rgba(107,168,255,0.22);
}
/* Personal-notification glow — currently only fired by unseen ticket
   updates, but designed as a general-purpose flag (modmail etc. can
   OR into the same $dashboardAlert in header.php). Uses the same gold
   as the upvote chevrons and the "UPDATED" pill on the dashboard. */
.nav-links a.nav-alert,
.nav-links a.nav-alert.active {
  color: #ffd24d;
  border-color: rgba(255,210,77,0.35);
  text-shadow: 0 0 6px rgba(255,210,77,0.55);
  animation: nav-alert-pulse 2.4s ease-in-out infinite;
}
.nav-links a.nav-alert:hover {
  color: #ffe07a;
  background: rgba(255,210,77,0.08);
  border-color: rgba(255,210,77,0.55);
  text-shadow: 0 0 10px rgba(255,210,77,0.75);
}
@keyframes nav-alert-pulse {
  0%, 100% { text-shadow: 0 0 4px  rgba(255,210,77,0.40); }
  50%      { text-shadow: 0 0 10px rgba(255,210,77,0.75); }
}

.nav-divider { width: 1px; height: 22px; background: var(--line); margin: 0 0.6rem; flex-shrink: 0; }

.nav-social { display: flex; align-items: center; gap: 0.1rem; }
.nav-social a {
  color: var(--muted);
  padding: 0.45rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color 0.18s, background 0.18s;
  line-height: 0;
}
.nav-social a:hover { color: var(--accent); background: rgba(107,168,255,0.08); }
.nav-social svg { width: 17px; height: 17px; fill: currentColor; }

.btn-nav {
  color: var(--accent) !important;
  border: 1px solid rgba(107,168,255,0.35) !important;
  padding: 0.38rem 0.9rem !important;
}
.btn-nav:hover {
  background: rgba(107,168,255,0.1) !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #031226;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.7rem;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: #8dc0ff; transform: translateY(-1px); text-decoration: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(107,168,255,0.4);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--accent); background: rgba(107,168,255,0.08); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #04080f;
  overflow: hidden;
  margin-top: -64px; /* sit beneath the sticky 64px topbar */
}
.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Lock the iframe to viewport height; let width follow the 16:9 ratio.
   On ultrawide monitors this leaves blank space at the sides — preferred to
   over-cropping the top/bottom of the footage. */
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
  width: 177.78vh; /* 16:9 of viewport height */
  transform: translate(-50%, -50%);
  border: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(4,8,16,0.25) 0%, rgba(4,8,16,0.7) 80%),
    linear-gradient(180deg, rgba(4,8,16,0.55) 0%, rgba(4,8,16,0.35) 45%, rgba(6,10,20,0.98) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1.5rem;
  max-width: 720px;
}
.hero-logo { height: 96px; margin: 0 auto 1.75rem; }
.hero p { font-size: 1.1rem; margin: 0 auto 2rem; max-width: 560px; color: #cfddf5; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-chevron {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(107,168,255,0.35);
  color: rgba(219,231,255,0.85);
  background: rgba(6,10,20,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  animation: chevron-bounce 2.4s ease-in-out infinite;
}
.hero-chevron:hover { color: var(--accent); border-color: var(--accent); background: rgba(107,168,255,0.12); text-decoration: none; }
.hero-chevron svg { width: 22px; height: 22px; }
@keyframes chevron-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chevron { animation: none; transform: translateX(-50%); }
}

/* ============================================================
   FEATURE SECTIONS
   ============================================================ */
.feature-section {
  padding: 6rem 0;
}
.feature-section.alt { background: var(--bg2); }

/* Glowing thin divider between sections. Linear gradient on a 1px strip
   reads as a hairline that brightens toward the centre, matching the look
   of the line above the footer. */
.section-divider {
  position: relative;
}
.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { color: #fff; margin-bottom: 0.6rem; }
.section-header p { max-width: 580px; margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.feature-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 1;
}
.feature-card:hover { border-color: rgba(107,168,255,0.35); transform: translateY(-3px); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.feature-card-body { padding: 1.2rem 1.4rem 1.5rem; }
.feature-card h3 { color: #dceeff; margin-bottom: 0.4rem; font-size: 1.05rem; }
.feature-card p { font-size: 0.9rem; line-height: 1.55; }

/* ============================================================
   ROLES SECTION
   ============================================================ */
.roles-section {
  padding: 6rem 0;
  background: var(--bg);
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: role;
}
.role-card {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem 1.25rem 1.25rem;
  counter-increment: role;
  transition: border-color 0.2s, transform 0.2s;
}
.role-card::before {
  content: counter(role, decimal-leading-zero);
  display: block;
  font-family: 'Michroma', 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 0.55rem;
}
.role-card:hover { border-color: rgba(107,168,255,0.35); transform: translateY(-2px); }
.role-card h3 { color: #e8f0ff; font-size: 0.95rem; margin-bottom: 0.4rem; letter-spacing: 0.05em; }
.role-card p { font-size: 0.85rem; line-height: 1.5; }

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 0.6rem; }
.page-hero p { max-width: 580px; margin: 0 auto; }

.page-content { max-width: min(75vw, 1500px); margin: 0 auto; padding: 3rem 1.5rem 4rem; }
@media (max-width: 900px) { .page-content { max-width: 100%; } }

/* Banner-inner inherits .container's 1100px cap; widen it to match page-content
   so the heading and the panels below sit on the same vertical lines. */
.unos-banner .container,
.unos-banner__inner { max-width: min(75vw, 1500px); }
@media (max-width: 900px) {
  .unos-banner .container,
  .unos-banner__inner { max-width: 100%; }
}

/* Multi-column panel layout. Pages can wrap two unos-panels in a div with this
   class to place them side-by-side; collapses to a single column on narrow
   viewports. Inner panels' bottom margin is suppressed because the grid gap
   handles spacing. */
.unos-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.unos-cols-2 > .unos-panel {
  margin-bottom: 0;
  /* Make the inner body fill the row height so the dark background extends
     to match the tallest sibling instead of stopping at content. */
  display: flex;
  flex-direction: column;
}
.unos-cols-2 > .unos-panel > .unos-panel__body { flex: 1; }
@media (max-width: 900px) {
  .unos-cols-2 { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-category { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; font-weight: 700; margin: 2.5rem 0 0.6rem; }
.faq-category:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { color: #d4e4ff; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.975rem; letter-spacing: 0; text-transform: none; margin-bottom: 0.5rem; }
.faq-item p { font-size: 0.925rem; }
.faq-item a { color: var(--accent); }
.faq-item ul { margin: 0.5rem 0 0 1.2rem; }
.faq-item li { color: var(--muted); font-size: 0.925rem; margin-bottom: 0.25rem; }

/* ============================================================
   FUNDING
   ============================================================ */
.funding-intro { font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }
.stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.stat-box {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.stat-number { font-family: 'Rajdhani', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.05em; }
.funding-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.platform-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.platform-card h3 { color: #ddeeff; font-size: 1rem; margin: 0; }
.platform-card p { font-size: 0.875rem; margin: 0; }
.platform-card .btn-primary, .platform-card .btn-secondary { margin-top: 0.5rem; }
.content-block { margin-bottom: 2.5rem; }
.content-block h2 { margin-bottom: 0.75rem; font-size: 1.5rem; }
.content-block p { margin-bottom: 0.75rem; }
.content-block p:last-child { margin-bottom: 0; }

/* ============================================================
   PRESS
   ============================================================ */
.info-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.info-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
.info-table td:first-child { color: var(--muted); width: 150px; padding-right: 1rem; }
.info-table td:last-child { color: var(--text); }
.info-table tr:last-child td { border-bottom: none; }

.features-list { list-style: none; margin-top: 0.75rem; }
.features-list li { border-bottom: 1px solid var(--line); padding: 0.7rem 0 0.7rem 1.4rem; color: var(--muted); font-size: 0.925rem; position: relative; }
.features-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
.features-list li:last-child { border-bottom: none; }

.logo-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.logo-item {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.logo-item .logo-preview { padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 90px; }
.logo-item .logo-preview.dark-bg { background: #111; }
.logo-item .logo-preview.light-bg { background: #dde6f5; }
.logo-item img { max-height: 50px; max-width: 160px; object-fit: contain; }
.logo-item .logo-meta { padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.logo-item .logo-meta span { color: var(--muted); font-size: 0.8rem; }

.screenshots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.screenshot-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.screenshot-item:hover { border-color: rgba(107,168,255,0.3); }
.screenshot-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.screenshot-meta { padding: 0.7rem 0.9rem; display: flex; justify-content: space-between; align-items: center; }
.screenshot-meta span { color: var(--muted); font-size: 0.8rem; }

/* ============================================================
   FORMS (account / register)
   ============================================================ */
.form-wrap { max-width: 560px; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem 2rem 2.25rem;
}
.form-card h1 { margin-bottom: 0.4rem; font-size: 1.8rem; }
.form-card > .muted { display: block; margin-bottom: 1.75rem; font-size: 0.9rem; }
label { display: block; margin: 0.9rem 0 0.35rem; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #2a3d60;
  background: #080f1e;
  color: #e7efff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.18s;
}
/* Native select needs a custom chevron since we strip its OS chrome. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236ba8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
select option { background: #0c1426; color: #e7efff; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.input-wrap { position: relative; }
.input-wrap input { padding-right: 2.8rem; }
.pw-toggle {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 1rem; padding: 0.25rem 0.4rem; line-height: 1;
}
.pw-toggle:hover { color: var(--text); }
/* Beats .unos-form label (block, caps, accent) which sits later in the file. */
.unos-form label.remember-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
}
.form-submit { margin-top: 1.25rem; width: 100%; justify-content: center; font-size: 1rem; padding: 0.8rem; }
.form-footer { margin-top: 1.25rem; font-size: 0.875rem; }
.ok  { color: #7ef0a8; }
.bad { color: #ff9a9a; }
.alert { padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error { background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.25); color: #ffaaaa; }
.alert-success { background: rgba(100,220,140,0.1); border: 1px solid rgba(100,220,140,0.25); color: #8ef0b0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.dashboard-card h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.dashboard-list { list-style: none; }
.dashboard-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; display: flex; gap: 0.75rem; }
.dashboard-list li:last-child { border-bottom: none; }
.dashboard-list .dl-key { color: var(--muted); width: 100px; flex-shrink: 0; }
.dashboard-list .dl-val { color: var(--text); }
/* Telemetry rows: wider keys to fit "Total distance travelled" on one line,
   plus a dimmer numeric tone so the X/Y/Z and "ly" labels stand out. */
.dashboard-list--telemetry .dl-key { width: 200px; }
.dashboard-list .dl-num            { color: #a8bce0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--bg2);
  padding: 3.5rem 1.5rem 2rem;
  margin-top: auto;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand img { height: 28px; margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.85rem; line-height: 1.65; max-width: 280px; }
.footer-col h4 {
  color: #b4c8e8;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.footer-col a, .footer-col span {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 0.45rem;
  transition: color 0.18s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom p { color: var(--muted); font-size: 0.8rem; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a { color: var(--muted); line-height: 0; padding: 0.3rem; transition: color 0.18s; }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ============================================================
   UNOS COMPONENTS
   In-universe panel system used on the Dashboard. Concentric rounded boxes
   with pill-style headers, data rows, and status pills — language ported
   from the in-game UNOS without the skeuomorphic bevels.
   ============================================================ */

.unos-banner {
  position: relative;
  background: linear-gradient(180deg, #0e1a30 0%, #0a1426 100%);
  padding: 2.4rem 0 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.unos-banner::before,
.unos-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.unos-banner::before { top: 0; }
.unos-banner::after  { bottom: 0; }
.unos-banner__inner { position: relative; }
.unos-banner__stamp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.unos-banner h1 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  color: #fff;
}
.unos-banner__sub {
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.unos-banner__sub strong { color: #dbe7ff; font-weight: 600; }

/* ---- Panel ----
   In-game UNOS trick: outer card is the lighter slate at full size, inner
   dark "data box" sits on top with a few px of padding so the lighter colour
   shows through as a thin frame on all four sides, including under the
   header. Both layers share the same corner radius. */
.unos-panel {
  background: linear-gradient(180deg, #243551 0%, #19243d 100%);
  border: 1px solid rgba(107,168,255,0.32);
  border-radius: 14px;
  padding: 2px;
  margin-bottom: 1.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 24px rgba(0,0,0,0.28);
}
/* Header sits transparently on top of the lighter outer — no separate pill */
.unos-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.3rem 0.85rem;
  background: transparent;
}
.unos-panel__header h2 {
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: #e8f0ff;
  margin: 0;
  text-transform: uppercase;
}
.unos-panel__tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(207,225,255,0.7);
  text-transform: uppercase;
}
/* The "data box" — darker, rounded on all four sides, inset by the panel's
   own 4px padding. Top corners now read against the lighter outer. */
.unos-panel__body {
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
}
.unos-panel__body > p:first-child {
  margin-top: 0.1rem;
}
.unos-panel__body > * + p,
.unos-panel__body > * + form,
.unos-panel__body > * + .unos-list,
.unos-panel__body > * + .my-tickets { margin-top: 1rem; }

/* ---- Sub-panel — used for nested groups inside a panel ---- */
.unos-subpanel {
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.12);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-top: 1rem;
}
.unos-subpanel__title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.85;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* ---- Data rows: label · dotted leader · value ---- */
.unos-data { list-style: none; padding: 0; margin: 0; }
.unos-data__row {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(107,168,255,0.1);
  font-size: 0.92rem;
}
.unos-data__row:last-child { border-bottom: 0; }
.unos-data__key {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.unos-data__val {
  font-family: 'Rajdhani', sans-serif;
  color: #e0ecff;
  text-align: right;
  letter-spacing: 0.02em;
}
.unos-data__val--mono { font-variant-numeric: tabular-nums; }
/* Hairline between key/value to give the dossier feel */
.unos-data__sep {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0.05),
    rgba(107,168,255,0.18),
    rgba(107,168,255,0.05));
  align-self: center;
}

/* ---- Item rows: a wider stack used for devices, vessels, rewards ----
   No top margin on the list itself — body padding handles the gap when the
   list is the first child, and the .unos-panel__body sibling rule above
   adds 1rem when a description paragraph precedes it. */
.unos-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.unos-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  transition: background 0.15s, border-color 0.15s;
}
.unos-list__item:hover {
  background: #182748;
  border-color: rgba(107,168,255,0.45);
}
.unos-list__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #e8f0ff;
  text-transform: uppercase;
  min-width: 180px;
}
.unos-list__meta {
  flex: 1;
  min-width: 220px;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
}
.unos-list__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* League-table extras: leading rank chip + right-aligned metric value */
.unos-rank {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.85;
  min-width: 2.2rem;
  text-align: left;
}
.unos-list__metric {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: #e6f0ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.unos-list__metric small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
  font-weight: normal;
}

/* ---- Status pills ---- */
.unos-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Rajdhani caps sit high in the line box — extra top, trim bottom to optically centre */
  padding: 0.3rem 0.6rem 0.14rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
  white-space: nowrap;
}
.unos-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  /* Line-box centre sits below the cap midline in Rajdhani; lift the dot to match */
  transform: translateY(-1px);
}
.unos-status--ok    { color: #7ef0a8; }
.unos-status--warn  { color: #ffce6a; }
.unos-status--fault { color: #ff8a8a; }
.unos-status--idle  { color: #8aa0c8; }

/* ---- UNOS button — flatter, glowing, ditches the bevel ---- */
.unos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.4);
  background: rgba(107,168,255,0.06);
  color: #cfe1ff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.unos-btn:hover {
  border-color: var(--accent);
  background: rgba(107,168,255,0.14);
  color: #fff;
  text-decoration: none;
}
.unos-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #031226;
}
.unos-btn--primary:hover { background: #8dc0ff; color: #031226; }
.unos-btn--danger {
  border-color: rgba(255,138,138,0.45);
  color: #ffb8b8;
  background: rgba(255,138,138,0.06);
}
.unos-btn--danger:hover {
  border-color: #ff8a8a;
  color: #fff;
  background: rgba(255,138,138,0.16);
}

/* ---- UNOS form fields ---- */
.unos-form label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0.85rem 0 0.4rem;
}
.unos-form input[type=password],
.unos-form input[type=text],
.unos-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.18);
  background: #060d1c;
  color: #e7efff;
  font-size: 0.95rem;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
  transition: border-color 0.18s;
}
.unos-form textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.45;
}
.unos-form input:focus,
.unos-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .funding-platforms { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .hero { min-height: 520px; }
  .hero-logo { height: 64px; }
  .hero p { font-size: 1rem; }
  .screenshots-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .nav-links a { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
}
@media (max-width: 520px) {
  .roles-grid { grid-template-columns: 1fr; }
  .logo-grid { flex-direction: column; }
}

/* ---- Bug tracker list ---- */
.bug-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.bug-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  /* Soft left-edge tint that fades into the row body — colour comes from
     the per-severity --bug-row-tint variable below. Mirrors the in-game
     "Long Range Output" star-list flash. Status still drives the pill
     colour inside the row; the row's tint surfaces severity so a wall
     of tickets shows the worst offenders at a glance. */
  --bug-row-tint: transparent;
  background:
    linear-gradient(to right, var(--bug-row-tint), transparent 140px),
    #111d34;
  transition: background 0.15s, border-color 0.15s;
}
.bug-row:hover {
  background:
    linear-gradient(to right, var(--bug-row-tint), transparent 140px),
    #182748;
  border-color: rgba(107,168,255,0.45);
}
/* Tint palette matches the .bug-severity-- pill colours at the same
   alpha (0.22) the previous per-status tints used — keeps the visual
   weight consistent on the dark row background. */
.bug-row[data-severity="trivial"]  { --bug-row-tint: rgba(138, 160, 200, 0.22); }
.bug-row[data-severity="minor"]    { --bug-row-tint: rgba(214, 177, 106, 0.22); }
.bug-row[data-severity="major"]    { --bug-row-tint: rgba(232, 138,  61, 0.22); }
.bug-row[data-severity="critical"] { --bug-row-tint: rgba(227,  84,  61, 0.22); }
.bug-row[data-severity="blocker"]  { --bug-row-tint: rgba(255,  77, 106, 0.22); }
.bug-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
}
.bug-row__main:hover { text-decoration: none; }
.bug-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.bug-row__id {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.85;
}
.bug-row__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.92;
  text-transform: uppercase;
}
.bug-row:hover .bug-row__title { opacity: 1; }
.bug-row__meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.bug-row__sep { opacity: 0.55; }
.bug-row__metric {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: #e6f0ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: center;
}
.bug-row__metric small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
  font-weight: normal;
}

/* Status pill colours: red (New) → green (Resolved) */
.bug-status {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Same optical centring trick as .unos-status */
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.bug-status--new             { color: #ff6363; background: rgba(255, 99,  99, 0.10); }
.bug-status--confirmed       { color: #ff9a3d; background: rgba(255,154,  61, 0.10); }
.bug-status--assigned        { color: #ffd24d; background: rgba(255,210,  77, 0.10); }
.bug-status--cannotreproduce { color: #9aa6bd; background: rgba(154,166, 189, 0.10); }
.bug-status--resolved        { color: #5edc7a; background: rgba( 94,220, 122, 0.12); }
.bug-status--closed          { color: #6b7d99; background: rgba(107,125, 153, 0.10); }

/* Severity pills — warm-only ramp, slightly heavier fill so they sit alongside
   status pills as a distinct visual category rather than competing with them. */
.bug-severity {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.bug-severity--trivial  { color: #8aa0c8; background: rgba(138,160,200,0.14); }
.bug-severity--minor    { color: #d6b16a; background: rgba(214,177,106,0.14); }
.bug-severity--major    { color: #e88a3d; background: rgba(232,138, 61,0.16); }
.bug-severity--critical { color: #e3543d; background: rgba(227, 84, 61,0.18); }
.bug-severity--blocker  { color: #ff4d6a; background: rgba(255, 77,106,0.20); }

/* Role pills — identity badges shown on the dashboard, distinct hues so each
   capability reads at a glance. Same shape language as bug-status/severity. */
.role-pills { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; vertical-align: middle; }
.role-pill {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.role-pill--admin     { color: #ffb648; background: rgba(255,182, 72,0.14); }
.role-pill--moderator { color: #b58cff; background: rgba(181,140,255,0.14); }
.role-pill--developer { color: #6bd0ff; background: rgba(107,208,255,0.14); }
.role-pill--qa        { color: #5edc7a; background: rgba( 94,220,122,0.14); }
.role-pill--wiki      { color: #cfd8e8; background: rgba(207,216,232,0.10); }

/* Backer rank pill — uses same shape as role pills, single neutral colour. */
.backer-pill {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
  color: #f0c674;
  background: rgba(240,198,116,0.10);
}

/* ---- Admin user list ---- */
.admin-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.55rem; }
.admin-row {
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  transition: border-color 0.15s, background 0.15s;
}
.admin-row:hover { border-color: rgba(107,168,255,0.45); }
.admin-row > details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 1rem;
}
.admin-row > details > summary::-webkit-details-marker { display: none; }

.admin-row__summary {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(140px, 1.1fr) 2.2fr auto auto;
  align-items: center;
  gap: 0.9rem;
}
.admin-row__name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.admin-row__you {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-left: 0.4rem;
}
.admin-row__display {
  font-family: 'Barlow', sans-serif;
  color: #d6e1f5;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.admin-row__when {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-row__chev {
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.18s;
}
.admin-row > details[open] .admin-row__chev { transform: rotate(180deg); }

.admin-row__body {
  border-top: 1px solid rgba(107,168,255,0.12);
  padding: 1rem 1rem 1.1rem;
  background: #0c1628;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 700px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-row__summary { grid-template-columns: 1fr auto; }
  .admin-row__display, .admin-row__when, .admin-row__pills { grid-column: 1 / -1; }
}
.admin-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(107,168,255,0.14);
  border-radius: 8px;
  background: #060d1c;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  color: #d6e1f5;
}
.admin-flags__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.5rem;
}
.admin-flags label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  margin: 0;        /* override .unos-form label margin */
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: #d6e1f5;
  cursor: pointer;
}
.admin-row__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.admin-row__delete {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(107,168,255,0.14);
}

.unos-form select {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.18);
  background: #060d1c;
  color: #e7efff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
}
.admin-row .unos-form select { width: 100%; }

/* Bug ticket page — description body and comment timeline */
.bug-body {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #d6e1f5;
  white-space: normal;
}
.bug-comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.bug-comment {
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  padding: 0.7rem 1rem;
}
.bug-comment--internal {
  border-color: rgba(255,210,77,0.35);
  background: rgba(255,210,77,0.06);
}
.bug-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.bug-comment__author {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.bug-comment__tag {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd24d;
  border: 1px solid #ffd24d;
  border-radius: 999px;
  padding: 0.16rem 0.5rem 0.06rem;
  line-height: 1;
}
.bug-comment__body {
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #d6e1f5;
}

/* Bug ticket inline editor — staff toggle between read-only spans
   (.bug-edit__view) and form inputs (.bug-edit__input) by adding
   .bug-editing on <body>. The shared form lives in the page; banner
   title and details inputs reach it via the form="bug-edit-form" attr. */
.bug-edit__input          { display: none; }
.bug-edit__save-btn       { display: none; }
body.bug-editing .bug-edit__view  { display: none; }
body.bug-editing .bug-edit__input { display: revert; }
body.bug-editing #bug-edit-start  { display: none; }
body.bug-editing .bug-edit__save-btn { display: inline-flex; }

.bug-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
/* Upvote sits on the right; spacing absorbs all the slack between it and
   the staff edit buttons so it stays right-justified at any width. */
.bug-upvote-form {
  margin: 0 0 0 auto;
  display: flex;
}
.bug-upvote-btn--voted {
  background: rgba(107,168,255,0.18);
  border-color: var(--accent);
  color: #e7efff;
}
.bug-upvote-chevrons {
  width: 14px;
  height: 12px;
  display: block;
}

/* Delete button + confirm modal — destructive red, matched to the in-game
   "Confirm Delete?" popup (red 2px border, red uppercase text, transparent
   fill). The modal sits over the page with a dark backdrop. */
.bug-delete-btn {
  color: #ff3b3b;
  border-color: rgba(255,59,59,0.6);
}
.bug-delete-btn:hover {
  background: rgba(255,59,59,0.12);
  border-color: #ff3b3b;
  color: #ff3b3b;
}
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__dialog {
  background: #0a1322;
  border: 2px solid #ff3b3b;
  padding: 1.25rem 2rem 1.4rem;
  min-width: 280px;
  max-width: 90vw;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 0 24px rgba(255,59,59,0.18);
}
.confirm-modal__title {
  color: #ff3b3b;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.confirm-modal__buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}
.confirm-modal__btn {
  color: #ff3b3b;
  background: transparent;
  border: 2px solid #ff3b3b;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.confirm-modal__btn:hover {
  background: rgba(255,59,59,0.16);
}
.confirm-modal__btn:focus {
  outline: none;
  background: rgba(255,59,59,0.22);
}

/* Dashboard "My Tickets" widget — bug rows you reported or own, with a
   visible alert when a row has been touched since you last viewed it. */
/* Dashboard "My Tickets" reuses .bug-row from the Reports list. Extras
 * unique to this widget — gold alert state, "Hide Closed" toggle — ride
 * on top as modifiers. */
.my-tickets__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.my-tickets__toggle input { accent-color: var(--accent); cursor: pointer; }
.bug-list--hide-closed > li[data-status="closed"] { display: none; }
/* The .bug-row[data-severity] rules above are 0,2,0 specificity — match
   that here with .bug-row.bug-row--alert so the gold alert tint wins
   over the per-severity tint when both apply. */
.bug-row.bug-row--alert {
  border-color: #ffd24d;
  background: rgba(255,210,77,0.16);
}
.bug-row.bug-row--alert:hover { border-color: #ffd24d; background: rgba(255,210,77,0.24); }
.bug-row__alert {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd24d;
  border: 1px solid #ffd24d;
  border-radius: 999px;
  padding: 0.16rem 0.5rem 0.06rem;
  line-height: 1;
  font-weight: 600;
}
/* Small gold dot in the panel tag when there are unseen updates. */
.my-tickets__update-pip {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #ffd24d;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* Reports panel pagination — sits in .unos-panel__header on the right. */
.bug-pager {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bug-pager__count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(207,225,255,0.7);
  text-transform: uppercase;
}
.bug-pager__nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.bug-pager__step,
.bug-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 6px;
  border: 1px solid rgba(107,168,255,0.22);
  background: rgba(107,168,255,0.04);
  color: #cfe1ff;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bug-pager__step:hover,
.bug-pager__page:hover {
  border-color: var(--accent);
  background: rgba(107,168,255,0.14);
  color: #fff;
  text-decoration: none;
}
.bug-pager__page--current {
  background: var(--accent);
  border-color: var(--accent);
  color: #031226;
  cursor: default;
}
.bug-pager__page--current:hover {
  background: var(--accent);
  color: #031226;
}
.bug-pager__step--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bug-pager__step--disabled:hover {
  border-color: rgba(107,168,255,0.22);
  background: rgba(107,168,255,0.04);
}
.bug-pager__chevrons {
  width: 12px;
  height: 14px;
  display: block;
}

.bug-edit__title-input {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.4rem;
}
.bug-edit__desc-input {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #d6e1f5;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  resize: vertical;
}

/* Inline inputs/selects inside the Details rows. The val column is grid
   auto-sized so the input takes its intrinsic width; min-width keeps
   short fields like a status select from collapsing. */
.unos-data__val .bug-edit__input {
  min-width: 14rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(107,168,255,0.22);
  background: #060d1c;
  color: #e7efff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
}
.unos-data__val select.bug-edit__input { padding-right: 1.5rem; }
.bug-edit__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

@media (max-width: 640px) {
  .bug-row__head { gap: 0.5rem; }
  .bug-row__title { font-size: 0.9rem; }
  .bug-row__meta { font-size: 0.75rem; }
}

/* ============================================================
   PAGE CMS — in-situ page editing
   ------------------------------------------------------------
   Same view/input swap the bug ticket editor uses, generalised so any
   page can opt in: admins see the normal banner until they hit Edit
   Page, then .cms-editing on <body> hides every .cms-edit__view and
   reveals its matching .cms-edit__input. Inputs live inside the banner
   and reach the (empty) save form via the form="cms-page-form" attr,
   so the banner markup stays a single flow.
   ============================================================ */

.cms-edit__input,
.cms-edit__save,
.cms-edit__alert            { display: none; }
body.cms-editing .cms-edit__view  { display: none; }
body.cms-editing .cms-edit__input { display: flex; flex-direction: column; }
body.cms-editing .cms-edit__alert { display: block; }
body.cms-editing #cms-edit-start  { display: none; }
body.cms-editing .cms-edit__save  { display: inline-flex; }

#cms-page-form { margin: 0; }

/* Toolbar floats in the banner's top-right corner so it never displaces
   the page furniture it edits. */
.cms-toolbar {
  position: absolute;
  top: 0;
  /* Absolute offsets resolve against the container's padding box, so match
     .container's 1.5rem gutter to line the toolbar up with the content. */
  right: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.unos-banner--editable .unos-banner__stamp,
.unos-banner--editable h1 { padding-right: 12rem; }
body.cms-editing .unos-banner--editable .unos-banner__stamp,
body.cms-editing .unos-banner--editable h1 { padding-right: 0; }

/* Editing adds a stack of labelled fields — give the banner room. */
body.cms-editing .unos-banner--editable { padding-bottom: 2.6rem; }

.cms-field {
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  max-width: 100%;
}
.cms-field__label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.cms-field__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.85;
}

.cms-input {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #d6e1f5;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  resize: vertical;
}
.cms-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}
.cms-input--stamp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.cms-input--title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}

/* Secondary box for the strings that never appear on the page itself. */
.cms-seo {
  gap: 0;
  margin-top: 0.4rem;
  padding: 0.9rem 1rem 0.1rem;
  background: rgba(6,13,28,0.55);
  border: 1px solid rgba(107,168,255,0.14);
  border-radius: 10px;
}
.cms-seo__head {
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(207,225,255,0.7);
  margin-bottom: 0.7rem;
}

@media (max-width: 900px) {
  .cms-toolbar {
    position: static;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
  }
  .unos-banner--editable .unos-banner__stamp,
  .unos-banner--editable h1 { padding-right: 0; }
}

/* ---- Content blocks ----
   Two nested levels of editing. Page edit mode (body.cms-editing) reveals
   the add rows and each block's tool cluster; clicking a block's pencil
   adds .cms-block--editing to that one block, which swaps its title and
   tag for inputs. Everything else on the page stays calm. */

.cms-hidden-form { display: none; }

.cms-addrow { display: none; }
body.cms-editing .cms-addrow {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.cms-addbtn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(107,168,255,0.04);
  border: 1px dashed rgba(107,168,255,0.35);
  border-radius: 12px;
  cursor: pointer;
}
.cms-addbtn:hover {
  background: rgba(107,168,255,0.1);
  border-color: var(--accent);
  color: #e7efff;
}
.cms-addbtn__plus {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
}

/* Right-hand side of a block header: flavour tag plus the tool cluster. */
.cms-block__aside {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cms-block__input    { display: none; }
.cms-block__savebtn  { display: none; }
.cms-block--editing .cms-block__view     { display: none; }
.cms-block--editing .cms-block__input    { display: inline-block; }
.cms-block--editing .cms-block__savebtn  { display: inline-flex; }
.cms-block--editing label.cms-block__autosort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

.cms-block__title-input,
.cms-block__tag-input {
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  color: #e8f0ff;
}
.cms-block__title-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cms-block__tag-input {
  width: 11rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cms-block__title-input:focus,
.cms-block__tag-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

.cms-block__tools { display: none; }
body.cms-editing .cms-block__tools {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cms-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--accent);
  background: rgba(107,168,255,0.06);
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 6px;
  cursor: pointer;
}
.cms-tool:hover:not([disabled]) {
  background: rgba(107,168,255,0.16);
  border-color: var(--accent);
  color: #e7efff;
}
.cms-tool[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.cms-tool--danger { color: #ff9a9a; border-color: rgba(255,120,120,0.3); }
.cms-tool--danger:hover:not([disabled]) {
  background: rgba(255,120,120,0.14);
  border-color: #ff8a8a;
  color: #ffd0d0;
}
/* The block Save/Cancel pair sits in the same cluster as the icon tools,
   so shrink them to match rather than using full-size panel buttons. */
.cms-block__savebtn {
  padding: 0.25rem 0.7rem;
  font-size: 0.7rem;
}

.cms-block__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.75;
}

@media (max-width: 640px) {
  .cms-block__aside { flex-wrap: wrap; justify-content: flex-end; }
  .cms-block__tag-input { width: 100%; }
}

/* ---- Content elements ----
   A third editing level inside a block. Out of edit mode an element is
   nothing but its own content — no wrapper, no chrome — so a finished
   page looks exactly like the hand-written markup it replaces. In edit
   mode each element becomes a dashed card with a bar naming its type,
   and its pencil opens that one element's textarea. */

.cms-el__bar      { display: none; }
.cms-el__edit     { display: none; }
.cms-el__savebtn  { display: none; }

/* Vertical rhythm. Elements are separated by their hidden per-element
   <form> siblings in admin markup, so adjacency (+) would miss — the
   general sibling combinator matches every element after the first
   regardless of what sits between them. 1rem matches the panel body's
   own `* + p` rhythm, so migrated paragraphs land on the same grid as
   the hand-written ones they replace. */
.cms-el ~ .cms-el              { margin-top: 1rem; }
.cms-el__view > p + p          { margin-top: 1rem; }

body.cms-editing .cms-el {
  position: relative;
  border: 1px dashed rgba(107,168,255,0.22);
  border-radius: 8px;
  padding: 0.5rem 0.8rem 0.7rem;
}
body.cms-editing .cms-el ~ .cms-el { margin-top: 0.7rem; }
body.cms-editing .cms-el:hover { border-color: rgba(107,168,255,0.45); }
body.cms-editing .cms-el__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.cms-el__type {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
}
/* Card type picker in the element bar: reads like the plain type label,
   with a hairline border and the global chevron so it's clearly changeable. */
select.cms-el__retype {
  width: auto;
  opacity: 0.9;
  background-color: transparent;
  border: 1px solid rgba(107,168,255,0.25);
  border-radius: 6px;
  padding: 0.2rem 1.5rem 0.15rem 0.45rem;
  background-position: right 0.45rem center;
  background-size: 9px 6px;
}
select.cms-el__retype:hover { border-color: var(--accent); opacity: 1; }
.cms-el__tools {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cms-el__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.7;
}

.cms-el--editing .cms-el__view    { display: none; }
.cms-el--editing .cms-el__edit    { display: flex; flex-direction: column; gap: 0.7rem; }
.cms-el--editing .cms-el__savebtn { display: inline-flex; }
.cms-el--editing { border-color: var(--accent) !important; }

.cms-el__input {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 0.925rem;
  line-height: 1.55;
  color: #d6e1f5;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  resize: vertical;
}
.cms-el__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}
.cms-el__savebtn {
  padding: 0.25rem 0.7rem;
  font-size: 0.7rem;
}

/* Element add rows are quieter than the block ones — they live inside a
   panel body rather than between panels. */
.cms-addrow--el { margin: 0 0 0.7rem; }
.cms-addbtn--el {
  padding: 0.45rem 0.8rem;
  font-size: 0.7rem;
  border-radius: 8px;
  border-color: rgba(107,168,255,0.22);
}

/* Element type picker, paired with the add button. Sized to sit level
   with the dashed add strip rather than beside it. */
.cms-addrow__type {
  flex: 0 0 auto;
  /* Beat the global `select { width: 100% }` — as a non-shrinking flex item
     that basis would eat the whole row and squeeze the add button. */
  width: auto;
  /* Leave room for the chevron the global select rule paints as a
     background image; background-color (not the shorthand) so we recolour
     the field without wiping that image. */
  padding: 0.45rem 1.9rem 0.45rem 0.7rem;
  background-position: right 0.6rem center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  cursor: pointer;
}
.cms-addrow__type:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

/* Bullet list element. Matches the hand-written lists already on FAQ and
   Funding: indented by margin (the global reset zeroes ul padding, so the
   markers would otherwise clip), muted text one notch down from body copy. */
.cms-bullets {
  margin: 0 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cms-bullets li {
  color: var(--muted);
  font-size: 0.925rem;
}
.cms-bullets li::marker { color: rgba(107,168,255,0.55); }

/* Element editor fields. .cms-field is shared with the banner editor, where
   it is flexed by the .cms-edit__input rule; inside an element it needs its
   own stacking since it carries no such class. */
.cms-el__edit .cms-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0;
}
.cms-el__headinput {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 0.975rem;
  color: #d4e4ff;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
}
.cms-el__headinput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

/* Optional heading on a paragraph or bullet list — this is what makes those
   two types cover the FAQ's question formats. Deliberately matches
   .faq-item h3 rather than the global uppercase h3, so a migrated FAQ entry
   is indistinguishable from the hand-written one beside it. */
.cms-el-heading {
  color: #d4e4ff;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.5rem;
}

/* Divider element. The global reset strips the browser's default rule, so
   this is drawn explicitly on the panel's own hairline colour. */
.cms-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.4rem 0;
}
/* In edit mode the divider sits inside a dashed card that already reads as
   a separator, so pull the rule in to keep the card compact. */
body.cms-editing .cms-divider { margin: 0.5rem 0; }

/* ============================================================
   PAGE CMS — block layouts, cards and the roadmap
   ============================================================ */

/* Visitors now get the same .cms-el wrapper admins do, so paragraphs inside
   one element need their own rhythm rather than the panel body's `> * + p`. */
.cms-el p + p { margin-top: 1rem; }

/* ---- Unframed layouts (plain + shelf) ----
   Same header/body skeleton as a panel, minus the frame. The title is
   optional: an empty header disappears for visitors and only comes back in
   edit mode, so the block's tools stay reachable. */
.cms-section { margin-bottom: 2.25rem; }
.cms-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.cms-section__header h2 {
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: #e8f0ff;
  margin: 0;
  text-transform: uppercase;
}
.cms-section__header--empty { display: none; }
body.cms-editing .cms-section__header--empty { display: flex; }
/* Without a frame an unframed block has no visible edge, so edit mode
   traces one — otherwise you can't tell where one block ends. */
body.cms-editing .cms-section {
  outline: 1px dashed rgba(107,168,255,0.2);
  outline-offset: 10px;
  border-radius: 4px;
}
.cms-block__layout {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  margin-right: 0.15rem;
}

/* ---- Shelf ----
   Children flow into as many columns as the content width allows and fill
   from the top-left; auto-fill keeps empty tracks, so a short last row
   stays left-aligned instead of stretching. min() stops a 300px track
   overflowing a phone. */
.cms-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
/* Grid gap does the spacing here — cancel the stacked-element margin
   (including edit mode's tighter version). */
.cms-shelf > .cms-el,
body.cms-editing .cms-shelf > .cms-el ~ .cms-el { margin-top: 0; }
/* Each cell stretches to its row's height and the card fills it, so cards
   in a row line up evenly whatever their text length. */
.cms-shelf > .cms-el { display: flex; flex-direction: column; min-width: 0; }
.cms-shelf > .cms-el > .cms-el__view { flex: 1; display: flex; flex-direction: column; }
.cms-shelf .feature-card,
.cms-shelf .cms-rm-card,
.cms-shelf .cms-cta { flex: 1; }
/* A stretched call to action keeps its button and copy centred in the
   taller cell rather than floating at the top of it. */
.cms-shelf .cms-cta { justify-content: center; }
/* Add rows and an element whose editor is open span the full row — a
   textarea squeezed into a 300px card is no fun to type in. */
.cms-shelf > .cms-addrow,
.cms-shelf > .cms-el--editing { grid-column: 1 / -1; }
/* The stretch rule above out-specifies the generic "hide the view while
   editing" rule, which left a full-width card preview sitting on top of
   its own editor. */
.cms-shelf > .cms-el--editing > .cms-el__view { display: none; }
body.cms-editing .cms-shelf > .cms-addrow { margin: 0; }

/* ---- Roadmap palette ----
   Four stages, red > amber > yellow > green, shared by tasks, cards, the
   pop-up board and the overview strip. */
.cms-blocks {
  --rm-planned:     #ff6b6b;
  --rm-in_progress: #ffa94d;
  --rm-almost_done: #ffe066;
  --rm-complete:    #64dc8c;
}
.cms-rm-card--planned, .cms-rm-dialog--planned, .cms-rm-badge--planned,
.cms-rm-bar--planned, .cms-rm-col--planned, .cms-rm-stat--planned                 { --rm-c: var(--rm-planned); }
.cms-rm-card--in_progress, .cms-rm-dialog--in_progress, .cms-rm-badge--in_progress,
.cms-rm-bar--in_progress, .cms-rm-col--in_progress, .cms-rm-stat--in_progress     { --rm-c: var(--rm-in_progress); }
.cms-rm-card--almost_done, .cms-rm-dialog--almost_done, .cms-rm-badge--almost_done,
.cms-rm-bar--almost_done, .cms-rm-col--almost_done, .cms-rm-stat--almost_done     { --rm-c: var(--rm-almost_done); }
.cms-rm-card--complete, .cms-rm-dialog--complete, .cms-rm-badge--complete,
.cms-rm-bar--complete, .cms-rm-col--complete, .cms-rm-stat--complete              { --rm-c: var(--rm-complete); }

/* ---- Roadmap card ---- */
.cms-rm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Status glow: the stage colour rises from the bottom-left corner and
     fades into the card surface well before the middle. */
  background:
    linear-gradient(to top right,
      color-mix(in srgb, var(--rm-c, var(--rm-planned)) 26%, var(--surface)) 0%,
      var(--surface) 38%);
  border: 1px solid rgba(107,168,255,0.35);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.25s;
}
/* Hover brightens the glow. Gradients can't be animated directly, so a
   stronger copy sits on a layer behind the content and fades in. */
.cms-rm-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--rm-c, var(--rm-planned)) 30%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
}
.cms-rm-card > * { position: relative; z-index: 1; }
.cms-rm-card:hover,
.cms-rm-card:focus-visible {
  outline: none;
  box-shadow: 0 0 22px color-mix(in srgb, var(--rm-c, var(--rm-planned)) 22%, transparent);
}
.cms-rm-card:hover::before,
.cms-rm-card:focus-visible::before { opacity: 1; }
.cms-rm-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(107,168,255,0.45),
              0 0 22px color-mix(in srgb, var(--rm-c, var(--rm-planned)) 22%, transparent);
}
/* Every thumbnail is a fixed 4:3 frame the picture fills edge to edge:
   object-fit: cover scales it until both sides reach the frame, then
   crops the overflow evenly (top/bottom for portrait, sides for
   landscape), so there's never blank space. The image is positioned
   absolutely because an aspect-ratio box otherwise grows to fit an
   in-flow child, which is how taller pictures used to stretch theirs. */
.cms-rm-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Round the bottom corners too; overflow clips the cropped image to the curve. */
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, #15233c 0%, #0a1222 100%);
}
.cms-rm-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cms-rm-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rm-c);
  background: rgba(6,10,20,0.78);
  border: 1px solid var(--rm-c);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
/* Admin-written caption on the thumbnail ("In-game image"): neutral grey,
   so it never reads as a stage colour. */
.cms-rm-card__imglabel {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  max-width: calc(100% - 3.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfd8e8;
  background: rgba(6,10,20,0.72);
  border: 1px solid rgba(207,216,232,0.35);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.cms-rm-card__open {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.85rem;
  color: #dbe7ff;
  background: rgba(6,10,20,0.6);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
}
.cms-rm-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.45rem;
  padding: 1rem 1.2rem 1.1rem;
}
.cms-rm-card h3 { color: #dceeff; font-size: 1.05rem; margin: 0; }
/* The card is a teaser; the pop-up carries the full text. */
.cms-rm-card__text {
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cms-rm-card__text p { font-size: 0.9rem; }
.cms-rm-card__foot { margin-top: auto; padding-top: 0.45rem; }
.cms-rm-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Progress bar ---- */
.cms-rm-bar {
  height: 4px;
  background: rgba(107,168,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.cms-rm-bar > span {
  display: block;
  height: 100%;
  background: var(--rm-c, var(--accent));
  border-radius: inherit;
}
.cms-rm-bar--overall { height: 3px; margin-top: 1.2rem; }
.cms-rm-bar--overall > span {
  background-image: linear-gradient(90deg,
    var(--rm-planned) 0%, var(--rm-in_progress) 40%, var(--rm-almost_done) 75%, var(--rm-complete) 100%);
  background-repeat: no-repeat;
}

/* ---- Pop-up ---- */
.cms-rm-dialog {
  /* The global `* { margin: 0 }` reset strips the browser's own
     `margin: auto`, which is what centres a modal <dialog> — put it back. */
  margin: auto;
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  overflow: auto;
  color: var(--text);
  background: #0b1322;
  border: 1px solid rgba(107,168,255,0.3);
  border-left: 3px solid var(--rm-c);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cms-rm-dialog::backdrop { background: rgba(3,6,14,0.78); backdrop-filter: blur(3px); }
.cms-rm-dialog__inner { position: relative; }
.cms-rm-dialog__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dbe7ff;
  background: rgba(6,10,20,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  cursor: pointer;
}
.cms-rm-dialog__close:hover { border-color: var(--accent); color: #fff; }
.cms-rm-dialog__media img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cms-rm-dialog__content { padding: 1.4rem 1.6rem 1.7rem; }
.cms-rm-dialog .cms-rm-badge { display: inline-block; }
.cms-rm-dialog h2 { font-size: 1.45rem; margin: 0.75rem 0 0.7rem; color: #fff; }
.cms-rm-dialog__text p { font-size: 0.95rem; line-height: 1.65; }
.cms-rm-dialog__text p + p { margin-top: 0.8rem; }
.cms-rm-dialog__progress { margin: 1.2rem 0 1.4rem; }

/* Trello-style board: one column per task state that has tasks. */
.cms-rm-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.cms-rm-col {
  background: #060d1c;
  border: 1px solid var(--line);
  border-top: 2px solid var(--rm-c);
  border-radius: 10px;
  padding: 0.6rem 0.7rem 0.75rem;
}
.cms-rm-col header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rm-c);
}
.cms-rm-col header b { color: var(--muted); font-weight: 600; }
.cms-rm-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.cms-rm-col li {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #cfdcf5;
  background: var(--surface);
  border: 1px solid rgba(107,168,255,0.12);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}
.cms-rm-col li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cms-rm-col li em {
  flex: 0 0 auto;
  font-style: normal;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--rm-c);
}
.cms-rm-board__none { color: var(--muted); font-style: italic; font-size: 0.9rem; }

/* ---- Overview strip ---- */
.cms-rm-overview__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cms-rm-stat { padding: 0.15rem 1.2rem; border-left: 1px solid var(--line); }
.cms-rm-stat:first-child { padding-left: 0; border-left: 0; }
.cms-rm-stat b {
  display: block;
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  color: #fff;
}
.cms-rm-stat span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* A status dot ties each count to the matching card colour. */
.cms-rm-stat--planned span::before,
.cms-rm-stat--in_progress span::before,
.cms-rm-stat--almost_done span::before,
.cms-rm-stat--complete span::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--rm-c);
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .cms-rm-overview__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .cms-rm-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cms-rm-stat--progress { grid-column: 1 / -1; }
  .cms-rm-stat b { font-size: 1.5rem; }
  .cms-rm-dialog__content { padding: 1.2rem 1.1rem 1.4rem; }
}

/* ---- Card + task editor fields ---- */
.cms-el__imagerow { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.cms-el__thumb {
  width: 140px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cms-el__imagectl { display: flex; flex-direction: column; gap: 0.4rem; }
.cms-el__file { font-size: 0.85rem; color: var(--muted); }
.cms-el__link { width: min(420px, 100%); font-size: 0.85rem; padding: 0.35rem 0.6rem; }
.cms-el__pasterow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.cms-el__pastenote { font-size: 0.82rem; color: #7ef0a8; }
.cms-el__pastenote--bad { color: #ff8a8a; }
/* Beat the global `label` rule (block + vertical margins). */
label.cms-el__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.cms-rows { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.15rem 0 0.4rem; }
.cms-row { display: flex; align-items: center; gap: 0.35rem; }
.cms-task .cms-task__title {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border-radius: 6px;
}
/* Beat the global `label` rule here too. */
label.cms-task__pctwrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
}
.cms-task__pct {
  width: 4.2rem;
  padding: 0.4rem 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
  color: #e7efff;
  background: #080f1e;
  border: 1px solid #2a3d60;
  border-radius: 6px;
}
.cms-task__pct:focus { outline: none; border-color: var(--accent); }
/* Fixed width so the row doesn't jump as the label changes length. */
.cms-task__stage { flex: 0 0 auto; width: 7.2rem; text-align: center; white-space: nowrap; }
.cms-rows__add { align-self: flex-start; flex: 0 0 auto; }
@media (max-width: 640px) {
  .cms-row { flex-wrap: wrap; }
  .cms-task .cms-task__title { flex-basis: 100%; }
}

/* ---- Call to action ----
   The site's conversion moment: one big primary-blue button with a line of
   supporting copy beneath, centred in a softly lit panel. Blue rather than
   gold on purpose — gold here means "something's new for you". Sized off
   its own width via a container query, so it adapts the same way in a
   full-width panel, a 300px shelf cell or on a phone. */
.cms-cta {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2rem 1.5rem 1.8rem;
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(107,168,255,0.18) 0%, rgba(107,168,255,0.04) 55%, transparent 80%),
    #0b1424;
  border: 1px solid rgba(107,168,255,0.35);
  border-radius: 14px;
  overflow: hidden;
}
/* Accent hairline across the top, echoing the banner's edge lines. */
.cms-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,168,255,0) 0%, rgba(107,168,255,0.8) 50%, rgba(107,168,255,0) 100%);
}
.cms-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 2rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #031226;
  background: var(--accent);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(107,168,255,0.6), 0 10px 30px rgba(107,168,255,0.32);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cms-cta__btn:hover {
  background: #8dc0ff;
  color: #031226;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(141,192,255,0.8), 0 14px 38px rgba(107,168,255,0.45);
}
.cms-cta__btn:focus-visible { outline: 2px solid #e8f0ff; outline-offset: 3px; }
.cms-cta__arrow { font-size: 1.15rem; line-height: 1; transition: transform 0.15s; }
.cms-cta__btn:hover .cms-cta__arrow { transform: translateX(3px); }
.cms-cta__text { max-width: 46ch; }
.cms-cta__text p { color: #b9c9e6; font-size: 0.95rem; line-height: 1.6; }
.cms-cta__text p + p { margin-top: 0.6rem; }
@container (max-width: 420px) {
  .cms-cta__btn { width: 100%; padding: 0.9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cms-cta__btn, .cms-cta__arrow { transition: none; }
  .cms-cta__btn:hover, .cms-cta__btn:hover .cms-cta__arrow { transform: none; }
}

/* After an edit the page reloads scrolled to the block or element just
   touched; leave room so it lands below the sticky 64px top bar rather
   than underneath it. */
.cms-block, .cms-el { scroll-margin-top: 84px; }

/* ---- List styles ----
   Bullets is the original look. Numbers keeps the same indent with accent
   numerals. Arrows reproduces the Press page's Headline Features: an
   accent arrow per item, hairlines between rows, no indent. */
.cms-bullets--numbers { list-style: decimal; }
.cms-bullets--numbers li::marker {
  color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}
.cms-bullets--arrows {
  list-style: none;
  margin-left: 0;
  gap: 0;
}
.cms-bullets--arrows li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.cms-bullets--arrows li:last-child { border-bottom: none; }
.cms-bullets--arrows li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ---- Spec list ----
   Title / value rows split by the panel hairline — the Press factsheet,
   and equally a system-requirements table. Sized off its own width so it
   stacks the title above its value in a narrow shelf cell or on a phone. */
.cms-spec { container-type: inline-size; margin: 0; }
.cms-spec__row {
  display: grid;
  /* 134px + the 1rem gap puts values exactly where the Press factsheet
     table puts them (its 150px label cell includes its own padding). */
  grid-template-columns: minmax(6rem, 134px) 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.cms-spec__row:last-child { border-bottom: none; }
.cms-spec dt { color: var(--muted); font-size: 0.9rem; }
.cms-spec dd { margin: 0; color: var(--text); font-size: 0.9rem; }
@container (max-width: 300px) {
  .cms-spec__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .cms-spec dt { font-size: 0.8rem; }
}

/* ---- List / spec editor fields ---- */
.cms-el__style { align-self: flex-start; }
.cms-spec-row input {
  min-width: 0;
  width: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border-radius: 6px;
}
.cms-spec-row .cms-spec-row__label { flex: 0 0 13rem; }
.cms-spec-row .cms-spec-row__value { flex: 1; }
@media (max-width: 640px) {
  .cms-spec-row .cms-spec-row__label,
  .cms-spec-row .cms-spec-row__value { flex-basis: 100%; }
}

/* ---- Download + gallery cards ----
   Press-kit cards: a 16:9 thumbnail (double the height of the old logo
   previews, and an exact fit for a 1080p screenshot), then an info line
   with an optional Download button. The thumbnail is a real <button>, so
   it's keyboard-reachable and opens the lightbox natively. */
.cms-pic {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cms-pic:hover { border-color: rgba(107,168,255,0.3); }
.cms-pic__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #0a0f1b;
  cursor: zoom-in;
}
.cms-pic__thumb--light { background: #dde6f5; }
/* Absolutely positioned so the image never sizes its frame: an
   aspect-ratio box is allowed to grow to fit its content, and a tall image
   (the near-square UNSF logo) was pushing the 16:9 frame open and
   unevening its whole row. */
.cms-pic__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Logos and other non-16:9 images sit inset rather than touching the frame. */
.cms-pic__thumb--inset img { padding: 1.25rem 1.5rem; }
.cms-pic__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cms-pic__zoom {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.85rem;
  color: #dbe7ff;
  background: rgba(6,10,20,0.6);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.cms-pic__thumb:hover .cms-pic__zoom,
.cms-pic__thumb:focus-visible .cms-pic__zoom { opacity: 1; }
.cms-pic__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--line);
}
.cms-pic__info { min-width: 0; color: var(--muted); font-size: 0.8rem; }
.cms-pic__info b { color: #dbe7ff; font-weight: 600; }
.cms-pic__btn { flex-shrink: 0; padding: 0.3rem 0.75rem; font-size: 0.7rem; }

/* Cards fill their shelf cell so a row lines up — the new cards too. */
.cms-shelf .cms-pic { flex: 1; }

/* ---- Lightbox ----
   The large view: the picture as big as the screen allows, with the info
   line and Download button underneath. Shares the dialog script and the
   Close button with the roadmap pop-up. */
.cms-lightbox {
  margin: auto;            /* the global margin reset strips the centring */
  padding: 0;
  max-width: min(1600px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  color: var(--text);
  background: #05080f;
  border: 1px solid rgba(107,168,255,0.3);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cms-lightbox::backdrop { background: rgba(3,6,14,0.85); backdrop-filter: blur(3px); }
.cms-lightbox__inner { position: relative; display: flex; flex-direction: column; }
.cms-lightbox__stage { display: flex; justify-content: center; background: #05080f; }
.cms-lightbox--light .cms-lightbox__stage { background: #dde6f5; }
.cms-lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 2rem - 3.4rem);   /* leave room for the info bar */
  object-fit: contain;
}
.cms-lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}
.cms-lightbox__bar b { color: #dbe7ff; font-weight: 600; }

/* Founder pill sits with the other role pills (dashboard, admin, forum posts). */
.role-pill--founder   { color: #7ef0d0; background: rgba(126,240,208,0.12); }

/* ============================================================
   FORUMS
   Categories → Boards → Topics → Posts. Blue marks Fleetyard staff
   (the forum's "blue post"); gold marks what's new for the viewer.
   ============================================================ */
.unos-banner__stamp a { color: inherit; }
.forum-topic-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ---- Tab strip ---- */
.forum-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.forum-bar .forum-tabs { border-bottom: 0; margin-bottom: 0; }
.forum-bar > .unos-btn { margin-bottom: 0.55rem; }
.forum-bar__note { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; margin-bottom: 0.7rem; }
.forum-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.forum-tabs__tab {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.55rem 0.1rem 0.5rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.forum-tabs__tab:hover { color: #e8f0ff; text-decoration: none; }
.forum-tabs__tab--active { color: #fff; border-bottom-color: var(--accent); }
.forum-tabs__tab--staff { color: var(--accent); }
.forum-tabs__count { color: #ffd24d; }

/* ---- Categories: two masonry columns of panels ---- */
.forum-cats { columns: 2 420px; column-gap: 1.25rem; }
.forum-cat { break-inside: avoid; margin-bottom: 1.25rem; }
.forum-cat__body { display: flex; gap: 1.1rem; align-items: flex-start; height: 100%; }
.forum-cat__icon { flex: 0 0 auto; color: var(--accent); width: 48px; height: 48px; }
.forum-icon { width: 100%; height: 100%; display: block; }
.forum-cat__main { min-width: 0; flex: 1; }
.forum-cat__name { font-size: 1rem; letter-spacing: 0.1em; margin: 0.15rem 0 0.2rem; }
.forum-cat__desc { font-size: 0.9rem; margin: 0 0 0.6rem; }
.forum-cat__boards { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.forum-cat__boards a {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: #dbe7ff;
}
.forum-cat__boards a:hover { color: #fff; }
.forum-cat__chev { color: var(--accent); margin-right: 0.35rem; font-weight: 700; }

/* ---- Topic table ---- */
.forum-topics {
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  overflow: hidden;
  background: #08101f;
}
.forum-topics__head,
.forum-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 76px 76px 76px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}
.forum-topics__head {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.forum-topics__head span:nth-child(n+3),
.forum-topic__num { text-align: center; }
.forum-topic { border-bottom: 1px solid rgba(30,45,74,0.7); transition: background 0.15s; }
.forum-topic:last-child { border-bottom: 0; }
.forum-topic:hover { background: #111d34; }
.forum-topic--pinned { background: #0d1830; }
.forum-topic__main { min-width: 0; }
.forum-topic__title { color: #b4c3e0; font-weight: 500; }
.forum-topic__title:hover { color: #fff; text-decoration: none; }
.forum-topic--unread .forum-topic__title { color: #fff; font-weight: 600; }
.forum-topic__board {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
}
.forum-topic__author {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: #dbe7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-topic__author--staff { color: var(--accent); font-weight: 700; }
.forum-topic__num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.forum-topic__num--busy { color: #ffd24d; font-weight: 700; }
.forum-flag { font-size: 0.8rem; margin-right: 0.15rem; }
.forum-staff-mark {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #031226;
  background: var(--accent);
  border-radius: 3px;
  padding: 0.05rem 0.28rem 0;
  margin-right: 0.3rem;
  vertical-align: 0.12em;
}
.forum-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffd24d;
  box-shadow: 0 0 6px rgba(255,210,77,0.7);
  margin-left: 0.45rem;
  vertical-align: 0.1em;
}
.forum-newreplies {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd24d;
  margin-left: 0.5rem;
}
.forum-empty { text-align: center; padding: 2.5rem 0; }

/* ---- Fleetyard feed ---- */
.forum-staff-feed { list-style: none; display: grid; gap: 0.75rem; }
.forum-staff-post {
  border: 1px solid rgba(107,168,255,0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, #0c1a33 0%, #08101f 100%);
  padding: 0.9rem 1.15rem;
}
.forum-staff-post--player {
  border-color: rgba(107,168,255,0.18);
  background: #08101f;
}
/* Author names link to their post list but keep their own colour. */
a.forum-userlink { color: inherit; }
.unos-banner h1.forum-topic__author--staff { color: var(--accent); }
a.forum-userlink:hover { color: #fff; text-decoration: underline; }
a.forum-userlink.forum-topic__author--staff:hover { color: var(--accent); }
.forum-staff-post__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.forum-staff-post__title { color: #fff; font-weight: 600; }
.forum-staff-post__when { font-family: 'Rajdhani', sans-serif; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.forum-staff-post__meta { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }
.forum-staff-post__excerpt { color: var(--text); font-size: 0.93rem; margin-top: 0.45rem; }

/* ---- Pager / "older" ---- */
.forum-more { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.25rem 0; }
.forum-more__page { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; }

/* ---- Posts ---- */
.forum-post {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1.4rem;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 12px;
  background: #08101f;
  padding: 1.15rem 1.3rem;
  margin-bottom: 0.9rem;
  scroll-margin-top: 1.5rem;
}
.forum-post--staff {
  border-color: rgba(107,168,255,0.6);
  background: linear-gradient(180deg, #0c1a33 0%, #08101f 60%);
  box-shadow: 0 0 18px rgba(107,168,255,0.12);
}
.forum-post--deleted { opacity: 0.55; border-style: dashed; border-color: rgba(255,138,138,0.45); }
.forum-post:target { box-shadow: 0 0 0 2px rgba(255,210,77,0.45); }
.forum-post__author { display: flex; flex-direction: column; gap: 0.6rem; }
.forum-avatar {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(107,168,255,0.35);
  background: #16233c;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: 'Michroma', sans-serif;
  font-size: 1.35rem;
}
.forum-post--staff .forum-avatar { background: var(--accent); color: #031226; }
.forum-post__who { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.forum-post__name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: #e8f0ff;
  overflow-wrap: anywhere;
}
.forum-post__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.forum-post__badges:empty { display: none; }
.forum-badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.forum-badge--staff { color: var(--accent); background: rgba(107,168,255,0.14); }
.forum-post__count { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; color: var(--muted); }
.forum-post__main { min-width: 0; display: flex; flex-direction: column; }
.forum-post__head { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.forum-post__when { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; color: var(--muted); }
.forum-post__edited { font-size: 0.75rem; font-style: italic; color: var(--muted); }

.forum-post__body { color: var(--text); font-size: 0.98rem; line-height: 1.6; overflow-wrap: anywhere; flex: 1; }
.forum-post__body p { color: inherit; margin-bottom: 0.8rem; }
.forum-post__body > :last-child { margin-bottom: 0; }
.forum-post__body ul,
.forum-post__body ol { padding-left: 1.4rem; margin-bottom: 0.8rem; }
.forum-post__body blockquote {
  border-left: 3px solid rgba(107,168,255,0.5);
  background: rgba(107,168,255,0.06);
  border-radius: 0 6px 6px 0;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.8rem;
  color: #b8c8e6;
}
.forum-post__body blockquote p:last-child { margin-bottom: 0; }
.forum-post__body pre {
  background: #050a14;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  margin-bottom: 0.8rem;
}
.forum-post__body code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.86em;
}
.forum-post__body :not(pre) > code {
  background: rgba(107,168,255,0.1);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
.forum-img { display: inline-block; margin: 0.3rem 0; max-width: 100%; }
.forum-img img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.forum-post__actions { display: flex; justify-content: flex-end; align-items: center; gap: 1.1rem; margin-top: 0.9rem; }
.forum-post__actions form { display: inline; }
.forum-post__action {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.forum-post__action:hover { color: #fff; text-decoration: none; }

/* Like: outline heart + count; filled gold once you've liked it (gold is
   the site's community-engagement accent). */
.forum-like-form { display: inline; }
.forum-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.forum-like__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.forum-like__count { color: var(--muted); min-width: 0; }
.forum-like:hover { color: #fff; }
.forum-like:hover .forum-like__icon { transform: scale(1.12); }
.forum-like--on { color: #ffd24d; }
.forum-like--on .forum-like__icon { fill: #ffd24d; }
.forum-like--on .forum-like__count { color: #ffd24d; }
.forum-like--static { cursor: default; color: var(--muted); }
.forum-like--static:hover { color: var(--muted); }
.forum-like--static:hover .forum-like__icon { transform: none; }
.forum-like:disabled { opacity: 0.6; }
.forum-post__action--danger { color: #ff8a8a; }

/* ---- Moderator bar ---- */
.forum-modbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed rgba(181,140,255,0.45);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.forum-modbar form { display: inline-flex; gap: 0.4rem; align-items: center; }
.forum-modbar__label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b58cff;
  margin-right: 0.4rem;
}
.forum-modbar__move { margin-left: auto; }
.forum-modbar select {
  width: auto;
  max-width: 260px;
  background-color: #060d1c;
  color: #e7efff;
  border: 1px solid rgba(107,168,255,0.3);
  border-radius: 8px;
  padding: 0.38rem 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
}

/* ---- Composer ---- */
.forum .unos-form textarea,
.forum .unos-form input[type=text] { font-family: 'Barlow', sans-serif; font-size: 0.97rem; }
.forum-hint { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; letter-spacing: 0.03em; margin-top: 0.4rem; }
.forum-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.forum-reply { margin-top: 1.5rem; }

@media (max-width: 760px) {
  .forum-topics__head { display: none; }
  .forum-topic { grid-template-columns: minmax(0, 1fr) 52px 52px; gap: 0.5rem; padding: 0.7rem 0.85rem; }
  .forum-topic__author,
  .forum-topic > .forum-topic__num:nth-of-type(3) { display: none; }
  .forum-post { grid-template-columns: 1fr; gap: 0.8rem; padding: 1rem; }
  .forum-post__author { flex-direction: row; align-items: center; }
  .forum-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
  .forum-modbar__move { margin-left: 0; }
}

/* ============================================================
   ROADMAP UPDATES — one page per update, previous / next between them
   ============================================================ */
.rm-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.rm-nav__step {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(107,168,255,0.4);
  border-radius: 10px;
  background: rgba(107,168,255,0.06);
  justify-self: start;
  max-width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.rm-nav__step--next { justify-self: end; text-align: right; }
.rm-nav__step:hover { border-color: var(--accent); background: rgba(107,168,255,0.14); text-decoration: none; }
.rm-nav__step--off { opacity: 0.3; }
.rm-nav__dir {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8f0ff;
}
.rm-nav__name {
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-nav__here {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
body.cms-editing .rm-admin.cms-edit__input { flex-direction: row; }
.rm-admin { margin: -0.75rem 0 1.75rem; }
.rm-admin form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: 100%; }
@media (max-width: 640px) {
  .rm-nav { grid-template-columns: 1fr 1fr; }
  .rm-nav__here { grid-column: 1 / -1; grid-row: 1; }
}