#club {
  --glass-tint: rgb(26 19 18 / .84);
  --glass-small-tint: rgb(32 24 22 / .56);
  --glass-rim: #d9ab7d62;
  --glass-top: #fff0d3a0;
  --glass-film: linear-gradient(132deg, #fff0d32b, #f5cda60a 44%, #cca27d04 64%, #f8b77814);
  --glass-button: linear-gradient(155deg, #fff1d424, #fff0d30b 46%, #f7be8310);
  --glass-active: linear-gradient(155deg, #ffe0a95c, #e9ad6224 58%, #b8774029);
  --glass-shadow: inset 0 1px 0 #fff0d32b, inset 0 -1px 0 #fff0d30f, 0 14px 42px #0905068a;
}

@media (forced-colors: none) {
  #club .instrument {
    background: var(--glass-film), var(--glass-tint);
    border-color: var(--glass-rim);
    border-top-color: var(--glass-top);
    box-shadow: var(--glass-shadow);
  }
  #club :is(.music-panel, .room-picker, .fullscreen-help) { border-radius: 19px; }
  #club :is(.avatar-hud, .drink-menu, .hair-menu) { border-radius: 14px; }
  #club :is(.music-panel, .room-picker, .fullscreen-help, .avatar-hud) {
    -webkit-backdrop-filter: saturate(120%) blur(13px);
    backdrop-filter: saturate(120%) blur(13px);
  }
  #club .avatar-hud[inert] { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #club .scene-buttons .orb {
    opacity: .86;
    background: var(--glass-button), var(--glass-small-tint);
    border-color: var(--glass-rim);
    border-top-color: var(--glass-top);
    box-shadow: inset 0 1px 0 #fff0d327, 0 5px 17px #09050680;
    -webkit-backdrop-filter: saturate(125%) blur(7px);
    backdrop-filter: saturate(125%) blur(7px);
  }
  #club .scene-buttons .orb:is(:hover, :focus-visible, [aria-expanded="true"]) {
    opacity: 1;
    background: var(--glass-active), var(--glass-small-tint);
  }
  #club :is(.tip, .music-queue-header) {
    background: var(--glass-film), rgb(31 22 20 / .96);
  }
  #club :is(.key, .room-tool, .room-choice, .timer-step, .drink-choice, .hair-menu button,
            .music-command, .music-playlist, .music-views button, .music-options button,
            .music-undo button, .music-edit-action, :where(#music-hidden-list) button) {
    background: var(--glass-button);
    border-color: #edccaa27;
    box-shadow: inset 0 1px 0 #fff0d318;
  }
  #club :is(.key, .room-tool, .room-choice, .timer-step, .drink-choice, .hair-menu button,
            .music-command, .music-playlist, .music-views button, .music-options button,
            .music-undo button, .music-edit-action, :where(#music-hidden-list) button):not(:disabled):is(:hover, :focus-visible) {
    background: var(--glass-active);
    border-color: var(--glass-rim);
  }
  #club :is(.key, .room-tool, .room-choice, .timer-step, .drink-choice, .hair-menu button,
            .music-command, .music-playlist, .music-views button, .music-options button):is([aria-pressed="true"], [aria-current="true"], [aria-expanded="true"]) {
    color: var(--color-accent);
    background: var(--glass-active);
    border-color: #efc28c95;
  }
  #club :is(#playback, #music-playlist-play) {
    color: #2d1c16;
    border: 1px solid #ffe8ba;
    background: linear-gradient(145deg, #fff1cf, #ecc293 57%, #d6a373);
    box-shadow: inset 0 1px 0 #fff9e8, 0 2px 10px #e8ad6038;
  }
  #club :is(#playback, #music-playlist-play):not(:disabled):hover { background: linear-gradient(145deg, #fff9e9, #f5cfa5 70%); }
  #club .music-now { background: var(--glass-button); border-color: #edccaa34; }
  #club .music-views { gap: 5px; border-bottom: 0; }
  #club .music-views button { border: 1px solid #edccaa27; border-radius: 9px; }
  #club .music-queue-track[aria-current="true"] { background: var(--glass-active); }
  #club #music-hidden summary { border: 1px solid #edccaa27; border-radius: 7px; background: var(--glass-button); }
  #club .scene-buttons .orb:focus-visible { opacity: 1; }
  #club[data-hud="hidden"] #hud-toggle:not(:hover, :focus-visible) { opacity: .15; }
}

@media (hover: hover) and (pointer: fine) and (forced-colors: none) and (prefers-reduced-motion: no-preference) {
  #club[data-glass-lens] :is(.room-picker, .music-panel) {
    backdrop-filter: url("#hud-glass-lens") saturate(120%) blur(9px);
  }
}

@media (hover: none) {
  #club .avatar-hud .key {
    height: 48px;
    border-radius: 11px;
    align-content: center;
    gap: 2px;
  }
  #club .avatar-hud .key svg { width: 21px; height: 21px; }
  #club .avatar-hud .key .tip {
    position: static;
    opacity: 1;
    transform: none;
    padding: 0;
    color: inherit;
    background: transparent;
    font-size: 9px;
  }
}

@media (hover: hover) {
  #club .avatar-hud .key[aria-expanded="true"] .tip { opacity: 0; }
}

@media (prefers-reduced-transparency: reduce) {
  #club { --glass-tint: #221916; --glass-small-tint: #2d221e; }
  #club :is(.instrument, .scene-buttons .orb) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}