/* The club queue is deliberately scoped: the rest of the landing keeps its skin. */
.club-queue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0 94px;
  background: radial-gradient(ellipse at 15% 55%, rgba(29, 112, 151, .11), transparent 52%), radial-gradient(ellipse at 85% 40%, rgba(126, 35, 112, .12), transparent 50%), #080811;
  border-block: 1px solid rgba(161, 140, 218, .13);
  scroll-margin-top: 60px;
}
body.queue-in-view .hud.mini,
body.queue-in-view .hud.dist { opacity: 0; pointer-events: none; }
.club-queue::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #07060f, transparent 20%, transparent 85%, #07060f);
}
.club-queue .queue-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 22px;
}
.club-queue .queue-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font: 800 13px/1.2 var(--cond, sans-serif);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ice, #33d6ff);
}
.club-queue .queue-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px rgba(51, 214, 255, .7);
}
.club-queue h2 {
  margin: 0 0 16px;
  font: 400 clamp(38px, 5.5vw, 70px)/1.02 var(--head, sans-serif);
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #f4f1ff;
  text-wrap: balance;
}
.club-queue .queue-lede {
  max-width: 630px;
  color: #ada9c4;
  font-size: 15px;
  line-height: 1.75;
}
.club-queue .queue-stat {
  flex: 0 0 auto;
  min-width: 165px;
  padding: 3px 0 4px 25px;
  border-inline-start: 1px solid rgba(51, 214, 255, .26);
  text-align: end;
}
.club-queue .queue-stat strong {
  display: block;
  font: 400 clamp(46px, 6vw, 76px)/1 var(--head, sans-serif);
  letter-spacing: .035em;
  color: var(--gold, #ffd166);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 35px rgba(255, 209, 102, .13);
}
.club-queue .queue-stat span,
.club-queue .queue-stat small {
  display: block;
  margin-top: 9px;
  font: 700 12px/1.25 var(--cond, sans-serif);
  color: #a7a1c4;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.club-queue .queue-stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 49vw, 590px);
  overflow: hidden;
  border: 1px solid rgba(169, 168, 213, .13);
  border-radius: 18px;
  background: radial-gradient(ellipse at 29% 49%, rgba(34, 154, 190, .11), transparent 48%), radial-gradient(ellipse at 79% 34%, rgba(230, 50, 137, .1), transparent 47%), linear-gradient(155deg, #101225, #080a15 74%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .035);
  contain: layout paint;
}
.club-queue .queue-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 75px rgba(6, 7, 18, .3);
}
.club-queue .queue-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: pan-y;
}
.club-queue .queue-scene-caption {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 13px 3px;
  border-bottom: 1px solid rgba(169, 168, 213, .1);
  color: #bdd1e1;
  font: 700 11px/1.45 var(--cond, sans-serif);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.club-queue .queue-scene-caption::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid var(--ice, #33d6ff);
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(51, 214, 255, .35);
}
.club-queue .queue-scene-caption #queue-shown { color: #8c87a4; }
.club-queue .queue-scene-caption .queue-control { margin-inline-start: auto; }
.club-queue .queue-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid rgba(150, 163, 195, .22);
  border-radius: 6px;
  background: rgba(22, 26, 43, .65);
  color: #c1cadd;
  font: 700 12px/1.2 var(--cond, sans-serif);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.club-queue .queue-control:hover {
  border-color: rgba(51, 214, 255, .6);
  color: #effbff;
  background: rgba(36, 83, 107, .25);
}
.club-queue .queue-control:focus-visible {
  outline: 2px solid #33d6ff;
  outline-offset: 4px;
}
.club-queue .queue-control:disabled { opacity: .5; cursor: wait; }
.club-queue #queue-retry { margin-top: 10px; }
.club-queue .queue-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 3px 0;
  color: #918ba9;
  font-size: 12px;
  line-height: 1.7;
}
.club-queue .queue-status {
  margin: 0;
  color: #c4d5e4;
  font-size: 13px;
  min-height: 1.7em;
}
.club-queue .queue-status[data-error="true"] { color: #ffd166; }
.club-queue .queue-status strong { color: var(--ice, #33d6ff); }
.club-queue .queue-ticket {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 4px 10px;
  border: 1px solid rgba(51, 214, 255, .18);
  border-radius: 4px;
  background: rgba(51, 214, 255, .04);
  font: 700 11px/1.5 var(--cond, sans-serif);
  letter-spacing: .11em;
  color: #a5bdcf;
}
.club-queue .queue-ticket b { color: var(--ice, #33d6ff); font-size: 13px; }
.club-queue .queue-note { max-width: 420px; text-align: end; font-size: 11px; line-height: 1.8; }
.club-queue .queue-footer a { text-underline-offset: 3px; }
.club-queue .queue-footer a:hover { color: var(--ice, #33d6ff); }
.club-queue .queue-fallback,
.club-queue .queue-graphics,
.club-queue .queue-loading {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 30px;
  gap: 12px;
  color: #aaa7c0;
  font-size: 14px;
  text-align: center;
}
.club-queue .queue-graphics { z-index: 2; background: rgba(8, 10, 21, .7); }
.club-queue .queue-loading::before {
  content: "";
  width: 42px;
  height: 54px;
  border: 2px solid var(--ice, #33d6ff);
  border-radius: 5px;
  box-shadow: 0 0 26px rgba(51, 214, 255, .16), inset 0 0 18px rgba(51, 214, 255, .08);
}
.club-queue .queue-stage[data-scene-state="ready"] .queue-loading,
.club-queue .queue-stage[data-scene-state="ready"] .queue-fallback,
.club-queue [hidden] { display: none !important; }
.club-queue .queue-stage[data-scene-state="unavailable"] .queue-canvas { opacity: .25; }
@media (max-width: 700px) {
  .club-queue { padding: 66px 0 70px; }
  .club-queue .queue-heading { gap: 18px; align-items: flex-start; }
  .club-queue h2 { font-size: clamp(32px, 7.2vw, 46px); margin-bottom: 13px; }
  .club-queue .queue-kicker { font-size: 11px; letter-spacing: .17em; }
  .club-queue .queue-lede { font-size: 13px; line-height: 1.7; }
  .club-queue .queue-stat { min-width: 95px; padding-inline-start: 15px; margin-top: 24px; }
  .club-queue .queue-stat strong { font-size: 45px; }
  .club-queue .queue-stat span, .club-queue .queue-stat small { font-size: 10px; letter-spacing: .09em; }
  .club-queue .queue-stage { height: clamp(330px, 86vw, 450px); border-radius: 12px; }
  .club-queue .queue-scene-caption { gap: 8px; font-size: 10px; }
  .club-queue .queue-note { max-width: 100%; text-align: start; }
  .club-queue .queue-footer { gap: 8px; padding-top: 14px; }
}
@media (max-width: 410px) {
  .club-queue .queue-heading { flex-wrap: wrap; }
  .club-queue .queue-stat { width: 100%; margin-top: 0; display: flex; gap: 12px; align-items: baseline; padding: 0; border: 0; text-align: start; }
  .club-queue .queue-stat strong { font-size: 42px; }
  .club-queue .queue-stat span, .club-queue .queue-stat small { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .club-queue *, .club-queue *::before, .club-queue *::after { animation: none !important; transition: none !important; }
}