* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff;
  font-family: system-ui, sans-serif; overflow: hidden; }
[hidden] { display: none !important; }

#start { height: 100%; display: flex; flex-direction: column; justify-content: center;
  align-items: center; padding: 24px; text-align: center; gap: 12px; }
#start button { font-size: 1.4rem; padding: 14px 48px; border: 0; border-radius: 12px;
  background: #1e90ff; color: #fff; }

#ar { position: fixed; inset: 0; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#marker { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px;
  transform: translate(-50%, -50%); pointer-events: none; display: none; }

.arrow { position: absolute; top: 50%; font-size: 3rem; opacity: .85; display: none;
  transform: translateY(-50%); text-shadow: 0 0 6px #000; }
#arrowL { left: 8px; }
#arrowR { right: 8px; }

#info { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap;
  gap: 4px 14px; padding: calc(env(safe-area-inset-top) + 6px) 12px 6px;
  background: rgba(0,0,0,.55); font-size: .85rem; }
#msg { position: absolute; left: 12px; right: 60px; top: 70px; }
.err { color: #ff8080; }

#btnSet { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 40px);
  width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 1.4rem;
  background: rgba(0,0,0,.6); color: #fff; }

#settings { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
  background: rgba(0,0,0,.8); padding: 12px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px; }
#settings label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
#settings input[type=number] { font-size: 1rem; padding: 6px; }
#settings button { padding: 10px; border: 0; border-radius: 8px; background: #1e90ff; color: #fff; }