/* ─────────────────────────────────────────────────────────────
   CommandBridge – LCARS-Stil (eigene Umsetzung, keine externen Schriften)
   ───────────────────────────────────────────────────────────── */

:root {
  --lc-black: #000;
  --lc-orange: #ff9900;
  --lc-peach: #ff9966;
  --lc-gold: #ffcc99;
  --lc-lavender: #cc99cc;
  --lc-violet: #9977aa;
  --lc-blue: #99aaff;
  --lc-red: #dd5555;
  --lc-green: #66cc99;
  --lc-dim: #3a2f26;
  --lc-text: #ffcc99;
  --lc-radius: 2rem;
  --lc-gap: 0.75rem;
  --lc-font: "Antonio", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--lc-black);
  color: var(--lc-text);
  font-family: var(--lc-font);
  font-stretch: condensed;
  letter-spacing: 0.04em;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 {
  margin: 0 0 var(--lc-gap);
  color: var(--lc-orange);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
}

a { color: var(--lc-blue); }

/* ── Rahmen ─────────────────────────────────────────────────── */

.lcars-frame {
  min-height: 100vh;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
           max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.lcars-top {
  display: grid;
  grid-template-columns: 6rem 1fr 2.5rem;
  gap: 0.4rem;
  height: 3rem;
  margin-bottom: 1rem;
}

.lcars-elbow {
  background: var(--lc-lavender);
  border-radius: var(--lc-radius) 0 0 0;
}

.lcars-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
  background: var(--lc-orange);
}

.lcars-title {
  color: var(--lc-black);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.lcars-cap {
  background: var(--lc-peach);
  border-radius: 0 999px 999px 0;
}

.lcars-main {
  border-left: 0.75rem solid var(--lc-lavender);
  border-radius: 0 0 0 var(--lc-radius);
  padding: 0 0 1.5rem 1rem;
  min-height: calc(100vh - 6rem);
}

.lcars-panel {
  max-width: 32rem;
  padding: 1rem 0;
  line-height: 1.5;
}

/* ── Schaltflächen ──────────────────────────────────────────── */

.lcars-button {
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--lc-peach);
  color: var(--lc-black);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.1s, transform 0.05s;
}

.lcars-button:hover:not(:disabled) { filter: brightness(1.15); }
.lcars-button:active:not(:disabled) { transform: scale(0.97); filter: brightness(1.3); }
.lcars-button:focus-visible { outline: 3px solid var(--lc-blue); outline-offset: 3px; }
.lcars-button:disabled { background: var(--lc-dim); color: #8a7a6a; cursor: not-allowed; }

/* ── PIN-Eingabe ────────────────────────────────────────────── */

.pin-panel form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-gap);
}

.pin-panel label {
  color: var(--lc-lavender);
  text-transform: uppercase;
}

.pin-panel input {
  width: 9rem;
  min-height: 3rem;
  padding: 0 1rem;
  border: 2px solid var(--lc-lavender);
  border-radius: 999px;
  background: var(--lc-black);
  color: var(--lc-gold);
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.pin-panel input:focus { outline: none; border-color: var(--lc-orange); }

.pin-message { color: var(--lc-red); font-size: 1.1rem; }

/* ── Pult ───────────────────────────────────────────────────── */

.pult-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-gap);
  margin-bottom: 1rem;
}

.pult-head h1 { margin: 0; }

.pult-status {
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  color: var(--lc-black);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.pult-status.online { background: var(--lc-green); }
.pult-status.offline { background: var(--lc-red); animation: lcars-blink 1.2s steps(2, start) infinite; }

@keyframes lcars-blink { to { visibility: hidden; } }

.pult-message { font-size: 1.15rem; color: var(--lc-gold); }
.pult-error { margin-top: 1rem; color: var(--lc-red); font-size: 1.1rem; }

.pult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--lc-gap);
}

.pult-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-left: 0.5rem solid var(--lc-violet);
  border-radius: 1rem 0 0 1rem;
  background: #0d0a08;
}

.pult-cell.cell-xypad { grid-column: span 2; }
.pult-cell.cell-button, .pult-cell.cell-toggle { justify-content: center; border-left-color: var(--lc-peach); }
.pult-cell.cell-fader { border-left-color: var(--lc-orange); }
.pult-cell.cell-knob { border-left-color: var(--lc-gold); }
.pult-cell.cell-xypad { border-left-color: var(--lc-blue); }

.pult-press { width: 100%; min-height: 4rem; }

.pult-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  background: var(--lc-dim);
  color: var(--lc-gold);
}

.pult-toggle.on { background: var(--lc-orange); color: var(--lc-black); }
.pult-toggle-state { opacity: 0.8; }

.pult-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--lc-lavender);
  text-transform: uppercase;
  font-size: 0.95rem;
}

.pult-label output { color: var(--lc-gold); font-variant-numeric: tabular-nums; }

/* Regler: großer Daumen fürs Bedienen mit dem Finger */
.pult-range {
  width: 100%;
  height: 3rem;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  touch-action: none;
  cursor: pointer;
}

.pult-range::-webkit-slider-runnable-track { height: 0.9rem; border-radius: 999px; background: var(--lc-dim); }
.pult-range::-moz-range-track { height: 0.9rem; border-radius: 999px; background: var(--lc-dim); }
.pult-range::-moz-range-progress { height: 0.9rem; border-radius: 999px; background: var(--lc-orange); }

.pult-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: -0.65rem;
  border-radius: 50%;
  background: var(--lc-orange);
  border: 3px solid var(--lc-black);
}

.pult-range::-moz-range-thumb {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--lc-orange);
  border: 3px solid var(--lc-black);
}

.pult-range:disabled { cursor: not-allowed; opacity: 0.4; }

/* Knob: Dreiviertelkreis als Anzeige */
.knob-dial { width: 6rem; height: 6rem; align-self: center; transform: rotate(135deg); }
.knob-dial circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.knob-dial .knob-track { stroke: var(--lc-dim); stroke-dasharray: 75 100; }
.knob-dial .knob-value { stroke: var(--lc-gold); transition: stroke-dasharray 0.08s; }

/* XY-Pad */
.pult-xy {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 60vh;
  border: 2px solid var(--lc-blue);
  border-radius: 1rem;
  background:
    linear-gradient(var(--lc-dim) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, var(--lc-dim) 1px, transparent 1px) 0 0 / 25% 25%,
    #05060d;
  touch-action: none;
  cursor: crosshair;
  overflow: hidden;
}

.pult-xy.disabled { opacity: 0.4; cursor: not-allowed; }

.xy-cross-h, .xy-cross-v { position: absolute; background: var(--lc-violet); opacity: 0.6; }
.xy-cross-h { left: 0; right: 0; top: 50%; height: 2px; }
.xy-cross-v { top: 0; bottom: 0; left: 50%; width: 2px; }

.xy-dot {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border-radius: 50%;
  background: var(--lc-blue);
  box-shadow: 0 0 1rem var(--lc-blue);
  pointer-events: none;
}

/* Joystick und Wippe: federnd, Punkt gleitet beim Loslassen zur Mitte zurück (beim Halten ohne Verzögerung) */
.pult-cell.cell-joystick { grid-column: span 2; border-left-color: var(--lc-red); }
.pult-cell.cell-rocker { grid-column: span 2; border-left-color: var(--lc-red); }

.pult-joystick, .pult-rocker {
  position: relative;
  width: 100%;
  border: 2px solid var(--lc-red);
  background: radial-gradient(circle at center, #2a1010 0%, #08040a 70%);
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}

.pult-joystick { aspect-ratio: 1; max-height: 60vh; border-radius: 50%; }
.pult-rocker { height: 5rem; border-radius: 999px; }
.pult-joystick.held, .pult-rocker.held { cursor: grabbing; border-color: var(--lc-orange); }
.pult-joystick.disabled, .pult-rocker.disabled { opacity: 0.4; cursor: not-allowed; }

.joy-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--lc-violet);
  border-radius: 50%;
  opacity: 0.6;
}

.pult-rocker .joy-center { width: 10%; height: 70%; border-radius: 999px; }

.pult-joystick .xy-dot, .pult-rocker .xy-dot {
  background: var(--lc-red);
  box-shadow: 0 0 1rem var(--lc-red);
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

.pult-joystick.held .xy-dot, .pult-rocker.held .xy-dot { transition: none; background: var(--lc-orange); }

@media (max-width: 30rem) {
  .lcars-top { grid-template-columns: 3.5rem 1fr 1.5rem; height: 2.5rem; }
  .lcars-title { font-size: 1.1rem; }
  .lcars-main { border-left-width: 0.5rem; padding-left: 0.6rem; }
  .pult-grid { grid-template-columns: repeat(2, 1fr); }
  .pult-cell.cell-xypad, .pult-cell.cell-fader, .pult-cell.cell-knob,
  .pult-cell.cell-joystick, .pult-cell.cell-rocker { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pult-status.offline { animation: none; }
  * { transition: none !important; }
}

/* ── Blazor-Fehleranzeige ───────────────────────────────────── */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--lc-red);
  color: var(--lc-black);
  font-weight: 700;
}

#blazor-error-ui .reload { color: var(--lc-black); margin-left: 1rem; }