/* 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;
  visibility: visible;   /* shows through the phase gate's hidden .v3d: that lasts the whole module load */
}
.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 224px; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 3px 3px 3px 10px;
  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: 27px;
  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: 13px; } }   /* 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 { min-height: 29px; min-width: 36px; font-size: 13px; border-radius: calc(var(--radius-md) - 2px); }
.v3d__search > .v3d__ico { width: 16px; height: 16px; }
.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; }
.v3d__search-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 180px; overflow-y: auto; }
.v3d__search-choice { min-height: 36px; padding: 4px 8px; font: inherit; color: var(--text-primary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }

/* 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__corner {
  position: absolute; z-index: 4;
  right: var(--edge); bottom: calc(var(--edge) + var(--safe-bottom, 0px));
  display: flex; flex-direction: row-reverse; align-items: center; gap: var(--space-2);
}
.v3d__corner-btn { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; }
.v3d__corner-btn .v3d__ico { width: 16px; height: 16px; }
/* quieter than the other controls (owner 2026-11-01): faded */
.v3d__help { opacity: 0.55; transition: opacity 0.2s; }
.v3d__help:focus-visible { opacity: 1; }
@media (hover: hover) { .v3d__help:hover { opacity: 1; } }
/* the full-screen button stays in the corner in every mode (owner 2026-11-02); ? steps aside */
.v3d:has(.v3d__sheet:not([hidden])) .v3d__help,
.v3d:has(#v3d-inapp:not([hidden])) .v3d__help,
.v3d:has(#v3d-seat-card:not([hidden])) .v3d__help,
.v3d:has(.v3d__guide) .v3d__help { display: none; }
@media (max-width: 560px) { .v3d__corner { flex-direction: column-reverse; } }
/* full screen (owner 2026-11-02): the class also carries phones with no
   Fullscreen API (iPhone), where the page just fills the browser window */
#v3d-full .v3d__full-off, #v3d-full[aria-pressed="true"] .v3d__full-on { display: none; }
#v3d-full[aria-pressed="true"] .v3d__full-off { display: inline; }
html.v3d-full .ppw-nav { display: none; }
html.v3d-full .v3d { position: fixed; inset: 0; z-index: 10; height: 100vh; height: 100dvh; }   /* above the fog layers, below tooltips and the gallery */
.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 */
/* framed to the price chip's height (owner 2026-11-02): down = collapse, up = expand; ::after keeps the tap area */
.v3d__card-toggle { position: relative; flex: none; width: 24px; height: 26.5px; min-width: 0; min-height: 0; padding: 0; border-radius: var(--radius-pill); background: none; backdrop-filter: none; }
/* faded white, in every state (owner 2026-11-02); text-primary so it stays visible in light mode */
.v3d__card-toggle.v3d__card-toggle, .v3d__card-toggle.v3d__card-toggle:active { border: 1px solid color-mix(in srgb, var(--text-primary) 35%, transparent); color: color-mix(in srgb, var(--text-primary) 65%, transparent); background: none; }
@media (hover: hover) { .v3d__card-toggle.v3d__card-toggle:hover { border: 1px solid color-mix(in srgb, var(--text-primary) 35%, transparent); color: color-mix(in srgb, var(--text-primary) 65%, transparent); background: none; } }
.v3d__card-toggle::after { content: ''; position: absolute; inset: -8px -6px; }
.v3d__card-toggle .v3d__ico { width: 14px; height: 14px; transition: transform 0.2s; }
@media (max-width: 560px) { .v3d__card-toggle { width: 22px; height: 21.5px; } }
.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; }


/* song card + lyric line (owner 2026-11-02): compact, top-left under the search so the stage in the middle stays clear */
.v3d__song { left: var(--edge); right: auto; top: calc(var(--edge) + 56px); bottom: auto; width: min(280px, calc(100% - 2 * var(--edge) - 56px)); gap: 4px; padding: 8px 10px; z-index: 2; animation: none; }
.v3d__lyric[hidden], .v3d__song-status[hidden] { display: none; }
.v3d__song-row { display: flex; align-items: center; gap: 8px; }
.v3d__song-play, .v3d__song-close { flex: none; min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
.v3d__song-close { border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v3d__song-play:disabled { opacity: 0.5; }
.v3d__song-play .v3d__ico-pause, .v3d__song-play.is-playing .v3d__ico-play { display: none; }
.v3d__song-play.is-playing .v3d__ico-pause { display: block; }
.v3d__song-name { flex: 1; min-width: 0; display: grid; font-size: 13px; line-height: 1.25; }
.v3d__song-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d__song-seek { width: 100%; min-height: 20px; margin: 0; accent-color: var(--accent-gold); }
.v3d__song-time { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.v3d__song-status { margin: 0; font-size: 11px; color: var(--text-secondary); }
.v3d__song-note { margin: 0; font-size: 10px; line-height: 1.35; color: var(--text-secondary); }
.v3d__lyric { position: absolute; z-index: 2; left: var(--edge); width: fit-content; max-width: min(280px, calc(100% - 2 * var(--edge) - 56px)); margin: 0; padding: 4px 10px; 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-size: 13px; font-weight: 500; pointer-events: none; }
/* phone overview: the stage fills the top, so the card drops to the bottom corner over the seats. Seated or with a seat card open, the bottom is taken and it stays up top. */
@media (max-width: 560px) {
  body:not(.v3d--pov) #v3d-seat-card[hidden] ~ .v3d__song { top: auto; bottom: calc(var(--edge) + var(--safe-bottom, 0px) + 52px); }
}
/* song open: the "tap a seat" hint steps aside so it never collides with the card (owner 2026-11-02) */
.v3d:has(#v3d-song:not([hidden])) #v3d-hint { display: none; }
@media (max-width: 560px) {
  body:not(.v3d--pov) #v3d-seat-card[hidden] ~ .v3d__song { bottom: calc(var(--edge) + var(--safe-bottom, 0px)); }
}
.v3d__lyric::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.12em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%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'%3E%3Cpath d='M9 18V5l11-2v13' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* phones (owner 2026-11-02): smaller top row, side column and seated info bar so
   they cover less of the view; ::after keeps each tap target at 44 px */
@media (max-width: 560px) {
  .v3d__hud .v3d__btn--icon { position: relative; min-width: 36px; min-height: 36px; }
  .v3d__hud .v3d__btn--icon::after { content: ''; position: absolute; inset: -4px; }
  .v3d__hud .v3d__btn--icon .v3d__ico { width: 18px; height: 18px; }
  .v3d__hud--zoom { top: calc(var(--edge) + 48px); }
  .v3d__hud-bar { height: 36px; }
  .v3d__hud-bar .v3d__btn { min-height: 34px; }
  .v3d__hud-title strong { font-size: 14px; }
  .v3d__hud-title span { font-size: 11px; }
  .v3d__song { top: calc(var(--edge) + 48px); }
}

/* the page's longer nav title stays on one line, so the bar keeps the height of other /p pages */
.ppw-nav__brand { flex: none; }
.ppw-nav__brand-title { white-space: nowrap; }

/* seat card share (owner 2026-11-06): an icon chip in the links row; the share row opens at the card's foot */
.v3d__links .v3d__share-btn { flex: none; margin-left: auto; cursor: pointer; font: inherit; }
.v3d__share { margin-top: var(--space-2); }
.v3d__share .share-row { justify-content: flex-start; }
.v3d__card--collapsed .v3d__share { display: none; }