@font-face {
  font-family: 'Cascadia Mono';
  src: url('https://cdn.jsdelivr.net/gh/microsoft/cascadia-code@latest/fonts/otf/CascadiaMonoPL.otf') format('opentype');
  font-weight: 400 700;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #08090f;
  --bg2:    #0d0e15;
  --bg3:    #12131c;
  --border: rgba(255,255,255,0.07);
  --text:   #ebebee;
  --blue:   #1b83e4;
  --red:    #e44b1b;
  --green:  #22c55e;
  --font:   'Roboto', sans-serif;
  --mono:   'Cascadia Mono', 'Courier New', monospace;
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); overflow-x: hidden; }

/* ── NAV ── */
nav {
  height: 64px; display: flex; align-items: center;
  padding: 0 2rem; gap: 1.5rem;
  background: rgba(8,9,15,0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
nav img { height: 38px; filter: brightness(0) invert(1); }
.nav-logo-live { margin-right: auto; transition: opacity .2s; }
.nav-logo-live:hover { opacity: 0.7; }
.nav-flight { font-family: var(--mono); font-size: .78rem; color: #444; letter-spacing: .1em; }
.live-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(228,75,27,0.12); border: 1px solid rgba(228,75,27,0.3);
  padding: 5px 14px; border-radius: 2px;
  font-family: var(--mono); font-size: .78rem; color: var(--red);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.1s ease-in-out infinite; }
.ended-badge { background: rgba(100,100,100,0.12); border-color: rgba(100,100,100,0.25); color: #666; }

/* ── LAYOUT ── */
.page { padding: 1.5rem 2rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 1800px; margin: 0 auto; }
.top-row { display: grid; grid-template-columns: 1fr 420px; gap: 1.25rem; align-items: start; }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.charts-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ── CARDS ── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.card-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #666; }
.card-badge { font-family: var(--mono); font-size: .68rem; color: var(--blue); }
.card-body { padding: 1rem; }

/* ── TWITCH EMBED ── */
.twitch-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.twitch-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.twitch-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: #030408;
}
.twitch-placeholder svg { opacity: .15; }
.twitch-placeholder p { font-family: var(--mono); font-size: .78rem; color: #333; letter-spacing: .1em; }
.twitch-placeholder .channel { font-family: var(--mono); font-size: .85rem; color: var(--blue); }

/* ── TELEMETRY ── */
.telem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.telem-item {
  background: var(--bg3); border: 1px solid rgba(255,255,255,0.04); border-radius: 2px;
  padding: .8rem 1rem;
}
.telem-label { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: #444; margin-bottom: 4px; }
.telem-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; }
.telem-unit  { font-family: var(--mono); font-size: .75rem; color: #555; margin-left: 4px; }
.telem-delta { font-size: .7rem; color: var(--green); margin-top: 3px; }
.telem-delta.down { color: #f59e0b; }

.status-row { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.status-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem; background: var(--bg3); border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.04);
}
.status-name { font-size: .78rem; color: #666; }
.status-val { font-family: var(--mono); font-size: .75rem; display: flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.dot.warn { background: #f59e0b; }
.dot.off  { background: #333; }

/* ── CHARTS ── */
.chart-wrap { position: relative; height: 220px; }
.chart-wrap.tall { height: 280px; }

/* ── MAP ── */
.map-wrap { position: relative; height: 260px; background: #080a14; border-radius: 2px; overflow: hidden; }
#map-leaflet { width: 100%; height: 100%; }
#map-leaflet .leaflet-control-attribution { font-size: .6rem; opacity: .5; }

/* ── MISSION BAR ── */
.mission-bar {
  display: flex; align-items: center; gap: 2rem; padding: .9rem 1.25rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; flex-wrap: wrap;
}
.mb-item { text-align: center; }
.mb-val { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--blue); }
.mb-lbl { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: #444; margin-top: 2px; }
.sep { width: 1px; height: 36px; background: var(--border); }
.phase-badge {
  margin-left: auto; font-family: var(--mono); font-size: .72rem;
  background: rgba(27,131,228,.1); border: 1px solid rgba(27,131,228,.25);
  color: var(--blue); padding: 5px 14px; border-radius: 2px;
}

/* ── PHOTO ── */
.photo-row .card-body { padding: 0; }
.photo-card-body {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 1.5rem;
}
#live-photo {
  width: 368px; height: 376px;   /* 46×8 et 47×8 */
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 2px; background: var(--bg3);
}
.photo-info { font-family: var(--mono); font-size: .68rem; color: #444; }

/* ── ANIMATIONS ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .top-row { grid-template-columns: 1fr; }
  .charts-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  nav                   { padding: 0 1rem; gap: 0.75rem; }
  .nav-flight           { display: none; }
  .page                 { padding: 1rem 1rem 2rem; gap: 1rem; }
  .charts-row, .charts-bottom { grid-template-columns: 1fr; }
  .chart-wrap           { height: 180px; }
  .chart-wrap.tall      { height: 220px; }
  .map-wrap             { height: 200px; }
  .mission-bar          { gap: 1rem; padding: 0.75rem 1rem; }
  .sep                  { display: none; }
  .telem-value          { font-size: 1.2rem; }
  .card-body            { padding: 0.75rem; }
  #live-photo           { width: 100%; height: auto; max-width: 100%; }
}