:root { --son:#a6371f; --cham:#2e4a66; --good:#3d8a5a; --paper:#f5f4ec; --ink:#1f2a33; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #000; color: var(--ink); overflow: hidden; }

#stage { position: fixed; inset: 0; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#hud { position: absolute; top: env(safe-area-inset-top, 10px); left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 3; }
#hud > div { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #fff; background: rgba(31,42,51,.6); padding: 4px 8px; border-radius: 4px; }
#hud-tilt.ok { background: rgba(61,138,90,.85); }
#hud-tilt.warn { background: rgba(166,55,31,.85); }

#modes { position: absolute; bottom: calc(env(safe-area-inset-bottom, 12px) + 92px); left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 3; flex-wrap: wrap; padding: 0 8px; }
.mode { background: rgba(31,42,51,.6); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.mode.active { background: var(--son); border-color: var(--son); }

#shoot { position: absolute; bottom: calc(env(safe-area-inset-bottom, 12px) + 16px); left: 50%; transform: translateX(-50%); z-index: 4; width: 66px; height: 66px; border-radius: 50%; border: 4px solid #fff; background: rgba(166,55,31,.85); color: #fff; font-size: 26px; cursor: pointer; }

#startgate { position: absolute; inset: 0; z-index: 5; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 12px; }
#startgate h1 { margin: 0; }
#startgate p { max-width: 40ch; color: #444; margin: 0; }
.hint { font-size: 12px; color: #777 !important; }

.primary { background: var(--son); color: #fff; border: none; border-radius: 6px; padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }

#form { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--paper); border-top: 3px solid var(--son); max-height: 82%; display: flex; flex-direction: column; transform: translateY(calc(100% - 44px)); transition: transform .25s ease; }
#form.open { transform: translateY(0); }
#form-toggle { background: var(--son); color: #fff; border: none; padding: 12px; font-weight: 600; cursor: pointer; }
#form-body { padding: 14px 16px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#form label { display: flex; flex-direction: column; font-size: 13px; gap: 4px; color: #333; }
#form input, #form select { padding: 8px; border: 1px solid #ccc4ad; border-radius: 4px; font-size: 14px; }
.chk { flex-direction: row !important; align-items: center; gap: 8px !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.shot-chip { font-size: 12px; border: 1px solid #ccc4ad; border-radius: 999px; padding: 3px 9px; color: #888; }
.shot-chip.done { border-color: var(--good); color: var(--good); }
.result { font-size: 13px; padding: 8px 10px; border-radius: 4px; }
.result.ok { background: #e2efe6; color: #2c5b40; }
.result.no { background: #f4e2dc; color: #8a3520; }