/* view3d.css — /impact-3dview. Game-style layout (owner 2026-10-30): the
   canvas fills the screen on every size; everything else floats on it as
   cards. .v3d__ov shows only in the overview, .v3d__pv only when seated
   (body.v3d--pov). Theme tokens only. */
/* the /p red glow (body::after, fixed 600 px blur) sat above the canvas as a red
   circle over the stands (owner 2026-11-01) — not on this page */
body::after { content: none !important; }
/* one inner spacing for every card and sheet (owner 2026-11-01) */
:root { --v3d-pad: 16px; --v3d-gap: 12px; }
/* form controls take the page font (same reset as /p/find.css) — without it the
   /p nav buttons fell back to the UA font (Arial) here (owner 2026-11-01) */
button, input, select, textarea { font: inherit; }
body { min-height: 100vh; min-height: 100dvh; background: var(--space-gradient), var(--bg-primary); }   /* same as /p (owner 2026-10-31); the 3D canvas is transparent over it */
/* phase gate: page content stays hidden until phase-gate.js lets it through */
body:not(.v3d--allowed) .v3d { visibility: hidden; }
#page-layout { position: static !important; overflow: visible !important; }
/* red-fog motif here: embers only — no chains, no twinkling prisms (owner 2026-10-31) */
#motif-red-fog-chains, .mrf-prism { display: none !important; }

.v3d {
  --glass: color-mix(in srgb, var(--bg-elevated) 58%, transparent);
  --blur: blur(16px) saturate(1.3);
  --edge: var(--space-3);
  height: calc(100vh - var(--navbar-total-h));
  height: calc(100dvh - var(--navbar-total-h));
}
.v3d__stage {
  position: relative;
  height: 100%;
  touch-action: none;
  overscroll-behavior: contain;
  overflow: hidden;
}
.v3d__stage canvas { display: block; width: 100%; height: 100%; }
.v3d__stage canvas { opacity: 0; transition: opacity 1s ease-out; }
.v3d--shown .v3d__stage canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v3d__stage canvas { transition: none; } }
.v3d__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-secondary);
  pointer-events: none;
}
.v3d--ready .v3d__loading { display: none; }
.v3d__loading .ppw-spinner { width: 32px; height: 32px; border-width: 3px; }
.v3d__loading[hidden] { display: none; }

/* mode switch */
.v3d--pov .v3d__ov { display: none !important; }
body:not(.v3d--pov) .v3d__pv { display: none !important; }

/* ── shared pieces ─────────────────────────────────────────────────────── */
.v3d__ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v3d__btn {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-primary);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.v3d__btn--icon { padding: 0; }
.v3d__btn--sm { min-height: 36px; min-width: 44px; border: 0; background: var(--accent-gold); color: var(--gold-btn-text, #fff); backdrop-filter: none; }
.v3d__btn[aria-pressed="true"], .v3d__btn[aria-expanded="true"] { border-color: var(--accent-gold); color: var(--accent-gold-text); }
.v3d__btn:disabled { opacity: 0.35; cursor: default; }

.v3d__hud { position: absolute; z-index: 2; display: flex; gap: var(--space-2); }
.v3d__hud--top { top: var(--edge); left: var(--edge); right: var(--edge); align-items: center; flex-wrap: wrap; }
.v3d__hud--zoom { right: var(--edge); top: calc(var(--edge) + 56px); flex-direction: column; }

/* overview top: search (same box as /p/find's .find-panel__search-wrap) + settings */
.v3d__search {
  flex: 0 1 280px; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-secondary);
}
.v3d__search input {
  flex: 1 1 auto; min-width: 0; min-height: 34px;
  border: 0; background: none; color: var(--text-primary);
  font-family: var(--font-thai); font-size: 16px;   /* 16px: no iOS zoom on focus */
}
.v3d__search input::placeholder { color: var(--text-secondary); }
.v3d__search input:focus { outline: none; }
@media (pointer: fine) { .v3d__search input { font-size: 14px; } }   /* match the other controls; phones keep 16px (no iOS zoom on focus) */
.v3d__search:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb), 0.12); }
.v3d__search .v3d__btn--sm { border-radius: calc(var(--radius-md) - 2px); }
.v3d__search-toggle, .v3d__search-close { display: none; }
.v3d__search-close { min-width: 36px; min-height: 36px; border: 0; background: none; backdrop-filter: none; color: var(--text-secondary); }
.v3d__hud--top > .v3d__search, .v3d__hud--top > .v3d__search-toggle { margin-right: auto; }   /* buttons after it sit at the right edge */
.v3d__mine-btn { position: relative; border-color: var(--accent-gold); color: var(--accent-gold-text); }
.v3d__mine-btn[hidden] { display: none; }
.v3d__count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--accent-gold); color: var(--gold-btn-text, #fff); font-size: 11px; font-weight: 700;
}
.v3d__search-msg { flex-basis: 100%; margin: 0; padding: 6px var(--space-3); border-radius: var(--radius-md); background: var(--glass); font-size: 13px; color: var(--danger-text); }
.v3d__search-msg:empty { display: none; }

/* seated top: close · [title + info in one bar] · settings (owner 2026-10-31) */
.v3d__hud-bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  height: 44px; box-sizing: border-box;   /* same height as the buttons beside it (owner 2026-10-31) */
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.v3d__hud-bar .v3d__btn { min-height: 42px; }
.v3d__hud-bar .v3d__btn { border: 0; background: none; backdrop-filter: none; }
.v3d__hud-bar .v3d__hud-title { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v3d__hud-title {
  flex: 1 1 auto; min-width: 0;
  display: grid; justify-items: center;
  padding: 4px var(--space-3); border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  text-align: center;
}
.v3d__hud-title strong { font-size: 15px; }
.v3d__hud-title span { font-size: 12px; color: var(--text-secondary); }
/* seated bar: one line — seat code, then the details, cut with … when tight */
.v3d__hud-bar .v3d__hud-title { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); padding: 0 0 0 var(--space-3); white-space: nowrap; overflow: hidden; }
/* narrow phones (owner 2026-11-01): close · seat · settings stay on one row;
   the details are cut with … instead of pushing settings to a second line */
.v3d__hud--top.v3d__pv { flex-wrap: nowrap; }
.v3d__hud-bar .v3d__hud-title strong { flex: none; }
.v3d__hud-bar .v3d__hud-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3d__hud-bar .v3d__hud-title strong { flex: none; }
.v3d__hud-bar .v3d__hud-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* first-run hint */
.v3d__hint {
  position: absolute; z-index: 1; left: 50%; bottom: calc(var(--edge) + var(--safe-bottom, 0px)); transform: translateX(-50%);
  margin: 0; padding: 10px var(--space-4); border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-primary); font-size: 12px; font-weight: 400; text-align: center;   /* owner 2026-11-01: smaller, regular weight */
  width: max-content; max-width: calc(100% - 2 * (var(--edge) + 28px + var(--space-3)));   /* clear of the ? button at the bottom right, both sides so it stays centred */
  pointer-events: none;
  animation: v3d-pop-c 0.35s ease-out;
}
.v3d__hint[hidden] { display: none; }

/* seat card */
.v3d__card {
  position: absolute; z-index: 2;
  left: var(--edge); bottom: calc(var(--edge) + var(--safe-bottom, 0px));
  width: min(340px, calc(100% - 2 * var(--edge) - 56px));
  display: grid; gap: var(--v3d-gap);
  padding: var(--v3d-pad);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-primary);
  animation: v3d-pop 0.3s ease-out;
}
.v3d__card[hidden] { display: none; }
.v3d__title-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.v3d__card--seat { overflow: hidden; padding-top: calc(var(--v3d-pad) + 6px); }   /* + the tier colour strip */
.v3d__card--seat::before {                       /* band in the seat's own tier colour (same as the 2D plan) */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--tier, var(--accent-gold));
}
.v3d__title-row strong { font-size: 26px; font-weight: 700; letter-spacing: 0.02em; }
.v3d__pill { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--tier, var(--bg-secondary)); font-size: 15px; font-weight: 700; color: var(--tier-ink, var(--text-primary)); }   /* price in the seat's tier colour */
.v3d__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.v3d__badge.v3d__badge--mine { border-color: var(--accent-gold); background: var(--accent-gold); color: #fff; font-weight: 700; }   /* two classes: the later .v3d__badge rule was greying the text */
.v3d__badge[hidden] { display: none; }
.v3d__links { display: flex; gap: 6px; flex-wrap: nowrap; }   /* one row always; the chips shrink */
.v3d__links .v3d__photo { flex: 0 1 auto; min-width: 0; }
.v3d__links .v3d__photo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .v3d__links .v3d__photo { padding: 0 8px; font-size: 11px; } }
/* "your tickets" sheet: one game-style ticket card per ticket */
.v3d__mine-list { display: grid; gap: var(--space-2); }
.v3d__ticket {
  position: relative; overflow: hidden; display: grid; gap: 4px;
  padding: calc(var(--space-2) + 3px) var(--space-3) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}
.v3d__ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tier, var(--accent-gold)); }
.v3d__ticket-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.v3d__ticket-head strong { font-size: 16px; font-weight: 700; }
.v3d__ticket-head small { font-size: 11px; font-weight: 600; color: var(--accent-gold-text); text-transform: uppercase; letter-spacing: 0.06em; }
.v3d__ticket p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.v3d__ticket-go { flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.v3d__ticket-go .v3d__ico { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.v3d__badge { justify-self: start; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--tier, var(--border)); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.v3d__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.v3d__stats div {
  display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 4px;
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-secondary) 55%, transparent); text-align: center;
}
.v3d__stats .v3d__ico { color: var(--accent-gold-text); }
.v3d__stats b { font-size: 16px; font-weight: 700; }
.v3d__stats span { font-size: 11px; color: var(--text-secondary); }
/* a long value ("พื้นสนาม") must never push past the card's right padding
   (owner 2026-11-01: right edge looked tighter than the left) */
.v3d__stats div { min-width: 0; }
.v3d__stats b, .v3d__stats span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d__meter-row { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.v3d__meter { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--bg-secondary); overflow: hidden; }
.v3d__meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-gold); transition: width 0.4s ease-out; }
.v3d--flash { animation: v3d-flash 0.5s ease-out; }
@keyframes v3d-flash { 0% { background: var(--accent-gold); color: var(--gold-btn-text, #fff); } }
.v3d__note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.v3d__note:empty { display: none; }
.v3d__note::before {                              /* flat warning icon (owner 2026-10-31: grey text, icon in front) */
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v3d__go {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent-gold); color: var(--gold-btn-text, #fff);
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
}
.v3d__go .v3d__ico { fill: currentColor; stroke: none; }
.v3d__photo { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); color: var(--text-primary); font-size: 12px; font-weight: 500; text-decoration: none; }
.v3d__photo .v3d__ico { width: 14px; height: 14px; color: var(--accent-gold-text); }
.v3d__photo[hidden] { display: none; }

/* seated bottom-left: members + segmented switches */
/* member picker: same look as the "เลือกเมน" picker (p/auth.css .bias-*),
   sized for a tray — round photo, name under it, dimmed until picked */
.v3d__mem-panel { display: grid; gap: var(--space-2); justify-items: center; }
.v3d__mem-chips { display: grid; grid-template-columns: repeat(4, 56px); gap: 10px; justify-content: center; }
.v3d__mem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text-secondary); font: inherit; cursor: pointer;
}
.v3d__mem img {
  width: 52px; height: 52px; object-fit: cover; border-radius: 50%;
  border: 2px solid transparent; background: var(--bg-elevated);
  opacity: 0.5; transition: opacity 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.v3d__mem span { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.v3d__mem[aria-pressed="true"] img { opacity: 1; border-color: var(--accent-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 35%, transparent); }
.v3d__mem[aria-pressed="true"] span { color: var(--text-primary); }
.v3d__seg {
  display: flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.v3d__seg button {
  min-height: 34px; padding: 0 10px;
  border: 0; background: none; color: var(--text-secondary);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.v3d__seg-label { display: flex; align-items: center; padding: 0 8px 0 10px; font-size: 11px; font-weight: 600; color: var(--text-secondary); border-right: 1px solid var(--border); white-space: nowrap; }
.v3d__seg button[aria-pressed="true"] { background: var(--accent-gold); color: var(--gold-btn-text, #fff); }
/* members' spot (owner 2026-11-01): a dropdown in the same pill */
.v3d__spot select {
  min-height: 34px; padding: 0 28px 0 10px; border: 0; background: none; color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.v3d__spot select option { background: var(--bg-secondary); color: var(--text-primary); }

/* seated: dock = trays + tab bar (owner 2026-10-30). Phones: one tray at a
   time above the tabs. Wide screens: every tray in one row, no tabs. */
.v3d__dock {
  position: absolute; z-index: 2;
  left: 50%; bottom: calc(var(--edge) + var(--safe-bottom, 0px)); transform: translateX(-50%);
  width: min(420px, calc(100% - 2 * var(--edge)));
  display: grid; justify-items: center; gap: var(--space-2);
}
.v3d__tray {
  display: none; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: v3d-pop 0.2s ease-out;
}
.v3d__tray.is-open { display: flex; }
.v3d__tabs {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.v3d__tabs button {
  display: grid; justify-items: center; gap: 1px;
  min-height: 48px; padding: 4px 0;
  border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
}
.v3d__tabs button[aria-pressed="true"] { background: var(--accent-gold); color: var(--gold-btn-text, #fff); }
.v3d__seg--col button { min-height: 40px; padding: 0 var(--space-3); font-size: 13px; }
.v3d__nav {
  display: grid; grid-template-columns: repeat(3, 44px); grid-template-areas: ". f ." "l b r"; gap: 6px;
}
.v3d__nav [data-nav="front"] { grid-area: f; }
.v3d__nav [data-nav="left"] { grid-area: l; }
.v3d__nav [data-nav="back"] { grid-area: b; }
.v3d__nav [data-nav="right"] { grid-area: r; }

/* "your ticket" chip in the seated HUD */
.v3d__hud-star { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: var(--accent-gold-text); }
.v3d__hud-star svg { width: 14px; height: 14px; fill: currentColor; }
/* own-ticket strip under the seated bar: compact, centred */
/* hangs below the row (the row itself stays nowrap on phones) */
.v3d__hud-mine { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; display: flex; justify-content: center; margin: 0; pointer-events: none; }
.v3d__hud-mine[hidden] { display: none; }
.v3d__hud-mine > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font-size: 12px; font-weight: 500; color: var(--accent-gold-text); white-space: nowrap;
}

/* member name tag over the figure */
.v3d__tag {
  position: absolute; z-index: 1; left: 0; top: 0; transform: translate(-50%, -100%);
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-gold); color: var(--gold-btn-text, #fff);
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.v3d__tag small { font-size: 10px; font-weight: 400; }
.v3d__tag[hidden] { display: none; }

/* sheets: info (seated) and settings (overview) */
/* Sheets dock to the left edge under the top HUD so the view in the middle
   stays clear (owner 2026-10-30); on phones they are a short bottom sheet. */
.v3d__sheet {
  position: absolute; z-index: 3;
  left: var(--edge); top: calc(var(--edge) + 56px);
  width: min(320px, calc(100% - 2 * var(--edge) - 56px));
  max-height: calc(100% - 2 * var(--edge) - 56px); overflow-y: auto;
  display: grid; gap: var(--v3d-gap);
  padding: var(--v3d-pad);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: v3d-slide 0.25s ease-out;
}
.v3d__sheet[hidden] { display: none; }
.v3d__sheet header { display: flex; justify-content: space-between; align-items: center; }
.v3d__sheet h2 { margin: 0; font-size: 16px; }
.v3d__sheet header .v3d__btn { background: none; border-color: transparent; backdrop-filter: none; }
/* the 44 px close target hangs into the corner padding, so the header is only
   as tall as the title and the title sits the same distance from top and left */
.v3d__sheet header .v3d__btn { margin: -12px -12px -12px 0; }
.v3d__facts h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.v3d__facts h3 small { font-weight: 500; }
.v3d__facts dl { margin: 0; display: grid; }
.v3d__facts dl div { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.v3d__facts dl div:last-child { border-bottom: 0; }
.v3d__facts dt { color: var(--text-secondary); }
.v3d__facts dd { margin: 0; font-weight: 600; text-align: right; }
.v3d__mem-info { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-secondary) 55%, transparent); font-size: 13px; color: var(--text-secondary); }
.v3d__mem-info:empty { display: none; }
.v3d__mem-info b { color: var(--text-primary); }
.v3d__height { display: grid; gap: 6px; font-size: 14px; color: var(--text-secondary); }
.v3d__height label { display: flex; justify-content: space-between; }
.v3d__height b { color: var(--text-primary); }
/* height: type it or drag it (owner 2026-11-01) — both stay in step */
.v3d__hnum { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); font-weight: 600; }
.v3d__hnum input[type="number"] {
  width: 64px; min-height: 32px; padding: 0 6px; text-align: right;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 16px; accent-color: auto;
}
/* the user's own bias (profiles.bias_members): a star on the photo's top-right */
.v3d__mem { position: relative; }
.v3d__mem-star { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-gold); color: var(--gold-btn-text, #fff); }
.v3d__mem-star svg { width: 11px; height: 11px; fill: currentColor; }
.v3d__height input[type="range"] { width: 100%; accent-color: var(--accent-gold); min-height: 28px; }
.v3d__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.v3d__pick label { display: grid; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.v3d__pick select {
  min-height: 36px; width: 100%;
  padding: 0 var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary);
  font: inherit; font-size: 13px;
}
.v3d__disclaimer { margin: 0; font-size: 11px; color: var(--text-secondary); }

.v3d__fallback {
  height: 100%;
  display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center; color: var(--text-primary);
}
.v3d__fallback[hidden] { display: none; }
.v3d__fallback .v3d__go { width: auto; min-height: 40px; padding: 0 var(--space-5, 20px); font-size: 14px; }   /* owner 2026-11-01: smaller than the seat card's main button */
.v3d__fallback p { margin: 0; max-width: 340px; line-height: 1.6; }
.v3d__fallback p + p { font-size: 14px; color: var(--text-secondary); }
.v3d--fallback .v3d__stage { display: none; }

@keyframes v3d-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes v3d-pop-c { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes v3d-slide { from { opacity: 0; transform: translateX(-16px); } }
@keyframes v3d-slide-r { from { opacity: 0; transform: translateX(16px); } }
@keyframes v3d-up { from { opacity: 0; transform: translateY(16px); } }
/* phones (owner 2026-11-01): the seat card scaled down as a whole — it had
   taken half the screen. Same layout, smaller type and controls. */
@media (max-width: 560px) {
  .v3d__card { --v3d-pad: 12px; --v3d-gap: 8px; width: min(300px, calc(100% - 2 * var(--edge) - 56px)); }
  .v3d__card--seat::before { height: 4px; }
  .v3d__card--seat { padding-top: calc(var(--v3d-pad) + 4px); }
  .v3d__title-row strong { font-size: 20px; }
  .v3d__pill { font-size: 13px; padding: 1px 8px; }
  .v3d__badge { font-size: 11px; padding: 1px 6px; }
  .v3d__stats div { padding: 6px 2px; }
  .v3d__stats .v3d__ico { width: 16px; height: 16px; }
  .v3d__stats b { font-size: 14px; }
  .v3d__stats span { font-size: 10px; }
  .v3d__note { font-size: 11px; }
  .v3d__card .v3d__go { min-height: 40px; font-size: 15px; }
  .v3d__card .v3d__photo { min-height: 28px; font-size: 11px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .v3d__card, .v3d__hint, .v3d__sheet, .v3d__tray, .v3d--flash { animation: none; } .v3d__meter i { transition: none; } }

@media (hover: hover) {
  .v3d__btn:not(:disabled):hover { border-color: var(--accent-gold); }
  .v3d__mem:hover img { opacity: 0.85; transform: translateY(-1px); }
  .v3d__seg button:not([aria-pressed="true"]):hover, .v3d__tabs button:not([aria-pressed="true"]):hover { color: var(--text-primary); }
  .v3d__go:hover { filter: brightness(1.1); }
  .v3d__photo:hover { border-color: var(--accent-gold); }
}

/* settings opens beside its button on the right (owner 2026-10-31) */
@media (min-width: 561px) {
  .v3d__sheet--right { left: auto; right: calc(var(--edge) + 56px); animation-name: v3d-slide-r; }   /* settings + members open beside the zoom column, not over it */
}

/* phones: the search is one icon; tapped, the box opens across the top bar */
@media (max-width: 560px) {
  .v3d__search-toggle { display: inline-grid; }   /* same centring as every .v3d__btn */
  .v3d__search-close { display: inline-grid; }
  .v3d__search { display: none; }
  .v3d__search--open { display: flex; position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
}

/* narrow phones: info/settings become a short bottom sheet */
@media (max-width: 560px) {
  .v3d__sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 48%;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; border-bottom: 0;
    padding-bottom: calc(var(--v3d-pad) + var(--safe-bottom, 0px));
    animation-name: v3d-up;
  }
}

/* wide screens (owner 2026-10-30): no tab bar; the trays go to the corners so
   neither side carries everything and the middle of the view stays clear.
   bottom-left = members (above) + look-at · bottom-right = zoom (above) + D-pad */
@media (min-width: 900px) {
  .v3d__dock { display: contents; }
  .v3d__tabs { display: none; }
  .v3d__tray { display: flex; position: absolute; z-index: 2; animation: none; }
  .v3d__tray[data-tray="look"] { left: var(--edge); bottom: var(--edge); }
  .v3d__tray[data-tray="members"] { left: var(--edge); bottom: calc(var(--edge) + 64px); align-items: flex-start; }
  .v3d__tray[data-tray="move"] { right: var(--edge); bottom: var(--edge); }
}

/* in-app browser warning (owner 2026-11-01) — card styles shared with the guide below */
.v3d__inapp { z-index: 20; }
.v3d__inapp[hidden] { display: none; }
.v3d__go--ghost { background: none; border: 1px solid var(--border); color: var(--text-primary); }

/* help (?) button + first-visit guide (owner 2026-11-01). The button sits at the
   bottom right of the overview and steps aside for anything that uses that corner. */
.v3d__help {
  position: absolute; z-index: 2;
  right: var(--edge); bottom: calc(var(--edge) + var(--safe-bottom, 0px));
  /* quieter than the other controls (owner 2026-11-01): smaller and faded */
  width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0;
  opacity: 0.55; transition: opacity 0.2s;
}
.v3d__help .v3d__ico { width: 16px; height: 16px; }
.v3d__help:focus-visible { opacity: 1; }
@media (hover: hover) { .v3d__help:hover { opacity: 1; } }
.v3d:has(.v3d__sheet:not([hidden])) .v3d__help,
.v3d:has(#v3d-inapp:not([hidden])) .v3d__help,
.v3d:has(.v3d__guide) .v3d__help { display: none; }
@media (max-width: 560px) { .v3d:has(#v3d-seat-card:not([hidden])) .v3d__help { display: none; } }
.v3d__guide, .v3d__inapp {
  position: fixed; inset: 0;
  display: grid; place-items: center; padding: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
}
.v3d__guide { z-index: 19; }
/* one card for the guide and the in-app warning (owner 2026-11-01: roomier, same look) */
.v3d__guide-card, .v3d__inapp-card {
  --card-pad: 24px;
  width: min(380px, 100%);
  display: grid; gap: 20px; padding: var(--card-pad);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  background: var(--bg-elevated); color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: v3d-pop 0.25s ease-out;
}
@media (max-width: 380px) { .v3d__guide-card, .v3d__inapp-card { --card-pad: 20px; gap: 16px; } }
.v3d__guide-art { display: grid; place-items: center; }
.v3d__guide-ico { width: 56px; height: 56px; fill: none; stroke: var(--accent-gold-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v3d__guide-text { display: grid; gap: 8px; text-align: center; }
.v3d__guide-text h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.v3d__guide-text p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.v3d__guide-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--accent-gold); border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  font-size: 13px; line-height: 1.6; color: var(--text-primary);
}
.v3d__guide-warn[hidden] { display: none; }
.v3d__guide-warn .v3d__ico { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-gold-text); }
.v3d__guide-warn strong { display: block; margin-bottom: 4px; color: var(--accent-gold-text); }
.v3d__guide-dots { display: flex; justify-content: center; gap: 6px; }
.v3d__guide-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: width 0.2s; }
.v3d__guide-dots span.is-on { width: 18px; border-radius: 3px; background: var(--accent-gold); }
.v3d__guide-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.v3d__guide-foot:has(.v3d__guide-skip[hidden]) { grid-template-columns: 1fr; }
.v3d__guide-card .v3d__go, .v3d__inapp-card .v3d__go { min-height: 48px; font-size: 15px; }
.v3d__inapp-actions { display: grid; gap: 12px; }
.v3d__guide-card .v3d__go:focus { outline: none; }
.v3d__guide-card .v3d__go:focus-visible, .v3d__inapp-card .v3d__go:focus-visible { outline: 2px solid var(--accent-gold-text); outline-offset: 2px; }
.v3d__guide-skip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .v3d__guide-card { animation: none; } }

/* seat card collapse (owner 2026-11-01, C1) */
.v3d__title-row .v3d__pill { margin-left: auto; }   /* price stays at the right, next to the toggle */
.v3d__card-toggle { flex: none; width: 32px; height: 32px; min-width: 0; min-height: 0; margin: -4px -6px -4px 0; border: 0; background: none; backdrop-filter: none; }
.v3d__card-toggle .v3d__ico { transition: transform 0.2s; }
.v3d__card--collapsed .v3d__card-toggle .v3d__ico { transform: rotate(180deg); }
.v3d__card--collapsed .v3d__badges, .v3d__card--collapsed .v3d__stats, .v3d__card--collapsed .v3d__meter-row,
.v3d__card--collapsed .v3d__note, .v3d__card--collapsed .v3d__links { display: none; }

/* back to the default overview (owner 2026-11-01): a small chip of its own, sitting on top of the seat card */
.v3d__back-chip {
  position: absolute; z-index: 2; left: var(--edge); bottom: calc(var(--edge) + var(--safe-bottom, 0px) + var(--card-h, 0px) + var(--space-2));
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.v3d__back-chip .v3d__ico { width: 14px; height: 14px; }
.v3d__card--seat[hidden] + .v3d__back-chip { display: none; }