html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
/* T13b: hidden tap zones must leave no trace: no tap highlight, selection, callout, scroll or zoom. */
html, body { touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
#cam { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Stock Samsung selfie preview box, measured from docs/reference/samsung-selfie-photo.jpg (1080x2340: top 179, height 1919). */
:root { --preview-top: 7.65%; --preview-height: 82%; }
#view, #debug { position: absolute; left: 0; width: 100%; top: var(--preview-top); height: var(--preview-height); }
#debug { pointer-events: none; }
/* Fake card face over the tracked card: above #view, below #ui/#debug/#hud (DOM order). Size, art and
   transform are set by app.js; hidden until the art is decoded and drawn and the tracker has the card. */
#fake { position: absolute; left: 0; top: var(--preview-top); transform-origin: 0 0; pointer-events: none;
  visibility: hidden; filter: url(#tint); }
#fx { position: absolute; } /* filter defs only: out of flow */
#hud { position: fixed; top: 0; left: 0; z-index: 1; padding: 4px 6px; font: 12px/1.3 monospace; color: #fff; background: rgba(0,0,0,.5); white-space: pre; pointer-events: none; }

/* T5: static look-alike of the stock selfie PHOTO screen. Every number below is reference px measured
   from docs/reference/samsung-selfie-photo.jpg (1080x2340): --x/--y = element centre, --d = box size.
   Decoration only (pointer-events: none, inherited) so hidden tap zones underneath still get taps. */
#ui { position: fixed; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none;
  font-family: "SamsungOne", "Samsung Sans", Roboto, "Helvetica Neue", Arial, sans-serif; }
#ui > * { position: absolute; box-sizing: border-box; left: calc(var(--x) / 1080 * 100%); top: calc(var(--y) / 2340 * 100%);
  width: calc(var(--d) / 1080 * 100vw); height: calc(var(--d) / 1080 * 100vw); transform: translate(-50%, -50%); }
#ui svg { display: block; overflow: visible; }
#ui svg:not([fill]) { fill: none; }
#ui div > svg { width: 100%; height: 100%; }
/* 3x3 grid over the preview: 3px lines at ~50% white (ref grid at x 360/720, y 820/1459). */
#ui > #grid { left: 0; top: var(--preview-top); width: 100%; height: var(--preview-height); transform: none; }
#grid path { stroke: rgba(255,255,255,.5); stroke-width: calc(3 / 1080 * 100vw); vector-effect: non-scaling-stroke; }
#i-flash   { --x: 803;   --y: 128;    --d: 50; }
#i-motion  { --x: 905;   --y: 128;    --d: 50; }
#i-effects { --x: 993.5; --y: 127.5;  --d: 50; }
/* Body colours solved from the reference against the preview behind them. */
#b-group  { --x: 482.5; --y: 1718.5; --d: 97;  border-radius: 50%; background: rgba(41,41,41,.75); }
#b-single { --x: 595.5; --y: 1718.5; --d: 84;  border-radius: 50%; background: rgba(0,0,0,.3); }
#b-quick  { --x: 971.5; --y: 1719.5; --d: 97;  border-radius: 50%; background: rgba(0,0,0,.3); }
#thumb    { --x: 174.5; --y: 1940.5; --d: 142; border-radius: 50%; object-fit: cover; }
#shutter  { --x: 540;   --y: 1940;   --d: 192; border-radius: 50%; background: #faf9f5; }
#flip     { --x: 904.5; --y: 1940.5; --d: 144; border-radius: 50%; background: rgba(0,0,0,.3); }
/* Mode strip: caps 2140-2166 (centre 2153; box centre +3 for line-box offset), PHOTO white bold, others grey (ref lum 252 / 114). */
#ui > span { --y: 2156; width: auto; height: auto; white-space: nowrap; line-height: 1;
  font-size: calc(37 / 1080 * 100vw); font-weight: 600; letter-spacing: -.02em; color: #727272; }
#m-portrait { --x: 316.5; }
#ui > #m-photo { --x: 539; font-weight: 700; color: #fcfcfc; }
#m-video { --x: 730; }
#m-more  { --x: 914; }
/* Fake 3-button nav bar (a fullscreen PWA hides the real one), ref lum 219. */
#n-recent { --x: 240.5; --y: 2259.5; --d: 52; }
#n-home   { --x: 542.5; --y: 2259.5; --d: 56; }
#n-back   { --x: 845.5; --y: 2259.5; --d: 56; }
/* T14b: settings panel, performer-only, plain and readable. Bottom-anchored and only as tall as its
   content, so the tracked card above stays in view while a change applies. Above everything; takes its own taps. */
#settings { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; padding: 12px 16px;
  background: #111; color: #fff; font: 16px/1.3 system-ui, sans-serif; }
#settings label { display: grid; grid-template-columns: 5.5em 1fr 3.5em; align-items: center; gap: 8px; margin-bottom: 10px; }
#settings input, #settings select { min-width: 0; margin: 0; font: inherit; }
#settings output { text-align: right; }
#settings button { font: inherit; padding: 8px 24px; }