/*
 * RF United panel layer: the app shell and the dashboard.
 *
 * Loaded after evo-gamecp-2026.css and before the Theme Designer's override,
 * built on the same --rd-* tokens so the theme still repaints it. Stock
 * theme is "RF United Ocean" (DESIGN.md): abyss black, ocean fills
 * (--rd-btn-fill), sky for links and the current item (--rd-accent). Race
 * colours mark races only.
 *
 * Shell: a 64px top bar. From 1200px it carries the brand, every section
 * (each drops its own menu) and the account in one row; below 1200px it
 * keeps the brand and account and a menu button opens every section in a
 * drawer. Both key off .rd-app.rd-topnav, which the interface script adds;
 * without the script the original sidebar still works.
 */

@font-face {
  font-family: "Archivo";
  src: url("../landing/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../landing/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --pn-font: "Archivo", "Arial Narrow", Arial, sans-serif;
  --pn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pn-frost: var(--rd-text, #eef3f8);
  --pn-ash: var(--rd-muted, #9aa7b4);
  --pn-line: var(--rd-border, rgba(238, 243, 248, 0.08));
  --pn-line-strong: rgba(238, 243, 248, 0.14);
  --pn-sky: var(--rd-accent, #6cc0ff);
  --pn-sky-tint: rgba(108, 192, 255, 0.1);
  --pn-surface: var(--rd-surface, #0b0f14);
  --pn-surface-2: var(--rd-surface-2, #10161d);
  --pn-surface-3: var(--rd-surface-3, #1a222c);
  --pn-ground: var(--rd-bg, #05070a);
  --pn-radius: var(--rd-radius, 6px);
  --pn-radius-lg: calc(var(--rd-radius, 6px) + 2px);
  --pn-good: var(--rd-success, #4ade80);
  --pn-warn: var(--rd-warning, #ffbd4a);
  --pn-bad: var(--rd-danger, #ff8a7a);
  --pn-bellato: #f5c518;
  --pn-cora: #a45cf5;
  --pn-accretia: #e2453b;
  --pn-head-h: 64px;
}

::selection { background: var(--pn-sky); color: var(--pn-ground); }
.pn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   SHELL, ALL WIDTHS: the bar, the account, the section menu
   ===================================================================== */

.rd-app.rd-topnav { --rd-railbar-h: 64px; }

.rd-app.rd-topnav > .rd-rail {
  flex-wrap: nowrap;
  gap: 0;
  min-height: 64px;
  padding: 0 72px 0 16px;
  font-family: var(--pn-font);
  background: var(--pn-ground);
  border-bottom: 1px solid var(--pn-line);
}

/* Brand: the RF United monogram and wordmark, as on the public site. */
.rd-app.rd-topnav > .rd-rail .rd-rail-brand {
  gap: 10px;
  margin-right: 12px;
  padding-right: 0;
  border-right: 0;
  min-height: 64px;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-brand img { display: none; }
/* The gold RF monogram with UNITED set beside it, as on the public site
   (user, 2026-10-29); the link's label carries the name for screen readers. */
.rd-app.rd-topnav > .rd-rail .rd-rail-brand { gap: 9px; text-decoration: none; }
.rd-app.rd-topnav > .rd-rail .rd-rail-brand::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 44px;
  background: url("../landing/img/logo-mark.webp") center / contain no-repeat;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-brand::after {
  content: "United";
  font-family: var(--pn-font);
  font-size: 1.125rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pn-sky);
  white-space: nowrap;
  transform: translateY(1px);
}

/* Sections live in the drawer below 1200px; the rail holds them above it. */
.rd-app.rd-topnav > .rd-rail .rd-rail-btn { display: none; }

/* ---- account ---- */
.rd-app.rd-topnav > .rd-rail .rd-rail-actions { margin-left: auto; padding-left: 12px; }
.rd-app.rd-topnav .rd-user-btn {
  height: 44px;
  padding: 0 10px 0 6px;
  gap: 10px;
  font-family: var(--pn-font);
  color: var(--pn-frost);
  background: transparent;
  border: 1px solid var(--pn-line-strong);
  border-radius: var(--pn-radius);
}
.rd-app.rd-topnav .rd-user-btn:hover { background: var(--pn-surface-2); border-color: rgba(108, 192, 255, 0.4); }
.rd-app.rd-topnav .rd-user-avatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  color: var(--rd-btn-ink, #fff);
  background: var(--rd-btn-fill, #0b6fd6);
  border-radius: 4px;
  font-family: var(--pn-font) !important;
  font-weight: 800;
  font-stretch: 118%;
}
.rd-app.rd-topnav .rd-user-copy strong { color: var(--pn-frost); font-size: 13.5px; font-weight: 650; }
.rd-app.rd-topnav .rd-user-role,
.rd-app.rd-topnav .rd-user-role.rd-is-staff,
.rd-app.rd-topnav .rd-user-role.rd-is-super { color: var(--pn-sky); font-size: 10.5px; font-weight: 650; letter-spacing: 0.12em; }
@media (max-width: 639px) {
  .rd-app.rd-topnav .rd-user-copy,
  .rd-app.rd-topnav .rd-user-caret { display: none; }
  .rd-app.rd-topnav .rd-user-btn { width: 44px; padding: 0; justify-content: center; }
}

.rd-user-menu {
  min-width: 248px;
  padding: 6px;
  font-family: var(--pn-font);
  background: var(--pn-surface);
  border: 1px solid var(--pn-line-strong);
  border-radius: var(--pn-radius);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75);
}
.rd-user-head strong { color: var(--pn-frost); }
.rd-user-item { color: var(--pn-ash) !important; border-radius: 4px; font-weight: 550; }
.rd-user-item:hover { color: var(--pn-frost) !important; background: var(--pn-surface-2); }
.rd-user-item:hover i { color: var(--pn-sky); }

/* ---- menu button (below 1200px) ---- */
.rd-app.rd-topnav .rd-mobile-menu {
  display: inline-grid !important;
  place-items: center;
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 1042;
  width: 44px;
  height: 44px;
  color: var(--pn-frost);
  background: transparent;
  border: 1px solid var(--pn-line-strong);
  border-radius: var(--pn-radius);
  font-size: 22px;
}
.rd-app.rd-topnav .rd-mobile-menu:hover { border-color: rgba(108, 192, 255, 0.45); }

/* ---- the menu list itself, wherever it opens ---- */
.rd-app.rd-topnav .rd-sidebar {
  font-family: var(--pn-font);
  background: var(--pn-surface);
  border: 1px solid var(--pn-line-strong);
  border-radius: var(--pn-radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75);
}
.rd-app.rd-topnav .rd-nav { padding: 8px 8px 16px; scrollbar-color: var(--pn-surface-3) transparent; }
.rd-app.rd-topnav .rd-nav .nav-item.dropdown > .nav-link {
  padding: 14px 10px 6px;
  color: var(--pn-ash);
  font-family: var(--pn-font);
  font-size: 11px;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: 0.14em;
}
.rd-app.rd-topnav .rd-nav .nav-item.dropdown > .nav-link i { display: none; }
.rd-app.rd-topnav .rd-nav .dropdown-menu { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
.rd-app.rd-topnav .rd-nav .dropdown-item {
  padding: 9px 10px;
  border-radius: 4px;
  font-family: var(--pn-font);
  font-size: 14px;
  font-weight: 450;
  color: var(--pn-frost);
  transition: background-color 150ms var(--pn-ease);
}
.rd-app.rd-topnav .rd-nav .dropdown-item:hover,
.rd-app.rd-topnav .rd-nav .dropdown-item:focus-visible { background: var(--pn-surface-2); color: var(--pn-frost); }
.rd-app.rd-topnav .rd-nav li.active > .dropdown-item { color: var(--pn-sky); background: var(--pn-sky-tint); font-weight: 600; }
.rd-app.rd-topnav .rd-nav .nav-item.dropdown + .nav-item.dropdown { border-top-color: var(--pn-line); }
.rd-app.rd-topnav .rd-nav .rd-nav-home > .nav-link,
.rd-app.rd-topnav .rd-nav .rd-nav-home > .nav-link.rd-current {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--pn-sky-tint) !important;
  color: var(--pn-sky) !important;
}
.rd-app.rd-topnav .rd-nav .rd-nav-home > .nav-link::before { display: none !important; }

/* ---- the drawer (below 1200px) ----
   The panel's existing accessible drawer (focus trap, backdrop, Escape):
   every section at once, under its band heading, with search. */
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-sidebar {
  inset: 64px 0 0 0;
  width: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 1px solid var(--pn-line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1040;
  animation: pnDrop 320ms var(--pn-ease) both;
}
@keyframes pnDrop { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
body.rd-mobile-nav-open .rd-app.rd-rail-on .rd-sidebar .nav-item.dropdown[data-rd-section],
body.rd-mobile-nav-open .rd-app.rd-rail-on .rd-sidebar .rd-nav-home,
body.rd-mobile-nav-open .rd-app.rd-rail-on .rd-sidebar .rd-nav-divider { display: block; }
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav-search {
  display: flex;
  margin: 12px 16px 0;
  padding: 0 14px;
  height: 48px;
  align-items: center;
  gap: 10px;
  background: var(--pn-ground);
  border: 1px solid var(--pn-line-strong);
  border-radius: var(--pn-radius);
}
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav-search input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0;
  color: var(--pn-frost); font-family: var(--pn-font); font-size: 16px;
}
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav-search kbd { display: none; }
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav { flex: 1; padding: 8px 12px 32px; overflow-y: auto; }
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav .rd-nav-divider span {
  display: block;
  padding: 20px 10px 4px;
  color: var(--pn-sky);
  font-family: var(--pn-font);
  font-size: 11px;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav .rd-nav-home > .nav-link {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px;
  font-family: var(--pn-font); font-size: 15px; font-weight: 600; border-radius: 4px;
}
body.rd-mobile-nav-open .rd-app.rd-topnav .rd-nav .dropdown-item { padding: 11px 10px; font-size: 15px; }

/* ---- page header ---- */
.rd-app.rd-topnav .rd-topbar {
  position: static;
  min-height: 0;
  padding: 24px 16px 0;
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rd-app.rd-topnav .rd-topbar-title h1 {
  margin: 0;
  font-family: var(--pn-font);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pn-frost);
}
.rd-app.rd-topnav .rd-main { max-width: 1480px; padding: 16px 16px 48px; }
@media (min-width: 768px) {
  .rd-app.rd-topnav .rd-topbar { padding: 28px 28px 0; }
  .rd-app.rd-topnav .rd-main { padding: 20px 28px 64px; }
}

/* The dashboard is short enough not to need the scroll dock. */
.rd-app:has(.pn-dash) .rd-scroll-dock { display: none; }

/* =====================================================================
   SHELL FROM 1200px: the top bar
   ---------------------------------------------------------------------
   Brand, ten sections and the account on one 64px row; each section
   drops its menu under its own button. Heights are fixed, not taken from
   --rd-railbar-h: the interface script measures the bar into that
   variable, and sizing the bar from it grows the bar on every resize.
   Icons drop below 1560px and spacing tightens below 1320px, so the row
   never wraps.
   ===================================================================== */

@media (min-width: 1200px) {
  .rd-app.rd-topnav > .rd-rail {
    padding: 0 24px;
    background: rgba(5, 7, 10, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .rd-app.rd-topnav > .rd-rail .rd-rail-brand { margin-right: 20px; }

  .rd-app.rd-topnav > .rd-rail .rd-rail-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pn-ash);
    font-family: var(--pn-font);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: color 200ms var(--pn-ease);
  }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn i { font-size: 16px; opacity: 0.85; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn:hover,
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn:focus-visible,
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn[aria-expanded="true"] { color: var(--pn-frost); background: transparent; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn:focus-visible { outline: 2px solid var(--pn-sky); outline-offset: -6px; }

  /* Current page: frost, with a sky line on the bar's bottom edge. */
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn.rd-is-on { color: var(--pn-frost); }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn.rd-is-on::before {
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--pn-sky);
  }
  /* The rail script also marks the section whose menu was last browsed. On
     the dashboard Home is the page you are on, so only Home is underlined. */
  .rd-app.rd-topnav > .rd-rail:has(.rd-rail-home[aria-current="page"]) .rd-rail-btn[data-rd-rail].rd-is-on:not([aria-expanded="true"]) { color: var(--pn-ash); }
  .rd-app.rd-topnav > .rd-rail:has(.rd-rail-home[aria-current="page"]) .rd-rail-btn[data-rd-rail].rd-is-on::before { display: none; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn[data-rd-rail]::after { width: 5px; height: 5px; opacity: 0.7; }

  .rd-app.rd-topnav > .rd-rail .rd-rail-actions { padding-left: 16px; }
  .rd-app.rd-topnav .rd-mobile-menu { display: none !important; }

  /* A section's menu hangs under its button (the script sets the x). */
  .rd-app.rd-topnav .rd-sidebar {
    top: 72px;
    bottom: auto;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 96px);
  }

  .rd-app.rd-topnav .rd-main { padding: 24px 32px 64px; }
}

@media (min-width: 1200px) and (max-width: 1559px) {
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn i { display: none; }
}
@media (min-width: 1200px) and (max-width: 1319px) {
  .rd-app.rd-topnav > .rd-rail { padding: 0 16px; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-btn { padding: 0 9px; font-size: 13.5px; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-brand { margin-right: 10px; }
}

/* =====================================================================
   DASHBOARD
   ===================================================================== */

.pn-dash { font-family: var(--pn-font); color: var(--pn-ash); display: grid; gap: 24px; }
.pn-dash h2, .pn-dash h3, .pn-dash p, .pn-dash dl, .pn-dash dd, .pn-dash ul, .pn-dash ol { margin: 0; }
.pn-dash ul, .pn-dash ol { padding: 0; list-style: none; }

.pn-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pn-sky) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 200ms var(--pn-ease);
}
.pn-link:hover { color: var(--pn-frost) !important; }
.pn-link i { font-size: 1.2em; transition: transform 200ms var(--pn-ease); }
.pn-link:hover i { transform: translateX(2px); }

.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  font-family: var(--pn-font);
  font-size: 12.5px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 200ms var(--pn-ease), box-shadow 200ms var(--pn-ease), transform 120ms var(--pn-ease);
}
.pn-btn i { font-size: 1.15em; }
.pn-btn:active { transform: translateY(1px); }
.pn-btn-primary { background: var(--rd-btn-fill, #0b6fd6); color: var(--rd-btn-ink, #fff) !important; }
.pn-btn-primary:hover { background: var(--rd-btn-fill-hover, #095cb3); }
.pn-btn-ghost { background: rgba(5, 7, 10, 0.6); color: var(--pn-frost) !important; box-shadow: inset 0 0 0 1px var(--pn-line-strong); }
.pn-btn-ghost:hover { background: var(--pn-surface-2); box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.5); }
.pn-btn-lg { min-height: 52px; padding: 0 24px; font-size: 13px; }
.pn-btn-small { min-height: 32px; padding: 0 12px; font-size: 11px; }
.pn-btn:focus-visible, .pn-link:focus-visible { outline: 2px solid var(--pn-sky); outline-offset: 2px; }

.pn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pn-surface-3); flex-shrink: 0; }
.pn-dot.pn-is-live { background: var(--pn-good); }

.pn-crest {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.pn-race-bellato { --race: var(--pn-bellato); }
.pn-race-cora { --race: var(--pn-cora); }
.pn-race-accretia { --race: var(--pn-accretia); }
.pn-crest.pn-race-bellato, .pn-crest.pn-race-cora, .pn-crest.pn-race-accretia { color: var(--race); }

/* ---- find a page ---- */
.pn-find { position: relative; z-index: 5; }
.pn-find-box {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 18px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  transition: box-shadow 180ms var(--pn-ease);
}
.pn-find-box:focus-within { box-shadow: inset 0 0 0 1px var(--pn-sky), 0 0 0 4px rgba(108, 192, 255, 0.14); }
.pn-find-box > i { color: var(--pn-sky); font-size: 20px; }
.pn-find-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pn-frost);
  font-family: var(--pn-font);
  font-size: 17px;
  font-weight: 500;
}
.pn-find-input::placeholder { color: var(--pn-ash); opacity: 1; }
.pn-find-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pn-find-key {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--pn-surface-2);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  color: var(--pn-ash);
  font-family: var(--pn-font);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 767px) { .pn-find-key { display: none; } .pn-find-input { font-size: 16px; } }

.pn-find-list {
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong), 0 24px 48px -16px rgba(0, 0, 0, 0.85);
}
.pn-find-list[hidden] { display: none; }
.pn-find-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--pn-radius);
  color: var(--pn-frost) !important;
  text-decoration: none !important;
  font-size: 15px;
}
.pn-find-list [aria-selected="true"] a { background: var(--pn-sky-tint); }
.pn-find-list mark { padding: 0; background: none; color: var(--pn-sky); font-weight: 700; }
.pn-find-list small { font-size: 11px; font-weight: 650; font-stretch: 108%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pn-ash); }
.pn-find-list i { color: var(--pn-ash); font-size: 13px; opacity: 0; }
.pn-find-list [aria-selected="true"] i { opacity: 1; color: var(--pn-sky); }
.pn-find-empty { padding: 14px 12px; font-size: 14px; color: var(--pn-ash); }

.pn-find-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px !important; font-size: 13px; }
.pn-find-hint > span { color: var(--pn-ash); margin-right: 4px; }
.pn-suggest {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  color: var(--pn-frost) !important;
  font-weight: 550;
  text-decoration: none !important;
  transition: box-shadow 160ms var(--pn-ease), color 160ms var(--pn-ease);
}
.pn-suggest:hover { box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.5); color: var(--pn-sky) !important; }
.pn-suggest:focus-visible { outline: 2px solid var(--pn-sky); outline-offset: 2px; }

/* ---- pilot / wallet / realm row ---- */
.pn-top { display: grid; gap: 16px; }
@media (min-width: 768px) { .pn-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-pilot { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .pn-top { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1fr); } .pn-pilot { grid-column: auto; } }

.pn-card-title {
  font-weight: 800;
  font-stretch: 118%;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pn-frost);
}

/* The pilot card: the account as an ID, over the main race's capital. */
.pn-pilot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 22px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
}
.pn-pilot-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: saturate(0.85) brightness(0.62);
}
.pn-pilot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(11, 15, 20, 0.96) 0%, rgba(11, 15, 20, 0.7) 42%, rgba(11, 15, 20, 0.25) 100%),
    linear-gradient(90deg, rgba(11, 15, 20, 0.6) 0%, transparent 70%);
}
.pn-pilot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: auto; }
.pn-emblem {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(5, 7, 10, 0.72);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The race crest stands on the art by itself, no disc behind it (user,
   2026-10-29); the disc stays only for the letter shown without a character. */
.pn-emblem:not(.pn-emblem-initial) {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* On the wrapper: the crest itself is a mask, which would cut a shadow off. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}
.pn-emblem-crest { width: 46px; height: 46px; }
.pn-emblem-initial { color: var(--pn-frost); font-weight: 800; font-stretch: 118%; font-size: 26px; }
.pn-pilot-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.72);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  color: var(--pn-frost);
  font-size: 12.5px;
  font-weight: 600;
}
.pn-pilot-status.pn-is-live .pn-dot { background: var(--pn-good); }
.pn-pilot-name {
  margin-top: 28px !important;
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--pn-frost);
  overflow-wrap: anywhere;
}
.pn-pilot-id { margin-top: 6px !important; font-size: 13px; color: var(--pn-ash); }
.pn-pilot-id b { color: var(--pn-sky); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pn-pilot-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--pn-line-strong); }
@media (min-width: 560px) { .pn-pilot-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) and (max-width: 1439px) { .pn-pilot-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pn-pilot-facts dt { font-size: 10.5px; font-weight: 650; font-stretch: 108%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-ash); }
.pn-pilot-facts dd { margin-top: 2px !important; color: var(--pn-frost); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Wallet: one balance and one action, premium underneath. */
.pn-wallet, .pn-realm {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  min-width: 0;
}
.pn-balance { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 18px !important; }
.pn-balance b {
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  line-height: 1;
  color: var(--pn-frost);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pn-balance span { font-size: 14px; color: var(--pn-ash); }
.pn-premium { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pn-line); }
.pn-wallet .pn-btn-block + .pn-premium { margin-top: 18px; }
.pn-premium p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pn-premium strong { color: var(--pn-frost); font-weight: 650; }
.pn-premium p span { color: var(--pn-ash); }
.pn-premium.pn-is-active p span { color: var(--pn-sky); font-weight: 600; }
.pn-premium small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pn-ash); }
.pn-premium-bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--pn-surface-3); overflow: hidden; }
.pn-premium-bar span { display: block; height: 100%; border-radius: 3px; background: var(--pn-sky); }

/* Realm: who is on, and how the three races split. */
.pn-realm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pn-realm-time { display: inline-flex; align-items: center; gap: 6px; color: var(--pn-frost); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pn-realm-time i { color: var(--pn-ash); }
.pn-realm-time small { color: var(--pn-ash); font-weight: 500; }
.pn-online { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; font-size: 14px; color: var(--pn-ash); }
.pn-online b { font-weight: 800; font-stretch: 118%; font-size: 2.5rem; line-height: 1; color: var(--pn-frost); font-variant-numeric: tabular-nums; }
.pn-online-sub { margin-top: 4px !important; font-size: 12.5px; }
.pn-balance-bar { display: flex; height: 8px; margin-top: 16px; border-radius: 4px; overflow: hidden; background: var(--pn-surface-3); }
.pn-balance-bar span { height: 100%; background: var(--race); }
.pn-balance-bar span + span { box-shadow: -2px 0 0 var(--pn-surface); }
.pn-factions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px !important; }
.pn-factions li {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 10px;
  border-radius: var(--pn-radius);
  background: var(--pn-ground);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  min-width: 0;
}
.pn-faction-crest { width: 20px; height: 20px; margin-bottom: 4px; }
.pn-faction-name { font-size: 12px; font-weight: 600; color: var(--race); }
.pn-factions b { font-size: 17px; font-weight: 800; font-stretch: 112%; color: var(--pn-frost); font-variant-numeric: tabular-nums; }
.pn-factions small { font-size: 11.5px; color: var(--pn-ash); }
.pn-realm-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; }
.pn-realm-foot .pn-link { margin-right: auto; font-size: 13.5px; }
.pn-follow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; color: var(--pn-ash) !important; font-size: 16px; text-decoration: none !important; }
.pn-follow:hover { color: var(--pn-frost) !important; background: var(--pn-surface-2); }
.pn-note { margin-top: 14px !important; font-size: 14px; }

/* ---- roster beside the checklist ---- */
.pn-layout { display: grid; gap: 24px; align-items: start; }
.pn-roster-wrap { min-width: 0; }
@media (min-width: 1100px) { .pn-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; } }
@media (min-width: 1440px) { .pn-layout { grid-template-columns: minmax(0, 1fr) 380px; } }

.pn-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pn-section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--pn-frost);
}
.pn-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--pn-sky-tint);
  color: var(--pn-sky);
  font-size: 12px;
  font-weight: 700;
}
.pn-section-head .pn-link { font-size: 13.5px; flex-shrink: 0; }

/* ---- characters, as select cards ---- */
.pn-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.pn-char {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  transition: box-shadow 220ms var(--pn-ease);
}
.pn-char:hover { box-shadow: inset 0 0 0 1px rgba(108, 192, 255, 0.45); }
.pn-char-art {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  width: 100%;
  height: 66%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.8);
  transition: transform 600ms var(--pn-ease);
}
.pn-char:hover .pn-char-art { transform: scale(1.04); }
.pn-char::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--pn-surface) 34%, rgba(11, 15, 20, 0.6) 62%, rgba(11, 15, 20, 0.15) 100%);
}
.pn-char-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px; }
.pn-char-crest { width: 34px; height: 34px; }
.pn-char-lv {
  display: grid;
  justify-items: end;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 2.25rem;
  line-height: 0.9;
  color: var(--pn-frost);
  font-variant-numeric: tabular-nums;
}
.pn-char-lv small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--pn-ash); }
.pn-char-body { padding: 0 16px 16px; }
.pn-char-name { font-weight: 800; font-stretch: 112%; font-size: 1.25rem; line-height: 1.15; color: var(--pn-frost); overflow-wrap: anywhere; }
.pn-char-race { margin-top: 2px !important; font-size: 13px; font-weight: 600; color: var(--race, var(--pn-ash)); }
.pn-char-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--pn-line); }
.pn-char-stats dt { font-size: 10.5px; font-weight: 650; font-stretch: 108%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-ash); }
.pn-char-stats dd { color: var(--pn-frost); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- empty roster ---- */
.pn-start {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 28px;
  padding: 28px 24px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
}
.pn-start-art {
  position: absolute;
  inset: 0 0 0 40%;
  z-index: -2;
  width: 60%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.pn-start-copy h3 { font-weight: 800; font-stretch: 118%; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; color: var(--pn-frost); }
.pn-start-copy p { margin-top: 8px !important; font-size: 15px; color: rgba(238, 243, 248, 0.8); max-width: 44ch; }
.pn-steps { display: grid; gap: 12px; }
.pn-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: var(--pn-radius);
  background: rgba(5, 7, 10, 0.78);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pn-step-num { font-weight: 800; font-stretch: 118%; font-size: 1.75rem; line-height: 1; color: var(--pn-sky); }
.pn-steps strong { display: block; color: var(--pn-frost); font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.pn-steps small { display: block; margin-top: 2px; font-size: 13px; color: var(--pn-ash); }
@media (min-width: 768px) {
  .pn-start { padding: 36px 32px; }
  .pn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- account checklist ---- */
.pn-panel {
  padding: 20px;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-surface);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  min-width: 0;
}
.pn-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pn-panel-head h2 {
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pn-frost);
}
.pn-health-count { font-size: 13.5px; color: var(--pn-ash); font-variant-numeric: tabular-nums; }
.pn-health-count b { font-weight: 800; font-stretch: 118%; font-size: 1.25rem; color: var(--pn-sky); }
.pn-meter { display: flex; gap: 4px; margin: 14px 0 4px; }
.pn-meter span { flex: 1; height: 4px; border-radius: 2px; background: var(--pn-surface-3); }
.pn-meter span.pn-is-on { background: var(--pn-sky); }
.pn-health li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; }
.pn-health li + li { border-top: 1px solid var(--pn-line); }
.pn-health li > i { font-size: 17px; }
.pn-health li.pn-is-done > i { color: var(--pn-good); }
.pn-health li.pn-is-todo > i { color: var(--pn-ash); }
.pn-health-copy { display: grid; min-width: 0; }
.pn-health-copy strong { color: var(--pn-frost); font-size: 14px; font-weight: 600; }
.pn-health li.pn-is-done .pn-health-copy strong { color: rgba(238, 243, 248, 0.86); }
.pn-health-copy small { font-size: 12.5px; color: var(--pn-ash); overflow-wrap: anywhere; }
.pn-health-copy small .pn-link { font-size: 12.5px; }
.pn-health-act form { margin: 0; }
.pn-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 8px !important; padding-top: 14px; border-top: 1px solid var(--pn-line); font-size: 13px; }
.pn-panel-foot .pn-link { font-size: 13px; }

.pn-copy-btn { opacity: 1 !important; visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
  body.rd-mobile-nav-open .rd-app.rd-topnav .rd-sidebar { animation: none; }
  .pn-char-art, .pn-link i, .pn-btn, .pn-suggest, .pn-find-box { transition: none; }
}

/* ---- account: a round avatar; name and role live inside its menu ---- */
.rd-app.rd-topnav .rd-user-btn {
  width: auto;
  height: 44px;
  padding: 0 8px 0 4px;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.rd-app.rd-topnav .rd-user-btn:hover { background: var(--pn-surface-2); }
.rd-app.rd-topnav .rd-user-avatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
  box-shadow: 0 0 0 2px var(--pn-ground), 0 0 0 3px rgba(108, 192, 255, 0.45);
}
.rd-app.rd-topnav .rd-user-copy { display: none; }
.rd-app.rd-topnav .rd-user-caret { display: inline-block; color: var(--pn-ash); }

/* Community links live in the realm card; the header carries only the title. */
.rd-app.rd-topnav .rd-topbar-actions { display: none; }

/* ---- search: a sensible width, shortcuts beside it on wide screens ---- */
.pn-find-box { height: 52px; }
.pn-find-list { top: 58px; right: auto; width: 100%; }
@media (min-width: 900px) {
  .pn-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .pn-find-box { flex: 0 1 560px; min-width: 0; }
  .pn-find-list { max-width: 560px; }
  .pn-find .pn-find-hint { margin-top: 0 !important; }
}

/* ---- the page title lines up with the content under it ---- */
.rd-app.rd-topnav .rd-topbar { max-width: 1480px; width: 100%; margin: 0 auto; box-sizing: border-box; }