/* Keep the picture ratio; the surrounding mount reveals the blurred camera. */
#app[data-view="camera"] #cam-frame-wrap { inset:50px 0 90px!important; background:transparent; overflow:hidden; }
.camera-viewport { position:absolute; overflow:hidden; background:#000; }
#cam-frame-wrap .camera-viewport { background:#080a0b; }
.camera-player-status { position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 24px); padding:10px 14px; border:1px solid #ffffff20; border-radius:8px; background:#101416ed; color:#e0e4e2; font:500 12px/1.5 var(--font); text-align:center; }
.camera-player-status[data-state="loading"] { pointer-events:none; }
.camera-player-status[data-state="loading"]::before { content:''; flex:none; width:5px; height:5px; border-radius:50%; background:#aac5c8; animation:camera-connecting 2s ease-in-out infinite; }
.camera-player-status button { flex:none; padding:6px 0; border:0; background:transparent; color:#fff; font:600 12px var(--font); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.camera-player-status button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@keyframes camera-connecting { 50% { opacity:.3; } }
@media(prefers-reduced-motion:reduce) { .camera-player-status::before { animation:none!important; } }
@media(max-width:680px) { .camera-player-status { bottom:8px; padding:7px 10px; font-size:11px; }.camera-player-status button { min-height:30px; } }
.camera-media { position:absolute; transform-origin:0 0; }
#cam-frame-wrap .camera-media>iframe,#cam-frame-wrap .camera-media>video,#cam-frame-wrap .camera-media>img,
#challenge-frame-wrap .camera-media>iframe,#challenge-frame-wrap .camera-media>video,#challenge-frame-wrap .camera-media>img { position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none!important; border:0; display:block; object-fit:contain!important; }
#app[data-view="camera"] #cam-frame-wrap .camera-media>video { object-fit:contain!important; }
#app[data-preview="true"] #cam-frame-wrap { background:transparent; }
.challenge-frame-wrap { position:relative; background:#000; }
.camera-frame-btn { position:absolute; top:58px; right:52px; z-index:31; width:26px; height:26px; padding:4px; border:1px solid #ffffff4d; border-radius:50%; color:#ffffff9c; background:#10121340; cursor:pointer; display:grid; place-items:center; }
.camera-frame-btn svg,#preview-frame-btn svg { width:14px; height:14px; }
.camera-frame-btn:hover,.camera-frame-btn[aria-expanded="true"],#preview-frame-btn[aria-expanded="true"] { color:#fff; border-color:#ffffffb0; }
#app[data-view="map"]>.camera-frame-btn,#app[data-view="map"] #camera-frame-btn { display:none; }
#frame-settings { position:fixed; top:91px; right:18px; z-index:42; width:min(290px,calc(100vw - 24px)); padding:18px; border:1px solid #ffffff26; border-radius:14px; background:#101213f5; backdrop-filter:blur(20px); box-shadow:0 18px 60px #0007; color:#e4e7e4; max-height:calc(100dvh - 120px); overflow:auto; }
.frame-heading { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:16px; }
.frame-heading h2 { font:normal 1.05rem var(--serif); }
#frame-close { border:0; background:none; color:#aaa; font-size:1.2rem; cursor:pointer; width:28px; height:28px; }
.frame-modes { display:flex; gap:4px; padding:3px; border:1px solid #ffffff26; border-radius:25px; }
.frame-modes button { flex:1; padding:9px 6px; background:transparent; border:0; border-radius:22px; color:#a8b0af; font:.67rem var(--font); cursor:pointer; }
.frame-modes button[aria-pressed="true"] { background:#ffffff16; color:#fff; }
.frame-modes button:disabled { opacity:.4; cursor:default; }
.frame-note { font:.64rem/1.5 var(--font); color:#a7afac; margin:12px 0; }
.frame-crop-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:6px 0; color:#c7ceca; font:.65rem var(--font); }
.frame-crop-row output { color:#b5c4bc; font-variant-numeric:tabular-nums; }
.frame-crop-row input { grid-column:1/-1; width:100%; height:24px; accent-color:#bdcfc5; margin:0; cursor:pointer; }
#frame-reset { margin-top:14px; width:100%; background:transparent; border:1px solid #ffffff30; padding:10px; border-radius:22px; font:.7rem var(--font); color:#c8ceca; cursor:pointer; }
#frame-settings button:focus-visible,#frame-settings input:focus-visible { outline:1px solid #d1e1d7; outline-offset:3px; }
.frame-memory { margin:12px 0 0; font:.58rem/1.4 var(--font); color:#929b95; }
@media(max-width:680px) { #app[data-view="camera"] #cam-frame-wrap { bottom:130px!important; } .camera-frame-btn { right:51px; width:28px; height:28px; } #frame-settings { top:100px; right:12px; max-height:calc(100dvh - 116px); } }