:root {
  font-family: Arial, system-ui, sans-serif;
  color: #f4efe9;
  background: #100b18;
  font-synthesis: none;
  --muted: #b0a8b8;
  --gold: #edcf99;
  --line: rgba(232, 218, 242, 0.14);
  --glass: rgba(32, 28, 40, 0.84);
  color-scheme: dark;
  font-size: 13px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button,
input,
select,
textarea {
  outline: none;
}
button {
  border: 0;
  background: none;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
button {
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
button:hover {
  background-color: rgba(255, 255, 255, 0.07);
}
button:active {
  transform: translateY(1px);
}
svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}
h1,
h2,
p {
  margin: 0;
}
h2 {
  font-size: 19px;
  font-weight: 550;
  line-height: 1.5;
  letter-spacing: -0.6px;
}
h1 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -2px;
}
small {
  font-size: 10px;
}
b,
strong {
  font-weight: 550;
}
[hidden] {
  display: none !important;
}
.glass {
  background: var(--glass);
  border: 1px solid rgba(225, 209, 237, 0.2);
  box-shadow:
    0 8px 40px #0003,
    inset 0 1px 0 #ffffff07;


}
#club,
#scene {
  position: fixed;
  inset: 0;
}
#scene {
  background: #000;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
.hud-top {
  position: absolute;
  top: max(26px, env(safe-area-inset-top));
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.hud-top > * {
  pointer-events: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 17px;
  border-radius: 40px;
  height: 58px;
}
.brand-mark {
  color: var(--gold);
}
.brand-mark svg {
  width: 25px;
  height: 25px;
}
.brand-name {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -1.5px;
  line-height: 20px;
}
.brand-online {
  display: block;
  font-size: 7px;
  letter-spacing: 3.4px;
  color: #b9adbe;
  margin: 3px 0 0 3px;
  line-height: 8px;
}
.brand-divider,
.tool-divider {
  height: 24px;
  width: 1px;
  background: var(--line);
  margin: 0 3px;
}
.room-label {
  font-size: 12px;
  color: #cdc2d4;
  letter-spacing: 0.1px;
}
.room-label b {
  color: #fff;
  margin-left: 3px;
}
.brand > svg {
  width: 15px;
  color: #b5a8bc;
  margin-left: 6px;
}
.tools {
  border-radius: 40px;
  height: 52px;
  padding: 5px 10px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.icon-button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ddd2e3;
}
.icon-button svg {
  width: 20px;
  height: 20px;
}
.people {
  width: auto;
  gap: 8px;
  padding: 0 8px;
}
.people > span {
  font-size: 12px;
}
.status-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #bca17c;
  box-shadow: 0 0 8px #e8be7630;
}
.status-dot.connected {
  background: #a9d2a3;
}
.tool-divider {
  height: 20px;
  margin: 0 3px;
}
.music-wrap {
  position: absolute;
  left: 32px;
  top: 105px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.music-pill {
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 12px 15px;
}
.music-pill b {
  font-weight: 500;
  display: block;
  font-size: 11px;
}
.music-pill small {
  font-size: 7px;
  color: #b3a4bc;
  letter-spacing: 1.15px;
  display: block;
  margin-top: 5px;
}
.music-play {
  font-size: 19px;
  color: var(--gold);
  margin-left: 8px;
}
.equalizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  color: var(--gold);
}
.equalizer i {
  width: 2px;
  height: 8px;
  background: currentColor;
  border-radius: 2px;
}
.equalizer i:nth-child(2) {
  height: 18px;
}
.equalizer i:nth-child(3) {
  height: 13px;
}
.is-playing .equalizer i {
  animation: equalize 0.7s ease-in-out infinite alternate;
}
.is-playing .equalizer i:nth-child(2) {
  animation-delay: -0.3s;
}
.is-playing .equalizer i:nth-child(3) {
  animation-delay: -0.5s;
}
.next-track {
  border-radius: 50%;
  width: 33px;
  height: 33px;
  color: #c1b0cc;
}
.next-track svg {
  width: 15px;
  height: 15px;
}
.shout-ticker {
  position: absolute;
  top: 109px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40px;
  max-width: min(450px, 38vw);
  padding: 10px 15px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  color: #ccbed6;
  background: rgba(34, 23, 43, 0.65);
}
.shout-ticker:active {
  transform: translateX(-50%) translateY(1px);
}
.shout-ticker svg {
  width: 16px;
  height: 16px;
  color: #e2bbdc;
}
.shout-ticker > span:nth-child(2) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ticker-arrow {
  color: #a58caf;
  margin-left: 8px;
}
.scene-caption {
  position: absolute;
  left: 31px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 7px;
  letter-spacing: 2px;
  color: #d4bdce70;
  pointer-events: none;
}
.scene-caption i {
  height: 45px;
  width: 1px;
  background: #c8b5d233;
}
.hud-bottom {
  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.hud-bottom > * {
  pointer-events: auto;
}
.movement-hint {
  font-size: 10px;
  color: #d5c9e0b0;
  margin-bottom: 15px;
  letter-spacing: 0.15px;
  text-shadow: none;
}
.touch-hint {
  display: none;
}
.action-bar {
  display: flex;
  align-items: center;
  border-radius: 22px;
  padding: 8px 10px;
  gap: 3px;
  background: rgba(31, 26, 38, 0.9);
}
.action {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  padding: 13px 16px;
  border-radius: 14px;
  color: #dcd3e0;
  font-size: 11px;
}
.action-icon {
  display: flex;
  align-items: center;
  color: #e0d1e7;
}
.action svg {
  width: 23px;
  height: 23px;
}
.action kbd {
  font:
    9px 'Be Vietnam Pro',
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 18px;
  border: 1px solid #c8b0d02a;
  border-radius: 5px;
  color: #a492b3;
  margin-left: 6px;
}
.action[aria-expanded='true'],
.action.active {
  background: rgba(217, 185, 231, 0.1);
  color: #f4d9b1;
}
.action.active .action-icon,
.action[aria-expanded='true'] .action-icon {
  color: var(--gold);
}
.action-divider {
  width: 1px;
  height: 27px;
  background: var(--line);
  margin: 0 4px;
}
.footer-note {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 9px;
  color: #a99aac88;
}
.connection-label:before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #ad9dbb;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.panel {
  position: absolute;
  bottom: 155px;
  left: 50%;
  transform: translateX(-50%);
  width: 410px;
  max-height: calc(100dvh - 265px);
  padding: 25px;
  border-radius: 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #76627a transparent;
}
.panel-header,
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-header .icon-button,
.modal-header .icon-button {
  background: #ffffff05;
  border: 1px solid var(--line);
  width: 30px;
  height: 30px;
}
.panel-header .icon-button svg {
  width: 16px;
}
.eyebrow {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: #c8aace;
  margin-bottom: 7px;
}
.panel-detail {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 18px;
}
.dance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.dance-option {
  min-height: 65px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #c9b1e006;
}
.dance-option > span {
  font-size: 8px;
  color: #a895b4;
}
.dance-option > b {
  font-size: 11px;
  margin-top: 7px;
}
.dance-option > svg {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 19px;
  height: 19px;
  color: #baa6c6;
}
.selected {
  border-color: #e4c68c80 !important;
  background-color: #e7c58e12 !important;
}
.dance-option.selected > b {
  color: var(--gold);
}
.section-label {
  margin: 22px 0 12px;
  color: #b2a0bf;
  font-size: 8px;
  letter-spacing: 1.2px;
}
.color-row,
.glow-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 17px;
}
.swatch {
  width: 28px;
  height: 28px;
  position: relative;
  border-radius: 50%;
  background: var(--swatch) !important;
  border: 3px solid #25202d;
  outline: 1px solid transparent;
  box-shadow: 0 0 0 1px #ffffff16;
}
.swatch.selected {
  outline: 1px solid #e7d8e9;
  outline-offset: 2px;
}
.glow-row .swatch {
  width: 26px;
  height: 26px;
}
.swatch.no-glow {
  color: #b9acbf;
  background: #ffffff0a !important;
  font-size: 17px;
}
.glow-row {
  gap: 10px;
}
.podium-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}
.podium-grid .secondary {
  padding: 9px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.podium-grid .secondary:last-child {
  grid-column: 1/-1;
}
.podium-grid small {
  color: #a99ab5;
  font-size: 9px;
}
.primary,
.secondary {
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  line-height: 1.3;
}
.primary {
  color: #322a22;
  background: #f4f4f4;
  border: 1px solid #f5ddb5;
  font-weight: 550;
}
.primary:hover {
  background: #fff;
}
.primary svg,
.secondary svg {
  width: 17px;
  height: 17px;
}
.secondary {
  border: 1px solid var(--line);
  background: #cbb8de08;
  color: #e0d3e5;
}
.full {
  width: 100%;
}
.text-button {
  font-size: 10px;
  color: #b8a6c2;
  padding: 12px;
}
.panel label {
  display: block;
  font-size: 11px;
  color: #d4c7dc;
  margin: 16px 0 10px;
}
.panel label:first-child {
  margin-top: 0;
}
input:not([type='range'], [type='checkbox']),
select,
textarea {
  color: #f2e9f7;
  border: 1px solid #d7bdd52e;
  background: #100c1980;
  border-radius: 10px;
  padding: 12px 14px;
  display: block;
  width: 100%;
  font-size: 12px;
  transition: border-color 0.2s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #c5b1cf66;
}
input::placeholder,
textarea::placeholder {
  color: #81748e;
}
select {
  appearance: auto;
  padding-right: 8px;
}
option {
  background: #292232;
}
textarea {
  resize: vertical;
  min-height: 85px;
  max-height: 170px;
}
.form-actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}
.form-actions > * {
  flex: 1;
}
.panel-foot {
  font-size: 10px;
  color: #9f91ac;
  line-height: 1.9;
  margin-top: 17px;
}
.tabs {
  display: flex;
  gap: 5px;
  background: #100c1940;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}
.tabs > button {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  font-size: 11px;
  color: #bbaac5;
}
.tabs > button[aria-selected='true'] {
  background: #c4abdb1a;
  color: #eddbba;
}
.drink-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.drink-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 9px;
  border: 1px solid transparent;
}
.drink-icon {
  height: 39px;
  width: 39px;
  border-radius: 11px;
  background: #bfa7d50b;
  display: grid;
  place-items: center;
  border: 1px solid #c9b2d312;
}
.drink-icon svg {
  width: 24px;
  height: 24px;
}
.drink-option b {
  font-size: 11px;
}
.drink-option small {
  display: block;
  font-size: 9px;
  color: #a99ab6;
  margin-top: 5px;
}
.drink-add {
  margin-left: auto;
  color: #b2a0c0;
  font-size: 20px;
  font-weight: 400;
}
.booth-list {
  display: grid;
  gap: 8px;
}
.booth-option {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
}
.booth-option > svg {
  color: #d6b6cb;
}
.booth-option b {
  font-size: 12px;
}
.booth-option small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px;
}
.booth-option > span:last-child {
  margin-left: auto;
  color: #b09dbf;
}
.people-list {
  display: grid;
  gap: 12px;
}
.person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.person-avatar {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: var(--person-color);
  background: #dbbbec0a;
}
.person > span:nth-child(2) {
  flex: 1;
}
.person b {
  font-size: 11px;
}
.person small {
  font-size: 9px;
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.person b small {
  display: inline;
}
.switch-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.switch-row small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 7px;
}
input[type='checkbox'] {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
}
input[type='range'] {
  width: 100%;
  accent-color: var(--gold);
  height: 5px;
  margin: 10px 0 15px;
}
.settings-note {
  display: flex;
  gap: 12px;
  color: #ab9ab5;
  line-height: 1.9;
  font-size: 10px;
  margin-top: 20px;
}
.settings-note svg {
  width: 18px;
  color: #cbb2d5;
}
#volume-value {
  float: right;
  font-size: 10px;
  color: var(--gold);
}
.shout-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
}
.shout-form-bottom > small {
  color: var(--muted);
}
.toast {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 14px;
  z-index: 10;
  font-size: 11px;
  max-width: calc(100vw - 40px);
  text-align: center;
  color: #eddec7;
  pointer-events: none;
}
.panel:not([hidden]) ~ .toast {
  bottom: 128px;
}
.modal {
  color: inherit;
  border-radius: 26px;
  padding: 28px;
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  scrollbar-width: thin;
  background: rgba(34, 28, 42, 0.95);
}
.modal::backdrop {
  background: #08051088;

}
.modal .muted {
  font-size: 11px;
  line-height: 1.9;
}
.muted {
  color: var(--muted);
}
.modal-foot {
  font-size: 9px;
  color: #a999b5;
  margin-top: 18px;
  line-height: 1.8;
}
.room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.room-card {
  text-align: left;
  border: 1px solid var(--line);
  background: #c9b3db06;
  border-radius: 15px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.room-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 19px;
}
.room-card-top svg {
  color: #e0c29e;
  width: 20px;
}
.room-card-top small {
  font-size: 6px;
  letter-spacing: 1.2px;
  color: #ac9cb7;
}
.room-card > b {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.room-card > span:last-child {
  font-size: 9px;
  color: #b9a9c3;
  display: flex;
  align-items: center;
}
.room-dot {
  width: 4px;
  height: 4px;
  background: #a6ba94;
  border-radius: 50%;
  margin-right: 6px;
}
.room-arrow {
  margin-left: auto;
  color: #c4b6d0;
}
.welcome-modal {
  width: 420px;
  padding: 33px 35px;
}
.welcome-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  color: #d5b88b;
}
.welcome-art > svg {
  width: 29px;
  height: 29px;
}
.welcome-art > span {
  font-size: 6px;
  letter-spacing: 2px;
  color: #b09ab9;
}
.welcome-modal .eyebrow {
  font-size: 7px;
  letter-spacing: 1.9px;
  margin-bottom: 14px;
}
.welcome-copy {
  margin-top: 18px !important;
  margin-bottom: 27px !important;
}
.welcome-modal label {
  font-size: 10px;
  display: block;
  margin-bottom: 10px;
  color: #d4c3de;
}
.welcome-modal input {
  background: #130e1d88;
}
.enter-button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 12px;
  padding: 15px 18px;
}
.enter-button svg {
  width: 19px;
}
.welcome-foot {
  font-size: 8px;
  text-align: center;
  color: #a08cab;
  margin-top: 20px;
}
.share-modal {
  width: 560px;
}
.share-modal > img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  border-radius: 13px;
  background: #120e1b;
  display: block;
}
.share-actions {
  display: flex;
  gap: 10px;
  margin: 18px 0 12px;
}
.share-actions > * {
  flex: 1;
}
.share-modal input {
  font-size: 10px;
  color: #b5a2c3;
}
.scene-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  text-align: center;
  gap: 20px;
}
.scene-error h1 {
  font-size: 26px;
}
.scene-error p {
  color: var(--muted);
  max-width: 400px;
  line-height: 1.8;
}
@keyframes equalize {
  to {
    height: 5px;
  }
}
@media (min-width: 1500px) {
  .hud-top {
    left: 40px;
    right: 40px;
    top: 32px;
  }
  .music-wrap {
    left: 42px;
    top: 115px;
  }
  .shout-ticker {
    top: 116px;
  }
  .hud-bottom {
    bottom: 25px;
    left: 40px;
    right: 40px;
  }
  .action {
    padding: 15px 20px;
  }
  .panel {
    bottom: 170px;
  }
  .toast {
    bottom: 170px;
  }
}
@media (max-width: 950px) {
  .action {
    padding: 12px 13px;
  }
  .action kbd {
    display: none;
  }
  .shout-ticker {
    top: 175px;
    max-width: 80vw;
  }
  .panel {
    max-height: calc(100dvh - 250px);
    bottom: 145px;
  }
  .scene-caption {
    display: none;
  }
  .footer-note > span:last-child {
    display: none;
  }
  .music-wrap {
    top: 100px;
  }
  .hud-top {
    left: 20px;
    right: 20px;
    top: 20px;
  }
  .brand {
    height: 52px;
    padding: 11px 13px;
  }
  .brand-name {
    font-size: 21px;
  }
  .brand-divider {
    margin: 0;
  }
  .tools {
    height: 48px;
  }
  .hud-bottom {
    left: 20px;
    right: 20px;
  }
  .panel:not([hidden]) ~ .toast {
    bottom: 115px;
  }
}
@media (max-width: 600px) {
  :root {
    font-size: 12px;
  }
  .hud-top {
    left: 14px;
    right: 14px;
    top: max(14px, env(safe-area-inset-top));
  }
  .brand {
    gap: 8px;
    padding: 9px 12px;
    height: 46px;
  }
  .brand-name {
    font-size: 21px;
    line-height: 18px;
  }
  .brand-online {
    font-size: 5px;
    letter-spacing: 2.9px;
    line-height: 5px;
  }
  .brand-mark svg {
    width: 21px;
  }
  .brand-divider {
    height: 20px;
  }
  .room-label {
    font-size: 10px;
  }
  .brand > svg {
    width: 12px;
    margin: 0;
  }
  .tools {
    height: 43px;
    padding: 4px 6px;
    gap: 1px;
  }
  .icon-button {
    width: 30px;
    height: 30px;
  }
  .icon-button svg {
    width: 17px;
    height: 17px;
  }
  .people {
    gap: 5px;
    padding: 0 5px;
  }
  .tool-divider {
    display: none;
  }
  .status-dot {
    display: none;
  }
  .tools #sound-button {
    display: none;
  }
  .brand-name {
    white-space: nowrap;
  }
  .music-wrap {
    left: 15px;
    top: 76px;
    gap: 5px;
  }
  .music-pill {
    padding: 9px 11px;
    gap: 9px;
    border-radius: 12px;
  }
  .music-pill b {
    font-size: 9px;
  }
  .music-pill small {
    font-size: 5px;
    letter-spacing: 0.7px;
  }
  .music-play {
    font-size: 16px;
    margin-left: 2px;
  }
  .equalizer {
    gap: 2px;
    height: 19px;
  }
  .equalizer i:nth-child(2) {
    height: 14px;
  }
  .next-track {
    width: 28px;
    height: 28px;
  }
  .next-track svg {
    width: 12px;
  }
  .shout-ticker {
    top: 135px;
    max-width: calc(100vw - 36px);
    font-size: 9px;
    padding: 8px 12px;
  }
  .shout-ticker svg {
    width: 14px;
  }
  .hud-bottom {
    left: 10px;
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .movement-hint {
    font-size: 8px;
    margin-bottom: 12px;
    letter-spacing: 0;
  }
  .desktop-hint {
    display: none;
  }
  .touch-hint {
    display: inline;
  }
  .action-bar {
    width: 100%;
    max-width: 420px;
    justify-content: space-around;
    padding: 6px 5px;
    border-radius: 19px;
    gap: 0;
  }
  .action {
    flex: 1;
    padding: 9px 5px;
    gap: 6px;
    flex-direction: column;
    font-size: 8px;
    border-radius: 12px;
  }
  .action svg {
    width: 23px;
    height: 23px;
  }
  .action-divider {
    margin: 0 3px;
    height: 32px;
  }
  .footer-note {
    font-size: 7px;
    margin-top: 12px;
    justify-content: center;
  }
  .panel {
    width: calc(100vw - 24px);
    max-width: 410px;
    bottom: 138px;
    max-height: calc(100dvh - 215px);
    border-radius: 20px;
    padding: 20px;
  }
  .panel h2 {
    font-size: 18px;
  }
  .panel-header .eyebrow {
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  .panel-detail {
    font-size: 10px;
  }
  .toast {
    font-size: 10px;
    bottom: 140px;
    min-width: 220px;
  }
  .panel:not([hidden]) ~ .toast {
    bottom: 112px;
  }
  .modal {
    padding: 24px;
    max-height: calc(100dvh - 25px);
  }
  .welcome-modal {
    padding: 28px;
  }
  .welcome-modal h1 {
    font-size: 42px;
  }
  .welcome-art {
    margin-bottom: 28px;
  }
  .room-grid {
    gap: 8px;
  }
  .room-card {
    padding: 13px;
  }
  .room-card-top small {
    font-size: 5px;
  }
  .room-card > b {
    font-size: 15px;
  }
  .modal-header h2 {
    font-size: 19px;
  }
  .color-row {
    gap: 11px;
  }
  .glow-row {
    gap: 9px;
  }
  .glow-row .swatch {
    width: 25px;
    height: 25px;
  }
  .dance-option {
    min-height: 61px;
  }
  .share-actions .primary,
  .share-actions .secondary {
    padding: 11px;
    font-size: 10px;
  }
}
@media (max-height: 650px) and (min-width: 601px) {
  .panel {
    bottom: 125px;
    max-height: calc(100dvh - 210px);
  }
  .hud-bottom {
    bottom: 10px;
  }
  .footer-note {
    margin-top: 8px;
  }
  .movement-hint {
    margin-bottom: 8px;
  }
  .shout-ticker {
    top: 98px;
  }
  .action {
    padding: 10px 13px;
  }
  .welcome-modal {
    padding: 22px 30px;
  }
  .welcome-art {
    margin-bottom: 18px;
  }
  .welcome-modal h1 {
    font-size: 32px;
  }
  .welcome-copy {
    margin: 12px 0 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Quẩy Bar scene owns the canvas. HUD layout follows di-bar-online; surfaces stay flat. */
:root {--glass:#111;--gold:#d9fbff;--muted:#b4b4b4;--line:#333;color:#f5f5f5;background:#000;font-size:14px;}
#club {pointer-events:none;}
#club button,#club aside,#club input,#club select,#club textarea,dialog {pointer-events:auto;}
#online-app {pointer-events:none;}
#online-app dialog {pointer-events:auto;}
.glass {background:#111;border:1px solid #333;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.primary,.enter-button {background:#f4f4f4!important;color:#111!important;box-shadow:none!important;}
.panel {background:#111;}
.action-bar {background:#111;}
h1 {font-size:30px;letter-spacing:-.5px;}
small,.brand-online,.eyebrow,.panel-foot,.panel-detail,.music-pill small,.movement-hint,.footer-note,.section-label {font-size:12px;}
.panel-detail,.panel-foot,.muted,.footer-note {color:#b4b4b4;}
.scene-caption {display:none;}
.brand-name {font-size:22px;letter-spacing:1px;white-space:nowrap;}
.brand-online {letter-spacing:1px;line-height:14px;}
.shout-ticker {background:#111;color:#ddd;font-size:12px;}
.action.active,.dance-option.selected {background:#2a2a2a;color:#fff;}
.icon-button {min-width:40px;min-height:40px;}
#hud-top,#controls-panel {display:none;}
#controls-drawer {position:static;transform:none;width:auto;max-height:none;padding:0;background:transparent;border:0;backdrop-filter:none;transition:none;}
#dj-dialog {width:min(520px,calc(100vw - 32px));max-height:85dvh;}
#dj-dialog #close-dj {margin-left:auto;}
#dj-dialog .control-group input[type=range] {width:100%;}
#dj-dialog .control-group select {font-size:14px;}
#audio-upload {right:24px;bottom:100px;z-index:8;}
#vr-container {left:auto;right:24px;bottom:146px;transform:none;z-index:8;}
#club-canvas {z-index:0;}
#ui-overlay {z-index:10;}
.modal {max-height:calc(100dvh - 32px);overflow:auto;}
.welcome-art {display:none;}
#loading-screen {z-index:100;}
@media(max-width:600px){
 .hud-top {left:12px;right:12px;top:max(12px,env(safe-area-inset-top));gap:6px;}
 .brand {padding:8px 10px;gap:6px;height:48px;}
 .brand-name {font-size:16px;}.brand-mark,.brand-divider,.brand-online {display:none;}
 .tools {padding:2px;gap:0;height:48px;}.tools .icon-button{width:34px;min-width:34px;min-height:44px;}
 .tools .tool-divider {display:none;}.room-label{font-size:12px;}
 .music-wrap{top:76px;left:12px;}.shout-ticker{top:128px;left:12px;right:12px;max-width:none;transform:none;width:calc(100% - 24px);}
 .hud-bottom{left:8px;right:8px;bottom:max(10px,env(safe-area-inset-bottom));}
 .action-bar{width:100%;justify-content:space-around;padding:5px 2px;gap:0;}.action{padding:8px 5px;font-size:12px;min-height:48px;}
 .action kbd,.action-divider{display:none;}.action-icon svg{width:19px;}
 .panel{left:8px;right:8px;bottom:92px;top:auto;width:auto;max-height:calc(100dvh - 190px);padding:18px;}
 .panel h2{font-size:20px;}.panel small{font-size:12px;}
 .footer-note{display:none;}.movement-hint{font-size:11px;margin-bottom:8px;}
 #audio-upload {bottom:108px;right:12px;}#vr-container {bottom:150px;right:12px;}
 body:has(#panel:not([hidden])) #audio-upload,body:has(#panel:not([hidden])) #vr-container{display:none;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}
#movement-controls {position:absolute;left:24px;bottom:112px;display:flex;align-items:center;gap:8px;pointer-events:auto;}
#movement-controls button {padding:10px 14px;border-radius:8px;min-height:44px;}
#move-pad {display:none;width:90px;height:90px;border-radius:50%;background:#171717;border:1px solid #444;touch-action:none;place-items:center;}
#move-stick {display:block;width:36px;height:36px;border-radius:50%;background:#a8b3b5;pointer-events:none;}
@media(max-width:600px),(pointer:coarse){#move-pad{display:grid;}#movement-controls{left:12px;bottom:110px;gap:6px;}#movement-controls button{font-size:12px;padding:8px;}body:has(#panel:not([hidden])) #movement-controls{display:none;}}
@media(max-width:420px){#movement-controls{bottom:158px;}#movement-controls #jump-player{display:none;}}
/* Keep the activity sheet out of the middle of the club; reset source centering. */
#panel {left:24px;right:auto;top:182px;bottom:116px;width:360px;max-height:calc(100dvh - 298px);transform:none;padding:20px;}
#panel h2 {font-size:22px;line-height:1.35;}
#panel .panel-detail,#panel label {font-size:14px;}
#panel .dance-option b {font-size:13px;}
#panel .dance-option span {font-size:11px;}
#panel .drink-option b,#panel .booth-option b {font-size:14px;}
#panel .secondary,#panel .primary {font-size:13px;}
#panel .panel-foot {font-size:12px;}
.welcome-modal h1 {font-size:30px;line-height:1.2;letter-spacing:-.5px;}
#online-app .brand-name {margin:0;font-weight:600;line-height:22px;}
@media(max-width:600px){
 #panel {left:8px;right:8px;top:auto;bottom:94px;width:auto;max-height:calc(100dvh - 206px);transform:none;padding:18px;}
 #panel .dance-option b {font-size:13px;}
 #panel .panel-detail {font-size:14px;}
 #panel .dance-option {min-height:62px;}
 .movement-hint{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
body:has(#panel:not([hidden])) #movement-controls {display:none;}
@media(max-width:420px){#movement-controls #jump-player{display:block;}}
#online-app {font-family:Arial,system-ui,sans-serif;font-size:14px;}
#online-app small,#online-app kbd,#online-app .eyebrow,#online-app .panel-header .eyebrow,#online-app .music-pill small,#online-app .footer-note,#online-app .room-card small,#online-app .modal-foot,#online-app .welcome-foot,#online-app .welcome-modal .eyebrow {font-size:12px;letter-spacing:0;}
#online-app .action kbd,#online-app .dance-option span {font-size:11px;}
#online-app .welcome-copy,#online-app .modal .muted {font-size:14px;line-height:1.6;}
#online-app #welcome-title {font-size:30px;line-height:1.25;letter-spacing:-.5px;}
#online-app label {font-size:14px;line-height:1.5;}
#controls-drawer h3 {font-size:14px;}
#controls-drawer .control-group label {font-size:14px;line-height:1.5;}
#controls-drawer .control-group span,#controls-drawer .control-group small {font-size:12px;}
#online-app #track-name {font-size:12px;}
#online-app .share-actions button {font-size:14px;}
#online-app dialog {margin:auto;}
.music-list {display:flex;flex-direction:column;gap:4px;}
.music-row {display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;min-height:44px;text-align:left;border-radius:8px;}
.music-row span {font-size:12px;color:#aaa;font-variant-numeric:tabular-nums;}
.music-row b {flex:1;font-size:14px;}.music-row svg{width:18px;height:18px;}
.music-row.selected{background:#2a2a2a;color:#fff;}
.music-transport{margin-top:20px;}.music-transport label{display:block;margin-bottom:10px;}.music-transport input{width:100%;margin-bottom:14px;}
#track-time {font-size:12px;font-variant-numeric:tabular-nums;color:#bbb;}
@media(max-width:600px){.music-wrap{gap:6px;}.music-pill{max-width:230px;}.music-pill b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}}

/* Character entry uses static portraits; no extra live WebGL preview. */
#online-app .welcome-modal {width:650px;padding:24px;}
#online-app .welcome-copy {margin:10px 0 16px !important;}
#online-app .welcome-looks {border:0;padding:0;margin:16px 0 0;min-width:0;}
#online-app .welcome-looks legend {font-size:14px;font-weight:600;margin-bottom:10px;width:100%;}
#online-app .welcome-looks legend span {float:right;font-size:12px;font-weight:400;color:#aaa;}
#online-app .look-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:278px;overflow:auto;padding:3px;scrollbar-width:thin;}
#online-app .look-card {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;margin:0;padding:6px;border:1px solid #393939;border-radius:12px;background:#1b1b1b;cursor:pointer;text-align:center;min-width:0;}
#online-app .look-card:has(input:checked) {border-color:#b9f5ff;background:#243136;box-shadow:inset 0 0 0 1px #b9f5ff;}
#online-app .look-card:has(input:focus-visible) {outline:2px solid white;outline-offset:1px;}
#online-app .look-card input {position:absolute;top:7px;right:7px;width:15px;height:15px;margin:0;accent-color:#89def0;}
#online-app .look-card img {width:92px;height:94px;object-fit:contain;pointer-events:none;}
#online-app .look-card span {font-size:12px;line-height:1.4;color:#eee;}
#online-app .look-scroll-hint {font-size:12px;color:#aaa;margin:8px 3px 0;line-height:1.4;}
#online-app #spotlight-banner {position:absolute;right:30px;top:105px;width:285px;padding:16px;border:1px solid #79929a;border-radius:18px;display:grid;gap:10px;pointer-events:auto;}
#online-app #spotlight-banner[hidden],#online-app #spotlight-banner [hidden] {display:none;}
#online-app #spotlight-status {font-size:14px;line-height:1.5;margin:0;}
#online-app #spotlight-countdown {font-size:12px;color:#b7c5c9;}
#online-app #spotlight-banner button {width:100%;min-height:42px;}
@media(max-width:700px) {
  #online-app .welcome-modal {padding:20px;}
  #online-app #welcome-title {font-size:24px;}
  #online-app .look-grid {grid-template-columns:repeat(3,minmax(0,1fr));max-height:230px;}
  #online-app .look-card img {width:76px;height:80px;}
  #online-app #spotlight-banner {top:177px;right:16px;width:min(285px,calc(100vw - 32px));z-index:12;}
  #online-app #spotlight-banner:has(#spotlight-claim:not([hidden])) {border-color:#b9f5ff;}
}
@media(max-height:650px) {
  #online-app .look-grid {max-height:150px;}
  #online-app .welcome-copy {display:none;}
}

#online-app .reaction-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0;}
#online-app .reaction-grid button {display:flex;align-items:center;gap:10px;padding:16px;}
#online-app .reaction-grid span {font-size:26px;}
#online-app #hype-meter {display:block;width:100%;height:18px;margin:8px 0;accent-color:#87dfca;}
#online-app .party-controls {display:grid;gap:8px;margin:8px 0 20px;}
#online-app .queue-list {font-size:13px;line-height:1.8;padding-left:20px;color:#bbb;}
#online-app #room-bpm {width:100%;min-height:42px;background:#161616;color:#eee;border:1px solid #444;padding:10px;}

/* Leave room for the timed invitation above the phone's activity sheet. */
@media(max-width:700px){
 #online-app #spotlight-banner {top:128px;left:12px;right:12px;width:auto;padding:12px;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;}
 #online-app #spotlight-status {grid-column:1 / -1;font-size:13px;}
 #online-app #spotlight-banner button {width:auto;}
 #online-app #spotlight-countdown {align-self:center;}
 body:has(#spotlight-banner:not([hidden])) #shout-button {visibility:hidden;}
 #online-app #panel {max-height:calc(100dvh - 270px);}
 body:has(#spotlight-banner:not([hidden])) #online-app #panel {max-height:calc(100dvh - 344px);}
}
@media(max-width:420px){
 #movement-controls #jump-player {display:block;max-width:64px;}
 #movement-controls button {font-size:12px;max-width:105px;}
}