* { 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. */
/* No long-press save/copy popups on buttons, images or the logo art; text inputs and
   the artwork name stay selectable. */
button, img, svg, a, video, canvas { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
img, svg { -webkit-user-drag:none; }
html,body { width:100%; height:100%; height:100dvh; background:#000; color:#fff; font-family:monospace; overflow:hidden; touch-action:pan-x pan-y; }


/* ── Auth screen ─────────────────────────────────────────── */
/* The client's login art is a 1920x1080 frame; --sw is the width that frame is
   drawn at (fit inside the viewport), so the menu grid scales with it. The
   grid sits where the design puts it: x 9.43%, y 75.7%, 81.1% wide. */
#auth {
  position:fixed; inset:0; background:#000;
  display:none; align-items:center; justify-content:center;
}
#auth-stage {
  --sw:min(100vw, 177.78dvh);
  position:relative; width:var(--sw); height:calc(var(--sw) * 0.5625);
  font-family:Georgia,'Times New Roman',serif;
}
#auth-bg { position:absolute; inset:0; width:100%; height:100%; display:block; }
#auth-grid {
  position:absolute; left:9.43%; width:81.14%; top:75.74%; height:23.9%;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  background:rgba(40,40,40,0.78); border:1px solid rgba(255,255,255,0.14);
}
#auth-grid > * {
  min-width:0; min-height:0; width:100%; height:100%; margin:0;
  background:transparent; border:1px solid rgba(255,255,255,0.1); border-radius:0;
  color:#fff; font:inherit; font-size:calc(var(--sw) * 0.0235);
  letter-spacing:0.02em; text-transform:uppercase; text-align:center;
  padding:0 2%; outline:none; cursor:pointer; touch-action:manipulation;
}
#auth-grid button:active { background:rgba(255,255,255,0.14); }
#auth-grid button:disabled { opacity:0.5; }
#auth-grid input { cursor:text; text-transform:none; letter-spacing:0.04em; }
#auth-grid input::placeholder { color:#9a9a9a; text-transform:uppercase; opacity:1; }
#auth-grid input:focus { background:rgba(255,255,255,0.1); }
#auth-email.field-invalid, #auth-pass.field-invalid { border-color:#c55; }
#auth-email.field-valid,   #auth-pass.field-valid   { border-color:#4a6; }
#auth-submit-btn { grid-column:1; grid-row:1; }
#auth-what-btn   { grid-column:1; grid-row:2; }
#auth-google-btn, #auth-email { grid-column:2; grid-row:1; }
#auth-guest-btn,  #auth-pass  { grid-column:2; grid-row:2; }
/* Menu state shows GOOGLE/GUEST; credentials state swaps them for the fields. */
#auth-email, #auth-pass { display:none; }
#auth.auth-creds #auth-email, #auth.auth-creds #auth-pass { display:block; }
#auth.auth-creds #auth-google-btn, #auth.auth-creds #auth-guest-btn { display:none; }
#auth-back-btn {
  position:absolute; left:2%; top:calc(75.74% - 3.6%); height:3.2%; min-height:28px;
  background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.3); color:#ddd;
  font:inherit; font-size:calc(var(--sw) * 0.014); letter-spacing:0.1em;
  padding:0 14px; cursor:pointer; touch-action:manipulation;
}
#auth-back-btn[hidden] { display:none; }
#auth-forgot-btn {
  position:absolute; right:2%; top:calc(75.74% - 3.6%); height:3.2%; min-height:28px;
  background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.3); color:#ddd;
  font:inherit; font-size:calc(var(--sw) * 0.014); letter-spacing:0.1em;
  padding:0 14px; cursor:pointer; touch-action:manipulation;
}
#auth-forgot-btn[hidden] { display:none; }
#auth-error, #auth-status {
  position:absolute; left:0; right:0; text-align:center; pointer-events:none;
  font-family:monospace; font-size:12px; letter-spacing:1px;
}
#auth-error  { bottom:calc(24.3% + 22px); color:#f66; text-shadow:0 0 4px #000, 0 0 8px #000; }
#auth-status { bottom:calc(24.3% + 4px);  color:#aaa; text-shadow:0 0 4px #000, 0 0 8px #000; }
#auth-error:empty, #auth-status:empty { display:none; }
#auth-legal {
  position:fixed; top:max(4px, env(safe-area-inset-top,0px)); left:0; right:0;
  text-align:center; z-index:2; font-family:monospace; font-size:9px; letter-spacing:1px;
}
#auth-legal a { color:#777; text-decoration:underline; }
#auth-legal span { color:#555; }
/* Portrait: the 16:9 art would shrink the menu below tap size, so the grid
   leaves the art's coordinates and pins to the bottom of the screen. */
@media (orientation:portrait) {
  #auth-grid { position:fixed; left:4vw; width:92vw; top:auto; bottom:max(12px, env(safe-area-inset-bottom,0px)); height:140px; }
  #auth-grid > * { font-size:13px; }
  #auth-back-btn { position:fixed; left:4vw; top:auto; bottom:calc(max(12px, env(safe-area-inset-bottom,0px)) + 150px); font-size:12px; }
  #auth-forgot-btn { position:fixed; right:4vw; left:auto; top:auto; bottom:calc(max(12px, env(safe-area-inset-bottom,0px)) + 150px); font-size:12px; }
  #auth-error  { position:fixed; bottom:calc(max(12px, env(safe-area-inset-bottom,0px)) + 196px); }
  #auth-status { position:fixed; bottom:calc(max(12px, env(safe-area-inset-bottom,0px)) + 178px); }
}

/* ── Fullscreen button — fixed top-right on every screen ──────────────────
   Shown only when the browser has fullscreen (body.fs-capable, set in phone.js);
   iPhone Safari does not, so there is nothing to offer. */
#fs-global-btn {
  display:none;
  position:fixed; top:max(8px, env(safe-area-inset-top,0px)); right:max(10px, env(safe-area-inset-right,0px)); 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;
}
body.fs-capable #fs-global-btn { display:block; }
#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. Flush with the header. */
  z-index:990;
  top:env(safe-area-inset-top,0px); right:env(safe-area-inset-right,0px); height:28px; padding:0 12px;
  display:none; align-items:center; justify-content:center;
  border-radius:0; border-width:0 0 1px 1px; font-size:12px;
}
body.perf-active.fs-capable #fs-global-btn { display:flex; }

/* The button sits over the top-right corner, so the header rows keep clear of it. */
body.fs-capable #header { padding-right:max(54px, env(safe-area-inset-right,0px)); }
/* During a show the button is wider and flush with the header: keep the connection dot clear of it. */
body.perf-active.fs-capable #header { padding-right:calc(env(safe-area-inset-right,0px) + 96px); }
body.fs-capable #scanner-header { padding-right:54px; }

/* Big CTA on the scanner: the loudest thing on the screen, hence the shout-case
   label. Real fullscreen where the browser has it (fs-capable); on iPhone it opens
   the Add-to-Home-Screen instructions (a2hs-capable). Hidden otherwise, including
   once the app already runs from the home screen. */
#fs-big-btn {
  display:none; 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;
}
body.fs-capable #fs-big-btn, body.a2hs-capable #fs-big-btn { display:block; }
#fs-big-btn:active { background:#fff; color:#000; }

/* ── "Add to Home Screen" overlay (iPhone: the only chrome-free route) ── */
#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; max-height:90vh; max-height:90dvh; overflow-y:auto;
}
#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; }

/* ── "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; max-height:90dvh; 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; }
/* Close-page symbol: pinned to the overlay (not the scrolling box), so it
   stays in the upper-right corner however far the text is scrolled. */
#what-close {
  position:absolute; top:max(12px, env(safe-area-inset-top,0px)); right:max(12px, env(safe-area-inset-right,0px));
  width:44px; height:44px; padding:10px; z-index:1;
  background:rgba(0,0,0,0.6); border:1px solid #666; border-radius:50%; color:#fff;
  cursor:pointer; touch-action:manipulation;
}
#what-close:active { background:#222; }
/* The global FS button also lives top-right (z-index above this overlay); the
   guide's close symbol takes the corner while the guide is open. */
body:has(#what-overlay.show) #fs-global-btn { display:none; }
#what-close svg { width:100%; height:100%; display:block; }

/* ── 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; }
/* Dashed frame drawn in SVG so it hugs the real screen edge at any size or aspect
   ratio (a fixed-ratio image left bars on anything but 16:9). The stroke is centred
   on the edge, so half is clipped: the visible band is 1vmin wide. Sizes are in
   vmin so dashes keep the same look from a phone to a 4K projector. */
.aim-frame { width:100%; height:100%; display:block; }
.aim-frame rect { fill:none; stroke:#fff; stroke-width:2vmin; stroke-dasharray:2.2vmin 1.4vmin; }


/* ── Scanner screen ──────────────────────────────────────── */
/* Camera starting / permission dialog up: the logo alone, full screen, as the
   bottom layer. Everything else is hidden but keeps its layout, so nothing jumps
   when the camera arrives. */
/* The logo is the scanner background at all times (not only while the camera starts). */
#scanner-wait-bg {
  display:block; position:fixed; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:contain; background:#000;
}
#scanner { isolation:isolate; }
#scanner-logo { display:none; }
#scanner.cam-wait > * { visibility:hidden; }
#scanner.cam-wait > #scanner-wait-bg {
  visibility:visible; display:block; position:fixed; inset:0; z-index:0;
  width:100%; height:100%; object-fit:contain; background:#000;
}
#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:max(20px, env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px))
          max(20px, env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));
  overflow-y:auto;
}
#scanner-header {
  display:flex; width:100%; align-items:center; justify-content:flex-end;
  flex-shrink:0; position:relative;
}
#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; }

/* ── 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; max-height:90dvh; 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; max-height:80dvh;
  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; max-height:60dvh;
}
.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; cursor:pointer; touch-action:manipulation; }
.session-cell img, .session-cell video { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.session-video-badge {
  position:absolute; bottom:4px; right:4px; width:18px; height:18px;
  background:rgba(0,0,0,0.7); border-radius:50%; color:#fff;
  font-size:8px; display:flex; align-items:center; justify-content:center;
  padding-left:1px; /* optical centering for the ▶ glyph */
}
#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:calc(24px + env(safe-area-inset-bottom,0px)); 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:normal; text-align:center; max-width:92vw;
}
#toast.show { opacity:1; }

/* ── Artwork fullscreen viewer ───────────────────────────────────────────
   Sits above #sessions-modal (z-index 200) so opening one from the other
   layers correctly. The artwork is full-bleed and bare; a short tap toggles
   #artwork-overlay (.ui on the viewer). Swipe, hold and scrub gestures are
   handled in phone-auth.js. Swipe moves through the same list the grid already
   fetched — no re-fetch per artwork. */
#artwork-viewer {
  display:none; position:fixed; inset:0; z-index:250; background:#000;
}
#artwork-viewer.show { display:block; }
#artwork-media {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#artwork-img, #artwork-video {
  max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; display:none;
  pointer-events:none;
}
#artwork-media.photo #artwork-img { display:block; }
#artwork-media.video #artwork-video { display:block; }
/* Shown only while a video is paused (after a hold-to-scrub); a tap resumes it. */
#artwork-play-btn {
  display:none; position:absolute; inset:0; margin:auto; width:64px; height:64px;
  background:rgba(0,0,0,0.5); border:2px solid #fff; border-radius:50%; color:#fff;
  padding:16px; pointer-events:none;
}

#artwork-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
          env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.75));
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
#artwork-viewer.ui #artwork-overlay { opacity:1; }
#artwork-viewer.editing #artwork-btn-row { display:none; }
#artwork-viewer.editing #artwork-textbox { margin-bottom:8px; padding:8px 12px; }
#artwork-viewer.editing #artwork-hint { display:none; }
#artwork-viewer.ui #artwork-overlay > * { pointer-events:auto; }
#artwork-textbox {
  flex-shrink:0; margin:0 16px 14px; padding:14px 16px;
  border:2px solid rgba(255,255,255,0.85); border-radius:14px;
  background:rgba(0,0,0,0.35); text-align:center;
}
#artwork-hint {
  font-family:monospace; font-weight:700; font-size:13px; letter-spacing:1px; color:#fff;
}
#artwork-name {
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:20px;
  color:#fff; margin-top:6px; outline:none; word-break:break-word;
}
#artwork-name:empty::before { content:attr(data-ph); color:#888; }
#artwork-unshare-btn[hidden] { display:none; }
#artwork-date {
  font-family:Georgia,'Times New Roman',serif; font-size:14px; color:#aaa; margin-top:4px;
}
#artwork-btn-row {
  flex-shrink:0; display:flex; justify-content:space-evenly; align-items:center;
  padding:0 24px calc(16px + env(safe-area-inset-bottom,0px));
}
#artwork-btn-row button {
  background:transparent; border:none; color:#fff; width:44px; height:44px;
  padding:8px; cursor:pointer; touch-action:manipulation;
}
#artwork-btn-row button:active { color:#aaa; }
#artwork-delete-btn:active { color:#f66; }

#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:#aaa; font-size:12px; text-align:center; flex-shrink:0; }

#qr-wrap {
  --qr-side: min(92vw, 56dvh, 520px);
  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; z-index:20;
  height:calc(28px + env(safe-area-inset-top,0px));
  display:flex; align-items:center; justify-content:space-between;
  padding:env(safe-area-inset-top,0px) max(8px, env(safe-area-inset-right,0px)) 0 max(8px, env(safe-area-inset-left,0px));
  background:none; /* no bar: the buttons and readouts float over the picture */
  pointer-events:none; /* the empty strip passes touches through to the camera view */
}
#header > * { pointer-events:auto; }
#header #header-title, #header #conn-type, #header #conn-kbps, #header #conn-quality { text-shadow:0 0 3px #000, 0 0 6px #000; }
#back-btn {
  background:rgba(0,0,0,0.45); 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; z-index:10;
  top:calc(28px + env(safe-area-inset-top,0px));
  left:env(safe-area-inset-left,0px); right:env(safe-area-inset-right,0px);
  bottom:env(safe-area-inset-bottom,0px);
  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;
  /* The 15dvh term is what keeps the sliders usable on a short landscape
     viewport (browser chrome showing): the rows give up height before the
     slider travel does. */
  height: min(13vw, 58px, 15dvh);
}
.shape-btn, .filter-btn {
  background:transparent; border:none; padding:0;
  cursor:pointer; touch-action:manipulation; display:block; overflow:hidden;
}
/* Record button while a held-triggered video capture is in flight (10s,
   owned by the screen — see phone.js RECORD_VIDEO_DURATION_MS) */
#record-btn.recording { animation:record-pulse 1s ease-in-out infinite; }
@keyframes record-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.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 {
  /* Capped by height as well as column width: on a wide, short viewport a
     full-column icon would eat nearly all of the slider's travel. */
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(100%, 24dvh); 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; max-height:92dvh; 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; }
/* Cloud gallery shortcut — the most-used destination in Settings, so it gets
   the app's one accent colour (green, used everywhere else for "active"/"good")
   and stands apart from the boxed grey setting-sections below it. Gated to
   signed-in Pro/Lifetime (see applyPlanGating() in phone.js) — cloud captures
   don't exist for guests or free plans. */
.gallery-cta-btn {
  width:100%; padding:16px; margin-bottom:14px;
  background:transparent; border:2px solid #0f0; color:#0f0;
  font-family:monospace; font-size:14px; font-weight:700; letter-spacing:3px;
  cursor:pointer; touch-action:manipulation;
  box-shadow:0 0 14px rgba(0,255,0,0.25);
}
.gallery-cta-btn:active { background:#0f0; color:#000; }
.guide-cta-btn {
  width:100%; padding:16px; margin-bottom:14px;
  background:transparent; border:2px solid #888; color:#ccc;
  font-family:monospace; font-size:14px; font-weight:700; letter-spacing:3px;
  cursor:pointer; touch-action:manipulation;
}
.guide-cta-btn:active { background:#ccc; color:#000; }
.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; max-height:85dvh; 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; }
#what-live { display:flex; flex-direction:column; gap:16px; font-size:15px; } /* 15px = the doc's 11pt baseline, so the API's em sizes land right */
#what-live[hidden], #what-static[hidden] { display:none; }
#what-static { display:flex; flex-direction:column; gap:20px; }
#what-live a { color:#ccc; text-decoration:underline; text-underline-offset:3px; }
#what-live ul, #what-live ol { padding-left:22px; color:#ccc; font-size:15px; line-height:1.7; }
.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; }

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

/* ── Camera failed — covers the whole phone, above every other layer ───── */
#cam-fail {
  position:fixed; inset:0; z-index:1000; background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:32px; text-align:center;
}
#cam-fail[hidden] { display:none; }
#cam-fail-title { font-size:22px; font-weight:700; letter-spacing:3px; }
#cam-fail-sub { max-width:420px; font-size:15px; line-height:1.5; color:#ccc; }
#cam-fail-retry {
  min-height:48px; padding:0 28px; border:1px solid #fff; border-radius:24px;
  background:transparent; color:#fff; font:inherit; font-size:14px; letter-spacing:2px; cursor:pointer;
}

/* ── 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; }
/* The client's logo is a 16:9 frame (white on pure black, the mark filling its
   full height), so it is fitted to the whole screen rather than a square box;
   the padding keeps the mark off the screen edges. */
#phone-intro-video { width:100%; height:100%; object-fit:contain; background:#000; }
#phone-aim { position:fixed; inset:0; z-index:971; pointer-events:none; }
#phone-aim[hidden] { display:none; }
#phone-aim img { width:100%; height:100%; object-fit:fill; display:block; }
/* Skip control — moved here from the screen (which now plays the intro with
   no on-screen label): the performer is the one holding this device while the
   screen plays unattended, so the skip affordance belongs where the tap
   happens. Sits under the logo, visible for exactly as long as the intro
   plays on the screen (shown/hidden by beginPhoneIntro()/endPhoneIntro()). */
#phone-intro-skip {
  position:absolute; bottom:max(6%, env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  font-family:monospace; font-size:clamp(18px,4vh,32px); letter-spacing:0.25em; color:#fff;
  padding:12px 28px; border:2px solid rgba(255,255,255,0.7); border-radius:4px;
  background:rgba(0,0,0,0.45); white-space:nowrap;
  cursor:pointer; touch-action:manipulation;
}
/* 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;
}

/* Short visible viewport — a landscape phone with the browser bars showing, or
   a small phone in portrait. There is no fullscreen to fall back on, so the
   auth and scanner screens tighten up instead of relying on the address bar
   being hidden. They still scroll if the content genuinely cannot fit. */
@media (max-height:420px) {
  #scanner {
    gap:6px;
    padding-top:max(10px, env(safe-area-inset-top,0px));
    padding-bottom:max(10px, env(safe-area-inset-bottom,0px));
  }
  #qr-wrap { --qr-side: min(92vw, 60dvh, 520px); }
  body.fs-capable #fs-big-btn, body.a2hs-capable #fs-big-btn { display:none; }
}

/* Escape hatch for a phone that has to be the output screen. Padded to a 44px tap target. */
#use-as-screen { color:#666; font-size:10px; letter-spacing:1px; text-decoration:underline; padding:14px 12px; }
#use-as-screen:active { color:#fff; }

/* Video controls: pause button + slider row, frame/download buttons — videos only. */
#artwork-seekrow { display:none; flex-shrink:0; align-items:center; gap:8px; margin:0 16px 12px; }
#artwork-viewer.is-video #artwork-seekrow { display:flex; }
#artwork-viewer.editing #artwork-seekrow { display:none; }
#artwork-seek { flex:1; min-width:0; height:32px; accent-color:#fff; touch-action:pan-x; }
#artwork-pause-btn {
  flex-shrink:0; width:44px; height:44px; padding:10px; background:transparent; border:none;
  color:#fff; cursor:pointer; touch-action:manipulation;
}
#artwork-pause-btn .ico-play { display:none; }
#artwork-viewer.vpaused #artwork-pause-btn .ico-play { display:block; }
#artwork-viewer.vpaused #artwork-pause-btn .ico-pause { display:none; }
#artwork-frame-btn { display:none; }
#artwork-viewer.is-video #artwork-btn-row #artwork-frame-btn { display:block; }

/* The stage carries the picture and its overlay together when they slide or drop. */
#artwork-stage { position:absolute; inset:0; }

/* Usage bar in the My Artworks header */
#sessions-usage-bar { height:4px; background:#2a2a2a; border-radius:2px; overflow:hidden; }
#sessions-usage-fill { height:100%; width:0; background:#fff; }
#sessions-usage-fill.full { background:#e44; }
#sessions-usage-text { margin-top:4px; font-size:10px; letter-spacing:1px; color:#888; text-align:center; }

/* Capture popup: the picture centred, a row of icon buttons under it, see-through backdrop */
#capture-popup {
  display:none; position:fixed; inset:0; z-index:260; background:rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding:max(12px, env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px))
          max(12px, env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));
}
#capture-popup.show { display:flex; }
#capture-box { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; max-height:100%; }
#capture-preview { display:flex; justify-content:center; min-height:0; }
#capture-preview img, #capture-preview video {
  display:block; max-width:min(88vw,720px); max-height:calc(100dvh - 120px); object-fit:contain;
  border:1px solid rgba(255,255,255,0.35); box-shadow:0 6px 30px rgba(0,0,0,0.5);
}
#capture-name {
  width:min(88vw,420px); background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.5);
  color:#fff; text-align:center; outline:none; padding:6px 4px;
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:20px;
}
#capture-name::placeholder { color:rgba(255,255,255,0.55); font-style:normal; font-family:monospace; font-size:12px; letter-spacing:2px; }
/* Hidden but still taking up room: removing it re-centred the popup under the finger on focus. */
#capture-popup.editing #capture-actions { visibility:hidden; }
#capture-actions { display:flex; gap:18px; justify-content:center; }
#capture-actions button {
  width:52px; height:52px; padding:13px; border-radius:50%; cursor:pointer; touch-action:manipulation;
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.6); color:#fff;
}
#capture-actions button:active { background:rgba(255,255,255,0.25); }
#capture-actions button:disabled { color:#777; border-color:#444; }
#capture-discard-btn { color:#f88 !important; border-color:rgba(255,120,120,0.6) !important; }
/* Recording notice: red frame around the whole phone screen plus a REC counter. */
#rec-frame {
  display:none; position:fixed; inset:0; z-index:960; pointer-events:none;
  border:6px solid #e11; box-shadow:inset 0 0 24px rgba(255,0,0,0.55);
  animation:rec-pulse 1s ease-in-out infinite;
}
body.recording-video #rec-frame { display:block; }
#rec-label {
  position:absolute; top:max(8px, env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
  background:#e11; color:#fff; font-family:monospace; font-size:13px; letter-spacing:2px;
  padding:4px 12px; border-radius:3px;
}
@keyframes rec-pulse { 50% { border-color:#700; box-shadow:inset 0 0 10px rgba(255,0,0,0.25); } }
@media (prefers-reduced-motion:reduce) { #rec-frame { animation:none; } }

/* Publish-to-gallery button: lit while the artwork is in the public gallery. */
#artwork-viewer.is-public #artwork-publish-btn { color:#5f5; }
.session-public-badge {
  position:absolute; top:4px; left:4px; width:22px; height:22px; padding:3px;
  background:rgba(0,0,0,0.75); border:1px solid #5f5; border-radius:50%; color:#5f5; pointer-events:none;
}
.session-public-badge svg { display:block; width:100%; height:100%; }

/* New-password form: shown when someone opens a password-reset link. */
#reset-modal {
  display:none; position:fixed; inset:0; z-index:280; background:rgba(0,0,0,0.85);
  align-items:center; justify-content:center; padding:16px;
}
#reset-modal.show { display:flex; }
#reset-box {
  background:#111; border:1px solid #2a2a2a; padding:22px 18px; width:min(86vw,320px);
  display:flex; flex-direction:column; gap:14px; text-align:center;
}
#reset-box h2 { font-size:14px; letter-spacing:3px; font-weight:300; color:#ccc; }
#reset-pass {
  background:#000; color:#fff; border:1px solid #333; min-height:44px; padding:0 12px;
  font-family:monospace; font-size:16px; letter-spacing:1px; text-align:center;
}
#reset-error { color:#f66; font-family:monospace; font-size:12px; min-height:1em; }
#reset-save-btn {
  background:#fff; color:#000; border:none; min-height:44px; cursor:pointer; touch-action:manipulation;
  font-family:monospace; font-size:12px; letter-spacing:2px;
}
#reset-save-btn:disabled { opacity:0.5; }
#reset-cancel-btn {
  background:transparent; color:#888; border:none; min-height:44px; cursor:pointer; touch-action:manipulation;
  font-family:monospace; font-size:11px; letter-spacing:2px;
}

/* Login prompt: shown when a guest taps Save in the capture popup. */
#login-prompt {
  display:none; position:fixed; inset:0; z-index:270; background:rgba(0,0,0,0.85);
  align-items:center; justify-content:center; padding:16px;
}
#login-prompt.show { display:flex; }
#login-prompt-box {
  background:#111; border:1px solid #2a2a2a; padding:22px 18px; width:min(86vw,320px);
  display:flex; flex-direction:column; gap:14px; text-align:center;
}
#login-prompt-box h2 { font-size:14px; letter-spacing:3px; font-weight:300; color:#ccc; }
#login-prompt-box p { font-size:12px; line-height:1.6; color:#999; }
#login-prompt-login-btn {
  background:#fff; color:#000; border:none; min-height:44px; cursor:pointer; touch-action:manipulation;
  font-family:monospace; font-size:12px; letter-spacing:2px;
}
#login-prompt-cancel-btn {
  background:transparent; color:#888; border:none; min-height:44px; cursor:pointer; touch-action:manipulation;
  font-family:monospace; font-size:11px; letter-spacing:2px;
}