:root { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; background: #000; color: #fff; font-family: system-ui, sans-serif; }

#cab { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* Kamera selfie i płótno muszą istnieć i działać, ale nie są widoczne. */
.offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.start {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; padding: 2rem;
  background: #10151c; text-align: center;
}
.start[hidden] { display: none; }
.start h1 { margin: 0; font-size: 1.5rem; }
.msg { margin: 0; max-width: 28rem; color: #ffb4a8; min-height: 1.2em; }
#go {
  font-size: 1.25rem; padding: 0.9rem 2.5rem; border: 0; border-radius: 0.6rem;
  background: #2d7ff9; color: #fff;
}

.banner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
  font-size: 1.6rem; font-weight: 700; background: rgba(200, 0, 0, 0.92);
}
.banner[hidden] { display: none; }
.banner.lost { background: rgba(90, 90, 90, 0.92); font-size: 1.1rem; font-weight: 600; }

body.alarm::before {
  content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: rgba(220, 0, 0, 0.45); animation: blink 0.8s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }