:root { --bg: #1b130c; --ink: #e9dcc0; --brass: #c79a4b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font: 13px/1.4 Georgia, "Times New Roman", serif; -webkit-text-size-adjust: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#device { position: absolute; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#device > img, #window, .hot { position: absolute; }
#device > img { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* positions: camera.js sets left/top/width/height from camlogic.js ART (one source) */
#window { overflow: hidden; background: #0d0a07; }
#window video, #window #splash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#window video { opacity: 0; transition: opacity .4s; }
#window.live video { opacity: 1; }
#window.live #splash { display: none; }
#window.mirror video { transform: scaleX(-1); }
#msg { position: absolute; left: 8%; right: 8%; bottom: 10%; padding: .6em .8em; background: rgba(233,220,192,.92); color: #2a1b0e;
  border: 1px solid #6b4b23; border-radius: 3px; font-size: clamp(11px, 1.9vh, 16px); text-align: center; }
#msg:empty { display: none; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .35s ease-out; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
#device > #needle { transform-origin: 50% 100%; transform: rotate(-42deg); transition: transform .12s linear; }
.hot { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.hot img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.hot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
#clip { border-radius: 0 0 8px 8px; }
#shutter.busy { filter: brightness(1.3); }
#hint { position: absolute; left: 16px; right: 16px; bottom: 6px; margin: 0; text-align: center; font-size: 12px; opacity: .8; }
#hint a { color: var(--brass); }
dialog { background: #2a1d10; color: var(--ink); border: 2px solid var(--brass); border-radius: 6px; padding: 12px;
  max-width: min(92vw, 640px); max-height: 92vh; }
dialog::backdrop { background: rgba(0,0,0,.7); }
#photoImg { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
dialog button { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 16px; background: #5a3d1c; color: var(--ink);
  border: 1px solid var(--brass); border-radius: 4px; cursor: pointer; }
#thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
#thumbs button { padding: 0; min-height: 0; background: none; border: 1px solid var(--brass); }
#thumbs img { display: block; width: 100%; }
#albumNote { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { #needle { transition: none; } #flash.go { animation: none; } }