:root {
  color-scheme: dark;
  --bg: #14243a;
  --panel: #20364d;
  --cyan: #8ce6ed;
  --blue: #3979ff;
  --violet: #a855f7;
  --pink: #ff3cb4;
  --text: #f2f7fc;
  --muted: #b7c9da;
  --line: rgba(165, 208, 227, .24);
  --surface-raised: #294259;
  --focus-ring: #b5f4ff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% -20%, rgba(45, 102, 255, .2), transparent 36%),
    radial-gradient(circle at 95% 45%, rgba(168, 85, 247, .11), transparent 30%),
    var(--bg);
}

button { color: inherit; font: inherit; }

.stars, .stars::before, .stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(#fff 0.7px, transparent .8px),
    radial-gradient(#73a4ff 0.6px, transparent .8px);
  background-position: 0 0, 34px 51px;
  background-size: 83px 83px, 127px 127px;
  opacity: .3;
}

.stars::before { transform: scale(1.4); opacity: .16; }
.stars::after { transform: scale(.7); opacity: .24; }

.app { position: relative; z-index: 1; min-height: 100vh; }


.topbar {
  width: min(1420px, calc(100% - 64px));
  min-height: 94px;
  height: auto;
  padding: 12px 0;
  flex-wrap: wrap;
  gap: 16px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67, 245, 255, .5);
  color: var(--cyan);
  font: 900 22px/1 monospace;
  transform: rotate(45deg);
  box-shadow: inset 0 0 18px rgba(67, 245, 255, .13), 0 0 18px rgba(67, 245, 255, .12);
}

.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong { display: block; font-size: 18px; letter-spacing: 1px; }
.brand strong i { color: var(--cyan); font-style: normal; }
.brand small { color: var(--muted); font: 9px/1.7 monospace; letter-spacing: 3px; }

.top-actions { display: flex; gap: 10px; }
.pilot-profile {
  margin-left: auto;
  margin-right: 22px;
  display: grid;
  grid-template-columns: auto 110px auto auto auto;
  gap: 10px;
  align-items: center;
  color: #7890b9;
  font: 9px/1 monospace;
}
.pilot-level { color: var(--cyan); font-size: 10px; }
.pilot-level b { font-size: 16px; }
.pilot-progress, .mission-progress, .combo-display > span {
  display: block;
  height: 3px;
  overflow: hidden;
  background: rgba(125, 157, 212, .14);
}
.pilot-progress i, .mission-progress i, .combo-display > span i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 9px var(--cyan);
  transition: width .25s ease;
}
.pilot-profile small { display: block; margin-bottom: 3px; color: #526785; font-size: 7px; letter-spacing: 1px; }
.pilot-profile > span:nth-child(3) b { color: #9eb1d1; font-weight: 500; }
.pilot-style-target { max-width: 125px; padding-left: 10px; border-left: 1px solid rgba(124,164,255,.13); }
.pilot-style-target b { display: block; overflow: hidden; color: #d8b4ff; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pilot-style-target em { display: inline-block; margin-top: 5px; padding: 3px 5px; color: #82ff9a; border: 1px solid rgba(130,255,154,.16); background: rgba(130,255,154,.035); font: 6px/1 monospace; letter-spacing: 1px; font-style: normal; }
.pilot-style-target.complete b { color: #ffe372; text-shadow: 0 0 12px rgba(255,227,114,.28); }
.pilot-style-target.complete em { color: #ffe372; border-color: rgba(255,227,114,.26); background: rgba(255,227,114,.06); box-shadow: 0 0 14px rgba(255,227,114,.08); }
.pilot-archive-target { max-width: 96px; padding: 0 0 0 10px; text-align: left; border: 0; border-left: 1px solid rgba(67,245,255,.13); background: transparent; cursor: pointer; font-family: inherit; }
.pilot-archive-target b { display: block; color: #43f5ff; font-weight: 500; }
.pilot-archive-target em { display: inline-block; margin-top: 5px; padding: 3px 5px; color: #ffe372; border: 1px solid rgba(255,227,114,.16); background: rgba(255,227,114,.035); font: 6px/1 monospace; letter-spacing: 1px; font-style: normal; }
.pilot-archive-target:hover b, .pilot-archive-target:focus-visible b { color: #aefbff; text-shadow: 0 0 12px rgba(67,245,255,.28); }
.pilot-archive-target.complete b { color: #ffe372; text-shadow: 0 0 12px rgba(255,227,114,.26); }
.pilot-archive-target.complete em { color: #82ff9a; border-color: rgba(130,255,154,.24); background: rgba(130,255,154,.055); box-shadow: 0 0 14px rgba(130,255,154,.08); }
.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(11, 20, 47, .7);
  cursor: pointer;
  transition: .2s;
}
.icon-button:hover { border-color: var(--cyan); color: var(--cyan); }
.install-button[data-state="ready"] { color: #82ff9a; border-color: rgba(130,255,154,.42); box-shadow: inset 0 0 16px rgba(130,255,154,.06), 0 0 16px rgba(130,255,154,.08); animation: install-ready 1.4s ease-in-out infinite alternate; }
.install-button[data-state="prompting"] { color: #ffe372; cursor: wait; }
.top-actions #installButton { width: auto; min-width: 104px; flex: 0 0 auto; padding-inline: 12px; white-space: nowrap; overflow-wrap: normal; }
@keyframes install-ready { to { border-color: rgba(130,255,154,.78); box-shadow: inset 0 0 20px rgba(130,255,154,.1), 0 0 20px rgba(130,255,154,.16); } }

.screen { width: min(1420px, calc(100% - 64px)); margin: auto; }
.hidden { display: none !important; }

.menu-screen { padding: 72px 0 28px; }
.hero-copy { text-align: center; }
.eyebrow {
  color: #8ea2c7;
  font: 13px/1.2 "Cascadia Mono", Consolas, monospace;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.eyebrow span { display: inline-block; width: 30px; height: 1px; margin: 0 10px 3px 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero-copy h1 { margin: 18px 0; font-size: clamp(36px, 5vw, 72px); line-height: 1.2; letter-spacing: .01em; }
html body .hero-copy h1 em {
  color: #83eaff;
  display: inline-block;
  margin-top: .45em;
  font-size: clamp(24px, 3vw, 42px) !important;
  line-height: 1.4 !important;
  letter-spacing: .02em;
  font-style: normal;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 35px rgba(67, 245, 255, .2);
}
.intro { color: var(--muted); font-size: 15px; }

.dimension-signal {
  --signal-color: #7ceaff;
  position: relative;
  max-width: 860px;
  min-height: 112px;
  margin: 28px auto 0;
  padding: 16px 66px 16px 198px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--signal-color) 28%, transparent);
  background: linear-gradient(105deg, color-mix(in srgb, var(--signal-color) 8%, transparent), rgba(5,10,28,.76) 58%);
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--signal-color) 4%, transparent), 0 16px 55px rgba(0,0,0,.18);
  transition: border-color .25s ease, background .25s ease;
}
.dimension-signal[data-mode="classic"] { --signal-color: #43f5ff; }
.dimension-signal[data-mode="flight"] { --signal-color: #7c9dff; }
.dimension-signal[data-mode="relativity"] { --signal-color: #ff4fbd; }
.dimension-signal-visual { position: absolute; inset: 0 auto 0 0; width: 180px; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--signal-color) 20%, transparent); perspective: 160px; }
.signal-grid { position: absolute; inset: -35%; opacity: .28; background-image: linear-gradient(color-mix(in srgb, var(--signal-color) 32%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--signal-color) 32%, transparent) 1px, transparent 1px); background-size: 18px 18px; transform: rotateX(58deg) translateY(16px); animation: signal-drift 4s linear infinite; }
.signal-vector { position: absolute; left: 24px; right: 24px; top: 56px; height: 2px; background: linear-gradient(90deg, transparent, var(--signal-color), transparent); box-shadow: 0 0 12px var(--signal-color); transform-origin: center; }
.signal-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 2px solid var(--signal-color); transform: translate(-50%,-50%) rotate(45deg); box-shadow: inset 0 0 12px color-mix(in srgb, var(--signal-color) 25%, transparent), 0 0 18px color-mix(in srgb, var(--signal-color) 45%, transparent); animation: signal-pulse 1.8s ease-in-out infinite; }
.signal-orbit { position: absolute; left: 50%; top: 50%; width: 92px; height: 38px; border: 1px solid color-mix(in srgb, var(--signal-color) 45%, transparent); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); transition: transform .3s ease; }
.dimension-signal[data-mode="classic"] .signal-grid { transform: rotateX(0) translateY(0); }
.dimension-signal[data-mode="classic"] .signal-vector { left: 34px; right: 56px; top: 72px; clip-path: polygon(0 0, 55% 0, 55% 60%, 100% 60%, 100% 100%, 0 100%); height: 18px; background: color-mix(in srgb, var(--signal-color) 70%, transparent); }
.dimension-signal[data-mode="classic"] .signal-orbit { opacity: 0; }
.dimension-signal[data-mode="flight"] .signal-core { width: 0; height: 0; border: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 28px solid var(--signal-color); transform: translate(-50%,-55%); filter: drop-shadow(0 0 8px var(--signal-color)); }
.dimension-signal[data-mode="flight"] .signal-vector { transform: rotate(-9deg); }
.dimension-signal[data-mode="flight"] .signal-orbit { width: 128px; height: 52px; transform: translate(-50%,-48%) rotate(4deg); }
.dimension-signal[data-mode="relativity"] .signal-grid { opacity: .12; transform: rotate(22deg) scale(.8); }
.dimension-signal[data-mode="relativity"] .signal-core { border-radius: 50%; transform: translate(-50%,-50%); }
.dimension-signal[data-mode="relativity"] .signal-vector { transform: rotate(28deg); }
.dimension-signal[data-mode="relativity"] .signal-orbit { width: 126px; height: 54px; transform: translate(-50%,-50%) rotate(-28deg); animation: signal-orbit 3.2s linear infinite; }
.dimension-signal-copy { position: relative; z-index: 1; }
.dimension-signal-copy small { color: var(--signal-color); font: 7px/1 monospace; letter-spacing: 3px; }
.dimension-signal-copy strong { display: block; margin: 8px 0 5px; font-size: 17px; text-shadow: 0 0 16px color-mix(in srgb, var(--signal-color) 24%, transparent); }
.dimension-signal-copy span { display: block; color: #8799bc; font-size: 9px; line-height: 1.5; }
.dimension-signal-copy em { display: block; margin-top: 8px; color: #bed0ed; font: normal 7px/1 monospace; letter-spacing: 1px; }
.dimension-signal-brief {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.dimension-signal-brief b {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 6px 7px;
  color: #607595;
  border: 1px solid color-mix(in srgb, var(--signal-color) 22%, transparent);
  background: color-mix(in srgb, var(--signal-color) 5%, transparent);
  font: 6px/1 monospace;
  letter-spacing: 1px;
}
.dimension-signal-brief i {
  overflow: hidden;
  color: #e8fbff;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px color-mix(in srgb, var(--signal-color) 38%, transparent);
}
.dimension-signal > b { position: absolute; right: 18px; top: 16px; color: color-mix(in srgb, var(--signal-color) 65%, #fff); font: 8px/1 monospace; letter-spacing: 2px; }
@keyframes signal-drift { to { background-position: 0 36px, 36px 0; } }
@keyframes signal-pulse { 50% { opacity: .55; transform: translate(-50%,-50%) rotate(225deg) scale(1.22); } }
@keyframes signal-orbit { to { transform: translate(-50%,-50%) rotate(332deg); } }

.launch-directive {
  position: relative;
  max-width: 860px;
  margin: 28px auto -10px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,227,114,.22);
  background:
    linear-gradient(90deg, rgba(255,227,114,.08), rgba(67,245,255,.055), rgba(255,79,189,.045)),
    rgba(7,12,30,.72);
  box-shadow: 0 16px 55px rgba(0,0,0,.2), inset 0 0 34px rgba(255,227,114,.035);
}
.launch-directive::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64px;
  content: "";
  background: linear-gradient(90deg, rgba(255,255,255,.1), transparent);
  transform: skewX(-18deg) translateX(-120%);
  animation: launch-scan 3.8s ease-in-out infinite;
}
.launch-directive span { color: #ffe372; font: 8px/1 monospace; letter-spacing: 3px; }
.launch-directive strong { display: block; margin: 7px 0 5px; color: #fff8cf; font-size: 15px; text-shadow: 0 0 16px rgba(255,227,114,.22); }
.launch-directive small { color: #8798ba; font-size: 9px; line-height: 1.6; }
.launch-directive button { position: relative; z-index: 1; padding: 12px 16px; display: inline-grid; grid-auto-flow: column; gap: 8px; align-items: center; color: #fff5c4; border: 1px solid rgba(255,227,114,.42); background: rgba(255,227,114,.07); cursor: pointer; font-size: 10px; }
.launch-directive button:hover { border-color: #ffe372; box-shadow: 0 0 24px rgba(255,227,114,.12); }
.launch-directive button i { color: var(--cyan); font-style: normal; }
.launch-action-chip {
  padding: 4px 6px;
  color: #07111f;
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(90deg, #ffe372, #7ceaff);
  font: 7px/1 monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255,227,114,.16);
}
@keyframes launch-scan { 45%, 100% { transform: skewX(-18deg) translateX(1420%); } }

.dimension-academy {
  max-width: 1180px;
  margin: 24px auto -8px;
  display: grid;
  grid-template-columns: 1.12fr repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.dimension-academy > div,
.dimension-academy article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 14px 15px;
  border: 1px solid rgba(124,234,255,.15);
  background: linear-gradient(145deg, rgba(67,245,255,.04), rgba(255,255,255,.018)), rgba(7,12,30,.72);
  box-shadow: inset 0 0 26px rgba(67,245,255,.025);
}
.dimension-academy > div::before,
.dimension-academy article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  content: "";
  background: var(--academy-accent, #43f5ff);
  box-shadow: 0 0 14px var(--academy-accent, #43f5ff);
}
.dimension-academy span,
.dimension-academy b {
  display: block;
  color: var(--academy-accent, #43f5ff);
  font: 7px/1 monospace;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.dimension-academy strong {
  display: block;
  margin: 9px 0 7px;
  color: #f5f7ff;
  font-size: 13px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--academy-accent, #43f5ff) 20%, transparent);
}
.dimension-academy small {
  display: block;
  color: #8395b8;
  font-size: 9px;
  line-height: 1.55;
}
.dimension-academy em {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  color: #ffe372;
  font: normal 7px/1.2 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.dimension-academy button {
  margin-top: 12px;
  padding: 9px 10px;
  width: 100%;
  color: #06131c;
  border: 1px solid color-mix(in srgb, var(--academy-accent, #43f5ff) 70%, white 10%);
  background: linear-gradient(90deg, var(--academy-accent, #43f5ff), #7ceaff);
  cursor: pointer;
  font: 8px/1 monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dimension-academy button:hover,
.dimension-academy button:focus-visible {
  filter: brightness(1.08);
  outline: 1px solid rgba(255,255,255,.35);
  outline-offset: 2px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--academy-accent, #43f5ff) 18%, transparent);
}
.dimension-academy button i { font-style: normal; }
.dimension-academy [data-academy-mode="flight"] { --academy-accent: #8db6ff; border-color: rgba(124,157,255,.22); background: linear-gradient(145deg, rgba(124,157,255,.07), rgba(67,245,255,.025)), rgba(7,12,30,.72); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.dimension-academy [data-academy-mode="relativity"] { --academy-accent: #ff4fbd; border-color: rgba(255,79,189,.24); background: linear-gradient(145deg, rgba(255,79,189,.075), rgba(67,245,255,.025)), rgba(7,12,30,.72); border-radius: 18px 4px 18px 4px; }
.dimension-academy [data-academy-mode="replay"] { --academy-accent: #ffe372; border-color: rgba(255,227,114,.22); background: linear-gradient(145deg, rgba(255,227,114,.06), rgba(216,180,255,.03)), rgba(7,12,30,.72); }

.menu-chase-beacon {
  max-width: 1180px;
  min-height: 86px;
  margin: 20px auto -18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr minmax(300px, .72fr) minmax(170px, .34fr) minmax(150px, .32fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(255,227,114,.24);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,227,114,.09), transparent 34%),
    linear-gradient(90deg, rgba(67,245,255,.045), rgba(255,79,189,.045)),
    rgba(7,12,30,.74);
  box-shadow: inset 0 0 34px rgba(255,227,114,.035), 0 14px 42px rgba(0,0,0,.16);
}
.menu-chase-beacon[data-complete="true"] { border-color: rgba(130,255,154,.28); background: linear-gradient(90deg, rgba(130,255,154,.06), rgba(67,245,255,.035)), rgba(7,12,30,.74); }
.menu-chase-beacon[data-archive-complete="true"] .menu-chase-archive { border-color: rgba(130,255,154,.26); background: rgba(130,255,154,.045); }
.menu-chase-beacon[data-route="classic"] { border-color: rgba(67,245,255,.24); box-shadow: inset 0 0 34px rgba(67,245,255,.035), 0 14px 42px rgba(0,0,0,.16); }
.menu-chase-beacon[data-route="flight"] { border-color: rgba(124,157,255,.32); background: radial-gradient(circle at 18% 50%, rgba(124,157,255,.1), transparent 34%), linear-gradient(90deg, rgba(67,245,255,.045), rgba(124,157,255,.055)), rgba(7,12,30,.74); }
.menu-chase-beacon[data-route="relativity"] { border-color: rgba(255,79,189,.34); background: radial-gradient(circle at 18% 50%, rgba(255,79,189,.11), transparent 34%), linear-gradient(90deg, rgba(255,79,189,.06), rgba(67,245,255,.045)), rgba(7,12,30,.74); }
.menu-chase-beacon[data-route="expedition"] { border-color: rgba(216,180,255,.34); background: linear-gradient(110deg, rgba(67,245,255,.055), rgba(216,180,255,.06), rgba(255,79,189,.055)), rgba(7,12,30,.74); }
.menu-chase-beacon[data-route="flight"] .menu-chase-route b { border-color: rgba(124,157,255,.22); background: rgba(124,157,255,.045); }
.menu-chase-beacon[data-route="relativity"] .menu-chase-route b { border-color: rgba(255,79,189,.22); background: rgba(255,79,189,.045); }
.menu-chase-beacon[data-route="expedition"] .menu-chase-route b { border-color: rgba(216,180,255,.22); background: rgba(216,180,255,.045); }
.menu-chase-beacon[data-spectacle="JET-FLIGHT FANTASY"] #menuChaseSpectacle { color: #b8d5ff; text-shadow: 0 0 12px rgba(124,157,255,.38); }
.menu-chase-beacon[data-spectacle="RELATIVITY THEATRE"] #menuChaseSpectacle { color: #ffd6f4; text-shadow: 0 0 12px rgba(255,79,189,.38); }
.menu-chase-beacon[data-spectacle="DIMENSION ODYSSEY"] #menuChaseSpectacle { color: #ead7ff; text-shadow: 0 0 12px rgba(216,180,255,.38); }
.menu-chase-beacon span { color: #ffe372; font: 8px/1 monospace; letter-spacing: 3px; }
.menu-chase-beacon strong { display: block; margin: 7px 0 5px; color: #fff8cf; font-size: 14px; text-shadow: 0 0 14px rgba(255,227,114,.18); }
.menu-chase-beacon small { color: #8294b8; font-size: 9px; line-height: 1.55; }
.menu-chase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.menu-chase-grid b { display: grid; gap: 4px; min-width: 0; padding: 8px 9px; color: #66799a; border: 1px solid rgba(255,227,114,.14); background: rgba(255,227,114,.035); font: 6px/1 monospace; letter-spacing: 1px; }
.menu-chase-grid i { overflow: hidden; color: #f1fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(255,227,114,.2); }
.menu-chase-route { display: grid; gap: 6px; min-width: 0; }
.menu-chase-route b { display: grid; gap: 4px; min-width: 0; padding: 8px 9px; color: #607595; border: 1px solid rgba(124,234,255,.16); background: rgba(67,245,255,.035); font: 6px/1 monospace; letter-spacing: 1px; }
.menu-chase-route i { overflow: hidden; color: #d8fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(67,245,255,.24); }
.menu-chase-archive {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(216,180,255,.16);
  background: rgba(216,180,255,.035);
}
.menu-chase-archive b { display: flex; justify-content: space-between; gap: 8px; color: #7d8cad; font: 6px/1 monospace; letter-spacing: 1px; }
.menu-chase-archive b i { overflow: hidden; color: #ffe372; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.menu-chase-archive span { display: block; height: 5px; overflow: hidden; border: 1px solid rgba(255,227,114,.14); background: rgba(255,255,255,.035); }
.menu-chase-archive span i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #43f5ff, #d8b4ff, #ffe372); box-shadow: 0 0 14px rgba(255,227,114,.16); }
.menu-chase-archive em { overflow: hidden; color: #9fb0d1; font: normal 6px/1.25 monospace; letter-spacing: .8px; text-overflow: ellipsis; white-space: nowrap; }
.menu-chase-actions { display: grid; gap: 7px; min-width: 150px; }
.menu-chase-beacon button { padding: 11px 13px; color: #06131c; border: 1px solid #ffe372; background: linear-gradient(90deg, #ffe372, #7ceaff); cursor: pointer; font-size: 9px; letter-spacing: 1px; }
.menu-chase-beacon #menuChaseButton { color: #fff5c4; border-color: rgba(255,227,114,.3); background: rgba(255,227,114,.06); }
.menu-chase-beacon button:hover { filter: brightness(1.08); box-shadow: 0 0 22px rgba(255,227,114,.16); }
.menu-chase-beacon button i { margin-left: 7px; font-style: normal; }

.daily-route {
  max-width: 1180px;
  min-height: 88px;
  margin: 38px auto -28px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(255,75,181,.24);
  background:
    linear-gradient(90deg, rgba(255,60,180,.08), transparent 35%),
    rgba(8,14,34,.74);
  box-shadow: inset 0 0 38px rgba(255,60,180,.025);
}
.daily-sigil { display: grid; place-items: center; width: 48px; height: 48px; color: var(--pink); border: 1px solid rgba(255,60,180,.38); transform: rotate(45deg); font-size: 22px; box-shadow: 0 0 20px rgba(255,60,180,.12); }
.daily-copy > span { color: #9a729b; font: 8px/1 monospace; letter-spacing: 2px; }
.daily-copy > span b { color: var(--pink); }
.daily-copy strong { display: block; margin: 7px 0 4px; font-size: 15px; }
.daily-copy small, .daily-modifier small { color: #657898; font-size: 9px; }
#dailyStreak { display: block; margin-top: 5px; color: #ffe372; letter-spacing: .08em; text-shadow: 0 0 14px rgba(255,227,114,.12); }
#dailyStreakBadge { display: inline-block; margin-top: 6px; padding: 5px 7px; color: #d8b4ff; border: 1px solid rgba(216,180,255,.18); background: linear-gradient(90deg, rgba(216,180,255,.06), rgba(67,245,255,.035)); font: 7px/1 monospace; letter-spacing: .14em; text-transform: uppercase; }
#dailyTarget { display: inline-block; margin-top: 6px; padding: 5px 7px; color: #bff8ff; border: 1px solid rgba(67,245,255,.18); background: rgba(67,245,255,.045); font: 7px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.daily-modifier { min-width: 130px; padding-left: 18px; border-left: 1px solid var(--line); }
.daily-modifier small { display: block; margin-bottom: 6px; }
.daily-modifier b { color: #d9b4e2; font: 10px/1 monospace; }
.daily-button { padding: 12px 16px; border: 1px solid rgba(255,75,181,.48); color: #ffd7ef; background: rgba(255,60,180,.08); cursor: pointer; font-size: 10px; letter-spacing: 1px; }
.daily-button:hover { background: rgba(255,60,180,.17); box-shadow: 0 0 25px rgba(255,60,180,.1); }
.daily-button i { margin-left: 9px; color: var(--pink); font-style: normal; }
.daily-button.completed { color: #82ff9a; border-color: rgba(130,255,154,.35); }
.archive-recommended { position: relative; border-color: rgba(255,227,114,.45) !important; box-shadow: 0 0 28px rgba(255,227,114,.1), inset 0 0 22px rgba(255,227,114,.035); }
.archive-recommendation-badge { position: absolute; z-index: 6; right: 12px; top: 10px; padding: 5px 7px; color: #ffe372; border: 1px solid rgba(255,227,114,.28); background: rgba(8,13,28,.82); font: 7px/1 monospace; letter-spacing: 1px; pointer-events: none; }
.archive-recommendation-detail { position: static; display: block; flex: 0 0 auto; min-width: 0; margin-top: 12px; padding: 10px; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; color: #fff2b3; border: 1px solid rgba(255,227,114,.18); background: rgba(8,13,28,.76); font: inherit; font-size: 16px; line-height: 1.5; pointer-events: none; }
html[data-font-size="large"] .archive-recommendation-detail { font-size: 18px; }
html[data-font-size="xlarge"] .archive-recommendation-detail { font-size: 20px; }
.expedition-route {
  max-width: 1180px;
  min-height: 82px;
  margin: 36px auto -28px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(67,245,255,.28);
  background: linear-gradient(90deg, rgba(67,245,255,.07), rgba(168,85,247,.05), transparent);
}
.expedition-emblem { display: grid; place-items: center; width: 48px; height: 48px; color: var(--cyan); border: 1px solid rgba(67,245,255,.4); border-radius: 50%; font-size: 25px; box-shadow: 0 0 24px rgba(67,245,255,.12); }
.expedition-route > div:nth-child(2) > span { color: #6c88ad; font: 8px/1 monospace; letter-spacing: 2px; }
.expedition-route > div:nth-child(2) > strong { display: block; margin: 7px 0 4px; font-size: 15px; }
.expedition-route > div:nth-child(2) > small { color: #657898; font-size: 9px; }
.expedition-path { display: flex; gap: 8px; align-items: center; }
.expedition-path i { padding: 7px; color: var(--cyan); border: 1px solid var(--line); font: normal 9px/1 monospace; }
.expedition-path b { color: #526886; font-weight: 400; }
.expedition-route button { padding: 12px 16px; color: #d8fbff; border: 1px solid rgba(67,245,255,.5); background: rgba(67,245,255,.07); cursor: pointer; font-size: 10px; }
.expedition-route button i { margin-left: 8px; color: var(--cyan); font-style: normal; }
.expedition-actions { display: flex; gap: 7px; }
.expedition-actions #resumeExpeditionButton { color: #ffe372; border-color: rgba(255,227,114,.38); background: rgba(255,227,114,.05); }

.difficulty-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 18px auto 10px;
  padding: 16px 20px;
  border: 1px solid rgba(98, 215, 232, .28);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(15, 50, 76, .72), rgba(19, 28, 61, .58));
  box-shadow: inset 0 0 28px rgba(64, 212, 233, .045);
}
.difficulty-selector-copy { min-width: 0; }
.difficulty-selector .eyebrow { margin: 0 0 4px; color: var(--cyan); font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.difficulty-selector h2 { margin: 0; font-size: 17px; }
.difficulty-selector p:not(.eyebrow) { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.difficulty-selector select {
  flex: 0 0 min(220px, 38%);
  min-height: 48px;
  padding: 8px 38px 8px 14px;
  color: #e8fbff;
  border: 1px solid rgba(104, 222, 235, .48);
  border-radius: 9px;
  background: #10283c;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.difficulty-selector select:focus-visible { outline: 3px solid #f4d56d; outline-offset: 2px; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 52px auto 44px;
}

.mode-card {
  position: relative;
  min-height: 565px;
  padding: 26px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(13, 23, 53, .82), rgba(6, 11, 28, .72));
  cursor: pointer;
  transition: transform .28s ease, border-color .28s, box-shadow .28s;
}

.mode-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
}

.mode-card:hover, .mode-card:focus-visible {
  outline: 0;
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent), transparent 38%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 0 50px color-mix(in srgb, var(--accent), transparent 94%);
}

.classic { --accent: var(--cyan); }
.flight { --accent: #5988ff; }
.relativity { --accent: var(--pink); }
.featured { border-color: rgba(80, 129, 255, .44); transform: translateY(-10px); }
.featured:hover { transform: translateY(-16px); }
.recommended {
  position: absolute; top: 0; right: 0;
  padding: 7px 13px;
  color: #a9c1ff; background: rgba(58, 103, 226, .24);
  font: 9px/1 monospace; letter-spacing: 2px;
}
.card-number { position: absolute; top: 22px; left: 24px; color: rgba(166, 186, 224, .42); font: 12px/1 monospace; }
.mode-visual { position: relative; display: block; height: 190px; margin: -10px -26px 20px; overflow: hidden; }
.mode-visual::after {
  position: absolute;
  inset: -20% -45%;
  content: "";
  background: linear-gradient(115deg, transparent 34%, color-mix(in srgb, var(--accent), white 28%) 49%, transparent 64%);
  opacity: .18;
  transform: translateX(-58%) skewX(-18deg);
  animation: mode-entry-sweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
.mode-card[data-mode="flight"] .mode-visual::after { animation-delay: -1.4s; }
.mode-card[data-mode="relativity"] .mode-visual::after { animation-delay: -2.8s; }
@keyframes mode-entry-sweep {
  55%, 100% { transform: translateX(58%) skewX(-18deg); }
}

.mode-cockpit {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: -8px 0 14px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 72%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 86%), transparent 62%),
    rgba(255,255,255,.018);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent), transparent 94%);
}
.mode-cockpit::before {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--accent), transparent 88%) 13px 14px);
  opacity: .36;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.mode-cockpit::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), white 14%), transparent);
  animation: cockpit-scanline 2.8s ease-in-out infinite;
}
.mode-cockpit b,
.mode-cockpit i,
.mode-cockpit em {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font: normal 6px/1 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.mode-cockpit b { color: color-mix(in srgb, var(--accent), white 40%); }
.mode-cockpit i { color: #d8fbff; font-style: normal; }
.mode-cockpit em { color: #ffe372; font-style: normal; }
.mode-cockpit[data-mode-cockpit="flight"] { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.mode-cockpit[data-mode-cockpit="relativity"] { border-radius: 999px; }
@keyframes cockpit-scanline {
  0%, 100% { opacity: .16; transform: translateX(-34%); }
  50% { opacity: .62; transform: translateX(34%); }
}

.grid-visual {
  background:
    linear-gradient(rgba(67,245,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,245,255,.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(transparent, #000 32%, #000 85%, transparent);
}
.pixel-snake {
  position: absolute; width: 34px; height: 14px; left: 42%; top: 48%;
  background: var(--cyan); box-shadow: -22px 0 var(--cyan), -44px 0 var(--cyan), -44px 22px var(--cyan), 0 0 20px var(--cyan);
}
.pixel-food { position: absolute; width: 12px; height: 12px; right: 22%; top: 34%; border-radius: 50%; background: #ffef76; box-shadow: 0 0 20px #ffe45b; }

.flight-visual {
  perspective: 250px;
  background: radial-gradient(ellipse at 50% 55%, rgba(101, 139, 255, .35), transparent 32%);
}
.horizon {
  position: absolute; inset: 53% -20% auto; height: 120px;
  transform: rotateX(68deg);
  background:
    linear-gradient(rgba(90,132,255,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,132,255,.24) 1px, transparent 1px);
  background-size: 24px 24px;
}
.jet {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  color: #c7d6ff; font-style: normal; font-size: 32px; text-shadow: 0 12px 18px #4779ff, 0 0 24px #4779ff;
}
.jet::before, .jet::after { position: absolute; top: 12px; content: ""; width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #6092ff); }
.jet::before { right: 19px; }
.jet::after { left: 19px; transform: scaleX(-1); }

.relativity-visual { background: radial-gradient(circle, rgba(255,60,180,.15), transparent 45%); }
.orbit { position: absolute; left: 50%; top: 50%; width: 150px; height: 65px; border: 1px solid rgba(255, 74, 184, .7); border-radius: 50%; transform: translate(-50%, -50%) rotate(25deg); box-shadow: 0 0 15px rgba(255,60,180,.18); }
.orbit.two { transform: translate(-50%, -50%) rotate(-45deg); border-color: rgba(80, 165, 255, .7); }
.singularity { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 50%; transform: translate(-50%, -50%); background: #080510; box-shadow: 0 0 8px #fff, 0 0 26px #ff3cb4, 0 0 58px #3979ff; }

.mode-kicker { display: block; margin-bottom: 10px; color: var(--accent); font: 9px/1 monospace; letter-spacing: 2px; }
.mode-card > strong { display: block; margin-bottom: 12px; font-size: 22px; letter-spacing: 1px; }
.mode-card > small { display: block; min-height: 48px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.mode-spectacle {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 70%);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent), transparent 86%), transparent 64%),
    rgba(255,255,255,.024);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent), transparent 92%);
}
.mode-spectacle::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--accent), transparent 72%), transparent 38%);
  opacity: .45;
  pointer-events: none;
}
.mode-spectacle b,
.mode-spectacle em {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-spectacle b {
  color: color-mix(in srgb, var(--accent), white 36%);
  font: 8px/1 monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.mode-spectacle em {
  color: #d8fbff;
  font: normal 9px/1.4 monospace;
}
.mode-spectacle[data-mode-spectacle="flight"] { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.mode-spectacle[data-mode-spectacle="relativity"] { border-radius: 18px 4px 18px 4px; }
.mode-meta { display: flex; gap: 7px; margin-top: 16px; }
.mode-meta b { padding: 6px 8px; color: #8fa7cf; border: 1px solid var(--line); border-radius: 2px; font: 9px/1 monospace; }
.mode-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.mode-highlights i {
  position: relative;
  padding: 5px 7px;
  overflow: hidden;
  color: color-mix(in srgb, var(--accent), white 36%);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 72%);
  background: color-mix(in srgb, var(--accent), transparent 93%);
  border-radius: 999px;
  font: normal 8px/1 monospace;
  letter-spacing: 1px;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent), transparent 94%);
}
.mode-highlights i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.mode-card:hover .mode-highlights i::after { transform: translateX(120%); }
.mode-card-stat {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 2px;
}
.mode-card-stat b {
  padding: 8px 9px;
  color: #607595;
  border: 1px solid rgba(124,164,255,.14);
  background: rgba(255,255,255,.025);
  font: 7px/1.35 monospace;
  letter-spacing: 1px;
}
.mode-card-stat i {
  display: block;
  margin-top: 4px;
  color: #d8fbff;
  font-style: normal;
  font-size: 10px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent), transparent 58%);
}
.mode-boss-intel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  margin-top: 9px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 72%);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent), transparent 91%), rgba(255,255,255,.018));
  box-shadow: inset 2px 0 color-mix(in srgb, var(--accent), white 16%);
}
.mode-boss-intel::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 55%, color-mix(in srgb, var(--accent), transparent 92%), transparent);
}
.mode-boss-intel small {
  color: #607595;
  font: 6px/1.2 monospace;
  letter-spacing: .9px;
}
.mode-boss-intel b {
  color: color-mix(in srgb, var(--accent), white 35%);
  font: 10px/1 monospace;
  letter-spacing: 1.2px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent), transparent 48%);
}
.mode-boss-intel em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 138px;
  color: #91a0ba;
  font: normal 6px/1.45 monospace;
  text-align: right;
}
.mode-boss-intel[data-archetype="wingpack"],
.mode-boss-intel[data-archetype="twin"],
.mode-boss-intel[data-archetype="lattice"] { border-color: rgba(255,60,180,.52); }
.mode-boss-intel[data-archetype="razor"],
.mode-boss-intel[data-archetype="horizon"],
.mode-boss-intel[data-archetype="overload"] { border-color: rgba(255,227,114,.58); }
.mode-signature {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 9px;
  color: #9fb2d4;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 78%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 94%), rgba(255,255,255,.016));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent), transparent 96%);
}
.mode-signature::before {
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--accent), white 10%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent), white 22%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent), transparent 30%);
}
.mode-signature b {
  color: color-mix(in srgb, var(--accent), white 38%);
  font: 8px/1 monospace;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.mode-signature em {
  grid-column: 2;
  color: #8191af;
  font: normal 6px/1.45 monospace;
}
.mode-promise {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 9px;
  color: #a9b8d2;
  border: 1px dashed color-mix(in srgb, var(--accent), transparent 72%);
  background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--accent), transparent 88%), transparent 58%), rgba(255,255,255,.012);
}
.mode-promise b {
  color: #ffe372;
  font: 7px/1 monospace;
  letter-spacing: 1.2px;
}
.mode-promise em {
  overflow: hidden;
  color: #d8fbff;
  font: normal 6px/1.45 monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-intensity {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 80%);
  background: linear-gradient(90deg, rgba(255,255,255,.018), color-mix(in srgb, var(--accent), transparent 95%));
}
.mode-intensity b,
.mode-intensity i,
.mode-intensity em {
  overflow: hidden;
  font: normal 6px/1 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-intensity b { color: color-mix(in srgb, var(--accent), white 36%); }
.mode-intensity i { color: #8294b7; font-style: normal; }
.mode-intensity em { color: #ffe372; }
.mode-control {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 92%), rgba(255,255,255,.014));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent), transparent 94%);
}
.mode-control b,
.mode-control i,
.mode-control em {
  overflow: hidden;
  font: normal 6px/1 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-control b { color: color-mix(in srgb, var(--accent), white 42%); }
.mode-control i { color: #d8fbff; font-style: normal; }
.mode-control em { color: #82ff9a; }
.mode-action {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 74%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 86%), rgba(255,227,114,.035));
}
.mode-action b,
.mode-action i {
  overflow: hidden;
  font: normal 6px/1 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-action b { color: #ffe372; }
.mode-action i { color: #f5fbff; font-style: normal; text-transform: uppercase; }
.launch { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; align-items: center; color: #bdc9df; font-size: 11px; letter-spacing: 2px; }
.launch i { color: var(--accent); font-size: 20px; font-style: normal; transition: .2s; }
.mode-card:hover .launch i { transform: translateX(5px); }

.menu-footer { display: flex; justify-content: space-between; color: #586987; font: 9px/1 monospace; letter-spacing: 2px; }
.menu-footer b { color: var(--cyan); }
.update-prompt { position: fixed; z-index: 30; left: 50%; bottom: 22px; width: min(680px, calc(100% - 32px)); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; transform: translateX(-50%); color: #9fb3d5; border: 1px solid rgba(130,255,154,.34); background: linear-gradient(90deg, rgba(5,27,24,.96), rgba(7,12,31,.96)); box-shadow: 0 18px 60px rgba(0,0,0,.52), inset 0 0 28px rgba(130,255,154,.04); font-size: 9px; }
.update-prompt b { display: block; margin-bottom: 4px; color: #82ff9a; font: 8px/1 monospace; letter-spacing: 2px; }
.update-prompt button { padding: 9px 12px; color: #07130e; border: 1px solid #82ff9a; background: #82ff9a; cursor: pointer; font: 8px/1 monospace; }
.update-prompt .secondary-button { color: #91a7ca; border-color: rgba(124,164,255,.2); background: transparent; }
.update-prompt button:disabled { opacity: .55; cursor: wait; }

.game-screen { padding: 22px 0 28px; }
.game-hud {
  display: grid;
  grid-template-columns: minmax(72px, auto) repeat(5, minmax(80px, 1fr)) minmax(72px, auto);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.game-hud > button {
  min-width: 72px;
  min-height: 48px;
  padding: 8px 10px;
  cursor: pointer;
  font: 9px/1 monospace;
  letter-spacing: 1px;
}
.score-card {
  min-width: 0;
  min-height: 48px;
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(124,164,255,.16);
  background: linear-gradient(135deg, rgba(67,245,255,.055), rgba(96,145,255,.035));
}
.score-card small {
  display: block;
  margin-bottom: 5px;
  color: #657a9f;
  font: 7px/1 monospace;
  letter-spacing: 1.5px;
}
.score-card b {
  display: block;
  overflow: hidden;
  color: #e9fbff;
  font: 700 11px/1.1 monospace;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-card #modeIndex { color: var(--cyan); }
#backButton { color: #91a6c8; }
#pauseButton { color: #031016; }
.game-shell {
  position: relative;
  height: calc(100vh - 145px);
  min-height: 600px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #030712;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}
#flightSceneCanvas,
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#flightSceneCanvas { z-index: 0; opacity: 0; pointer-events: none; transition: opacity .32s ease; }
#flightSceneCanvas.active { opacity: 1; }
#gameCanvas {
  z-index: 1;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.touch-intent-guide { position: absolute; z-index: 5; inset: 0; display: grid; pointer-events: none; }
.touch-intent-guide span { position: relative; display: grid; place-items: center; color: rgba(180,220,255,.68); border: 1px solid rgba(107,146,255,.16); background: linear-gradient(90deg, transparent, rgba(72,113,255,.055), transparent); text-shadow: 0 0 12px currentColor; font: 8px/1 monospace; letter-spacing: 2px; }
.touch-intent-guide[data-mode="flight"] { grid-template-rows: 34% 32% 34%; }
.touch-intent-guide[data-mode="flight"] span[data-zone="high"] { align-items: start; padding-top: 14px; color: #a9c3ff; border-top: 0; }
.touch-intent-guide[data-mode="flight"] span[data-zone="center"] { color: #ffe372; border-color: rgba(255,227,114,.18); background: radial-gradient(ellipse, rgba(255,227,114,.08), transparent 62%); }
.touch-intent-guide[data-mode="flight"] span[data-zone="low"] { align-items: end; padding-bottom: 14px; color: #8fa9ff; border-bottom: 0; }
.touch-intent-guide[data-mode="relativity"], .touch-intent-guide[data-mode="classic"] { place-items: center; }
.touch-intent-guide[data-mode="relativity"] span, .touch-intent-guide[data-mode="classic"] span { width: min(300px, 74%); min-height: 82px; border-radius: 50%; }
.touch-intent-guide[data-mode="relativity"] span { z-index: 1; color: #ff9bd8; border-color: rgba(255,79,189,.28); background: radial-gradient(ellipse, rgba(255,79,189,.1), transparent 66%); }
.touch-intent-guide[data-mode="relativity"]::before, .touch-intent-guide[data-mode="relativity"]::after { position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: linear-gradient(transparent, #ff4fbd, transparent); box-shadow: 0 0 14px #ff4fbd; content: ""; opacity: .42; transform-origin: 50% 50%; }
.touch-intent-guide[data-mode="relativity"]::before { transform: rotate(18deg); }
.touch-intent-guide[data-mode="relativity"]::after { transform: rotate(-18deg); }
.touch-vector {
  --vector-color: #43f5ff;
  position: absolute;
  z-index: 6;
  left: var(--vector-x, 50%);
  top: var(--vector-y, 50%);
  width: var(--vector-length, 0px);
  height: 2px;
  transform: rotate(var(--vector-angle, 0deg));
  transform-origin: 0 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.86), var(--vector-color));
  box-shadow: 0 0 8px var(--vector-color), 0 0 18px var(--vector-color);
  pointer-events: none;
}
.touch-vector[data-mode="flight"] { --vector-color: #6b92ff; }
.touch-vector[data-mode="relativity"] { --vector-color: #ff4fbd; }
.touch-vector[data-phase="aim"] { opacity: .62; }
.touch-vector[data-phase="commit"] { height: 3px; filter: brightness(1.18); }
.touch-vector[data-action="boost"] { --vector-color: #ffe372; }
.touch-vector[data-action="climb"], .touch-vector[data-action="dive"] { --vector-color: #91b4ff; }
.touch-vector[data-action="worldline"] { --vector-color: #ff7bce; }
.touch-vector::before { position: absolute; left: -7px; top: -7px; width: 12px; height: 12px; border: 1px solid var(--vector-color); border-radius: 50%; box-shadow: 0 0 12px var(--vector-color); content: ""; }
.touch-vector::after { position: absolute; right: -2px; top: -5px; width: 9px; height: 9px; border-top: 2px solid var(--vector-color); border-right: 2px solid var(--vector-color); transform: rotate(45deg); filter: drop-shadow(0 0 4px var(--vector-color)); content: ""; }
.touch-vector b { position: absolute; left: calc(100% + 14px); top: 50%; padding: 4px 6px; transform: translateY(-50%) rotate(calc(-1 * var(--vector-angle, 0deg))); transform-origin: 0 50%; color: var(--vector-color); border: 1px solid currentColor; background: rgba(3,7,18,.82); box-shadow: 0 0 14px rgba(0,0,0,.5); white-space: nowrap; font: 7px/1 monospace; letter-spacing: 1px; }
.touch-vector[data-phase="aim"] b { border-style: dashed; }
.touch-vector[data-label-side="reverse"] b { right: calc(100% + 14px); left: auto; transform-origin: 100% 50%; }
.touch-feedback { position: absolute; z-index: 7; left: var(--touch-x, 50%); top: var(--touch-y, 50%); min-width: 96px; padding: 28px 12px 8px; transform: translate(-50%, -50%); color: #e8fbff; border: 1px solid rgba(67,245,255,.38); border-radius: 50%; background: radial-gradient(circle, rgba(67,245,255,.16), rgba(4,13,31,.3) 56%, transparent 58%); box-shadow: 0 0 28px rgba(67,245,255,.14); text-align: center; font: 7px/1 monospace; letter-spacing: 1px; pointer-events: none; animation: touch-feedback-pop .68s ease-out forwards; }
.touch-feedback[data-action="climb"], .touch-feedback[data-action="dive"], .touch-feedback[data-action="boost"] { color: #cfe0ff; border-color: rgba(96,145,255,.5); background: radial-gradient(circle, rgba(96,145,255,.18), rgba(4,13,31,.3) 56%, transparent 58%); }
.touch-feedback[data-action="worldline"] { color: #ffd2ef; border-color: rgba(255,79,189,.52); background: radial-gradient(circle, rgba(255,79,189,.18), rgba(25,5,34,.3) 56%, transparent 58%); }
.touch-feedback[data-action="hint"] { color: #ffe372; border-color: rgba(255,227,114,.4); }
@keyframes touch-feedback-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); } }

.vector-gate-hud {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 238px;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 180px));
  gap: 54px;
  width: min(470px, 48%);
  transform: translateX(-50%);
  pointer-events: none;
}
.gate-heading { position: absolute; left: 50%; top: -28px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: #7ceaff; font: 7px/1 monospace; letter-spacing: 2px; white-space: nowrap; }
.gate-heading b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(124,234,255,.42); color: #fff; font-size: 9px; box-shadow: 0 0 18px rgba(67,245,255,.16); }
.gate-branch { position: relative; padding: 10px 12px; border: 1px solid rgba(124,234,255,.24); background: linear-gradient(135deg, rgba(6,23,45,.78), rgba(3,9,22,.38)); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.gate-branch:nth-of-type(3) { text-align: right; }
.gate-branch small, .gate-branch span, .gate-branch em { display: block; font: 7px/1.35 monospace; letter-spacing: 1px; }
.gate-branch small { color: #7086aa; }
.gate-branch strong { display: block; margin: 5px 0 4px; color: #7ceaff; font: 13px/1 monospace; letter-spacing: 2px; text-shadow: 0 0 14px currentColor; }
.gate-branch span { color: #fff; }
.gate-branch em { margin-top: 5px; color: #82ff9a; font-style: normal; }
.gate-branch[data-type="thrust"] { border-color: rgba(255,227,114,.4); background: linear-gradient(135deg, rgba(55,36,5,.7), rgba(15,12,3,.3)); }
.gate-branch[data-type="thrust"] strong, .gate-branch[data-type="thrust"] em { color: #ffe372; }
.gate-branch[data-type="aegis"] { box-shadow: inset 0 0 24px rgba(67,245,255,.045); }
.gate-branch[data-selected="false"] { opacity: .46; filter: saturate(.58); }
.gate-branch[data-selected="true"] { transform: translateY(-2px); border-color: rgba(255,255,255,.72); box-shadow: 0 0 24px rgba(124,234,255,.16), inset 0 0 28px rgba(255,255,255,.045); }
.gate-branch[data-selected="true"][data-ready="false"] { border-color: rgba(255,73,109,.72); box-shadow: 0 0 24px rgba(255,49,95,.18), inset 0 0 28px rgba(255,49,95,.06); }
.vector-gate-hud[data-ready="true"] .gate-heading { color: #82ff9a; text-shadow: 0 0 12px rgba(130,255,154,.5); }

.wingman-formation-hud { position: absolute; z-index: 4; left: 50%; top: 224px; width: min(300px, 38%); padding: 11px 15px; transform: translateX(-50%); border: 1px solid rgba(124,234,255,.4); background: linear-gradient(135deg, rgba(5,30,48,.86), rgba(5,10,28,.72)); box-shadow: 0 0 30px rgba(124,234,255,.1), inset 0 0 24px rgba(124,234,255,.05); pointer-events: none; }
.wingman-formation-hud > div { display: flex; justify-content: space-between; color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1.5px; }
.wingman-formation-hud > div b { color: #fff; }
.wingman-formation-hud strong { display: block; margin: 8px 0; color: #dffcff; font: 12px/1 monospace; letter-spacing: 2px; text-shadow: 0 0 12px #7ceaff; }
.wingman-formation-hud > i { display: block; height: 3px; background: rgba(255,255,255,.09); }
.wingman-formation-hud > i span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6091ff, #7ceaff, #fff); box-shadow: 0 0 10px #7ceaff; transition: width .12s linear; }
.wingman-formation-hud small { display: block; margin-top: 7px; color: #91a8c8; font: 7px/1 monospace; letter-spacing: .7px; }
.wingman-formation-hud[data-protocol="thrust"] { border-color: rgba(255,227,114,.5); background: linear-gradient(135deg, rgba(48,34,5,.86), rgba(12,10,22,.72)); box-shadow: 0 0 30px rgba(255,227,114,.1), inset 0 0 24px rgba(255,227,114,.04); }
.wingman-formation-hud[data-protocol="thrust"] > div, .wingman-formation-hud[data-protocol="thrust"] strong { color: #ffe372; text-shadow: 0 0 12px rgba(255,227,114,.58); }
.wingman-formation-hud[data-protocol="thrust"] > i span { background: linear-gradient(90deg, #ff8a58, #ffe372, #fff); box-shadow: 0 0 10px #ffe372; }

.missile-break-hud { position: absolute; z-index: 4; left: 50%; top: 238px; width: min(360px, 44%); padding: 13px 18px 12px; transform: translateX(-50%); border: 1px solid rgba(255,73,109,.42); background: linear-gradient(135deg, rgba(55,7,19,.82), rgba(5,12,30,.72)); box-shadow: inset 0 0 34px rgba(255,73,109,.07), 0 0 28px rgba(255,73,109,.08); text-align: center; pointer-events: none; }
.missile-break-heading { position: absolute; left: 50%; top: -28px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: #ff496d; font: 7px/1 monospace; letter-spacing: 2px; white-space: nowrap; }
.missile-break-heading b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255,73,109,.55); color: #fff; font-size: 9px; box-shadow: 0 0 18px rgba(255,73,109,.2); }
.missile-break-hud small, .missile-break-hud em { display: block; color: #8fa0bf; font: normal 7px/1 monospace; letter-spacing: 1px; }
.missile-break-hud strong { display: block; margin: 8px 0; color: #fff; font: 12px/1 monospace; letter-spacing: 2px; text-shadow: 0 0 15px rgba(255,73,109,.35); }
.missile-break-meter { height: 3px; margin: 9px 0 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.missile-break-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff496d, #ffe372); box-shadow: 0 0 10px #ff496d; transition: width .12s ease; }

.simultaneity-hud {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 226px;
  width: min(440px, 48%);
  padding: 14px 18px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(216,180,255,.28);
  background: linear-gradient(135deg, rgba(25,9,45,.8), rgba(4,12,32,.64));
  box-shadow: inset 0 0 34px rgba(255,79,189,.045), 0 0 30px rgba(82,143,255,.05);
  text-align: center;
  pointer-events: none;
}
.frame-heading { position: absolute; left: 50%; top: -27px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 2px; white-space: nowrap; }
.frame-heading b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(216,180,255,.42); color: #fff; font-size: 9px; box-shadow: 0 0 18px rgba(255,79,189,.16); }
.simultaneity-hud > strong { display: block; color: #fff; font: 11px/1.25 monospace; letter-spacing: 1px; text-shadow: 0 0 16px rgba(216,180,255,.3); }
.simultaneity-hud > small { display: block; margin-top: 5px; color: #8296bd; font: 7px/1 monospace; letter-spacing: 1px; }
.frame-velocity-controls { display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; gap: 6px; margin-top: 7px; pointer-events: auto; }
.frame-velocity-controls button { padding: 6px 5px; color: #8fa7d4; border: 1px solid rgba(82,143,255,.28); background: rgba(7,17,42,.76); font: 7px/1 monospace; cursor: pointer; }
.frame-velocity-controls button:hover, .frame-velocity-controls button:focus-visible { color: #fff; border-color: #7ceaff; box-shadow: 0 0 12px rgba(67,245,255,.12); }
.frame-velocity-controls span { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1px; }
.frame-invariant { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 9px; padding: 7px 9px; border: 1px solid rgba(216,180,255,.16); background: rgba(7,12,31,.5); font: 8px/1 monospace; }
.frame-invariant span { color: #8ca2c8; }
.frame-invariant b { color: #d8b4ff; letter-spacing: 1px; }
.frame-invariant[data-interval="timelike"] b { color: #82ff9a; }
.frame-invariant[data-interval="lightlike"] b { color: #ffe372; }
.frame-invariant[data-interval="spacelike"] b { color: #ff8bd7; }
.frame-class-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; pointer-events: auto; }
.frame-choice-help { margin: 8px 0; color: #c4d3e8; font: 16px/1.5 system-ui, "Microsoft YaHei", sans-serif; letter-spacing: 0; }
.frame-class-choices button { padding: 7px 5px; color: #7286ab; border: 1px solid rgba(112,139,190,.2); background: rgba(12,20,45,.72); font: 7px/1 monospace; cursor: pointer; }
.frame-class-choices button kbd { margin-right: 3px; color: #b8c8e5; }
.frame-class-choices button.selected { color: #fff; border-color: #d8b4ff; background: rgba(216,180,255,.12); box-shadow: inset 0 0 15px rgba(216,180,255,.08), 0 0 12px rgba(255,79,189,.08); }
.frame-order { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 8px; }
.frame-order span { color: #687ca0; font: 7px/1 monospace; letter-spacing: 2px; }
.frame-order b { color: #ffe372; font: 13px/1 monospace; text-shadow: 0 0 12px rgba(255,227,114,.25); }
.frame-worldlines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frame-worldlines i { padding: 7px; color: #657da8; border: 1px solid rgba(82,143,255,.18); background: rgba(82,143,255,.035); font: normal 16px/1 monospace; }
.frame-worldlines i:last-child { border-color: rgba(255,79,189,.18); background: rgba(255,79,189,.035); }
.frame-worldlines i.target { color: #fff; border-color: currentColor; box-shadow: inset 0 0 18px rgba(216,180,255,.09), 0 0 18px rgba(216,180,255,.08); }
.frame-worldlines small { display: block; margin-top: 4px; color: #7184a7; font: 6px/1 monospace; letter-spacing: 1px; }
.simultaneity-hud > em { display: block; margin-top: 8px; color: #82ff9a; font: normal 7px/1 monospace; letter-spacing: 1px; }

.doppler-lock-hud { position: absolute; z-index: 4; left: 50%; top: 238px; width: min(390px, 46%); padding: 14px 18px 12px; transform: translateX(-50%); border: 1px solid rgba(124,234,255,.32); background: linear-gradient(135deg, rgba(6,28,48,.84), rgba(25,7,42,.75)); box-shadow: inset 0 0 36px rgba(67,245,255,.06), 0 0 30px rgba(255,79,189,.06); text-align: center; pointer-events: none; }
.doppler-heading { position: absolute; left: 50%; top: -28px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: #7ceaff; font: 7px/1 monospace; letter-spacing: 2px; white-space: nowrap; }
.doppler-heading b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; color: #fff; font-size: 9px; box-shadow: 0 0 18px rgba(67,245,255,.16); }
.doppler-lock-hud > small { display: block; color: #8296bd; font: 7px/1 monospace; letter-spacing: 1px; }
.doppler-lock-hud > strong { display: block; margin: 8px 0; color: #fff; font: 12px/1 monospace; letter-spacing: 2px; }
.doppler-spectrum { position: relative; height: 8px; margin: 9px 0; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, #ff496d, #ffe372 38%, #82ff9a 50%, #7ceaff 63%, #8c7cff); }
.doppler-spectrum i { position: absolute; left: 48%; top: -3px; width: 4%; height: 12px; border: 1px solid #fff; box-shadow: 0 0 12px #82ff9a; }
.doppler-spectrum span { position: absolute; left: 50%; top: -5px; width: 2px; height: 16px; background: #fff; box-shadow: 0 0 9px #fff; transform: translateX(-50%); transition: left .12s ease; }
.doppler-controls { display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; gap: 7px; pointer-events: auto; }
.doppler-controls button { padding: 7px 5px; color: #a9bce0; border: 1px solid rgba(124,234,255,.25); background: rgba(4,14,35,.72); font: 7px/1 monospace; cursor: pointer; }
.doppler-controls em, .doppler-lock-hud > b { color: #8fa7d4; font: normal 7px/1 monospace; letter-spacing: 1px; }
.doppler-lock-hud > b { display: block; margin-top: 9px; color: #82ff9a; }
.doppler-lock-hud[data-shift="redshift"] .doppler-heading { color: #ff7a86; }
.doppler-lock-hud[data-shift="blueshift"] .doppler-heading { color: #7ceaff; }

.signature-chain-hud { position: absolute; z-index: 5; left: 50%; top: 86px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 10px; min-width: 142px; padding: 8px 12px; transform: translateX(-50%); border: 1px solid rgba(255,227,114,.28); background: rgba(5,12,28,.76); box-shadow: inset 0 0 24px rgba(255,227,114,.04), 0 0 18px rgba(255,227,114,.05); pointer-events: none; }
.signature-chain-hud small { color: #ffe372; font: 7px/1 monospace; letter-spacing: 2px; }
.signature-chain-hud strong { grid-row: span 2; color: #fff; font: 18px/1 monospace; text-shadow: 0 0 14px #ffe372; }
.signature-chain-hud > span { width: 82px; height: 3px; overflow: hidden; background: rgba(255,255,255,.08); }
.signature-chain-hud > span i { display: block; width: 33%; height: 100%; background: linear-gradient(90deg, #ffe372, #ff8d5d); box-shadow: 0 0 9px #ffe372; transition: width .16s ease; }
.signature-chain-hud em { grid-column: 1 / -1; color: #8396b9; font: normal 6px/1 monospace; letter-spacing: 1px; }
.signature-chain-hud[data-mode="relativity"] { border-color: rgba(216,180,255,.3); box-shadow: inset 0 0 24px rgba(255,79,189,.05), 0 0 18px rgba(255,79,189,.06); }
.signature-chain-hud[data-mode="relativity"] small { color: #d8b4ff; }
.signature-chain-hud[data-mode="relativity"] strong { text-shadow: 0 0 14px #ff4fbd; }
.signature-chain-hud[data-mode="relativity"] > span i { background: linear-gradient(90deg, #ff4fbd, #7ceaff); box-shadow: 0 0 9px #ff4fbd; }
.signature-chain-hud[data-skin-fantasy="JET-FLIGHT FANTASY"] em { color: #cfdcff; text-shadow: 0 0 8px rgba(124,157,255,.22); }
.signature-chain-hud[data-skin-fantasy="RELATIVITY THEATRE"] em { color: #ffd2ef; text-shadow: 0 0 8px rgba(255,79,189,.22); }
.signature-chain-hud[data-skin-fantasy="DIMENSION ODYSSEY"] em { color: #ead7ff; text-shadow: 0 0 8px rgba(216,180,255,.22); }

.circuit-cascade-hud { position: absolute; z-index: 5; right: 24px; bottom: 92px; width: 188px; padding: 10px 12px; border: 1px solid rgba(67,245,255,.28); background: linear-gradient(135deg, rgba(4,31,39,.82), rgba(17,5,38,.75)); box-shadow: inset 0 0 28px rgba(67,245,255,.055), 0 0 20px rgba(255,79,189,.06); pointer-events: none; }
.circuit-cascade-hud small { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 2px; }
.circuit-cascade-hud strong { float: right; color: #fff; font: 13px/1 monospace; text-shadow: 0 0 12px #43f5ff; }
.circuit-cascade-hud > span { display: block; clear: both; height: 4px; margin: 8px 0 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.circuit-cascade-hud > span i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #43f5ff, #ff4fbd, #ffe372); box-shadow: 0 0 11px #43f5ff; transition: width .16s linear; }
.circuit-cascade-hud em { display: block; color: #8ea4c8; font: normal 6px/1.25 monospace; letter-spacing: 1px; }
.circuit-cascade-hud[data-armed="true"] { border-color: rgba(255,227,114,.65); animation: cascade-armed .55s ease-in-out infinite alternate; }
@keyframes cascade-armed { to { filter: brightness(1.22); box-shadow: inset 0 0 32px rgba(255,227,114,.08), 0 0 26px rgba(255,79,189,.14); } }

.classic-loop-panel { position: absolute; z-index: 5; left: 24px; bottom: 92px; display: grid; gap: 4px; width: 210px; padding: 9px 11px; overflow: hidden; border: 1px solid rgba(67,245,255,.24); background: linear-gradient(135deg, rgba(4,31,39,.78), rgba(6,11,28,.7)); box-shadow: inset 0 0 22px rgba(67,245,255,.045); pointer-events: none; }
.classic-loop-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(67,245,255,.12), transparent),
    repeating-linear-gradient(0deg, rgba(67,245,255,.08) 0 1px, transparent 1px 7px);
  opacity: .32;
  transform: translateX(-42%);
  animation: classic-loop-scan 2.6s linear infinite;
  pointer-events: none;
}
.classic-loop-panel b, .classic-loop-panel span, .classic-loop-panel small { position: relative; z-index: 1; }
.classic-loop-panel b { color: #7ceaff; font: 8px/1 monospace; letter-spacing: 1px; }
.classic-loop-panel span { color: #effcff; font: 7px/1.35 monospace; }
.classic-loop-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.classic-loop-panel[data-tone="danger"] { border-color: rgba(255,73,109,.48); background: linear-gradient(135deg, rgba(255,73,109,.12), rgba(6,11,28,.7)); }
.classic-loop-panel[data-tone="danger"] b { color: #ff8aa0; text-shadow: 0 0 9px rgba(255,73,109,.48); }
.classic-loop-panel[data-tone="reward"] { border-color: rgba(130,255,154,.34); background: linear-gradient(135deg, rgba(130,255,154,.08), rgba(67,245,255,.035)); }
.classic-loop-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.42); }
.classic-loop-panel[data-tone="warning"] { border-color: rgba(255,227,114,.36); }
.classic-loop-panel[data-tone="warning"] b { color: #ffe372; }
@keyframes classic-loop-scan {
  to { transform: translateX(42%); }
}
.classic-route-panel { position: absolute; z-index: 5; left: 24px; bottom: 164px; display: grid; gap: 4px; width: 210px; padding: 9px 11px; border: 1px solid rgba(216,180,255,.22); background: linear-gradient(135deg, rgba(216,180,255,.07), rgba(4,31,39,.72)); box-shadow: inset 0 0 22px rgba(216,180,255,.04); pointer-events: none; }
.classic-route-panel b { color: #d8b4ff; font: 8px/1 monospace; letter-spacing: 1px; }
.classic-route-panel span { color: #effcff; font: 7px/1.35 monospace; }
.classic-route-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.classic-route-panel[data-tone="danger"] { border-color: rgba(255,73,109,.5); background: linear-gradient(135deg, rgba(255,73,109,.14), rgba(6,11,28,.72)); }
.classic-route-panel[data-tone="danger"] b { color: #ff8aa0; text-shadow: 0 0 9px rgba(255,73,109,.5); }
.classic-route-panel[data-tone="warning"] { border-color: rgba(255,227,114,.36); }
.classic-route-panel[data-tone="warning"] b { color: #ffe372; }
.classic-route-panel[data-tone="reward"] { border-color: rgba(130,255,154,.34); background: linear-gradient(135deg, rgba(130,255,154,.08), rgba(67,245,255,.035)); }
.classic-route-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.42); }

.risk-drive-hud { position: absolute; z-index: 5; right: 24px; bottom: 92px; width: 188px; padding: 10px 12px; border: 1px solid rgba(255,227,114,.22); background: linear-gradient(135deg, rgba(30,24,4,.78), rgba(5,12,28,.72)); box-shadow: inset 0 0 24px rgba(255,227,114,.04); pointer-events: none; }
.risk-drive-hud small { color: #ffe372; font: 7px/1 monospace; letter-spacing: 2px; }
.risk-drive-hud strong { float: right; color: #fff; font: 11px/1 monospace; text-shadow: 0 0 12px #ffe372; }
.risk-drive-hud > span { display: block; clear: both; height: 4px; margin: 8px 0 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.risk-drive-hud > span i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff8d5d, #ffe372); box-shadow: 0 0 10px #ffe372; transition: width .15s ease; }
.risk-drive-hud em { display: block; color: #8999b6; font: normal 6px/1.25 monospace; letter-spacing: 1px; }
.risk-drive-hud[data-mode="relativity"] { border-color: rgba(255,79,189,.28); background: linear-gradient(135deg, rgba(43,5,34,.78), rgba(5,12,28,.72)); }
.risk-drive-hud[data-mode="relativity"] small { color: #ff77c9; }
.risk-drive-hud[data-mode="relativity"] > span i { background: linear-gradient(90deg, #ff4fbd, #7ceaff); box-shadow: 0 0 10px #ff4fbd; }
.risk-drive-hud[data-active="true"] { animation: risk-drive-pulse .7s ease-in-out infinite alternate; }
@keyframes risk-drive-pulse { to { filter: brightness(1.28); box-shadow: inset 0 0 30px rgba(255,255,255,.06), 0 0 24px rgba(255,227,114,.16); } }

.forecast-sync-hud { position: absolute; z-index: 5; right: 24px; bottom: 158px; width: 188px; padding: 10px 12px; border: 1px solid rgba(216,180,255,.28); background: linear-gradient(135deg, rgba(15,8,45,.78), rgba(4,19,38,.72)); box-shadow: inset 0 0 28px rgba(216,180,255,.045), 0 0 22px rgba(67,245,255,.055); pointer-events: none; }
.forecast-sync-hud small { color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 2px; }
.forecast-sync-hud strong { float: right; color: #fff; font: 13px/1 monospace; text-shadow: 0 0 12px #d8b4ff; }
.forecast-sync-hud > span { display: block; clear: both; height: 4px; margin: 8px 0 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.forecast-sync-hud > span i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #43f5ff, #d8b4ff, #82ff9a); box-shadow: 0 0 10px #d8b4ff; transition: width .16s linear; }
.forecast-sync-hud em { display: block; color: #8999b6; font: normal 6px/1.25 monospace; letter-spacing: 1px; }
.forecast-sync-hud[data-mode="flight"] { border-color: rgba(124,157,255,.28); }
.forecast-sync-hud[data-mode="flight"] small { color: #8db6ff; }
.forecast-sync-hud[data-mode="flight"] > span i { background: linear-gradient(90deg, #7ceaff, #8db6ff, #ffe372); box-shadow: 0 0 10px #8db6ff; }
.forecast-sync-hud[data-mode="relativity"] { border-color: rgba(255,79,189,.3); }
.forecast-sync-hud[data-mode="relativity"] small { color: #ff77c9; }
.forecast-sync-hud[data-mode="relativity"] > span i { background: linear-gradient(90deg, #ff4fbd, #d8b4ff, #7ceaff); box-shadow: 0 0 10px #ff4fbd; }
.forecast-sync-hud[data-tone="reward"] { border-color: rgba(130,255,154,.48); animation: forecast-sync-pulse .62s ease-in-out infinite alternate; }
.forecast-sync-hud[data-tone="reward"] strong, .forecast-sync-hud[data-tone="reward"] em { color: #82ff9a; text-shadow: 0 0 10px rgba(130,255,154,.45); }
.forecast-sync-hud[data-mastered="true"] { border-color: rgba(130,255,154,.56); box-shadow: inset 0 0 30px rgba(130,255,154,.07), 0 0 24px rgba(130,255,154,.13); }
.forecast-sync-hud[data-mastered="true"] small, .forecast-sync-hud[data-mastered="true"] em { color: #caffd7; }
.forecast-sync-hud[data-tone="warning"] { border-color: rgba(255,227,114,.36); }
.forecast-sync-hud[data-tone="warning"] small { color: #ffe372; }
.forecast-sync-hud[data-tone="danger"] { border-color: rgba(255,73,109,.46); }
.forecast-sync-hud[data-tone="danger"] small { color: #ff8aa0; }
@keyframes forecast-sync-pulse { to { filter: brightness(1.24); box-shadow: inset 0 0 30px rgba(130,255,154,.06), 0 0 24px rgba(130,255,154,.14); } }

.einstein-bridge-hud { position: absolute; z-index: 5; left: 24px; bottom: 124px; width: 188px; padding: 10px 12px; border: 1px solid rgba(216,180,255,.34); background: linear-gradient(135deg, rgba(21,8,45,.82), rgba(4,19,38,.76)); box-shadow: inset 0 0 28px rgba(255,79,189,.055), 0 0 22px rgba(82,143,255,.08); pointer-events: none; }
.einstein-bridge-hud small { display: block; color: #d8b4ff; font: 6px/1 monospace; letter-spacing: 1.4px; }
.einstein-bridge-hud strong { display: block; margin: 7px 0; color: #fff; font: 14px/1 monospace; letter-spacing: 3px; text-shadow: 0 0 14px #ff4fbd; }
.einstein-bridge-hud > span { display: block; height: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.einstein-bridge-hud > span i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff4fbd, #d8b4ff, #7ceaff); box-shadow: 0 0 12px #ff4fbd; transition: width .14s linear; }
.einstein-bridge-hud em { display: block; margin-top: 7px; color: #8fa7c9; font: normal 6px/1 monospace; letter-spacing: 1px; }
.einstein-bridge-hud[data-state="critical"] { border-color: rgba(255,73,109,.65); animation: bridge-critical .42s ease-in-out infinite alternate; }
.einstein-bridge-hud[data-state="closed"] { border-color: rgba(130,255,154,.72); box-shadow: inset 0 0 30px rgba(130,255,154,.09), 0 0 28px rgba(130,255,154,.14); }
.einstein-bridge-hud[data-state="closed"] strong, .einstein-bridge-hud[data-state="closed"] em { color: #82ff9a; text-shadow: 0 0 14px #82ff9a; }
@keyframes bridge-critical { to { filter: brightness(1.3); box-shadow: inset 0 0 30px rgba(255,73,109,.08), 0 0 26px rgba(255,73,109,.18); } }

.preflight-hold { --preflight-accent: #43f5ff; position: absolute; z-index: 8; left: 50%; top: 50%; width: min(560px, calc(100% - 48px)); max-height: calc(100% - 32px); box-sizing: border-box; padding: 18px 20px; overflow: auto; transform: translate(-50%,-50%); border: 1px solid rgba(67,245,255,.36); background: linear-gradient(135deg, rgba(4,18,38,.97), rgba(8,7,27,.97)); box-shadow: inset 0 0 34px rgba(67,245,255,.055), 0 18px 60px rgba(0,0,0,.42); text-align: center; pointer-events: auto; }
.preflight-hold::before { position: absolute; inset: 7px; content: ""; border: 1px solid rgba(124,234,255,.08); }
.preflight-hold::after {
  position: absolute;
  inset: -35% -20%;
  content: "";
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--preflight-accent), white 20%) 50%, transparent 62%);
  opacity: .14;
  transform: translateX(-48%) skewX(-14deg);
  animation: preflight-lock-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}
.preflight-hold > small, .preflight-hold > strong, .preflight-hold > span, .preflight-hold > ol, .preflight-hold > div, .preflight-hold > em { position: relative; z-index: 1; }
.preflight-hold small { display: block; color: #43f5ff; font: 7px/1 monospace; letter-spacing: 4px; }
.preflight-hold strong { display: block; margin: 10px 0 7px; color: #f2fdff; font-size: 18px; text-shadow: 0 0 18px rgba(67,245,255,.38); }
.preflight-start-button { position: relative; z-index: 2; width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid var(--preflight-accent); color: #f2fdff; background: rgba(67,245,255,.14); cursor: pointer; }
.preflight-hold span { display: block; color: #91a7ca; font: 8px/1.5 monospace; }
.preflight-spectacle { margin-top: 9px; padding: 7px 8px; overflow: hidden; border: 1px solid rgba(124,234,255,.14); background: linear-gradient(90deg, rgba(67,245,255,.08), rgba(255,255,255,.02)); color: var(--preflight-accent); font: 7px/1.35 monospace; letter-spacing: 1.5px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.preflight-skin-fantasy { margin-top: 5px; color: #d8fbff; border-color: rgba(255,227,114,.18); background: linear-gradient(90deg, rgba(255,227,114,.07), rgba(67,245,255,.035)); }
.preflight-academy-drill { margin-top: 5px; color: #ffe372; border-color: rgba(255,227,114,.28); background: linear-gradient(90deg, rgba(255,227,114,.09), rgba(67,245,255,.035)); text-shadow: 0 0 12px rgba(255,227,114,.2); }
.preflight-hold[data-academy-drill=""] .preflight-academy-drill { display: none; }
.preflight-checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.preflight-checklist li { min-width: 0; padding: 8px 6px; border: 1px solid rgba(124,234,255,.12); background: rgba(255,255,255,.018); }
.preflight-checklist b, .preflight-checklist span, .preflight-checklist em { display: block; }
.preflight-checklist b { color: #43f5ff; font: 7px/1 monospace; }
.preflight-checklist span { margin: 5px 0 4px; overflow: hidden; color: #e6f4ff; font: 8px/1.2 monospace; text-overflow: ellipsis; white-space: nowrap; }
.preflight-checklist em { color: #7187aa; font: normal 6px/1.25 monospace; }
.preflight-hold[data-mode="flight"] .preflight-checklist b { color: #8db6ff; }
.preflight-hold[data-mode="relativity"] .preflight-checklist b { color: #ff77c9; }
.preflight-hold > div { height: 3px; margin: 13px 0 8px; overflow: hidden; background: rgba(255,255,255,.08); }
.preflight-hold > div i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #43f5ff, #7c9dff); box-shadow: 0 0 10px #43f5ff; transition: width .12s linear; }
.preflight-hold em { color: #7186aa; font: normal 7px/1 monospace; letter-spacing: 2px; }
.preflight-hold[data-mode="flight"] { border-color: rgba(124,157,255,.42); }
.preflight-hold[data-mode="flight"] { --preflight-accent: #8db6ff; }
.preflight-hold[data-mode="flight"] small { color: #8db6ff; }
.preflight-hold[data-mode="flight"] > div i { background: linear-gradient(90deg, #7ceaff, #8db6ff, #ffe372); box-shadow: 0 0 10px #8db6ff; }
.preflight-hold[data-mode="relativity"] { border-color: rgba(255,79,189,.4); background: linear-gradient(135deg, rgba(37,5,34,.9), rgba(5,13,35,.88)); }
.preflight-hold[data-mode="relativity"] { --preflight-accent: #ff4fbd; }
.preflight-hold[data-mode="relativity"] small { color: #ff77c9; }
.preflight-hold[data-mode="relativity"] > div i { background: linear-gradient(90deg, #ff4fbd, #7ceaff); box-shadow: 0 0 10px #ff4fbd; }
@keyframes preflight-lock-sweep {
  52%, 100% { transform: translateX(48%) skewX(-14deg); }
}

.mission-panel, .event-feed, .ghost-hud, .expedition-hud, .flight-radar, .minkowski-chart,
.vector-gate-hud, .wingman-formation-hud, .missile-break-hud, .simultaneity-hud, .doppler-lock-hud,
.signature-chain-hud, .risk-drive-hud, .forecast-sync-hud, .einstein-bridge-hud, .circuit-cascade-hud,
.input-assist, .run-control-brief, .anchor-button { transition: opacity .2s ease, filter .2s ease, visibility .2s linear; }
.game-shell[data-focus="preflight"] .mission-panel { opacity: .26; filter: saturate(.45); }
.game-shell[data-focus="preflight"] .flight-radar,
.game-shell[data-focus="preflight"] .minkowski-chart { opacity: .22; filter: saturate(.5); }
.game-shell[data-focus="preflight"] .event-feed,
.game-shell[data-focus="preflight"] .ghost-hud,
.game-shell[data-focus="preflight"] .expedition-hud,
.game-shell[data-focus="preflight"] .vector-gate-hud,
.game-shell[data-focus="preflight"] .wingman-formation-hud,
.game-shell[data-focus="preflight"] .missile-break-hud,
.game-shell[data-focus="preflight"] .simultaneity-hud,
.game-shell[data-focus="preflight"] .doppler-lock-hud,
.game-shell[data-focus="preflight"] .signature-chain-hud,
.game-shell[data-focus="preflight"] .risk-drive-hud,
.game-shell[data-focus="preflight"] .forecast-sync-hud,
.game-shell[data-focus="preflight"] .einstein-bridge-hud,
.game-shell[data-focus="preflight"] .circuit-cascade-hud,
.game-shell[data-focus="preflight"] .input-assist,
.game-shell[data-focus="preflight"] .anchor-button { opacity: 0; visibility: hidden; }
.game-shell[data-focus="tactical"] .mission-panel,
.game-shell[data-focus="tactical"] .event-feed,
.game-shell[data-focus="tactical"] .ghost-hud,
.game-shell[data-focus="tactical"] .expedition-hud { opacity: .3; filter: saturate(.55); }
.game-shell[data-focus="tactical"] .flight-radar,
.game-shell[data-focus="tactical"] .minkowski-chart { opacity: .2; filter: saturate(.55); }
.game-shell[data-focus="combat"] .mission-panel,
.game-shell[data-focus="combat"] .ghost-hud,
.game-shell[data-focus="combat"] .expedition-hud { opacity: .24; filter: saturate(.5); }

.mission-panel {
  --relay-progress: 0%;
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 120px;
  width: 190px;
  padding: 14px 16px;
  border-left: 2px solid var(--cyan);
  background: linear-gradient(90deg, rgba(7, 19, 40, .82), transparent);
  pointer-events: none;
}
.mission-panel::before, .mission-panel::after { position: absolute; left: 16px; bottom: 5px; height: 2px; content: ""; }
.mission-panel::before { right: 16px; background: repeating-linear-gradient(90deg, rgba(124,234,255,.13) 0 calc(33.333% - 3px), transparent calc(33.333% - 3px) 33.333%); }
.mission-panel::after { width: var(--relay-progress); max-width: calc(100% - 32px); background: linear-gradient(90deg, #43f5ff, #82ff9a); box-shadow: 0 0 9px rgba(67,245,255,.45); transition: width .3s ease; }
.mission-label { display: block; color: var(--cyan); font: 7px/1 monospace; letter-spacing: 2px; }
.mission-panel strong { display: block; margin: 8px 0 5px; font-size: 12px; }
.mission-panel small { display: block; margin-bottom: 10px; color: #7488aa; font-size: 9px; }
.mission-panel > em { display: block; margin: -3px 0 9px; color: #7ceaff; font: normal 7px/1.35 monospace; letter-spacing: .7px; }
.mission-panel[data-phase="overtime"] { border-color: rgba(255,227,114,.42); background: linear-gradient(135deg, rgba(37,25,5,.82), rgba(9,13,29,.8)); box-shadow: inset 0 0 28px rgba(255,227,114,.045), 0 0 22px rgba(255,79,189,.06); }
.mission-panel[data-phase="overtime"] .mission-label, .mission-panel[data-phase="overtime"] #missionCounter { color: #ffe372; text-shadow: 0 0 10px rgba(255,227,114,.38); }
.mission-panel[data-phase="overtime"] .mission-progress i { background: linear-gradient(90deg, #ffe372, #ff4fbd); box-shadow: 0 0 9px rgba(255,227,114,.45); }
.mission-panel > b { display: block; margin-top: 6px; color: #91a8cc; text-align: right; font: 8px/1 monospace; }
.mission-panel.complete { border-color: #82ff9a; }
.mission-panel.complete .mission-label, .mission-panel.complete > b { color: #82ff9a; }
.mission-panel.complete .mission-progress i { background: #82ff9a; box-shadow: 0 0 9px #82ff9a; }
.style-challenge { position: absolute; z-index: 4; left: 24px; top: 208px; width: 205px; padding: 13px 15px; border: 1px solid rgba(216,180,255,.22); background: linear-gradient(135deg, rgba(33,18,55,.72), rgba(7,16,38,.55)); box-shadow: 0 0 24px rgba(216,180,255,.07); pointer-events: none; }
.style-challenge span { display: block; color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 2px; }
.style-challenge strong { display: block; margin: 8px 0 5px; color: #f2eaff; font-size: 12px; }
.style-challenge small { display: block; color: #8ea2c7; font-size: 8px; line-height: 1.55; }
.style-challenge-meter { height: 3px; margin-top: 9px; overflow: hidden; background: rgba(216,180,255,.12); }
.style-challenge-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #d8b4ff, #43f5ff); box-shadow: 0 0 10px rgba(216,180,255,.45); transition: width .18s ease; }
.style-challenge b { display: block; margin-top: 8px; color: #82ff9a; font: 8px/1 monospace; letter-spacing: 1px; }
.threat-hunt-hud { position: absolute; z-index: 4; left: 24px; top: 208px; width: 205px; padding: 13px 15px; border: 1px solid rgba(255,73,109,.3); background: linear-gradient(135deg, rgba(48,7,20,.76), rgba(7,16,38,.58)); box-shadow: 0 0 24px rgba(255,73,109,.08); pointer-events: none; }
.threat-hunt-hud > span { display: block; color: #ff6d89; font: 7px/1 monospace; letter-spacing: 2px; }
.threat-hunt-hud strong { display: block; margin: 8px 0 5px; color: #fff; font-size: 11px; letter-spacing: 1px; text-shadow: 0 0 14px rgba(255,73,109,.35); }
.threat-hunt-hud small { display: block; color: #8ea2c7; font-size: 8px; }
.threat-hunt-hud > div { height: 3px; margin-top: 9px; overflow: hidden; background: rgba(255,109,137,.12); }
.threat-hunt-hud > div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff315f, #ffe372); box-shadow: 0 0 10px rgba(255,73,109,.55); transition: width .18s ease; }
.threat-hunt-hud b { display: block; margin-top: 8px; color: #ffe372; font: 8px/1 monospace; letter-spacing: 1px; }
.threat-hunt-hud[data-state="contact"] { border-color: rgba(255,227,114,.62); animation: threat-contact .5s ease-in-out infinite alternate; }
.threat-hunt-hud[data-state="complete"] { border-color: rgba(130,255,154,.58); background: linear-gradient(135deg, rgba(8,43,28,.8), rgba(7,16,38,.58)); }
.threat-hunt-hud[data-state="complete"] > span, .threat-hunt-hud[data-state="complete"] b { color: #82ff9a; }
@keyframes threat-contact { to { filter: brightness(1.28); box-shadow: 0 0 28px rgba(255,227,114,.18); } }

.combo-display {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 105px;
  width: 145px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  animation: combo-pop .22s ease-out;
}
.combo-display small { color: #8095b9; font: 7px/1 monospace; letter-spacing: 2px; }
.combo-display strong { display: block; margin: 5px 0 8px; color: #fff; font: 13px/1 monospace; text-shadow: 0 0 18px var(--cyan); }
.combo-display strong b { color: var(--cyan); font-size: 22px; }
.combo-display > span i { width: 100%; }
@keyframes combo-pop { from { opacity: 0; transform: translateX(-50%) scale(.7); } }

.boss-hud {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 160px;
  width: min(360px, 48%);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.boss-hud > span { color: #ff6384; font: 8px/1 monospace; letter-spacing: 2px; }
.boss-hud > strong { display: block; margin: 8px 0; font-size: 15px; letter-spacing: 3px; text-shadow: 0 0 20px #ff315f; }
.boss-hud > div { height: 5px; padding: 1px; border: 1px solid rgba(255,73,109,.4); background: rgba(30,0,8,.6); }
.boss-hud > div i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff174d, #ffac5f); box-shadow: 0 0 12px #ff315f; transition: width .22s; }
.boss-hud > small { display: block; margin-top: 7px; color: #9c6370; font: 7px/1 monospace; letter-spacing: 1px; }
.boss-hud > .boss-mutation { color: #d8a0b0; letter-spacing: .7px; }
.boss-hud[data-phase="2"] > .boss-mutation { color: #e6a5d5; }
.boss-hud[data-phase="3"] > .boss-mutation { color: #ffeaa0; }
.boss-hud > .boss-sound { position: relative; padding-top: 6px; color: #b98fb2; }
.boss-hud > .boss-sound::before { position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, #7ceaff var(--boss-sound-urgency, 0%), rgba(255,255,255,.08) 0); box-shadow: 0 0 8px rgba(124,234,255,.16); content: ""; }
.boss-hud > .boss-sound[data-phase="2"] { color: #e4a3ff; }
.boss-hud > .boss-sound[data-phase="3"] { color: #ffe372; text-shadow: 0 0 10px rgba(255,227,114,.22); }
.boss-hud > .boss-counter { color: #70ddeb; letter-spacing: 1.5px; transition: color .18s, text-shadow .18s; }
.boss-hud > .boss-counter[data-ready="true"] { color: #fff06d; text-shadow: 0 0 14px #ff9d2e; }
.boss-hud[data-phase="2"] > span, .boss-hud[data-phase="2"] > strong { color: #ff8bd7; text-shadow: 0 0 20px #ff4fbd; }
.boss-hud[data-phase="2"] > div i { background: linear-gradient(90deg, #ff315f, #ff4fbd); box-shadow: 0 0 14px #ff4fbd; }
.boss-hud[data-phase="3"] > span, .boss-hud[data-phase="3"] > strong { color: #fff06d; text-shadow: 0 0 24px #ff9d2e; }
.boss-hud[data-phase="3"] > div { border-color: rgba(255,240,109,.62); }
.boss-hud[data-phase="3"] > div i { background: linear-gradient(90deg, #ff315f, #fff06d); box-shadow: 0 0 18px #fff06d; animation: boss-critical 480ms ease-in-out infinite alternate; }
.boss-hud[data-archetype="sentinel"], .boss-hud[data-archetype="interceptor"], .boss-hud[data-archetype="redshift"] { border-top: 1px solid rgba(67,245,255,.24); box-shadow: inset 0 10px 26px rgba(67,245,255,.035); }
.boss-hud[data-archetype="lattice"], .boss-hud[data-archetype="wingpack"], .boss-hud[data-archetype="twin"] { border-top: 1px solid rgba(255,79,189,.32); box-shadow: inset 0 10px 28px rgba(255,79,189,.05); }
.boss-hud[data-archetype="overload"], .boss-hud[data-archetype="razor"], .boss-hud[data-archetype="horizon"] { border-top: 1px solid rgba(255,227,114,.38); box-shadow: inset 0 10px 30px rgba(255,227,114,.055); }
@keyframes boss-critical { to { filter: brightness(1.45); transform: scaleY(1.45); } }
.ghost-hud { position: absolute; z-index: 4; right: 24px; top: 112px; max-width: 280px; padding: 7px 9px; color: #65799c; border-right: 2px solid rgba(197,140,255,.28); background: linear-gradient(270deg, rgba(20,8,38,.42), transparent); font: 7px/1 monospace; letter-spacing: 1px; text-align: right; pointer-events: none; }
.ghost-hud b { margin: 0 6px; color: #c58cff; }
.ghost-hud span { color: #8f78b8; }
.ghost-hud em { margin-left: 6px; color: #7789a8; font-style: normal; }
.ghost-hud em.ahead { color: #82ff9a; }
.ghost-hud em.behind { color: #ff6d89; }
.ghost-hud small, .ghost-hud i { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-hud small { color: #a88bd0; font-size: 6px; letter-spacing: 1px; }
.ghost-hud i { color: #7185a9; font: normal 6px/1 monospace; }
.ghost-hud i.complete { color: #82ff9a; }
.expedition-hud { position: absolute; z-index: 4; left: 50%; top: 112px; width: 250px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.expedition-hud span { color: var(--cyan); font: 7px/1 monospace; letter-spacing: 2px; }
.expedition-hud div { height: 3px; margin: 7px 0; background: rgba(67,245,255,.1); }
.expedition-hud div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 9px var(--cyan); transition: width .2s; }
.expedition-hud b { color: #768caf; font: 8px/1 monospace; }
.elite-hud { position: absolute; z-index: 4; left: 24px; bottom: 52px; padding: 10px 13px; border-left: 2px solid #ff6d89; background: linear-gradient(90deg, rgba(50,5,20,.76), transparent); pointer-events: none; }
.elite-hud span { display: block; margin-bottom: 5px; color: #ff6d89; font: 7px/1 monospace; letter-spacing: 2px; }
.elite-hud strong { display: block; margin-bottom: 4px; font-size: 11px; }
.elite-hud small { color: #806477; font-size: 8px; }
.event-feed {
  position: absolute;
  z-index: 5;
  right: 24px;
  top: 168px;
  width: min(260px, calc(100% - 48px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.event-feed:empty { display: none; }
.event-card {
  position: relative;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid rgba(67,245,255,.24);
  border-left: 2px solid var(--cyan);
  background:
    linear-gradient(90deg, rgba(67,245,255,.13), rgba(8,14,34,.82)),
    rgba(6,10,25,.84);
  box-shadow: 0 12px 42px rgba(0,0,0,.36), inset 0 0 24px rgba(67,245,255,.04);
  animation: event-feed-in .22s ease-out, event-feed-out .36s ease-in 2.55s forwards;
}
.event-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52px;
  content: "";
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
  transform: skewX(-18deg) translateX(-110%);
  animation: event-scan .75s ease-out;
}
.event-card strong { display: block; color: #fff; font: 11px/1 monospace; letter-spacing: 1px; text-shadow: 0 0 14px currentColor; }
.event-card span { display: block; margin-top: 5px; color: #8ea2c7; font: 8px/1.35 monospace; letter-spacing: 1px; }
.event-card.flight { border-left-color: #7ceaff; }
.event-card.flight strong { color: #7ceaff; }
.event-card.relativity { border-left-color: #ff4fbd; }
.event-card.relativity strong { color: #ff8bd7; }
.event-card.success { border-left-color: #82ff9a; }
.event-card.success strong { color: #82ff9a; }
.event-card.danger { border-left-color: #ff6d89; }
.event-card.danger strong { color: #ff8aa0; }
@keyframes event-feed-in { from { opacity: 0; transform: translateX(18px) scale(.96); } }
@keyframes event-feed-out { to { opacity: 0; transform: translateX(18px) scale(.98); } }
@keyframes event-scan { to { transform: skewX(-18deg) translateX(420%); } }


.input-assist {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 48px;
  min-width: min(560px, calc(100% - 48px));
  padding: 9px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 9px 13px;
  align-items: center;
  color: #aebdde;
  border: 1px solid rgba(67,245,255,.18);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(5,12,28,.88), rgba(17,12,43,.68)),
    radial-gradient(circle at 12% 50%, rgba(67,245,255,.18), transparent 36%);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 22px rgba(67,245,255,.035);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.input-assist.flight {
  border-color: rgba(93,145,255,.28);
  background:
    linear-gradient(90deg, rgba(5,16,39,.9), rgba(15,26,58,.72)),
    radial-gradient(circle at 12% 50%, rgba(93,145,255,.2), transparent 36%);
}
.input-assist.relativity {
  border-color: rgba(255,79,189,.28);
  background:
    linear-gradient(90deg, rgba(25,6,34,.9), rgba(13,10,38,.72)),
    radial-gradient(circle at 12% 50%, rgba(255,79,189,.18), transparent 36%);
}
.input-assist[data-threat="warning"] {
  border-color: rgba(255,227,114,.36);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 28px rgba(255,227,114,.07);
}
.input-assist[data-threat="danger"] {
  border-color: rgba(255,73,109,.5);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 32px rgba(255,49,95,.11), 0 0 26px rgba(255,49,95,.08);
}
.input-assist[data-style-target="active"] {
  border-color: rgba(124,234,255,.54);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 30px rgba(67,245,255,.11), 0 0 28px rgba(67,245,255,.12);
}
.input-assist.relativity[data-style-target="active"] {
  border-color: rgba(255,79,189,.54);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 30px rgba(255,79,189,.12), 0 0 28px rgba(255,79,189,.12);
}
.input-assist[data-style-target="active"] .assist-kicker::after {
  content: " · 风格目标锁定";
  color: #ffe372;
  text-shadow: 0 0 10px rgba(255,227,114,.24);
}
html[data-language="en"] .input-assist[data-style-target="active"] .assist-kicker::after {
  content: " · STYLE TARGET LOCK";
}
.input-assist[data-launch-action="active"] #assistStatus {
  color: #f7fbff;
  text-shadow: 0 0 12px rgba(255,227,114,.22), 0 0 18px rgba(67,245,255,.12);
}
.input-assist[data-launch-action="active"] .assist-kicker::before {
  content: "行动已就绪 · ";
  color: #ffe372;
  text-shadow: 0 0 10px rgba(255,227,114,.24);
}
html[data-language="en"] .input-assist[data-launch-action="active"] .assist-kicker::before {
  content: "ACTION ARMED · ";
}
.input-assist[data-launch-action-state="complete"] #assistStatus {
  color: #82ff9a;
  text-shadow: 0 0 14px rgba(130,255,154,.24), 0 0 18px rgba(67,245,255,.1);
}
.input-assist[data-launch-action-state="complete"] .assist-kicker::before {
  content: "ACTION CONFIRMED · ";
  color: #82ff9a;
  text-shadow: 0 0 10px rgba(130,255,154,.24);
}
.assist-spectacle {
  display: block;
  overflow: hidden;
  padding: 4px 6px;
  color: #d8fbff;
  border: 1px solid rgba(67,245,255,.16);
  background: linear-gradient(90deg, rgba(67,245,255,.075), rgba(255,255,255,.018));
  font: 6px/1.25 monospace;
  letter-spacing: 1.1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.input-assist.flight .assist-spectacle { color: #dbe5ff; border-color: rgba(124,157,255,.22); background: linear-gradient(90deg, rgba(124,157,255,.09), rgba(67,245,255,.025)); }
.input-assist.relativity .assist-spectacle { color: #ffd2ef; border-color: rgba(255,79,189,.24); background: linear-gradient(90deg, rgba(255,79,189,.09), rgba(67,245,255,.025)); }
.assist-kicker { color: var(--cyan); font: 7px/1 monospace; letter-spacing: 2px; }
.input-assist.flight .assist-kicker { color: #8db6ff; }
.input-assist.relativity .assist-kicker { color: #ff8bd7; }
.assist-evidence {
  position: absolute;
  left: 18px;
  top: -22px;
  padding: 4px 9px;
  color: #9db1d7;
  border: 1px solid rgba(157,177,215,.22);
  border-radius: 999px;
  background: rgba(5,12,28,.82);
  box-shadow: 0 0 18px rgba(67,245,255,.06), inset 0 0 12px rgba(255,255,255,.035);
  font: 7px/1 monospace;
  letter-spacing: 1.4px;
}
.input-assist[data-evidence="blocked"] .assist-evidence { color: #ff8aa0; border-color: rgba(255,73,109,.4); box-shadow: 0 0 18px rgba(255,73,109,.12); }
.input-assist[data-evidence="candidate"] .assist-evidence { color: #ffe372; border-color: rgba(255,227,114,.42); box-shadow: 0 0 18px rgba(255,227,114,.12); }
.input-assist[data-evidence="ready"] .assist-evidence { color: #82ff9a; border-color: rgba(130,255,154,.42); box-shadow: 0 0 18px rgba(130,255,154,.14); }
.input-assist strong { color: #fff; font: 11px/1 monospace; letter-spacing: 1px; }
.input-assist span:not(.assist-kicker) { color: #8799bd; font: 8px/1.35 monospace; }
.input-assist .chase-route-cue {
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 5px 7px;
  color: #ffe372;
  border: 1px solid rgba(255,227,114,.18);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,227,114,.06), rgba(67,245,255,.03));
  font: 6px/1 monospace;
  letter-spacing: .9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-assist .chase-route-cue.hidden { display: none; }
.input-assist .chase-route-cue[data-route="flight"] {
  color: #cfdcff;
  border-color: rgba(124,157,255,.2);
  background: rgba(124,157,255,.04);
}
.input-assist .chase-route-cue[data-route="relativity"] {
  color: #ffd2ef;
  border-color: rgba(255,79,189,.2);
  background: rgba(255,79,189,.04);
}
.input-assist .chase-route-cue[data-route="expedition"] {
  color: #d8b4ff;
  border-color: rgba(216,180,255,.22);
  background: rgba(216,180,255,.045);
}
.input-assist .chase-route-cue[data-action]:not([data-action=""]) {
  border-style: dashed;
  text-shadow: 0 0 10px currentColor;
}
.input-assist .chase-route-cue[data-academy-drill]:not([data-academy-drill=""]) {
  border-color: rgba(255,227,114,.42);
  background: linear-gradient(90deg, rgba(255,227,114,.08), rgba(67,245,255,.035));
  text-shadow: 0 0 12px rgba(255,227,114,.22);
}
.input-assist .chase-route-cue[data-academy-drill]:not([data-academy-drill=""])::before {
  content: "ACADEMY · ";
  color: #ffe372;
}
.input-assist .chase-route-cue[data-forecast-sync-state="continue"] {
  color: #82ff9a;
  border-color: rgba(130,255,154,.24);
  background: linear-gradient(90deg, rgba(130,255,154,.075), rgba(67,245,255,.035));
  box-shadow: 0 0 14px rgba(130,255,154,.16);
}
.input-assist .chase-route-cue[data-forecast-sync-state="sample"] {
  color: #43f5ff;
  border-color: rgba(67,245,255,.24);
  background: linear-gradient(90deg, rgba(67,245,255,.075), rgba(216,180,255,.035));
  box-shadow: 0 0 14px rgba(67,245,255,.16);
}
.input-assist .chase-route-cue[data-forecast-sync-state="rerun"] {
  color: #ffe372;
  border-color: rgba(255,227,114,.28);
  background: linear-gradient(90deg, rgba(255,227,114,.095), rgba(67,245,255,.035));
  box-shadow: 0 0 14px rgba(255,227,114,.2);
}
.input-assist .chase-route-cue[data-forecast-sync-active="true"] {
  outline: 1px solid rgba(255,255,255,.16);
  outline-offset: 2px;
  box-shadow: inset 0 0 12px rgba(255,255,255,.055), 0 0 16px rgba(67,245,255,.16);
  animation: chase-sync-active 1.15s ease-in-out infinite alternate;
}
@keyframes chase-sync-active {
  to { filter: brightness(1.18); box-shadow: inset 0 0 14px rgba(255,255,255,.07), 0 0 20px rgba(67,245,255,.22); }
}
.run-control-brief {
  --sync-progress: 0%;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 102px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: min(720px, calc(100% - 48px));
  transform: translateX(-50%);
  pointer-events: none;
}
.run-control-brief b {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px 9px;
  color: #7285a8;
  border: 1px solid rgba(67,245,255,.14);
  background: rgba(5,12,28,.54);
  box-shadow: inset 0 0 16px rgba(67,245,255,.025);
  font: 6px/1 monospace;
  letter-spacing: 1.1px;
}
.run-control-brief i {
  overflow: hidden;
  color: #d8fbff;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-control-brief[data-mode="flight"] b { border-color: rgba(96,145,255,.2); box-shadow: inset 0 0 16px rgba(96,145,255,.035); }
.run-control-brief[data-mode="flight"] i { color: #cfdcff; }
.run-control-brief[data-mode="relativity"] b { border-color: rgba(255,79,189,.22); box-shadow: inset 0 0 16px rgba(255,79,189,.04); }
.run-control-brief[data-mode="relativity"] i { color: #ffd2ef; }
.run-control-brief[data-skin-fantasy="JET-FLIGHT FANTASY"] b:nth-last-child(2) { border-color: rgba(124,157,255,.24); background: rgba(124,157,255,.055); }
.run-control-brief[data-skin-fantasy="RELATIVITY THEATRE"] b:nth-last-child(2) { border-color: rgba(255,79,189,.24); background: rgba(255,79,189,.055); }
.run-control-brief[data-skin-fantasy="DIMENSION ODYSSEY"] b:nth-last-child(2) { border-color: rgba(216,180,255,.24); background: rgba(216,180,255,.055); }
.run-control-brief[data-academy-drill]:not([data-academy-drill=""]) b:last-child { color: #ffe372; border-color: rgba(255,227,114,.34); background: linear-gradient(135deg, rgba(255,227,114,.1), rgba(67,245,255,.045)); box-shadow: inset 0 0 18px rgba(255,227,114,.04); }
.run-control-brief[data-academy-drill]:not([data-academy-drill=""]) b:last-child i { color: #fff0a8; text-shadow: 0 0 12px rgba(255,227,114,.24); }
.run-control-brief[data-drill-source="recovery-review"] b {
  border-color: rgba(255,227,114,.38);
  background: linear-gradient(135deg, rgba(255,227,114,.1), rgba(255,79,189,.045));
  box-shadow: inset 0 0 18px rgba(255,227,114,.07), 0 0 18px rgba(255,227,114,.08);
}
.run-control-brief[data-drill-source="recovery-review"] i {
  color: #ffe372;
  text-shadow: 0 0 10px rgba(255,227,114,.42);
}
.run-control-brief[data-drill-source="forecast-sync"] b {
  border-color: rgba(216,180,255,.38);
  background: linear-gradient(135deg, rgba(67,245,255,.08), rgba(216,180,255,.075));
  box-shadow: inset 0 0 18px rgba(216,180,255,.07), 0 0 18px rgba(67,245,255,.07);
}
.run-control-brief[data-drill-source="forecast-sync"] i {
  color: #d8b4ff;
  text-shadow: 0 0 10px rgba(216,180,255,.42);
}
.run-control-brief[data-drill-source="launch-action-review"] b {
  border-color: rgba(255,154,92,.4);
  background: linear-gradient(135deg, rgba(255,154,92,.1), rgba(216,180,255,.055));
  box-shadow: inset 0 0 18px rgba(255,154,92,.07), 0 0 18px rgba(216,180,255,.07);
}
.run-control-brief[data-drill-source="launch-action-review"] i {
  color: #ffd6b8;
  text-shadow: 0 0 10px rgba(255,154,92,.42);
}
.run-control-brief[data-drill-source="launch-action-review"] b:nth-child(2)::after {
  position: absolute;
  top: 5px;
  right: 8px;
  padding: 2px 4px;
  color: #ffe372;
  border: 1px solid rgba(255,227,114,.26);
  background: rgba(255,227,114,.075);
  content: attr(data-launch-action-state);
  font: 6px/1 monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.run-control-brief[data-drill-source="launch-action-review"][data-launch-action-state="complete"] b:nth-child(2)::after {
  color: #caffd7;
  border-color: rgba(130,255,154,.28);
  background: rgba(130,255,154,.075);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="countdown"] b:nth-child(2) {
  min-height: 34px;
  padding-right: 38px;
  border-color: rgba(255,227,114,.4);
  box-shadow: inset 0 0 18px rgba(255,227,114,.07), 0 0 16px rgba(255,227,114,.08);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="countdown"] b:nth-child(2) i {
  color: #ffe372;
  text-shadow: 0 0 10px rgba(255,227,114,.45);
}
.run-control-brief[data-drill-source="forecast-sync"] b:nth-child(2)::after {
  position: absolute;
  right: 8px;
  bottom: 4px;
  left: 8px;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(67,245,255,.24) var(--sync-progress), rgba(255,255,255,.08) var(--sync-progress));
  box-shadow: 0 0 8px rgba(216,180,255,.16);
  content: "";
}
.run-control-brief[data-drill-source="forecast-sync"] b:nth-child(2)::before {
  position: absolute;
  top: 5px;
  right: 8px;
  color: #d8fbff;
  content: attr(data-sync-readout);
  font: 6px/1 monospace;
  letter-spacing: .8px;
  text-shadow: 0 0 8px rgba(216,180,255,.42);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="countdown"] b:nth-child(2)::before {
  color: #ffe372;
  text-shadow: 0 0 9px rgba(255,227,114,.48);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="ready"] b:nth-child(2)::before {
  padding: 2px 4px;
  color: #caffd7;
  border: 1px solid rgba(130,255,154,.28);
  background: rgba(130,255,154,.075);
  box-shadow: 0 0 12px rgba(130,255,154,.18);
  text-shadow: 0 0 10px rgba(130,255,154,.5);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="ready"] b:nth-child(2) {
  min-height: 34px;
  padding-right: 38px;
  border-color: rgba(130,255,154,.48);
  background: linear-gradient(135deg, rgba(130,255,154,.1), rgba(216,180,255,.065));
  box-shadow: inset 0 0 20px rgba(130,255,154,.08), 0 0 18px rgba(130,255,154,.12);
}
.run-control-brief[data-drill-source="forecast-sync"][data-sync-state="ready"] b:nth-child(2) i {
  color: #caffd7;
  text-shadow: 0 0 12px rgba(130,255,154,.5);
}
.classic-coach-cue { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; min-width: 0; padding-top: 4px; border-top: 1px solid rgba(67,245,255,.12); }
.classic-coach-cue b { color: #43f5ff; font: 6px/1 monospace; letter-spacing: .8px; white-space: nowrap; }
.classic-coach-cue span { overflow: hidden; color: #d7e5ff; font: 6px/1.35 monospace; text-overflow: ellipsis; white-space: nowrap; }
.classic-coach-cue[data-tone="active"] b { color: #7ceaff; }
.classic-coach-cue[data-tone="focus"] b { color: #d8b4ff; }
.classic-coach-cue[data-tone="warning"] b { color: #ffe372; text-shadow: 0 0 8px rgba(255,227,114,.45); }
.classic-coach-cue[data-tone="danger"] b { color: #ff8aa0; text-shadow: 0 0 8px rgba(255,73,109,.5); }
.classic-coach-cue[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.45); }
#assistStatus { color: #d7e5ff; text-align: right; }
.input-assist[data-style-target="active"] #assistStatus { color: #f7fbff; text-shadow: 0 0 14px rgba(67,245,255,.22); }
.input-assist.relativity[data-style-target="active"] #assistStatus { text-shadow: 0 0 14px rgba(255,79,189,.24); }
.input-assist[data-threat="warning"] #assistStatus { color: #ffe372; }
.input-assist[data-threat="danger"] #assistStatus { color: #ff8aa0; text-shadow: 0 0 12px rgba(255,73,109,.28); }

.controls-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 20px; color: #657697; font-size: 9px; white-space: nowrap;
}
kbd { padding: 3px 6px; border: 1px solid rgba(133,159,205,.32); border-bottom-color: rgba(133,159,205,.55); border-radius: 3px; color: #afbed8; background: rgba(11,21,45,.8); font: 9px/1 monospace; }

.flight-hud, .relativity-hud { position: absolute; z-index: 2; inset: 0; pointer-events: none; color: rgba(113, 175, 255, .75); font: 10px/1 monospace; }
.flight-radar { position: absolute; left: 24px; bottom: 118px; width: 128px; margin: 0; opacity: .82; }
.flight-radar canvas { display: block; width: 128px; height: 128px; border-radius: 50%; background: rgba(2,10,24,.72); filter: drop-shadow(0 0 14px rgba(96,145,255,.08)); }
.flight-radar figcaption { display: flex; justify-content: space-between; gap: 7px; margin-top: 5px; color: #63799e; font-size: 7px; letter-spacing: .65px; }
.flight-radar figcaption b { color: #8db6ff; font-weight: 400; text-align: right; }
.reticle { position: absolute; left: 50%; top: 50%; width: 90px; height: 52px; transform: translate(-50%, -50%); border: 1px solid rgba(90, 155, 255, .38); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; }
.reticle::before, .reticle::after { position: absolute; top: 50%; width: 30px; height: 1px; content: ""; background: currentColor; }
.reticle::before { right: 100%; }.reticle::after { left: 100%; }
.reticle span { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border: 1px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.altitude, .velocity { position: absolute; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; letter-spacing: 2px; }
.altitude { right: 6%; }.velocity { left: 6%; }
.altitude b, .velocity b { margin: 8px 0; color: #b8d5ff; font-size: 16px; }.altitude small, .velocity small { font-size: 7px; }
.pitch-ladder { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: 22px; align-items: center; transform: translate(-50%, -50%); opacity: .4; }
.pitch-ladder i { font-style: normal; }.pitch-ladder .zero { color: #c9e1ff; }
.g-load { position: absolute; z-index: 2; left: 50%; bottom: 112px; width: 150px; transform: translateX(-50%); color: #718cb4; }
.g-load > div { display: flex; justify-content: space-between; font-size: 7px; letter-spacing: 1.5px; }
.g-load b { color: #b8d5ff; font: 10px/1 monospace; }
.g-load > i { display: block; height: 2px; margin-top: 5px; overflow: hidden; background: rgba(255,255,255,.1); }
.g-load > i span { display: block; width: 13.3%; height: 100%; background: linear-gradient(90deg, #7ceaff, #ffe372 62%, #ff496d); box-shadow: 0 0 8px currentColor; transition: width .1s linear; }
.g-load[data-state="high"] b { color: #ffe372; }
.g-load[data-state="critical"] b { color: #ff8a9f; text-shadow: 0 0 10px #ff315f; }
.flight-energy { position: absolute; z-index: 2; left: 50%; bottom: 76px; width: 150px; transform: translateX(-50%); color: #718cb4; }
.flight-energy > div { display: flex; justify-content: space-between; font-size: 7px; letter-spacing: 1.2px; }
.flight-energy b { color: #b8d5ff; font: 9px/1 monospace; }
.flight-energy > i { display: block; height: 2px; margin-top: 5px; overflow: hidden; background: rgba(255,255,255,.1); }
.flight-energy > i span { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, #ff8aa0, #7ceaff 45%, #ffe372); box-shadow: 0 0 8px currentColor; transition: width .16s linear; }
.flight-energy em { display: block; margin-top: 5px; color: #718cb4; font: 6px/1 monospace; text-align: right; letter-spacing: .7px; }
.flight-energy[data-state="reserve"] b, .flight-energy[data-state="reserve"] em { color: #ff8aa0; }
.flight-energy[data-state="surplus"] b, .flight-energy[data-state="surplus"] em { color: #ffe372; text-shadow: 0 0 9px rgba(255,227,114,.55); }
.flight-vector-panel { position: absolute; z-index: 2; left: 50%; bottom: 150px; display: grid; gap: 4px; width: 230px; max-width: 36%; padding: 8px 10px; transform: translateX(-50%); border: 1px solid rgba(124,234,255,.24); background: linear-gradient(135deg, rgba(67,245,255,.07), rgba(96,145,255,.035)); box-shadow: inset 0 0 18px rgba(67,245,255,.04); }
.flight-vector-panel b { color: #9edfff; font: 8px/1 monospace; letter-spacing: 1px; }
.flight-vector-panel span { color: #effcff; font: 7px/1.35 monospace; }
.flight-vector-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.flight-vector-panel[data-tone="critical"] { border-color: rgba(255,73,109,.48); background: linear-gradient(135deg, rgba(255,73,109,.14), rgba(5,12,30,.68)); }
.flight-vector-panel[data-tone="critical"] b { color: #ff8aa0; text-shadow: 0 0 10px rgba(255,73,109,.55); }
.flight-vector-panel[data-tone="reward"] { border-color: rgba(130,255,154,.34); background: linear-gradient(135deg, rgba(130,255,154,.08), rgba(67,245,255,.04)); }
.flight-vector-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.42); }
.flight-vector-panel[data-tone="warning"] { border-color: rgba(255,227,114,.36); }
.flight-vector-panel[data-tone="warning"] b { color: #ffe372; }
.flight-path-panel { position: absolute; z-index: 2; left: 50%; bottom: 214px; display: grid; gap: 4px; width: 230px; max-width: 36%; padding: 8px 10px; transform: translateX(-50%); border: 1px solid rgba(216,180,255,.22); background: linear-gradient(135deg, rgba(216,180,255,.07), rgba(67,245,255,.035)); box-shadow: inset 0 0 18px rgba(216,180,255,.04); }
.flight-path-panel b { color: #d8b4ff; font: 8px/1 monospace; letter-spacing: 1px; }
.flight-path-panel span { color: #effcff; font: 7px/1.35 monospace; }
.flight-path-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.flight-path-panel[data-tone="critical"] { border-color: rgba(255,73,109,.5); background: linear-gradient(135deg, rgba(255,73,109,.15), rgba(5,12,30,.7)); }
.flight-path-panel[data-tone="critical"] b { color: #ff8aa0; text-shadow: 0 0 10px rgba(255,73,109,.58); }
.flight-path-panel[data-tone="warning"] { border-color: rgba(255,227,114,.38); }
.flight-path-panel[data-tone="warning"] b { color: #ffe372; }
.flight-path-panel[data-tone="reward"] { border-color: rgba(130,255,154,.36); background: linear-gradient(135deg, rgba(130,255,154,.08), rgba(67,245,255,.045)); }
.flight-path-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.45); }
.flight-attitude-ribbon {
  --bank-angle: 0deg;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 42px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: min(430px, 58%);
  padding: 6px 8px;
  transform: translateX(-50%) rotate(var(--bank-angle));
  transform-origin: 50% 50%;
  border: 1px solid rgba(124,234,255,.22);
  background: linear-gradient(90deg, rgba(7,19,42,.72), rgba(67,245,255,.045), rgba(7,19,42,.72));
  box-shadow: inset 0 0 20px rgba(67,245,255,.045), 0 0 22px rgba(96,145,255,.06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.flight-attitude-ribbon::before {
  position: absolute;
  left: 50%;
  top: -9px;
  width: 46px;
  height: 1px;
  content: "";
  background: #7ceaff;
  box-shadow: 0 0 12px rgba(124,234,255,.6);
  transform: translateX(-50%);
}
.flight-attitude-ribbon::after {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(124,234,255,.22), #7ceaff, rgba(124,234,255,.22), transparent);
  box-shadow: 0 0 14px rgba(124,234,255,.28);
  opacity: .42;
  transform: translate(-50%, -50%);
  animation: flight-attitude-horizon 1.9s ease-in-out infinite alternate;
  pointer-events: none;
}
.flight-attitude-ribbon span {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: #718cb4;
  font: 6px/1 monospace;
  letter-spacing: .9px;
  text-align: center;
}
.flight-attitude-ribbon b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #d8fbff;
  font: 8px/1 monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flight-attitude-ribbon[data-energy-band="reserve"] {
  border-color: rgba(255,73,109,.34);
  box-shadow: inset 0 0 18px rgba(255,73,109,.055), 0 0 22px rgba(255,73,109,.08);
}
.flight-attitude-ribbon[data-energy-band="reserve"] b { color: #ff8aa0; }
.flight-attitude-ribbon[data-energy-band="surplus"] {
  border-color: rgba(255,227,114,.36);
  box-shadow: inset 0 0 20px rgba(255,227,114,.07), 0 0 24px rgba(255,227,114,.1);
}
.flight-attitude-ribbon[data-energy-band="surplus"] b { color: #ffe372; text-shadow: 0 0 8px rgba(255,227,114,.42); }
@keyframes flight-attitude-horizon {
  to { opacity: .68; filter: brightness(1.16); }
}
.flight-coach-cue { display: grid; gap: 2px; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(141,182,255,.14); text-align: right; }
.flight-coach-cue b { color: #8db6ff; font: 6px/1 monospace; letter-spacing: .75px; }
.flight-coach-cue span { overflow: hidden; color: #d7e5ff; font: 6px/1.35 monospace; text-overflow: ellipsis; white-space: nowrap; }
.flight-coach-cue[data-tone="focus"] b { color: #7ceaff; }
.flight-coach-cue[data-tone="warning"] b { color: #ffe372; text-shadow: 0 0 8px rgba(255,227,114,.45); }
.flight-coach-cue[data-tone="danger"] b { color: #ff8aa0; text-shadow: 0 0 8px rgba(255,73,109,.5); }
.flight-coach-cue[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.45); }
.g-load-vignette { position: absolute; z-index: 1; inset: 0; border: 8px solid rgba(170,215,255,.2); box-shadow: inset 0 0 90px 28px rgba(5,16,35,.88); opacity: 0; pointer-events: none; transition: opacity .1s linear; }
.g-load-vignette[data-blackout="true"] { border-color: rgba(255,255,255,.28); box-shadow: inset 0 0 125px 52px rgba(0,3,12,.94); }

.relativity-hud .gamma { position: absolute; left: 28px; bottom: 52px; }
.minkowski-chart { position: absolute; z-index: 1; right: 24px; top: 50%; width: 144px; margin: 0; transform: translateY(-50%); opacity: .82; }
.minkowski-chart canvas { display: block; width: 144px; height: 96px; border: 1px solid rgba(124,234,255,.2); background: rgba(4,7,22,.72); box-shadow: inset 0 0 20px rgba(255,79,189,.06), 0 0 18px rgba(67,245,255,.045); }
.minkowski-chart figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: #7083a6; font-size: 7px; letter-spacing: .7px; }
.minkowski-chart figcaption b { color: #d8b4ff; font-weight: 400; text-align: right; }
.relativity-hud .gamma b { display: block; margin-top: 7px; color: #ff77c9; font-size: 20px; }
.light-speed { position: absolute; left: 28px; bottom: 36px; width: 150px; height: 3px; background: rgba(255,255,255,.12); }
.light-speed span { display: block; width: 15%; height: 100%; background: linear-gradient(90deg, #4285ff, #ff3cb4); box-shadow: 0 0 10px #ff3cb4; transition: width .2s; }
.worldline, .proper-time, .echo-time, .coordinate-time, .anchor-status, .gravity-status, .cone-status { position: absolute; right: 28px; bottom: 40px; text-align: right; }
.proper-time { bottom: 60px; }
.echo-time { bottom: 80px; color: #776889; }
.coordinate-time { right: auto; left: 28px; bottom: 60px; }
.anchor-status { right: auto; left: 28px; bottom: 40px; color: #776889; }
.gravity-status { right: auto; left: 28px; bottom: 80px; color: #776889; }
.cone-status { right: auto; left: 28px; bottom: 100px; color: #9e83b6; }
.cone-status.open b { color: #ffffff; text-shadow: 0 0 14px #ff4fbd; }
.worldline b, .proper-time b, .echo-time b, .coordinate-time b, .anchor-status b, .gravity-status b, .cone-status b { color: #ff7acc; }
.relativity-vector-panel { position: absolute; left: 28px; bottom: 164px; display: grid; gap: 4px; max-width: 230px; padding: 8px 10px; border: 1px solid rgba(216,180,255,.24); background: linear-gradient(135deg, rgba(255,79,189,.08), rgba(67,245,255,.035)); box-shadow: inset 0 0 18px rgba(255,79,189,.04); }
.relativity-vector-panel b { color: #d8b4ff; font: 8px/1 monospace; letter-spacing: 1px; }
.relativity-vector-panel span { color: #eff4ff; font: 7px/1.35 monospace; }
.relativity-vector-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.relativity-vector-panel[data-tone="critical"] { border-color: rgba(255,79,189,.46); background: linear-gradient(135deg, rgba(255,79,189,.15), rgba(10,4,28,.62)); }
.relativity-vector-panel[data-tone="critical"] b { color: #ff9bd5; text-shadow: 0 0 10px rgba(255,79,189,.55); }
.relativity-vector-panel[data-tone="reward"] { border-color: rgba(130,255,154,.34); background: linear-gradient(135deg, rgba(130,255,154,.09), rgba(67,245,255,.04)); }
.relativity-vector-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.42); }
.relativity-vector-panel[data-tone="warning"] { border-color: rgba(255,227,114,.34); }
.relativity-vector-panel[data-tone="warning"] b { color: #ffe372; }
.causal-forecast-panel { position: absolute; left: 28px; bottom: 226px; display: grid; gap: 4px; max-width: 230px; padding: 8px 10px; border: 1px solid rgba(124,234,255,.22); background: linear-gradient(135deg, rgba(67,245,255,.08), rgba(255,79,189,.035)); box-shadow: inset 0 0 18px rgba(67,245,255,.045); }
.causal-forecast-panel b { color: #7ceaff; font: 8px/1 monospace; letter-spacing: 1px; }
.causal-forecast-panel span { color: #eff4ff; font: 7px/1.35 monospace; }
.causal-forecast-panel small { color: #8ba0c7; font: 6px/1.35 monospace; }
.causal-forecast-panel[data-tone="critical"] { border-color: rgba(255,73,109,.5); background: linear-gradient(135deg, rgba(255,73,109,.17), rgba(10,4,28,.68)); }
.causal-forecast-panel[data-tone="critical"] b { color: #ff8aa0; text-shadow: 0 0 10px rgba(255,73,109,.58); }
.causal-forecast-panel[data-tone="warning"] { border-color: rgba(255,227,114,.38); }
.causal-forecast-panel[data-tone="warning"] b { color: #ffe372; }
.causal-forecast-panel[data-tone="reward"] { border-color: rgba(130,255,154,.36); background: linear-gradient(135deg, rgba(130,255,154,.09), rgba(67,245,255,.04)); }
.causal-forecast-panel[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.45); }
.spacetime-metric-ribbon {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 84px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  width: min(470px, 64%);
  padding: 7px 9px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(255,79,189,.22);
  background: linear-gradient(90deg, rgba(28,6,37,.72), rgba(67,245,255,.045), rgba(8,12,34,.72));
  box-shadow: inset 0 0 22px rgba(255,79,189,.045), 0 0 24px rgba(67,245,255,.055);
}
.spacetime-metric-ribbon::before,
.spacetime-metric-ribbon::after {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 1px;
  height: 160%;
  content: "";
  background: linear-gradient(transparent, rgba(255,79,189,.7), rgba(124,234,255,.62), transparent);
  box-shadow: 0 0 14px rgba(255,79,189,.35);
  opacity: .34;
  transform-origin: 50% 50%;
  animation: spacetime-lightcone-drift 2.8s ease-in-out infinite alternate;
  pointer-events: none;
}
.spacetime-metric-ribbon::before { transform: rotate(63deg); }
.spacetime-metric-ribbon::after {
  background: linear-gradient(transparent, rgba(124,234,255,.58), rgba(255,79,189,.68), transparent);
  transform: rotate(-63deg);
  animation-delay: -1.4s;
}
.spacetime-metric-ribbon span {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: #8c7ca6;
  font: 6px/1 monospace;
  letter-spacing: 1px;
  text-align: center;
}
.spacetime-metric-ribbon b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #ffd2ef;
  font: 8px/1 monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spacetime-metric-ribbon[data-field="redshift"] {
  border-color: rgba(255,227,114,.34);
  box-shadow: inset 0 0 20px rgba(255,227,114,.06), 0 0 22px rgba(255,227,114,.08);
}
.spacetime-metric-ribbon[data-field="redshift"] b { color: #ffe372; }
.spacetime-metric-ribbon[data-field="resonance"] {
  border-color: rgba(124,234,255,.38);
  box-shadow: inset 0 0 22px rgba(124,234,255,.07), 0 0 24px rgba(124,234,255,.11);
}
.spacetime-metric-ribbon[data-field="resonance"] b { color: #7ceaff; text-shadow: 0 0 8px rgba(124,234,255,.5); }
.spacetime-metric-ribbon[data-field="horizon"] {
  border-color: rgba(255,255,255,.52);
  background: linear-gradient(90deg, rgba(255,79,189,.22), rgba(255,255,255,.06), rgba(5,10,26,.8));
  box-shadow: inset 0 0 24px rgba(255,255,255,.08), 0 0 28px rgba(255,79,189,.16);
}
.spacetime-metric-ribbon[data-field="horizon"] b { color: #fff; text-shadow: 0 0 10px #ff4fbd; }
@keyframes spacetime-lightcone-drift {
  to { opacity: .52; filter: brightness(1.18); }
}
.twin-clock { position: absolute; left: 28px; bottom: 120px; width: 190px; padding: 7px 9px; border-left: 1px solid rgba(124,234,255,.35); background: linear-gradient(90deg, rgba(6,18,38,.72), transparent); color: #8094b5; }
.twin-clock > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 7px; letter-spacing: .7px; }
.twin-clock b { color: #9edfff; font-weight: 500; text-align: right; }
.twin-clock-meter { height: 2px; margin: 6px 0 5px; background: rgba(255,255,255,.1); }
.twin-clock-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #55dfff, #ff4fbd); box-shadow: 0 0 8px rgba(255,79,189,.7); transition: width .18s linear; }
.twin-clock small { color: #b8c7df; font-size: 7px; letter-spacing: .5px; }
.relativity-insight { display: flex; gap: 6px; align-items: baseline; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relativity-insight b { flex: none; color: #7ceaff; font-size: 6px; letter-spacing: .8px; }
.relativity-insight span { overflow: hidden; text-overflow: ellipsis; color: #8195b7; font-size: 6px; }
.relativity-insight[data-tone="active"] b { color: #d8b4ff; }
.relativity-insight[data-tone="critical"] b { color: #ff9bd5; text-shadow: 0 0 8px rgba(255,79,189,.55); }
.relativity-insight[data-tone="horizon"] b { color: #fff; text-shadow: 0 0 9px #ff4fbd; }
.relativity-coach-cue { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(67,245,255,.12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relativity-coach-cue b { flex: none; color: #7ceaff; font-size: 6px; letter-spacing: .8px; }
.relativity-coach-cue span { overflow: hidden; text-overflow: ellipsis; color: #cfe0ff; font-size: 6px; }
.relativity-coach-cue[data-tone="focus"] b { color: #d8b4ff; }
.relativity-coach-cue[data-tone="warning"] b { color: #ffe372; text-shadow: 0 0 8px rgba(255,227,114,.45); }
.relativity-coach-cue[data-tone="reward"] b { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.45); }
.twin-clock[data-state="critical"] { border-left-color: #ff4fbd; box-shadow: -5px 0 18px rgba(255,79,189,.12); }
.twin-clock[data-state="critical"] b { color: #ff9bd5; }
.twin-clock[data-state="complete"] { border-left-color: #8dffbf; }
.twin-clock[data-state="complete"] b, .twin-clock[data-state="complete"] small { color: #8dffbf; }
.twin-rendezvous { position: absolute; z-index: 3; left: 50%; top: 112px; width: 220px; padding: 10px 12px; transform: translateX(-50%); border: 1px solid rgba(255,79,189,.38); background: linear-gradient(135deg, rgba(18,8,38,.94), rgba(5,22,42,.9)); box-shadow: 0 0 26px rgba(255,79,189,.14), inset 0 0 18px rgba(124,234,255,.05); }
.twin-rendezvous > div { display: flex; justify-content: space-between; color: #ae8ec4; font: 7px/1 monospace; letter-spacing: 1px; }
.twin-rendezvous > div b { color: #ff8ed2; font-size: 10px; }
.twin-rendezvous > strong { display: block; margin: 7px 0; color: #fff; font: 13px/1 monospace; letter-spacing: 2px; text-shadow: 0 0 12px #ff4fbd; }
.twin-rendezvous > i { display: block; height: 3px; background: rgba(255,255,255,.1); }
.twin-rendezvous > i span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff4fbd, #7ceaff, #fff); box-shadow: 0 0 9px #7ceaff; transition: width .14s linear; }
.twin-rendezvous small { display: block; margin-top: 7px; color: #9aafd0; font: 7px/1 monospace; letter-spacing: .6px; }
.twin-rendezvous[data-locked="true"] { border-color: rgba(124,234,255,.72); box-shadow: 0 0 30px rgba(124,234,255,.18), inset 0 0 20px rgba(124,234,255,.08); }
.twin-rendezvous[data-locked="true"] > strong { color: #bff8ff; text-shadow: 0 0 12px #7ceaff; }
.rindler-horizon { position: absolute; left: 28px; bottom: 178px; width: 190px; padding: 7px 9px; border-left: 1px solid rgba(255,79,189,.24); background: linear-gradient(90deg, rgba(31,7,35,.68), transparent); color: #806f94; }
.rindler-horizon > div { display: flex; justify-content: space-between; gap: 8px; font-size: 7px; letter-spacing: .65px; }
.rindler-horizon b { color: #d8b4ff; font-weight: 500; }
.rindler-horizon > i { display: block; height: 2px; margin: 6px 0 5px; background: rgba(255,255,255,.1); }
.rindler-horizon > i span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6091ff, #ff4fbd, #fff); box-shadow: 0 0 8px rgba(255,79,189,.62); transition: width .14s linear; }
.rindler-horizon small { color: #9c85b5; font-size: 6px; letter-spacing: .55px; }
.rindler-horizon[data-state="critical"] { border-left-color: #ff4fbd; box-shadow: -5px 0 18px rgba(255,79,189,.1); }
.rindler-horizon[data-state="horizon"] { border-left-color: #fff; background: linear-gradient(90deg, rgba(255,79,189,.2), transparent); }
.rindler-horizon[data-state="horizon"] b, .rindler-horizon[data-state="horizon"] small { color: #fff; text-shadow: 0 0 10px #ff4fbd; }
.anchor-button {
  position: absolute;
  z-index: 4;
  left: 28px;
  bottom: 88px;
  padding: 8px 11px;
  color: #ffc4e7;
  border: 1px solid rgba(255,79,189,.32);
  background: rgba(35,7,35,.64);
  cursor: pointer;
  font: 8px/1 monospace;
  letter-spacing: 1px;
}
.anchor-button:hover { border-color: var(--pink); box-shadow: 0 0 18px rgba(255,79,189,.12); }

.overlay {
  position: absolute; z-index: 10; inset: 0; display: grid; place-items: center;
  background: rgba(2, 5, 15, .68); backdrop-filter: blur(8px);
}
.upgrade-overlay {
  position: absolute;
  z-index: 11;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(45,103,255,.2), transparent 38%),
    rgba(2,5,15,.82);
  backdrop-filter: blur(10px);
}
.upgrade-panel { width: min(860px, calc(100% - 40px)); text-align: center; }
.upgrade-panel > p { color: var(--cyan); font: 9px/1 monospace; letter-spacing: 5px; }
.upgrade-panel h2 { margin: 12px 0 8px; font-size: clamp(27px, 4vw, 42px); }
.upgrade-panel > small { color: #7084a8; }
.upgrade-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.upgrade-card {
  position: relative;
  min-height: 220px;
  padding: 25px 20px;
  color: white;
  border: 1px solid rgba(87,134,255,.3);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(14,27,60,.94), rgba(6,11,29,.94));
  cursor: pointer;
  transition: .2s;
}
.upgrade-card > em { position: absolute; right: 10px; top: 9px; color: var(--cyan); font: 7px/1 monospace; letter-spacing: 1px; }
.upgrade-card.mode-exclusive { border-color: rgba(67,245,255,.42); background: linear-gradient(145deg, rgba(10,38,64,.96), rgba(6,11,29,.94)); }
.upgrade-card:hover { transform: translateY(-7px); border-color: var(--cyan); box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 35px rgba(67,245,255,.06); }
.upgrade-card i { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; color: var(--cyan); border: 1px solid rgba(67,245,255,.35); border-radius: 50%; font-style: normal; font-size: 25px; box-shadow: 0 0 25px rgba(67,245,255,.1); }
.upgrade-card strong { display: block; margin-bottom: 12px; font-size: 16px; }
.upgrade-card small { color: #788bad; font-size: 10px; line-height: 1.7; }
.expedition-intermission {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,245,255,.13), transparent 34%),
    linear-gradient(135deg, rgba(3,7,20,.95), rgba(13,5,28,.95));
  backdrop-filter: blur(12px);
}
.expedition-intermission > div { width: min(620px, calc(100% - 40px)); text-align: center; }
.expedition-intermission > div > p:first-child { color: var(--cyan); font: 8px/1 monospace; letter-spacing: 5px; }
.expedition-intermission h2 { margin: 13px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.expedition-intermission > div > span { color: #8d79a8; font-size: 12px; font-style: italic; }
.intermission-stats { margin: 30px auto 20px; padding: 18px; width: min(360px, 100%); border: 1px solid var(--line); }
.intermission-stats b { display: block; color: var(--cyan); font: 30px/1 monospace; }
.intermission-stats small { display: block; margin-top: 8px; color: #6d82a4; font-size: 8px; }
.expedition-intermission > div > p:not(:first-child) { color: #788bad; font-size: 11px; line-height: 1.8; }
.expedition-intermission button { margin-top: 18px; padding: 13px 22px; color: #031016; border: 1px solid var(--cyan); background: var(--cyan); cursor: pointer; }
.expedition-intermission button i { margin-left: 10px; font-style: normal; }
.expedition-event { margin: 20px auto 0; padding: 15px; max-width: 520px; border: 1px solid rgba(168,85,247,.25); background: rgba(11,5,25,.55); }
.expedition-event > small { color: var(--violet); font: 7px/1 monospace; letter-spacing: 2px; }
.expedition-event h3 { margin: 8px 0 5px; font-size: 15px; }
.expedition-event > p { margin: 0 0 12px !important; color: #796e91 !important; font-size: 9px !important; }
.expedition-event > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.expedition-event button { margin: 0; padding: 10px; color: #b9c7df; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 9px; }
.expedition-event button:hover { color: white; border-color: var(--violet); }
.expedition-event button:disabled { opacity: .45; cursor: default; }

.achievement-toast {
  position: absolute;
  z-index: 15;
  right: 24px;
  bottom: 54px;
  min-width: 250px;
  padding: 14px 18px;
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(255,213,96,.38);
  background: rgba(12,16,31,.94);
  box-shadow: 0 15px 40px rgba(0,0,0,.45), inset 0 0 25px rgba(255,213,96,.04);
  animation: toast-in .35s ease-out;
}
.achievement-toast > i { color: #ffe372; font-style: normal; font-size: 25px; text-shadow: 0 0 14px #ffe372; }
.achievement-toast small { display: block; margin-bottom: 4px; color: #917f53; font: 7px/1 monospace; letter-spacing: 2px; }
.achievement-toast strong { font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } }
.overlay-panel { width: min(420px, calc(100% - 40px)); max-height: calc(100% - 32px); padding: 38px; display: flex; flex-direction: column; overflow-y: auto; text-align: center; border: 1px solid rgba(91,140,255,.3); background: linear-gradient(145deg, rgba(13,22,51,.95), rgba(5,9,25,.95)); box-shadow: 0 30px 100px #000; }
.overlay-panel > p:first-child { color: var(--cyan); font: 9px/1 monospace; letter-spacing: 4px; }
.overlay-panel h2 { margin: 12px 0 26px; font-size: 29px; }
#overlayKicker { order: -5; }
#overlayTitle { order: -4; }
#overlayMessage { order: -3; margin: 8px 0 16px; }
.final-score small { display: block; color: var(--muted); font: 9px/1 monospace; letter-spacing: 2px; }
.final-score strong { display: block; margin-top: 9px; color: var(--cyan); font: 38px/1 monospace; }
.score-delta { margin: 12px 0 0; padding: 10px 12px; text-align: left; border: 1px solid rgba(67,245,255,.18); background: linear-gradient(90deg, rgba(67,245,255,.055), rgba(255,79,189,.035)); }
.score-delta em { display: inline-block; margin-bottom: 6px; padding: 3px 7px; color: #10192a; border: 1px solid rgba(67,245,255,.28); border-radius: 999px; background: linear-gradient(90deg, #43f5ff, #ffe372); box-shadow: 0 0 10px rgba(67,245,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.score-delta small { display: block; color: #7ceaff; font: 7px/1 monospace; letter-spacing: 2px; }
.score-delta strong { display: block; margin: 6px 0 4px; color: #e8fbff; font: 13px/1 monospace; letter-spacing: 1px; }
.score-delta span { display: block; color: #8194b6; font-size: 9px; line-height: 1.45; }
.score-delta[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.score-delta[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.score-delta[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.score-delta.ahead { border-color: rgba(130,255,154,.25); background: rgba(130,255,154,.045); }
.score-delta.ahead small, .score-delta.ahead strong { color: #82ff9a; }
.score-delta.behind { border-color: rgba(255,227,114,.2); background: rgba(255,227,114,.04); }
.score-delta.behind small, .score-delta.behind strong { color: #ffe372; }
.overlay-panel > p { color: var(--muted); font-size: 12px; }
.reward-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}
.reward-row span { padding: 10px 6px; color: #7184a7; border: 1px solid var(--line); font: 8px/1.5 monospace; }
.reward-row b { display: block; margin-top: 4px; color: #c5d6f4; }
.run-outcome { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 2px; text-align: left; }
.run-outcome em { grid-column: 1 / -1; justify-self: start; padding: 3px 7px; color: #10192a; border: 1px solid rgba(216,180,255,.28); border-radius: 999px; background: linear-gradient(90deg, #d8b4ff, #43f5ff); box-shadow: 0 0 10px rgba(216,180,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.run-outcome b { display: grid; gap: 5px; min-width: 0; padding: 8px 9px; color: #607595; border: 1px solid rgba(216,180,255,.16); background: linear-gradient(135deg, rgba(216,180,255,.045), rgba(67,245,255,.028)); font: 6px/1 monospace; letter-spacing: 1px; }
.run-outcome i { overflow: hidden; color: #f1fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(216,180,255,.32); }
.run-outcome[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.run-outcome[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.run-outcome[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.run-outcome[data-mode="expedition"] em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 10px rgba(216,180,255,.2); }
.run-outcome[data-mode="hold"] em { color: #dce8ff; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(67,245,255,.12)); border-color: rgba(255,255,255,.22); box-shadow: 0 0 10px rgba(255,255,255,.12); }
.run-style {
  margin-top: 12px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(168,85,247,.28);
  background: linear-gradient(90deg, rgba(255,60,180,.08), rgba(67,245,255,.045));
}
.run-style em { display: inline-block; margin-bottom: 7px; padding: 3px 7px; color: #10192a; border: 1px solid rgba(216,180,255,.28); border-radius: 999px; background: linear-gradient(90deg, #d8b4ff, #43f5ff); box-shadow: 0 0 10px rgba(216,180,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.run-style small { display: block; color: #9e83b6; font: 7px/1 monospace; letter-spacing: 2px; text-transform: uppercase; }
.run-style strong { display: block; margin: 7px 0 5px; color: #fff; font-size: 15px; text-shadow: 0 0 16px #ff4fbd; }
.run-style span { display: block; color: #8ea2c7; font-size: 10px; line-height: 1.55; }
.run-style mark { display: block; margin-top: 8px; padding: 6px 7px; color: #82ff9a; border: 1px solid rgba(130,255,154,.18); background: rgba(130,255,154,.045); font: 7px/1.35 monospace; letter-spacing: 1px; }
.run-style mark.missed { color: #d8b4ff; border-color: rgba(216,180,255,.16); background: rgba(216,180,255,.045); }
.run-style[data-mode="classic"] { border-color: rgba(67,245,255,.26); background: linear-gradient(90deg, rgba(67,245,255,.07), rgba(255,227,114,.035)); }
.run-style[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.run-style[data-mode="flight"] { border-color: rgba(124,157,255,.28); background: linear-gradient(90deg, rgba(124,157,255,.08), rgba(67,245,255,.04)); }
.run-style[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.run-style[data-mode="relativity"] { border-color: rgba(255,79,189,.3); background: linear-gradient(90deg, rgba(255,79,189,.085), rgba(67,245,255,.04)); }
.run-style[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.run-chase-ribbon { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 10px; overflow: hidden; text-align: left; }
.run-chase-ribbon.hidden { display: none; }
.run-chase-ribbon::before {
  position: absolute;
  inset: -30% -35%;
  content: "";
  background: linear-gradient(110deg, transparent 36%, rgba(255,227,114,.18) 50%, transparent 64%);
  opacity: .32;
  transform: translateX(-52%) skewX(-16deg);
  animation: run-chase-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
.run-chase-ribbon b, .run-chase-ribbon button { position: relative; z-index: 1; }
.run-chase-ribbon b { display: grid; gap: 5px; min-width: 0; padding: 8px 9px; color: #66799a; border: 1px solid rgba(255,227,114,.16); background: linear-gradient(135deg, rgba(255,227,114,.055), rgba(67,245,255,.03)); font: 6px/1 monospace; letter-spacing: 1px; }
.run-chase-ribbon i { overflow: hidden; color: #f1fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(255,227,114,.24); }
.run-chase-ribbon[data-archive-complete="true"] b:nth-of-type(4) { border-color: rgba(130,255,154,.22); background: rgba(130,255,154,.04); }
.run-chase-ribbon[data-archive-complete="true"] b:nth-of-type(4) i { color: #82ff9a; text-shadow: 0 0 10px rgba(130,255,154,.18); }
.run-chase-ribbon[data-skin-fantasy="JET-FLIGHT FANTASY"] b:nth-last-of-type(2) { border-color: rgba(124,157,255,.3); background: rgba(124,157,255,.065); }
.run-chase-ribbon[data-skin-fantasy="RELATIVITY THEATRE"] b:nth-last-of-type(2) { border-color: rgba(255,79,189,.32); background: rgba(255,79,189,.065); }
.run-chase-ribbon[data-skin-fantasy="DIMENSION ODYSSEY"] b:nth-last-of-type(2) { border-color: rgba(216,180,255,.32); background: rgba(216,180,255,.065); }
.run-chase-ribbon[data-academy-drill]:not([data-academy-drill=""]) b:last-of-type { color: #ffe372; border-color: rgba(255,227,114,.34); background: linear-gradient(135deg, rgba(255,227,114,.11), rgba(67,245,255,.045)); box-shadow: inset 0 0 18px rgba(255,227,114,.035); }
.run-chase-ribbon[data-academy-drill]:not([data-academy-drill=""]) b:last-of-type i { color: #fff0a8; text-shadow: 0 0 12px rgba(255,227,114,.24); }
.run-chase-button {
  grid-column: 1 / -1;
  padding: 9px 10px;
  color: #06131c;
  border: 1px solid #ffe372;
  background: linear-gradient(90deg, #ffe372, #43f5ff);
  box-shadow: 0 0 18px rgba(255,227,114,.16);
  cursor: pointer;
  font: 8px/1 monospace;
  letter-spacing: 1px;
}
.run-chase-button.hidden { display: none; }
.run-chase-button i { margin-left: 6px; color: inherit; font-style: normal; text-shadow: none; }
.run-chase-button:hover { filter: brightness(1.08); box-shadow: 0 0 24px rgba(255,227,114,.24); }
@keyframes run-chase-sweep {
  55%, 100% { transform: translateX(52%) skewX(-16deg); }
}
.rank-result { margin-top: 12px; padding: 8px; color: #8193b1; border: 1px solid rgba(255,227,114,.2); font: 8px/1 monospace; letter-spacing: 2px; }
.rank-result em { display: inline-block; margin: 0 7px 0 0; padding: 3px 7px; color: #10192a; border: 1px solid rgba(255,227,114,.3); border-radius: 999px; background: linear-gradient(90deg, #ffe372, #43f5ff); box-shadow: 0 0 10px rgba(255,227,114,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.rank-result span { color: #8193b1; }
.rank-result b { color: #ffe372; font-size: 13px; }
.rank-result[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.rank-result[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.rank-result[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.pause-brief { margin-top: 12px; padding: 12px; text-align: left; border: 1px solid rgba(255,227,114,.2); background: linear-gradient(90deg, rgba(255,227,114,.055), rgba(67,245,255,.035)); }
.pause-brief em { display: inline-block; margin-bottom: 7px; padding: 3px 7px; color: #10192a; border: 1px solid rgba(255,227,114,.3); border-radius: 999px; background: linear-gradient(90deg, #ffe372, #43f5ff); box-shadow: 0 0 10px rgba(255,227,114,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.pause-brief small { display: block; color: #ffe372; font: 7px/1 monospace; letter-spacing: 2px; }
.pause-brief strong { display: block; margin: 7px 0 5px; color: #fff8cf; font-size: 12px; text-shadow: 0 0 14px rgba(255,227,114,.18); }
.pause-brief span { display: block; color: #8ea2c7; font-size: 9px; line-height: 1.55; }
.pause-brief[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.pause-brief[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.pause-brief[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.next-sortie { position: relative; margin-top: 12px; padding: 12px; overflow: hidden; text-align: left; border: 1px solid rgba(67,245,255,.22); background: linear-gradient(90deg, rgba(67,245,255,.075), rgba(255,79,189,.035)); box-shadow: inset 0 0 28px rgba(67,245,255,.035); }
.next-sortie::before {
  position: absolute;
  inset: -24% -34%;
  content: "";
  background: linear-gradient(112deg, transparent 37%, rgba(67,245,255,.16) 50%, transparent 63%);
  opacity: .32;
  transform: translateX(-54%) skewX(-15deg);
  animation: next-sortie-sweep 3.4s ease-in-out infinite;
  pointer-events: none;
}
.next-sortie > em, .next-sortie > small, .next-sortie > strong, .next-sortie > span, .next-sortie-intent, .next-sortie-archive, .next-sortie-drill, .next-sortie-button { position: relative; z-index: 1; }
.next-sortie > em { display: inline-block; margin-bottom: 7px; padding: 3px 7px; color: #10192a; border: 1px solid rgba(67,245,255,.3); border-radius: 999px; background: linear-gradient(90deg, #43f5ff, #d8b4ff); box-shadow: 0 0 10px rgba(67,245,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.next-sortie small { display: block; color: var(--cyan); font: 7px/1 monospace; letter-spacing: 2px; }
.next-sortie strong { display: block; margin: 7px 0 5px; color: #e8fbff; font-size: 12px; text-shadow: 0 0 14px rgba(67,245,255,.24); }
.next-sortie span { display: block; color: #8ea2c7; font-size: 9px; line-height: 1.55; }
.next-sortie[data-mode="classic"] > em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.next-sortie[data-mode="flight"] > em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.next-sortie[data-mode="relativity"] > em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.next-sortie[data-mode="expedition"] > em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 10px rgba(216,180,255,.2); }
.next-sortie-intent { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.next-sortie-intent b { display: grid; gap: 4px; min-width: 0; padding: 7px 8px; color: #607595; border: 1px solid rgba(124,234,255,.16); background: rgba(67,245,255,.035); font: 6px/1 monospace; letter-spacing: 1.1px; }
.next-sortie-intent i { overflow: hidden; color: #d8fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(67,245,255,.28); }
.next-sortie[data-skin-fantasy="JET-FLIGHT FANTASY"] .next-sortie-intent b:nth-last-child(2) { border-color: rgba(124,157,255,.32); background: rgba(124,157,255,.07); }
.next-sortie[data-skin-fantasy="RELATIVITY THEATRE"] .next-sortie-intent b:nth-last-child(2) { border-color: rgba(255,79,189,.34); background: rgba(255,79,189,.07); }
.next-sortie[data-skin-fantasy="DIMENSION ODYSSEY"] .next-sortie-intent b:nth-last-child(2) { border-color: rgba(216,180,255,.34); background: rgba(216,180,255,.07); }
.next-sortie[data-academy-drill]:not([data-academy-drill=""]) .next-sortie-intent b:last-child { color: #ffe372; border-color: rgba(255,227,114,.34); background: linear-gradient(135deg, rgba(255,227,114,.11), rgba(67,245,255,.045)); box-shadow: inset 0 0 18px rgba(255,227,114,.035); }
.next-sortie[data-academy-drill]:not([data-academy-drill=""]) .next-sortie-intent b:last-child i { color: #fff0a8; text-shadow: 0 0 12px rgba(255,227,114,.24); }
.next-sortie-archive { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; margin-top: 8px; }
.next-sortie-archive b { display: grid; gap: 4px; min-width: 0; padding: 7px 8px; color: #7c8fac; border: 1px solid rgba(216,180,255,.16); background: rgba(216,180,255,.035); font: 6px/1 monospace; letter-spacing: 1px; }
.next-sortie-archive i { overflow: hidden; color: #ffe372; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(255,227,114,.18); }
.next-sortie-archive.complete b { border-color: rgba(130,255,154,.24); background: rgba(130,255,154,.04); }
.next-sortie-archive.complete i { color: #82ff9a; text-shadow: 0 0 10px rgba(130,255,154,.18); }
.next-sortie-drill { display: grid; gap: 5px; margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(255,227,114,.22); background: linear-gradient(135deg, rgba(255,227,114,.07), rgba(67,245,255,.035)); }
.next-sortie-drill.hidden { display: none; }
.next-sortie-drill b, .next-sortie-drill span, .next-sortie-drill em { display: block; }
.next-sortie-drill b { color: #ffe372; font: 7px/1 monospace; letter-spacing: 1.8px; text-shadow: 0 0 10px rgba(255,227,114,.32); }
.next-sortie-drill span { color: #e9f6ff; font: 8px/1.45 monospace; }
.next-sortie-drill em { color: #82ff9a; font: normal 7px/1.35 monospace; }
.next-sortie-recovery { padding-top: 4px; color: #ffe372; border-top: 1px solid rgba(255,227,114,.18); font: 6px/1.35 monospace; letter-spacing: 1.2px; text-shadow: 0 0 10px rgba(255,227,114,.26); }
.next-sortie-recovery.hidden { display: none; }
.next-sortie-forecast { padding-top: 4px; color: #43f5ff; border-top: 1px solid rgba(67,245,255,.18); font: 6px/1.35 monospace; letter-spacing: 1.2px; text-shadow: 0 0 10px rgba(67,245,255,.26); }
.next-sortie-forecast[data-recommendation-state="continue"] { color: #82ff9a; border-top-color: rgba(130,255,154,.22); text-shadow: 0 0 10px rgba(130,255,154,.28); }
.next-sortie-forecast[data-recommendation-state="sample"] { color: #43f5ff; border-top-color: rgba(67,245,255,.22); text-shadow: 0 0 10px rgba(67,245,255,.28); }
.next-sortie-forecast[data-recommendation-state="rerun"] { color: #ffe372; border-top-color: rgba(255,227,114,.26); text-shadow: 0 0 10px rgba(255,227,114,.32); }
.next-sortie-forecast.hidden { display: none; }
.next-sortie-button {
  margin-top: 10px;
  padding: 8px 10px;
  color: #06131c;
  border: 1px solid var(--cyan);
  background: linear-gradient(90deg, var(--cyan), #d8b4ff);
  box-shadow: 0 0 18px rgba(67,245,255,.14);
  cursor: pointer;
  font: 8px/1 monospace;
  letter-spacing: 1px;
}
.next-sortie-button[data-forecast-sync-state="continue"] { border-color: #82ff9a; background: linear-gradient(90deg, #82ff9a, #43f5ff); box-shadow: 0 0 20px rgba(130,255,154,.2); }
.next-sortie-button[data-forecast-sync-state="sample"] { border-color: #43f5ff; background: linear-gradient(90deg, #43f5ff, #d8b4ff); box-shadow: 0 0 20px rgba(67,245,255,.2); }
.next-sortie-button[data-forecast-sync-state="rerun"] { border-color: #ffe372; background: linear-gradient(90deg, #ffe372, #43f5ff); box-shadow: 0 0 20px rgba(255,227,114,.24); }
.playtest-debrief { margin-top: 12px; padding: 12px; text-align: left; border: 1px solid rgba(130,255,154,.2); background: linear-gradient(135deg, rgba(130,255,154,.055), rgba(67,245,255,.035)); }
.playtest-debrief > div small, .playtest-debrief > div strong, .playtest-debrief > div span { display: block; }
.playtest-debrief > div > em { display: inline-block; margin: 0 0 7px; padding: 3px 7px; color: #06130d; border: 1px solid rgba(130,255,154,.3); border-radius: 999px; background: linear-gradient(90deg, #82ff9a, #43f5ff); box-shadow: 0 0 10px rgba(130,255,154,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.playtest-debrief > div small { color: #82ff9a; font: 7px/1 monospace; letter-spacing: 1.6px; }
.playtest-debrief > div strong { margin: 7px 0 4px; color: #eafff0; font-size: 12px; }
.playtest-debrief > div span, .playtest-debrief em { color: #78958a; font: normal 7px/1.4 monospace; }
.playtest-spectacle { display: block; margin-top: 6px; overflow: hidden; color: #d8fbff; font: 6px/1.25 monospace; letter-spacing: 1px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.playtest-debrief label { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; margin-top: 10px; color: #9eb9ad; font: 8px/1 monospace; }
.playtest-debrief output { color: #82ff9a; font-weight: 700; }
.playtest-debrief input[type="range"], .playtest-debrief select { grid-column: 1 / -1; width: 100%; }
.playtest-debrief select { padding: 7px; color: #cbe8dc; border: 1px solid rgba(130,255,154,.18); background: #091426; }
.playtest-debrief button { width: 100%; margin-top: 11px; padding: 9px; color: #06130d; border: 1px solid #82ff9a; background: #82ff9a; cursor: pointer; font: 8px/1 monospace; }
.playtest-debrief button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.playtest-debrief button:disabled { opacity: .55; cursor: default; }
.playtest-debrief em { display: block; margin-top: 8px; }
.playtest-debrief[data-mode="classic"] > div > em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.playtest-debrief[data-mode="flight"] > div > em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.playtest-debrief[data-mode="relativity"] > div > em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.playtest-debrief[data-mode="expedition"] > div > em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 10px rgba(216,180,255,.2); }
.playtest-debrief[data-mode="flight"] .playtest-spectacle { color: #cfdcff; }
.playtest-debrief[data-mode="relativity"] .playtest-spectacle { color: #ffd2ef; }
.playtest-debrief[data-mode="expedition"] .playtest-spectacle { color: #ffe4a6; }
.playtest-evidence-clip { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid rgba(67,245,255,.2); background: linear-gradient(135deg, rgba(67,245,255,.055), rgba(216,180,255,.035)); }
.playtest-evidence-clip.hidden { display: none; }
.playtest-evidence-clip small, .playtest-evidence-clip span { display: block; }
.playtest-evidence-clip > div > em { display: inline-block; margin: 0 0 7px; padding: 3px 7px; color: #06131c; border: 1px solid rgba(67,245,255,.3); border-radius: 999px; background: linear-gradient(90deg, #43f5ff, #d8b4ff); box-shadow: 0 0 10px rgba(67,245,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.playtest-evidence-clip small { color: #43f5ff; font: 7px/1 monospace; letter-spacing: 1.6px; }
.playtest-evidence-clip span { margin-top: 4px; color: #91a9cf; font: 7px/1.4 monospace; }
.playtest-evidence-clip button { margin-top: 0; color: #03121a; border-color: #43f5ff; background: #43f5ff; }
.playtest-evidence-clip pre { max-height: 140px; margin: 0; padding: 8px; overflow: auto; color: #dff8ff; border: 1px solid rgba(67,245,255,.16); background: rgba(0,0,0,.28); white-space: pre-wrap; font: 7px/1.45 monospace; }
.playtest-evidence-clip[data-mode="classic"] > div > em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.playtest-evidence-clip[data-mode="flight"] > div > em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.playtest-evidence-clip[data-mode="relativity"] > div > em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.playtest-evidence-clip[data-mode="expedition"] > div > em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 10px rgba(216,180,255,.2); }
.next-sortie-button i { margin-left: 6px; font-style: normal; }
.next-sortie-button:hover { filter: brightness(1.1); box-shadow: 0 0 24px rgba(67,245,255,.24); }
@keyframes next-sortie-sweep {
  55%, 100% { transform: translateX(54%) skewX(-15deg); }
}
.ghost-review { margin-top: 12px; padding: 12px; text-align: left; border: 1px solid rgba(197,140,255,.18); background: rgba(197,140,255,.04); }
.ghost-review em { display: inline-block; margin-bottom: 7px; padding: 3px 7px; color: #10192a; border: 1px solid rgba(216,180,255,.3); border-radius: 999px; background: linear-gradient(90deg, #d8b4ff, #43f5ff); box-shadow: 0 0 10px rgba(216,180,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.ghost-review strong { display: block; margin-bottom: 8px; color: #d8b4ff; font-size: 10px; }
.ghost-review small { display: block; margin-top: 8px; color: #7488aa; font-size: 8px; line-height: 1.6; }
.ghost-review[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.ghost-review[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.ghost-review[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.ghost-review-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ghost-review-bars span { padding: 6px 4px; text-align: center; border: 1px solid rgba(124,164,255,.12); font: 8px/1 monospace; }
.ghost-review-bars .ahead { color: #82ff9a; background: rgba(130,255,154,.045); }
.ghost-review-bars .behind { color: #ff8aa0; background: rgba(255,49,95,.045); }
.ghost-coach { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.ghost-coach li { padding: 8px; border: 1px solid rgba(67,245,255,.12); background: rgba(67,245,255,.035); }
.ghost-coach b, .ghost-coach span, .ghost-coach em { display: block; }
.ghost-coach b { color: #43f5ff; font: 8px/1.2 monospace; }
.ghost-coach span { margin-top: 5px; color: #93a8ca; font-size: 8px; line-height: 1.45; }
.ghost-coach em { margin-top: 5px; color: #d8b4ff; font-size: 8px; line-height: 1.45; font-style: normal; }
.ghost-tactical { margin-top: 9px; padding: 9px; border: 1px solid rgba(216,180,255,.14); background: rgba(216,180,255,.025); }
.ghost-tactical b, .ghost-tactical span, .ghost-tactical em { display: block; }
.ghost-tactical b { color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 1px; }
.ghost-tactical span { margin-top: 5px; color: #dce8ff; font: 8px/1.3 monospace; }
.ghost-tactical em { margin-top: 5px; color: #7488aa; font: normal 7px/1.4 monospace; }
.overlay-pilot-cue { display: grid; gap: 6px; margin: 14px 0 8px; padding: 10px 12px; text-align: left; border: 1px solid rgba(255,227,114,.18); background: linear-gradient(90deg, rgba(255,227,114,.06), rgba(67,245,255,.035)); box-shadow: inset 2px 0 rgba(255,227,114,.55); }
.overlay-pilot-cue em { justify-self: start; padding: 3px 7px; color: #10192a; border: 1px solid rgba(255,227,114,.32); border-radius: 999px; background: linear-gradient(90deg, #ffe372, #43f5ff); box-shadow: 0 0 12px rgba(255,227,114,.18); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.overlay-pilot-cue b { color: #ffe372; font: 7px/1 monospace; letter-spacing: 1.4px; }
.overlay-pilot-cue span { color: #dce8ff; font: 8px/1.45 monospace; }
.overlay-pilot-cue[data-mode="classic"] { border-color: rgba(67,245,255,.2); background: linear-gradient(90deg, rgba(67,245,255,.06), rgba(255,227,114,.035)); box-shadow: inset 2px 0 rgba(67,245,255,.55); }
.overlay-pilot-cue[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.38); box-shadow: 0 0 12px rgba(67,245,255,.2); }
.overlay-pilot-cue[data-mode="classic"] b { color: #7ceaff; }
.overlay-pilot-cue[data-mode="flight"] { border-color: rgba(124,157,255,.22); background: linear-gradient(90deg, rgba(96,145,255,.07), rgba(67,245,255,.035)); box-shadow: inset 2px 0 rgba(124,157,255,.58); }
.overlay-pilot-cue[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.42); box-shadow: 0 0 12px rgba(124,157,255,.22); }
.overlay-pilot-cue[data-mode="flight"] b { color: #a9c3ff; }
.overlay-pilot-cue[data-mode="relativity"] { border-color: rgba(255,79,189,.22); background: linear-gradient(90deg, rgba(255,79,189,.07), rgba(67,245,255,.035)); box-shadow: inset 2px 0 rgba(255,79,189,.58); }
.overlay-pilot-cue[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 12px rgba(255,79,189,.22); }
.overlay-pilot-cue[data-mode="relativity"] b { color: #ff9bd8; }
.overlay-pilot-cue[data-mode="expedition"] { border-color: rgba(216,180,255,.24); background: linear-gradient(90deg, rgba(216,180,255,.07), rgba(67,245,255,.035)); box-shadow: inset 2px 0 rgba(216,180,255,.58); }
.overlay-pilot-cue[data-mode="expedition"] em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 12px rgba(216,180,255,.22); }
.overlay-pilot-cue[data-mode="expedition"] b { color: #d8b4ff; }
.overlay-pilot-cue[data-mode="hold"] { border-color: rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(67,245,255,.025)); box-shadow: inset 2px 0 rgba(255,255,255,.34); }
.overlay-pilot-cue[data-mode="hold"] em { color: #dce8ff; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(67,245,255,.12)); border-color: rgba(255,255,255,.22); box-shadow: 0 0 10px rgba(255,255,255,.12); }
.overlay-recovery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; text-align: left; }
.overlay-recovery em { grid-column: 1 / -1; justify-self: start; padding: 3px 7px; color: #10192a; border: 1px solid rgba(67,245,255,.28); border-radius: 999px; background: linear-gradient(90deg, #43f5ff, #ffe372); box-shadow: 0 0 10px rgba(67,245,255,.16); font: normal 6px/1 monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.overlay-recovery b { display: grid; gap: 4px; min-width: 0; padding: 8px 9px; color: #66799a; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(67,245,255,.025)); font: 6px/1 monospace; letter-spacing: 1px; }
.overlay-recovery i { overflow: hidden; color: #e8fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.overlay-recovery[data-mode="classic"] em { background: linear-gradient(90deg, #43f5ff, #ffe372); border-color: rgba(67,245,255,.36); box-shadow: 0 0 10px rgba(67,245,255,.18); }
.overlay-recovery[data-mode="flight"] b { border-color: rgba(96,145,255,.17); background: rgba(96,145,255,.035); }
.overlay-recovery[data-mode="flight"] em { background: linear-gradient(90deg, #7c9dff, #43f5ff); border-color: rgba(124,157,255,.4); box-shadow: 0 0 10px rgba(124,157,255,.2); }
.overlay-recovery[data-mode="relativity"] b { border-color: rgba(255,79,189,.18); background: rgba(255,79,189,.035); }
.overlay-recovery[data-mode="relativity"] em { background: linear-gradient(90deg, #ff4fbd, #43f5ff); border-color: rgba(255,79,189,.42); box-shadow: 0 0 10px rgba(255,79,189,.2); }
.overlay-recovery[data-mode="expedition"] em { background: linear-gradient(90deg, #d8b4ff, #43f5ff); border-color: rgba(216,180,255,.44); box-shadow: 0 0 10px rgba(216,180,255,.2); }
.overlay-actions { position: sticky; z-index: 12; top: 0; order: -1; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 6px; background: rgba(4, 9, 24, .96); }
.overlay-actions button { flex: 1; padding: 12px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.holo-replay { margin: 14px 0; padding: 12px; overflow: hidden; border: 1px solid rgba(67,245,255,.2); background: radial-gradient(circle at 50% 55%, rgba(67,245,255,.07), transparent 58%), rgba(2,8,22,.58); text-align: left; }
.holo-replay > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: end; }
.holo-replay small { color: #43f5ff; font: 7px/1 monospace; letter-spacing: 2px; }
.holo-replay strong { grid-row: 2; color: #e8fbff; font-size: 11px; }
.holo-replay em { grid-column: 2; grid-row: 1 / span 2; color: #8296bd; font: normal 6px/1 monospace; }
.holo-replay-debrief { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.holo-replay-debrief b { display: grid; gap: 4px; min-width: 0; padding: 7px 8px; color: #607595; border: 1px solid rgba(124,234,255,.16); background: rgba(67,245,255,.035); font: 6px/1 monospace; letter-spacing: 1px; }
.holo-replay-debrief i { overflow: hidden; color: #e8fbff; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(67,245,255,.28); }
.holo-replay-debrief[data-mode="classic"] b { border-color: rgba(67,245,255,.18); background: rgba(67,245,255,.04); }
.holo-replay-debrief[data-mode="flight"] b { border-color: rgba(124,157,255,.2); background: rgba(124,157,255,.045); }
.holo-replay-debrief[data-mode="relativity"] b { border-color: rgba(255,79,189,.22); background: rgba(255,79,189,.045); }
.holo-replay-debrief[data-mode="expedition"] b { border-color: rgba(216,180,255,.22); background: rgba(216,180,255,.045); }
.holo-replay-debrief[data-mode="hold"] b { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.holo-replay-debrief[data-skin-fantasy="JET-FLIGHT FANTASY"] b:nth-last-child(2) { border-color: rgba(124,157,255,.32); background: rgba(124,157,255,.07); }
.holo-replay-debrief[data-skin-fantasy="RELATIVITY THEATRE"] b:nth-last-child(2) { border-color: rgba(255,79,189,.34); background: rgba(255,79,189,.07); }
.holo-replay-debrief[data-skin-fantasy="DIMENSION ODYSSEY"] b:nth-last-child(2) { border-color: rgba(216,180,255,.34); background: rgba(216,180,255,.07); }
.holo-replay-debrief[data-academy-drill]:not([data-academy-drill=""]) b:last-child { color: #ffe372; border-color: rgba(255,227,114,.34); background: linear-gradient(135deg, rgba(255,227,114,.11), rgba(67,245,255,.045)); box-shadow: inset 0 0 18px rgba(255,227,114,.035); }
.holo-replay-debrief[data-academy-drill]:not([data-academy-drill=""]) b:last-child i { color: #fff0a8; text-shadow: 0 0 12px rgba(255,227,114,.24); }
.holo-replay svg { display: block; width: 100%; height: 150px; margin: 10px 0 8px; overflow: visible; border: 1px solid rgba(124,234,255,.09); background: linear-gradient(180deg, rgba(67,245,255,.025), rgba(255,79,189,.02)); }
.replay-grid { stroke: rgba(124,234,255,.075); stroke-width: 1; }
.replay-stage { fill: rgba(8,16,34,.48); stroke: rgba(124,234,255,.1); stroke-width: 1; }
.replay-stage.flight { fill: rgba(36,55,104,.18); stroke: rgba(124,157,255,.2); }
.replay-stage.relativity { fill: rgba(75,11,62,.18); stroke: rgba(255,79,189,.2); }
.replay-stage-label { fill: #8296bd; font: 7px monospace; letter-spacing: 1px; }
.replay-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px currentColor); }
.replay-path.ghost { stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .28; }
.replay-marker { stroke: #04101c; stroke-width: 2; vector-effect: non-scaling-stroke; }
.replay-marker.start { fill: #82ff9a; filter: drop-shadow(0 0 5px #82ff9a); }
.replay-marker.end { fill: #fff; filter: drop-shadow(0 0 7px #fff); }
.holo-replay-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.holo-replay-legend span { color: #8396b8; font: 6px/1 monospace; letter-spacing: 1px; }
.holo-replay-legend span::before { display: inline-block; width: 10px; height: 2px; margin-right: 5px; content: ""; vertical-align: middle; background: var(--replay-color, #8296bd); box-shadow: 0 0 5px var(--replay-color, transparent); }
.holo-replay-legend span.ghost::before { background: repeating-linear-gradient(90deg, #8296bd 0 3px, transparent 3px 5px); box-shadow: none; }
.holo-replay-legend span.beacon { color: #82ff9a; }
.holo-replay-legend span.beacon::before { height: 5px; border-radius: 999px; background: #82ff9a; box-shadow: 0 0 8px rgba(130,255,154,.8); }
.holo-replay[data-mode="relativity"] { border-color: rgba(255,79,189,.22); background: radial-gradient(circle at 50% 55%, rgba(255,79,189,.08), transparent 58%), rgba(2,8,22,.58); }
.holo-replay[data-mode="relativity"] small { color: #ff77c9; }
.holo-replay[data-mode="expedition"] { border-color: rgba(216,180,255,.24); background: linear-gradient(110deg, rgba(67,245,255,.045), rgba(124,157,255,.045), rgba(255,79,189,.05)), rgba(2,8,22,.62); }
.holo-replay[data-mode="expedition"] small { color: #d8b4ff; }
.black-box { margin: 14px 0; padding: 12px; border: 1px solid rgba(124,234,255,.14); background: rgba(2,8,22,.48); text-align: left; }
.black-box > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: end; }
.black-box > div small { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 2px; }
.black-box > div strong { grid-row: 2; color: #fff; font-size: 11px; }
.black-box > div em { grid-column: 2; grid-row: 1 / span 2; color: #8296bd; font: normal 7px/1 monospace; }
.black-box ol { display: grid; gap: 4px; max-height: 136px; margin: 10px 0 8px; padding: 0; overflow: auto; list-style: none; }
.black-box li { display: grid; grid-template-columns: 36px 1fr auto; gap: 7px; align-items: center; padding: 5px 6px; border-left: 2px solid #82ff9a; background: rgba(130,255,154,.025); }
.black-box li.danger { border-color: #ff496d; background: rgba(255,73,109,.035); }
.black-box li.flight { border-color: #7ceaff; }
.black-box li.relativity { border-color: #ff4fbd; }
.black-box li time { color: #61769c; font: 6px/1 monospace; }
.black-box li span { min-width: 0; }
.black-box li strong, .black-box li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.black-box li strong { color: #dce8ff; font: 7px/1 monospace; }
.black-box li small { margin-top: 2px; color: #6f83a7; font: 6px/1 monospace; }
.black-box li b { color: #9db2d5; font: 7px/1 monospace; }
.black-box > p { margin: 0; color: #879bc0; font: 7px/1.4 monospace; }
.black-box .black-box-next-capture { display: grid; gap: 5px; margin-top: 9px; padding: 8px; border: 1px solid rgba(255,79,189,.22); background: linear-gradient(135deg, rgba(255,79,189,.08), rgba(124,234,255,.04)); }
.black-box .black-box-next-capture.hidden { display: none; }
.black-box .black-box-next-capture b { color: #ff8fd6; font: 7px/1 monospace; letter-spacing: 1.5px; }
.black-box .black-box-next-capture span { color: #f4e9ff; font: 7px/1.35 monospace; }
.black-box .black-box-next-capture small { color: #9db2d5; font: 6px/1.45 monospace; }
.black-box .black-box-next-capture button { justify-self: start; padding: 6px 8px; color: #ffe9fb; border: 1px solid rgba(255,79,189,.32); background: rgba(255,79,189,.08); cursor: pointer; font-size: 7px; }
.black-box .black-box-next-capture button + button { margin-top: -3px; color: #dffcff; border-color: rgba(124,234,255,.3); background: rgba(124,234,255,.06); }
.black-box .black-box-evidence-clip { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(124,234,255,.14); }
.black-box .black-box-evidence-clip.hidden { display: none; }
.black-box .black-box-evidence-clip b { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1.6px; }
.black-box .black-box-evidence-clip pre { grid-column: 1 / -1; max-height: 150px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #b8c7e2; border: 1px solid rgba(124,234,255,.18); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.black-box .black-box-evidence-clip button { padding: 8px 10px; color: #ddf8ff; border: 1px solid rgba(124,234,255,.32); background: rgba(67,245,255,.07); cursor: pointer; font-size: 8px; }
.release-evidence-drill-links { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.release-evidence-drill-links li { display: grid; grid-template-columns: minmax(92px, auto) 1fr; gap: 5px 10px; padding: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.release-evidence-drill-links li.drill-boundary { border-color: rgba(255,206,108,.22); background: rgba(255,206,108,.045); }
.release-evidence-drill-links b { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1px; text-transform: uppercase; }
.release-evidence-drill-links a { color: #fff; text-decoration: none; font: 9px/1.2 var(--font-display); }
.release-evidence-drill-links a:focus-visible { outline: 2px solid rgba(124,234,255,.6); outline-offset: 2px; }
.release-evidence-drill-links em { grid-column: 2; color: #8398c0; font: normal 7px/1.45 monospace; }
.human-playtest-drill-review-status { margin: 8px 0 0; padding: 8px 9px; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: rgba(67,245,255,.04); font: 7px/1.45 monospace; letter-spacing: .4px; }
.human-playtest-drill-review-status[data-signal="recorded"] { color: #caffd7; border-color: rgba(130,255,154,.28); background: rgba(130,255,154,.055); }
.human-playtest-drill-review-status[data-signal="missing"] { color: #ffe6ac; border-color: rgba(255,206,108,.32); background: rgba(255,206,108,.07); }
.primary-button { border: 1px solid var(--cyan); color: #031016; background: var(--cyan); box-shadow: 0 0 20px rgba(67,245,255,.2); }
.secondary-button { border: 1px solid var(--line); background: transparent; }

dialog { width: min(570px, calc(100% - 32px)); padding: 38px; color: white; border: 1px solid rgba(67,245,255,.28); background: #091126; box-shadow: 0 30px 100px #000; }
dialog::backdrop { background: rgba(2,5,15,.78); backdrop-filter: blur(7px); }
.dialog-close { position: absolute; right: 16px; top: 12px; color: #8091b2; border: 0; background: none; cursor: pointer; font-size: 24px; }
dialog h2 { margin: 15px 0 28px; font-size: 30px; }
dialog h2[data-dialog-title]:focus-visible { outline: 1px solid rgba(67,245,255,.72); outline-offset: 6px; text-shadow: 0 0 18px rgba(67,245,255,.28); }
.career-dialog { width: min(760px, calc(100% - 32px)); }
.callsign-field { position: absolute; right: 42px; top: 70px; color: #607492; font: 8px/1 monospace; letter-spacing: 1px; }
.callsign-field input { width: 108px; margin-left: 8px; padding: 7px 8px; color: var(--cyan); border: 1px solid var(--line); background: rgba(0,0,0,.2); font: 10px/1 monospace; text-transform: uppercase; }
.career-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.career-stats div { padding: 14px 8px; text-align: center; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.career-stats small { display: block; margin-bottom: 8px; color: #647898; font-size: 8px; }
.career-stats strong { color: var(--cyan); font: 20px/1 monospace; }
.mastery-section { margin: 0 0 24px; }
.mastery-target-hint { margin: -12px 0 8px; padding: 10px 12px; color: #b9c8e6; border: 1px solid rgba(216,180,255,.18); background: linear-gradient(135deg, rgba(216,180,255,.06), rgba(67,245,255,.03)); font-size: 9px; line-height: 1.55; }
.mastery-target-hint.complete { color: #ffe9a8; border-color: rgba(255,227,114,.28); background: rgba(255,227,114,.055); }
.mastery-target-button { width: 100%; margin: 0 0 12px; padding: 10px 12px; color: #f1e8ff; border: 1px solid rgba(216,180,255,.28); background: linear-gradient(90deg, rgba(216,180,255,.11), rgba(67,245,255,.055)); cursor: pointer; font-size: 8px; letter-spacing: 1px; }
.mastery-target-button:hover:not(:disabled) { border-color: #d8b4ff; box-shadow: 0 0 22px rgba(216,180,255,.12); }
.mastery-target-button:disabled { opacity: .55; cursor: default; }
.mastery-target-button i { margin-left: 8px; color: #d8b4ff; font-style: normal; }
.mastery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mastery-card { position: relative; min-height: 112px; padding: 12px; overflow: hidden; border: 1px solid rgba(82,143,255,.2); background: linear-gradient(145deg, rgba(11,22,52,.8), rgba(8,8,25,.75)); }
.mastery-card.relativity { border-color: rgba(255,79,189,.2); background: linear-gradient(145deg, rgba(38,9,43,.7), rgba(8,8,25,.75)); }
.mastery-card > i { float: right; color: #6fa6ff; font: normal 18px/1 monospace; text-shadow: 0 0 16px currentColor; }
.mastery-card.relativity > i { color: #ff7bce; }
.mastery-card strong, .mastery-card small, .mastery-card em { display: block; }
.mastery-card strong { color: #fff; font-size: 10px; }
.mastery-card small { margin: 6px 0 10px; color: #7f93b8; font-size: 7px; }
.mastery-card span { display: block; height: 3px; overflow: hidden; background: rgba(255,255,255,.07); }
.mastery-card span b { display: block; height: 100%; background: linear-gradient(90deg, #528fff, #d8b4ff); box-shadow: 0 0 10px currentColor; }
.mastery-card em { margin-top: 8px; color: #d8b4ff; font: normal 7px/1.35 monospace; }
.mastery-card.complete { border-color: rgba(255,227,114,.38); box-shadow: inset 0 0 24px rgba(255,227,114,.045); }
.mastery-card.complete > i, .mastery-card.complete em { color: #ffe372; }
.mastery-train-button { width: 100%; margin-top: 9px; padding: 7px 8px; color: #a9cfff; border: 1px solid rgba(82,143,255,.28); background: rgba(82,143,255,.08); cursor: pointer; font: 7px/1 monospace; letter-spacing: .7px; }
.mastery-card.relativity .mastery-train-button { color: #ffc0e8; border-color: rgba(255,79,189,.28); background: rgba(255,79,189,.07); }
.mastery-train-button:hover, .mastery-train-button:focus-visible { border-color: currentColor; outline: 1px solid currentColor; outline-offset: 2px; box-shadow: 0 0 14px rgba(96,145,255,.12); }
.career-completion { margin: -8px 0 24px; padding: 13px 14px; border: 1px solid rgba(67,245,255,.2); background: linear-gradient(135deg, rgba(67,245,255,.06), rgba(216,180,255,.035)); }
.career-completion div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.career-completion span { color: #91a8ca; font-size: 9px; letter-spacing: 2px; }
.career-completion strong { color: #43f5ff; font: 14px/1 monospace; }
.career-completion i { display: block; height: 7px; overflow: hidden; border: 1px solid rgba(67,245,255,.16); background: rgba(255,255,255,.035); font-style: normal; }
.career-completion i b { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #43f5ff, #d8b4ff, #ffe372); box-shadow: 0 0 18px rgba(67,245,255,.16); transition: width .25s ease; }
.career-completion small { display: block; margin-top: 9px; color: #6f82a4; font-size: 8px; line-height: 1.55; }
.career-completion.complete { border-color: rgba(255,227,114,.3); background: linear-gradient(135deg, rgba(255,227,114,.105), rgba(67,245,255,.045)); box-shadow: inset 0 0 24px rgba(255,227,114,.04); }
.career-completion.complete strong, .career-completion.complete span { color: #ffe372; }
.career-focus-button { width: 100%; margin-top: 10px; padding: 9px 11px; color: #e8fbff; border: 1px solid rgba(67,245,255,.24); background: linear-gradient(90deg, rgba(67,245,255,.1), rgba(255,227,114,.045)); cursor: pointer; font-size: 8px; letter-spacing: 1px; }
.career-focus-button:hover:not(:disabled) { border-color: rgba(67,245,255,.52); box-shadow: 0 0 20px rgba(67,245,255,.1); }
.career-focus-button:disabled { color: #6d7f9f; cursor: not-allowed; opacity: .55; }
.career-focus-button i { margin-left: 8px; color: var(--cyan); font-style: normal; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.hangar-section { margin-bottom: 24px; }
.hangar-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.hangar-title span { font-size: 12px; letter-spacing: 2px; }
.hangar-title small { color: #607492; font-size: 8px; }
.skin-target-hint { margin: -4px 0 12px; padding: 9px 11px; color: #9fb3d7; border: 1px solid rgba(67,245,255,.14); background: linear-gradient(135deg, rgba(67,245,255,.04), rgba(216,180,255,.025)); font-size: 8px; line-height: 1.6; }
.skin-target-hint.complete { color: #ffe9a8; border-color: rgba(255,227,114,.34); background: linear-gradient(135deg, rgba(255,227,114,.12), rgba(67,245,255,.08)); box-shadow: 0 0 22px rgba(255,227,114,.08), inset 0 0 18px rgba(67,245,255,.04); }
.skin-target-button { width: 100%; margin: -4px 0 12px; padding: 10px 12px; color: #d8f7ff; border: 1px solid rgba(67,245,255,.24); background: linear-gradient(90deg, rgba(67,245,255,.075), rgba(216,180,255,.045)); cursor: pointer; font-size: 8px; letter-spacing: 1px; }
.skin-target-button:hover:not(:disabled) { border-color: rgba(67,245,255,.48); box-shadow: 0 0 20px rgba(67,245,255,.08); }
.skin-target-button:disabled { color: #657895; cursor: not-allowed; opacity: .55; }
.skin-target-button i { margin-left: 8px; color: var(--cyan); font-style: normal; }
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin-card {
  position: relative;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  color: #8799b9;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  cursor: pointer;
  text-align: left;
}
.skin-card:disabled { cursor: not-allowed; opacity: .34; }
.skin-card:not(:disabled):hover, .skin-card.equipped { color: white; border-color: var(--skin-primary); box-shadow: inset 0 0 22px color-mix(in srgb, var(--skin-primary), transparent 94%); }
.skin-card.equipped::after { position: absolute; right: 7px; top: 6px; content: "EQUIPPED"; color: var(--skin-primary); font: 6px/1 monospace; letter-spacing: 1px; }
.skin-card.new::before { position: absolute; right: 7px; bottom: 6px; content: "NEW"; color: #ffe372; border: 1px solid rgba(255,227,114,.25); padding: 3px 4px; background: rgba(255,227,114,.055); font: 6px/1 monospace; letter-spacing: 1px; box-shadow: 0 0 12px rgba(255,227,114,.08); }
.skin-card[data-fantasy="JET-FLIGHT FANTASY"] { background: linear-gradient(135deg, rgba(124,157,255,.065), rgba(255,255,255,.015)); }
.skin-card[data-fantasy="RELATIVITY THEATRE"] { background: linear-gradient(135deg, rgba(255,79,189,.065), rgba(255,255,255,.015)); }
.skin-card[data-fantasy="DIMENSION ODYSSEY"] { background: linear-gradient(135deg, rgba(216,180,255,.055), rgba(67,245,255,.025)); }
.skin-swatch { position: relative; width: 38px; height: 38px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--skin-primary), transparent 48%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--skin-primary) 20%, var(--skin-secondary) 72%, #061026 74%); box-shadow: 0 0 14px color-mix(in srgb, var(--skin-primary), transparent 55%); }
.skin-swatch::before, .skin-swatch::after, .skin-swatch b, .skin-swatch em { position: absolute; left: 50%; top: 50%; display: block; box-sizing: border-box; content: ""; border-color: var(--skin-primary); pointer-events: none; }
.skin-swatch::before { width: 25px; height: 25px; border: 1px solid var(--skin-primary); border-radius: 50%; transform: translate(-50%, -50%); animation: skin-orbit 3.2s linear infinite; }
.skin-swatch::after { width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px var(--skin-primary); transform: translate(8px, -2px); animation: skin-pulse 1.4s ease-in-out infinite; }
.skin-swatch b { width: 14px; height: 1px; background: var(--skin-secondary); transform: translate(-50%, -50%); }
.skin-swatch em { width: 1px; height: 14px; background: var(--skin-secondary); transform: translate(-50%, -50%); }
.skin-card[data-signature="flare"] .skin-swatch::before { border-style: dashed; transform: translate(-50%, -50%) rotate(45deg); }
.skin-card[data-signature="phase"] .skin-swatch::before { width: 29px; height: 12px; border-style: dashed; animation-direction: reverse; }
.skin-card[data-signature="blade"] .skin-swatch::before { width: 21px; height: 21px; border-width: 0 2px 2px 0; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.skin-card[data-signature="rift"] .skin-swatch::before { width: 30px; height: 11px; border-color: var(--skin-secondary); box-shadow: 0 0 6px var(--skin-primary); }
.skin-card[data-signature="aegis"] .skin-swatch::before { width: 22px; height: 25px; border-radius: 45% 45% 60% 60%; transform: translate(-50%, -50%) rotate(0); animation: skin-pulse 2s ease-in-out infinite; }
.skin-card[data-signature="constellation"] .skin-swatch::before { border-style: dotted; box-shadow: inset 0 0 7px var(--skin-secondary); }
.skin-card[data-signature="atlas"] .skin-swatch::before { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.skin-card[data-signature="atlas"] .skin-swatch b, .skin-card[data-signature="atlas"] .skin-swatch em { box-shadow: 0 0 5px var(--skin-primary); }
.skin-card[data-signature="nemesis"] .skin-swatch::before { width: 0; height: 0; border-width: 0 13px 23px; border-style: solid; border-color: transparent transparent color-mix(in srgb, var(--skin-primary), transparent 35%); border-radius: 0; transform: translate(-50%, -54%); }
.skin-card[data-signature="apex"] .skin-swatch::before { width: 24px; height: 24px; border-radius: 0; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--skin-secondary), transparent 52%); }
.skin-card[data-signature="formation"] .skin-swatch::before { width: 26px; height: 18px; border-width: 0 2px 2px 2px; border-radius: 0; clip-path: polygon(0 0, 50% 100%, 100% 0, 82% 0, 50% 63%, 18% 0); background: color-mix(in srgb, var(--skin-primary), transparent 70%); transform: translate(-50%, -50%); animation: skin-wing 1.8s ease-in-out infinite; }
.skin-card[data-signature="formation"] .skin-swatch b { width: 28px; box-shadow: 0 5px 0 var(--skin-secondary); transform: translate(-50%, 8px); }
.skin-card[data-signature="formation"] .skin-swatch em { display: none; }
.skin-card[data-signature="rendezvous"] .skin-swatch::before { width: 28px; height: 12px; border-color: var(--skin-primary); transform: translate(-50%, -50%) rotate(32deg); }
.skin-card[data-signature="rendezvous"] .skin-swatch b { width: 28px; height: 12px; border: 1px solid var(--skin-secondary); border-radius: 50%; background: none; transform: translate(-50%, -50%) rotate(-32deg); animation: skin-orbit 2.6s linear infinite reverse; }
.skin-card[data-signature="rendezvous"] .skin-swatch em { width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: -10px 0 5px var(--skin-primary), 10px 0 5px var(--skin-secondary); }
@keyframes skin-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes skin-pulse { 50% { opacity: .42; filter: brightness(1.5); } }
@keyframes skin-wing { 50% { transform: translate(-50%, -44%) scaleX(1.08); } }
.skin-card strong, .skin-card small, .skin-card span > em { display: block; }
.skin-card strong { margin-bottom: 4px; font-size: 10px; }
.skin-card small { color: #617491; font-size: 7px; }
.skin-card span > em { margin-top: 5px; color: #8fa8d7; font: normal 6px/1.35 monospace; letter-spacing: .7px; text-transform: uppercase; }
.skin-card[data-fantasy="JET-FLIGHT FANTASY"] span > em { color: #b8d5ff; text-shadow: 0 0 8px rgba(124,157,255,.24); }
.skin-card[data-fantasy="RELATIVITY THEATRE"] span > em { color: #ffd6f4; text-shadow: 0 0 8px rgba(255,79,189,.24); }
.compendium-section { margin-bottom: 24px; }
.compendium-target-hint { margin: -12px 0 8px; padding: 10px 12px; color: #9fb3d7; border: 1px solid rgba(67,245,255,.16); background: linear-gradient(135deg, rgba(67,245,255,.055), rgba(255,227,114,.025)); font-size: 9px; line-height: 1.6; }
.compendium-target-hint.complete { color: #b9ffd0; border-color: rgba(130,255,154,.28); background: linear-gradient(135deg, rgba(130,255,154,.08), rgba(67,245,255,.045)); box-shadow: inset 0 0 22px rgba(130,255,154,.04); }
.compendium-target-button { width: 100%; margin: 0 0 12px; padding: 10px 12px; color: #d8f7ff; border: 1px solid rgba(67,245,255,.26); background: linear-gradient(90deg, rgba(67,245,255,.105), rgba(255,227,114,.045)); cursor: pointer; font-size: 8px; letter-spacing: 1px; }
.compendium-target-button:hover:not(:disabled) { border-color: rgba(67,245,255,.52); box-shadow: 0 0 22px rgba(67,245,255,.1); }
.compendium-target-button:disabled { color: #6d7f9f; cursor: not-allowed; opacity: .55; }
.compendium-target-button i { margin-left: 8px; color: var(--cyan); font-style: normal; }
.compendium-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.compendium-item { min-height: 86px; padding: 10px; border: 1px solid var(--line); opacity: .3; }
.compendium-item.discovered { opacity: 1; }
.compendium-item.mode-exclusive { border-color: rgba(67,245,255,.24); }
.compendium-item i { display: block; margin-bottom: 8px; color: #667896; font-style: normal; font-size: 18px; }
.compendium-item.discovered i { color: var(--cyan); }
.compendium-item strong, .compendium-item small { display: block; }
.compendium-item strong { margin-bottom: 5px; font-size: 9px; }
.compendium-item small { color: #607492; font-size: 7px; line-height: 1.45; }
.threat-item[data-mode="flight"].discovered { border-color: rgba(89,136,255,.34); box-shadow: inset 0 0 22px rgba(89,136,255,.045); }
.threat-item[data-mode="relativity"].discovered { border-color: rgba(255,60,180,.34); box-shadow: inset 0 0 22px rgba(255,60,180,.045); }
.threat-item[data-archetype="overload"].discovered,
.threat-item[data-archetype="razor"].discovered,
.threat-item[data-archetype="horizon"].discovered { border-color: rgba(255,227,114,.48); }
.threat-item { --analysis-color: #607492; position: relative; overflow: hidden; }
.threat-item[data-analysis="1"] { --analysis-color: #43f5ff; }
.threat-item[data-analysis="2"] { --analysis-color: #d8b4ff; box-shadow: inset 0 0 26px rgba(216,180,255,.07); }
.threat-item[data-analysis="3"] { --analysis-color: #ffe372; box-shadow: inset 0 0 30px rgba(255,227,114,.11), 0 0 16px rgba(255,227,114,.07); }
.threat-item::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--analysis-color); box-shadow: 0 0 10px var(--analysis-color); content: ""; opacity: .18; transform: scaleX(0); transform-origin: left; transition: transform .25s ease, opacity .25s ease; }
.threat-item[data-analysis="1"]::after { opacity: .55; transform: scaleX(.34); }
.threat-item[data-analysis="2"]::after { opacity: .72; transform: scaleX(.67); }
.threat-item[data-analysis="3"]::after { opacity: 1; transform: scaleX(1); }
.ending-section { margin-bottom: 24px; }
.ending-target-hint { margin: -12px 0 8px; padding: 10px 12px; color: #aabbe0; border: 1px solid rgba(255,227,114,.16); background: linear-gradient(135deg, rgba(255,227,114,.055), rgba(216,180,255,.025)); font-size: 9px; line-height: 1.6; }
.ending-target-hint.complete { color: #ffeeb0; border-color: rgba(255,227,114,.3); background: linear-gradient(135deg, rgba(255,227,114,.11), rgba(67,245,255,.045)); box-shadow: inset 0 0 24px rgba(255,227,114,.045); }
.ending-target-button { width: 100%; margin: 0 0 12px; padding: 10px 12px; color: #fff3c5; border: 1px solid rgba(255,227,114,.28); background: linear-gradient(90deg, rgba(255,227,114,.1), rgba(216,180,255,.05)); cursor: pointer; font-size: 8px; letter-spacing: 1px; }
.ending-target-button:hover:not(:disabled) { border-color: rgba(255,227,114,.55); box-shadow: 0 0 22px rgba(255,227,114,.1); }
.ending-target-button:disabled { color: #6d7f9f; cursor: not-allowed; opacity: .55; }
.ending-target-button i { margin-left: 8px; color: #ffe372; font-style: normal; }
.ending-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ending-card { padding: 14px 8px; text-align: center; border: 1px solid var(--line); opacity: .28; }
.ending-card.unlocked { opacity: 1; border-color: rgba(255,227,114,.24); }
.ending-card b { display: block; margin-bottom: 7px; color: #687a99; font: 24px/1 monospace; }
.ending-card.unlocked b { color: #ffe372; text-shadow: 0 0 14px rgba(255,227,114,.2); }
.ending-card strong, .ending-card small { display: block; }
.ending-card strong { margin-bottom: 5px; font-size: 9px; }
.ending-card small { color: #607492; font-size: 7px; }
.style-section { margin-bottom: 24px; }
.style-target-hint { margin: -12px 0 8px; padding: 10px 12px; color: #9fb3d7; border: 1px solid rgba(216,180,255,.16); background: linear-gradient(135deg, rgba(216,180,255,.055), rgba(67,245,255,.025)); font-size: 9px; line-height: 1.6; }
.style-target-hint.complete { color: #ffeeb0; border-color: rgba(255,227,114,.28); background: linear-gradient(135deg, rgba(255,227,114,.075), rgba(216,180,255,.045)); box-shadow: inset 0 0 24px rgba(255,227,114,.04); }
.style-target-button { width: 100%; margin: 0 0 12px; padding: 11px 14px; color: #f0e8ff; border: 1px solid rgba(216,180,255,.3); background: linear-gradient(90deg, rgba(216,180,255,.12), rgba(67,245,255,.055)); cursor: pointer; font-size: 9px; letter-spacing: 1px; }
.style-target-button:hover:not(:disabled) { border-color: rgba(216,180,255,.55); box-shadow: 0 0 24px rgba(216,180,255,.1); }
.style-target-button:disabled { color: #6d7f9f; cursor: not-allowed; opacity: .55; }
.style-target-button i { margin-left: 8px; color: #d8b4ff; font-style: normal; }
.style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.style-item { min-height: 76px; padding: 12px 8px; border: 1px solid var(--line); background: rgba(255,255,255,.015); opacity: .28; }
.style-item.unlocked { opacity: 1; border-color: rgba(216,180,255,.25); background: linear-gradient(135deg, rgba(216,180,255,.055), rgba(67,245,255,.025)); }
.style-item b { display: inline-block; margin-bottom: 10px; padding: 4px 6px; color: #65799c; border: 1px solid rgba(124,164,255,.12); font: 7px/1 monospace; letter-spacing: 1px; }
.style-item.unlocked b { color: #d8b4ff; border-color: rgba(216,180,255,.22); box-shadow: 0 0 14px rgba(216,180,255,.08); }
.style-item strong, .style-item small { display: block; }
.style-item strong { margin-bottom: 6px; font-size: 9px; }
.style-item small { color: #607492; font-size: 7px; line-height: 1.45; }
.achievement-radar { margin-bottom: 18px; }
.achievement-target-hint { margin: -12px 0 8px; padding: 10px 12px; color: #aabbe0; border: 1px solid rgba(255,227,114,.16); background: linear-gradient(135deg, rgba(255,227,114,.055), rgba(67,245,255,.025)); font-size: 9px; line-height: 1.6; }
.achievement-target-hint.complete { color: #ffeeb0; border-color: rgba(255,227,114,.32); background: linear-gradient(135deg, rgba(255,227,114,.12), rgba(216,180,255,.045)); box-shadow: inset 0 0 24px rgba(255,227,114,.05); }
.achievement-target-meter { height: 6px; margin-bottom: 10px; overflow: hidden; border: 1px solid rgba(255,227,114,.14); background: rgba(255,255,255,.035); }
.achievement-target-meter i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #ffe372, #43f5ff); box-shadow: 0 0 16px rgba(255,227,114,.16); transition: width .25s ease; }
.achievement-target-button { width: 100%; margin: 0 0 12px; padding: 11px 14px; color: #fff3c5; border: 1px solid rgba(255,227,114,.26); background: linear-gradient(90deg, rgba(255,227,114,.105), rgba(67,245,255,.045)); cursor: pointer; font-size: 9px; letter-spacing: 1px; }
.achievement-target-button:hover:not(:disabled) { border-color: rgba(255,227,114,.52); box-shadow: 0 0 24px rgba(255,227,114,.1); }
.achievement-target-button:disabled { color: #6d7f9f; cursor: not-allowed; opacity: .55; }
.achievement-target-button i { margin-left: 8px; color: #ffe372; font-style: normal; }
.achievement-item { padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); opacity: .38; }
.achievement-item.unlocked { opacity: 1; border-color: rgba(255,220,103,.25); }
.achievement-item > i { display: grid; place-items: center; width: 36px; height: 36px; color: #5f6f8e; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.achievement-item.unlocked > i { color: #ffe372; box-shadow: 0 0 15px rgba(255,227,114,.1); }
.achievement-item strong, .achievement-item small { display: block; }
.achievement-item strong { margin-bottom: 5px; font-size: 11px; }
.achievement-item small { color: #6e82a5; font-size: 8px; }
.leaderboard-dialog { width: min(650px, calc(100% - 32px)); }
.leaderboard-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.leaderboard-tabs button { padding: 9px; color: #7084a7; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 9px; }
.leaderboard-tabs button.active { color: var(--cyan); border-color: rgba(67,245,255,.45); background: rgba(67,245,255,.05); }
.leaderboard-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 14px; color: #7084a7; font-size: 9px; }
.leaderboard-filter select { min-width: 160px; padding: 8px 10px; color: #c8d7f2; border: 1px solid var(--line); background: #080f22; }
.leaderboard-list { min-height: 300px; }
.rival-matrix { margin: 14px 0 8px; padding: 12px; overflow-x: auto; border: 1px solid rgba(124,234,255,.16); background: linear-gradient(135deg, rgba(8,26,52,.72), rgba(28,7,40,.48)); }
.rival-matrix-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1.5px; }
.rival-matrix-title em { color: #d8b4ff; font-style: normal; letter-spacing: .5px; text-align: right; }
.rival-matrix-head, .rival-matrix-row { display: grid; grid-template-columns: minmax(90px, 1.35fr) repeat(var(--matrix-metrics), minmax(52px, 1fr)); min-width: 430px; align-items: center; }
.rival-matrix-head { padding: 0 6px 5px; color: #607899; font: 6px/1 monospace; text-align: center; }
.rival-matrix-head i { font-style: normal; text-align: left; }
.rival-matrix-row { padding: 6px; border-top: 1px solid rgba(124,164,255,.08); font: 8px/1 monospace; text-align: center; }
.rival-matrix-row strong { overflow: hidden; color: #b9c8df; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.rival-matrix-row span { color: #7085a5; }
.rival-matrix-row span.leader { color: #ffe372; text-shadow: 0 0 9px rgba(255,227,114,.38); }
.leaderboard-row { display: grid; grid-template-columns: 42px 1fr 100px 110px 120px; gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(124,164,255,.1); }
.leaderboard-row { width: 100%; color: inherit; border-top: 0; border-right: 0; border-left: 0; background: transparent; cursor: pointer; text-align: left; }
.leaderboard-row:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; box-shadow: inset 0 0 18px rgba(67,245,255,.06); }
.leaderboard-row:first-child { border: 1px solid rgba(255,227,114,.23); background: rgba(255,227,114,.035); }
.leaderboard-row.expanded { border-color: rgba(67,245,255,.28); background: rgba(67,245,255,.035); }
.leaderboard-row > b { color: #65799c; font: 12px/1 monospace; }
.leaderboard-row:first-child > b { color: #ffe372; }
.leaderboard-row strong { font-size: 11px; letter-spacing: 1px; }
.leaderboard-row em { color: var(--cyan); font: normal 14px/1 monospace; text-align: right; }
.leaderboard-row small { color: #667999; font-size: 8px; text-align: right; }
.leaderboard-row small mark { display: block; margin-bottom: 4px; color: #d8b4ff; background: none; font: 7px/1 monospace; letter-spacing: 1px; }
.leaderboard-row .leaderboard-beacon { color: #82ff9a; text-shadow: 0 0 8px rgba(130,255,154,.28); }
.leaderboard-rating { justify-self: end; padding: 5px 7px; color: #d8b4ff; border: 1px solid rgba(216,180,255,.16); background: rgba(216,180,255,.04); font: 7px/1 monospace; }
.leaderboard-rating[data-tier="1"] { color: #82ff9a; border-color: rgba(130,255,154,.16); }
.leaderboard-rating[data-tier="2"] { color: #43f5ff; border-color: rgba(67,245,255,.18); }
.leaderboard-rating[data-tier="3"] { color: #ffe372; border-color: rgba(255,227,114,.2); }
.leaderboard-rating[data-tier="4"] { color: #ff6d89; border-color: rgba(255,109,137,.2); }
.leaderboard-empty { padding: 80px 10px; color: #526683; text-align: center; font: 9px/1.8 monospace; letter-spacing: 1px; }
.trace-analysis { margin: -1px 0 8px 42px; padding: 13px 14px; border: 1px solid rgba(67,245,255,.16); background: linear-gradient(135deg, rgba(67,245,255,.045), rgba(255,79,189,.025)); }
.trace-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.trace-bars span { position: relative; height: 22px; overflow: hidden; border: 1px solid rgba(124,164,255,.12); background: rgba(2,8,24,.62); }
.trace-bars i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, rgba(67,245,255,.45), rgba(255,79,189,.38)); box-shadow: 0 0 18px rgba(67,245,255,.2); }
.trace-bars b { position: relative; z-index: 1; display: grid; height: 100%; place-items: center; color: #e1f7ff; font: 8px/1 monospace; }
.trace-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.trace-summary span { padding: 5px 7px; color: #83dfff; border: 1px solid rgba(67,245,255,.14); background: rgba(67,245,255,.035); font: 8px/1 monospace; }
.trace-summary .trace-style { color: #d8b4ff; border-color: rgba(216,180,255,.18); background: rgba(216,180,255,.045); }
.trace-compare { margin: 0 0 10px; padding: 10px; border: 1px solid rgba(216,180,255,.14); background: rgba(216,180,255,.035); }
.trace-compare b, .trace-compare span, .trace-compare em { display: block; }
.trace-compare b { color: #d8b4ff; font: 8px/1.2 monospace; }
.trace-compare span { margin-top: 5px; color: #93a8ca; font-size: 8px; }
.trace-compare em { margin-top: 5px; color: #82ff9a; font-size: 8px; line-height: 1.45; font-style: normal; }
.trace-beacon { margin: 10px 0 0; padding: 9px 10px; border: 1px solid rgba(130,255,154,.16); background: rgba(130,255,154,.035); }
.trace-beacon b, .trace-beacon span { display: block; }
.trace-beacon b { color: #82ff9a; font: 7px/1 monospace; letter-spacing: 1px; }
.trace-beacon span { margin-top: 5px; color: #c9fbd4; font: 8px/1.45 monospace; }
.trace-analysis p { margin: 0; color: #7488aa; font-size: 9px; line-height: 1.75; }
.trace-analysis p b { display: inline-block; min-width: 58px; color: #c8d7f2; font-weight: 600; }
.tactical-signature { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(216,180,255,.14); background: rgba(216,180,255,.025); }
.tactical-signature b { color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 1px; }
.tactical-signature span { color: #dce8ff; font: 8px/1 monospace; text-align: right; }
.tactical-signature em { grid-column: 1 / -1; color: #7488aa; font: normal 7px/1.4 monospace; }
.rival-challenge-button { width: 100%; margin-top: 10px; padding: 9px 12px; color: #070d1d; border: 1px solid #d8b4ff; background: linear-gradient(90deg, #d8b4ff, #7ceaff); font: 8px/1 monospace; letter-spacing: 1px; cursor: pointer; }
.rival-challenge-button:hover { box-shadow: 0 0 18px rgba(216,180,255,.2); }
.share-dialog { width: min(650px, calc(100% - 32px)); }
.share-block { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.share-block label { color: #7084a7; font-size: 9px; }
.share-block select { display: block; width: 100%; margin-top: 7px; padding: 10px; color: #c8d7f2; border: 1px solid var(--line); background: #080f22; }
.share-block button, .share-dialog > button:not(.dialog-close) { padding: 11px 16px; border: 1px solid rgba(67,245,255,.38); background: rgba(67,245,255,.06); cursor: pointer; }
.run-code-source { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(216,180,255,.18); background: linear-gradient(90deg, rgba(216,180,255,.055), rgba(67,245,255,.035)); }
.run-code-source small { display: block; color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 2px; }
.run-code-source strong { display: block; margin: 6px 0 4px; color: #fff; font: 11px/1 monospace; letter-spacing: 1px; }
.run-code-source span { display: block; color: #8194b6; font-size: 9px; line-height: 1.45; }
.share-output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-output-actions button { width: 100%; padding: 11px 16px; border: 1px solid rgba(67,245,255,.38); background: rgba(67,245,255,.06); cursor: pointer; }
#nativeShareButton { color: #07131b; background: linear-gradient(90deg, var(--cyan), #d8b4ff); }
.share-dialog textarea { width: 100%; min-height: 88px; margin: 12px 0 8px; padding: 12px; resize: vertical; color: #b8c7e2; border: 1px solid var(--line); background: rgba(0,0,0,.22); font: 8px/1.5 monospace; }
/* Code remains selectable and unmodified; readable size applies to hints too. */
html #shareDialog textarea, html #dataDialog .vault-grid textarea { font: 16px/1.5 ui-monospace, "Microsoft YaHei", monospace; box-sizing: border-box; }
html[data-font-size="large"] #shareDialog textarea, html[data-font-size="large"] #dataDialog .vault-grid textarea { font-size: 18px; }
html[data-font-size="xlarge"] #shareDialog textarea, html[data-font-size="xlarge"] #dataDialog .vault-grid textarea { font-size: 20px; }
.share-divider { margin: 24px 0 8px; display: flex; align-items: center; gap: 12px; color: #526683; font: 8px/1 monospace; }
.share-divider::before, .share-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.run-code-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; padding: 10px; border: 1px solid rgba(67,245,255,.14); background: rgba(67,245,255,.035); }
.run-code-preview span { display: grid; gap: 4px; color: #6f83a5; font-size: 8px; }
.run-code-preview b { color: #d8f7ff; font: 10px/1.2 monospace; }
.run-code-preview em { grid-column: 1 / -1; color: #d8b4ff; font-style: normal; font-size: 9px; line-height: 1.5; }
.run-code-status { min-height: 18px; color: #667a9c; font-size: 9px; }
.run-code-status.error { color: #ff6d89; }
.run-code-status.success { color: #82ff9a; }
.settings-dialog { width: min(590px, calc(100% - 32px)); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-grid label { padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.settings-grid label > span { display: flex; justify-content: space-between; margin-bottom: 12px; color: #8193b2; font-size: 9px; }
.settings-grid label > span b { color: var(--cyan); font: 9px/1 monospace; }
.settings-grid input[type="range"] { width: 100%; accent-color: var(--cyan); }
.settings-grid .toggle-setting { display: flex; align-items: center; justify-content: space-between; }
.settings-grid .toggle-setting > span { margin: 0; }
.settings-grid input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); }
.settings-grid .quality-setting { grid-column: 1 / -1; }
.quality-setting select { width: 100%; padding: 10px 12px; color: #dce9ff; border: 1px solid rgba(67,245,255,.22); background: #080f22; font: 9px/1 monospace; }
.settings-preset { margin: 14px 0; padding: 13px 14px; border: 1px solid rgba(255,227,114,.18); background: rgba(255,227,114,.035); }
.settings-preset button { width: 100%; padding: 11px 13px; color: #fff5c4; border: 1px solid rgba(255,227,114,.36); background: rgba(255,227,114,.06); cursor: pointer; font-size: 10px; }
.settings-preset button:hover { border-color: #ffe372; box-shadow: 0 0 22px rgba(255,227,114,.1); }
.settings-preset small { display: block; margin-top: 9px; color: #8ea2c7; font-size: 9px; line-height: 1.55; text-align: center; }
.gamepad-map { margin-top: 18px; padding: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; color: #657898; border: 1px solid var(--line); font-size: 8px; }
.gamepad-map strong { grid-column: 1 / -1; color: #b9c8e1; font-size: 10px; }
.data-dialog { width: min(820px, calc(100% - 32px)); }
.vault-intro { color: #7186aa; font-size: 10px; line-height: 1.7; }
.vault-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.vault-grid section { padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.vault-grid strong, .vault-grid small { display: block; }
.vault-grid strong { margin-bottom: 8px; color: #d9e7ff; font-size: 12px; }
.vault-grid small { min-height: 38px; color: #687c9f; font-size: 8px; line-height: 1.6; }
.vault-grid textarea { width: 100%; min-height: 140px; margin: 12px 0 10px; padding: 12px; resize: vertical; color: #b8c7e2; border: 1px solid var(--line); background: rgba(0,0,0,.22); font: 8px/1.5 monospace; }
.vault-grid button { width: 100%; padding: 11px 16px; border: 1px solid rgba(67,245,255,.38); background: rgba(67,245,255,.06); cursor: pointer; }
.save-preview { min-height: 74px; margin: 0 0 10px; padding: 11px; color: #7f92b2; border: 1px solid rgba(124,164,255,.12); background: rgba(67,245,255,.025); font: 8px/1.6 monospace; }
.save-preview.ready { color: #b9e8ff; border-color: rgba(67,245,255,.28); }
.save-preview.error { color: #ff8aa0; border-color: rgba(255,109,137,.26); background: rgba(255,49,95,.035); }
.save-preview b { color: #ffe372; font-weight: 600; }
.migration-audit { margin: 12px 0 2px; padding: 10px 12px; color: #9db4d8; border: 1px solid rgba(255,227,114,.18); background: rgba(255,227,114,.035); font: 8px/1.6 monospace; }
.migration-audit b { color: #ffe372; }
.playtest-audit { margin: 12px 0 16px; padding: 13px; border: 1px solid rgba(130,255,154,.18); background: linear-gradient(120deg, rgba(130,255,154,.045), rgba(67,245,255,.025)); }
.playtest-audit > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; }
.playtest-audit small { color: #82ff9a; font: 7px/1 monospace; letter-spacing: 1.8px; }
.playtest-audit em { justify-self: end; padding: 3px 7px; color: #cffff2; border: 1px solid rgba(130,255,154,.22); border-radius: 999px; background: rgba(130,255,154,.055); font: 7px/1 monospace; letter-spacing: 1.2px; }
.playtest-audit strong { grid-row: 2; color: #eafff0; font-size: 11px; }
.playtest-audit > div:first-child span { grid-column: 2; grid-row: 1 / span 2; color: #78958a; font: 7px/1.4 monospace; text-align: right; }
.playtest-audit-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 11px; }
.playtest-audit-metrics span { padding: 8px; color: #819b91; border: 1px solid rgba(130,255,154,.12); font: 7px/1.35 monospace; }
.playtest-audit-metrics b { display: block; margin-top: 4px; color: #dfffea; font-size: 10px; }
.playtest-audit > p { margin: 10px 0 0; color: #93ad9f; font: 8px/1.5 monospace; }
.playtest-launch-button { width: 100%; margin-top: 10px; padding: 9px 11px; color: #dfffea; border: 1px solid rgba(130,255,154,.3); background: linear-gradient(90deg, rgba(130,255,154,.1), rgba(67,245,255,.055)); cursor: pointer; font: 8px/1 monospace; letter-spacing: 1px; }
.playtest-launch-button:hover, .playtest-launch-button:focus-visible { border-color: #82ff9a; outline: 1px solid rgba(130,255,154,.5); outline-offset: 2px; box-shadow: 0 0 20px rgba(130,255,154,.1); }
.playtest-launch-button i { margin-left: 8px; color: #82ff9a; font-style: normal; }
.playtest-audit[data-status="review"] { border-color: rgba(255,227,114,.24); }
.playtest-audit[data-status="review"] small, .playtest-audit[data-status="review"] > p { color: #ffe372; }
.playtest-audit[data-status="stable"] { border-color: rgba(67,245,255,.25); box-shadow: inset 0 0 24px rgba(67,245,255,.035); }
.playtest-audit[data-mode="flight"] em { color: #dfe8ff; border-color: rgba(96,145,255,.34); background: rgba(96,145,255,.1); }
.playtest-audit[data-mode="relativity"] em { color: #ffe4f6; border-color: rgba(255,79,189,.34); background: rgba(255,79,189,.1); }
.playtest-audit[data-mode="expedition"] em { color: #f1e8ff; border-color: rgba(216,180,255,.36); background: rgba(216,180,255,.1); }
.playtest-gate-readiness { margin: 8px 0 0; padding: 7px 8px; border: 1px solid rgba(255,227,114,.2); color: #ffe372; background: rgba(255,227,114,.055); font: 7px/1.45 monospace; }
.playtest-audit[data-gate="ready"] .playtest-gate-readiness { border-color: rgba(130,255,154,.28); color: #82ff9a; background: rgba(130,255,154,.06); }
.release-gate-audit { margin: 12px 0 18px; padding: 12px; border: 1px solid rgba(255,79,189,.18); background: linear-gradient(135deg, rgba(255,79,189,.06), rgba(3,14,22,.72)); box-shadow: inset 0 0 28px rgba(255,79,189,.035); }
.release-gate-audit[data-gate="ready"] { border-color: rgba(130,255,154,.28); background: linear-gradient(135deg, rgba(130,255,154,.06), rgba(3,14,22,.72)); }
.release-gate-audit > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; }
.release-gate-audit small { display: block; color: #ff9bd8; font: 7px/1 monospace; letter-spacing: 2px; }
.release-gate-audit em { justify-self: end; padding: 3px 7px; color: #ffe4f6; border: 1px solid rgba(255,79,189,.3); border-radius: 999px; background: rgba(255,79,189,.08); font: 7px/1 monospace; letter-spacing: 1.2px; }
.release-gate-audit strong { grid-row: 2; display: block; color: #fff1fb; font: 11px/1.2 monospace; }
.release-gate-audit span { grid-column: 2; grid-row: 1 / span 2; display: block; color: #a7b8d0; font: 8px/1.45 monospace; text-align: right; }
.release-gate-audit[data-gate="ready"] em { color: #caffd7; border-color: rgba(130,255,154,.34); background: rgba(130,255,154,.09); }
.release-gate-list { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.release-gate-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 7px 8px; border: 1px solid rgba(255,227,114,.14); background: rgba(255,227,114,.035); }
.release-gate-list li[data-ready="true"] { border-color: rgba(130,255,154,.18); background: rgba(130,255,154,.04); }
.release-gate-list b { color: #ffe372; font: 7px/1 monospace; }
.release-gate-list li[data-ready="true"] b { color: #82ff9a; }
.release-gate-list span { margin: 0; color: #e0eaff; font: 8px/1 monospace; }
.release-gate-list em { grid-column: 1 / -1; color: #7f91aa; font: 7px/1.35 monospace; }
.release-gate-list i { grid-column: 1 / -1; color: #b7c7df; font: 7px/1.35 monospace; font-style: normal; }
.release-next-evidence { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; margin: 10px 0 0; padding: 9px 10px; border: 1px solid rgba(255,227,114,.24); background: linear-gradient(135deg, rgba(255,227,114,.065), rgba(255,79,189,.035)); }
.release-next-evidence b { color: #ffe372; font: 7px/1 monospace; letter-spacing: 1.4px; }
.release-next-evidence strong { color: #fff5c8; font: 9px/1.2 monospace; }
.release-next-evidence small { justify-self: end; color: #9ed6df; font: 7px/1 monospace; letter-spacing: .9px; }
.release-next-evidence span { grid-column: 1 / -1; color: #d8cfa5; font: 7px/1.45 monospace; }
.release-next-evidence em { grid-column: 1 / -1; color: #9ed6df; font: 7px/1.3 monospace; font-style: normal; letter-spacing: .7px; }
.release-next-evidence button { justify-self: start; padding: 7px 9px; color: #fff5c8; border: 1px solid rgba(255,227,114,.28); background: rgba(255,227,114,.07); cursor: pointer; font: 7px/1 monospace; letter-spacing: .8px; }
.release-next-evidence button:hover, .release-next-evidence button:focus-visible { outline: 1px solid rgba(255,227,114,.44); outline-offset: 2px; box-shadow: 0 0 16px rgba(255,227,114,.12); }
.release-next-evidence[data-gate="ready"] { border-color: rgba(130,255,154,.3); background: linear-gradient(135deg, rgba(130,255,154,.07), rgba(67,245,255,.035)); }
.release-next-evidence[data-gate="ready"] b, .release-next-evidence[data-gate="ready"] strong, .release-next-evidence[data-gate="ready"] small { color: #caffd7; }
.release-next-evidence[data-gate="ready"] span, .release-next-evidence[data-gate="ready"] em { color: #dfffea; }
.release-next-evidence[data-gate="ready"] button { color: #caffd7; border-color: rgba(130,255,154,.3); background: rgba(130,255,154,.07); }
[data-next-evidence-focus="true"] { outline: 1px solid rgba(255,227,114,.72); outline-offset: 3px; box-shadow: 0 0 0 1px rgba(255,227,114,.18), 0 0 24px rgba(255,227,114,.16); animation: next-evidence-focus 1.8s ease-out both; }
@keyframes next-evidence-focus { 0% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
.browser-regression-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(96,145,255,.22); background: rgba(96,145,255,.035); list-style: none; }
.browser-regression-checklist[hidden] { display: none; }
.browser-regression-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.browser-regression-checklist b { color: #8fb0ff; font: 7px/1.3 monospace; }
.browser-regression-checklist span { color: #c6d6ef; font: 7px/1.35 monospace; }
.browser-regression-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #cfe0ff; border: 1px solid rgba(130,255,154,.16); background: rgba(3,14,22,.62); white-space: pre-wrap; font: 7px/1.45 monospace; }
.browser-regression-template[hidden] { display: none; }
.live-browser-evidence-draft { max-height: 190px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: linear-gradient(135deg, rgba(3,18,28,.68), rgba(67,245,255,.035)); white-space: pre-wrap; font: 7px/1.45 monospace; }
.external-browser-handoff { max-height: 220px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #fff4bf; border: 1px solid rgba(255,227,114,.22); background: linear-gradient(135deg, rgba(28,22,5,.58), rgba(255,227,114,.035)); white-space: pre-wrap; font: 7px/1.45 monospace; }
.browser-evidence-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(67,245,255,.025); }
.browser-evidence-manual-audit label { color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1.5px; }
.browser-evidence-manual-audit textarea { width: 100%; min-height: 86px; padding: 9px; resize: vertical; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.browser-evidence-manual-audit button { justify-self: start; padding: 8px 10px; color: #fff; border: 1px solid rgba(67,245,255,.32); background: rgba(67,245,255,.08); cursor: pointer; font-size: 8px; }
.browser-evidence-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #cfe0ff; border: 1px solid rgba(130,255,154,.18); background: rgba(3,14,22,.52); font: 7px/1.45 monospace; }
.high-dimension-longrun-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(255,79,189,.22); background: linear-gradient(135deg, rgba(96,145,255,.04), rgba(255,79,189,.035)); list-style: none; }
.high-dimension-longrun-checklist[hidden] { display: none; }
.high-dimension-longrun-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.high-dimension-longrun-checklist b { color: #ff9bd8; font: 7px/1.3 monospace; }
.high-dimension-longrun-checklist span { color: #d7d6ff; font: 7px/1.35 monospace; }
.high-dimension-longrun-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #f1e4ff; border: 1px solid rgba(255,79,189,.16); background: rgba(18,7,30,.58); white-space: pre-wrap; font: 7px/1.45 monospace; }
.high-dimension-longrun-template[hidden] { display: none; }
.rare-event-browser-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(255,227,114,.24); background: linear-gradient(135deg, rgba(255,227,114,.045), rgba(255,79,189,.04)); list-style: none; }
.rare-event-browser-checklist[hidden] { display: none; }
.rare-event-browser-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.rare-event-browser-checklist b { color: #ffe372; font: 7px/1.3 monospace; }
.rare-event-browser-checklist span { color: #fff1c7; font: 7px/1.35 monospace; }
.rare-event-browser-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #fff3cc; border: 1px solid rgba(255,227,114,.18); background: rgba(29,22,4,.58); white-space: pre-wrap; font: 7px/1.45 monospace; }
.rare-event-browser-template[hidden] { display: none; }
.rare-event-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(255,227,114,.16); background: rgba(255,227,114,.03); }
.rare-event-manual-audit label { color: #ffe372; font: 7px/1 monospace; letter-spacing: 1.5px; }
.rare-event-manual-audit textarea { width: 100%; min-height: 86px; padding: 9px; resize: vertical; color: #fff9db; border: 1px solid rgba(255,227,114,.22); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.rare-event-manual-audit button { justify-self: start; padding: 8px 10px; color: #100b16; border: 1px solid rgba(255,227,114,.38); background: linear-gradient(135deg, rgba(255,227,114,.86), rgba(255,79,189,.7)); cursor: pointer; font-size: 8px; }
.rare-event-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #ffe9b8; border: 1px solid rgba(255,227,114,.2); background: rgba(28,22,5,.46); font: 7px/1.45 monospace; }
.physical-input-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(130,255,154,.22); background: linear-gradient(135deg, rgba(130,255,154,.035), rgba(255,227,114,.035)); list-style: none; }
.physical-input-checklist[hidden] { display: none; }
.physical-input-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.physical-input-checklist b { color: #82ff9a; font: 7px/1.3 monospace; }
.physical-input-checklist span { color: #e2f5df; font: 7px/1.35 monospace; }
.physical-input-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #e8ffe8; border: 1px solid rgba(130,255,154,.16); background: rgba(5,24,17,.58); white-space: pre-wrap; font: 7px/1.45 monospace; }
.physical-input-template[hidden] { display: none; }
.physical-input-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(130,255,154,.16); background: rgba(130,255,154,.03); }
.physical-input-manual-audit label { color: #82ff9a; font: 7px/1 monospace; letter-spacing: 1.5px; }
.physical-input-manual-audit textarea { width: 100%; min-height: 86px; padding: 9px; resize: vertical; color: #eafff0; border: 1px solid rgba(130,255,154,.22); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.physical-input-manual-audit button { justify-self: start; padding: 8px 10px; color: #07180f; border: 1px solid rgba(130,255,154,.38); background: linear-gradient(135deg, rgba(130,255,154,.86), rgba(67,245,255,.62)); cursor: pointer; font-size: 8px; }
.physical-input-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #dfffea; border: 1px solid rgba(130,255,154,.2); background: rgba(5,24,17,.46); font: 7px/1.45 monospace; }
.native-lifecycle-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(255,227,114,.24); background: linear-gradient(135deg, rgba(255,227,114,.04), rgba(67,245,255,.03)); list-style: none; }
.native-lifecycle-checklist[hidden] { display: none; }
.native-lifecycle-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.native-lifecycle-checklist b { color: #ffe372; font: 7px/1.3 monospace; }
.native-lifecycle-checklist span { color: #fff4bf; font: 7px/1.35 monospace; }
.native-lifecycle-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #fff8d5; border: 1px solid rgba(255,227,114,.18); background: rgba(27,22,5,.56); white-space: pre-wrap; font: 7px/1.45 monospace; }
.native-lifecycle-template[hidden] { display: none; }
.native-lifecycle-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(255,227,114,.16); background: rgba(67,245,255,.028); }
.native-lifecycle-manual-audit label { color: #ffe372; font: 7px/1 monospace; letter-spacing: 1.5px; }
.native-lifecycle-manual-audit textarea { width: 100%; min-height: 86px; padding: 9px; resize: vertical; color: #fff8d5; border: 1px solid rgba(255,227,114,.22); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.native-lifecycle-manual-audit button { justify-self: start; padding: 8px 10px; color: #101018; border: 1px solid rgba(255,227,114,.38); background: linear-gradient(135deg, rgba(255,227,114,.82), rgba(67,245,255,.58)); cursor: pointer; font-size: 8px; }
.native-lifecycle-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #fff4bf; border: 1px solid rgba(255,227,114,.2); background: rgba(27,22,5,.46); font: 7px/1.45 monospace; }
.human-playtest-checklist { display: grid; gap: 4px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(216,180,255,.26); background: linear-gradient(135deg, rgba(216,180,255,.04), rgba(130,255,154,.025)); list-style: none; }
.human-playtest-checklist[hidden] { display: none; }
.human-playtest-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.human-playtest-checklist b { color: #d8b4ff; font: 7px/1.3 monospace; }
.human-playtest-checklist span { color: #eadcff; font: 7px/1.35 monospace; }
.human-playtest-template { max-height: 180px; margin: 8px 0 0; padding: 9px; overflow: auto; color: #f4eaff; border: 1px solid rgba(216,180,255,.18); background: rgba(18,10,28,.56); white-space: pre-wrap; font: 7px/1.45 monospace; }
.human-playtest-template[hidden] { display: none; }
.human-playtest-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(216,180,255,.18); background: linear-gradient(135deg, rgba(216,180,255,.04), rgba(255,79,189,.025)); }
.human-playtest-manual-audit label { color: #d8b4ff; font: 7px/1 monospace; letter-spacing: 1.5px; }
.human-playtest-manual-audit textarea { width: 100%; min-height: 86px; padding: 9px; resize: vertical; color: #f7eaff; border: 1px solid rgba(216,180,255,.24); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.human-playtest-manual-audit button { justify-self: start; padding: 8px 10px; color: #15091d; border: 1px solid rgba(216,180,255,.42); background: linear-gradient(135deg, rgba(216,180,255,.9), rgba(255,79,189,.68)); cursor: pointer; font-size: 8px; }
.human-playtest-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #f4eaff; border: 1px solid rgba(216,180,255,.2); background: rgba(18,10,28,.56); font: 7px/1.45 monospace; }
.release-evidence-manifest-template { max-height: 180px; margin: 10px 0 0; padding: 10px; overflow: auto; color: #bfffe8; border: 1px solid rgba(130,255,154,.18); background: rgba(4,24,18,.58); white-space: pre-wrap; font: 7px/1.45 monospace; }
.release-manifest-field-guide { display: grid; gap: 5px; margin: 8px 0 0; padding: 9px; border: 1px solid rgba(130,255,154,.18); background: rgba(130,255,154,.035); list-style: none; }
.release-manifest-field-guide li { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 6px 9px; align-items: start; }
.release-manifest-field-guide b { color: #82ff9a; font: 7px/1.35 monospace; }
.release-manifest-field-guide span { color: #d9ffe5; font: 7px/1.45 monospace; }
.release-manifest-audit-report-template { max-height: 180px; margin: 10px 0 0; padding: 10px; overflow: auto; color: #ffe9b8; border: 1px solid rgba(255,227,114,.2); background: rgba(28,22,5,.58); white-space: pre-wrap; font: 7px/1.45 monospace; }
.release-manifest-manual-audit { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.release-manifest-manual-audit label { color: #ff9bd8; font: 7px/1 monospace; letter-spacing: 1.5px; }
.release-manifest-manual-audit textarea { width: 100%; min-height: 82px; padding: 9px; resize: vertical; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: rgba(0,0,0,.24); font: 7px/1.45 monospace; }
.release-manifest-manual-audit button { justify-self: start; padding: 8px 10px; color: #fff; border: 1px solid rgba(255,79,189,.32); background: rgba(255,79,189,.08); cursor: pointer; font-size: 8px; }
.release-manifest-drill-status { margin: 0; padding: 8px 9px; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: rgba(67,245,255,.04); font: 7px/1.45 monospace; letter-spacing: .4px; }
.release-manifest-drill-status[data-signal="ready"] { color: #caffd7; border-color: rgba(130,255,154,.28); background: rgba(130,255,154,.055); }
.release-manifest-drill-status[data-signal="missing"] { color: #ffe6ac; border-color: rgba(255,206,108,.32); background: rgba(255,206,108,.07); }
.release-manifest-manual-audit pre { max-height: 170px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #ffe9b8; border: 1px solid rgba(255,227,114,.2); background: rgba(28,22,5,.46); font: 7px/1.45 monospace; }
.release-evidence-task-list { display: grid; gap: 5px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(255,227,114,.22); background: rgba(255,227,114,.04); list-style: none; }
.release-evidence-task-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; }
.release-evidence-task-list b { color: #ffe372; font: 7px/1.3 monospace; }
.release-evidence-task-list span { color: #fff4bf; font: 7px/1.35 monospace; }
.release-evidence-task-list em { grid-column: 1 / -1; color: #d7cfa8; font: 7px/1.4 monospace; font-style: normal; }
.release-evidence-runbook { display: grid; gap: 5px; margin: 10px 0 0; padding: 9px; border: 1px dashed rgba(67,245,255,.24); background: rgba(67,245,255,.035); list-style: none; }
.release-evidence-runbook li { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; }
.release-evidence-runbook b { color: #43f5ff; font: 7px/1.3 monospace; }
.release-evidence-runbook span { color: #dffcff; font: 7px/1.35 monospace; }
.release-evidence-runbook em, .release-evidence-runbook i, .release-evidence-runbook strong { grid-column: 1 / -1; color: #9ed6df; font: 7px/1.4 monospace; font-style: normal; }
.release-evidence-runbook strong { color: #ffe6ac; padding: 5px 6px; border: 1px solid rgba(255,206,108,.2); background: rgba(255,206,108,.05); }
.release-evidence-file-copy { margin: 10px 0 0; justify-self: start; padding: 8px 10px; color: #1d1203; border: 1px solid rgba(255,206,108,.36); background: linear-gradient(135deg, rgba(255,206,108,.88), rgba(67,245,255,.42)); cursor: pointer; font-size: 8px; }
.release-evidence-file-templates { max-height: 210px; margin: 10px 0 0; padding: 10px; overflow: auto; color: #ffe6ac; border: 1px solid rgba(255,206,108,.2); background: linear-gradient(135deg, rgba(40,24,6,.58), rgba(67,245,255,.035)); white-space: pre-wrap; font: 7px/1.45 monospace; }
.release-evidence-bundle-panel { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid rgba(67,245,255,.18); background: linear-gradient(135deg, rgba(67,245,255,.04), rgba(130,255,154,.025)); }
.release-evidence-bundle-panel small { display: block; color: #7ceaff; font: 7px/1 monospace; letter-spacing: 1.5px; }
.release-evidence-bundle-panel em { display: inline-block; margin: 5px 0; padding: 3px 7px; color: #ffe372; border: 1px solid rgba(255,227,114,.24); border-radius: 999px; background: rgba(255,227,114,.055); font: 7px/1 monospace; font-style: normal; letter-spacing: 1px; }
.release-evidence-bundle-panel[data-next-evidence="included"] em { color: #caffd7; border-color: rgba(130,255,154,.3); background: rgba(130,255,154,.07); }
.release-evidence-bundle-panel span { color: #cfe0ff; font-size: 8px; line-height: 1.45; }
.release-evidence-bundle-panel button { justify-self: start; padding: 8px 10px; color: #041119; border: 1px solid rgba(67,245,255,.36); background: linear-gradient(135deg, rgba(67,245,255,.86), rgba(130,255,154,.62)); cursor: pointer; font-size: 8px; }
.release-evidence-bundle-panel pre { max-height: 190px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; color: #dffcff; border: 1px solid rgba(67,245,255,.2); background: rgba(3,14,22,.52); font: 7px/1.45 monospace; }
.release-evidence-packet-template { max-height: 220px; margin: 10px 0 0; padding: 10px; overflow: auto; color: #dffcff; border: 1px solid rgba(67,245,255,.18); background: linear-gradient(135deg, rgba(4,18,28,.68), rgba(255,79,189,.045)); white-space: pre-wrap; font: 7px/1.45 monospace; }
.playtest-audit-timeline { display: grid; gap: 6px; max-height: 220px; margin: 11px 0 0; padding: 0; overflow: auto; list-style: none; }
.playtest-audit-timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 9px; padding: 8px; border-left: 2px solid #82ff9a; background: rgba(3,14,22,.42); }
.playtest-audit-timeline li.flight { border-color: #6091ff; }
.playtest-audit-timeline li.relativity { border-color: #ff4fbd; }
.playtest-audit-timeline li.expedition { border-color: #d8b4ff; }
.playtest-audit-timeline li.gate { box-shadow: inset 0 0 0 1px rgba(130,255,154,.12); }
.playtest-audit-timeline li.supplemental { opacity: .76; border-style: dashed; }
.playtest-audit-timeline li[data-launch-action-state="armed"] {
  box-shadow: inset 0 0 0 1px rgba(255,227,114,.12), 0 0 14px rgba(255,227,114,.05);
}
.playtest-audit-timeline li[data-launch-action-state="armed"] span {
  color: #d8c982;
}
.playtest-audit-timeline li[data-launch-action-state="complete"] {
  box-shadow: inset 0 0 0 1px rgba(130,255,154,.18), 0 0 16px rgba(130,255,154,.08);
}
.playtest-audit-timeline li[data-launch-action-state="complete"] span {
  color: #b8ffd0;
}
.playtest-audit-timeline li[data-launch-action-progress]:not([data-launch-action-progress="none"]) code::after {
  content: " · ACTION";
  color: #ffe372;
}
.playtest-audit-timeline code { color: #82ff9a; font: 6px/1 monospace; }
.playtest-audit-timeline strong { color: #dceee5; font: 8px/1 monospace; }
.playtest-audit-timeline time { color: #6f897d; font: 6px/1 monospace; }
.playtest-audit-timeline span { grid-column: 1 / -1; color: #8fa99c; font: 7px/1.45 monospace; }
.playtest-audit-spectacle { display: inline-block; margin-left: 6px; padding: 2px 5px; color: #d8fbff; border: 1px solid rgba(67,245,255,.18); border-radius: 999px; background: rgba(67,245,255,.045); font-style: normal; letter-spacing: .8px; text-transform: uppercase; }
.playtest-audit-timeline li.flight .playtest-audit-spectacle { color: #cfdcff; border-color: rgba(124,157,255,.2); background: rgba(124,157,255,.055); }
.playtest-audit-timeline li.relativity .playtest-audit-spectacle { color: #ffd2ef; border-color: rgba(255,79,189,.2); background: rgba(255,79,189,.055); }
.playtest-audit-timeline .empty { display: block; color: #71877d; border-color: rgba(130,255,154,.18); font: 7px/1.4 monospace; }
.expedition-dialog { width: min(850px, calc(100% - 32px)); }
.expedition-dialog > p:last-of-type { color: #6d82a4; font-size: 10px; }
.expedition-planning-intent {
  border: 1px solid rgba(124, 234, 255, .35);
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--muted);
  background: linear-gradient(90deg, rgba(124, 234, 255, .1), rgba(215, 140, 255, .08));
  box-shadow: inset 0 0 18px rgba(124, 234, 255, .08);
}
.expedition-planning-intent.active {
  color: var(--text);
  border-color: rgba(255, 227, 114, .55);
  box-shadow: 0 0 22px rgba(255, 227, 114, .12), inset 0 0 18px rgba(215, 140, 255, .12);
}
.doctrine-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; }
.doctrine-card { min-height: 230px; padding: 24px 18px; color: white; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(13,25,55,.94), rgba(5,10,26,.94)); cursor: pointer; transition: .2s; }
.doctrine-card:hover { transform: translateY(-6px); border-color: var(--doctrine-color); box-shadow: 0 18px 45px rgba(0,0,0,.4), inset 0 0 30px color-mix(in srgb, var(--doctrine-color), transparent 94%); }
.doctrine-card i { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; color: var(--doctrine-color); border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-size: 24px; }
.doctrine-card strong { display: block; margin-bottom: 12px; font-size: 16px; }
.doctrine-card small { color: #7588a9; font-size: 9px; line-height: 1.7; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.help-grid div { padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.help-grid kbd, .help-grid strong, .help-grid small { display: block; margin-bottom: 12px; }
.help-grid strong { font-size: 12px; }.help-grid small, dialog > p:last-child { color: var(--muted); font-size: 10px; line-height: 1.6; }
.coach-manual {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(67,245,255,.16);
  background:
    radial-gradient(circle at 8% 0%, rgba(67,245,255,.12), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255,60,180,.1), transparent 38%),
    rgba(6,12,29,.72);
  box-shadow: inset 0 0 28px rgba(67,245,255,.05);
}
.coach-manual h3 { margin: 0 0 12px; color: #f5f7ff; font: 10px/1 monospace; letter-spacing: 3px; text-transform: uppercase; }
.coach-manual > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.coach-manual article {
  position: relative;
  min-height: 124px;
  padding: 13px 13px 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--coach-accent), transparent 72%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--coach-accent), transparent 90%), rgba(255,255,255,.02)),
    rgba(3,9,23,.86);
}
.coach-manual article::after {
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 28px;
  height: 2px;
  content: "";
  background: var(--coach-accent);
  box-shadow: 0 0 14px var(--coach-accent);
}
.coach-manual article[data-mode="classic"] { --coach-accent: #43f5ff; }
.coach-manual article[data-mode="flight"] { --coach-accent: #ffb84d; }
.coach-manual article[data-mode="relativity"] { --coach-accent: #b46cff; }
.coach-manual b { display: block; margin-bottom: 9px; color: var(--coach-accent); font: 11px/1 monospace; letter-spacing: 1px; }
.coach-manual span { display: block; color: #9fb0d2; font-size: 10px; line-height: 1.65; }
.coach-manual em { position: absolute; left: 13px; right: 42px; bottom: 10px; color: #f5f7ff; font: 8px/1.2 monospace; letter-spacing: .8px; opacity: .72; }
.tactical-panel-manual {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(67,245,255,.18);
  background: linear-gradient(135deg, rgba(67,245,255,.04), rgba(255,227,114,.025), rgba(255,79,189,.03));
}
.tactical-panel-manual h3 { margin: 0 0 12px; color: #d8fbff; font: 10px/1 monospace; letter-spacing: 3px; text-transform: uppercase; }
.tactical-panel-manual > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tactical-panel-manual article { position: relative; min-height: 112px; padding: 13px 13px 32px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--panel-accent), transparent 76%); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-accent), transparent 94%), rgba(5,10,25,.48)); }
.tactical-panel-manual article::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ""; background: var(--panel-accent); box-shadow: 0 0 12px var(--panel-accent); opacity: .65; }
.tactical-panel-manual article[data-mode="classic"] { --panel-accent: #43f5ff; }
.tactical-panel-manual article[data-mode="flight"] { --panel-accent: #ffb84d; }
.tactical-panel-manual article[data-mode="relativity"] { --panel-accent: #b46cff; }
.tactical-panel-manual b { display: block; margin-bottom: 8px; color: var(--panel-accent); font: 10px/1 monospace; letter-spacing: 1px; }
.tactical-panel-manual span { display: block; color: #aab8d4; font-size: 10px; line-height: 1.6; }
.tactical-panel-manual em { position: absolute; left: 13px; right: 13px; bottom: 10px; color: #f5f7ff; font: 8px/1.2 monospace; letter-spacing: .8px; opacity: .72; }
.language-manual {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,227,114,.16);
  background: linear-gradient(135deg, rgba(255,227,114,.035), rgba(67,245,255,.03), rgba(216,180,255,.035));
}
.language-manual h3 { margin: 0 0 12px; color: #ffe372; font: 10px/1 monospace; letter-spacing: 3px; text-transform: uppercase; }
.language-manual > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.language-manual article { position: relative; min-height: 126px; padding: 13px 13px 32px; overflow: hidden; border: 1px solid rgba(255,227,114,.14); background: linear-gradient(145deg, rgba(255,227,114,.035), rgba(5,10,25,.52)); }
.language-manual article::before { position: absolute; left: 0; right: 0; top: 0; height: 2px; content: ""; background: linear-gradient(90deg, #ffe372, #43f5ff, #d8b4ff); opacity: .72; }
.language-manual b { display: block; margin-bottom: 8px; color: #f5f7ff; font: 9px/1 monospace; letter-spacing: 1px; }
.language-manual span { display: block; color: #aab8d4; font-size: 10px; line-height: 1.6; }
.language-manual em { position: absolute; left: 13px; right: 13px; bottom: 10px; overflow: hidden; color: #ffe372; font: 8px/1.2 monospace; letter-spacing: .8px; text-overflow: ellipsis; white-space: nowrap; opacity: .78; }
.advanced-manual { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(124,164,255,.16); }
.advanced-manual h3 { margin: 0 0 13px; color: var(--cyan); font: 10px/1 monospace; letter-spacing: 3px; text-transform: uppercase; }
.advanced-manual > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.advanced-manual article {
  position: relative;
  min-height: 86px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid rgba(124,164,255,.14);
  background:
    radial-gradient(circle at top right, rgba(255,60,180,.08), transparent 48%),
    rgba(255,255,255,.025);
}
.advanced-manual article::before {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  content: "";
  background: linear-gradient(var(--cyan), var(--pink));
  box-shadow: 0 0 10px var(--cyan);
}
.advanced-manual b { display: block; margin-bottom: 8px; color: #f5f7ff; font: 11px/1 monospace; letter-spacing: 1px; }
.advanced-manual span { display: block; color: #8093b6; font-size: 10px; line-height: 1.65; }

@media (max-width: 850px) {
  .topbar, .screen { width: min(100% - 30px, 700px); }
  .topbar { height: auto; min-height: 94px; padding: 12px 0; flex-wrap: wrap; gap: 10px; }
  .menu-screen { padding-top: 42px; }
  .pilot-profile { grid-template-columns: auto 70px; margin-right: 10px; }
  .pilot-profile > span:nth-child(n+3) { display: none; }
  .top-actions { order: 3; width: 100%; justify-content: space-between; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(124,164,255,.1); }
  .top-actions .icon-button { flex: 0 0 44px; width: 44px; height: 44px; }
  .dialog-close { min-width: 44px; min-height: 44px; right: 8px; top: 6px; }
  .update-prompt { bottom: 12px; grid-template-columns: 1fr 1fr; }
  .update-prompt span { grid-column: 1 / -1; }
  .vector-gate-hud { top: 315px; gap: 12px; width: min(340px, 86%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wingman-formation-hud { top: 305px; width: min(300px, 78%); box-sizing: border-box; }
  .missile-break-hud { top: 315px; width: min(340px, 86%); }
  .risk-drive-hud { right: 12px; bottom: 142px; width: 160px; }
  .forecast-sync-hud { right: 12px; bottom: 205px; width: 160px; }
  .circuit-cascade-hud { right: 12px; bottom: 142px; width: 160px; }
  .classic-loop-panel { left: 12px; bottom: 205px; width: 155px; box-sizing: border-box; opacity: .86; }
  .classic-route-panel { left: 12px; bottom: 278px; width: 155px; box-sizing: border-box; opacity: .86; }
  .einstein-bridge-hud { left: 12px; bottom: 142px; width: 160px; }
  .preflight-hold { top: 48%; width: calc(100% - 42px); padding: 16px; }
  .preflight-checklist { gap: 4px; }
  .preflight-checklist li { padding: 7px 4px; }
  .preflight-checklist span { font-size: 7px; }
  .gate-branch { padding: 8px; }
  .simultaneity-hud { top: 315px; width: min(340px, 86%); padding: 12px; }
  .doppler-lock-hud { top: 315px; width: min(340px, 86%); padding: 12px; }
  .doppler-controls { grid-template-columns: 54px 1fr 54px; }
  .frame-velocity-controls { grid-template-columns: 54px 1fr 54px; }
  .mode-grid { grid-template-columns: 1fr; }
  .dimension-signal { min-height: 220px; padding: 16px 16px 16px 126px; }
  .dimension-signal-visual { width: 112px; }
  .dimension-signal-copy strong { font-size: 14px; }
  .dimension-signal-copy span { font-size: 8px; }
  .dimension-signal-brief { grid-template-columns: 1fr; }
  .launch-directive { grid-template-columns: 1fr; margin: 24px 0 -6px; }
  .launch-directive button { width: 100%; }
  .dimension-academy { grid-template-columns: 1fr; margin: 18px 0 -2px; }
  .menu-chase-beacon { grid-template-columns: 1fr; margin: 18px 0 -4px; }
  .menu-chase-grid { grid-template-columns: 1fr; }
  .menu-chase-route { grid-template-columns: 1fr; }
  .menu-chase-actions { min-width: 0; }
  .menu-chase-beacon button { width: 100%; }
  .daily-route { grid-template-columns: auto 1fr; margin-bottom: 0; }
  .expedition-route { grid-template-columns: auto 1fr; margin-bottom: 0; }
  .expedition-route button { width: 100%; }
  .expedition-actions { flex-direction: column; }
  .daily-modifier { padding-left: 0; border-left: 0; }
  .daily-button { width: 100%; }
  .mode-card, .featured { min-height: 625px; transform: none; }
  .mode-card:hover, .featured:hover { transform: translateY(-5px); }
  .menu-footer { gap: 12px; flex-direction: column; text-align: center; }
  .game-hud { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .game-hud > button, .score-card { min-width: 0; min-height: 44px; }
  .game-hud > button { width: 100%; padding: 6px 5px; }
  .score-card { padding: 6px 7px; }
  .score-card small { margin-bottom: 4px; font-size: 6px; }
  .score-card b { font-size: 9px; letter-spacing: .5px; }
  .launch-directive button, .dimension-academy button, .menu-chase-beacon button, .daily-button, .expedition-route button, .overlay-actions button, .anchor-button { min-height: 44px; }
  .game-shell { height: calc(100vh - 155px); min-height: 520px; }
  .mission-panel { left: 12px; top: 75px; width: 155px; padding: 10px 12px; }
  .ghost-hud { right: 12px; max-width: 180px; }
  .mission-panel small { display: none; }
  .mission-panel > em { margin: 7px 0; font-size: 6px; }
  .style-challenge { display: none; }
  .threat-hunt-hud { left: 12px; top: 158px; width: 155px; padding: 10px 12px; }
  .combo-display { top: 74px; }
  .boss-hud { top: 125px; width: 60%; }
  .flight-radar { left: 12px; bottom: 142px; width: 108px; opacity: .7; }
  .flight-radar canvas { width: 108px; height: 108px; }
  .flight-radar figcaption span { display: none; }
  .flight-vector-panel { left: 12px; bottom: 258px; width: 155px; max-width: none; opacity: .86; transform: none; box-sizing: border-box; }
  .flight-path-panel { left: 12px; bottom: 330px; width: 155px; max-width: none; opacity: .86; transform: none; box-sizing: border-box; }
  .flight-attitude-ribbon { left: 12px; right: 12px; bottom: 170px; width: auto; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); box-sizing: border-box; }
  .g-load { left: calc(50% + 16px); bottom: 235px; width: 120px; }
  .flight-energy { left: calc(50% + 16px); bottom: 201px; width: 120px; }
  .minkowski-chart { right: 12px; top: 200px; width: 120px; transform: none; opacity: .7; }
  .minkowski-chart canvas { width: 120px; height: 80px; }
  .minkowski-chart figcaption span { display: none; }
  .relativity-hud .gravity-status { right: 12px; left: 12px; bottom: 225px; text-align: center; }
  .relativity-hud .relativity-vector-panel { left: 12px; right: 12px; bottom: 272px; max-width: none; opacity: .86; box-sizing: border-box; }
  .relativity-hud .causal-forecast-panel { left: 12px; right: 12px; bottom: 332px; max-width: none; opacity: .86; box-sizing: border-box; }
  .relativity-hud .spacetime-metric-ribbon { left: 12px; right: 12px; bottom: 108px; width: auto; transform: none; grid-template-columns: repeat(5, minmax(0, 1fr)); box-sizing: border-box; }
  .relativity-hud .twin-clock { left: 12px; bottom: 245px; width: calc(100% - 24px); box-sizing: border-box; }
  .relativity-hud .rindler-horizon { left: 12px; bottom: 305px; width: 170px; box-sizing: border-box; }
  .relativity-hud .twin-rendezvous { top: 158px; width: 190px; }
  .relativity-hud .cone-status { right: auto; left: 12px; bottom: 205px; text-align: left; }
  .relativity-hud .proper-time { right: 12px; bottom: 205px; }
  .relativity-hud .gamma { left: 12px; bottom: 158px; }
  .relativity-hud .anchor-status { right: 12px; left: auto; bottom: 188px; }
  .relativity-hud .echo-time { right: 12px; bottom: 168px; }
  .relativity-hud .coordinate-time { left: 12px; bottom: 143px; }
  .relativity-hud .worldline { right: 12px; bottom: 143px; }
  .anchor-button { left: 12px; bottom: 72px; }
  #anchorButton { min-width: 88px; }
  .upgrade-choices { grid-template-columns: 1fr; max-height: 62vh; overflow: auto; }
  .upgrade-card { min-height: 145px; }
  .input-assist {
    bottom: 42px;
    min-width: auto;
    width: calc(100% - 24px);
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
  }
  .run-control-brief { left: 12px; right: 12px; bottom: 142px; width: auto; grid-template-columns: 1fr; transform: none; }
  .input-assist strong, #assistStatus { text-align: right; }
  .assist-kicker { grid-column: 1; }
  .controls-hint { bottom: 12px; gap: 8px; }
  .controls-hint span:first-child { display: none; }
  .help-grid, .coach-manual > div, .tactical-panel-manual > div, .language-manual > div, .advanced-manual > div { grid-template-columns: 1fr; }
  .career-stats { grid-template-columns: repeat(2, 1fr); }
  .mastery-grid { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr; }
  .skin-grid { grid-template-columns: repeat(2, 1fr); }
  .compendium-grid { grid-template-columns: repeat(2, 1fr); }
  .ending-grid { grid-template-columns: repeat(2, 1fr); }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .callsign-field { position: static; display: block; margin: -14px 0 18px; }
  .leaderboard-row { grid-template-columns: 32px 1fr 75px; }
  .leaderboard-filter { display: grid; align-items: stretch; }
  .leaderboard-filter select { width: 100%; }
  .leaderboard-rating { display: none; }
  .leaderboard-row small { display: none; }
  .trace-analysis { margin-left: 0; }
  .trace-bars { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .vault-grid { grid-template-columns: 1fr; }
  .playtest-audit > div:first-child { grid-template-columns: 1fr; }
  .playtest-audit em { justify-self: start; }
  .playtest-audit > div:first-child span { grid-column: 1; grid-row: auto; text-align: left; }
  .release-gate-audit > div:first-child { grid-template-columns: 1fr; }
  .release-gate-audit em { justify-self: start; }
  .release-gate-audit span { grid-column: 1; grid-row: auto; text-align: left; }
  .browser-evidence-manual-audit textarea, .rare-event-manual-audit textarea, .physical-input-manual-audit textarea, .native-lifecycle-manual-audit textarea, .human-playtest-manual-audit textarea, .release-manifest-manual-audit textarea { min-height: 72px; }
  .browser-evidence-manual-audit pre, .rare-event-manual-audit pre, .physical-input-manual-audit pre, .native-lifecycle-manual-audit pre, .human-playtest-manual-audit pre, .release-manifest-manual-audit pre, .release-evidence-bundle-panel pre, .playtest-evidence-clip pre { max-height: 140px; }
  .run-outcome { grid-template-columns: 1fr; }
  .run-chase-ribbon { grid-template-columns: 1fr; }
  .next-sortie-intent { grid-template-columns: 1fr; }
  .next-sortie-archive { grid-template-columns: 1fr; }
  .holo-replay-debrief { grid-template-columns: 1fr; }
  .doctrine-choices { grid-template-columns: 1fr; max-height: 62vh; overflow: auto; }
  .doctrine-card { min-height: 155px; }
}

@media (max-width: 430px) {
  .top-actions { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between; row-gap: 7px; }
  .playtest-audit-metrics { grid-template-columns: 1fr; }
  .playtest-audit-timeline li { grid-template-columns: auto 1fr; }
  .playtest-audit-timeline time { grid-column: 1 / -1; }
  .browser-evidence-manual-audit, .rare-event-manual-audit, .physical-input-manual-audit, .native-lifecycle-manual-audit, .human-playtest-manual-audit, .release-manifest-manual-audit, .release-evidence-bundle-panel { padding: 8px; }
}

/* Privacy-preserving commercial validation survey. */
.commercial-signal-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(255,227,114,.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,227,114,.06), rgba(67,245,255,.045));
}
.commercial-signal-heading { display: grid; gap: 6px; }
.commercial-signal-heading > span { color: #ffe372; font-weight: 900; letter-spacing: .11em; }
.commercial-signal-heading > strong { color: #fff8d6; font-size: 20px; }
.commercial-signal-heading > small { color: #9fb0cd; line-height: 1.65; }
.commercial-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.commercial-signal-grid label { display: grid; gap: 7px; color: #a9b9d5; }
.commercial-signal-grid select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: #edfaff;
  border: 1px solid rgba(67,245,255,.26);
  border-radius: 7px;
  background: #091229;
  font: 700 14px/1.4 var(--font-ui-zh);
}
.commercial-recommend { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) auto !important; align-items: center; }
.commercial-recommend input { width: 100%; }
.commercial-recommend output { min-width: 56px; color: #82ff9a; font-weight: 900; text-align: right; }
.commercial-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: #c8d7f1; line-height: 1.55; }
.commercial-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: #43f5ff; }
.commercial-signal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.commercial-signal-actions button {
  min-height: 44px;
  padding: 10px 14px;
  color: #07131c;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffe372, #7ceaff);
  cursor: pointer;
  font-weight: 900;
}
#commercialSignalStatus { min-height: 22px; margin: 12px 0 8px; color: #82ff9a; }
#commercialSignalEvidence { width: 100%; min-height: 150px; color: #b8cae8; background: #050b1c; font: 600 13px/1.55 "Cascadia Mono", Consolas, monospace; }
@media (max-width: 620px) {
  .commercial-signal-grid { grid-template-columns: 1fr; }
  .commercial-recommend { grid-column: auto; grid-template-columns: 1fr auto !important; }
  .commercial-recommend span { grid-column: 1 / -1; }
  .commercial-consent { font-size: 14px; }
}

/* Local multi-user crew center. */
.user-button { padding: 4px; }
.user-button span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #06131c;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), #ffe372);
  box-shadow: 0 0 18px rgba(67,245,255,.3);
  font-weight: 900;
}
.user-dialog { width: min(680px, calc(100% - 28px)); }
.user-dialog-intro { color: #9eb0cf; line-height: 1.7; }
.user-list { display: grid; gap: 10px; margin: 20px 0; }
.user-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(67,245,255,.15);
  border-radius: 10px;
  background: rgba(8,16,38,.75);
}
.user-row.active { border-color: rgba(130,255,154,.5); box-shadow: inset 3px 0 #82ff9a; }
.user-row > div { display: flex; gap: 10px; align-items: center; }
.user-row > div:first-child > i {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  color: #07151e;
  border-radius: 50%;
  background: linear-gradient(135deg, #7ceaff, #d8b4ff);
  font-style: normal;
  font-weight: 900;
}
.user-row span { display: grid; gap: 3px; }
.user-row small { color: #8095b8; }
.user-row button, .user-create-panel button {
  min-height: 44px;
  padding: 9px 14px;
  color: #dffbff;
  border: 1px solid rgba(67,245,255,.34);
  border-radius: 7px;
  background: rgba(67,245,255,.08);
  cursor: pointer;
}
.user-row button.danger { color: #ffd3df; border-color: rgba(255,73,109,.35); background: rgba(255,73,109,.08); }
.user-create-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.user-create-panel form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; min-width: 0; }
.user-create-panel label { display: grid; gap: 7px; color: #9eb0cf; }
.user-create-panel input {
  min-height: 44px;
  padding: 10px 12px;
  color: #f2fbff;
  border: 1px solid rgba(67,245,255,.28);
  border-radius: 7px;
  outline: none;
  background: #081128;
  font: 600 16px/1.4 var(--font-ui-zh);
}
.user-create-panel input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(67,245,255,.1); }
.anonymous-user-button { color: #fff3c5 !important; border-color: rgba(255,227,114,.35) !important; background: rgba(255,227,114,.08) !important; }
.user-status { min-height: 24px; margin: 14px 0 0; color: #82ff9a; }
@media (max-width: 620px) {
  .user-create-panel, .user-create-panel form { grid-template-columns: 1fr; }
  .user-row { align-items: flex-start; }
  .user-row > div:last-child { flex-direction: column; }
}

/* v225 rendered readability contract. Legacy cockpit components contain
   highly specific 6–10px declarations, so the runtime marks only visible
   leaf copy that actually computes below the 14px accessibility floor. */
:root {
  --font-ui-zh: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", "Source Han Sans SC", sans-serif;
  --font-ui-en: "Segoe UI Variable", "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
  --font-display-zh: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", sans-serif;
  --font-display-en: "Bahnschrift", "Segoe UI Variable Display", "Aptos Display", sans-serif;
}
html[data-language="zh-CN"] body { font-family: var(--font-ui-zh); letter-spacing: .012em; }
html[data-language="en"] body { font-family: var(--font-ui-en); letter-spacing: .006em; }
html { --font-reading: var(--font-ui-zh); }
html[data-language="en"] { --font-reading: var(--font-ui-en); }
/* Instructions are prose, even inside a cockpit: reserve mono styling for
   actual keys/code and use tabular digits without monospacing whole sentences. */
html #gameScreen :is(#missionTitle, #missionDescription, #missionAction),
html .mobile-instrument-dock #runControlBrief :is(b, i),
html .mobile-instrument-dock #inputAssist :is(#assistPrimary, #assistSecondary, #assistStatus) {
  font-family: var(--font-reading);
  font-style: normal;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
html[data-language="zh-CN"] :is(h1, h2, h3, .brand strong, .mode-card > strong, .dimension-signal-copy strong) {
  font-family: var(--font-display-zh);
}
html[data-language="en"] :is(h1, h2, h3, .brand strong, .mode-card > strong, .dimension-signal-copy strong) {
  font-family: var(--font-display-en);
}
html body .readable-text-floor {
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: max(.01em, normal);
  overflow-wrap: anywhere;
}
html[data-font-size="large"] body .readable-text-floor { font-size: 16px !important; }
html[data-font-size="xlarge"] body .readable-text-floor { font-size: 18px !important; }
button.readable-text-floor, label.readable-text-floor, summary.readable-text-floor {
  min-height: 44px;
}

/* Result telemetry is player-facing even when its exchange format is fixed.
   Keep the black-box summary readable before the runtime audit catches it. */
#blackBoxStats {
  font-size: 14px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
}
html[data-font-size="large"] #blackBoxStats { font-size: 16px !important; }
html[data-font-size="xlarge"] #blackBoxStats { font-size: 18px !important; }
.black-box .black-box-evidence-clip pre {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
html[data-font-size="large"] .black-box .black-box-evidence-clip pre { font-size: 16px !important; }
html[data-font-size="xlarge"] .black-box .black-box-evidence-clip pre { font-size: 18px !important; }

[data-technical-format="english"] > small {
  display: block;
  margin: 8px 0;
  color: #a9bad8;
  font-size: 13px !important;
  line-height: 1.55;
}

.commercial-feedback-disclosure { margin: 16px 0; border-block: 1px solid var(--line); }
.commercial-feedback-disclosure > summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; color: var(--cyan); font: inherit; }
.operator-evidence-console {
  margin: 16px 0 22px;
  padding: 12px;
  border: 1px solid rgba(255, 190, 92, .28);
  border-radius: 10px;
  background: rgba(255, 190, 92, .045);
}
.operator-evidence-console > summary {
  color: #ffd889;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.5;
}
.black-box-next-capture > summary {
  color: #ffd889;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.5;
}
.technical-format-note {
  display: block;
  margin: 8px 0 4px;
  color: #a9bad8;
  font-size: 13px !important;
  line-height: 1.55;
}
.operator-evidence-console > p {
  margin: 10px 0 14px;
  color: #aebbd2;
  font-size: 13px !important;
  line-height: 1.6;
}

/* Implementation IDs are useful to maintainers but distract players and
   create apparent language mixing in the manual. */
.tactical-panel-manual article > em,
.language-manual article > em {
  display: none;
}

@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
  .game-screen { padding: 6px 0 8px; }
  .game-hud { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
  .game-hud > button, .score-card { min-height: 44px; }
  .game-hud > button { padding: 5px 4px; }
  .score-card { padding: 5px 6px; }
  .score-card small { margin-bottom: 3px; }
  .game-shell { height: calc(100vh - 62px); min-height: 280px; }
  .preflight-hold { top: 50%; max-height: calc(100% - 20px); overflow: auto; }
  .preflight-checklist { display: none; }
  .input-assist { bottom: 8px; min-height: 44px; width: calc(100% - 24px); padding: 6px 10px; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); border-radius: 999px; }
  #assistEvidence, #chaseRouteCue, #assistSpectacle, .assist-kicker, #assistStatus { display: none; }
  #assistTitle { width: auto; }
  #assistPrimary, #assistSecondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .run-control-brief, .flight-attitude-ribbon { display: none; }
  .mission-panel { left: 50%; top: 8px; width: 155px; transform: translateX(-50%); }
  .flight-path-panel { left: 12px; right: auto; top: 8px; bottom: auto; }
  .flight-vector-panel { right: 12px; left: auto; top: 8px; bottom: auto; }
  .flight-radar { left: 12px; bottom: 56px; width: 108px; }
  .g-load { right: 12px; left: auto; bottom: 118px; width: 120px; }
  .flight-energy { right: 12px; left: auto; bottom: 56px; width: 120px; }
  .classic-route-panel { left: 12px; top: 8px; bottom: auto; }
  .classic-loop-panel { right: 12px; left: auto; top: 8px; bottom: auto; }
  .relativity-hud .relativity-vector-panel { left: 12px; right: auto; top: 8px; bottom: auto; width: 155px; }
  .relativity-hud .causal-forecast-panel { right: 12px; left: auto; top: 8px; bottom: auto; width: 155px; }
  .relativity-hud .twin-clock { left: 50%; top: 110px; bottom: auto; width: 220px; transform: translateX(-50%); }
  .relativity-hud .rindler-horizon { right: 12px; left: auto; top: 110px; bottom: auto; width: 170px; }
  .relativity-hud .spacetime-metric-ribbon { left: 130px; right: 134px; bottom: 58px; width: auto; transform: none; }
  .minkowski-chart { right: 12px; top: auto; bottom: 58px; width: 120px; transform: none; }
  #anchorButton { left: 12px; bottom: 56px; }
  .vector-gate-hud, .missile-break-hud, .simultaneity-hud, .doppler-lock-hud { top: 50%; max-height: calc(100% - 70px); width: min(420px, 62%); overflow: auto; transform: translate(-50%, -50%); }
  .wingman-formation-hud { top: 50%; max-height: calc(100% - 70px); width: min(340px, 58%); overflow: auto; transform: translate(-50%, -50%); }
  .controls-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .dimension-signal *, .dimension-signal::before { animation: none !important; }
  .risk-drive-hud { animation: none !important; }
  .circuit-cascade-hud { animation: none !important; }
  .classic-loop-panel::after { animation: none !important; }
  .einstein-bridge-hud { animation: none !important; }
  .threat-hunt-hud { animation: none !important; }
  .chase-route-cue { animation: none !important; }
  .flight-attitude-ribbon::after { animation: none !important; }
  .mode-visual::after { animation: none !important; transform: none !important; }
  .spacetime-metric-ribbon::before, .spacetime-metric-ribbon::after { animation: none !important; }
  .skin-swatch::before, .skin-swatch::after, .skin-swatch b, .skin-swatch em { animation: none !important; }
  .preflight-hold::after { animation: none !important; transform: none !important; }
  .run-chase-ribbon::before { animation: none !important; transform: none !important; }
  .next-sortie::before { animation: none !important; transform: none !important; }
  .preflight-hold > div i { transition: none !important; }
  .touch-feedback { opacity: .85; animation: none !important; }
}

/* v223 readability floor: essential copy must remain legible on desktop and mobile. */
body {
  font-family: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand strong, .mode-card > strong, .dimension-signal-copy strong,
.daily-copy strong, .expedition-route strong, .overlay-panel > h2 {
  font-family: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", "Bahnschrift", sans-serif;
  font-weight: 800;
  letter-spacing: .025em;
}
.score-card b, .pilot-level, .mode-card-stat, .flight-hud b, .relativity-hud b,
kbd, code {
  font-family: "Bahnschrift", "Cascadia Mono", "Consolas", "Microsoft YaHei UI", monospace;
  font-variant-numeric: tabular-nums;
}
html[data-font-size="large"] { font-size: 18px; }
html[data-font-size="xlarge"] { font-size: 20px; }
html[data-font-size="large"] body { font-size: 18px; }
html[data-font-size="xlarge"] body { font-size: 20px; }
html[data-font-size="large"] small,
html[data-font-size="large"] em,
html[data-font-size="large"] button,
html[data-font-size="large"] label,
html[data-font-size="large"] select,
html[data-font-size="large"] .eyebrow,
html[data-font-size="large"] .intro { font-size: 15px !important; }
html[data-font-size="xlarge"] small,
html[data-font-size="xlarge"] em,
html[data-font-size="xlarge"] button,
html[data-font-size="xlarge"] label,
html[data-font-size="xlarge"] select,
html[data-font-size="xlarge"] .eyebrow,
html[data-font-size="xlarge"] .intro { font-size: 17px !important; }
.language-button { min-width: 44px; padding-inline: 9px; font-size: 13px; font-weight: 800; }
.settings-grid select { min-height: 44px; padding: 9px 11px; color: #eaf7ff; border: 1px solid rgba(67,245,255,.3); border-radius: 6px; background: #091229; font: 600 14px/1.4 "Microsoft YaHei UI", "Noto Sans SC", "Segoe UI", sans-serif; }
.dimension-signal-copy span,
.launch-directive small,
.dimension-academy small,
.menu-chase-beacon small,
.daily-copy small,
.daily-modifier small,
.expedition-route > div:nth-child(2) > small,
.mission-panel small,
.style-challenge small,
.threat-hunt-hud small,
.elite-hud small,
.pause-brief span,
.next-sortie span,
.ghost-review small,
.ghost-coach span,
.ghost-coach em,
.career-stats small,
.hangar-title small,
.skin-target-hint,
.achievement-item small,
.leaderboard-row small,
.settings-grid label > span,
.settings-preset small,
.gamepad-map,
.vault-grid small,
.help-grid small,
.coach-manual span,
.tactical-panel-manual span,
.language-manual span,
.advanced-manual span { font-size: max(12px, .75rem); line-height: 1.55; }
.mode-card > small, .overlay-panel > p, .mission-panel strong,
.style-challenge strong, .next-sortie strong, .pause-brief strong { font-size: max(14px, .875rem); }
.menu-chase-beacon button, .launch-directive button, .daily-button,
.expedition-route button, .overlay-actions button, .settings-preset button { font-size: max(13px, .8125rem); }

@media (max-width: 760px) {
  .dimension-signal-copy span, .score-card small, .score-card b,
  .mission-panel > em, .gamepad-map { font-size: 11px; }
  .top-actions { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
}

/* v224 strict legibility pass: no visible supporting copy may fall below 13px. */
small, em, kbd, button, label, select, option,
.pilot-level, .pilot-profile small, .mode-kicker, .mode-meta,
.mode-cockpit, .mode-spectacle, .mode-card-stat, .mode-boss-intel,
.mode-signature, .mode-promise, .mode-intensity, .mode-control, .mode-action,
.update-prompt, .gate-heading b, .missile-break-heading b, .frame-heading b,
.doppler-heading b, .ghost-hud, .flight-radar figcaption,
.altitude small, .velocity small, .g-load > div, .flight-energy > div,
.minkowski-chart figcaption, .twin-clock > div:first-child, .twin-clock small,
.relativity-insight b, .relativity-insight span, .relativity-coach-cue b,
.relativity-coach-cue span, .rindler-horizon > div, .rindler-horizon small,
.intermission-stats small, .expedition-event > p, .expedition-event button,
.black-box button, .mastery-card small, .skin-card small, .compendium-item small,
.ending-card small, .style-item small, .leaderboard-tabs button,
.leaderboard-filter, .trace-analysis p, .share-block label,
.run-code-preview span, .run-code-status, .release-gate-audit button,
.preflight-checklist span, .score-card small, .mission-panel > em {
  font-size: 13px !important;
  line-height: 1.45;
}

.mode-card > small, .intro, dialog p, .help-grid small,
.coach-manual span, .tactical-panel-manual span, .language-manual span,
.advanced-manual span { font-size: 15px !important; line-height: 1.65; }


/* Dialog typography follows the user-selected scale too; archive cards used
   to retain 7–10px legacy labels even in Extra Large mode. */
dialog :is(span, strong, small, em, button, label, select, p) {
  min-width: 0;
  font-size: 13px !important;
  overflow-wrap: anywhere;
}
html[data-font-size="large"] dialog :is(span, strong, small, em, button, label, select, p) {
  font-size: 15px !important;
}
html[data-font-size="xlarge"] dialog :is(span, strong, small, em, button, label, select, p) {
  font-size: 17px !important;
}

@media (max-width: 430px) {
  .career-dialog :is(.skin-grid, .compendium-grid, .ending-grid, .style-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .career-dialog :is(.skin-card, .compendium-item, .ending-card, .style-item) {
    width: 100%;
    max-width: 100%;
  }
}

/* Keep the live cockpit cue compact. It is a short, glanceable flight readout;
   detailed telemetry remains available through its accessible label and title. */
.input-assist {
  grid-template-columns: auto minmax(150px, 1fr) minmax(230px, 1.45fr) auto;
}
.input-assist #assistStatus {
  min-width: 230px;
  max-height: 48px;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .input-assist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .input-assist #assistStatus { min-width: 0; max-height: 42px; }
}

/* Portrait cockpits must privilege readable decisions over a miniature
   instrument wall. Secondary telemetry remains available in pause/debrief
   surfaces, while any text that stays visible clears the 14px floor. */
@media (max-width: 760px) and (orientation: portrait) {
  .game-shell :is(button, span, small, time, p, pre, select, summary, i, b, strong, label, a, li, dt, dd, kbd),
  .rank-result {
    font-size: 14px !important;
    line-height: 1.45;
  }
  .pilot-profile, .pilot-level, .pilot-profile small,
  .pilot-profile .pilot-archive-target, .top-actions .icon-button,
  .game-hud button, .game-hud .score-card small, .game-hud .score-card b,
  .mission-panel, .ghost-hud, .update-prompt {
    font-size: 14px !important;
    line-height: 1.45;
  }
  .flight-hud, .relativity-hud,
  .flight-hud b, .relativity-hud b,
  .game-shell b,
  .controls-hint, .controls-hint kbd {
    font-size: 14px !important;
    line-height: 1.4;
  }
  .flight-radar, .flight-path-panel, .flight-vector-panel,
  .flight-attitude-ribbon, .g-load, .flight-energy,
  .controls-hint, .relativity-hud .minkowski-chart,
  .relativity-hud .spacetime-metric-ribbon, .relativity-hud .rindler-horizon {
    display: none;
  }
  .flight-hud .altitude, .flight-hud .velocity,
  .relativity-hud .twin-clock, .relativity-hud .relativity-vector-panel,
  .relativity-hud .causal-forecast-panel {
    font-size: 14px !important;
  }
}

/* Readable instruments must flow with their text, not overlap fixed offsets. */
#preflightHold { overflow-x: hidden; background: #0b1026; }
#preflightHold::after { display: none; }
#preflightHold .preflight-spectacle,
#preflightHold .preflight-checklist span {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  overflow-wrap: anywhere;
  letter-spacing: .02em;
  line-height: 1.5;
}
#preflightHold .preflight-checklist { display: grid; }
#relativityHud {
  inset: 16px 16px 90px auto;
  width: min(300px, 38%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: auto;
  background: rgba(7, 10, 29, .92);
  border: 1px solid rgba(255, 119, 201, .3);
  border-radius: 10px;
}
#relativityHud > * {
  position: relative;
  inset: auto;
  transform: none;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  opacity: 1;
}
#relativityHud .minkowski-chart { order: 2; }
#relativityHud .light-speed { min-height: 5px; }
#relativityHud :is(span, small, b) {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.5;
}
@media (max-width: 620px) {
  #preflightHold .preflight-checklist { grid-template-columns: 1fr; }
  #relativityHud { width: 44%; right: 8px; padding: 8px; }
}
.mobile-instrument-dock { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #090e22; }
.mobile-instrument-dock:not([open]) > :not(summary) { display: none !important; }
.mobile-instrument-dock :is(#forecastSyncHud, #circuitCascadeHud, #riskDriveHud, #eventFeed, #signatureChainHud) {
  position: static !important; inset: auto !important; transform: none !important;
  width: 100%; max-width: 100%; box-sizing: border-box; margin: 12px 0;
}
.mobile-instrument-dock .event-card { position: relative; width: 100%; box-sizing: border-box; }
.mobile-instrument-dock > summary { padding: 16px; min-height: 44px; cursor: pointer; color: #a9edff; font-size: 16px; }
.mobile-instrument-dock #runControlBrief,
.mobile-instrument-dock #relativityHud,
.mobile-instrument-dock #inputAssist,
.mobile-instrument-dock #ghostHud {
  position: static;
  inset: auto;
  transform: none;
  width: auto;
  max-height: none;
  height: auto;
  margin: 12px;
  overflow: visible;
}
.mobile-instrument-dock #runControlBrief { display: grid; grid-template-columns: 1fr; }
.mobile-instrument-dock #runControlBrief :is(b, i),
.mobile-instrument-dock #inputAssist :is(#assistPrimary, #assistSecondary, #assistStatus) {
  min-width: 0;
  max-height: none;
  height: auto;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.5;
  letter-spacing: normal;
}
.mobile-instrument-dock #runControlBrief i { font-size: 16px; }
html[data-font-size="large"] .mobile-instrument-dock #runControlBrief i { font-size: 18px !important; }
html[data-font-size="xlarge"] .mobile-instrument-dock #runControlBrief i { font-size: 20px !important; }
.mobile-instrument-dock #inputAssist,
.mobile-instrument-dock #ghostHud { white-space: normal; text-overflow: clip; }
@media (max-width: 620px) {
  #updatePrompt {
    position: static;
    transform: none;
    width: auto;
    margin: 12px 0;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #updatePrompt button { min-height: 44px; white-space: normal; }
  #gameScreen > .mission-panel {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    box-sizing: border-box;
    margin: 12px 0;
    opacity: 1;
    filter: none;
  }
  #gameScreen > .mission-panel :is(strong, small, em, b, .mission-label) {
    font-size: 16px !important;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: normal;
  }
  #gameScreen > .mission-panel small { display: block; color: #b9c9e2; }
}
.desktop-brief-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.desktop-brief-dock :is(#runControlBrief, #inputAssist, #ghostHud) {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  overflow: visible;
  opacity: 1;
  background: #0b1026;
  white-space: normal;
}
.desktop-brief-dock #runControlBrief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.desktop-brief-dock :is(span, small, strong, b, p) {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
@media (max-width: 620px) {
  .topbar { gap: 12px; }
  .topbar .pilot-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
  }
  .topbar .pilot-profile > span:not(.pilot-level),
  .topbar .pilot-archive-target em { display: none; }
  .topbar .pilot-archive-target {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    max-width: none;
    padding: 8px;
  }
  .topbar .pilot-archive-target small { margin: 0; }
  .topbar .top-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .topbar .top-actions .icon-button { min-width: 44px; min-height: 44px; }
}

.player-support-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; font: 18px/1.6 system-ui, "Microsoft YaHei", sans-serif; }
.player-support-dialog:has(#playerFeedbackProgress) { width: min(760px, calc(100vw - 28px)); border: 1px solid rgba(97, 226, 255, .42); background: radial-gradient(ellipse at 88% 0%, rgba(72, 109, 255, .2), transparent 42%), linear-gradient(145deg, #0d2032, #071321 82%); box-shadow: 0 0 0 1px rgba(120, 225, 255, .08), 0 28px 100px #020913d9, 0 0 42px rgba(59, 202, 255, .12); }
.player-support-dialog:has(#playerFeedbackProgress)::backdrop { background: rgba(2, 9, 18, .78); backdrop-filter: blur(8px) saturate(.8); }
.player-support-dialog:has(#playerFeedbackProgress) h2 { color: #e9fbff; letter-spacing: .03em; text-shadow: 0 0 24px #41dfff4a; }
.player-support-dialog:has(#playerFeedbackProgress) h2::after { content: " // SIGNAL UPLINK"; display: block; color: #6debf3; font: 600 10px/2 ui-monospace, monospace; letter-spacing: .2em; }
.player-support-dialog:has(#playerFeedbackProgress) > p { color: #acc7da; }
.player-support-dialog #issueCategory { width: 100%; min-height: 46px; padding: 9px 12px; color: #eafaff; background: #0a1b2b; border: 1px solid #35718a; border-radius: 8px; font: inherit; }
.player-feedback-progress { margin-top: 28px; padding: 18px; border: 1px solid #34758b; border-radius: 12px; background: linear-gradient(135deg, rgba(14, 43, 62, .82), rgba(9, 21, 38, .92)); box-shadow: inset 0 1px #c4f8ff12; }
.player-feedback-progress-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #75eaf2; font: 600 10px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.player-feedback-progress-heading button { min-height: 36px; margin: 0; padding: 7px 12px; font-size: 13px; }
.player-feedback-progress h3 { margin: 8px 0; color: #effbff; }
.player-feedback-progress > p { color: #9bb8cd; font-size: 14px; }
.player-feedback-progress-list { display: grid; gap: 12px; }
.player-feedback-progress .feedback-progress-card { padding: 14px; border: 1px solid #31566e; border-radius: 9px; background: #071827; }
.player-feedback-progress .feedback-progress-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.player-feedback-progress .feedback-status-badge { padding: 2px 8px; border: 1px solid #61e8e577; border-radius: 99px; color: #7af2e9; font-size: 12px; white-space: nowrap; }
.player-feedback-progress .feedback-progress-card p { margin: 10px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.player-feedback-progress .feedback-progress-card small, .player-feedback-progress .feedback-progress-timeline time { color: #91a9bd; font-size: 11px; }
.player-feedback-progress .feedback-progress-timeline { margin: 12px 0 0; padding: 4px 0 0 13px; border-left: 1px solid #3f7d91; list-style: none; }
.player-feedback-progress .feedback-progress-timeline li { display: grid; gap: 1px; position: relative; padding: 0 0 10px 10px; }
.player-feedback-progress .feedback-progress-timeline li::before { content: ""; position: absolute; top: 6px; left: -17px; width: 6px; height: 6px; border-radius: 50%; background: #6cf4ef; box-shadow: 0 0 10px #5beaff; }
.player-feedback-progress .feedback-progress-timeline b { color: #d6f8ff; font-size: 13px; }
.player-feedback-progress .feedback-progress-timeline span { color: #afc4d3; font-size: 13px; overflow-wrap: anywhere; }
.player-support-dialog label { display: block; margin-top: 16px; }
.player-support-dialog textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; font: inherit; line-height: 1.5; resize: vertical; color: #eef7ff; background: #172c40; border: 1px solid #8acbd5; border-radius: 8px; }
.player-support-dialog button { min-height: 44px; margin-top: 12px; font-size: 17px; }
/* Dedicated columns reserve real space instead of covering the 2D board. */
@media (min-width: 621px) and (max-width: 999px) {
  .desktop-brief-dock > * { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 100%; height: auto; max-height: none; box-sizing: border-box; margin: 0; opacity: 1; visibility: visible; filter: none; overflow-wrap: anywhere; }
  .desktop-brief-dock :is(#flightHud, #relativityHud) { display: flex; flex-direction: column; gap: 12px; }
  .desktop-brief-dock :is(#flightHud, #relativityHud) > * { position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important; width: 100%; max-width: 100%; min-width: 0; height: auto; box-sizing: border-box; }
  .desktop-brief-dock #flightHud :is(.reticle, .pitch-ladder) { display: none; }
  .desktop-brief-dock :is(.event-card, .mission-panel) { width: 100%; max-width: 100%; }
}
.classic-rail-layout #canvasStack { position: absolute; inset: 0 240px; }
/* Keyboard help owns a separate strip; long bilingual hints cannot cover the board. */
@media (min-width: 1000px) {
  .classic-rail-layout #canvasStack { bottom: 76px; }
  .classic-rail-layout .controls-hint {
    width: calc(100% - 500px); max-height: 64px; bottom: 6px;
    box-sizing: border-box; padding: 4px 8px;
    flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 5px 12px; white-space: normal; overflow: auto;
    line-height: 1.5; color: #c1d2e8; background: #0b1829;
    border-radius: 8px;
  }
  .classic-rail-layout .controls-hint > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .classic-rail-layout .controls-hint #specialHint { order: -1; flex-basis: 100%; text-align: center; }
}
.classic-rail { position: absolute; top: 12px; bottom: 42px; width: 220px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; z-index: 6; }
.classic-left-rail { left: 10px; }
.classic-right-rail { right: 10px; }
.game-shell .classic-rail > * { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: none !important; flex: 0 0 auto; margin: 0 !important; opacity: 1 !important; visibility: visible !important; filter: none !important; box-sizing: border-box; }
.classic-rail .event-card { width: 100%; }
/* All dimensional instruments use readable flow; bank/pitch motion belongs to the scene. */
.classic-rail :is(#flightHud, #relativityHud) { display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.classic-rail :is(#flightHud, #relativityHud) > * { position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important; width: 100%; max-width: 100%; height: auto; margin: 0; box-sizing: border-box; flex: 0 0 auto; }
.classic-rail #flightHud :is(.reticle, .pitch-ladder) { display: none; }
.classic-rail :is(.altitude, .velocity) { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; letter-spacing: 0; }
.classic-rail :is(.flight-attitude-ribbon, .spacetime-metric-ribbon) { display: flex; flex-wrap: wrap; gap: 8px; }
.classic-rail :is(.flight-radar, .minkowski-chart) canvas { max-width: 100%; }
.classic-rail .boss-hud { padding: 10px; text-align: left; background: #101629; }
.classic-rail .boss-hud > strong { letter-spacing: 0; }
/* Reuse the existing bottom help strip, never add a HUD row for damage text. */
#gameScreen .controls-hint { max-height: 44px; overflow: auto; }
#gameScreen .controls-hint > #shieldFeedback {
  display: block; flex: 0 0 100%; order: -2;
  box-sizing: border-box; min-width: 0; margin: 0;
  white-space: normal; overflow-wrap: anywhere;
  color: #ffd166; font-size: 16px; line-height: 1.4;
}
#shieldFeedback:empty { display: none !important; }
#shieldFeedback:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* Compact layouts normally hide keyboard help; damage feedback must stay visible. */
@media (max-width: 999px) {
  #gameScreen > .controls-hint {
    position: relative; inset: auto; transform: none;
    width: 100%; box-sizing: border-box; margin: 0;
    flex-wrap: wrap; background: #0b1829;
  }
  #gameScreen .controls-hint:has(#shieldFeedback:not(:empty)) { display: flex; }
  #gameScreen .controls-hint:has(#shieldFeedback:not(:empty)) > span:not(#shieldFeedback) { display: none; }
}
#deathLocationMap { display: block; flex-shrink: 0; width: min(100%, 320px); height: auto; margin: 12px auto; background: #090f20; border: 1px solid #56627d; }
#deathLocationLegend { flex-shrink: 0; min-width: 0; font-size: 16px !important; line-height: 1.5; overflow-wrap: anywhere; }
/* Map-bearing results must not paint sticky actions over the replay surface. */
#overlay .overlay-panel:has(#deathLocationMap:not(.hidden)) .overlay-actions { position: static; }
html[data-font-size="large"] #deathLocationLegend { font-size: 18px !important; }
html[data-font-size="xlarge"] #deathLocationLegend { font-size: 20px !important; }
#classicLegend { display: none; }
#helpDialog #classicLegend {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255,209,102,.4);
  border-radius: 6px;
  color: #f2f5fa;
  background: #10182a;
  font: 16px/1.6 "Segoe UI", "Microsoft YaHei UI", sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-font-size="large"] #helpDialog #classicLegend { font-size: 18px; }
html[data-font-size="xlarge"] #helpDialog #classicLegend { font-size: 20px; }
.classic-rail > *, .classic-rail #inputAssist > * { min-width: 0; box-sizing: border-box; }
.classic-rail :is(span, small, strong, b, em, p) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  box-sizing: border-box;
  letter-spacing: .02em;
  line-height: 1.5;
}
.classic-rail #inputAssist .assist-evidence {
  position: static;
  inset: auto;
  width: auto;
  justify-self: start;
}
.classic-rail #inputAssist .chase-route-cue { border-radius: 6px; }
.classic-rail .event-card { box-sizing: border-box; min-width: 0; }

/* The compact rail cannot inherit the full-width cockpit's minimum columns. */
.classic-rail #inputAssist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.classic-rail #inputAssist > *,
.classic-rail #inputAssist .classic-coach-cue > * {
  min-width: 0;
  max-height: none;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.5 !important;
}
.classic-rail #inputAssist .classic-coach-cue { grid-template-columns: minmax(0, 1fr); }
.classic-rail #inputAssist #assistStatus { min-width: 0; max-height: none; font-size: 16px !important; }
html[data-font-size="large"] .classic-rail #inputAssist #assistStatus { font-size: 18px !important; }
html[data-font-size="xlarge"] .classic-rail #inputAssist #assistStatus { font-size: 20px !important; }

/* Results lead with the outcome; long analysis is available on demand. */
.run-review-details { order: 10; margin-top: 20px; text-align: left; border-top: 1px solid var(--line); }
.run-review-details > summary { cursor: pointer; min-height: 48px; padding: 14px 4px; color: var(--cyan); font: 600 17px/1.5 system-ui, "Microsoft YaHei", sans-serif; }
.run-review-details > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.run-review-details[open] > :not(summary) { margin-top: 16px; }
#overlay .overlay-panel { background: linear-gradient(155deg,#20364b,#101e30); border: 1px solid #45647d; border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
#overlay .final-score strong { font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: -.04em; }
/* Update notices remain reachable without covering combat or result actions. */
body:has(#gameScreen:not(.hidden)) #updatePrompt {
  position: static; inset: auto; transform: none; width: min(680px, calc(100% - 32px));
  margin: 16px auto; box-sizing: border-box; box-shadow: none; z-index: auto;
}
/* Flight deck: compact combat information, optional deep telemetry. */
.tactical-details-toggle { display: block; margin: 0 0 8px auto; min-height: 36px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 20px; background: #182b40; color: var(--text); font: 16px/1.4 system-ui, sans-serif; cursor: pointer; }
.tactical-details-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#gameScreen:not(.show-tactical-details) .classic-rail > :not(.mission-panel):not(#bossHud):not(#flightHud):not(#relativityHud):not(#forecastSyncHud):not(#circuitCascadeHud):not(#signatureChainHud) { display: none !important; }
#gameScreen:not(.show-tactical-details) .classic-right-rail:has(> #bossHud:not(.hidden)) > :is(#forecastSyncHud, #circuitCascadeHud, #signatureChainHud) { display: none !important; }
#gameScreen:not(.show-tactical-details) :is(#bossMutation, #bossSound) { display: none; }
#gameScreen .classic-rail { background: #102034; border: 1px solid rgba(156,203,230,.16); border-radius: 16px; padding: 14px; box-sizing: border-box; scrollbar-width: thin; }
#gameScreen .classic-rail > * { background: transparent !important; border-left: 0; box-shadow: none; }
#gameScreen .classic-rail :is(strong, b) { font-family: system-ui, "Microsoft YaHei", sans-serif; letter-spacing: 0; }
#gameScreen .classic-rail #bossName { font-size: 19px; line-height: 1.5; color: #fff0ba; }
#gameScreen .classic-rail #bossStatus { font: 600 18px/1.6 system-ui, "Microsoft YaHei", sans-serif; color: #f3f6ff; }
#gameScreen .game-shell { background: radial-gradient(ellipse at 50% 0%, #142d46, #091321 70%); border-color: #35536b; border-radius: 18px; }
#gameScreen #canvasStack { border: 0; }
/* Secondary tools float above content; narrow layouts stay inside the toolbar. */
.runtime-version { align-self: center; color: #a8bdd5; font-size: 14px; }
.toolbar-more { min-width: 72px; }
.toolbar-more > summary { cursor: pointer; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }
.toolbar-more > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.toolbar-more-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.topbar .top-actions .toolbar-more .icon-button { width: auto; height: auto; min-height: 44px; padding: 10px; font-size: 16px; white-space: normal; }
.top-actions { position: relative; }
.toolbar-more { position: relative; flex: 0 0 auto; }
.toolbar-more[open] > summary { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(140,230,237,.08); }
.toolbar-more-items {
  position: absolute; z-index: 40; top: calc(100% + 12px); right: 0;
  width: min(380px, calc(100vw - 40px)); margin: 0; padding: 16px;
  max-height: min(440px, 65dvh); overflow-y: auto;
  border: 1px solid rgba(140,230,237,.4); border-radius: 18px;
  background: linear-gradient(145deg, #223f59, #14263e);
  box-shadow: 0 24px 60px rgba(2,10,24,.55), inset 0 1px rgba(211,244,255,.12);
}
.toolbar-panel-title { grid-column: 1 / -1; margin: 0 0 6px; color: var(--cyan); font: 600 16px/1.5 system-ui, "Microsoft YaHei", sans-serif; letter-spacing: .08em; }
.topbar .top-actions .toolbar-more .icon-button { text-align: left; min-height: 54px; padding: 12px 14px; background: rgba(140,200,240,.06); border-color: rgba(140,200,240,.18); }
.topbar .top-actions .toolbar-more .icon-button:hover { background: rgba(140,230,237,.15); border-color: var(--cyan); }
.topbar .top-actions .toolbar-more #shareGameButton { background: linear-gradient(120deg, #236376, #284c86); border-color: #80d9e6; }
@media (max-width: 700px) {
  .top-actions .toolbar-more { position: static; }
  .toolbar-more-items { right: 0; top: calc(100% + 8px); max-width: 100%; box-sizing: border-box; }
}

/* Calm landing hierarchy: launch, three modes, then optional depth. */
.menu-extras { margin: 28px 0; border-top: 1px solid var(--line); }
.menu-extras > summary { cursor: pointer; padding: 20px 4px; color: var(--text); font-size: 18px; line-height: 1.5; }
.menu-extras > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
#menuScreen { padding-top: 16px; }
#menuScreen .hero-copy { padding-top: 0; padding-bottom: 8px; }
#menuScreen .hero-copy h1 { margin: 10px 0; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.35; }
#menuScreen .hero-copy h1 em { font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.4 !important; margin-top: 4px; }
#menuScreen .hero-copy .intro { max-width: 760px; margin: 12px auto; line-height: 1.6; }
#menuScreen .difficulty-selector { margin: 10px auto 8px; }
#menuScreen .mode-grid { margin: 16px auto 24px; }
#menuScreen .mode-card { padding: 20px; }
#menuScreen .launch-directive .launch-action-chip { display: none; }
#menuScreen .mode-card { min-height: 0; box-shadow: none; }
#menuScreen .mode-card { display: flex; flex-direction: column; align-items: stretch; }
#menuScreen .mode-card .launch { position: static; inset: auto; flex: 0 0 auto; margin-top: auto; padding-top: 16px; min-height: 44px; box-sizing: border-box; }
#menuScreen .mode-card > small { flex: 1 0 auto; }
#menuScreen .mode-card > :is(.mode-cockpit, .mode-kicker, .mode-spectacle, .mode-meta, .mode-highlights, .mode-boss-intel, .mode-signature, .mode-promise, .mode-intensity, .mode-control, .mode-action) { display: none; }
#menuScreen .mode-card > small { font-size: 16px; line-height: 1.7; }
#menuScreen .mode-card .mode-visual { height: 110px; }
#menuScreen .mode-card, #menuScreen .mode-card * { animation: none !important; }
#menuScreen .mode-card::before, #menuScreen .mode-card::after { animation: none !important; }
#menuScreen .launch-directive { box-shadow: none; }

/* Desktop playfield fits below the measured HUD, including enlarged text.
   Detailed docks remain in normal flow; never clip the document to fake fit. */
/* Keep navigation/update notices available at the menu, not above active play. */
body:has(#gameScreen:not(.hidden)) .topbar,
body:has(#gameScreen:not(.hidden)) #updatePrompt { display: none !important; }
@media (min-width: 621px) {
  body:has(#gameScreen:not(.hidden)) .topbar { display: none; }
  #gameScreen:not(.hidden) { padding: 8px 0; }
  #gameScreen .game-hud { margin-bottom: 8px; }
  #gameScreen .game-shell {
    height: calc(100vh - var(--game-hud-height, 80px) - 24px);
    height: calc(100dvh - var(--game-hud-height, 80px) - 24px);
    min-height: 0;
  }
}

/* Mobile: the playfield precedes the full mission brief, without hiding it. */
@media (max-width: 620px) {
  #menuScreen .difficulty-selector { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px 15px; }
  #menuScreen .difficulty-selector select { flex-basis: auto; width: 100%; }
  #gameScreen #anchorButton { left: 12px; bottom: 8px; min-height: 44px; box-sizing: border-box; margin: 0; }
  #gameScreen > #simultaneityHud {
    position: relative; inset: auto; transform: none; width: 100%; max-width: 100%;
    max-height: none; box-sizing: border-box; margin: 8px 0; padding: 10px;
    background: #122139; border: 1px solid #aa8cc7; border-radius: 12px;
    opacity: 1; filter: none; pointer-events: auto;
  }
  #gameScreen:not(.show-tactical-details) > #simultaneityHud :is(#frameFormula, #frameRapidity, #frameInvariantFormula, .frame-worldlines, #frameReward) { display: none !important; }
  #gameScreen > #simultaneityHud :is(button, strong, small, b, span) {
    font-size: 16px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere;
  }
  #gameScreen > #simultaneityHud button { min-height: 44px; }
  #gameScreen > #simultaneityHud .frame-heading { position: static; transform: none; justify-content: space-between; white-space: normal; }
  #gameScreen:not(.show-tactical-details) > #simultaneityHud .frame-velocity-controls { grid-template-columns: 1fr 1fr; }
  #gameScreen > #simultaneityHud .frame-velocity-controls { justify-content: space-between; }
  #gameScreen:has(> #simultaneityHud:not(.hidden)) .game-shell { height: 300px; }
  #gameScreen .game-shell {
    height: clamp(300px, calc(100dvh - var(--game-hud-height, 180px) - 100px), 520px);
    min-height: 0;
  }
}

/* Short desktop windows: prioritize mode selection over account telemetry and
   repeated marketing copy. Keep document scrolling and readable text sizes. */
@media (min-width: 1000px) and (max-height: 800px) {
  body:has(#menuScreen:not(.hidden)) .topbar { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  body:has(#menuScreen:not(.hidden)) .topbar .pilot-profile { display: none; }
  #menuScreen { padding-top: 8px; }
  #menuScreen .hero-copy { padding-bottom: 0; }
  #menuScreen .hero-copy .eyebrow, #menuScreen .hero-copy .intro { display: none; }
  #menuScreen .hero-copy h1 { margin: 8px 0; }
  #menuScreen .mode-grid { margin: 12px auto; align-items: stretch; }
  #menuScreen .mode-card { padding: 16px; transform: none; }
  #menuScreen .mode-card .mode-visual { height: 64px; margin-bottom: 8px; }
  #menuScreen .mode-card > strong { margin: 8px 0; }
  #menuScreen .mode-card > small { margin: 8px 0; line-height: 1.5; }
  #menuScreen .mode-card .mode-card-stat { display: none; }
  #menuScreen .mode-card .launch { margin-top: 12px; min-height: 44px; }
  #menuScreen .menu-extras { margin: 12px 0; }
}

/* Phone landing: mode choice before duplicate telemetry. Archive and records
   remain available through the profile/details entry points. Never shrink text. */
@media (max-width: 620px) {
  #menuScreen .hero-copy { padding-bottom: 0; }
  #menuScreen .hero-copy :is(.eyebrow, .intro) { display: none; }
  #menuScreen .hero-copy h1 { margin: 12px 0; }
  #menuScreen .mode-grid { margin: 12px auto; }
  #menuScreen .mode-card { padding: 16px; }
  #menuScreen .mode-card .mode-visual { height: 64px; margin-bottom: 8px; }
  #menuScreen .mode-card > strong { margin: 8px 0; }
  #menuScreen .mode-card > small { margin: 8px 0; }
  #menuScreen .mode-card :is(.mode-card-stat, .archive-recommendation-badge, .archive-recommendation-detail) { display: none; }
  #menuScreen .mode-card .launch { margin-top: 12px; min-height: 44px; }
}

/* Comfortable science-fiction shell. Gameplay hazard colors remain semantic. */
html body { background: radial-gradient(ellipse at 15% 0%, #285469 0%, transparent 55%), radial-gradient(ellipse at 100% 35%, #343753 0%, transparent 60%), var(--bg); }
html .stars { opacity: .10; }
html .topbar { border-bottom-color: var(--line); }
html #menuScreen .mode-card { background: linear-gradient(150deg, var(--surface-raised), var(--panel)); border-color: var(--line); border-radius: 18px; box-shadow: 0 10px 28px rgba(5,18,30,.18); }
html #menuScreen .mode-card:hover { border-color: var(--cyan); box-shadow: 0 12px 30px rgba(5,18,30,.24); }
html #menuScreen .mode-card::after { opacity: .12; }
html #menuScreen .hero-copy h1 { text-shadow: none; }
html #menuScreen .hero-copy h1 em { color: var(--cyan); text-shadow: none; }
html .score-card, html .icon-button, html .toolbar-more > summary { background: var(--panel); border-color: var(--line); border-radius: 10px; }
html .score-card small { color: var(--muted); }
html dialog, html .overlay-panel { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 60px rgba(4,16,28,.38); }
html dialog::backdrop { background: rgba(10,24,39,.58); }
html dialog :is(input:not([type="range"]):not([type="checkbox"]), select, textarea) { background: #14243a; color: var(--text); border-color: var(--line); border-radius: 8px; }
/* Shared dialog copy must use the readable theme, not legacy dark labels.
   Keep error/success messages and disabled interaction semantics intact. */
html dialog :is(.share-block label, .share-divider, .vault-intro, .vault-grid small, .run-code-status:not(.error):not(.success)) { color: var(--muted); }
html dialog :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html dialog button.primary-button:not(.dialog-close) { background: var(--cyan); color: #031016; border-color: var(--cyan); }
html .classic-rail .boss-hud { background: var(--panel); }
html .classic-rail { scrollbar-color: #6d98af #182c40; }
html :is(button, summary, input, select, textarea, a):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Expanded compact instruments are document content, not cockpit overlays. */
/* Home flight deck: restrained luminous surfaces, without changing hazard colors. */
body:has(#menuScreen:not(.hidden)) {
  background: radial-gradient(ellipse at 12% 0%, rgba(32,138,169,.30), transparent 48%),
    radial-gradient(ellipse at 88% 30%, rgba(100,75,189,.23), transparent 48%), #101e33;
}
body:has(#menuScreen:not(.hidden)) .topbar { position: relative; z-index: 30; align-items: center; border-bottom: 1px solid rgba(145,205,230,.22); }
body:has(#menuScreen:not(.hidden)) .brand-mark { background: linear-gradient(135deg, rgba(90,226,241,.2), rgba(98,128,255,.08)); box-shadow: 0 0 28px rgba(80,209,241,.18), inset 0 0 16px rgba(80,209,241,.12); }
html #menuScreen .hero-copy h1 { letter-spacing: -.035em; text-shadow: 0 3px 24px rgba(81,167,230,.18); }
html #menuScreen .hero-copy h1 em { color: #9bedf3; text-shadow: 0 0 26px rgba(87,218,235,.18); }
html #menuScreen .mode-card { --card-glow: 83,226,216; position: relative; overflow: hidden; border: 1px solid rgba(var(--card-glow),.32); background: radial-gradient(ellipse at 90% 0%, rgba(var(--card-glow),.12), transparent 65%), linear-gradient(150deg, #233d54, #172a43); box-shadow: 0 18px 42px rgba(2,10,26,.24), inset 0 1px rgba(222,245,255,.1); }
html #menuScreen .mode-card.flight { --card-glow: 119,163,255; }
html #menuScreen .mode-card.relativity { --card-glow: 206,145,255; }
html #menuScreen .mode-card:hover { border-color: rgba(var(--card-glow),.85); box-shadow: 0 18px 44px rgba(2,10,26,.32), 0 0 25px rgba(var(--card-glow),.12); }
html #menuScreen .mode-card .mode-visual { border-radius: 10px; background-color: rgba(3,17,34,.25); box-shadow: inset 0 -1px rgba(var(--card-glow),.16); }
html #menuScreen .mode-card .launch { border-top: 1px solid rgba(var(--card-glow),.2); color: #e5f8ff; font-weight: 650; }
html #menuScreen .mode-card .recommended { background: #304e83; color: #e3efff; border-radius: 0 0 0 12px; padding: 8px 12px; }
html #menuScreen .mode-card > strong { letter-spacing: -.025em; }

.mobile-instrument-dock > :not(summary) { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 100%; height: auto; max-height: none; margin: 12px 0 0; box-sizing: border-box; opacity: 1; overflow-wrap: anywhere; }
.mobile-instrument-dock #flightHud { display: flex; flex-direction: column; gap: 12px; }
.mobile-instrument-dock #flightHud > * { position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important; width: 100%; max-width: 100%; height: auto; box-sizing: border-box; }
.mobile-instrument-dock #flightHud :is(.reticle, .pitch-ladder) { display: none; }
.mobile-instrument-dock #relativityHud { display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.mobile-instrument-dock #relativityHud > * { position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important; width: 100%; max-width: 100%; min-width: 0; height: auto; margin: 0; box-sizing: border-box; flex: 0 0 auto; overflow-wrap: anywhere; }
.mobile-instrument-dock .spacetime-metric-ribbon { display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-instrument-dock .minkowski-chart canvas { max-width: 100%; height: auto; }

/* The HUD observer includes this reserved row in the available canvas height. */
#immediateDanger { position: static; grid-column: 1 / -1; min-height: 5em; pointer-events: none; padding: 10px 14px; border: 2px solid #ff91a7; border-radius: 12px; background: #281624; color: #fff3f6; font: 600 16px/1.4 "Segoe UI", "Microsoft YaHei UI", sans-serif; box-sizing: border-box; overflow-wrap: anywhere; text-align: left; }
#immediateDanger.hidden { display: block !important; visibility: hidden; }
#immediateDanger strong { display: block; font: inherit; font-weight: 750; margin-bottom: 3px; }
#immediateDanger span { display: block; }
#immediateDanger #immediateDangerTitle, #immediateDanger #immediateDangerAction { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; letter-spacing: normal !important; }
#immediateDanger[data-tone="warning"] { background: #302712; border-color: #f6ce75; color: #fff7de; }
@media (max-width: 360px) {
  #gameScreen .game-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #gameScreen #backButton { order: -3; }
  #gameScreen .score-card:has(#score) { order: -2; }
  #gameScreen #pauseButton { order: -1; }
  #gameScreen .score-card:has(#modeName) { order: 1; grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; min-height: 0; padding: 3px 7px; }
  #gameScreen .score-card:has(#modeName) small { margin: 0; }
  #gameScreen .score-card:has(#modeName) b { white-space: normal; }
  #gameScreen #immediateDanger { order: 2; }
  #gameScreen :is(#score, #highScore) { letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}
@media (min-width: 361px) and (max-width: 430px) and (orientation: portrait) {
  #gameScreen .score-card:has(#modeName) {
    order: -1;
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 0;
    padding: 3px 7px;
  }
  #gameScreen .score-card:has(#modeName) small { margin: 0; }
}
/* Keep the full bilingual mode name visible on portrait phones. The card
   remains in its existing HUD row; only its text is allowed to wrap. */
@media (max-width: 620px) and (orientation: portrait) {
  #gameScreen .score-card:has(#modeName) b {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}
html[data-font-size="large"] #immediateDanger { font-size: 18px; }
html[data-font-size="xlarge"] #immediateDanger { font-size: 20px; }
@media(max-width: 600px) { #immediateDanger { min-height: 7.6em; padding: 8px 10px; } }

/* Short landscape uses horizontal space instead of crushing the playfield. */
@media (min-width: 621px) and (max-height: 500px) and (orientation: landscape) {
  #gameScreen:not(.hidden) { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; align-items: start; padding: 8px 0; }
  #gameScreen > .game-hud { grid-column: 1; grid-row: 1 / 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; max-height: calc(100dvh - 16px); overflow-y: auto; align-content: start; }
  #gameScreen > .game-hud .score-card { min-height: 44px; padding: 4px 8px; }
  #gameScreen > .game-hud > button { order: -2; min-height: 44px; padding: 5px 8px; }
  #gameScreen > .game-shell { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: calc(100dvh - 68px); min-height: 0; }
  #gameScreen > .game-hud > .tactical-details-toggle { grid-column: 1 / -1; margin: 0; }
  #gameScreen > .mobile-instrument-dock, #gameScreen > .desktop-brief-dock, #gameScreen > #simultaneityHud { grid-column: 1 / -1; }
  #gameScreen #immediateDanger { order: -1; min-height: 0; padding: 8px; }
}

/* Short result/pause panels keep recovery controls above long explanations. */
@media (max-height: 500px) {
  #overlay .overlay-panel { width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 12px; box-sizing: border-box; }
  #overlay .overlay-actions { order: -6; margin: 0 0 8px; gap: 6px; }
  #overlay .overlay-actions button { min-height: 44px; padding: 8px; }
  #overlay #overlayTitle { margin: 8px 0; }
}

/* Dialog dismissal must remain reachable after scrolling long content. */
html dialog:has(> .dialog-close) { padding-right: 72px; }
@media (max-width: 420px) {
  /* Keep the 44px sticky close rail, reclaim excessive desktop padding. */
  html dialog:has(> .dialog-close) { padding: 16px 60px 20px 16px; }
  .share-dialog .share-block, .share-dialog .share-output-actions { grid-template-columns: minmax(0, 1fr); }
  .share-dialog .share-block > * { min-width: 0; max-width: 100%; }
  .share-dialog .share-block select { min-width: 0; max-width: 100%; box-sizing: border-box; }
}
html[data-font-size] dialog > .dialog-close { position: sticky; display: block; top: 0; right: auto; z-index: 30; margin: 0 -44px 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #8acbd5; border-radius: 10px; background: #172c40; color: #eef7ff; font: 24px/1 "Segoe UI", sans-serif !important; }

/* r956: the arena owns the first screen, across all three play modes.
   Keep live accessible warnings, but remove the duplicated visual banner. */
html #gameScreen #immediateDanger {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.local-development-tools { margin: 12px 32px; color: #b7c9da; font: 16px/1.5 system-ui, sans-serif; }
.local-development-tools > summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px; box-sizing: border-box; }
body:has(#gameScreen:not(.hidden)) > .local-development-tools { display: none; }
@media (min-width: 1000px) {
  #gameScreen:not(.show-tactical-details) .classic-rail { width: 180px; padding: 10px; }
  #gameScreen:not(.show-tactical-details) .classic-rail-layout #canvasStack { inset: 0 196px 54px; }
  #gameScreen:not(.show-tactical-details) .classic-rail-layout .controls-hint { width: calc(100% - 24px); max-height: 44px; }
  #gameScreen:not(.show-tactical-details) .classic-rail-layout .controls-hint #specialHint { order: 0; flex-basis: auto; }
}
html #gameScreen .game-shell { border-color: rgba(128,217,246,.35); box-shadow: inset 0 1px rgba(184,232,255,.12); }
html #menuScreen .mode-card { background: radial-gradient(ellipse at 85% 0%, rgba(var(--card-glow),.22), transparent 60%), linear-gradient(145deg, #173951, #101b30); border-top-color: rgba(var(--card-glow),.72); }
html #menuScreen .mode-card .launch { color: #bbf6ff; }

/* One arena boundary: keep keyboard focus visible on the controls, not as
   a second rectangular wall around the entire canvas. */
#gameScreen #gameCanvas:focus { outline: none; }
#gameScreen .game-shell:has(#gameCanvas:focus-visible) .controls-hint {
  box-shadow: inset 0 -3px #8ce6ed;
  background-color: #163346;
  color: #eefaff;
}
/* Pause is a live hold, not a completed-flight report. */
#overlay:has(#runOutcome[data-mode="hold"]) .final-score,
#overlay:has(#runOutcome[data-mode="hold"]) .reward-row,
#overlay:has(#runOutcome[data-mode="hold"]) .run-review-details {
  display: none;
}
#overlay:has(#runOutcome[data-mode="hold"]) .overlay-panel {
  border-top: 3px solid #79e8ee;
  background: radial-gradient(ellipse at top right, #1c4855 0, transparent 65%), #101e30;
}
#overlay:has(#runOutcome[data-mode="hold"]) .pause-brief {
  border-left: 3px solid #79e8ee;
  background: #142d3b;
  text-align: left;
}
/* Shared flight-console surfaces; static decoration, native dialog behavior. */
body:not(:has(#gameScreen:not(.hidden))) > #updatePrompt {
  position: relative; left: auto; bottom: auto; transform: none;
  box-sizing: border-box; margin: 16px auto 24px;
  border-radius: 12px; box-shadow: 0 8px 24px #02081760;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
html dialog {
  background: radial-gradient(ellipse at 100% 0, #285b7940, transparent 48%), linear-gradient(155deg, #132c40, #0b1729 75%);
  border-color: #668ba5; border-top: 3px solid #8fe8ef;
  box-shadow: 0 24px 80px #020817b0, inset 0 1px #d3f9ff18;
}
html dialog > .eyebrow { color: #9bdbe6; letter-spacing: .16em; }
html dialog h2[data-dialog-title] {
  margin: 12px 0 24px; padding-bottom: 18px;
  border-bottom: 1px solid #53758a70; color: #effaff;
  letter-spacing: -.025em;
}
html #settingsDialog .settings-grid label {
  border-radius: 12px; border-color: #456780;
  background: linear-gradient(145deg, #1a3850, #11283c);
  box-shadow: inset 0 1px #d3f9ff0d;
}
html #settingsDialog .settings-grid label:focus-within { border-color: #94e8ee; }
html #settingsDialog #copyVersionButton {
  min-height: 44px; margin: 0 0 14px; padding: 8px 14px;
  border: 1px solid #698ea5; border-radius: 8px;
  background: #19394e; color: #dcf7ff; cursor: pointer;
}
html #settingsDialog .settings-grid label > span { color: #c2d7e6; gap: 12px; line-height: 1.5; }
html #settingsDialog .settings-grid label > span b { color: #9bf3e3; }
html #settingsDialog .settings-grid select { width: 100%; min-width: 0; background: #091b2d; border-color: #698ea5; }
html #settingsDialog .settings-preset,
html #settingsDialog .gamepad-map { border: 1px solid #456780; border-radius: 12px; padding: 18px; background: #091a2d80; }
html #helpDialog .help-grid > div { border-radius: 12px; border-color: #456780; background: linear-gradient(145deg, #1a3850, #102438); }
html #helpDialog .help-grid kbd { border-radius: 7px; border: 1px solid #81b5cf; border-bottom-width: 3px; background: #24475e; color: #d8fbff; box-shadow: 0 3px 0 #061422; }
html #helpDialog .help-grid strong { color: #edfaff; }
html #helpDialog .help-grid small { color: #bfd4e3; line-height: 1.6; }
html #helpDialog #classicLegend { border-left: 3px solid #e8c77b; padding: 14px 18px; border-radius: 0 10px 10px 0; background: #e8c77b0c; color: #e0e8ed; line-height: 1.8; }
/* Static arcade cover art: scoped to the home screen, no per-frame work. */
html #menuScreen .mode-card .mode-visual {
  display: block; height: 164px; margin: -4px -4px 16px;
  overflow: hidden; position: relative; border-radius: 12px;
  background: radial-gradient(ellipse at 60% 30%, rgba(var(--card-glow), .2), transparent 70%), #071320;
  border: 1px solid rgba(var(--card-glow), .2);
}
html #menuScreen .mode-visual > i,
html #menuScreen .mode-visual::before,
html #menuScreen .mode-visual::after { display: none; }
html #menuScreen .mode-poster { display: block; width: 100%; height: 100%; pointer-events: none; }
html #menuScreen .mode-card .recommended { z-index: 2; }
html #menuScreen .mode-card .card-number { z-index: 2; color: #b9d7e9; }
html #menuScreen .mode-card { border-radius: 18px; background: linear-gradient(165deg, #142b40, #091421 85%); }
html #menuScreen .mode-card.flight { border-color: #70b7ef; box-shadow: 0 12px 36px #030b1b80, inset 0 1px #c0e5ff40; }
html #menuScreen .mode-card > strong { color: #f0f8ff; }
html #menuScreen .mode-card > small { color: #b8ccdd; }
html #menuScreen .mode-card .launch { background: rgba(var(--card-glow), .1); border: 1px solid rgba(var(--card-glow), .3); border-radius: 9px; padding: 10px 14px; margin-top: 16px; }
html #menuScreen .mode-card:hover .launch,
html #menuScreen .mode-card:focus-visible .launch { background: rgba(var(--card-glow), .22); border-color: rgba(var(--card-glow), .8); }
html #menuScreen .hero-copy h1 { color: #f0f7ff; letter-spacing: -.045em; }
html #menuScreen .hero-copy h1 em { color: #94e9f1; font-weight: 500; }
@media (min-width: 1000px) and (max-height: 800px) {
  html #menuScreen .mode-card .mode-visual { height: 126px; margin-bottom: 10px; }
}
@media (max-width: 620px) {
  html #menuScreen .mode-card .mode-visual { height: 142px; }
}
.game-hud > .performance-report-button { grid-column: 1 / -1; min-height: 44px; white-space: normal; }
html #gameScreen .game-shell { border-color: transparent; box-shadow: none; }
html #gameScreen .classic-rail { border-color: transparent; }
/* Shared command strip: details belongs with menu/pause, not on a spare row.
   Keep type scales intact; save space in padding and card decoration instead. */
#gameScreen .game-hud > .tactical-details-toggle {
  margin: 0; min-height: 44px; padding: 6px 10px;
  border-radius: 10px; letter-spacing: 0; line-height: 1.3;
}
@media (min-width: 1000px) and (min-height: 501px) {
  #gameScreen .game-hud {
    grid-template-columns: 72px minmax(100px, 1fr) minmax(100px, 1fr) minmax(180px, 1.65fr) minmax(72px, .65fr) minmax(100px, 1fr) 88px 120px;
    gap: 6px; margin-bottom: 8px; padding: 0;
    background: rgba(8, 24, 42, .45); border-radius: 12px;
  }
  #gameScreen .game-hud > .score-card {
    min-height: 48px; padding: 4px 10px; border-radius: 0;
    border: 0; border-left: 1px solid var(--line); background: transparent;
  }
  #gameScreen .game-hud > .score-card small { margin-bottom: 2px; letter-spacing: .3px; }
  #gameScreen .game-hud > button { min-height: 48px; padding: 6px 8px; border-radius: 10px; letter-spacing: 0; }
}
/* Opt-in profiling must not take a second toolbar row on a wide desktop.
   Narrow layouts keep the full-width fallback; larger text may wrap in-row. */
@media (min-width: 1280px) and (min-height: 501px) {
  html #gameScreen .game-hud:has(> .performance-report-button) {
    grid-template-columns: 72px minmax(90px, 1fr) minmax(90px, 1fr) minmax(180px, 1.65fr) minmax(72px, .65fr) minmax(72px, .8fr) 88px 112px minmax(144px, 1.4fr);
  }
  html #gameScreen .game-hud > .performance-report-button {
    grid-column: auto;
  }
}
@media (forced-colors: active) {
  #gameScreen .game-shell:has(#gameCanvas:focus-visible) .controls-hint {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
}