:root {
  color-scheme: dark;
  --cyan: #24f4e5;
  --pink: #ff2f7d;
  --yellow: #ffe66c;
  --ink: #070610;
  --screen-gutter: 28px;
  --gift-guide-width: clamp(184px, 16vw, 224px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030208; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
.club-app { position: relative; width: 100%; height: 100%; height: 100dvh; min-height: 520px; overflow: hidden; isolation: isolate; }
#clubCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.club-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,2,8,.55) 0%, transparent 28%, transparent 70%, rgba(3,2,8,.7) 100%),
    radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.5) 100%);
}
.show-header, .show-stats, .event-card, .gift-guide, .show-footer, .start-audio, .operator-panel { position: absolute; z-index: 3; }
.show-header { top: 24px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 10px; align-items: center; }
.brand div { display: flex; flex-direction: column; }
.brand b { color: white; font-size: 15px; letter-spacing: 2px; text-shadow: 0 0 18px rgba(36,244,229,.55); }
.brand small { margin-top: 1px; color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: 2.4px; }
.live-dot { width: 12px; height: 12px; border: 3px solid rgba(255,255,255,.8); border-radius: 50%; background: #ff2f59; box-shadow: 0 0 18px #ff2f59; animation: livePulse 1.3s infinite; }
@keyframes livePulse { 50% { transform: scale(.78); opacity: .55; } }
.connection-pill { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: rgba(255,255,255,.55); background: rgba(4,3,10,.5); font-size: 9px; font-weight: 900; letter-spacing: 1.3px; backdrop-filter: blur(10px); }
.connection-pill.online { color: var(--cyan); border-color: rgba(36,244,229,.35); box-shadow: inset 0 0 20px rgba(36,244,229,.06); }
.show-stats { top: 72px; left: 50%; display: grid; grid-template-columns: 78px minmax(120px, 1fr) 78px; align-items: center; width: min(430px, calc(100% - 40px)); min-height: 48px; padding: 5px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; transform: translateX(-50%); background: linear-gradient(110deg, rgba(6,5,15,.86), rgba(16,8,25,.72)); box-shadow: 0 12px 38px rgba(0,0,0,.3), inset 0 0 24px rgba(36,244,229,.025); backdrop-filter: blur(12px); transition: width .32s ease, min-height .32s ease, padding .32s ease, opacity .32s ease, transform .32s ease, border-color .32s ease; }
.show-stats > div { min-width: 0; padding: 2px 9px; text-align: center; transition: opacity .18s ease; }
.show-stats > div + div { border-left: 1px solid rgba(255,255,255,.09); }
.show-stats span { display: block; color: rgba(255,255,255,.5); font-size: 6px; font-weight: 900; letter-spacing: 1.15px; }
.show-stats b { display: block; margin-top: 1px; color: white; font-size: 15px; line-height: 1.1; }
.hype-stat { display: flex; flex-direction: column; justify-content: center; }
.hype-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hype-label span, .hype-label b { display: inline; margin: 0; }
.hype-label b { color: var(--cyan); font-size: 10px; }
.hype-track { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.1); }
.hype-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #8758ff, var(--pink)); box-shadow: 0 0 14px var(--pink); transition: width .35s ease; }
.hud-toggle { position: absolute; inset: 0; z-index: 2; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.show-stats.is-collapsed { width: 44px; min-height: 10px; height: 10px; padding: 0; opacity: .76; border-color: rgba(36,244,229,.42); border-radius: 99px; transform: translate(-50%, -4px); background: rgba(7,5,17,.72); box-shadow: 0 0 18px rgba(36,244,229,.18); }
.show-stats.is-collapsed > div { opacity: 0; }
.show-stats.is-collapsed::after { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 2px; border-radius: 9px; background: linear-gradient(90deg, var(--cyan), #8758ff, var(--pink)); animation: hudBreathe 1.8s ease-in-out infinite; }
@keyframes hudBreathe { 50% { opacity: .38; transform: scaleX(.7); } }
.event-card { left: 50%; top: 130px; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 50px); padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; opacity: 0; transform: translate(-50%, -10px) scale(.95); background: rgba(7,5,17,.76); box-shadow: 0 12px 50px rgba(0,0,0,.3); backdrop-filter: blur(12px); transition: .28s ease; }
.event-card.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.event-card > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #12091c; background: var(--yellow); box-shadow: 0 0 22px rgba(255,230,108,.5); }
.event-card div { min-width: 0; }
.event-card b, .event-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-card b { color: white; font-size: 12px; }
.event-card small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 9px; }
.gift-guide { top: 50%; right: var(--screen-gutter); width: var(--gift-guide-width); padding: 0; border: 0; border-radius: 0; transform: translateY(-42%); color: white; background: transparent; box-shadow: none; pointer-events: none; backdrop-filter: none; }
.gift-guide span { display: block; padding: 2px 2px 8px; color: var(--yellow); font-size: 13px; font-weight: 950; letter-spacing: 2px; text-align: center; text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,.95); }
.gift-guide img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.9)); }
.operator-mode .gift-guide { display: none; }
.show-footer { left: 24px; right: calc(var(--screen-gutter) + var(--gift-guide-width) + 24px); bottom: 24px; display: flex; align-items: flex-end; }
#lastAction { max-width: 560px; padding: 9px 12px; border-left: 2px solid var(--cyan); color: rgba(255,255,255,.82); background: linear-gradient(90deg, rgba(0,0,0,.65), transparent); font-size: 10px; text-shadow: 0 1px 2px #000; }
.start-audio { left: 50%; bottom: 82px; padding: 12px 18px; border: 1px solid rgba(36,244,229,.5); border-radius: 99px; color: var(--cyan); background: rgba(4,3,12,.82); box-shadow: 0 0 32px rgba(36,244,229,.2); transform: translateX(-50%); cursor: pointer; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.start-audio.active { color: #05040a; background: var(--cyan); }
.start-audio.minimized { opacity: 0; transform: translate(-50%, 12px) scale(.9); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.operator-panel { top: 140px; right: 18px; width: min(300px, calc(100% - 36px)); padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: rgba(255,255,255,.8); background: rgba(5,4,12,.82); box-shadow: 0 20px 60px rgba(0,0,0,.45); backdrop-filter: blur(12px); }
.operator-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 10px; letter-spacing: 1px; }
.operator-title a { color: var(--cyan); font-size: 9px; text-decoration: none; }
.operator-row { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.operator-panel button { padding: 6px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); cursor: pointer; font-size: 9px; }
.operator-panel button:hover { color: var(--cyan); border-color: var(--cyan); }
.operator-panel label { display: grid; grid-template-columns: auto 1fr 28px; gap: 8px; align-items: center; margin-top: 10px; font-size: 9px; }
.operator-panel output { text-align: right; }
.operator-motion { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.operator-motion-title { display: flex; align-items: center; justify-content: space-between; color: var(--cyan); font-size: 9px; letter-spacing: .7px; }
.operator-motion-title output { color: white; font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.operator-panel .motion-speed-control { margin-top: 7px; }
.motion-speed-control input { grid-column: 2 / 4; height: 4px; padding: 0; accent-color: var(--cyan); cursor: pointer; }
.operator-motion small { display: block; margin-top: 7px; color: rgba(255,255,255,.45); font-size: 8px; line-height: 1.4; }
.operator-media { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.operator-media-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--yellow); font-size: 9px; letter-spacing: .7px; }
.operator-media-title output { max-width: 145px; overflow: hidden; color: rgba(255,255,255,.48); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.operator-panel .media-file { display: block; margin: 0 0 6px; padding: 7px 8px; border: 1px dashed rgba(255,230,108,.38); border-radius: 7px; color: rgba(255,255,255,.72); background: rgba(255,230,108,.045); cursor: pointer; text-align: center; }
.operator-panel .media-file:hover { color: var(--yellow); border-color: var(--yellow); }
.media-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.operator-media-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.operator-media-controls button { width: 100%; }
.operator-panel button:disabled { opacity: .35; cursor: not-allowed; }
.operator-media small { display: block; min-height: 12px; margin-top: 6px; color: rgba(255,255,255,.45); font-size: 8px; line-height: 1.4; }
.operator-media small.error { color: #ff6a8d; }
.operator-bots { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.operator-bot-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--cyan); font-size: 9px; letter-spacing: .7px; }
.operator-bot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; margin-bottom: 5px; }
.operator-bot-grid input, .operator-bot-grid select { min-width: 0; padding: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: rgba(255,255,255,.82); background: #12111d; font-size: 9px; }
.operator-bot-grid button { width: 100%; }
.bot-action-grid { grid-template-columns: 1fr 1fr; }
.operator-bots small { display: block; min-height: 12px; color: rgba(255,255,255,.45); font-size: 8px; line-height: 1.4; }
.operator-bots small.error { color: #ff6a8d; }
.operator-meta { display: flex; justify-content: space-between; margin-top: 8px; color: rgba(255,255,255,.42); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.operator-actions { margin-top: 9px; margin-bottom: 0; }
.operator-panel .danger { color: #ff6a8d; }
@media (max-width: 620px) {
  :root { --screen-gutter: 14px; --gift-guide-width: clamp(140px, 36vw, 180px); }
  .show-header { top: 16px; left: 16px; right: 16px; }
  .show-stats { top: 60px; grid-template-columns: 68px 1fr 68px; width: min(400px, calc(100% - 28px)); }
  .event-card { top: 116px; }
  .show-footer { left: 14px; right: calc(var(--screen-gutter) + var(--gift-guide-width) + 16px); bottom: 14px; }
}

/* Portrait broadcast layout (1080x1920 / 9:16 mobile): keep the stage clear, HUD on the left, gift guide on the right. */
@media (max-aspect-ratio: 3 / 4) {
  :root {
    --screen-gutter: max(12px, env(safe-area-inset-right));
    --gift-guide-width: clamp(160px, 34vw, 210px);
  }
  .club-app { min-height: 100%; }
  .club-app::before {
    background:
      linear-gradient(90deg, rgba(3,2,8,.62) 0%, transparent 28%, transparent 64%, rgba(3,2,8,.72) 100%),
      linear-gradient(180deg, rgba(3,2,8,.72) 0%, transparent 22%, transparent 76%, rgba(3,2,8,.76) 100%);
  }
  .show-header {
    top: max(16px, env(safe-area-inset-top));
    left: 14px;
    right: var(--screen-gutter);
    align-items: flex-start;
  }
  .brand { gap: 8px; }
  .brand b { font-size: 13.5px; letter-spacing: 1.6px; }
  .brand small { font-size: 7px; letter-spacing: 1.8px; }
  .live-dot { width: 11px; height: 11px; border-width: 2px; }
  .connection-pill { max-width: 120px; padding: 6px 9px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .show-stats {
    top: max(64px, calc(env(safe-area-inset-top) + 52px));
    left: 50%;
    width: min(420px, calc(100% - 28px));
    grid-template-columns: 74px minmax(100px, 1fr) 74px;
    transform: translateX(-50%);
  }
  .show-stats > div { min-width: 0; padding: 2px 7px; }
  .show-stats span { font-size: 6.5px; }
  .show-stats b { font-size: 14px; }
  .event-card {
    top: max(126px, calc(env(safe-area-inset-top) + 114px));
    left: 14px;
    width: calc(100% - var(--gift-guide-width) - var(--screen-gutter) - 20px);
    max-width: none;
    padding: 8px 11px;
    transform: translate(0, -8px) scale(.96);
  }
  .event-card.visible { transform: translate(0, 0) scale(1); }
  .event-card > span { width: 30px; height: 30px; }
  .event-card b { font-size: 11px; }
  .event-card small { font-size: 8.5px; }
  .gift-guide {
    top: clamp(180px, 24vh, 320px);
    right: var(--screen-gutter);
    width: var(--gift-guide-width);
    transform: none;
    opacity: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .gift-guide span {
    display: block;
    padding: 2px 2px 6px;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 2px;
    text-align: center;
    color: var(--yellow);
    text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,.95);
  }
  .show-footer {
    left: 14px;
    right: calc(var(--screen-gutter) + var(--gift-guide-width) + 16px);
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  #lastAction { width: 100%; max-width: none; padding: 8px 11px; font-size: 9px; line-height: 1.4; }
  .start-audio {
    left: calc((100% - var(--gift-guide-width) - var(--screen-gutter)) / 2);
    bottom: max(66px, calc(env(safe-area-inset-bottom) + 54px));
    min-height: 42px;
    max-width: calc(100% - var(--gift-guide-width) - var(--screen-gutter) - 20px);
    padding: 11px 14px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .operator-panel { top: 132px; right: var(--screen-gutter); }
  .operator-mode .gift-guide { display: none; }
  .operator-mode .show-stats { width: min(420px, calc(100% - 28px)); }
  .operator-mode .event-card { width: calc(100% - 28px); }
  .operator-mode .show-footer { right: 14px; }
  .operator-mode .start-audio { left: 50%; max-width: calc(100% - 28px); }
}

@media (max-aspect-ratio: 3 / 4) and (max-height: 680px) {
  .gift-guide { top: 168px; }
  .event-card { top: 112px; }
}

/* Compact phones layout: ensure clean spacing without covering the dance floor. */
@media (max-width: 620px) and (max-aspect-ratio: 3 / 4) {
  :root {
    --gift-guide-width: clamp(140px, 36vw, 180px);
  }
  .gift-guide {
    top: max(172px, calc(env(safe-area-inset-top) + 150px));
    right: 10px;
    width: var(--gift-guide-width);
  }
  .gift-guide span { font-size: 12px; }
  .show-stats { left: 50%; width: calc(100% - 28px); max-width: none; }
  .event-card {
    top: max(136px, calc(env(safe-area-inset-top) + 124px));
    left: 14px;
    width: calc(100% - 28px);
    max-width: none;
  }
  .show-footer {
    left: 14px;
    right: 14px;
  }
  .start-audio {
    left: 50%;
    max-width: calc(100% - 28px);
  }
}