* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* ── Graphic intro overlay ── */
#intro-overlay {
  position:fixed; inset:0; z-index:1000;
  background:#000; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:opacity 0.5s;
}
#intro-img {
  width:100%; height:100%; object-fit:contain;
  transition:opacity 0.2s;
}
#intro-skip {
  position:absolute; bottom:20px; right:20px;
  font-family:monospace; font-size:10px; letter-spacing:2px; color:#333;
}
/* iOS resolves height:100% against the large viewport, so the bottom control
   row ends up behind the browser toolbar. dvh tracks the *visible* viewport as
   the address bar shows and hides. The 100% line stays as the fallback. */
html,body { width:100%; height:100%; height:100dvh; background:#000; color:#fff; font-family:monospace; overflow:hidden; }


/* ── Auth screen ─────────────────────────────────────────── */
#auth {
  position:fixed; inset:0;
  display:none; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:12px;
  padding:clamp(24px,6vh,60px) 24px clamp(24px,4vh,40px);
  overflow-y:auto;
}
#auth-logo {
  width:min(70vw,220px); object-fit:contain; margin-bottom:12px;
}
/* All primary auth controls share the same width */
#auth-google-btn, #auth-email, #auth-pass, #auth-submit-btn, #auth-guest-btn {
  width:min(82vw,300px); box-sizing:border-box;
}
#auth-google-btn {
  padding:14px; background:transparent;
  border:1px solid #fff; color:#fff; font-family:monospace;
  font-size:13px; letter-spacing:2px; cursor:pointer; touch-action:manipulation;
}
#auth-google-btn:active { background:#1a1a1a; }
#auth-email, #auth-pass {
  padding:14px; background:#111; border:1px solid #2a2a2a; color:#fff;
  font-family:monospace; font-size:13px; outline:none; letter-spacing:1px;
}
#auth-email::placeholder, #auth-pass::placeholder { color:#444; letter-spacing:2px; font-size:11px; }
#auth-email.field-invalid, #auth-pass.field-invalid { border-color:#a44; }
#auth-email.field-valid,   #auth-pass.field-valid   { border-color:#3a5; }
#auth-submit-btn {
  padding:14px; background:transparent;
  border:1px solid #444; color:#aaa; font-family:monospace;
  font-size:13px; letter-spacing:2px; cursor:pointer; touch-action:manipulation;
}
#auth-submit-btn:active { background:#1a1a1a; }
#auth-error { color:#f44; font-size:12px; letter-spacing:1px; min-height:16px; text-align:center; }
#auth-status { color:#555; font-size:12px; letter-spacing:1px; min-height:16px; text-align:center; }
#auth-guest-btn {
  padding:14px; background:transparent;
  border:1px solid #2a2a2a; color:#555; font-family:monospace;
  font-size:13px; letter-spacing:2px; cursor:pointer; touch-action:manipulation;
}
#auth-guest-btn:active { background:#1a1a1a; color:#fff; }
#auth-what-btn {
  background:transparent; border:none; color:#444;
  font-family:monospace; font-size:11px; letter-spacing:2px;
  cursor:pointer; touch-action:manipulation; margin-top:4px;
}
#auth-what-btn:active { color:#888; }

/* ── Global fullscreen button — fixed top-right on all screens ── */
#fs-global-btn {
  position:fixed; top:8px; right:10px; z-index:950;
  background:rgba(0,0,0,0.55); border:1px solid #555; color:#ccc;
  font-family:monospace; font-size:13px; letter-spacing:1px;
  cursor:pointer; padding:8px 14px; touch-action:manipulation;
  border-radius:3px; min-width:64px; text-align:center;
}
#fs-global-btn:active { background:#1a1a1a; color:#fff; border-color:#fff; }
body.perf-active #fs-global-btn {
  /* Above the portrait notice: being held in fullscreen with the only exit
     covered by a full-bleed overlay is a trap. */
  z-index:990;
  top:0; right:0; height:28px; padding:0 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:0; border-width:0 0 1px 1px; font-size:12px;
}

/* ── "What is P.R.ISM" overlay (auth-page guide) ──────── */
#what-overlay {
  display:none; position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
  padding:16px;
}
#what-overlay.show { display:flex; }
#what-box {
  background:#0a0a0a; border:1px solid #444;
  padding:28px 22px; display:flex; flex-direction:column; gap:20px;
  width:75%; max-width:460px; max-height:90vh; overflow-y:auto;
}
#what-box h2 {
  font-size:16px; letter-spacing:4px; font-weight:400; color:#eee; text-align:center;
}
#what-ok {
  background:transparent; border:2px solid #fff; color:#fff;
  font-family:monospace; font-size:14px; letter-spacing:4px;
  padding:14px; cursor:pointer; touch-action:manipulation; margin-top:4px;
}
#what-ok:active { background:#1a1a1a; }

/* ── Aim overlay (shown at stream start) ───────────────── */
#aim-overlay {
  display:none; position:fixed; inset:0; z-index:700;
  background:#000; align-items:center; justify-content:center;
  transition:opacity 1s ease;
}
#aim-overlay.show { display:flex; }
#aim-img { width:100%; height:100%; object-fit:contain; }


/* ── Scanner screen ──────────────────────────────────────── */
#scanner {
  display:flex; flex-direction:column; align-items:center;
  /* iOS resolves height:100% against the large viewport, so the bottom control
     row ends up behind the browser toolbar. dvh tracks the *visible* viewport as
     the address bar shows and hides. The 100% line stays as the fallback. */
  justify-content:flex-start; height:100%; height:100dvh; gap:12px; padding:20px;
  overflow-y:auto;
}
#scanner-header {
  display:flex; width:100%; align-items:center; justify-content:flex-end;
  flex-shrink:0; position:relative;
  /* Reserve room for the fixed #fs-global-btn (top:8px;right:10px on every
     screen) so it doesn't sit on top of DIAG/ACCOUNT — same value #header
     already uses on the perf screen for the identical reason. */
  padding-right:54px;
}
#scanner-logo {
  position:absolute; left:50%; transform:translateX(-50%);
  height:46px; width:auto; object-fit:contain;
}
#account-btn {
  background:transparent; border:1px solid #444; color:#aaa;
  font-family:monospace; font-size:12px; letter-spacing:2px;
  padding:0 16px; min-height:44px; cursor:pointer; touch-action:manipulation;
  border-radius:3px;
}
#account-btn:active { background:#1a1a1a; color:#fff; }

/* ── Big fullscreen CTA — scanner screen only ────────────────────────────
   iOS has no requestFullscreen() for a non-video element, so on iOS this
   button's label/click swap to an "Add to Home Screen" instructions
   overlay instead — the only route to a chrome-free launch there. It has
   to read as the loudest thing on the screen, hence the shout-case label. */
#fs-big-btn {
  display:block; width:100%; max-width:320px; min-height:52px;
  background:transparent; border:2px solid #fff; color:#fff;
  font-family:monospace; font-size:13px; letter-spacing:1px;
  cursor:pointer; touch-action:manipulation;
}
#fs-big-btn:active { background:#fff; color:#000; }

/* ── "Add to Home Screen" overlay (iOS fullscreen instructions) ─────────── */
#a2hs-overlay {
  display:none; position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
  padding:16px;
}
#a2hs-overlay.show { display:flex; }
#a2hs-box {
  background:#0a0a0a; border:1px solid #444;
  padding:28px 22px; display:flex; flex-direction:column; gap:20px;
  width:75%; max-width:400px;
}
#a2hs-box h2 {
  font-size:16px; letter-spacing:4px; font-weight:400; color:#eee; text-align:center;
}
#a2hs-ok {
  background:transparent; border:2px solid #fff; color:#fff;
  font-family:monospace; font-size:16px; letter-spacing:4px;
  padding:16px; cursor:pointer; touch-action:manipulation;
}
#a2hs-ok:active { background:#1a1a1a; }

/* ── Account modal ───────────────────────────────────────── */
#account-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center; z-index:200;
}
#account-modal.show { display:flex; }
#account-box {
  background:#111; border:1px solid #2a2a2a; padding:20px 16px;
  display:flex; flex-direction:column; gap:12px; width:min(82vw,300px);
  max-height:90vh; overflow-y:auto;
}
#account-box h2 { font-size:14px; letter-spacing:3px; font-weight:300; color:#ccc; }
.account-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.account-label { font-size:12px; color:#888; letter-spacing:1px; }
#account-email { font-size:12px; color:#ccc; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
#account-plan { font-size:12px; color:#0f0; letter-spacing:1px; }
.account-divider { height:1px; background:#2a2a2a; }
.account-upgrade-btn {
  width:100%; padding:12px; background:transparent;
  border:1px solid #444; color:#ccc; font-family:monospace;
  font-size:12px; letter-spacing:1px; cursor:pointer; touch-action:manipulation;
  text-align:left;
}
.account-upgrade-btn:active { background:#1a1a1a; border-color:#fff; color:#fff; }
#account-signout-btn {
  background:transparent; border:1px solid #333; color:#f66;
  padding:10px; font-family:monospace; font-size:12px; letter-spacing:1px;
  cursor:pointer; touch-action:manipulation; width:100%;
}
#account-signout-btn:active { background:#1a0000; }
.account-upgrade-btn:disabled { color:#444; border-color:#222; cursor:default; }

#sessions-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center; z-index:200;
}
#sessions-modal.show { display:flex; }
#sessions-box {
  background:#111; border:1px solid #2a2a2a; padding:20px 16px;
  display:flex; flex-direction:column; gap:12px; width:min(90vw,420px); max-height:80vh;
  overflow-y:auto;
}
#sessions-box h2 { font-size:14px; letter-spacing:3px; font-weight:300; color:#ccc; }
#sessions-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px;
  overflow-y:auto; max-height:60vh;
}
.sessions-empty { color:#555; font-size:11px; letter-spacing:0.5px; padding:20px 0; text-align:center; grid-column:1/-1; }
.session-cell { position:relative; border:1px solid #2a2a2a; }
.session-cell img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.session-cell-btns { display:flex; }
.session-share-btn, .session-del-btn {
  flex:1; background:#0a0a0a; border:none; border-top:1px solid #2a2a2a;
  color:#888; font-family:monospace; font-size:8px; letter-spacing:0.5px;
  padding:5px 2px; cursor:pointer;
}
.session-share-btn.active { color:#3a5; }
.session-del-btn { color:#a44; border-left:1px solid #2a2a2a; }
#close-sessions {
  background:transparent; border:1px solid #444; color:#ccc;
  padding:10px; font-family:monospace; font-size:12px; letter-spacing:1px; cursor:pointer;
}
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#1a1a1a; border:1px solid #333; color:#fff;
  font-family:monospace; font-size:11px; letter-spacing:1px;
  padding:10px 20px; z-index:999; opacity:0; transition:opacity 0.3s;
  pointer-events:none; white-space:nowrap;
}
#toast.show { opacity:1; }

#close-account {
  background:transparent; border:1px solid #444; color:#888;
  padding:8px 14px; font-family:monospace; font-size:12px;
  cursor:pointer; align-self:flex-end; letter-spacing:1px;
  touch-action:manipulation;
}
#scanner p  { color:#555; font-size:12px; text-align:center; flex-shrink:0; }

#qr-wrap {
  --qr-side: min(70vw, 44dvh, 260px);
  position:relative; flex-shrink:0; flex-grow:0;
  width:var(--qr-side); height:var(--qr-side);
  min-width:var(--qr-side); min-height:var(--qr-side);
  aspect-ratio:1;
}
#qr-video { width:100%; height:100%; object-fit:cover; display:block; }
/* corner marks */
.corner {
  position:absolute; width:20px; height:20px;
  border-color:#fff; border-style:solid; pointer-events:none;
}
.corner.tl { top:6px; left:6px;   border-width:2px 0 0 2px; }
.corner.tr { top:6px; right:6px;  border-width:2px 2px 0 0; }
.corner.bl { bottom:6px; left:6px;  border-width:0 0 2px 2px; }
.corner.br { bottom:6px; right:6px; border-width:0 2px 2px 0; }

#scan-status { color:#555; font-size:11px; letter-spacing:1px; min-height:16px; }
#conn-mode-warning {
  width:100%; text-align:center; color:#f80; background:rgba(255,136,0,0.1);
  border:1px solid #a44; border-radius:4px; padding:5px 8px;
  font-size:9px; letter-spacing:0.5px;
}

#manual-wrap { display:none; flex-direction:column; align-items:center; gap:8px; width:100%; }
#manual-id {
  background:#111; border:1px solid #2a2a2a; color:#fff;
  padding:8px 12px; width:min(72vw,240px);
  font-family:monospace; font-size:11px; text-align:center; outline:none;
}
#connect-btn {
  background:transparent; border:1px solid #444; color:#fff;
  padding:8px 24px; font-family:monospace; font-size:11px;
  letter-spacing:2px; cursor:pointer; touch-action:manipulation;
}
#connect-btn:active { background:#1a1a1a; }
#fs-scanner-btn {
  background:transparent; border:1px solid #fff; color:#fff;
  padding:14px 32px; font-family:monospace; font-size:14px;
  letter-spacing:3px; cursor:pointer; touch-action:manipulation;
  margin-top:8px; flex-shrink:0;
}
#fs-scanner-btn:active { background:#1a1a1a; }

/* Debug panels — shared styles */
.dbg-panel {
  background:#0a0a0a; border:1px solid #222; padding:8px;
  font-size:9px; color:#666; font-family:monospace;
  line-height:1.8; text-align:left;
}
.dbg-header {
  display:flex; gap:6px; margin-bottom:4px;
}
.dbg-toggle, .dbg-copy {
  background:transparent; border:1px solid #333; color:#555;
  font-family:monospace; font-size:8px; padding:2px 8px;
  cursor:pointer; letter-spacing:1px; touch-action:manipulation;
}
.dbg-toggle:active, .dbg-copy:active { background:#1a1a1a; color:#fff; }
.dbg-body.hidden { display:none; }

/* Scanner debug panel sizing */
#scan-dbg { width:min(80vw,300px); }

/* ── Performance screen ──────────────────────────────────── */
/* iOS resolves height:100% against the large viewport, so the bottom control
   row ends up behind the browser toolbar. dvh tracks the *visible* viewport as
   the address bar shows and hides. The 100% line stays as the fallback. */
#perf { display:none; position:relative; width:100%; height:100%; height:100dvh; overflow:hidden; background:#000; }

/* Camera + shapes — full-screen background */
#cam-wrap { position:absolute; inset:0; z-index:0; touch-action:none; }
#cam-video { width:100%; height:100%; object-fit:cover; display:block; opacity:0.25; }
#mask-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; }
#shape-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* Header — minimal transparent overlay */
#header {
  position:absolute; top:0; left:0; right:0; height:28px; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 54px 0 8px; background:rgba(0,0,0,0.7);
}
#back-btn, #fs-btn {
  background:rgba(255,255,255,0.06); border:1px solid #666; color:#ddd;
  font-family:monospace; font-size:10px; letter-spacing:1px; cursor:pointer;
  padding:3px 9px; border-radius:3px; touch-action:manipulation;
}
#back-btn:active { background:#fff; color:#000; border-color:#fff; }
#header-title {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:4px; font-weight:100;
  pointer-events:none;
}
#header-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
#conn-dot { width:8px; height:8px; border-radius:50%; background:#f00; flex-shrink:0; transition:opacity 0.5s, width 0s 0.5s; }
#conn-dot.hidden { opacity:0; width:0; }
#conn-dot.connecting { background:#ff0; }
#conn-dot.connected  { background:#0f0; }
#conn-type {
  font-size:9px; letter-spacing:1px; color:#555;
  flex-shrink:0; transition: color 0.4s;
}
#conn-type.ct-local   { color:#0f0; }
#conn-type.ct-p2p     { color:#ff0; }
#conn-type.ct-turn    { color:#f80; }
#conn-type.ct-unknown { color:#777; }
#conn-kbps {
  font-size:9px; letter-spacing:1px; color:#555;
  flex-shrink:0; text-align:right;
}
#conn-quality {
  font-size:9px; letter-spacing:1px; color:#555;
  flex-shrink:0; min-width:32px; text-align:right;
  transition: color 0.4s;
}
#conn-quality.q-good { color:#0f0; }
#conn-quality.q-mid  { color:#ff0; }
#conn-quality.q-bad  { color:#f44; }

/* Controls — full screen below header */
#controls {
  position:absolute; top:28px; left:0; right:0; bottom:0; z-index:10;
  display:flex; flex-direction:column;
  transition: opacity 0.4s ease;
}

/* Alignment guidance overlay */
/* Shape and filter rows */
#shape-row, #filter-row {
  display:grid; grid-template-columns:repeat(9,1fr); flex-shrink:0;
  height: min(13vw, 58px);
}
.shape-btn, .filter-btn {
  background:transparent; border:none; padding:0;
  cursor:pointer; touch-action:manipulation; display:block; overflow:hidden;
}
.btn-icon { width:100%; height:100%; display:block; object-fit:contain; }
/* With multiple shapes on at once, this marks which one is currently
   selected (the one that moves when you drag) — outline instead of border
   so it doesn't shift the icon grid's layout. */
.shape-btn.on {
  outline:1px solid rgba(255,255,255,0.22); outline-offset:-1px;
  border-radius:3px; background:rgba(255,255,255,0.04);
}
.shape-btn.selected {
  outline:3px solid #fff; outline-offset:-3px; border-radius:3px;
  background:rgba(255,255,255,0.16);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.25);
}

/* Slider row — fills remaining space */
#slider-row {
  display:grid; grid-template-columns:repeat(9,1fr);
  flex:1; min-height:0; gap:1px;
}
.sl-wrap {
  position:relative; overflow:hidden; touch-action:none;
}
.sl-icon {
  position:absolute; left:0; width:100%; aspect-ratio:1/1; display:block;
  pointer-events:none; z-index:1;
}
.sl-track { position:absolute; inset:0; cursor:ns-resize; }
.sl-bg {
  position:absolute; left:50%; transform:translateX(-50%);
  width:1px; top:0; bottom:0; background:rgba(255,255,255,0.15);
}
.sl-fill {
  position:absolute; left:50%; transform:translateX(-50%);
  width:2px; bottom:0; background:rgba(255,255,255,0.7);
}
.sl-label { display:none; }


/* Text modal */
#text-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.88); align-items:center; justify-content:center; z-index:200;
}
#text-modal.show { display:flex; }
#text-modal-box {
  background:#111; border:1px solid #2a2a2a; padding:20px 16px;
  display:flex; flex-direction:column; gap:12px; width:min(82vw,300px);
}
#text-modal-box label { font-size:10px; color:#555; letter-spacing:2px; }
#text-input-el {
  background:#000; border:1px solid #444; color:#fff;
  padding:8px; font-family:monospace; font-size:18px;
  text-align:center; outline:none; width:100%;
}
.modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.modal-btn {
  background:transparent; border:1px solid #444; color:#888;
  padding:6px 16px; font-family:monospace; font-size:10px;
  cursor:pointer; touch-action:manipulation;
}
.modal-btn.primary { border-color:#fff; color:#fff; }

/* Settings modal */
#settings-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.88); align-items:center; justify-content:center; z-index:200;
}
#settings-modal.show { display:flex; }
#settings-box {
  background:#111; border:1px solid #2a2a2a; padding:20px 14px 16px;
  display:flex; flex-direction:column; gap:0;
  width:min(96vw,400px); max-height:92vh; overflow-y:auto; overflow-x:hidden;
  position:relative;
}
#settings-box h2 { font-size:15px; letter-spacing:3px; font-weight:300; color:#ccc; margin-bottom:12px; }
.setting-section {
  display:flex; flex-direction:column; gap:10px;
  border:1px solid #333; padding:12px 10px 14px;
  margin-bottom:10px;
}
.setting-section-label {
  font-size:11px; letter-spacing:2px; color:#888; margin-bottom:2px;
}
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:6px; }
/* Inline explanation under a settings group — only rendered when it has something
   to say, so an empty element takes no vertical space. */
.setting-hint { font-size:11px; line-height:1.45; color:#888; letter-spacing:0.5px; }
.setting-hint:empty { display:none; }
.setting-hint .warn { color:#e8a33d; }
.setting-label { font-size:14px; color:#ccc; flex-shrink:0; }
.setting-btns { display:flex; gap:4px; flex-wrap:wrap; }
.tog-btn {
  background:transparent; border:1px solid #555; color:#ccc;
  padding:8px 12px; font-family:monospace; font-size:12px;
  cursor:pointer; touch-action:manipulation;
}
.tog-btn:active { background:#1a1a1a; }
.tog-btn.active { border-color:#0f0; color:#0f0; }
#close-settings {
  position:absolute; top:10px; right:12px;
  background:transparent; border:none; color:#555;
  font-size:18px; line-height:1; cursor:pointer;
  touch-action:manipulation; padding:4px 6px;
}
#close-settings:active { color:#fff; }
#cam-select {
  background:#000; border:1px solid #333; color:#888;
  font-family:monospace; font-size:9px; padding:4px 6px;
  flex:1; min-width:0; outline:none;
}

/* Camera controls modal */
#cam-ctrl-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.9); align-items:center; justify-content:center; z-index:200;
  overflow-y:auto; padding:20px 0;
}
#cam-ctrl-modal.show { display:flex; }
#cam-ctrl-box {
  background:#111; border:1px solid #2a2a2a; padding:20px 16px;
  display:flex; flex-direction:column; gap:12px;
  width:min(92vw,340px); max-height:85vh; overflow-y:auto;
}
#cam-ctrl-box h2 { font-size:13px; letter-spacing:3px; font-weight:300; color:#aaa; flex-shrink:0; }
.cam-ctrl-row {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; min-height:32px;
}
.cam-ctrl-label { font-size:12px; color:#aaa; letter-spacing:1px; min-width:90px; }
.cam-slider-wrap { display:flex; align-items:center; gap:6px; flex:1; }
.cam-range { flex:1; accent-color:#0f0; height:3px; }
.cam-range-val { color:#ccc; font-size:11px; min-width:55px; text-align:right; font-family:monospace; }
.cam-no-support { color:#666; font-size:12px; line-height:1.6; }
#close-cam-ctrl {
  background:transparent; border:1px solid #444; color:#888;
  padding:8px; font-family:monospace; font-size:11px;
  cursor:pointer; align-self:flex-end; letter-spacing:1px;
  touch-action:manipulation; flex-shrink:0;
}

/* ── Shared content classes used inside what-box ─────────── */
.tips-section { display:flex; flex-direction:column; gap:10px; }
.tips-section-title { font-size:11px; letter-spacing:3px; color:#aaa; font-weight:400; }
#what-box p { font-size:15px; color:#ccc; line-height:1.7; letter-spacing:0.3px; margin:0; }
#what-box p strong { color:#fff; }
.tips-list { display:flex; flex-direction:column; gap:14px; }
.tip {
  display:flex; gap:14px; align-items:flex-start;
  font-size:15px; color:#ccc; line-height:1.6; letter-spacing:0.3px;
}
.tip strong { color:#fff; }
.tip-num {
  flex-shrink:0; width:28px; height:28px; border:1px solid #666;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#aaa; margin-top:1px;
}

/* ── What-overlay button row ─────────────────────────────── */
#what-btn-row { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
#what-ok {
  background:transparent; border:2px solid #fff; color:#fff;
  font-family:monospace; font-size:16px; letter-spacing:4px;
  padding:16px; cursor:pointer; touch-action:manipulation;
}
#what-ok:active { background:#1a1a1a; }
#what-no-more {
  background:transparent; border:1px solid #444; color:#666;
  font-family:monospace; font-size:13px; letter-spacing:2px;
  padding:12px; cursor:pointer; touch-action:manipulation; display:none;
}
#what-no-more:active { background:#1a1a1a; }

/* Widen what-box to match former tips-box */
#what-box { width:min(96vw,460px); }

/* ── Portrait notice — shown only while a performance is live ─────────── */
#rotate-overlay {
  display:none; position:fixed; inset:0; z-index:980;
  background:#000; color:#fff;
  flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:32px; text-align:center;
}
body.perf-active.is-portrait #rotate-overlay { display:flex; }
#rotate-icon {
  font-size:64px; line-height:1; color:#fff;
  animation:rotate-hint 2.4s ease-in-out infinite;
}
@keyframes rotate-hint {
  0%,55%,100% { transform:rotate(0deg); }
  75%,95%     { transform:rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { #rotate-icon { animation:none; } }
#rotate-title {
  font-family:monospace; font-size:15px; letter-spacing:4px; color:#fff;
}
#rotate-sub {
  font-family:monospace; font-size:11px; letter-spacing:1px; color:#777;
  max-width:280px; line-height:1.6;
}

/* ── Show-start intro: logo on black while the screen plays its video ─── */
/* z-index 970 sits below #rotate-overlay (980) and the fullscreen button
   (990) so both keep working during the intro. Toggled with `hidden`. */
#phone-intro {
  position:fixed; inset:0; z-index:970;
  background:#000;
  align-items:center; justify-content:center;
}
#phone-intro[hidden] { display:none; }
#phone-intro:not([hidden]) { display:flex; }
#phone-intro-logo { width:40vmin; height:40vmin; object-fit:contain; }
/* Fade the black and the logo out together over 1 s. The element stays in
   place afterwards so it keeps absorbing stray taps during the clean phase. */
#phone-intro.faded {
  background:transparent;
  transition:background 1s linear;
}
#phone-intro.faded #phone-intro-logo {
  opacity:0;
  transition:opacity 1s linear;
}
/* Clean camera phase: full-opacity feed, everything else out of the way. */
body.intro-clean #cam-video { opacity:1; }
body.intro-clean #header,
body.intro-clean #controls,
body.intro-clean #shape-svg,
body.intro-clean #mask-overlay { visibility:hidden; }

/* Guest account panel — one route out of it, nothing else. */
#account-guest-note {
  display:none; font-family:monospace; font-size:10px; line-height:1.7;
  letter-spacing:1px; color:#777; text-align:center;
}