:root {
  --tilt-x: 0;
  --tilt-y: 0;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

#vis {
  position: fixed; inset: 0; width: 100%; height: 100%;
  touch-action: none; /* we own all gestures on the canvas */
  background: #000;
}

#hud {
  position: fixed; left: 8px; top: calc(8px + var(--safe-t));
  pointer-events: none; image-rendering: pixelated;
  background: rgba(0, 0, 0, .55); border: 1px solid #333;
}

.plate {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center; background: rgba(0, 0, 0, .82); cursor: pointer; z-index: 20;
}
.plate-title { font-size: clamp(28px, 8vw, 56px); letter-spacing: .08em; color: #8f8; text-shadow: 0 0 24px #4f4; }
.plate-sub { color: #aaa; }
.plate-warn { max-width: 34em; color: #fc6; font-size: 12px; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%);
  background: #1e1e2e; color: #fff; border: 1px solid #555; padding: 8px 12px; border-radius: 4px;
  display: flex; gap: 10px; align-items: center; z-index: 30; max-width: 90vw;
}
.toast button { text-decoration: underline; color: #9cf; }

/* Below 480px the chrome stacks; the canvas stays full-bleed underneath */
@media (max-width: 480px) {
  .chrome { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; }
}