/* The landing page: top bar, hero, and bottom status bar.
 *
 * Loaded after menu.css and deliberately kept separate from it. menu.css is
 * 2600 lines that mostly style the Table Setup and Frontier Relay panels, which
 * this redesign does not touch -- keeping the new chrome in its own file means
 * the hero can be reworked without going anywhere near the lobby.
 *
 * Where the two overlap, this file wins by load order. The overrides are
 * confined to the shell layout and the old .command-menu box; everything below
 * `body.view-setup` hands the shell straight back to menu.css so the setup
 * panel opens exactly as it did.
 */

/* Cinzel, self-hosted beside the other faces this project vendors. Variable
   font, latin subset, one 26 KB file covering the whole weight axis.
   SIL Open Font License 1.1 -- recorded in LICENSE-NOTICE.md. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/cinzel-variable.woff2") format("woff2");
}

/* The landing palette. Deliberately narrow: near-black surfaces lit by one
   cyan, so the interface reads as instrumentation against the red artwork
   rather than competing with it. Nothing here is a saturated primary. */
:root {
  --bg-black: #02080d;
  --panel: rgba(4, 15, 24, 0.88);

  --cyan: #3fc4ff;
  --cyan-bright: #68d7ff;
  --cyan-dark: #0879b8;

  --border: rgba(83, 183, 230, 0.28);

  --text-primary: #edf7ff;
  --text-secondary: #91a9b9;

  /* Kept as aliases so the rest of this file reads in one vocabulary. */
  --pf-hero-cyan: var(--cyan);
  --pf-hero-cyan-soft: var(--cyan-bright);
  --pf-chrome: var(--panel);
  --pf-chrome-line: var(--border);

  --pf-header-h: 88px;
  --pf-status-h: 96px;

  /* One transition curve and one duration band for every hover on the page. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 160ms;
  --t-slow: 240ms;
}

/* --- Background ---------------------------------------------------------- */
/* The wide shot, at every window shape.
 *
 * `cover` is the obvious choice and the wrong one: it fills by scaling to the
 * *larger* ratio, so on any window taller than the art's 16:9 it crops the
 * sides away and pushes the figure forward. A window near square croppped
 * nearly a third of the frame off each edge.
 *
 * Fitting to width instead means the whole composition is always visible --
 * full figure, both ridgelines, the lava plain behind him. On a 16:9 monitor it
 * fills exactly; on a taller window the uncovered strip below is the page's own
 * black, which the atmosphere layer already fades into, so the seam does not
 * read as a letterbox.
 *
 * The image is restated here without the gradients menu.css bakes into the
 * shorthand: background-size and -position apply to every layer, and sizing
 * those gradients to the photo would drag the scrim around with it. All the
 * darkening belongs to .frontier-atmosphere. */
.frontier-image {
  background-color: var(--bg-black);
  background-image: image-set(
    url("../assets/backgrounds/frontier-menu-warrior-wide.webp") type("image/webp"),
    url("../assets/backgrounds/frontier-menu-warrior-wide.png") type("image/png")
  );
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: saturate(1.26) contrast(1.08) brightness(1.14);
}

/* Darkening is spent almost entirely on the left, where the type sits. The
   lava has to stay vivid: it is the only warm light in the composition, and an
   even scrim over the whole frame is what made the first pass look muddy.
   The first stop is a warm pool over the figure -- screen-blended, so it lifts
   the existing rim light rather than painting orange over him. */
.frontier-atmosphere {
  background:
    radial-gradient(ellipse 34% 52% at 60% 52%, rgba(255, 94, 32, .16) 0, rgba(190, 48, 16, .07) 46%, transparent 72%),
    radial-gradient(ellipse 52% 78% at 16% 50%, #010407f7 0, #010407c9 42%, #01040700 78%),
    linear-gradient(90deg, #010407f0 0, #010407b0 22%, #0104073d 44%, #01040700 62%),
    /* The seam. Fitting the art to width puts its lower edge at exactly
       56.25vw (100vw x 9/16), whatever the window is doing, so the fade can be
       pinned to it rather than guessed at in percentages. On a 16:9 window that
       lands at the very bottom and costs nothing; on a taller one it dissolves
       the art into the page's black well before the edge shows. */
    linear-gradient(180deg,
      transparent calc(56.25vw - 26vh),
      #010407e8 calc(56.25vw - 2vh),
      var(--bg-black) calc(56.25vw + 1px)),
    linear-gradient(180deg, #010407d9 0, #01040700 16%, #01040700 74%, #010407c4 100%);
  background-blend-mode: screen, normal, normal, normal, normal;
}

/* The existing star field, retuned into embers: warm, sparse, and drifting only
   on the lit side of the frame so it reads as coming off the lava. */
.frontier-atmosphere::after {
  background-image:
    radial-gradient(circle, rgba(255, 176, 108, .9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 108, 52, .75) 0 1px, transparent 1.4px);
  background-size: 190px 190px, 310px 260px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 38%, #000 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0 38%, #000 62%, #000 100%);
  opacity: .3;
}

@media (prefers-reduced-motion: no-preference) {
  .frontier-atmosphere::after {
    animation: pf-ember-drift 26s linear infinite;
  }
}

/* One slow vertical pass. Nothing about the page depends on it moving. */
@keyframes pf-ember-drift {
  from { background-position: 12px 18px, 80px 44px; }
  to { background-position: 12px -172px, 80px -216px; }
}

/* --- Top bar -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: var(--pf-header-h);
  padding: 0 22px 0 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(2, 8, 13, .93), var(--panel));
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(104, 215, 255, .07), 0 10px 30px rgba(0, 0, 0, .45);
}

.site-brand {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 0 30px;
  border-right: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
}

/* Concentric reticle: outer ring, gap, inner ring, hot centre. */
.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(83, 183, 230, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #0a1d2a, #030a10);
  box-shadow: 0 0 16px rgba(63, 196, 255, .28), inset 0 0 12px rgba(63, 196, 255, .2);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.brand-mark::before {
  inset: 7px;
  border: 1px solid #4fb8ffb0;
}

.brand-mark::after {
  inset: 15px;
  background: var(--pf-hero-cyan);
  box-shadow: 0 0 10px var(--pf-hero-cyan);
}

.brand-word {
  font: 400 13px/1.32 var(--pf-ui-font);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: stretch;
}

/* The active item carries a lit underline that reads as a hardware indicator
   rather than a text-decoration. */
.site-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-right: 1px solid rgba(83, 183, 230, .12);
  color: var(--text-secondary);
  font: 400 13px/1 var(--pf-ui-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.site-nav-link:first-child { border-left: 1px solid rgba(83, 183, 230, .12); }
.site-nav-link:hover { color: var(--text-primary); background: rgba(63, 196, 255, .07); }

.site-nav-link.is-current {
  color: var(--cyan-bright);
  background: linear-gradient(180deg, rgba(63, 196, 255, .1), transparent 72%);
}

.site-nav-link.is-current::after {
  content: "";
  position: absolute;
  inset: auto 18% -1px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 22px rgba(63, 196, 255, .55);
}

.site-account {
  display: flex;
  gap: 11px;
  align-items: center;
  align-self: center;
  margin-left: auto;
  padding: 13px 26px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(11, 28, 40, .9), rgba(6, 15, 22, .9));
  box-shadow: inset 0 1px 0 rgba(104, 215, 255, .12);
  font: 400 13px/1 var(--pf-ui-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.site-account:hover {
  border-color: rgba(104, 215, 255, .65);
  box-shadow: inset 0 1px 0 rgba(104, 215, 255, .22), 0 0 20px rgba(63, 196, 255, .22);
}

/* Head and shoulders, drawn rather than an icon font. */
.account-avatar {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.account-avatar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4.5px;
  width: 8px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

.account-avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5px;
  width: 16px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

/* --- Hero ---------------------------------------------------------------- */

/* The hero is centred in the band between the two fixed bars, not top-aligned
   against the header -- that band is what a viewer reads as "the page". */
.menu-shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: var(--pf-header-h) 0 var(--pf-status-h) clamp(28px, 8vw, 138px);
}

/* The old bordered box is gone: the hero sits directly on the artwork. */
.command-menu,
.command-menu.metal-frame {
  position: relative;
  width: min(575px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
}

.command-menu > * { transform: none; }
.command-menu.metal-frame::before,
.command-menu.metal-frame::after { display: none; }

/* The Home wordmark is shared with the 3D board header so the two lockups
   cannot drift. See shared/frontier-hero-logo.css. */

.hero-tagline {
  margin: 0 0 16px;
  color: var(--text-primary);
  font: 400 clamp(1rem, 1.62vw, 1.42rem)/1.3 var(--pf-ui-font);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85), 0 0 26px rgba(63, 196, 255, .16);
}

.hero-blurb {
  max-width: 36ch;
  margin: 0 0 46px;
  color: var(--text-secondary);
  font: 400 clamp(1rem, 1.28vw, 1.2rem)/1.6 var(--pf-card-font);
  letter-spacing: .012em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}

/* --- Play Now ------------------------------------------------------------- */
/*
 * Supplied design, with one structural change that the design needs to work.
 *
 * clip-path clips an element's entire rendering -- descendants and outer
 * box-shadows alike. Putting the octagon and the glow stack on the same box, as
 * the original does, means every `0 0 Npx` layer in that box-shadow is clipped
 * away and the button renders with no outer glow at all: the inset lighting
 * survives, the halo does not.
 *
 * So the octagon moves to a child, `.btn-plate`, and the glow is painted with
 * `filter: drop-shadow()`, which is applied *after* clipping and therefore
 * traces the clipped silhouette instead of the element's box. The button itself
 * carries no clip, which is also what lets the glow spill past its edges.
 *
 * Everything else -- geometry, gradient, inset lighting, top highlight, sheen,
 * diamonds, hover, focus -- is as supplied. box-shadow blur radii became
 * drop-shadow radii at roughly half value, which is the equivalence between the
 * two.
 */

.play-now-btn {
  /* One octagon, shared by every layer. Each layer is a different size, so the
     fixed 20px corners produce properly concentric cuts. */
  --oct: polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px),
    0 20px
  );

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 440px;
  max-width: 100%;
  height: 88px;
  padding: 0 48px;

  border: 0;
  background: none;

  color: #ffffff;
  font-family: "Orbitron", "Exo 2", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;

  text-shadow:
    0 0 8px rgba(255, 255, 255, .45),
    0 0 14px rgba(0, 195, 255, .35);

  cursor: pointer;
  user-select: none;

  transition:
    transform 160ms ease,
    filter 160ms ease;
}

/* The plate: octagon, gradient, inset lighting, and the outer glow that a
   clipped box-shadow could not have produced. */
.btn-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: var(--oct);
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(17, 137, 240, .96) 0%,
      rgba(7, 88, 181, .96) 48%,
      rgba(5, 47, 101, .98) 100%
    );

  box-shadow:
    inset 0 0 0 1px #00e5ff,
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 0 18px rgba(0, 229, 255, .22),
    inset 0 -18px 35px rgba(0, 30, 90, .3);

  filter:
    drop-shadow(0 0 1px rgba(0, 153, 255, .85))
    drop-shadow(0 0 3px rgba(0, 229, 255, .4))
    drop-shadow(0 0 9px rgba(0, 229, 255, .65))
    drop-shadow(0 0 19px rgba(0, 102, 255, .42))
    drop-shadow(0 0 35px rgba(0, 102, 255, .2));

  transition: filter 160ms ease;
}

/* Bright top highlight. */
.play-now-btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 34px;
  right: 34px;
  z-index: 2;

  height: 2px;

  background: linear-gradient(
    90deg,
    rgba(79, 215, 255, 0) 0%,
    rgba(79, 215, 255, .85) 20%,
    #ffffff 50%,
    rgba(79, 215, 255, .85) 80%,
    rgba(79, 215, 255, 0) 100%
  );

  box-shadow:
    0 0 6px #4fd7ff,
    0 0 12px rgba(0, 229, 255, .7);

  pointer-events: none;
}

/* Subtle inner glass sheen. */
.btn-sheen {
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;

  clip-path: var(--oct);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .1) 0%,
      rgba(255, 255, 255, .02) 32%,
      rgba(0, 0, 0, 0) 50%
    );

  box-shadow: inset 0 0 0 1px rgba(79, 215, 255, .32);
}

.btn-label {
  position: relative;
  z-index: 3;
}

.btn-arrow {
  position: relative;
  z-index: 3;

  margin-left: 18px;

  font-size: 32px;
  font-weight: 300;
  line-height: 1;

  transform: translateY(-1px);

  text-shadow:
    0 0 8px rgba(255, 255, 255, .6),
    0 0 14px rgba(0, 229, 255, .5);
}

.btn-diamond {
  position: absolute;
  top: 50%;
  z-index: 4;

  width: 10px;
  height: 10px;

  background: #8cecff;

  transform: translateY(-50%) rotate(45deg);

  box-shadow:
    0 0 6px #ffffff,
    0 0 12px #00e5ff,
    0 0 22px #0077ff;

  pointer-events: none;
}

.btn-diamond-left { left: 14px; }
.btn-diamond-right { right: 14px; }

.play-now-btn:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.12);
}

.play-now-btn:hover .btn-plate {
  filter:
    drop-shadow(0 0 1px rgba(0, 197, 255, .95))
    drop-shadow(0 0 4px rgba(0, 229, 255, .5))
    drop-shadow(0 0 12px rgba(0, 229, 255, .9))
    drop-shadow(0 0 24px rgba(0, 102, 255, .58))
    drop-shadow(0 0 45px rgba(0, 102, 255, .28));
}

.play-now-btn:active {
  transform: translateY(0) scale(.99);
  filter: brightness(.96);
}

.play-now-btn:focus-visible {
  outline: none;
}

.play-now-btn:focus-visible .btn-plate {
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 22px rgba(0, 229, 255, .35);
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 6px rgba(0, 229, 255, .75))
    drop-shadow(0 0 19px rgba(0, 153, 255, .7));
}

@media (max-width: 600px) {
  .play-now-btn {
    width: min(100%, 380px);
    height: 76px;
    padding: 0 34px;
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-now-btn:hover,
  .play-now-btn:active { transform: none; }
}

.hero-guest-note {
  margin: 16px 0 0;
  padding-left: 4px;
  color: var(--text-secondary);
  font: 400 .82rem/1.4 var(--pf-card-font);
  letter-spacing: .04em;
  text-shadow: 0 1px 8px #000a;
}

/* --- Bottom status bar ---------------------------------------------------- */

.site-status {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  gap: clamp(18px, 4vw, 60px);
  align-items: center;
  min-height: var(--pf-status-h);
  padding: 0 24px 0 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(2, 8, 13, .95), var(--panel));
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 -1px 0 rgba(104, 215, 255, .07), 0 -10px 30px rgba(0, 0, 0, .4);
}

.status-identity {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-left: 24px;
}

/* Hexagonal crest with dynamic telemetry radar scanner. */
.status-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 70px;
  flex: 0 0 auto;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #12293a, #071420 62%, #040c12);
  box-shadow: inset 0 0 0 1px rgba(83, 183, 230, .4);
}

.status-crest-mark.telemetry-radar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(83, 183, 230, 0.45);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(3, 14, 24, 0.85) 75%);
  overflow: hidden;
  clip-path: none;
  display: grid;
  place-items: center;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.15);
}

.telemetry-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(83, 183, 230, 0.35);
  pointer-events: none;
}
.telemetry-ring.ring-1 {
  width: 62%;
  height: 62%;
  animation: telemetry-pulse 3s ease-in-out infinite alternate;
}
.telemetry-ring.ring-2 {
  width: 28%;
  height: 28%;
  border-style: solid;
  border-color: rgba(83, 183, 230, 0.55);
}

.telemetry-sweep {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 240, 255, 0.5) 0deg, rgba(0, 240, 255, 0) 70deg, rgba(0, 240, 255, 0) 360deg);
  animation: telemetry-sweep 3.2s linear infinite;
  pointer-events: none;
}

.telemetry-core {
  position: relative;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #00f0ff, 0 0 12px #00f0ff;
  animation: telemetry-glow 1.8s ease-in-out infinite alternate;
}

@keyframes telemetry-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes telemetry-pulse {
  0% { transform: scale(0.88); opacity: 0.4; }
  100% { transform: scale(1.12); opacity: 0.85; }
}

@keyframes telemetry-glow {
  0% { transform: scale(0.9); box-shadow: 0 0 4px #00f0ff, 0 0 8px #00f0ff; }
  100% { transform: scale(1.2); box-shadow: 0 0 8px #00f0ff, 0 0 16px #00f0ff; }
}

.status-crest-level {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cyan-bright);
  font: 400 11px/1 var(--pf-ui-font);
}

.status-server-label {
  margin: 0 0 5px;
  color: var(--text-primary);
  font: 400 11.5px/1 var(--pf-ui-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.status-server-value {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--text-secondary);
  font: 400 12px/1 var(--pf-card-font);
  letter-spacing: .03em;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8fa8b5;
}

.status-dot[data-state="online"] { background: #3ddc76; box-shadow: 0 0 9px #3ddc76; }
.status-dot[data-state="offline"] { background: var(--pf-red); box-shadow: 0 0 9px var(--pf-red); }
.status-dot[data-state="unknown"] { background: var(--pf-amber); box-shadow: 0 0 9px var(--pf-amber); }

.status-stats {
  display: flex;
  gap: clamp(20px, 3.4vw, 52px);
  align-items: center;
  margin: 0;
  padding-left: clamp(12px, 2.5vw, 40px);
  border-left: 1px solid #14283618;
}

.status-stat {
  display: flex;
  gap: 13px;
  align-items: center;
}

.status-stat dd {
  margin: 0;
  color: var(--cyan-bright);
  text-shadow: 0 0 18px rgba(63, 196, 255, .35);
  font: 400 clamp(1.05rem, 1.5vw, 1.45rem)/1.1 var(--pf-ui-font);
  font-variant-numeric: tabular-nums;
}

.status-stat dt {
  margin-top: 4px;
  color: var(--text-secondary);
  font: 400 10.5px/1 var(--pf-ui-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Small line-art glyphs, drawn in CSS so the bar costs no extra requests. */
.status-stat-icon {
  position: relative;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  color: var(--pf-hero-cyan);
}

.icon-cards::before,
.icon-cards::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 14px;
  height: 19px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
}

.icon-cards::before { left: 1px; transform: rotate(-13deg); opacity: .62; }
.icon-cards::after { left: 8px; background: #06121b; }

.icon-swords::before,
.icon-swords::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 12px;
  width: 1.8px;
  height: 22px;
  background: currentColor;
  transform-origin: 50% 100%;
}

.icon-swords::before { transform: rotate(38deg); }
.icon-swords::after { transform: rotate(-38deg); }

.icon-crown::before {
  content: "";
  position: absolute;
  inset: 6px 2px 7px;
  background: currentColor;
  clip-path: polygon(0 100%, 0 22%, 25% 52%, 50% 0, 75% 52%, 100% 22%, 100% 100%);
}

.icon-crown::after {
  content: "";
  position: absolute;
  inset: auto 2px 4px;
  height: 2.4px;
  background: currentColor;
}

.status-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

.status-button {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(11, 26, 37, .9), rgba(6, 15, 22, .9));
  box-shadow: inset 0 1px 0 rgba(104, 215, 255, .1);
  font: 400 11.5px/1 var(--pf-ui-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.status-button:hover {
  border-color: rgba(104, 215, 255, .65);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(104, 215, 255, .2), 0 0 18px rgba(63, 196, 255, .2);
}

.status-button-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--pf-hero-cyan);
}

.icon-trophy::before {
  content: "";
  position: absolute;
  inset: 1px 3px 6px;
  border: 1.6px solid currentColor;
  border-radius: 0 0 8px 8px;
}

.icon-trophy::after {
  content: "";
  position: absolute;
  inset: auto 5px 0;
  height: 1.8px;
  background: currentColor;
  box-shadow: 0 -3px 0 -.4px currentColor;
}

.icon-gear::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1.7px solid currentColor;
  border-radius: 50%;
}

.icon-gear::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* --- Setup and relay panels ---------------------------------------------- */
/* Opening Table Setup hands the shell back to menu.css. The landing chrome
   steps out of the way rather than trying to coexist with a full-width panel. */

body.view-setup .site-header,
body.view-setup .site-status,
body.view-archive .site-header,
body.view-archive .site-status {
  opacity: 0;
  pointer-events: none;
}

body.view-setup .menu-shell,
body.view-archive .menu-shell {
  display: grid;
  padding: 24px;
  place-items: center;
}

body.view-setup #command-menu { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .site-status { transition: opacity .28s ease; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .status-stats { gap: 24px; }
  .status-button span:last-child { display: none; }
  .status-button { padding: 14px; }
}

@media (max-width: 980px) {
  :root { --pf-header-h: 72px; --pf-status-h: 84px; }
  .site-brand { padding: 0 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark::before { inset: 6px; }
  .brand-mark::after { inset: 12px; }
  .brand-word { font-size: 10.5px; letter-spacing: .2em; }
  .site-nav-link { padding: 0 16px; font-size: 11.5px; letter-spacing: .12em; }
  .site-account { padding: 11px 14px; }
  .site-account span:last-child { display: none; }
  .status-crest { display: none; }
  .status-stats { padding-left: 0; border-left: 0; }
  .status-stat-icon { display: none; }
}

/* Below this the artwork can no longer hold a warrior beside a column of type,
   so the composition changes rather than shrinking: the figure moves behind the
   copy and the scrim goes full-width to keep the text readable over him. */
@media (max-width: 760px) {
  :root { --pf-status-h: auto; }

  .frontier-image { background-position: 60% 34%; background-size: cover; }
  /* Enough scrim to read white type over lava, and no more -- the first pass
     buried the artwork entirely, which is worse than slightly softer text. */
  .frontier-atmosphere {
    background:
      linear-gradient(180deg, #010407e0 0, #01040788 30%, #0104078f 62%, #010407f0 100%),
      linear-gradient(90deg, #01040799 0, #01040733 55%, #01040799 100%);
  }

  .site-header { padding-right: 12px; }
  .site-brand { border-right: 0; padding: 0 12px 0 14px; }
  .brand-word { display: none; }

  /* The nav keeps every destination and scrolls sideways rather than dropping
     items or collapsing into a menu nobody opens. `min-width: 0` lets it
     actually shrink -- a flex item defaults to its content width, which is
     what let the nav run underneath the sign-in button. */
  .site-nav {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-account { flex: 0 0 auto; margin-left: 0; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-link { padding: 0 14px; white-space: nowrap; }

  /* The hero sizes to its content and the status bar follows immediately.
     Forcing the shell to fill the viewport left a screen-height band of bare
     artwork between the guest note and the bar. */
  .menu-shell {
    min-height: 0;
    padding: calc(var(--pf-header-h) + 26px) 22px 34px;
    align-items: flex-start;
  }
  .command-menu, .command-menu.metal-frame { width: 100%; }

  /* The mark keeps its proportions and simply scales; the glyph shrinks a
     little faster so it stays behind PROJECT rather than around it. */
  .hero-logo {
    width: 100%;
    font-size: clamp(2.6rem, 13.5vw, 4.2rem);
    letter-spacing: .035em;
  }
  .hero-logo-glyph { width: clamp(190px, 52vw, 250px); }
  .hero-rule { width: 100%; margin: 22px 0 20px; }
  .hero-tagline { font-size: clamp(.85rem, 4.2vw, 1.1rem); letter-spacing: .2em; }
  .hero-blurb { max-width: none; margin-bottom: 32px; font-size: 1rem; }
  .play-now-btn { width: 100%; }

  /* The status bar stops being a fixed strip: at this height it would cover a
     third of the screen. It becomes the end of the page instead.
     `relative` rather than `static`, because z-index does nothing on a static
     box -- and the fixed atmosphere layer would then paint over the whole bar. */
  .site-status {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 18px 22px 26px;
  }
  .status-identity { padding-left: 0; }
  .status-stats {
    grid-column: 1 / -1;
    gap: 22px;
    justify-content: space-between;
  }
  .status-stat dd { font-size: 1.12rem; }
  .status-stat dt { font-size: 9.5px; letter-spacing: .1em; }
  .status-actions { margin-left: 0; }
}

@media (max-width: 380px) {
  .status-stats { gap: 12px; }
  .status-stat dt { font-size: 9px; letter-spacing: .06em; }
}