/* Backstage uses the shared phone and layout. Only the pass is artwork. */
.backstage-page .phone::before,
.backstage-page .phone::after { display: none; }

.backstage-page .radio-screen {
  background:
    radial-gradient(ellipse at 49% 51%, rgba(118, 54, 20, .20), transparent 57%),
    linear-gradient(135deg, #080706, #020202 70%);
}
.backstage-display { position: absolute; inset: 0; overflow: hidden; }
.pass-scene {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 400px;
  aspect-ratio: 944 / 1666;
}
.backstage-pass-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.pass-scene::after {
  position: absolute;
  z-index: 1;
  top: 643px;
  left: 198px;
  width: 70px;
  height: 24px;
  background: url("backstage-vip-isolated.png") -198px -588px / 400px auto no-repeat;
  content: "";
  pointer-events: none;
}
.pass-version {
  position: absolute;
  z-index: 2;
  top: 642px;
  left: 157px;
  width: 110px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #f0c781;
  background: transparent;
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 1px 1px #1c0f05, 0 0 3px rgba(244, 177, 76, .26);
  transform: rotate(9deg);
  pointer-events: none;
}
.band-lettering {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.vip-pass {
  position: absolute;
  left: 89px;
  top: 534px;
  width: 178px;
  height: 85px;
  margin: 0;
  color: #e5be7e;
  transform: matrix(.985, .156, -.20, .98, 0, 0);
  transform-origin: 0 0;
}
.pass-main {
  position: relative;
  width: 100%;
  height: 100%;
  animation: access-glow 5.6s ease-in-out infinite;
}
.pass-name-label, .pass-name {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 35px;
  text-align: center;
  text-transform: uppercase;
}
.pass-name-label {
  pointer-events: none;
  font-size: 13px;
  letter-spacing: 1.7px;
  text-shadow: inherit;
}
.pass-name {
  border-bottom: 1px solid currentColor;
  box-shadow: 0 5px 8px -6px currentColor;
  border-radius: 0;
  caret-color: #f8d594;
  outline: none;
  text-shadow: inherit;
  -webkit-appearance: none;
}
.pass-name:focus { border-color: currentColor; }
.pass-name[aria-invalid="true"] { border-color: #c78449; }
.vip-pass.has-value .pass-name-label { visibility: hidden; }
.pass-enter-hint, .pass-retry, .code-recovery {
  position: absolute;
  top: 39px;
  left: 0;
  width: 100%;
  min-height: 26px;
  padding: 0;
  border: 0;
  color: #bf965c;
  background: transparent;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.7px;
  cursor: pointer;
}
.pass-enter-hint:focus-visible, .pass-retry:focus-visible, .code-recovery:focus-visible {
  outline: 1px solid #cfa465;
  outline-offset: 2px;
}
.pass-message {
  margin: 0;
  padding: 0 2px;
  color: #e2b878;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
  text-align: center;
}
.code-recovery { top: 65px; min-height: 20px; font-size: 6px; letter-spacing: .9px; }
.vip-pass.is-message { top: 517px; }
.vip-pass.is-message .pass-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: none;
}
.vip-pass.is-long-message .pass-message { font-size: 12px; line-height: 1.25; }
.vip-pass.is-message .pass-retry,
.vip-pass.is-message .code-recovery {
  position: static;
  min-height: 20px;
  flex: none;
}
.vip-pass.is-message .pass-retry { font-size: 9px; }
.vip-pass.is-message .code-recovery { font-size: 7px; }
[hidden] { display: none !important; }
.backstage-page.is-backstage-editing .phone-stage {
  transform: translate(-50%, -50%) scale(var(--backstage-edit-scale, 1.3));
}
.backstage-page .phone-stage {
  transform: translate(-50%, -50%) scale(var(--backstage-rest-scale, var(--idle-scale, .9)));
  transition: transform .55s cubic-bezier(.2, .72, .2, 1), left .55s ease, top .55s ease, opacity .24s ease;
}
@keyframes access-glow {
  0%, 100% { color: #f5d18b; text-shadow: 0 0 8px rgba(245, 197, 114, .65); }
  25% { color: #866440; text-shadow: 0 0 1px transparent; }
  50% { color: #ffa24f; text-shadow: 0 0 9px rgba(255, 136, 44, .7); }
  75% { color: #895332; text-shadow: 0 0 1px transparent; }
}
.backstage-page.is-backstage-editing .floor-reflection { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pass-main { animation: none; color: #e5be7e; }
  .backstage-page .phone-stage { transition: none; }
}