/* Couch-Play-Controller (Issue #125): Instrumenten-Cockpit statt Arcade-Neon --
   gestufte Graphit-Flaechen aus den hub.css-Tokens, EIN warmer Akzent (Amber, wie
   eine Lederlenkrad-Naht) fuer aktive Bedienelemente. Kein zweiter, konkurrierender
   Akzent -- normale Buttons bleiben beim Hub-eigenen --hub-accent (Blau). */

:root {
  --cockpit-amber: #ff9f0a;
  --cockpit-amber-dim: color-mix(in srgb, var(--cockpit-amber) 55%, var(--hub-surface));
}

* { box-sizing: border-box; }

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

body {
  background: var(--hub-bg);
  color: var(--hub-text);
  font-family: var(--hub-font);
}

.controller-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

/* Im Querformat darf die Racing-Steuerung die volle Gehaeusebreite nutzen (Lenkrad
   links, Pedale rechts -- braucht mehr Breite als die 560px-Lesespalte). */
@media (orientation: landscape) {
  .controller-page:has(.controller-mount.active) {
    max-width: 900px;
  }
}

.controller-title {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.controller-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--hub-muted);
  font-size: 0.95rem;
}

.controller-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  padding: 20px;
  box-shadow: var(--hub-shadow-soft);
}

.controller-form label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hub-muted);
}

.controller-form__hint {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  /* --hub-faint faellt bei dieser Groesse unter 4.5:1 (gemessen ~4.03:1 im Dark-Theme
     gegen --hub-surface) -- --hub-muted ist hier die kontraststarke Wahl. */
  color: var(--hub-muted);
  margin-top: 2px;
}

.controller-form input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--hub-line-strong);
  border-radius: var(--hub-radius-sm);
  background: var(--hub-surface-soft);
  color: var(--hub-text);
  font: inherit;
  font-size: 1.1rem;
}

#roomCodeInput {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.controller-form input:focus-visible,
.controller-btn:focus-visible,
.wheel:focus-visible,
.racing-btn:focus-visible,
.buttons-btn:focus-visible {
  outline: 3px solid var(--hub-focus);
  outline-offset: 2px;
}

.controller-btn {
  min-height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: var(--hub-radius-sm);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  touch-action: manipulation;
}

.controller-btn--primary {
  background: var(--hub-accent-fill);
  color: var(--hub-on-accent);
}

.controller-btn--accent {
  background: var(--cockpit-amber);
  color: #1a1000; /* dunkle Schrift auf Amber -- weiss faellt unter 4.5:1 */
}

.controller-generic,
.controller-mount {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 20px;
}

.controller-generic.active,
.controller-mount.active {
  display: flex;
}

#valueSlider {
  width: 100%;
  height: 48px;
  touch-action: none;
}

#actionButton {
  flex: 1;
  font-size: 1.4rem;
}

/* --- Racing-Profil: Lenkrad + Pedale --- */

.racing-controls {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
  justify-content: center;
}

.wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  flex: 1;
}

.wheel {
  position: relative;
  width: clamp(200px, 60vw, 320px);
  height: clamp(200px, 60vw, 320px);
  border-radius: 50%;
  box-shadow: var(--hub-shadow);
  touch-action: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
}

.wheel:active { cursor: grabbing; }

.wheel__svg { display: block; width: 100%; height: 100%; overflow: visible; }

.wheel__hub-ring { stroke: var(--hub-line-strong); }
.wheel__hub-badge { stroke: var(--hub-line); }
/* Ziernaht entlang der Felgen-Mitte -- Leder-Detail statt nach aussen zeigender Zacken. */
.wheel__stitch { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.5; stroke-dasharray: 3 5; }
/* Flacher Metall-Balken statt duenner runder Linie -- wie beim Vorbild (Prototipo-Stil). */
.wheel__spoke { stroke: var(--hub-section-tint); stroke-width: 24; stroke-linecap: butt; }
.wheel__spoke-hole { fill: var(--hub-surface-soft); }
/* Kleiner Farbtupfer oben auf der Felge statt einer ganzen eingefaerbten Speiche --
   zeigt die Drehung auf einen Blick, ohne wie eine Lackierung/Speiche zu wirken. */
.wheel__marker { stroke: var(--cockpit-amber); stroke-width: 6; stroke-linecap: round; }

.racing-controls__pedals {
  display: flex;
  flex-direction: row;
  gap: 14px;
}

.racing-btn {
  flex: 1;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--hub-radius-sm);
  background: var(--hub-surface);
  color: var(--hub-text);
  border: 1px solid var(--hub-line-strong);
  touch-action: none;
  user-select: none;
}

.racing-btn i { font-size: 1.7rem; }

.racing-btn--gas { background: var(--cockpit-amber-dim); }
.racing-btn--brake { background: color-mix(in srgb, var(--hub-danger) 45%, var(--hub-surface)); }
.racing-btn:active { filter: brightness(1.15); }

/* Querformat, zweihaendig: Lenkrad nimmt die linke Haelfte, Gas/Bremse gestapelt
   rechts -- je eine Hand pro Seite, kein Hoch-/Runterfassen zwischen Lenkrad und
   Pedalen mehr noetig. */
@media (orientation: landscape) {
  .racing-controls {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }
  .wheel-wrap { flex: 1 1 56%; }
  .racing-controls__pedals {
    flex: 1 1 40%;
    flex-direction: column;
  }
  .racing-btn i { font-size: 2.1rem; }
}

/* --- Buttons-Profil: generische Tastenreihe --- */

.buttons-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex: 1;
  align-content: center;
  justify-content: center;
}

.buttons-btn {
  flex: 1 1 calc(50% - 14px);
  min-width: 100px;
  min-height: 84px;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: var(--hub-radius-sm);
  background: var(--hub-surface);
  color: var(--hub-text);
  border: 1px solid var(--hub-line-strong);
  touch-action: none;
  user-select: none;
}

.buttons-btn:active { background: var(--cockpit-amber-dim); filter: brightness(1.1); }

/* --- Joystick-Profil: grosse Flaeche, Stick entsteht unter dem Daumen --- */

.joystick-pad {
  position: relative;
  flex: 1;
  min-height: 260px;
  border-radius: var(--hub-radius);
  background: var(--hub-surface);
  border: 1px solid var(--hub-line-strong);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.joystick-pad:focus-visible { outline: 3px solid var(--hub-focus, var(--hub-accent)); outline-offset: 3px; }

.joystick-pad__hint {
  position: absolute;
  inset: auto 0 16px;
  text-align: center;
  color: var(--hub-muted);
  font-size: 0.95rem;
  pointer-events: none;
}

.joystick-pad__base {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--hub-line-strong);
  background: var(--hub-surface-soft);
  opacity: 0.55;
  pointer-events: none;
}

.joystick-pad.is-active .joystick-pad__base { opacity: 1; }

.joystick-pad__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cockpit-amber);
}

/* --- Verbindungshilfe & Trennen --- */

.controller-help {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--hub-radius-sm);
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  color: var(--hub-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.controller-help summary { cursor: pointer; color: var(--hub-text); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.controller-help ul { margin: 8px 0 0; padding-left: 1.2em; }

.controller-leave { align-self: flex-start; background: var(--hub-surface); color: var(--hub-text); border: 1px solid var(--hub-line-strong); }

@media (prefers-reduced-motion: reduce) {
  .wheel { transition: none; }
}