/* =========================================================================
   DUCK DECOY MK IV — Field Control Stylesheet
   Visual language: field instrument. References: Garmin Foretrex, Tactacam.
   Palette: matte black + blaze orange + amber + sage olive + heritage tan.
   ========================================================================= */

:root {
  /* Surfaces */
  --bg:        #0a0c0a;
  --bg-2:      #0c0f0c;
  --panel:     #13181a;
  --panel-2:   #181e20;
  --panel-3:   #1f2628;
  --border:    #252b27;
  --border-2:  #353d36;
  --hairline:  rgba(255,255,255,0.04);

  /* Foreground */
  --fg:        #e8e3d3;        /* warm off-white */
  --fg-dim:    #b5ad95;
  --muted:     #6e6b5d;
  --muted-2:   #9a9077;

  /* Accents */
  --blaze:     #ff6b1a;        /* THE hunter color — FREEZE, active duck */
  --blaze-hot: #ff8542;
  --blaze-dim: rgba(255,107,26,0.18);
  --amber:     #ffc857;        /* live telemetry values */
  --amber-dim: rgba(255,200,87,0.15);
  --sage:      #7d8b6a;        /* OK / neutral */
  --sage-dim:  rgba(125,139,106,0.18);
  --tan:       #a89a72;        /* chrome / heritage accent */
  --red:       #c4302b;        /* hard error (capsize lock) */
  --red-dim:   rgba(196,48,43,0.2);

  /* Layout */
  --r:    12px;
  --r-sm:  8px;
  --r-lg: 18px;
  --gap:  12px;
  --pad:  14px;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Subtle film grain — adds organic depth without imagery */
body {
  background-image:
    radial-gradient(ellipse at 30% -10%, rgba(255,107,26,0.025), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(125,139,106,0.025), transparent 50%);
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  min-height: 100vh;
}

.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* =========================================================================
   HEADER — brand + status rail
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px var(--pad) 10px;
  background:
    linear-gradient(180deg, #0e1310, #0a0c0a);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.brand-mark {
  width: 28px; height: 28px;
  color: var(--blaze);
  filter: drop-shadow(0 0 8px rgba(255,107,26,0.4));
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-title {
  font-weight: 800; font-size: 15px; letter-spacing: 0.14em;
  color: var(--fg);
  white-space: nowrap;
}
.brand-sub {
  font-size: 10px; letter-spacing: 0.18em; margin-top: 3px;
  color: var(--muted-2);
  font-family: var(--mono);
}

.topstatus {
  display: flex; gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topstat {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 28px;
}
.topstat .ts-icon { width: 13px; height: 13px; opacity: 0.9; }
.topstat .ts-label b { color: inherit; font-weight: 700; }
.topstat[data-state="ok"]   { color: var(--sage);  border-color: var(--sage-dim); }
.topstat[data-state="warn"] { color: var(--amber); border-color: var(--amber-dim); }
.topstat[data-state="bad"]  { color: #4a4540; }
.bat-fill { transition: width .4s, x .4s, fill .4s; }

/* =========================================================================
   MAIN
   ========================================================================= */
main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  padding-bottom: 80px;
}

/* =========================================================================
   GENERIC CARD
   ========================================================================= */
.card {
  background:
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--pad);
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--hairline),
    0 1px 0 #000;
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--muted-2);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

/* =========================================================================
   HERO — radar + readout
   ========================================================================= */
.hero {
  display: grid;
  grid-template-columns: minmax(180px, 42%) 1fr;
  gap: 16px;
  padding: 16px;
  align-items: center;
}
.radar-wrap {
  position: relative;
  aspect-ratio: 1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.radar { width: 100%; height: 100%; display: block; }
#radar-duck { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
#radar-fence { transition: r .6s ease; }

.hero-right {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}

/* State pill — current behavior badge */
.state-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  font-family: var(--mono);
  width: fit-content;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.state-pill .state-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 0 currentColor;
}
.state-pill[data-state="idle"]    { color: var(--sage); border-color: var(--sage-dim); }
.state-pill[data-state="idle"] .state-dot { background: var(--sage); }
.state-pill[data-state="paddle"], .state-pill[data-state="drift"] {
  color: var(--amber); border-color: var(--amber-dim);
}
.state-pill[data-state="paddle"] .state-dot,
.state-pill[data-state="drift"]  .state-dot { background: var(--amber); animation: pulse 1.8s ease-in-out infinite; }
.state-pill[data-state="return"]  { color: var(--blaze); border-color: var(--blaze-dim); }
.state-pill[data-state="return"]  .state-dot { background: var(--blaze); animation: pulse 1s ease-in-out infinite; }
.state-pill[data-state="dart"]    { color: var(--blaze); border-color: var(--blaze-dim); }
.state-pill[data-state="dart"]    .state-dot { background: var(--blaze-hot); animation: pulse .5s ease-in-out infinite; }
.state-pill[data-state="standby"] { color: var(--muted-2); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.55; }
}

/* Telemetry metrics grid */
.hero-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 4px;
}
.metric { display: flex; flex-direction: column; min-width: 0; }
.metric-val {
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.metric.primary .metric-val { font-size: 32px; color: var(--fg); }
.metric.small .metric-val { font-size: 18px; }
.metric-unit {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--muted-2);
  margin-top: 4px;
  font-family: var(--mono);
}
.metric-val.stale, .metric-val:empty::before { content: "—"; color: var(--muted); }

/* =========================================================================
   FREEZE BUTTON
   ========================================================================= */
.freeze-btn {
  display: flex; align-items: center; gap: 18px;
  width: 100%;
  min-height: 110px;
  padding: 20px 24px;
  background:
    linear-gradient(180deg, #1c2024, #14181a);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  color: var(--fg-dim);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 6px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.5);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.freeze-btn::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: calc(var(--r-lg) - 5px);
  border: 1px dashed rgba(168,154,114,0.18);
  pointer-events: none;
  transition: border-color .15s;
}
.freeze-glyph {
  flex-shrink: 0; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  transition: color .15s, transform .15s;
}
.freeze-glyph svg { width: 100%; height: 100%; }
.freeze-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.freeze-title {
  font-size: 30px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--fg-dim);
  line-height: 1;
}
.freeze-sub {
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted-2);
  font-family: var(--mono);
}

.freeze-btn.on {
  background:
    linear-gradient(180deg, #ff7a2c, #e85510);
  border-color: #ffaa70;
  color: #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 6px rgba(0,0,0,0.25),
    0 0 24px rgba(255,107,26,0.55),
    0 2px 8px rgba(0,0,0,0.5);
  animation: armed-pulse 1.4s ease-in-out infinite;
}
.freeze-btn.on::before { border-color: rgba(10,12,10,0.4); }
.freeze-btn.on .freeze-glyph { color: #0a0c0a; transform: scale(1.04); }
.freeze-btn.on .freeze-title { color: #0a0c0a; }
.freeze-btn.on .freeze-sub { color: rgba(10,12,10,0.7); }
.freeze-btn:active { transform: scale(0.995); }

@keyframes armed-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 6px rgba(0,0,0,0.25), 0 0 24px rgba(255,107,26,0.55), 0 2px 8px rgba(0,0,0,0.5); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 6px rgba(0,0,0,0.25), 0 0 36px rgba(255,107,26,0.85), 0 2px 8px rgba(0,0,0,0.5); }
}

/* =========================================================================
   ACTION ROW
   ========================================================================= */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.action-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px;
  padding: 10px 8px;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg-dim);
  font-family: var(--sans);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  box-shadow: inset 0 1px 0 var(--hairline), 0 1px 0 #000;
}
.action-btn .ab-icon {
  width: 18px; height: 18px;
  color: var(--muted-2);
  transition: color .12s;
}
.action-btn:active { transform: scale(0.97); }
.action-btn.accent { color: var(--amber); border-color: var(--amber-dim); }
.action-btn.accent .ab-icon { color: var(--amber); }
.action-btn.flash {
  background: var(--blaze);
  color: #0a0c0a;
  border-color: var(--blaze);
}
.action-btn.flash .ab-icon { color: #0a0c0a; }
.action-btn.ghost {
  background: transparent;
  color: var(--fg-dim);
  border-color: var(--border-2);
}

/* =========================================================================
   STATUS CHIPS
   ========================================================================= */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 0;
}
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  font-family: var(--mono);
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.chip.on { background: var(--sage-dim); color: var(--sage); border-color: var(--sage); }
.chip.on[data-k="freeze"]      { background: var(--blaze-dim); color: var(--blaze); border-color: var(--blaze); }
.chip.on[data-k="feed_burst"]  { background: var(--amber-dim); color: var(--amber); border-color: var(--amber); }
.chip.on[data-k="force_return"]{ background: var(--blaze-dim); color: var(--blaze); border-color: var(--blaze); }
.chip.on[data-k="caps_stop"]   { background: var(--amber-dim); color: var(--amber); border-color: var(--amber); }
.chip.on[data-k="caps_lock"]   {
  background: var(--red-dim); color: var(--red); border-color: var(--red);
  animation: alert-pulse 0.8s ease-in-out infinite;
}
@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--red); }
  50%      { box-shadow: 0 0 12px 0 var(--red-dim); }
}

/* =========================================================================
   SEGMENTED CONTROL — TELEOP / AUTONOMOUS
   ========================================================================= */
.seg-control {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 4px;
  gap: 4px;
  position: relative;
}
.seg {
  background: transparent;
  border: none;
  color: var(--muted-2);
  font-family: var(--sans);
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  padding: 12px 8px;
  border-radius: calc(var(--r) - 6px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.seg.active {
  background: var(--blaze);
  color: #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 12px rgba(255,107,26,0.35);
}
.seg:not(.active):active { background: rgba(255,255,255,0.04); }

/* =========================================================================
   INLINE TOGGLE (in card head)
   ========================================================================= */
.toggle-inline {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.toggle-inline > span:first-child { color: var(--muted-2); font-weight: 700; letter-spacing: 0.12em; font-size: 10px; }
.toggle-inline input { display: none; }
.tog-track {
  width: 38px; height: 22px;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  position: relative;
  transition: background .18s, border-color .18s;
}
.tog-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--muted-2);
  border-radius: 50%;
  transition: left .18s, background .18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.toggle-inline input:checked + .tog-track {
  background: var(--blaze-dim);
  border-color: var(--blaze);
}
.toggle-inline input:checked + .tog-track .tog-knob {
  left: 18px;
  background: var(--blaze);
}

/* =========================================================================
   SLIDERS
   ========================================================================= */
.slider { padding: 10px 0; }
.slider + .slider { border-top: 1px solid var(--border); }
.slider.tall { padding: 14px 0; }
.srow {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.sname {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--muted-2);
  font-family: var(--mono);
  text-transform: uppercase;
}
.sval {
  font-family: var(--mono); font-weight: 700;
  color: var(--amber);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.sval b { font-size: 17px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.sval i { font-style: normal; font-size: 10px; color: var(--muted-2); letter-spacing: 0.1em; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent;
  height: 40px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  background:
    linear-gradient(180deg, #0a0c0a, #161b18);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
input[type=range]::-moz-range-track {
  height: 6px;
  background: #161b18;
  border: 1px solid var(--border);
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -12px;
  background:
    radial-gradient(circle at 35% 30%, #ffb98a, var(--blaze) 55%, #c44f10 100%);
  border: 2px solid #0a0c0a;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--blaze-hot),
    0 0 8px rgba(255,107,26,0.45),
    0 2px 4px rgba(0,0,0,0.6);
}
input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px;
  background:
    radial-gradient(circle at 35% 30%, #ffb98a, var(--blaze) 55%, #c44f10 100%);
  border: 2px solid #0a0c0a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,107,26,0.4);
}
input[type=range]:focus { outline: none; }

/* Computed strip */
.computed-strip {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.cs-label {
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--muted-2);
  font-family: var(--mono);
}
.cs-val { display: inline-flex; align-items: baseline; gap: 4px; }
.cs-val b {
  font-family: var(--mono); font-size: 22px; font-weight: 800;
  color: var(--blaze);
  font-variant-numeric: tabular-nums;
}
.cs-val i {
  font-style: normal; font-size: 11px;
  color: var(--blaze); opacity: 0.7; letter-spacing: 0.1em;
}

/* =========================================================================
   TUNING (details)
   ========================================================================= */
details#tuning summary {
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--muted-2);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
}
details#tuning summary::-webkit-details-marker { display: none; }
details#tuning summary::after {
  content: "▾"; color: var(--muted); transition: transform .15s; font-size: 12px;
}
details#tuning[open] summary::after { transform: rotate(180deg); }
details#tuning[open] summary { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }

/* =========================================================================
   JOYSTICK
   ========================================================================= */
.joy-card { padding: 16px; }
.joy-row {
  display: flex; align-items: center; gap: 16px;
  justify-content: space-between;
}
.joy {
  position: relative;
  width: 168px; height: 168px;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 35%, #1f2624, #0c0f0c 75%);
  border: 2px solid var(--border-2);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.5);
  touch-action: none;
  overflow: hidden;
}
.joy-ring {
  position: absolute; inset: 30px;
  border: 1px dashed rgba(168,154,114,0.22);
  border-radius: 50%;
  pointer-events: none;
}
.joy-cross {
  position: absolute; inset: 12px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(168,154,114,0.15) calc(50% - 0.5px), rgba(168,154,114,0.15) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(168,154,114,0.15) calc(50% - 0.5px), rgba(168,154,114,0.15) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  border-radius: 50%;
}
.joy-stick {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin-left: -32px; margin-top: -32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffb98a, var(--blaze) 55%, #b04510 100%);
  border: 2px solid #0a0c0a;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.3),
    0 0 12px rgba(255,107,26,0.5),
    0 4px 8px rgba(0,0,0,0.5);
  transition: transform .08s ease-out;
}
.joy-readout {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
  min-width: 0;
}

/* =========================================================================
   LOCATION
   ========================================================================= */
.loc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  font-size: 13px;
}
.loc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.loc-row > span:first-child {
  font-size: 9px; letter-spacing: 0.18em; color: var(--muted-2);
  font-family: var(--mono); font-weight: 700;
}
.loc-row .mono {
  color: var(--amber); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.loc-row i {
  color: var(--muted-2); font-style: normal; font-size: 10px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px var(--pad) calc(24px + env(safe-area-inset-bottom));
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--muted);
  font-family: var(--mono);
}
.footer-brand { font-weight: 700; }
.sep { opacity: 0.4; }
footer a { color: var(--amber); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-in .12s ease-out;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 360px; width: 100%;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7);
  text-align: center;
}
.modal-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blaze-dim);
  border: 1px solid var(--blaze);
  border-radius: 50%;
  color: var(--blaze);
}
.modal-icon svg { width: 28px; height: 28px; }
.modal-card h2 {
  margin: 0 0 8px;
  font-size: 18px; font-weight: 900; letter-spacing: 0.14em;
  color: var(--fg);
  font-family: var(--sans);
}
.modal-card p {
  margin: 0 0 20px;
  font-size: 13px; line-height: 1.5;
  color: var(--fg-dim);
}
.modal-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* =========================================================================
   OFFLINE OVERLAY
   ========================================================================= */
.offline {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,12,10,0.85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.offline-card {
  text-align: center;
  position: relative;
}
.offline-pulse {
  width: 60px; height: 60px; margin: 0 auto 18px;
  background: var(--blaze-dim);
  border: 2px solid var(--blaze);
  border-radius: 50%;
  animation: offline-ring 1.6s ease-in-out infinite;
}
@keyframes offline-ring {
  0%, 100% { box-shadow: 0 0 0 0 var(--blaze-dim); transform: scale(1); }
  50%      { box-shadow: 0 0 0 18px transparent; transform: scale(1.04); }
}
.offline-title {
  font-size: 22px; font-weight: 900; letter-spacing: 0.22em;
  color: var(--blaze);
}
.offline-sub {
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--muted-2);
  font-family: var(--mono);
  margin-top: 8px;
}

/* =========================================================================
   LANDSCAPE TWEAKS
   ========================================================================= */
@media (orientation: landscape) and (max-height: 540px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: start;
  }
  .hero { grid-column: 1/-1; }
  .freeze-btn { grid-column: 1/-1; }
  .freeze-btn { min-height: 90px; padding: 14px 22px; }
  .freeze-title { font-size: 26px; }
  .freeze-glyph { width: 44px; height: 44px; }
  .action-row { grid-column: 1/-1; }
  .joy-card { grid-column: 1/-1; }
}

/* compact phones — drop the callsign sub-line, let status rail wrap full-width */
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .brand { flex: 1 1 100%; }              /* brand on its own row */
  .topstatus {
    flex: 1 1 100%;                       /* status rail on its own row */
    justify-content: space-between;
    gap: 4px;
  }
  .topstat { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 6px 4px; }
  .topstat .ts-label { font-size: 10px; }
}
@media (max-width: 360px) {
  .hero { grid-template-columns: 1fr; }
  .topstat .ts-label { font-size: 9px; letter-spacing: 0.02em; }
}