* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font-family: system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; }
:root { --ctrl-h: calc(96px + env(safe-area-inset-bottom)); --top: env(safe-area-inset-top, 0px); --ratio: 0.6305; }
/* stage keeps the panel's portrait ratio and always fits the viewport above the controls */
#stage { position: fixed; top: var(--top); left: 50%; transform: translateX(-50%); width: min(100vw, calc((100vh - var(--ctrl-h) - var(--top)) * var(--ratio))); width: min(100vw, calc((100dvh - var(--ctrl-h) - var(--top)) * var(--ratio))); aspect-ratio: 768 / 1218; overflow: hidden; background: #111; touch-action: pan-y; }
/* video and frame share one box so the panel overlays the camera exactly */
#video { object-fit: cover; }
#video, #frame { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
#video.mirror { transform: scaleX(-1); }
#message { position: absolute; margin: 1em; padding: .6em 1em; background: rgba(0,0,0,.7); border-radius: 8px; text-align: center; }
#frame { object-fit: fill; }
#controls { position: fixed; left: 0; right: 0; bottom: 0; height: var(--ctrl-h); display: flex; justify-content: center; align-items: center; gap: 4vmin; padding: 0 12px env(safe-area-inset-bottom); background: #000; }
#controls button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.4); color: #fff; font-size: 20px; cursor: pointer; }
#controls #shutter { width: 72px; height: 72px; background: #d22; }
#controls button:focus-visible, #result a:focus-visible, #result button:focus-visible { outline: 3px solid #4af; }
#result { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(0,0,0,.92); }
#result[hidden], #message[hidden], #share[hidden] { display: none; }
#photo { max-width: 100%; max-height: 70dvh; max-height: 70vh; object-fit: contain; }
#result div { display: flex; gap: 12px; }
#result a, #result button { padding: .7em 1.4em; border-radius: 999px; border: 0; background: #fff; color: #000; text-decoration: none; font-size: 16px; cursor: pointer; }