* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #000; }
body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}
.kitt {
  position: relative;
  width: min(100vw, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 512 / 1110));
  aspect-ratio: 512 / 1110;
  overflow: hidden;
  flex: none;
}
#kittVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.touch-layer { position: absolute; inset: 0; z-index: 20; }
.key {
  position: absolute; border: 0; background: transparent; padding: 0; margin: 0;
  border-radius: 18%; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.key:focus-visible { outline: 2px solid #f33; }
.key[data-label]::after {
  content: attr(data-label);
  position: absolute; left: 3%; right: 3%; top: 50%; transform: translateY(-50%);
  padding: 3px 1px; background: rgba(0,0,0,.88); color: #fff;
  text-align: center; font-size: clamp(6px, 1.6vw, 10px); font-weight: bold;
  line-height: 1.1; pointer-events: none;
}
.top { left: 33.4%; top: 10%; width: 33.2%; height: 7%; border-radius: 8px; }
.left, .right { width: 17%; height: 9%; }
.left { left: 5%; } .right { right: 5%; }
.l1, .r1 { top: 20%; }
.l2, .r2 { top: 31%; }
.l3, .r3 { top: 43%; }
.l4, .r4 { top: 55%; }
.l5, .r5 { top: 67%; }
.mode { left: 39%; width: 27%; height: 6%; border-radius: 8px; }
.m1 { top: 56%; } .m2 { top: 63%; } .m3 { top: 70%; }
.cavallo {
  left: 50%; top: 84%; transform: translate(-50%, -50%);
  width: 20%; aspect-ratio: 1; border-radius: 50%;
}
.kitt-scanner {
  position: absolute; left: 31%; top: 14%; width: 38%; height: 42%;
  z-index: 5; pointer-events: none;
}
.kitt-scanner img { width: 100%; height: 100%; object-fit: contain; }
.pursuit-doors {
  position: absolute; top: 6%; left: 0; right: 0; bottom: 0;
  z-index: 10; overflow: hidden; pointer-events: none;
}
.door {
  position: absolute; top: 0; width: 50%; height: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  transition: transform 1.2s ease;
}
.door-left { left: 0; background-image: url("KITT_PORTA_PURSUIT_SINISTRA.png"); }
.door-right { right: 0; background-image: url("KITT_PORTA_PURSUIT_DESTRA.png"); }
.pursuit-doors.open .door-left { transform: translateX(-102%); }
.pursuit-doors.open .door-right { transform: translateX(102%); }
.menu-comandi {
  position: absolute; left: 30%; top: 18%; width: 40%; height: auto;
  max-height: 45%; overflow-y: auto; z-index: 30;
  padding: 7px 5px; border: 1px solid #d00; border-radius: 5px;
  background: #080808; color: #f33; text-align: center;
  font-size: clamp(7px, 1.5vw, 11px);
}
[hidden] { display: none !important; }
.menu-comandi h2 { margin: 3px 0 7px; font-size: 1.15em; }
.setting-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0; }
.setting-row input[type="text"] { width: 55%; min-width: 0; color: #fff; background: #222; border: 1px solid #777; }
.setting-row input[type="range"] { width: 65%; min-width: 0; accent-color: #f33; }
.setting-row input[type="checkbox"] { accent-color: #f33; }
.language-row { display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.language-row button, #closeMenu { border: 0; background: none; color: #f33; font-size: 20px; cursor: pointer; }
#closeMenu { position: absolute; right: 2px; top: 0; line-height: 1; }
#voiceInfo { margin: 5px 0 1px; font-size: .8em; }
#kittStatus {
  position: fixed; bottom: calc(9px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  max-width: 95vw; color: #f32; text-align: center;
  font: 700 12px Arial, sans-serif; letter-spacing: 1px;
  text-shadow: 0 0 7px #f00; pointer-events: none; z-index: 50;
}