@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:500; font-display:swap; src:url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url("../assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family:"Orbitron"; font-style:normal; font-weight:700; font-display:swap; src:url("../assets/fonts/orbitron-700.woff2") format("woff2"); }
@font-face { font-family:"Michroma"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/michroma-regular.ttf") format("truetype"); }

:root {
  --pf-ui-font:"Michroma","Rajdhani",system-ui,sans-serif;
  --pf-card-font:"Barlow Condensed",Arial,sans-serif;
  --pf-void:#03080c;
  --pf-night-steel:#061017;
  --pf-panel:#08131d;
  --pf-panel-raised:#0d1b25;
  --pf-steel-edge:#243b4a;
  --pf-ink:#dce9ed;
  --pf-muted:#8fa8b5;
  --pf-blue:#1595ff;
  --pf-blue-bright:#5cc1ff;
  --pf-green:#48c76c;
  --pf-red:#ec4c44;
  --pf-purple:#bb55da;
  --pf-amber:#e5b14a;
  --pf-paper:#e9dfcd;
  --pf-rust:#835136;
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--pf-void); }
body {
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--pf-ink);
  background:
    radial-gradient(ellipse at 68% 34%,#3d1c0c40 0,transparent 28rem),
    radial-gradient(ellipse at 52% 18%,#153d6950 0,transparent 39rem),
    radial-gradient(circle at 80% 70%,#bb55da24 0,transparent 27rem),
    linear-gradient(180deg,#000106 0,#020911 55%,#000106 100%);
  font:400 14px/1.48 var(--pf-ui-font);
  letter-spacing:0;
}

button,
a,
input,
select { font:inherit; }

.frontier-image {
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(90deg,#01040786 0,#0104075e 34%,#01040710 72%,#01040742 100%),
    linear-gradient(180deg,#01040724 0,transparent 34%,#01040770 100%),
    url("../assets/backgrounds/frontier-menu-warrior-wide.png") center center / cover no-repeat;
  opacity:1;
  filter:saturate(1.1) contrast(1.02) brightness(1.12);
  pointer-events:none;
}

.frontier-atmosphere {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 77% 64%,#e5b14a12 0,transparent 18rem),
    radial-gradient(circle at 18% 24%,#1595ff18 0,transparent 22rem),
    radial-gradient(circle at 76% 22%,#e5b14a0f 0,transparent 23rem),
    radial-gradient(circle at 62% 76%,#83513618 0,transparent 26rem),
    linear-gradient(90deg,#010407c7 0,#0104078a 39%,#0104072b 100%);
}

.frontier-atmosphere::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,#ffffffd6 0 1px,transparent 1.6px),
    radial-gradient(circle,#6bc8caaa 0 1px,transparent 1.4px);
  background-size:136px 136px,224px 224px;
  background-position:12px 18px,80px 44px;
  opacity:.15;
}

.menu-shell {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(330px,450px);
  gap:38px;
  min-height:100vh;
  padding:34px;
  align-items:center;
  justify-content:start;
}

.metal-frame {
  position:relative;
  border:1px solid #47606d;
  background:
    linear-gradient(90deg,#83513626 0 1px,transparent 1px calc(100% - 1px),#1595ff24 calc(100% - 1px)),
    linear-gradient(135deg,#ffffff0d,#ffffff00 18%),
    linear-gradient(145deg,var(--pf-panel-raised),var(--pf-panel) 58%,#050d13);
  box-shadow:
    inset 0 1px #ffffff1f,
    inset 0 0 0 1px #02080c,
    inset 0 0 0 2px #243b4a66,
    inset 0 -14px 22px #0006,
    0 0 0 1px #02070c,
    0 0 24px #1595ff15,
    0 16px 30px #000b;
}

.command-menu.metal-frame {
  border-color:transparent;
  background:
    linear-gradient(145deg,#0610172e,#03080c12 58%,#03080c08);
  box-shadow:
    inset 0 0 0 1px #02080c7a,
    0 0 28px #1595ff18;
  backdrop-filter:none;
}

.metal-frame::before,
.metal-frame::after {
  content:"";
  position:absolute;
  pointer-events:none;
}

.metal-frame::before {
  inset:6px;
  border:1px solid #1f3b4a;
}

.metal-frame::after {
  inset:0;
  background:
    radial-gradient(circle at 12px 12px,#8b98a1 0 2px,#02070c 2.4px 4px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 12px) 12px,#8b98a1 0 2px,#02070c 2.4px 4px,transparent 4.2px),
    radial-gradient(circle at 12px calc(100% - 12px),#8b98a1 0 2px,#02070c 2.4px 4px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8b98a1 0 2px,#02070c 2.4px 4px,transparent 4.2px);
  opacity:.72;
}

.command-menu {
  z-index:2;
  width:100%;
  max-width:430px;
  padding:24px 24px 18px;
  border-radius:10px;
  transform:skewY(-.45deg);
}

.command-menu.metal-frame::before {
  display:none;
}

.command-menu > * {
  transform:skewY(.45deg);
}

.command-menu.mode-archive .menu-actions {
  display:none;
}

.command-menu.mode-setup {
  border-color:#5cc1ff7a;
}

body.view-setup #command-menu {
  opacity:0;
  pointer-events:none;
  transform:translateX(-20px) skewY(-.45deg);
}

.brand-lockup {
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:25px;
}

.status-light {
  width:44px;
  height:44px;
  flex:0 0 auto;
  border:3px solid #2c4f61;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#d9f8ff 0 5px,var(--pf-blue-bright) 6px 10px,#062233 11px 100%);
  box-shadow:0 0 18px #1595ff82,inset 0 0 10px #000;
}

.system-label {
  margin:0 0 3px;
  color:var(--pf-blue-bright);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

h1 {
  margin:0;
  color:#f1e4d6;
  font:400 2.36rem/1.08 var(--pf-ui-font);
  letter-spacing:.035em;
  text-transform:uppercase;
  text-shadow:0 3px 0 #000,0 0 16px #1595ff33;
  text-wrap:balance;
}

.player-picker {
  display:grid;
  gap:12px;
  margin-bottom:14px;
  padding:15px;
  border:1px solid #2b4857;
  border-radius:8px;
  background:#061017d9;
}

.player-picker label,
.archive-header h2,
.subpanel-header h2 {
  margin:0;
  color:var(--pf-blue-bright);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.player-console {
  display:grid;
  grid-template-columns:54px minmax(180px,1fr) 54px;
  gap:10px;
  align-items:center;
}

.icon-button,
.menu-action {
  border:1px solid #315568;
  color:var(--pf-ink);
  background:linear-gradient(180deg,#102a38,#07131b);
  box-shadow:inset 0 1px #ffffff14,0 2px 4px #0008;
  transition:border-color 140ms ease,background 140ms ease,box-shadow 140ms ease,transform 100ms ease;
}

.icon-button {
  min-height:54px;
  border-radius:6px;
  cursor:pointer;
  font-size:1.9rem;
  font-weight:800;
}

.icon-button:disabled {
  cursor:not-allowed;
  opacity:.42;
  filter:saturate(.4);
  box-shadow:inset 0 1px #ffffff0d;
}

output {
  min-height:64px;
  display:grid;
  place-items:center;
  border:1px solid #526b76;
  border-radius:6px;
  color:#071118;
  background:linear-gradient(145deg,#f2ece1 0,#c4c1b9 58%,#8e9697 100%);
  font:400 2.12rem/1 var(--pf-ui-font);
  text-shadow:0 1px #fff;
}

.seat-lights {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
}

.seat-lights span {
  height:10px;
  border:1px solid #263f4d;
  background:#061017;
  box-shadow:inset 0 0 0 1px #02070c;
}

.seat-lights span.lit {
  border-color:#5cc1ff;
  background:linear-gradient(90deg,#1595ff,#e5b14a);
  box-shadow:0 0 9px #1595ff7a,inset 0 0 0 1px #02070c;
}

.menu-actions {
  display:grid;
  gap:10px;
}

.menu-action {
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:12px;
  align-items:center;
  width:100%;
  min-height:70px;
  padding:11px 13px;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}

.menu-action:hover,
.icon-button:hover,
.subpanel-back:hover {
  border-color:var(--pf-blue-bright);
  background:linear-gradient(180deg,#14364a,#0b1d29);
  box-shadow:inset 0 1px #ffffff1c,0 0 10px #1595ff3d,0 2px 4px #0008;
}

.menu-action:active,
.icon-button:active,
.subpanel-back:active { transform:translateY(1px); }

.menu-action:focus-visible,
.icon-button:focus-visible,
.subpanel-back:focus-visible {
  outline:2px solid var(--pf-blue-bright);
  outline-offset:3px;
}

.primary-action {
  border-color:#478ec0;
  background:
    linear-gradient(90deg,#1595ff40 0 3px,transparent 3px),
    linear-gradient(180deg,#0d4e75,#092332);
}

.action-icon {
  position:relative;
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border:2px solid #526b76;
  border-radius:50%;
  background:radial-gradient(circle,#152832 35%,#061016 38%);
  box-shadow:0 0 0 3px #061017,0 0 10px #1595ff66,inset 0 0 10px #000;
}

.editor-icon::before,
.archive-icon::before {
  color:#eaf8ff;
  font:400 1.45rem/1 var(--pf-ui-font);
}

.dice-icon::before {
  content:"";
  width:20px;
  height:20px;
  border:3px solid #dff6ff;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg) translateX(-2px);
  filter:drop-shadow(0 0 6px #5cc1ff);
}
.dice-icon::after {
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pf-blue-bright);
  box-shadow:0 0 12px var(--pf-blue-bright);
  transform:translateX(-10px);
}
.editor-icon::before { content:"+"; font-size:1.8rem; }
.archive-icon::before { content:"C"; }

.menu-action strong {
  display:block;
  color:#eef7fb;
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.menu-action small {
  color:var(--pf-muted);
  font-size:.84rem;
}

.command-subpanel {
  margin-top:15px;
  padding:15px;
  border:1px solid #2b4857;
  border-radius:8px;
  background:
    radial-gradient(circle at 16% 0,#1595ff1c 0,transparent 14rem),
    linear-gradient(145deg,#081621f2,#03090dee);
}

.setup-panel {
  display:grid;
  gap:12px;
}

.launch-panel {
  position:absolute;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  z-index:4;
  width:min(920px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  margin:0;
  transform:translate(-50%,-42%);
  border-color:#5cc1ff80;
  box-shadow:
    inset 0 1px #ffffff12,
    inset 0 0 0 1px #02080c,
    0 0 0 1px #02070c,
    0 0 24px #1595ff28,
    0 18px 34px #000c;
}

.setup-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.setup-options label,
.player-slot label {
  display:grid;
  gap:5px;
  color:var(--pf-muted);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.setup-options select,
.player-slot select,
.player-slot input {
  width:100%;
  min-height:36px;
  padding:6px 9px;
  border:1px solid #315568;
  border-radius:5px;
  color:var(--pf-ink);
  background:#061017;
}

.player-slots {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

.player-slot {
  display:grid;
  gap:9px;
  padding:11px;
  border:1px solid #2b4857;
  background:
    radial-gradient(circle at 16% 0,#1595ff18 0,transparent 9rem),
    linear-gradient(145deg,#07131ded,#03080ce6);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}

.character-preview {
  display:grid;
  grid-template-columns:78px 1fr;
  gap:9px;
  align-items:center;
  width:100%;
  min-height:82px;
  padding:7px;
  border:1px solid #315568;
  color:var(--pf-ink);
  background:linear-gradient(145deg,#07131d,#03080c);
  text-align:left;
  cursor:zoom-in;
}

.character-preview img {
  width:78px;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid #5cc1ff70;
  background:#02070c;
}

.character-preview b,
.character-preview small {
  display:block;
}

.character-preview b {
  color:#fff4e8;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.character-preview small {
  margin-top:4px;
  color:#b7cbd4;
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.character-inspector {
  width:min(880px,calc(100vw - 32px));
  padding:18px;
  border:1px solid #5e7885;
  color:var(--pf-ink);
  background:linear-gradient(145deg,#102a38,#081722 58%,#050d13);
  box-shadow:inset 0 1px #ffffff22,inset 0 0 0 1px #02080c,0 0 28px #1595ff4d,0 18px 28px #000d;
}

.character-inspector::backdrop {
  background:#010407cc;
}

.close-character-inspector {
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  min-height:34px;
  padding:0;
}

.character-inspector-layout {
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:18px;
  align-items:center;
}

.character-inspector-layout img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid #5cc1ff8c;
  box-shadow:0 0 18px #1595ff4d,0 12px 18px #000b;
}

.character-inspector-layout h2 {
  margin:4px 42px 8px 0;
  color:#fff4e8;
  font:400 2.18rem/1.08 var(--pf-ui-font);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.character-ability-copy {
  margin-top:14px;
  padding:12px 14px;
  color:#14191b;
  background:linear-gradient(135deg,#efe5d3,#ddd0ba 52%,#eee3d1);
  border:1px solid #7e745f;
  font:700 .98rem/1.36 Georgia,serif;
}

.slot-header {
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#eaf6f9;
  text-transform:uppercase;
}

.slot-header strong {
  color:var(--pf-blue-bright);
  letter-spacing:.07em;
}

.slot-header span {
  color:var(--pf-muted);
  font-size:.78rem;
}

.setup-message {
  min-height:22px;
  margin:0;
  color:#d6c9ae;
  font-size:.92rem;
  letter-spacing:.03em;
}

.start-action[aria-disabled="true"] {
  pointer-events:none;
  opacity:.5;
  filter:saturate(.45);
}

body:not(.view-setup) .launch-panel {
  display:none;
}

.subpanel-header {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:start;
  margin-bottom:2px;
}

.subpanel-header h2,
.archive-header h2 {
  font:400 1.35rem/1.12 var(--pf-ui-font);
  letter-spacing:.06em;
}

.subpanel-back {
  min-height:34px;
  padding:6px 12px;
  border:1px solid #315568;
  border-radius:5px;
  color:var(--pf-ink);
  background:linear-gradient(180deg,#102a38,#07131b);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.start-action {
  margin-top:2px;
}

.archive-header {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:11px;
}

.archive-tools {
  display:flex;
  gap:8px;
  align-items:center;
}

.archive-header span {
  color:var(--pf-muted);
  font-size:.82rem;
}

.archive-groups {
  display:grid;
  gap:8px;
}

.archive-group {
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:center;
  min-height:43px;
  padding:8px;
  border:1px solid #263f4d;
  border-radius:6px;
  background:#08131d;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

.archive-group b {
  color:var(--group-color);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.archive-group span {
  color:#c4d6de;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.frontier-stage {
  min-height:640px;
  display:grid;
  place-items:center;
  perspective:1600px;
  overflow:hidden;
}

.frontier-stage::before {
  content:"";
  position:absolute;
  width:min(76vw,980px);
  aspect-ratio:2.8;
  bottom:8%;
  right:2%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 45%,#b56e3540 0,transparent 48%),
    linear-gradient(180deg,transparent 0 42%,#4f2b1840 43%,#08060500 64%);
  filter:blur(.3px);
  transform:rotate(-5deg);
}

.frontier-stage::after {
  content:"";
  position:absolute;
  width:min(46vw,560px);
  aspect-ratio:1;
  right:9%;
  top:9%;
  border:1px solid #83513666;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#f0b45b38 0,transparent 18%,#1b0d0812 36%,transparent 68%);
  box-shadow:inset -24px -32px 42px #000b,0 0 35px #e5b14a1e;
}

.station-rig {
  position:relative;
  z-index:1;
  width:min(68vw,880px);
  aspect-ratio:1.22;
  transform:rotateX(57deg) rotateZ(-9deg);
  transform-style:preserve-3d;
}

.orbital-ring {
  position:absolute;
  inset:8%;
  border:2px solid #315568;
  border-radius:50%;
  box-shadow:0 0 18px #1595ff2e,inset 0 0 18px #1595ff1f;
  transform:translateZ(var(--z));
}

.ring-one { --z:-16px; inset:5%; }
.ring-two { --z:22px; inset:16%; border-color:#4d6a75; }
.ring-three { --z:58px; inset:28%; border-color:#835136; box-shadow:0 0 18px #e5b14a24,inset 0 0 18px #e5b14a1a; }

.command-table {
  position:absolute;
  inset:21% 16%;
  border:2px solid #5d7480;
  border-radius:13px;
  background:
    linear-gradient(135deg,#ffffff14,#ffffff00 20%),
    radial-gradient(circle at 50% 45%,#123349 0 18%,transparent 19%),
    linear-gradient(90deg,transparent 0 20%,#83513633 20.5%,transparent 21% 79%,#83513633 79.5%,transparent 80%),
    linear-gradient(145deg,#182a33,#071017 62%,#02070b);
  box-shadow:
    inset 0 0 0 5px #02070c,
    inset 0 0 0 7px #243b4a,
    0 18px 35px #000c,
    0 0 34px #1595ff26;
  transform:translateZ(34px);
}

.table-core {
  position:absolute;
  inset:28%;
  border:2px solid #66818d;
  border-radius:50%;
  background:radial-gradient(circle,#d9f8ff 0 7%,#1595ff 8% 18%,#061017 20% 100%);
  box-shadow:0 0 28px #1595ffb0,inset 0 0 16px #000;
}

.table-rail {
  position:absolute;
  height:8px;
  border-radius:999px;
  background:var(--rail-color);
  box-shadow:0 0 13px var(--rail-color);
}

.rail-blue { --rail-color:var(--pf-blue); left:10%; right:55%; top:20%; }
.rail-green { --rail-color:var(--pf-green); left:55%; right:10%; top:33%; }
.rail-red { --rail-color:var(--pf-red); left:12%; right:58%; bottom:24%; }
.rail-purple { --rail-color:var(--pf-purple); left:53%; right:12%; bottom:18%; }

.holo-card {
  position:absolute;
  width:100px;
  aspect-ratio:63/88;
  border:2px solid var(--card-color);
  border-radius:6px;
  background:
    linear-gradient(180deg,#0d1b25 0 58%,var(--pf-paper) 59% 83%,#071017 84%),
    radial-gradient(circle at 50% 30%,var(--card-color),transparent 42%);
  box-shadow:0 0 18px var(--card-color),inset 0 0 0 3px #061017;
  transform:translateZ(105px) rotateX(-8deg);
}

.card-blue { --card-color:var(--pf-blue); left:18%; top:19%; }
.card-green { --card-color:var(--pf-green); right:19%; top:26%; }
.card-red { --card-color:var(--pf-red); left:24%; bottom:19%; }
.card-purple { --card-color:var(--pf-purple); right:25%; bottom:22%; }

@media (prefers-reduced-motion:no-preference) {
  .station-rig { animation:rig-drift 9s ease-in-out infinite alternate; }
  .holo-card { animation:holo-float 4.8s ease-in-out infinite alternate; }
  .card-green { animation-delay:-1.2s; }
  .card-red { animation-delay:-2.1s; }
  .card-purple { animation-delay:-3s; }
}

@keyframes rig-drift {
  from { transform:rotateX(57deg) rotateZ(-10deg) translate3d(0,-8px,0); }
  to { transform:rotateX(55deg) rotateZ(-6deg) translate3d(10px,7px,0); }
}

@keyframes holo-float {
  from { translate:0 0; opacity:.82; }
  to { translate:0 -16px; opacity:1; }
}

@media (max-width:900px) {
  body { overflow:auto; }
  .menu-shell {
    grid-template-columns:1fr;
    gap:8px;
    padding:18px;
    align-items:start;
  }
  .command-menu { max-width:none; }
  .command-menu,
  .command-menu > * { transform:none; }
  .launch-panel {
    position:static;
    width:100%;
    margin:0;
    order:0;
    transform:none;
  }
  .frontier-stage {
    min-height:360px;
    order:-1;
  }
  .station-rig {
    width:min(94vw,620px);
  }
  h1 { font-size:2.35rem; }
}

@media (max-width:520px) {
  .menu-action {
    grid-template-columns:46px 1fr;
    min-height:66px;
    padding:10px;
  }
  .action-icon { width:40px; height:40px; }
  .menu-action strong { font-size:1.16rem; }
  .archive-group {
    grid-template-columns:1fr;
    gap:4px;
  }
  .archive-header,
  .subpanel-header {
    display:grid;
  }
  .archive-tools {
    justify-content:space-between;
  }
  .character-inspector-layout {
    grid-template-columns:1fr;
  }
}

/* --- Frontier Relay -------------------------------------------------------
   Long-range comms console. Reuses the existing panel material (steel plate,
   blue service light) so the online lobby reads as part of the same ship
   rather than a bolted-on web form. */

.relay-blurb {
  margin:0 0 14px;
  max-width:56ch;
  font-size:.86rem;
  line-height:1.5;
  color:#9fb6c4;
}

.relay-split {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.relay-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 18px;
  border:1px solid #274456;
  border-radius:7px;
  background:linear-gradient(160deg,#0a1a26f0,#050d13f2);
  box-shadow:inset 0 1px #ffffff0f, 0 6px 16px #0007;
}
/* Service light down the inboard edge, matching the station frames. */
.relay-card::before {
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--pf-blue),transparent);
  opacity:.75;
}
.relay-card[data-relay="join"]::before { background:linear-gradient(180deg,transparent,#dca928,transparent); }

.relay-card-kicker {
  margin:0;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pf-blue-bright);
}
.relay-card[data-relay="join"] .relay-card-kicker { color:#f0c869; }
.relay-card h3 { margin:0; font-size:1.05rem; letter-spacing:.04em; }
.relay-card-copy { margin:0; font-size:.82rem; line-height:1.45; color:#8ea6b4; }

.relay-code-label {
  margin-top:4px;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8ea6b4;
}

/* Reads as a hardware keypad entry, not a text box. */
.relay-code-input {
  width:100%;
  padding:10px 12px;
  font-family:var(--pf-ui-font,inherit);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.42em;
  text-align:center;
  text-transform:uppercase;
  color:#e9f4f4;
  background:#040d14;
  border:1px solid #2b4857;
  border-radius:5px;
  box-shadow:inset 0 2px 8px #000a;
}
.relay-code-input::placeholder { color:#33505f; letter-spacing:.42em; }
.relay-code-input:focus-visible {
  outline:2px solid var(--pf-blue-bright);
  outline-offset:2px;
  border-color:var(--pf-blue);
}

.relay-action { margin-top:auto; }

.relay-room {
  margin-top:16px;
  padding:16px;
  border:1px solid #2b4857;
  border-radius:7px;
  background:linear-gradient(150deg,#07141ef2,#03090df2);
}

.relay-callsign-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

/* The callsign is the thing you read aloud, so give it the display treatment. */
.relay-callsign {
  margin:2px 0 0;
  font-size:2.1rem;
  font-weight:700;
  letter-spacing:.34em;
  color:#e9f4f4;
  text-shadow:0 0 18px #1595ff88;
}

.relay-callsign-actions { display:flex; gap:8px; flex-wrap:wrap; }

.relay-hint {
  margin:10px 0 12px;
  font-size:.78rem;
  color:#8ea6b4;
}

.relay-seats {
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}

.relay-seat {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border:1px solid #223d4c;
  border-radius:5px;
  background:#06121bcc;
  font-size:.84rem;
}

.relay-seat-dot {
  width:9px; height:9px;
  border-radius:50%;
  background:#2b4857;
  box-shadow:inset 0 0 0 1px #0006;
}
/* A docked station lights up, same language as the seat lights above. */
.relay-seat.docked .relay-seat-dot {
  background:var(--pf-blue-bright);
  box-shadow:0 0 8px var(--pf-blue), inset 0 0 0 1px #0006;
}
.relay-seat-name { color:#dce9ed; }
.relay-seat-status {
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7d94a2;
}
.relay-seat.docked .relay-seat-status { color:var(--pf-blue-bright); }

.setup-message.success { color:#6fd39b; }
.setup-message.warning { color:#f0a58f; }

@media (prefers-reduced-motion: reduce) {
  .relay-callsign { text-shadow:none; }
}

/* The panels set `display:grid` on a class, which beats the user-agent
   `[hidden] { display:none }` rule -- so toggling .hidden did nothing and the
   setup and relay panels rendered on top of each other. */
.setup-panel[hidden],
.relay-panel[hidden] { display:none; }