/* Photo hunt: the projector stage and the phone's camera overlay.
   Sizes are viewport-relative because DISPLAY is read from the back of a room. */

.hunt-stage { display: flex; flex-direction: column; height: 100%; padding: 3vh 3vw; gap: 2vh; }
.hunt-stage-center { align-items: center; justify-content: center; text-align: center; }
.hunt-kicker { font-size: clamp(1rem, 2.6vw, 2rem); opacity: .8; margin: 0; }
.hunt-countdown { font-size: clamp(3rem, 18vw, 16rem); line-height: 1; margin: 0; }
/* Applies wherever a countdown lives — phone, CONTROL and projector — not just the
   projector's big clock, which is where this selector used to be scoped. */
.hunt-over { opacity: .5; }
.hunt-idle { font-size: clamp(1.5rem, 5vw, 4rem); opacity: .7; margin: 0; }
.hunt-categories { list-style: none; padding: 0; margin: 0; font-size: clamp(1rem, 2.2vw, 1.8rem);
                   opacity: .85; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
                   justify-content: center; }

/* The anonymous set. Grid rather than flex so every tile is the same size — an odd one out
   reads as "that one is special" from across a room. */
.hunt-grid { flex: 1 1 auto; display: grid; gap: 1.5vh 1.5vw; min-height: 0;
             grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr)); align-content: center; }
.hunt-grid-1 { grid-template-columns: minmax(0, 60vw); justify-content: center; }
.hunt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hunt-grid-3, .hunt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hunt-grid-many { grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr)); }

.hunt-shot { margin: 0; position: relative; min-height: 0; display: flex;
             flex-direction: column; align-items: center; }
.hunt-shot img { width: 100%; height: 100%; max-height: 62vh; object-fit: contain;
                 border-radius: .5rem; }
.hunt-shot figcaption { position: absolute; top: .5rem; left: .5rem;
                        background: rgba(0,0,0,.65); color: #fff; border-radius: .35rem;
                        padding: .1em .5em; font-size: clamp(1rem, 2.4vw, 2rem);
                        font-weight: 700; line-height: 1.2; }
/* The winner is announced by a ring, not by moving the tile — the room is looking at a
   position, and moving it loses everyone. */
.hunt-shot-won img { outline: .4vw solid #28a745; outline-offset: .2vw; }
.hunt-winner { margin: 0; text-align: center; font-size: clamp(1.2rem, 3vw, 2.4rem);
               color: #28a745; font-weight: 700; }
.hunt-empty { text-align: center; opacity: .6; font-size: clamp(1rem, 2.4vw, 2rem); }

/* The phone's camera. Edge-to-edge viewfinder, one big shutter under the thumb, and a
   review step — this is meant to feel like the camera app, not like a file input.

   100dvh, NOT 100vh: on mobile Safari and Chrome, 100vh is the tallest viewport (address bar
   hidden), so the bottom bar sits BELOW the fold until the user scrolls — the shutter is
   literally off-screen. dvh tracks the visible viewport. The vh line is the fallback for
   browsers without dvh, where the old behaviour is no worse than before.

   The Fullscreen API is deliberately unused: iOS Safari does not implement it on iPhone. */
body.hunt-cam-open { overflow: hidden; }

.hunt-cam { position: fixed; inset: 0; z-index: 1080; background: #000; color: #fff;
            display: flex; flex-direction: column;
            height: 100vh; height: 100dvh; }

.hunt-cam-top { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem;
                padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem; }
.hunt-cam-x { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1;
              padding: 0 .5rem; }
.hunt-cam-title { font-size: 1.05rem; font-weight: 600; }

.hunt-cam-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hunt-cam-view video, .hunt-cam-shot { width: 100%; height: 100%; object-fit: cover;
                                       display: block; }
/* The front camera must PREVIEW mirrored — that is what people expect of a selfie view —
   while the saved file is un-mirrored on the canvas. */
.hunt-cam-mirror-user video { transform: scaleX(-1); }

.hunt-cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0;
                  pointer-events: none; }
.hunt-cam-flashing .hunt-cam-flash { animation: hunt-flash .18s ease-out; }
@keyframes hunt-flash { from { opacity: .9; } to { opacity: 0; } }

.hunt-cam-msg { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0;
                text-align: center; font-size: .95rem;
                text-shadow: 0 1px 3px rgba(0,0,0,.8); }

.hunt-cam-bar { flex: 0 0 auto; display: flex; align-items: center;
                justify-content: space-between; gap: 1rem;
                padding: 1rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); }
.hunt-cam-side { width: 3rem; height: 3rem; flex: 0 0 auto; background: none; border: 0;
                 color: #fff; font-size: 1.6rem; line-height: 1; }
/* The classic ring-around-a-disc. 4.75rem so it lands under a thumb without aiming. */
.hunt-cam-shutter { width: 4.75rem; height: 4.75rem; border-radius: 50%; padding: 0;
                    background: #fff; border: .3rem solid rgba(255,255,255,.45);
                    box-shadow: 0 0 0 .18rem #000 inset; }
.hunt-cam-shutter:active { transform: scale(.93); }

.hunt-cam-review { justify-content: space-evenly; }
.hunt-cam-btn { flex: 1 1 0; padding: .85rem 1rem; border-radius: 2rem; font-size: 1rem;
                font-weight: 600; border: 1px solid rgba(255,255,255,.5);
                background: transparent; color: #fff; }
.hunt-cam-btn-go { background: #fff; color: #000; border-color: #fff; }