html, body {
  margin: 0;
  padding: 0;
  background: #030706;
  color: #c9e8e2;
  font-family: 'IBM Plex Mono', monospace;
  height: 100%;
}
a { color: var(--acc, #7dd3fc); }
a:hover { color: #eafffa; }
* { box-sizing: border-box; }
::selection { background: var(--acc45, rgba(125, 211, 252, .45)); color: #031110; }
[hidden] { display: none !important; }

@keyframes shSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shPing { 0% { transform: scale(.4); opacity: .9; } 80% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes shBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes shViewIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes shZoomOut { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: scale(1); } }
@keyframes shPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes shGlow { 0% { opacity: 1; } 10% { opacity: .9; } 100% { opacity: .28; } }
@keyframes shPowerUp {
  0% { opacity: 0; transform: scale(.92); filter: brightness(3) saturate(0); }
  35% { opacity: 1; }
  60% { filter: brightness(1.6) saturate(.6); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
}
@keyframes shDrift {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% + 4px), calc(-50% - 3px)); }
  50% { transform: translate(calc(-50% - 3px), calc(-50% + 4px)); }
  75% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)); }
}
@keyframes shDriftDot {
  0%, 100% { margin: 0; }
  30% { margin: -3px 0 0 3px; }
  65% { margin: 3px 0 0 -2px; }
}

input { font-family: 'IBM Plex Mono', monospace; }
* { scrollbar-width: thin; scrollbar-color: var(--acc45, rgba(125, 211, 252, .45)) rgba(3, 10, 8, .9); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(3, 10, 8, .9); border-left: 1px solid var(--acc12, rgba(125, 211, 252, .12)); }
::-webkit-scrollbar-thumb { background: var(--acc45, rgba(125, 211, 252, .45)); border: 2px solid rgba(3, 10, 8, .9); }
::-webkit-scrollbar-thumb:hover { background: var(--acc70, rgba(125, 211, 252, .7)); }
::-webkit-scrollbar-corner { background: rgba(3, 10, 8, .9); }

/* ============ APP SHELL ============ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 30%, #06110e 0%, #030706 65%);
  overflow: hidden;
  position: relative;
}
.main { display: flex; flex-direction: column; flex: 1; min-height: 100vh; }

/* ============ BOOT ============ */
.boot-overlay {
  position: fixed; inset: 0; z-index: 60; background: #030706;
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: pointer;
}
.boot-box { width: min(560px, 92vw); display: flex; flex-direction: column; gap: 6px; }
.boot-title {
  font-size: 12px; letter-spacing: .25em; color: var(--acc, #7dd3fc);
  text-shadow: 0 0 12px var(--acc45, rgba(125, 211, 252, .45)); margin-bottom: 10px;
}
.boot-line { font-size: 12.5px; line-height: 1.8; color: #9fd8cf; }
.boot-bar { height: 6px; border: 1px solid var(--acc45, rgba(125, 211, 252, .45)); margin-top: 14px; padding: 1px; }
.boot-bar-fill {
  height: 100%; background: var(--acc, #7dd3fc); box-shadow: 0 0 10px var(--acc70, rgba(125, 211, 252, .7));
  width: 0%; transition: width .18s linear;
}
.boot-skip { font-size: 10px; letter-spacing: .2em; color: #3f6f66; margin-top: 10px; animation: shBlink 1.1s step-end infinite; }

/* ============ HUD BAR ============ */
.hud-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 16px;
  border-bottom: 1px solid var(--acc25, rgba(125, 211, 252, .25)); background: rgba(3, 10, 8, .7);
  position: relative; z-index: 20;
}
.logo-btn {
  all: unset; cursor: pointer; font-family: 'Michroma', monospace; font-size: 13px; letter-spacing: .18em;
  color: var(--acc, #7dd3fc); text-shadow: 0 0 14px var(--acc45, rgba(125, 211, 252, .45));
}
.logo-version { color: #3f6f66; font-size: 10px; }
.desktop-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-btn {
  all: unset; cursor: pointer; font-size: 11px; letter-spacing: .16em; padding: 6px 12px;
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); color: #9fd8cf; background: transparent;
}
.nav-btn:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); color: #eafffa; }
.nav-btn.active { color: #031110; background: var(--acc, #7dd3fc); border-color: var(--acc, #7dd3fc); }
.hud-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.clock { font-size: 11px; letter-spacing: .12em; color: #5b8a81; }
.mute-btn {
  all: unset; cursor: pointer; font-size: 10px; letter-spacing: .16em; padding: 5px 10px;
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); color: var(--acc, #7dd3fc);
}
.mute-btn:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); }
.mute-btn.muted { color: #5b8a81; }
.menu-btn {
  all: unset; display: none; cursor: pointer; margin-left: auto; font-size: 11px; letter-spacing: .2em; padding: 10px 16px;
  border: 1px solid var(--acc45, rgba(125, 211, 252, .45)); color: var(--acc, #7dd3fc);
}
.menu-btn:active { background: var(--acc12, rgba(125, 211, 252, .12)); }

/* ============ MOBILE NAV DRAWER ============ */
.mobile-drawer {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px;
  background: rgba(3, 10, 8, .97); border-bottom: 1px solid var(--acc45, rgba(125, 211, 252, .45));
  position: relative; z-index: 30;
}
.drawer-btn {
  all: unset; cursor: pointer; font-size: 12px; letter-spacing: .22em; padding: 14px;
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); color: #9fd8cf; background: transparent; text-align: center;
}
.drawer-btn:active { background: var(--acc12, rgba(125, 211, 252, .12)); }
.drawer-btn.active { color: #031110; background: var(--acc, #7dd3fc); border-color: var(--acc, #7dd3fc); }

/* ============ VIEWS ============ */
.views { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.view { display: none; flex: 1; }
.view.active { display: flex; }
.eyebrow { font-size: 10px; letter-spacing: .3em; color: #5b8a81; }
.view-title {
  margin: 6px 0 0; font-family: 'Michroma', monospace; font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .14em; color: #eafffa; text-shadow: 0 0 20px var(--acc25, rgba(125, 211, 252, .25));
}
.view-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.view-inner {
  max-width: 1140px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 22px;
  padding: 28px clamp(14px, 4vw, 48px) 60px; flex: 1; overflow: auto; animation: shViewIn .45s ease both;
}
.fine-print { font-size: 10px; letter-spacing: .16em; color: #3f6f66; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  all: unset; cursor: pointer; font-size: 10px; letter-spacing: .18em; padding: 7px 14px;
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); color: #9fd8cf; background: transparent;
}
.chip:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); }
.chip.active { color: #031110; background: var(--acc, #7dd3fc); border-color: var(--acc, #7dd3fc); }

/* ============ RADAR (HOME) ============ */
.view-radar {
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 26px 16px 40px; animation: shViewIn .45s ease both;
}
.radar-heading { text-align: center; }
.radar-title {
  margin: 0; font-family: 'Michroma', monospace; font-size: clamp(20px, 4.2vw, 38px); letter-spacing: .22em;
  color: #eafffa; text-shadow: 0 0 24px var(--acc45, rgba(125, 211, 252, .45));
}
.radar-subtitle { margin: 10px 0 0; font-size: clamp(10px, 1.4vw, 12.5px); letter-spacing: .34em; color: var(--acc, #7dd3fc); }
.radar-disc {
  position: relative; width: min(78vw, 56vh, 540px); aspect-ratio: 1; flex: none; margin: 34px 0 30px;
  animation: shPowerUp 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
.radar-ring { position: absolute; border-radius: 50%; }
.radar-ring-outer {
  inset: 0; border: 1px solid var(--acc45, rgba(125, 211, 252, .45));
  box-shadow: 0 0 40px var(--acc12, rgba(125, 211, 252, .12)) inset, 0 0 60px var(--acc06, rgba(125, 211, 252, .06));
}
.radar-ring-mid { inset: 16.6%; border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); }
.radar-ring-inner { inset: 33.3%; border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); }
.radar-ring-dashed { inset: 41.6%; border: 1px dashed var(--acc12, rgba(125, 211, 252, .12)); }
.radar-crosshair { position: absolute; background: var(--acc12, rgba(125, 211, 252, .12)); }
.radar-crosshair-v { left: 50%; top: 2%; bottom: 2%; width: 1px; }
.radar-crosshair-h { top: 50%; left: 2%; right: 2%; height: 1px; }
.radar-ticks { position: absolute; inset: 0; }
.radar-tick { position: absolute; left: 50%; top: 0; height: 50%; width: 1px; transform-origin: bottom center; }
.radar-tick-mark { width: 1px; height: 7px; background: var(--acc45, rgba(125, 211, 252, .45)); }
.radar-bearing { position: absolute; font-size: 10px; color: #3f6f66; letter-spacing: .2em; }
.radar-bearing-000 { left: 50%; top: -32px; transform: translateX(-50%); }
.radar-bearing-090 { right: -42px; top: 50%; transform: translateY(-50%); }
.radar-bearing-180 { left: 50%; bottom: -32px; transform: translateX(-50%); }
.radar-bearing-270 { left: -42px; top: 50%; transform: translateY(-50%); }
.radar-sweep-mask { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 295deg, var(--acc12, rgba(125, 211, 252, .12)) 332deg, var(--acc45, rgba(125, 211, 252, .45)) 359.5deg, transparent 360deg);
  animation: shSweep var(--sweep, 5s) linear infinite;
}
.radar-contact {
  position: absolute; border-radius: 50%; background: var(--acc, #7dd3fc);
}
.radar-contact-a {
  left: 55%; top: 11%; width: 4px; height: 4px; box-shadow: 0 0 8px var(--acc70, rgba(125, 211, 252, .7));
  animation: shGlow var(--sweep, 5s) linear calc(var(--sweep, 5s) * -0.98) infinite, shDriftDot 9s ease-in-out infinite;
}
.radar-contact-b {
  left: 13%; top: 47%; width: 3px; height: 3px; box-shadow: 0 0 6px var(--acc70, rgba(125, 211, 252, .7));
  animation: shGlow var(--sweep, 5s) linear calc(var(--sweep, 5s) * -0.237) infinite, shDriftDot 12s ease-in-out -5s infinite;
}
.radar-blip {
  all: unset; cursor: pointer; position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; z-index: 5;
}
.radar-blip:hover { filter: brightness(1.5); }
.radar-blip-projects { left: 24%; top: 26%; animation: shDrift 11s ease-in-out infinite; }
.radar-blip-mission { left: 72%; top: 66%; animation: shDrift 13s ease-in-out -4s infinite; }
.radar-blip-combat { left: 74%; top: 28%; animation: shDrift 10s ease-in-out -7s infinite; }
.radar-blip-crew { left: 30%; top: 74%; animation: shDrift 12s ease-in-out -2s infinite; }
.blip-dot-wrap { position: relative; width: 14px; height: 14px; }
.blip-glow {
  position: absolute; inset: 0; border-radius: 50%; background: var(--acc, #7dd3fc);
  box-shadow: 0 0 14px var(--acc70, rgba(125, 211, 252, .7)); animation: shGlow var(--sweep, 5s) linear infinite;
}
.blip-ping {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--acc, #7dd3fc);
  animation: shPing var(--sweep, 5s) ease-out infinite;
}
.blip-delay-a .blip-glow, .blip-delay-a .blip-ping { animation-delay: calc(var(--sweep, 5s) * -0.131); }
.blip-delay-b .blip-glow, .blip-delay-b .blip-ping { animation-delay: calc(var(--sweep, 5s) * -0.65); }
.blip-delay-c .blip-glow, .blip-delay-c .blip-ping { animation-delay: calc(var(--sweep, 5s) * -0.868); }
.blip-delay-d .blip-glow, .blip-delay-d .blip-ping { animation-delay: calc(var(--sweep, 5s) * -0.389); }
.blip-label { font-size: 11px; letter-spacing: .22em; color: #eafffa; text-shadow: 0 0 10px var(--acc45, rgba(125, 211, 252, .45)); white-space: nowrap; }
.blip-sub { font-size: 9px; letter-spacing: .18em; color: #5b8a81; white-space: nowrap; }
.radar-core {
  all: unset; cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; z-index: 6;
}
.radar-core:hover { filter: brightness(1.4); }
.radar-core-ring {
  position: absolute; inset: 0; border: 1px solid var(--acc70, rgba(125, 211, 252, .7)); border-radius: 50%;
  background: rgba(3, 12, 10, .85); box-shadow: 0 0 26px var(--acc25, rgba(125, 211, 252, .25));
}
.radar-core-ping {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--acc, #7dd3fc);
  animation: shPing 3.4s ease-out 1.6s infinite;
}
.radar-core-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Michroma', monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--acc, #7dd3fc);
  text-shadow: 0 0 10px var(--acc70, rgba(125, 211, 252, .7));
}
.radar-core-sub {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .2em; color: #5b8a81; white-space: nowrap;
}
.radar-footer {
  margin: 0; font-size: 10.5px; letter-spacing: .28em; color: #3f6f66;
  animation: shBlink 1.6s step-end infinite; text-align: center;
}

/* ============ PROJECTS ============ */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.project-card {
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25));
  background: linear-gradient(160deg, rgba(6, 18, 15, .9), rgba(3, 8, 7, .9));
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; position: relative;
}
.project-card:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); box-shadow: 0 0 24px var(--acc12, rgba(125, 211, 252, .12)); }
.card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-code { font-size: 10px; letter-spacing: .22em; color: #5b8a81; }
.card-status { font-size: 9px; letter-spacing: .2em; padding: 3px 8px; border: 1px solid; }
.card-name {
  margin: 0; font-family: 'Michroma', monospace; font-size: 21px; letter-spacing: .12em;
  text-shadow: 0 0 14px var(--acc25, rgba(125, 211, 252, .25));
}
.card-tagline { font-size: 11px; letter-spacing: .14em; color: var(--acc, #7dd3fc); margin-top: 5px; }
.card-desc { margin: 0; font-size: 12px; line-height: 1.65; color: #8fb8b0; }
.meter-wrap { display: flex; flex-direction: column; gap: 5px; }
.meter-label-row { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .16em; color: #5b8a81; }
.meter-bar { height: 5px; border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); padding: 1px; }
.meter-bar-fill { height: 100%; box-shadow: 0 0 8px var(--acc45, rgba(125, 211, 252, .45)); }
.card-meta-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 9.5px; letter-spacing: .14em; color: #5b8a81; }
.card-meta-row span span { color: #c9e8e2; }
.card-cta {
  margin-top: 2px; font-size: 10.5px; letter-spacing: .2em; text-decoration: none;
  border: 1px solid var(--acc45, rgba(125, 211, 252, .45)); color: var(--acc, #7dd3fc); padding: 9px 12px; text-align: center;
}
.card-cta:hover { background: var(--acc12, rgba(125, 211, 252, .12)); color: #eafffa; }

/* ============ MISSION / GLOBE ============ */
.view-mission { align-items: center; overflow: auto; animation: shZoomOut .7s cubic-bezier(.22, 1, .36, 1) both; }
.mission-inner {
  max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px; padding: 20px clamp(14px, 4vw, 48px) 50px; min-height: 100%;
}
.globe-col { flex: 1.25; min-width: min(320px, 100%); position: relative; }
.globe-canvas { width: 100%; height: min(64vh, 540px); display: block; }
.globe-caption { position: absolute; left: 0; top: 8px; font-size: 9.5px; letter-spacing: .22em; color: #3f6f66; line-height: 2; }
.brief-col { flex: 1; min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 18px; }
.mission-title {
  margin: 0; font-family: 'Michroma', monospace; font-size: clamp(22px, 3.6vw, 34px); letter-spacing: .12em;
  line-height: 1.35; color: #eafffa; text-shadow: 0 0 22px var(--acc45, rgba(125, 211, 252, .45));
}
.mission-copy { margin: 0; font-size: 13px; line-height: 1.8; color: #9fd8cf; }
.objectives { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--acc25, rgba(125, 211, 252, .25)); padding-top: 16px; }
.objective-row { display: flex; gap: 12px; align-items: baseline; }
.objective-code { font-size: 10px; letter-spacing: .16em; color: var(--acc, #7dd3fc); flex: none; }
.objective-text { font-size: 12px; line-height: 1.6; color: #c9e8e2; }
.objective-status { margin-left: auto; font-size: 9px; letter-spacing: .16em; flex: none; }
.mission-status { font-size: 9.5px; letter-spacing: .2em; color: #3f6f66; }

/* ============ COMBAT RECORD ============ */
.theater-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.theater-card {
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25));
  background: linear-gradient(160deg, rgba(6, 18, 15, .9), rgba(3, 8, 7, .9));
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.theater-card:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); box-shadow: 0 0 24px var(--acc12, rgba(125, 211, 252, .12)); }
.theater-status { font-size: 9px; letter-spacing: .2em; padding: 3px 8px; border: 1px solid var(--acc45, rgba(125, 211, 252, .45)); color: var(--acc, #7dd3fc); }
.theater-name {
  margin: 0; font-family: 'Michroma', monospace; font-size: 22px; letter-spacing: .12em; color: #eafffa;
  text-shadow: 0 0 14px var(--acc25, rgba(125, 211, 252, .25));
}
.theater-label { font-size: 11px; letter-spacing: .14em; color: var(--acc, #7dd3fc); margin-top: 5px; }
.theater-rows { border: 1px solid var(--acc12, rgba(125, 211, 252, .12)); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.theater-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .1em; }
.theater-row-k { color: #5b8a81; }
.theater-row-v { color: #eafffa; text-align: right; }
.ribbon-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ribbon { font-size: 9px; letter-spacing: .16em; padding: 4px 10px; border: 1px solid; }
.theater-brief { margin: 0; font-size: 12px; line-height: 1.65; color: #8fb8b0; }

.sortie-log { border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); background: rgba(3, 10, 8, .9); }
.sortie-log-header {
  display: grid; grid-template-columns: 90px 1fr; gap: 0; border-bottom: 1px solid var(--acc12, rgba(125, 211, 252, .12));
  padding: 10px 16px; font-size: 9px; letter-spacing: .24em; color: #3f6f66;
}
.sortie-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 0; padding: 12px 16px;
  border-bottom: 1px solid var(--acc12, rgba(125, 211, 252, .12)); align-items: baseline;
}
.sortie-row:hover { background: var(--acc06, rgba(125, 211, 252, .06)); }
.sortie-ts { font-size: 10px; letter-spacing: .14em; color: #5b8a81; }
.sortie-detail-wrap { display: flex; flex-direction: column; gap: 3px; }
.sortie-tag-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sortie-tag { font-size: 9px; letter-spacing: .18em; padding: 2px 7px; border: 1px solid; }
.sortie-title { font-size: 12.5px; color: #eafffa; letter-spacing: .04em; }
.sortie-detail { font-size: 11px; line-height: 1.6; color: #8fb8b0; }

/* ============ CREW QUARTERS ============ */
.hobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 16px; }
.hobby-card {
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25));
  background: linear-gradient(160deg, rgba(6, 18, 15, .9), rgba(3, 8, 7, .9));
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.hobby-card:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); box-shadow: 0 0 24px var(--acc12, rgba(125, 211, 252, .12)); }
.hobby-top-row { display: flex; align-items: center; justify-content: space-between; }
.hobby-code { font-size: 10px; letter-spacing: .22em; color: #5b8a81; }
.hobby-state { font-size: 9px; letter-spacing: .18em; color: var(--acc, #7dd3fc); }
.hobby-title-row { display: flex; align-items: center; gap: 12px; }
.hobby-glyph { font-size: 22px; line-height: 1; filter: grayscale(1) brightness(1.6); }
.hobby-name { margin: 0; font-family: 'Michroma', monospace; font-size: 17px; letter-spacing: .12em; color: #eafffa; }
.hobby-desc { margin: 0; font-size: 11.5px; line-height: 1.65; color: #8fb8b0; }
.hobby-meter-fill { background: var(--acc, #7dd3fc); }

.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.gauge-card {
  border: 1px solid var(--acc25, rgba(125, 211, 252, .25)); background: rgba(3, 10, 8, .9);
  padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.gauge-card:hover { border-color: var(--acc70, rgba(125, 211, 252, .7)); }
.gauge-svg { width: 100%; max-width: 150px; }
.gauge-track { fill: none; stroke: var(--acc12, rgba(125, 211, 252, .12)); stroke-width: 6; stroke-linecap: round; }
.gauge-fill { fill: none; stroke: var(--acc, #7dd3fc); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--acc45, rgba(125, 211, 252, .45))); }
.gauge-needle { stroke: #eafffa; stroke-width: 1.6; }
.gauge-hub { fill: var(--acc, #7dd3fc); }
.gauge-text-wrap { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.gauge-name { font-family: 'Michroma', monospace; font-size: 13px; letter-spacing: .14em; color: #eafffa; }
.gauge-sub { font-size: 9px; letter-spacing: .18em; color: #5b8a81; }
.gauge-reading { font-size: 10px; letter-spacing: .14em; color: var(--acc, #7dd3fc); }

/* ============ COMMS / TERMINAL ============ */
.view-comms { align-items: flex-start; justify-content: center; overflow: auto; padding: 28px clamp(12px, 3vw, 40px) 60px; animation: shViewIn .45s ease both; }
.terminal {
  width: min(820px, 100%); border: 1px solid var(--acc45, rgba(125, 211, 252, .45)); background: rgba(3, 10, 8, .92);
  box-shadow: 0 0 40px var(--acc12, rgba(125, 211, 252, .12)); display: flex; flex-direction: column; margin: 0 auto;
}
.terminal-titlebar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--acc25, rgba(125, 211, 252, .25)); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-a { background: var(--acc, #7dd3fc); }
.dot-b { background: var(--acc45, rgba(125, 211, 252, .45)); }
.dot-c { background: var(--acc12, rgba(125, 211, 252, .12)); }
.terminal-titlebar-label { margin-left: auto; font-size: 10px; letter-spacing: .2em; color: #5b8a81; }
.terminal-lines { height: min(48vh, 420px); overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.terminal-line { font-size: 12.5px; line-height: 1.75; word-break: break-word; }
.terminal-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--acc25, rgba(125, 211, 252, .25)); }
.prompt-label { color: var(--acc, #7dd3fc); font-size: 13px; }
.terminal-input {
  flex: 1; background: transparent; border: none; outline: none; color: #eafffa; font-size: 13px;
  letter-spacing: .04em; caret-color: var(--acc, #7dd3fc); min-width: 60px; padding: 6px 0;
}
.mode-hint { font-size: 10px; color: #3f6f66; letter-spacing: .14em; }
.terminal-chips { padding: 0 18px 16px; }
.terminal-chips .chip { border-radius: 99px; }

/* ============ STATUS FOOTER ============ */
.status-footer {
  display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center; padding: 8px 16px;
  border-top: 1px solid var(--acc25, rgba(125, 211, 252, .25)); background: rgba(3, 10, 8, .7);
  font-size: 9px; letter-spacing: .2em; color: #3f6f66; position: relative; z-index: 20;
}
.status-nominal { color: var(--acc, #7dd3fc); }
.footer-desktop { display: flex; gap: 22px; }
.footer-mobile { display: none; align-items: center; gap: 22px; }
.footer-clock { color: #5b8a81; font-size: 10px; }
.footer-mute-btn { font-size: 9px; padding: 6px 10px; }
.footer-credit { margin-left: auto; }

/* ============ CRT OVERLAYS ============ */
.crt-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: var(--scan, 1);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0px, rgba(0, 0, 0, .18) 1px, transparent 1px, transparent 3px);
}
.crt-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 51;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 700px) {
  .desktop-nav, .hud-right { display: none; }
  .menu-btn { display: inline-block; }
  .footer-desktop { display: none; }
  .footer-mobile { display: flex; }
}