:root {
  --fg: #39ff6a;
  --dim: #1f8a3b;
  --bg: #000;
  --warn: #ff3b30;
  --panel: #111;
}
.color-green { --fg: #39ff6a; --dim: #1f8a3b; }
.color-white { --fg: #ffffff; --dim: #8a8a8a; }
.color-amber { --fg: #ffb000; --dim: #8a5f00; }
.color-cyan  { --fg: #3fe0ff; --dim: #1d7a8c; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Pin everything to the viewport so rotation and toolbar changes can't scroll or bounce the page */
html, body {
  margin: 0; width: 100%; height: 100%;
  position: fixed; inset: 0; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation; /* no double-tap zoom */
}

#app {
  position: fixed; inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: calc(env(safe-area-inset-top) + 14px) max(env(safe-area-inset-right), 12px)
           max(env(safe-area-inset-bottom), 8px) max(env(safe-area-inset-left), 12px);
  color: var(--fg);
  transition: transform .2s;
}
#app.hud-x  { transform: scaleX(-1); }
#app.hud-y  { transform: scaleY(-1); }
#app.hud-xy { transform: scale(-1, -1); }
/* Upside-down flips put the bottom edge under the notch: swap the safe-area padding */
#app.hud-y, #app.hud-xy {
  padding-top: max(env(safe-area-inset-bottom), 8px);
  padding-bottom: calc(env(safe-area-inset-top) + 14px);
}
/* Keep buttons readable when tapped in HUD mode (only the display needs mirroring) */
#app.hud-x .controls  { transform: scaleX(-1); }
#app.hud-y .controls  { transform: scaleY(-1); }
#app.hud-xy .controls { transform: scale(-1, -1); }

.status { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--fg); opacity: .85; }
.status .wake { margin-left: auto; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #444; }
.dot.good { background: #34c759; }
.dot.fair { background: #ffcc00; }
.dot.poor { background: #ff3b30; }

.speed-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0;
}
.speed {
  font-size: min(48vw, 62dvh);
  line-height: .9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.unit { font-size: min(6vw, 5dvh); color: var(--dim); margin-top: .2em; }
.over .speed { color: var(--warn); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }

.cam {
  position: absolute; top: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cam.hidden { display: none; }
.cam .sign {
  width: min(26vw, 22dvh); height: min(26vw, 22dvh); border-radius: 50%;
  background: #fff; border: min(3vw, 2.4dvh) solid var(--warn);
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 800; font-size: min(10vw, 9dvh); font-variant-numeric: tabular-nums;
}
.cam-dist { font-size: min(7vw, 6dvh); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cam.near .sign { animation: blink .6s steps(2) infinite; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0;
}
.stats.hidden { display: none; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat .label { font-size: 12px; color: var(--dim); }
.stat .value { font-size: clamp(20px, 6vw, 34px); font-variant-numeric: tabular-nums; font-weight: 600; }

.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.controls.hidden { visibility: hidden; }
button {
  font: inherit; font-size: 16px; padding: 12px 4px; white-space: nowrap;
  border-radius: 12px; border: 1px solid #333;
  background: var(--panel); color: #ddd;
}
button.primary { background: var(--fg); color: #000; border-color: transparent; font-weight: 700; }
button.danger { background: #3a0b0b; color: #ff8a80; border-color: #5a1a1a; }

@media (orientation: portrait) {
  .status { margin-top: 16px; }
}

/* Landscape: speed on the left, stats stacked on the right */
@media (orientation: landscape) {
  #app {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 16px;
  }
  .status { grid-column: 1 / -1; }
  .speed-box { grid-row: 2 / 4; }
  .speed { font-size: min(38vw, 72dvh); }
  .unit { font-size: 5dvh; }
  /* Leave room for the camera sign next to 3-digit speeds */
  .speed-box:has(.cam:not(.hidden)) .speed { font-size: min(30vw, 60dvh); }
  .stats { grid-template-columns: 1fr 1fr; align-content: center; gap: 16px 20px; margin: 0; }
  .controls { grid-template-columns: 1fr 1fr; }
  .stat .value { font-size: clamp(22px, 7dvh, 40px); }
}

dialog {
  background: #161616; color: #eee; border: 1px solid #333; border-radius: 16px;
  width: min(92vw, 420px); padding: 20px;
}
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h2 { margin: 0 0 12px; }
dialog form { display: flex; flex-direction: column; gap: 14px; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
dialog label.row { flex-direction: row; align-items: center; gap: 10px; }
dialog input[type=number], dialog select {
  font: inherit; font-size: 17px; padding: 10px; border-radius: 10px;
  background: #000; color: #fff; border: 1px solid #333;
}
dialog input[type=checkbox] { width: 22px; height: 22px; }
.hint { font-size: 13px; color: #999; line-height: 1.5; margin: 0; }