/* ==========================================================================
   The stage: chrome that floats over the 3D auditorium.
   Everything here is deliberately sparse: the room is the interface, and this
   layer only adds what the room cannot say for itself.
   ========================================================================== */

body.stage-page {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
/* The flat pages' grain and light-spill overlays are tuned for a document and
   wash a 3D scene out, so the stage brings its own: a very fine grain to break
   up the large flat gradients WebGL produces, and a vignette to keep the eye in
   the middle of the room. Both are `pointer-events: none`: the whole page
   under them is a drag surface. */
body.stage-page::before, body.stage-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: block;
}
body.stage-page::before {
  background: rgba(4, 9, 17, .025);
}
body.stage-page::after {
  background: radial-gradient(ellipse at 50% 45%,
    rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .18) 80%, rgba(0, 0, 0, .38) 100%);
}
/* A grain that crawls is worse than no grain. */
@media (prefers-reduced-motion: reduce) { body.stage-page::before { display: none; } }

/* --------------------------------------------------------------- glass --- */
/* One treatment for every control that floats over the room: a hairline ring,
   a blurred dark fill, and a spring on the way up. It is what makes chrome over
   a 3D scene read as *in front of* the scene rather than pasted on top of it :
   and unlike a filled button it never fights the room for attention.

   The numbers come from measuring a site that does this well (penguin.music):
   a 1.6px near-white ring at 85% rather than a 1px grey one, a fill dark enough
   to carry white text over any frame, an 8px blur, and an overshooting ease so
   hover feels like a physical lift. */
:root {
  --glass-fill:   rgba(4, 8, 14, .78);
  --glass-fill-2: rgba(9, 17, 28, .92);
  --glass-ring:   rgba(202, 214, 228, .35);
  --glass-blur:   blur(8px);
  --glass-lift:   0 6px 22px rgba(0, 0, 0, .35);
  --glass-lift-2: 0 10px 30px rgba(0, 0, 0, .5);
  --spring:       cubic-bezier(.34, 1.56, .64, 1);
}

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .46rem .92rem;
  border-radius: 5px;
  border: 1px solid var(--glass-ring);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
  color: var(--text);
  font: inherit; font-size: .84rem; font-weight: 630;
  letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--spring), background .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}
.pill:hover {
  transform: translateY(-2px);
  background: var(--glass-fill-2);
  border-color: #fff;
  box-shadow: var(--glass-lift-2);
}
.pill:active { transform: translateY(1px) scale(.985); }
.pill:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.pill.sm { padding: .38rem .85rem; font-size: .82rem; }
.pill.accent { border-color: #6385b0; background:#6385b0; color:#050a11; }
.pill.accent:hover { border-color: #8ca8ca; background:#8ca8ca; color:#03060b; }

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
}
#stage:active { cursor: grabbing; }
#stage:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only :focus { position: static; width: auto; height: auto; clip-path: none; }

/* ------------------------------------------------------------------ booting -- */
.stage-boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--ink);
  transition: opacity .7s ease, visibility .7s;
}
.stage-boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mark {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  letter-spacing: -.01em;
}
.boot-bar {
  width: min(220px, 50vw);
  height: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brass);
  transition: width .35s ease;
}
.boot-pct {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- top -- */
.stage-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1.1rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
           1.1rem max(1.25rem, env(safe-area-inset-left));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 11, .72), transparent);
  transition: opacity .45s ease;
}
.stage-top > * { pointer-events: auto; }
.stage-top .logo { font-size: 1.16rem; letter-spacing: .14em; }

.stage-nav { display: flex; align-items: center; gap: .9rem; }
/* `:not(.pill)` matters: this rule used to strip the background off every
   button in the nav, including the primary action, which left dark brass text
   on nothing and a stray box-shadow ring floating where the button should be. */
.stage-nav a:not(.pill), .stage-nav button:not(.pill) {
  font: inherit;
  font-size: .78rem;
  font-weight: 500;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: .35rem .1rem;
}
.stage-nav a:not(.pill):hover, .stage-nav button:not(.pill):hover { color: var(--text); }

/* ------------------------------------------------------------------- tools -- */
.stage-tools {
  position: fixed;
  z-index: 20;
  top: 50%;
  right: max(1rem, env(safe-area-inset-right));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .3rem;
  border-radius: 6px;
  background: var(--glass-fill);
  border: 1px solid rgba(232, 227, 214, .22);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
  transition: opacity .45s ease;
}
.tool {
  width: 82px; min-height: 44px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .05rem;
  padding: .44rem .58rem;
  border-radius: 3px;
  border: 1px solid transparent;
  background: none;
  color: var(--dim);
  cursor: pointer;
  text-align: left;
  transition: color .15s, background .15s, border-color .15s;
}
.tool:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.tool[aria-pressed="true"], .tool.active {
  color: var(--brass);
  border-color: rgba(255, 194, 87, .35);
  background: rgba(255, 194, 87, .1);
}
.tool:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.tool:disabled { opacity: .35; cursor: not-allowed; }
.tool-kicker {
  color: var(--faint);
  font-size: .48rem;
  font-weight: 650;
  letter-spacing: .13em;
  line-height: 1.1;
  text-transform: uppercase;
}
.tool-label {
  color: currentColor;
  font-size: .64rem;
  font-weight: 580;
  line-height: 1.2;
}

/* ------------------------------------------------------------------- panel -- */
.stage-panel {
  position: fixed;
  z-index: 25;
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: min(20rem, calc(100vw - 2.5rem));
  max-height: min(54vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  border-radius: 6px;
  background: rgba(5, 10, 17, .9);
  border: 1px solid rgba(176, 205, 222, .24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .46), inset 0 1px rgba(235, 242, 242, .035);
  animation: panel-in .3s var(--ease);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.stage-panel h2 { font-size: 1.05rem; }
.stage-panel .panel-close {
  position: absolute;
  top: .8rem; right: .8rem;
  min-width: 50px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, .05);
  color: var(--dim);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.stage-panel .panel-close:hover { color: var(--text); background: rgba(255, 255, 255, .1); }

.seat-headline {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--brass);
  margin: .2rem 0 .1rem;
}

.roster { display: grid; gap: .5rem; margin-top: .9rem; }
.roster-row {
  display: flex; align-items: center; gap: .65rem;
  font-size: .875rem;
}
.roster-row .seat-tag { min-width: 2.9rem; }
.roster-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-avatar,
.seat-person img {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(216, 229, 232, .24);
  background: rgba(255, 255, 255, .06);
}
.roster-avatar.fallback { display: grid; place-items: center; font-size: .65rem; }
.seat-person { display: flex; align-items: center; gap: .65rem; margin-top: .35rem; }
.seat-person img { width: 2.25rem; height: 2.25rem; }
.roster-empty { color: var(--faint); font-size: .85rem; }

/* -------------------------------------------------------------------- hint -- */
/* The one instruction the room can't give itself. A pill, like everything else
   over the scene, so it sits *in front of* the room instead of looking like
   text that leaked onto the floor. */
.stage-hint {
  position: fixed;
  z-index: 15;
  left: 50%;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .32rem .82rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
  transition: opacity .5s ease;
  white-space: nowrap;
}

/* ----------------------------------------------------------- home screen --- */
.screen-home {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  z-index: 34;
  display: grid;
  grid-template-rows: 1fr auto;
  box-sizing: border-box;
  margin: 0;
  padding: 11cqh 9.5cqw 6.5cqh;
  overflow: hidden;
  clip-path: none;
  white-space: normal;
  border: 0;
  color: #f2f1eb;
  container-type: size;
  transform-origin: 0 0;
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;
  transition: opacity .22s ease;
}
.screen-home-copy {
  align-self: center;
  width: 53%;
  text-shadow: 0 0 2.4cqh rgba(185, 219, 245, .2);
}
.screen-home-eyebrow {
  margin-bottom: 4.2cqh;
  color: rgba(226, 236, 244, .72);
  font: 650 2.7cqh/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.screen-home h1 {
  margin: 0;
  color: #f2f1eb;
  font: 430 12.6cqh/.96 var(--sans);
  letter-spacing: -.055em;
}
.screen-home p {
  margin: 4.4cqh 0 0;
  color: rgba(226, 232, 236, .72);
  font: 430 3.8cqh/1.45 var(--sans);
}
.screen-home-actions {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 6.2cqh;
}
.screen-home-actions button {
  min-height: 8.8cqh;
  padding: 0 2.2cqw;
  border: 1px solid rgba(226, 235, 238, .32);
  border-radius: 4px;
  background: rgba(12, 20, 28, .18);
  color: rgba(239, 241, 238, .9);
  font: 610 3cqh/1 var(--sans);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.screen-home-actions button.primary {
  border-color: rgba(215, 232, 241, .7);
  background: rgba(220, 235, 241, .88);
  color: #101820;
}
.screen-home-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 244, 239, .84);
  background: rgba(222, 236, 241, .18);
}
.screen-home-actions button.primary:hover { background: #edf3f4; }
.screen-home-actions button:focus-visible {
  outline: 2px solid #d8e8ee;
  outline-offset: 3px;
}
.screen-home-links {
  display: flex;
  justify-content: flex-end;
  gap: 2.2cqw;
  font: 560 2.3cqh/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.screen-home-links a {
  color: rgba(226, 236, 244, .48);
  text-decoration: none;
  pointer-events: auto;
}
.screen-home-links a:hover,
.screen-home-links a:focus-visible { color: rgba(242, 244, 239, .9); }
body.entering-screen .screen-home,
body.screen-flow-open .screen-home { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------- screen flow --- */
.screen-flow {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  z-index: 35;
  display: block;
  color: #f1f0ea;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: projection-in .18s ease both;
  container-type: size;
  transform-origin: 0 0;
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}
.screen-flow::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(180deg,
      rgba(241, 244, 239, .025) 0,
      rgba(241, 244, 239, .025) 1px,
      rgba(3, 7, 11, .025) 1px,
      rgba(3, 7, 11, .025) 3px);
  box-shadow:
    inset 0 0 3.5rem rgba(2, 5, 9, .38),
    inset 0 0 .8rem rgba(205, 228, 239, .05);
  mix-blend-mode: soft-light;
}
.screen-flow.hidden { display: none; }
@keyframes projection-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.screen-flow-bar {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(2.35rem, 8cqh, 3.4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 8.5%;
  border: 0;
  background: transparent;
}
.screen-flow-close {
  justify-self: start;
  border: 0;
  background: none;
  color: rgba(226, 233, 233, .62);
  font: 560 .68rem var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.screen-flow-close:hover { color: #f4f1e9; text-shadow: 0 0 1rem rgba(195, 223, 239, .5); }
.screen-flow-close:focus-visible {
  outline: 1px solid rgba(217, 229, 231, .72);
  outline-offset: .35rem;
}
.screen-flow-house {
  color: rgba(242, 240, 231, .82);
  font: 620 .72rem var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 1.4rem rgba(170, 212, 238, .28);
}
.screen-flow-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-top: clamp(2.35rem, 8cqh, 3.4rem);
  background: transparent;
  scrollbar-color: rgba(174, 202, 216, .3) transparent;
}
.screen-flow-body,
.screen-flow-body * { box-sizing: border-box; }
.screen-view {
  width: 82%;
  max-width: none;
  min-height: 0;
  margin: clamp(.8rem, 4cqh, 2.25rem) auto 8cqh;
  padding: 0;
}
.screen-view-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(.65rem, 2.2cqh, 1.2rem);
  border-bottom: 1px solid rgba(214, 228, 233, .18);
}
.screen-view-head h2 {
  color: #f3f0e7;
  font-size: clamp(1.45rem, 4cqh, 2.45rem);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -.045em;
}
.screen-view-head .eyebrow { margin-bottom: .34rem; }
.screen-view-actions { display: flex; align-items: center; gap: .75rem; }
.screen-view-actions a {
  color: rgba(224, 232, 233, .62);
  font-size: .72rem;
  text-decoration: none;
}
.screen-view-content { min-width: 0; padding-top: clamp(.8rem, 2.7cqh, 1.45rem); }
.screen-loading-state {
  width: min(28rem, 52%);
  min-height: 62%;
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: .75rem;
  color: rgba(221, 232, 233, .62);
  font-size: .65rem;
  font-weight: 560;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.screen-loading-line {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: rgba(203, 224, 234, .13);
}
.screen-loading-line::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(218, 237, 244, .88), transparent);
  animation: screen-read 1.45s cubic-bezier(.5, 0, .25, 1) infinite;
}
@keyframes screen-read { to { transform: translateX(365%); } }
.screen-create {
  width: 82%;
  height: calc(100% - clamp(2.35rem, 8cqh, 3.4rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(17rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 7cqw, 6rem);
}
.screen-create-copy .eyebrow { color: rgba(171, 208, 226, .75); }
.screen-create-copy h2 {
  color: #f3f0e7;
  font-size: clamp(2rem, 7cqh, 4rem);
  font-weight: 420;
  line-height: .94;
  letter-spacing: -.055em;
  text-shadow: 0 0 2.4rem rgba(177, 218, 239, .13);
}
.screen-create-copy p {
  max-width: 30rem;
  margin-top: .8rem;
  color: rgba(219, 228, 229, .64);
  font-size: clamp(.78rem, 2cqh, 1rem);
  line-height: 1.55;
}
.screen-create-action { min-width: 0; }
.screen-ticket-drop {
  width: 100%;
  min-height: clamp(9rem, 34cqh, 15rem);
  display: grid;
  place-items: center;
  align-content: center;
  gap: .45rem;
  padding: 1.5rem;
  color: #f1efe8;
  font: inherit;
  cursor: pointer;
  border: 1px solid rgba(208, 226, 234, .28);
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 35%, rgba(138, 193, 220, .13), transparent 45%),
    rgba(5, 11, 17, .24);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.screen-ticket-drop:hover,
.screen-ticket-drop.over {
  border-color: rgba(213, 234, 243, .68);
  background-color: rgba(13, 27, 38, .45);
  transform: translateY(-2px);
}
.screen-ticket-drop:focus-visible { outline: 2px solid rgba(190, 224, 239, .62); outline-offset: 4px; }
.screen-ticket-drop:disabled { cursor: wait; transform: none; opacity: .76; }
.screen-ticket-drop strong { font-size: clamp(.9rem, 2.5cqh, 1.2rem); font-weight: 560; }
.screen-ticket-drop span:last-child { color: rgba(210, 222, 224, .55); font-size: .72rem; }
.screen-ticket-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin-bottom: .3rem;
  border: 1px solid rgba(211, 230, 237, .3);
  border-radius: 50%;
  color: rgba(222, 237, 241, .8);
  font-size: 1.25rem;
  font-weight: 300;
}
.screen-ticket-drop.reading .screen-ticket-icon {
  color: transparent;
  border-color: rgba(211, 230, 237, .16);
  border-top-color: rgba(222, 237, 241, .82);
  animation: ticket-spin .8s linear infinite;
}
@keyframes ticket-spin { to { transform: rotate(1turn); } }
.screen-create-status {
  min-height: 1.1rem;
  margin-top: .6rem;
  color: rgba(213, 226, 228, .62);
  font-size: .68rem;
  text-align: center;
}
.screen-create-review {
  display: grid;
  gap: .6rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(214, 228, 233, .18);
}
.screen-create-review.hidden { display: none; }
.screen-create-review .field { margin: 0; }
.screen-create-review input {
  min-width: 0;
  padding: .55rem .65rem;
  color: #f2f0e9;
  border: 1px solid rgba(207, 225, 232, .28);
  border-radius: 2px;
  background: rgba(5, 11, 17, .45);
}
.screen-flow-signin {
  width: min(25rem, 42%);
  margin: clamp(1rem, 6%, 3rem) 0 0 10%;
  padding: 0;
  border: 0;
}
.screen-flow-signin .eyebrow {
  color: rgba(168, 204, 225, .72);
  font-size: .62rem;
  letter-spacing: .2em;
}
.screen-flow-signin h2 {
  max-width: 24rem;
  color: #f3f0e7;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  font-weight: 430;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-shadow: 0 0 1.4rem rgba(179, 218, 239, .16);
}
.screen-flow-signin p { color: rgba(217, 225, 226, .62); }
.screen-manage-shell {
  width: 82%;
  max-width: none;
  margin: clamp(.7rem, 3cqh, 1.7rem) auto 8cqh;
  padding: 0;
}
.screen-manage-shell .card {
  border-radius: 2px;
  background: rgba(6, 12, 18, .23);
  border-color: rgba(217, 226, 228, .16);
  box-shadow: inset 0 1px rgba(239, 240, 230, .025);
}
.screen-manage-shell .card.empty {
  border-right: 0;
  border-left: 0;
  background: transparent;
  padding: clamp(2.5rem, 8vh, 5.5rem) 1rem;
}
.screen-flow .modal-backdrop {
  position: absolute;
  z-index: 7;
  inset: 0;
  padding: 5cqh 10%;
  overflow: auto;
  background: rgba(4, 8, 12, .78);
  backdrop-filter: blur(5px);
}
.screen-flow .modal {
  width: min(26rem, 62%);
  max-width: none;
  padding: clamp(.8rem, 2.8cqh, 1.45rem);
  border-radius: 2px;
  background: rgba(7, 13, 19, .94);
  border-color: rgba(209, 225, 231, .25);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .32);
}
.screen-dashboard .dash-section + .dash-section { margin-top: 3.2cqh; }
.screen-dashboard .dash-head { margin-bottom: 1.2cqh; }
.screen-dashboard .dash-head h2 { font-size: clamp(.95rem, 2.5cqh, 1.3rem); }
.screen-dashboard .card,
.screen-manage-shell .card {
  border-radius: 2px;
  background: rgba(5, 11, 17, .26);
  border-color: rgba(211, 226, 232, .15);
  box-shadow: none;
}
.screen-dashboard table.list,
.screen-manage-shell table.list { font-size: clamp(.64rem, 1.65cqh, .84rem); }
.screen-dashboard table.list th,
.screen-dashboard table.list td,
.screen-manage-shell table.list th,
.screen-manage-shell table.list td { padding: clamp(.38rem, 1.4cqh, .72rem) .65rem; }
.screen-dashboard .invite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-dashboard .invite { padding: clamp(.48rem, 1.6cqh, .8rem); border-radius: 2px; }
.screen-manage-shell h1 { font-size: clamp(1.3rem, 3.7cqh, 2.15rem); }
.screen-manage-shell .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.screen-manage-shell .stat { padding: clamp(.45rem, 1.6cqh, .85rem); }
.screen-manage-shell .stat .v { font-size: clamp(1rem, 3cqh, 1.45rem); }
body.screen-flow-open .stage-top,
body.screen-flow-open .stage-tools,
body.screen-flow-open .stage-hint { opacity: 0; pointer-events: none; }
body.opening-camera .stage-top,
body.opening-camera .stage-tools,
body.opening-camera .stage-hint { opacity: 0; pointer-events: none; }
body.screen-flow-open #stage:focus-visible { outline: none; }

.screen-flow .btn {
  color: #0a1117;
  background: #e7e9e4;
  border-radius: 2px;
  box-shadow: 0 0 1.8rem rgba(180, 217, 235, .12);
  min-height: 2.3rem;
  padding: .52rem .86rem;
  font-size: .78rem;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease,
              border-color .18s ease;
}
.screen-flow .btn:hover { background: #f3f0e7; transform: translateY(-1px); }
.screen-flow .btn:active { transform: translateY(0) scale(.985); }
.screen-flow .btn.ghost,
.screen-flow .btn.quiet {
  color: rgba(239, 239, 232, .84);
  background: rgba(235, 238, 232, .025);
  border-color: rgba(222, 230, 229, .23);
  box-shadow: none;
}
.screen-flow a { color: #bed9e4; text-decoration-color: rgba(190, 217, 228, .3); }
.screen-flow label,
.screen-flow .label { color: rgba(196, 210, 214, .62); }
.screen-flow .dim { color: rgba(211, 221, 223, .62); }
.screen-flow .faint { color: rgba(185, 201, 207, .52); }

@media (max-width: 700px) {
  .screen-flow { display: block; }
  .screen-flow-bar {
    height: 1.75rem;
    padding: 0 .62rem;
  }
  .screen-flow-body { padding-top: 1.75rem; }
  .screen-flow-close {
    font-size: .58rem;
    letter-spacing: .06em;
  }
  .screen-flow-house {
    font-size: .62rem;
    letter-spacing: .12em;
  }
  .screen-flow-bar { grid-template-columns: 1fr auto; }
  .screen-flow-house { justify-self:end; }
  .screen-flow-signin {
    width: 76%;
    max-width: 23rem;
    margin: .35rem auto;
    padding: .22rem 0 .75rem;
  }
  .screen-flow-signin > .eyebrow { display: none; }
  .screen-flow-signin h2 {
    font-size: 1rem;
    line-height: 1.15;
  }
  .screen-flow-signin h2 + .small.dim { display: none; }
  .screen-flow-signin h2 ~ div { margin-top: .35rem !important; }
  .screen-flow input,
  .screen-flow textarea,
  .screen-flow select { font-size: 16px; }
  .screen-flow .btn {
    min-height: 1.72rem;
    padding: .22rem .58rem;
    font-size: .64rem;
  }
  .screen-view,
  .screen-manage-shell {
    width: 84%;
    margin: .35rem auto 1rem;
  }
  .screen-view-head { gap: .4rem; padding-bottom: .3rem; }
  .screen-view-head h2 { font-size: .95rem; }
  .screen-view-head .eyebrow { display: none; }
  .screen-view-actions { gap: .35rem; }
  .screen-view-actions a { font-size: .52rem; }
  .screen-view-content { padding-top: .35rem; }
  .screen-loading-state { width: 58%; min-height: 70%; font-size: .5rem; }
  .screen-dashboard .dash-section + .dash-section { margin-top: .55rem; }
  .screen-dashboard .dash-head { margin-bottom: .22rem; }
  .screen-dashboard .dash-head h2 { font-size: .68rem; }
  .screen-dashboard .invite-grid { grid-template-columns: 1fr 1fr; gap: .3rem; }
  .screen-dashboard .invite { padding: .32rem; gap: .08rem; }
  .screen-dashboard .invite strong { font-size: .58rem; }
  .screen-dashboard .invite span { font-size: .48rem; }
  .screen-dashboard .pill-tag { margin-top: .15rem; padding: .1rem .3rem; font-size: .44rem; }
  .screen-dashboard .table-wrap,
  .screen-manage-shell .table-wrap { max-width: 100%; overflow-x: auto; }
  .screen-dashboard table.list,
  .screen-manage-shell table.list { font-size: .48rem; }
  .screen-dashboard table.list th,
  .screen-dashboard table.list td,
  .screen-manage-shell table.list th,
  .screen-manage-shell table.list td { padding: .2rem .28rem; }
  .screen-manage-shell .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .screen-manage-shell .stat { padding: .25rem; }
  .screen-manage-shell .stat .k,
  .screen-manage-shell .stat .sub { font-size: .42rem; }
  .screen-manage-shell .stat .v { font-size: .65rem; }
  .screen-flow .modal { width: 76%; padding: .55rem; }
  .screen-create {
    width: 82%;
    height: calc(100% - 1.75rem);
    grid-template-columns: .9fr 1.1fr;
    gap: .65rem;
  }
  .screen-create-copy .eyebrow { display: none; }
  .screen-create-copy h2 { font-size: 1.7rem; }
  .screen-create-copy p { margin-top: .25rem; font-size: .68rem; line-height: 1.3; }
  .screen-ticket-drop { min-height: 4rem; padding: .5rem; gap: .1rem; }
  .screen-ticket-drop strong { font-size: .76rem; }
  .screen-ticket-drop span:last-child { font-size: .58rem; }
  .screen-ticket-icon { width: 1.35rem; height: 1.35rem; margin: 0; font-size: .78rem; }
  .screen-create-status { min-height: .5rem; margin-top: .15rem; font-size: .42rem; }
  .screen-create-review { gap: .2rem; padding: .25rem 0; }
  .screen-create-review p { font-size: .45rem; }
  .screen-create-review label { font-size: .42rem; margin-bottom: .1rem; }
  .screen-create-review input { min-height: 1.35rem; padding: .15rem .25rem; font-size: 16px; }
}
.stage-hint.gone { opacity: 0; }

.stage-fallback {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--ink);
}
.stage-fallback .card { max-width: 26rem; text-align: center; }

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 700px) {
  .stage-tools {
    top: auto;
    bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 3.2rem);
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
  }
  .tool { width: 74px; min-height: 42px; }
  .stage-panel {
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    width: auto;
    bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 6.6rem);
    max-height: 46vh;
  }
  .stage-top { padding-bottom: .8rem; }
  .stage-top .logo { font-size: 1.2rem; }
  .seat-headline { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-panel { animation: none; }
}

/* ------------------------------------------------------------------ legend -- */
/* Seat colours need naming, and the 3D view has no room for a table. */
.stage-legend {
  position: fixed;
  z-index: 18;
  left: max(1.25rem, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .5rem;
  padding: .8rem .9rem;
  border-radius: 6px;
  background: var(--glass-fill);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
  pointer-events: none;
}
.stage-legend div {
  display: flex; align-items: center; gap: .55rem;
  font-size: .74rem; color: var(--dim); white-space: nowrap;
}
.stage-legend i {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.stage-legend.hidden { display: none; }

@media (max-width: 700px) {
  .stage-legend {
    top: auto;
    bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 3.2rem);
    left: max(.75rem, env(safe-area-inset-left));
    transform: none;
    grid-auto-flow: column;
    gap: .7rem;
    padding: .5rem .7rem;
  }
  .stage-legend div { font-size: .66rem; }
  .stage-legend span { display: none; }
}