:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #02090e;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: radial-gradient(circle at 50% 30%, #07314a, #02070b 72%);
}

body {
  display: grid;
  justify-items: center;
  touch-action: pan-y pinch-zoom;
}

.scroll-indicator {
  position: fixed;
  z-index: 16;
  top: max(10px, env(safe-area-inset-top));
  right: max(3px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: none;
  width: 7px;
  overflow: hidden;
  border: 1px solid rgba(145, 231, 255, .78);
  border-radius: 999px;
  background: rgba(0, 12, 20, .72);
  box-shadow: 0 0 7px rgba(40, 202, 255, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.scroll-indicator i {
  position: absolute;
  top: 0;
  left: 1px;
  width: 3px;
  min-height: 52px;
  border-radius: inherit;
  background: #ffd15a;
  box-shadow: 0 0 5px #ffbf25, 0 0 9px rgba(255, 209, 90, .82);
  will-change: height, transform;
}

@media (pointer: coarse) {
  .scroll-indicator { display: block; }
  .scroll-indicator.has-scroll { opacity: .96; }
}

.controller {
  position: relative;
  width: min(100vw, 900px);
  aspect-ratio: 900 / 1792;
  filter: drop-shadow(0 0 22px rgba(0, 190, 255, .2));
  user-select: none;
}

.map-art { display: block; width: 100%; height: 100%; object-fit: contain; }

.sync-badge {
  position: absolute;
  z-index: 14;
  top: 1.2%;
  right: 2.5%;
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .45em .72em;
  border: 1px solid rgba(108, 238, 151, .55);
  border-radius: 999px;
  color: #d9ffe5;
  background: rgba(4, 36, 31, .84);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .42);
  font: 800 clamp(9px, 1.7vw, 15px)/1 Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

.sync-badge i {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #6eea95;
  box-shadow: 0 0 .55em #6eea95;
}

.sync-badge.is-connecting,
.sync-badge.is-offline {
  border-color: rgba(255, 190, 75, .62);
  color: #fff0c1;
  background: rgba(60, 35, 4, .88);
}

.sync-badge.is-connecting i,
.sync-badge.is-offline i { background: #ffc353; box-shadow: 0 0 .55em #ffc353; }

.captain-blink {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 42ms ease-in-out;
  /* Reveal only the two eyelids; the rest of the original illustration stays untouched. */
  -webkit-mask-image:
    radial-gradient(ellipse 5.2% 2.8% at 43.8% 38.0%, #000 88%, transparent 100%),
    radial-gradient(ellipse 5.2% 2.8% at 52.1% 38.0%, #000 88%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 5.2% 2.8% at 43.8% 38.0%, #000 88%, transparent 100%),
    radial-gradient(ellipse 5.2% 2.8% at 52.1% 38.0%, #000 88%, transparent 100%);
}

.captain-blink.is-visible { opacity: 1; }

.ambient-bubbles, .seagull-peek { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble-takeover {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.bubble-takeover.is-active { opacity: 1; }
.takeover-bubble {
  position: absolute;
  left: var(--left);
  bottom: -16%;
  width: var(--size);
  aspect-ratio: 1;
  border: clamp(1px, .22vw, 3px) solid rgba(142, 234, 255, .86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,.98) 0 5%, transparent 9%),
    radial-gradient(circle at 36% 33%, rgba(179,242,255,.42) 0 7%, transparent 23%),
    radial-gradient(circle at 62% 70%, rgba(17,119,192,.18), transparent 63%);
  box-shadow: inset -4px -5px 9px rgba(0,90,160,.26), inset 3px 3px 7px rgba(255,255,255,.24), 0 0 9px rgba(74,205,255,.62);
  opacity: 0;
  will-change: transform, opacity;
  animation: takeover-rise var(--duration) linear var(--delay) forwards;
}
.song-bubble-surge {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 13;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.song-bubble-surge.is-active { opacity: 1; }
.bubble {
  position: absolute;
  width: 2.3%;
  aspect-ratio: 1;
  border: 2px solid rgba(110, 225, 255, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, rgba(255,255,255,.9) 0 7%, rgba(63,199,255,.18) 22%, transparent 65%);
  box-shadow: inset -2px -3px 5px rgba(0,92,151,.3), 0 0 8px #41ccff;
  opacity: 0;
}
.bubble-a { left: 5.5%; top: 77%; animation-delay: 0s; }
.bubble-b { right: 5.8%; top: 83%; width: 1.7%; animation-delay: 2.2s; }
.bubble-c { left: 7.2%; top: 91%; width: 1.45%; animation-delay: 4.5s; }
.bubble-d { right: 7%; top: 70%; width: 2%; animation-delay: 6.7s; }
.bubble-e { left: 3.8%; top: 66%; width: 2.9%; animation-delay: 1.25s; --duration: 10.1s; }
.bubble-f { right: 4.3%; top: 94%; width: 1.05%; animation-delay: 3.45s; --duration: 7.7s; }
.bubble-g { left: 8.6%; top: 84%; width: 1.25%; animation-delay: 5.8s; --duration: 9.2s; }
.bubble-h { right: 3.1%; top: 76%; width: 2.55%; animation-delay: 7.35s; --duration: 10.8s; }

.seagull-peek { overflow: visible; z-index: 8; }
.seagull-peek img {
  position: absolute;
  width: clamp(78px, 18%, 162px);
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.55));
  transform-origin: 50% 100%;
  opacity: 0;
}
.seagull-peek.is-visible img { opacity: 1; }
.seagull-peek.from-left img { left: -20%; top: 25%; transform: rotate(82deg); }
.seagull-peek.from-right img { right: -20%; top: 32%; transform: rotate(-82deg) scaleX(-1); }
.seagull-peek.from-top img { left: 41%; top: -17%; transform: rotate(180deg); }
.seagull-peek.from-left.is-visible img { animation: peek-left 5.2s ease-in-out both; }
.seagull-peek.from-right.is-visible img { animation: peek-right 5.2s ease-in-out both; }
.seagull-peek.from-top.is-visible img { animation: peek-top 5.2s ease-in-out both; }

button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.hotspot {
  position: absolute;
  z-index: 3;
  left: 12.3%;
  width: 75.2%;
  height: 9.8%;
  border: 0;
  border-radius: 13% / 48%;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, transform .1s ease;
}

.hotspot.under { top: 59.5%; }
.hotspot.dance { top: 70.6%; }

.now-playing-flag,
.up-next-flag {
  position: absolute;
  z-index: 2;
  top: -19%;
  left: -12%;
  display: block;
  width: 39%;
  height: auto;
  opacity: 0;
  transform: translateX(-12%) rotate(-7deg) scale(.92);
  transform-origin: 18% 70%;
  transition:
    opacity .45s ease,
    transform .52s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.controller.performing .hotspot.is-active .now-playing-flag {
  opacity: 1;
  transform: translateX(0) rotate(-3deg) scale(1);
}

.controller.resting .hotspot.is-up-next .up-next-flag {
  opacity: 1;
  transform: translateX(0) rotate(-3deg) scale(1);
}

.controller.starting .hotspot:not(.is-active),
.controller.performing .hotspot:not(.is-active) {
  background: rgba(0, 0, 0, .48);
}

.controller.resting .hotspot { background: rgba(0, 0, 0, .3); }

.hotspot:not(:disabled):active { background: rgba(255, 255, 255, .15); transform: scale(.985); }
.hotspot:focus-visible { outline: 4px solid white; outline-offset: -8px; }
.hotspot:disabled { cursor: not-allowed; }

.request-confirmation {
  position: fixed;
  z-index: 15;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100vw - 32px), 470px);
  padding: 14px 18px;
  color: #fff4c8;
  background: linear-gradient(110deg, rgba(37, 18, 4, .98), rgba(72, 34, 7, .98));
  border: 2px solid #ffc64c;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .58), inset 0 0 13px rgba(255, 187, 57, .16);
  opacity: 0;
  transform: translate(-50%, 24px) scale(.96);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .22, 1.12);
  pointer-events: none;
}

.request-confirmation.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.request-confirmation-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #09240b;
  font: 900 25px/1 Arial, sans-serif;
  background: #6df13a;
  border: 2px solid #d6ffc7;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(91, 239, 51, .65);
}
.request-confirmation-copy { display: grid; gap: 2px; min-width: 0; }
.request-confirmation-copy strong { font: 800 17px/1.15 Arial, sans-serif; }
.request-confirmation-copy span { font: 600 14px/1.3 Arial, sans-serif; color: #ffd66d; }

@media (prefers-reduced-motion: no-preference) {
  .hotspot.is-confirmed { animation: request-confirmed-pulse .7s ease-out; }
  @keyframes request-confirmed-pulse {
    0% { background: rgba(255, 255, 255, .26); transform: scale(.985); }
    45% { background: rgba(104, 247, 62, .3); box-shadow: inset 0 0 0 5px rgba(219, 255, 189, .84), 0 0 24px rgba(89, 243, 50, .74); transform: scale(1.015); }
    100% { background: transparent; box-shadow: none; transform: scale(1); }
  }
}

.status-panel {
  position: absolute;
  left: 14.4%;
  top: 82.55%;
  width: 70.6%;
  height: 9.2%;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  align-items: center;
  color: #fff0bd;
  text-align: center;
  text-shadow: 0 2px 2px #000;
  background: linear-gradient(100deg, rgba(55, 25, 6, .95), rgba(33, 15, 4, .96));
  border: clamp(1px, .28vw, 3px) solid #291102;
  border-radius: 4%;
  box-shadow: inset 0 0 16px #000, 0 2px 5px #000;
}

.launch-notice {
  appearance: none;
  position: absolute;
  z-index: 12;
  top: 24.5%;
  right: -2.5%;
  width: 40.5%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translateX(78%);
  transition: opacity .2s ease, transform .48s cubic-bezier(.2, .9, .22, 1.08);
  pointer-events: none;
}

.launch-notice.is-visible { opacity: 1; transform: translateX(0); }
.launch-notice.is-queue-link {
  cursor: pointer;
  pointer-events: auto;
}
.queue-flag-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 .35em .28em rgba(0, 0, 0, .62));
  pointer-events: none;
}
.queue-flag-action {
  position: absolute;
  right: 24%;
  bottom: -2%;
  padding: .32em .72em .34em;
  border: clamp(1px, .18vw, 2px) solid #5a2608;
  border-radius: 999px;
  color: #351403;
  background: linear-gradient(180deg, #ffe997 0%, #e7a83d 57%, #bd6816 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 174, .85),
    0 .2em .32em rgba(0, 0, 0, .58);
  font: 800 clamp(8px, 1.65vw, 15px)/1 Arial, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px rgba(255, 241, 177, .72);
  pointer-events: none;
}
.queue-flag-action b { font-size: 1.35em; line-height: .65; }
.launch-notice.is-queue-link:active { transform: translateX(2%); }
.launch-notice:disabled { opacity: 0; }

.status-copy, .timer-copy { display: grid; gap: .25em; }
.status-copy { border-right: 2px solid #b06b1b; }
.status-panel span { font-size: clamp(11px, 2.5vw, 25px); }
.status-panel strong { color: #58ed20; font-family: Arial, sans-serif; font-size: clamp(22px, 5.5vw, 51px); }
.status-copy strong { font-size: clamp(18px, 4.6vw, 43px); }
.status-copy i { display: inline-block; width: .7em; height: .7em; margin-right: .25em; border-radius: 50%; background: currentColor; box-shadow: 0 0 .35em currentColor; }

.show-progress {
  position: absolute;
  right: 3.5%;
  bottom: 4%;
  left: 3.5%;
  height: clamp(3px, .52vw, 5px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  box-shadow: inset 0 1px 2px #000;
}

.show-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72ed39, #c3ff52);
  box-shadow: 0 0 8px currentColor;
  transition: width .28s linear;
}

.controller.starting .status-panel strong { color: #ffb22e; }
.controller.performing .status-panel strong { color: #41cfff; }
.controller.resting .status-panel strong { color: #ffd62f; }
.controller.starting .show-progress i { background: linear-gradient(90deg, #ff8b27, #ffe272); }
.controller.performing .show-progress i { background: linear-gradient(90deg, #149ee4, #68e9ff); }
.controller.resting .show-progress i { background: linear-gradient(90deg, #c58b00, #ffe24f); }

.support-button {
  position: absolute;
  z-index: 4;
  left: 31%;
  top: 92.25%;
  width: 38%;
  height: 3.75%;
  border: clamp(2px, .28vw, 3px) solid #351500;
  border-radius: 999px;
  color: #2c1303;
  background: linear-gradient(#ffd971, #d58b1d 62%, #9c510b);
  box-shadow: inset 0 0 0 clamp(2px, .35vw, 4px) #ffec9c, 0 4px 7px #000;
  font: 800 clamp(10px, 2.35vw, 22px) Arial, sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 1px rgba(255, 244, 190, .72);
  cursor: pointer;
}
.support-button span {
  margin-right: .18em;
  color: #8e150e;
  font-size: .92em;
}
.support-button:active { transform: translateY(2px); }

.help-button {
  position: absolute;
  z-index: 4;
  left: 34%;
  top: 96.25%;
  width: 32%;
  height: 2.7%;
  border: clamp(1px, .22vw, 2px) solid #7fcbd5;
  border-radius: 999px;
  color: #eaffff;
  background: linear-gradient(#176f80, #084655 65%, #052d39);
  box-shadow: inset 0 0 0 clamp(1px, .22vw, 2px) rgba(132, 232, 240, .42), 0 3px 6px #000;
  font: 800 clamp(9px, 2vw, 18px) Arial, sans-serif;
  text-shadow: 0 1px 2px #00171d;
  cursor: pointer;
}
.help-button span { margin-right: .18em; color: #ffd46b; }
.help-button.is-requested { border-color: #e4ad3e; color: #fff0bd; background: linear-gradient(#795017, #3d270a); }
.help-button.is-acknowledged { border-color: #72ef5b; color: #efffe8; background: linear-gradient(#288e32, #0b591c); }
.help-button:active { transform: translateY(2px); }

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 35%, rgba(8, 86, 121, .35), transparent 45%), rgba(0, 7, 12, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.help-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.help-card {
  position: relative;
  width: min(92vw, 430px);
  padding: 34px 26px 28px;
  border: 3px solid #d99d2f;
  border-radius: 24px;
  color: #fff0bd;
  background: radial-gradient(circle at 50% 0%, rgba(36, 132, 150, .45), transparent 42%), linear-gradient(150deg, #164e60, #092b3a 72%);
  box-shadow: inset 0 0 0 2px rgba(115, 214, 224, .25), 0 24px 60px rgba(0,0,0,.72);
  text-align: center;
}
.help-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 2px solid #e4ae3e;
  border-radius: 50%;
  color: #ffe9a2;
  background: #68190e;
  font: 900 24px/1 Arial, sans-serif;
  cursor: pointer;
}
.help-seal { font-size: 50px; filter: drop-shadow(0 3px 3px #00141a); }
.help-kicker { margin: 8px 0 6px; color: #8ce4ed; font: 900 11px/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.help-card h2 { margin: 0; color: #ffd36a; font: 900 34px/1 Georgia, serif; text-shadow: 0 2px #4b2706; }
.help-description { margin: 17px auto; max-width: 340px; font: 700 16px/1.45 Arial, sans-serif; }
.help-send {
  width: 100%;
  min-height: 56px;
  border: 3px solid #4c2305;
  border-radius: 16px;
  color: #2c1303;
  background: linear-gradient(#ffe081, #e3a332 62%, #a65a10);
  box-shadow: inset 0 0 0 2px #fff0aa, 0 4px 7px #001217;
  font: 900 17px Arial, sans-serif;
  cursor: pointer;
}
.help-send:disabled { opacity: .68; cursor: wait; }
.help-note { margin: 14px 0 0; color: #a9e5eb; font: 700 13px/1.35 Arial, sans-serif; }
body.help-open { overflow: hidden; }

.support-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 35%, rgba(8, 86, 121, .35), transparent 45%),
    rgba(0, 7, 12, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.support-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.support-card {
  position: relative;
  width: min(90vw, 640px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: clamp(30px, 5.8vw, 56px) clamp(22px, 5.8vw, 54px) clamp(24px, 4.8vw, 44px);
  border: clamp(4px, .72vw, 7px) solid #301303;
  border-radius: clamp(18px, 3.8vw, 34px);
  outline: clamp(2px, .4vw, 4px) solid #bd7415;
  outline-offset: clamp(-10px, -1.1vw, -7px);
  color: #2c1606;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 239, 175, .54), transparent 27%),
    radial-gradient(circle at 76% 74%, rgba(119, 60, 8, .18), transparent 34%),
    linear-gradient(135deg, #e8bd6a, #c88935 56%, #a75f1d);
  box-shadow:
    inset 0 0 34px rgba(77, 33, 2, .48),
    inset 0 0 0 clamp(2px, .42vw, 4px) rgba(255, 225, 132, .4),
    0 22px 52px rgba(0, 0, 0, .72);
  text-align: center;
  transform: translateY(18px) scale(.97);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.support-modal.is-open .support-card { transform: translateY(0) scale(1); }
.support-close {
  position: absolute;
  display: grid;
  place-items: center;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #ffbc3b;
  border-radius: 50%;
  color: #ffe4a0;
  background: linear-gradient(#a82516, #5d0c08);
  box-shadow: inset 0 0 0 2px #4e0804, 0 3px 7px rgba(53, 17, 0, .48);
  font: 700 32px/1 Arial, sans-serif;
  cursor: pointer;
}
.support-seal {
  display: grid;
  place-items: center;
  width: clamp(76px, 18vw, 112px);
  aspect-ratio: 1;
  margin: 0 auto clamp(18px, 3.4vw, 28px);
  border: clamp(3px, .5vw, 5px) solid #e5a51e;
  border-radius: 50%;
  color: #f8d75e;
  background: radial-gradient(circle at 38% 30%, #363636, #090909 66%, #000);
  box-shadow: inset 0 0 0 3px #150900, 0 5px 12px rgba(64, 24, 0, .42);
  font: 700 clamp(34px, 8vw, 52px)/1 Georgia, serif;
}
.support-kicker {
  margin: 0 0 clamp(12px, 2.8vw, 20px);
  color: #63160d;
  font: 800 clamp(11px, 2.6vw, 16px)/1.2 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.support-card h2 {
  margin: 0;
  color: #160d05;
  font-size: clamp(34px, 8vw, 58px);
  line-height: .98;
  text-shadow: 0 2px rgba(255, 221, 132, .58);
}
.support-description {
  max-width: 480px;
  margin: clamp(20px, 4vw, 30px) auto;
  color: #3d210c;
  font-size: clamp(16px, 3.7vw, 23px);
  line-height: 1.35;
}
.support-choice-label {
  margin: 0 0 clamp(10px, 2vw, 14px);
  color: #57180e;
  font: 900 clamp(11px, 2.6vw, 16px)/1.2 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.support-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2.2vw, 14px);
}
.support-amount,
.support-continue {
  min-height: clamp(58px, 13vw, 78px);
  border: clamp(2px, .42vw, 4px) solid var(--accent, #d18a21);
  border-radius: clamp(12px, 2.8vw, 18px);
  color: #fff0bd;
  background: linear-gradient(#542706, #271004);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4), 0 3px 7px rgba(62, 26, 0, .28);
  font: 800 clamp(19px, 4.5vw, 27px)/1 Arial, sans-serif;
  cursor: pointer;
}
.support-amount:nth-child(1) { --accent: #16bde8; }
.support-amount:nth-child(2) { --accent: #ef3b89; }
.support-amount:nth-child(3) { --accent: #d43520; }
.support-amount.is-selected {
  color: #160d05;
  background: linear-gradient(#ffe08a, #d99a2f);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 198, .5), 0 0 14px var(--accent), 0 4px 12px rgba(58, 22, 0, .35);
}
.support-continue {
  width: 100%;
  margin-top: clamp(14px, 3vw, 20px);
  border-color: #2a0d03;
  color: #ffedb2;
  background: linear-gradient(#a82315, #681008 58%, #3e0905);
  box-shadow: inset 0 0 0 3px #d8781c, 0 5px 14px rgba(54, 18, 0, .38);
}
.support-note {
  margin: clamp(16px, 3.2vw, 24px) 0 0;
  color: #5b2b0c;
  font: 700 clamp(10px, 2.3vw, 14px)/1.35 Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
body.support-open { overflow: hidden; }

.queue-modal {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 15% 20%, rgba(16, 105, 127, .19), transparent 25%),
    radial-gradient(circle at 88% 78%, rgba(20, 111, 132, .16), transparent 28%),
    rgba(0, 10, 17, .82);
  backdrop-filter: blur(5px) saturate(.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.queue-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.queue-card {
  isolation: isolate;
  position: relative;
  width: min(92vw, 560px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: clamp(18px, 4vw, 28px) clamp(16px, 4.5vw, 34px) clamp(14px, 3.5vw, 24px);
  border: clamp(5px, 1.2vw, 8px) solid #2b1406;
  border-radius: 30px 24px 32px 22px;
  color: #291507;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 244, 181, .88), transparent 22%),
    radial-gradient(circle at 93% 95%, rgba(110, 44, 6, .28), transparent 35%),
    repeating-linear-gradient(2deg, rgba(90, 40, 5, .035) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #e9bd64 0%, #ce8d35 68%, #9b561e 100%);
  box-shadow:
    inset 0 0 0 3px #f1c259,
    inset 0 0 0 7px #71370d,
    inset 0 0 34px rgba(65, 25, 2, .56),
    0 24px 58px rgba(0, 0, 0, .8),
    0 0 0 2px rgba(224, 151, 43, .38);
  transform: translateY(18px) scale(.97);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.queue-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 2px solid rgba(255, 211, 102, .56);
  border-radius: 19px 14px 22px 12px;
  box-shadow: 0 0 0 2px rgba(75, 31, 4, .55), inset 0 0 18px rgba(76, 28, 2, .2);
  pointer-events: none;
}
.queue-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 5% 18%, transparent 0 5px, rgba(126, 231, 255, .45) 6px, transparent 8px),
    radial-gradient(circle at 96% 74%, transparent 0 7px, rgba(126, 231, 255, .35) 8px, transparent 10px),
    radial-gradient(circle at 8% 90%, transparent 0 3px, rgba(126, 231, 255, .32) 4px, transparent 6px);
  pointer-events: none;
}
.queue-modal.is-open .queue-card { transform: translateY(0) scale(1); }
.queue-close {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 3;
  top: clamp(25px, 6vw, 34px);
  right: clamp(26px, 6vw, 38px);
  width: 40px;
  height: 40px;
  border: 3px solid #e2a62e;
  border-radius: 50%;
  color: #ffe8a7;
  background: radial-gradient(circle at 35% 28%, #b13a21, #6c160c 68%, #310704);
  box-shadow: inset 0 0 0 2px #4d0d06, 0 3px 7px rgba(0,0,0,.58);
  font: 900 25px/1 Arial, sans-serif;
  text-shadow: 0 2px #340601;
}
.queue-heading {
  position: relative;
  display: grid;
  grid-template-columns: clamp(44px, 11vw, 64px) 1fr;
  align-items: center;
  gap: clamp(8px, 2.5vw, 16px);
  min-height: clamp(76px, 19vw, 104px);
  margin: 0 clamp(0px, 1vw, 8px);
  padding: 10px clamp(56px, 14vw, 78px) 10px clamp(12px, 3vw, 20px);
  color: #ffe6a1;
  background:
    radial-gradient(ellipse at 35% 0%, rgba(104, 80, 34, .35), transparent 45%),
    linear-gradient(165deg, #21180d 0%, #070706 62%, #1a1005 100%);
  border: 3px solid #d89a24;
  clip-path: polygon(0 4%, 96% 0, 100% 50%, 96% 100%, 0 96%, 2.5% 50%);
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.5));
}
.queue-skull {
  display: grid;
  place-items: center;
  width: clamp(42px, 10vw, 58px);
  aspect-ratio: 1;
  border: 2px solid #c9881c;
  border-radius: 50%;
  color: #f7e8bf;
  background: radial-gradient(circle, #382514, #100b07 72%);
  box-shadow: inset 0 0 8px #000, 0 2px 4px #000;
  font-size: clamp(25px, 6vw, 35px);
  text-shadow: 0 2px #000;
}
.queue-kicker {
  margin: 0 0 3px;
  color: #d9a447;
  font: 800 clamp(8px, 2vw, 12px)/1.1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.queue-card h2 {
  margin: 0;
  color: #ffe294;
  font: 900 clamp(27px, 7vw, 45px)/.95 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
  text-shadow: 0 2px #5b3009, 0 0 8px rgba(255, 182, 49, .25);
}
.queue-description {
  margin: clamp(12px, 3vw, 18px) 8px clamp(10px, 2.5vw, 14px);
  color: #4b240d;
  font: 800 clamp(11px, 2.8vw, 15px)/1.3 Georgia, "Times New Roman", serif;
  text-align: center;
}
.queue-now {
  display: none;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin: 0 4px clamp(10px, 2.8vw, 15px);
  padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3vw, 18px);
  border: 3px solid #2a1103;
  border-radius: 10px 14px 9px 13px;
  color: #fff0bd;
  background:
    radial-gradient(circle at 18% 0%, rgba(160, 92, 24, .2), transparent 42%),
    linear-gradient(100deg, #3e1b07, #1c0c04 72%, #331405);
  box-shadow: inset 0 0 0 2px #8e5015, inset 0 0 14px #000, 0 4px 8px rgba(47,18,1,.45);
  text-shadow: 0 2px 2px #000;
}
.queue-now.is-visible { display: grid; }
.queue-now-label {
  color: #e0a94b;
  font: 900 clamp(8px, 2vw, 11px)/1 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.queue-now-title {
  grid-column: 1;
  font: 900 clamp(16px, 4vw, 22px)/1.1 Georgia, "Times New Roman", serif;
}
.queue-now-yours {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 6px 8px;
  border: 1px solid #75d6dd;
  border-radius: 999px;
  color: #e9ffff;
  background: #086575;
  font: 900 clamp(8px, 1.9vw, 11px)/1 Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.queue-scroll {
  max-height: min(40dvh, 330px);
  overflow: auto;
  padding: 2px 4px 5px;
  scrollbar-color: #8e5015 rgba(49, 19, 3, .18);
}
.queue-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.queue-item {
  display: grid;
  grid-template-columns: clamp(38px, 10vw, 48px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(9px, 2.5vw, 14px);
  min-height: clamp(62px, 15vw, 76px);
  padding: 8px clamp(10px, 2.5vw, 14px);
  border: 3px solid #6b350d;
  border-radius: 9px 15px 10px 14px;
  color: #2b1608;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,218,.7), transparent 30%),
    linear-gradient(145deg, #f2d88e, #d9a957 74%, #bf7d2e);
  box-shadow: inset 0 0 0 2px rgba(255, 225, 142, .7), inset 0 0 12px rgba(96, 38, 3, .2), 0 3px 5px rgba(53,19,1,.32);
}
.queue-item.is-next { border-color: #332006; box-shadow: inset 0 0 0 2px #e9b743, inset 0 0 12px rgba(96,38,3,.24), 0 3px 6px rgba(53,19,1,.42); }
.queue-item.is-yours { border-color: #075f6e; box-shadow: inset 0 0 0 2px #55b8bf, inset 0 0 14px rgba(6,92,105,.18), 0 3px 6px rgba(20,46,43,.38); }
.queue-position {
  display: grid;
  place-items: center;
  width: clamp(36px, 9vw, 44px);
  height: clamp(36px, 9vw, 44px);
  border: 3px solid #6d3309;
  border-radius: 50%;
  color: #382006;
  background: radial-gradient(circle at 34% 28%, #ffe889, #d7971c 62%, #8b4b08);
  box-shadow: inset 0 0 0 2px #ffcf45, inset 0 -3px 5px rgba(81,32,0,.45), 0 2px 4px rgba(59,23,1,.4);
  font: 900 clamp(15px, 3.8vw, 19px)/1 Georgia, serif;
  text-shadow: 0 1px rgba(255,241,170,.75);
}
.queue-item.is-yours .queue-position { border-color: #064b57; background: radial-gradient(circle at 34% 28%, #9cebf0, #1594a4 62%, #075565); color: #f4ffff; text-shadow: 0 1px #053c45; }
.queue-show-details { display: grid; gap: 6px; min-width: 0; }
.queue-show-title { font: 900 clamp(16px, 4vw, 21px)/1.05 Georgia, "Times New Roman", serif; }
.queue-markers { display: flex; flex-wrap: wrap; gap: 5px; }
.queue-next,
.queue-yours {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  font: 900 clamp(8px, 2vw, 11px)/1 Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.queue-next { border: 1px solid #c68819; color: #ffe59e; background: linear-gradient(#332415, #0b0907); text-shadow: 0 1px #000; }
.queue-yours { border: 1px solid #58c4ca; color: #eaffff; background: #087286; }
.queue-empty {
  margin: 8px 4px 0;
  padding: 18px;
  border: 2px dashed #784217;
  border-radius: 12px;
  color: #593017;
  font: 800 15px/1.4 Georgia, serif;
  text-align: center;
}
.queue-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: clamp(10px, 2.8vw, 15px) 0 0;
  color: #5d2c0d;
  font: 900 clamp(8px, 1.9vw, 11px)/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.queue-footnote span { color: #bd7917; font-size: .7em; }
body.queue-open { overflow: hidden; }

/* Illustrated queue panel: built from the same map-and-treasure visual language as the controller. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.queue-modal {
  padding: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(8, 83, 105, .16), transparent 44%),
    rgba(0, 9, 15, .86);
  backdrop-filter: blur(6px) saturate(.68);
}

.queue-card {
  isolation: isolate;
  display: grid;
  grid-template-rows: 25% auto auto minmax(0, 1fr) auto;
  width: min(94vw, 500px);
  aspect-ratio: 800 / 1334;
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  padding: 0 6.2% 6.5%;
  border: 0;
  border-radius: 4% / 2.4%;
  color: #291406;
  background: url("assets/show-queue-map-panel-v1.webp") center / 100% 100% no-repeat;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .88), 0 0 28px rgba(18, 151, 190, .16);
}
.queue-card::before,
.queue-card::after { content: none; }

.queue-heading {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  clip-path: none;
  filter: none;
}

.queue-close {
  top: 2.6%;
  right: 3.8%;
  width: clamp(34px, 9vw, 42px);
  height: clamp(34px, 9vw, 42px);
  border: 3px solid #f2be3d;
  color: #ffe9a2;
  background: radial-gradient(circle at 34% 28%, #bd3c21, #71170b 62%, #300704);
  box-shadow: inset 0 0 0 2px #4b0b04, 0 3px 7px rgba(0,0,0,.65), 0 0 0 2px rgba(55,25,3,.72);
  font-size: clamp(23px, 6vw, 28px);
}

.queue-description {
  align-self: center;
  margin: 2px 12% clamp(7px, 1.8vw, 11px);
  color: #5a2c0d;
  font: 900 clamp(10px, 2.6vw, 14px)/1.25 Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow: 0 1px rgba(255, 225, 141, .8);
}

.queue-now {
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  margin: 0 2% clamp(8px, 2vw, 12px);
  padding: clamp(9px, 2.3vw, 13px) clamp(11px, 2.8vw, 16px);
  border: 3px solid #3c1a05;
  border-radius: 8px 12px 8px 11px;
  color: #ffedb7;
  background:
    linear-gradient(90deg, rgba(127, 69, 17, .26), transparent 28%),
    repeating-linear-gradient(1deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    linear-gradient(105deg, #3a1705, #160a04 72%, #311205);
  box-shadow: inset 0 0 0 2px #a9631a, inset 0 0 15px #000, 0 4px 7px rgba(56, 20, 1, .48);
}
.queue-now-label { color: #efb948; }
.queue-now-title { font-size: clamp(15px, 3.9vw, 21px); }
.queue-now-yours {
  border-color: #81e2ea;
  background: linear-gradient(#138da0, #075a69);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 3px rgba(0,0,0,.35);
}

.queue-scroll {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 2px 2% 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a86617 rgba(72, 28, 3, .16);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 9px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 9px), transparent 100%);
}
.queue-list { gap: clamp(7px, 1.8vw, 10px); padding: 7px 0; }

.queue-item {
  position: relative;
  grid-template-columns: clamp(36px, 9vw, 45px) minmax(0, 1fr);
  gap: clamp(8px, 2.2vw, 12px);
  min-height: clamp(57px, 14vw, 70px);
  padding: 7px clamp(9px, 2.4vw, 13px);
  border: 3px solid #663008;
  border-radius: 8px 13px 7px 12px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 248, 195, .78), transparent 31%),
    repeating-linear-gradient(2deg, rgba(99,44,5,.03) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, rgba(246, 215, 139, .96), rgba(208, 147, 58, .96));
  box-shadow: inset 0 0 0 2px rgba(255, 223, 124, .68), inset 0 0 12px rgba(83,31,2,.22), 0 3px 5px rgba(52,18,1,.38);
}
.queue-item::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(94, 43, 7, .28);
  border-radius: 5px 10px 5px 9px;
  pointer-events: none;
}
.queue-item.is-next { border-color: #201305; box-shadow: inset 0 0 0 2px #e7ab24, inset 0 0 13px rgba(74,27,1,.28), 0 3px 6px rgba(45,16,1,.48); }
.queue-item.is-yours { border-color: #075b6a; box-shadow: inset 0 0 0 2px #58cad2, inset 0 0 13px rgba(0,89,103,.2), 0 3px 6px rgba(14,48,46,.43); }

.queue-position {
  z-index: 1;
  width: clamp(34px, 8.6vw, 42px);
  height: clamp(34px, 8.6vw, 42px);
  border: 3px solid #6a3007;
  background: radial-gradient(circle at 35% 27%, #fff0a1, #daa11f 58%, #814107 100%);
  box-shadow: inset 0 0 0 2px #ffcf43, inset 0 -3px 5px rgba(76,27,0,.45), 0 2px 4px rgba(54,20,1,.45);
}
.queue-item.is-under .queue-position { border-color: #075883; box-shadow: inset 0 0 0 2px #42b9ec, inset 0 -3px 5px rgba(0,40,70,.45), 0 2px 4px rgba(20,30,45,.45); }
.queue-item.is-dance .queue-position { border-color: #7b1242; box-shadow: inset 0 0 0 2px #ed5a9d, inset 0 -3px 5px rgba(75,0,37,.45), 0 2px 4px rgba(48,18,34,.45); }
.queue-item.is-yours .queue-position { border-color: #064a55; background: radial-gradient(circle at 35% 27%, #b9f7f7, #21a1ae 60%, #07515f); }

.queue-show-details { z-index: 1; gap: 5px; }
.queue-show-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(15px, 3.8vw, 20px);
}
.queue-show-title::before {
  content: "♪";
  font: 900 1.15em/1 Arial, sans-serif;
  text-shadow: 0 1px rgba(255,255,255,.55);
}
.queue-item.is-under .queue-show-title::before { color: #087fbd; }
.queue-item.is-dance .queue-show-title::before { color: #b5165f; }
.queue-markers { gap: 4px; }
.queue-next,
.queue-yours { padding: 4px 7px; font-size: clamp(7px, 1.8vw, 10px); }
.queue-next { border-color: #c98a1b; background: linear-gradient(#3a2815, #0d0905); }
.queue-yours { border-color: #6ad5dc; background: linear-gradient(#118b9d, #076071); }

.queue-empty {
  margin: 8px 0 0;
  padding: 16px;
  background: rgba(236, 192, 103, .66);
  box-shadow: inset 0 0 10px rgba(85,31,2,.16);
}

.queue-footnote {
  align-self: end;
  margin: clamp(7px, 1.8vw, 10px) 10% 0;
  padding: 5px 7px;
  border-radius: 999px;
  color: #452005;
  background: rgba(224, 164, 64, .72);
  box-shadow: inset 0 0 6px rgba(84,31,2,.2);
  font-size: clamp(7px, 1.7vw, 9px);
  text-align: center;
}

@media (max-height: 700px) {
  .queue-card { width: min(82vw, 390px); }
  .queue-description { margin-bottom: 6px; }
  .queue-now { margin-bottom: 7px; }
  .queue-footnote { margin-top: 5px; }
}

/* Queue songs echo the two large controller song buttons. */
.queue-item {
  grid-template-columns: clamp(40px, 10.5vw, 52px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(7px, 1.8vw, 10px);
  min-height: clamp(66px, 16.5vw, 80px);
  padding: clamp(7px, 1.8vw, 10px) clamp(9px, 2.3vw, 13px);
  border-width: 3px;
  border-radius: 17px 15px 17px 15px;
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 247, 196, .84), transparent 31%),
    repeating-linear-gradient(2deg, rgba(99,44,5,.028) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f0d38b, #d29b4a 76%, #b66f25);
}
.queue-item::after {
  inset: 4px;
  border-radius: 12px 10px 12px 10px;
}
.queue-item.is-under {
  border-color: #06496f;
  box-shadow: inset 0 0 0 2px #48caff, inset 0 0 12px rgba(9,87,126,.17), 0 4px 0 #03283d, 0 6px 8px rgba(28,13,2,.38);
}
.queue-item.is-dance {
  border-color: #76133f;
  box-shadow: inset 0 0 0 2px #f05498, inset 0 0 12px rgba(135,13,69,.14), 0 4px 0 #3e0922, 0 6px 8px rgba(28,13,2,.38);
}
.queue-item.is-under.is-yours { outline: 2px solid #70edf2; outline-offset: 1px; }
.queue-item.is-dance.is-yours { outline: 2px solid #70edf2; outline-offset: 1px; }

.queue-position {
  position: absolute;
  z-index: 3;
  top: -6px;
  left: -6px;
  width: clamp(27px, 6.8vw, 33px);
  height: clamp(27px, 6.8vw, 33px);
  border-color: #663006 !important;
  color: #3b2005 !important;
  background: radial-gradient(circle at 34% 27%, #fff0a4, #dda31e 58%, #834205) !important;
  box-shadow: inset 0 0 0 2px #ffd14b, inset 0 -2px 4px rgba(76,27,0,.46), 0 2px 4px rgba(45,16,1,.52) !important;
  font-size: clamp(12px, 3vw, 15px);
}

.queue-song-icon {
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  align-self: stretch;
  font: 900 clamp(33px, 8.5vw, 44px)/1 Georgia, serif;
  transform: rotate(-7deg);
  -webkit-text-stroke: clamp(1px, .3vw, 2px) rgba(24, 10, 3, .78);
  text-shadow: 0 3px 0 rgba(29,10,2,.5), 0 4px 7px rgba(31,12,2,.28);
}
.queue-item.is-under .queue-song-icon { color: #1db5f1; }
.queue-item.is-dance .queue-song-icon { color: #e72c82; }

.queue-show-details {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}
.queue-show-title {
  display: block;
  overflow: hidden;
  color: #251305;
  font: 900 clamp(15px, 3.8vw, 20px)/1.05 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px rgba(255,240,174,.9);
}
.queue-show-title::before { content: none; }
.queue-duration {
  color: #51290f;
  font: 800 clamp(8px, 2vw, 11px)/1.05 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  white-space: nowrap;
}

.queue-markers {
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: center;
  gap: 5px;
}
.queue-next,
.queue-yours {
  white-space: nowrap;
  box-shadow: 0 2px 3px rgba(41,14,1,.35);
}
.queue-next {
  padding: 5px 10px 5px 8px;
  border: 2px solid #c98b1e;
  border-radius: 4px;
  background: linear-gradient(165deg, #302112, #070605 70%);
  clip-path: polygon(0 0, 100% 5%, 91% 50%, 100% 95%, 0 100%);
}
.queue-yours {
  padding: 5px 8px;
  border: 2px solid #65d5dc;
  border-radius: 999px;
  background: linear-gradient(#128da0, #075c6b);
}

@media (max-width: 350px) {
  .queue-item { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; }
  .queue-song-icon { font-size: 31px; }
  .queue-next, .queue-yours { padding: 4px 6px; letter-spacing: .035em; }
}

@media (max-height: 700px) {
  .support-card { padding-top: 24px; padding-bottom: 20px; }
  .support-seal { width: 64px; margin-bottom: 12px; }
  .support-kicker { margin-bottom: 10px; }
  .support-description { margin: 12px auto; }
  .support-choice-label { margin-bottom: 8px; }
  .support-amount, .support-continue { min-height: 52px; }
  .support-note { margin-top: 12px; }
}

.preview-reset {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #8fdcff;
  border-radius: 999px;
  color: white;
  background: rgba(0, 25, 38, .8);
  font: 12px Arial, sans-serif;
  cursor: pointer;
}

.bubble-test {
  position: fixed;
  left: 10px;
  bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #8fdcff;
  border-radius: 999px;
  color: white;
  background: rgba(0, 68, 102, .88);
  font: 12px Arial, sans-serif;
  cursor: pointer;
}
.bubble-test.is-active { background: #0878a7; box-shadow: 0 0 10px #41ccff; }
.preview-reset:focus-visible,
.bubble-test:focus-visible,
.support-button:focus-visible,
.help-button:focus-visible,
.help-close:focus-visible,
.help-send:focus-visible,
.launch-notice:focus-visible,
.queue-close:focus-visible,
.support-close:focus-visible,
.support-amount:focus-visible,
.support-continue:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

@media (min-width: 901px) {
  .preview-reset { right: calc(50% - 540px); }
  .bubble-test { left: calc(50% - 540px); }
}

@media (prefers-reduced-motion: no-preference) {
  .status-copy i { animation: pulse 1.8s ease-in-out infinite; }
  .launch-notice.is-visible .queue-flag-action { animation: queue-action-glow 1.9s ease-in-out infinite; }
  .bubble { animation: bubble-rise var(--duration, 8.4s) ease-in infinite; }
  @keyframes pulse { 50% { opacity: .55; transform: scale(.86); } }
  @keyframes queue-action-glow {
    50% { filter: brightness(1.18); transform: translateY(-.08em) scale(1.025); }
  }
  @keyframes bubble-rise {
    0% { translate: 0 0; scale: .75; opacity: 0; }
    14% { opacity: .85; }
    78% { opacity: .7; }
    100% { translate: var(--drift, 24px) -310px; scale: 1.18; opacity: 0; }
  }
  @keyframes takeover-rise {
    0% { transform: translate3d(0, 0, 0) scale(.72); opacity: 0; }
    7% { opacity: var(--opacity); }
    82% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), -205vh, 0) scale(1.18); opacity: 0; }
  }
  .bubble-b, .bubble-d, .bubble-f, .bubble-h { --drift: -20px; }
  @keyframes peek-left {
    0% { translate: -45% 0; rotate: 0deg; }
    20%, 81% { translate: 34% 0; rotate: 0deg; }
    100% { translate: -55% 0; rotate: 0deg; }
  }
  @keyframes peek-right {
    0% { translate: 45% 0; rotate: 0deg; }
    20%, 81% { translate: -34% 0; rotate: 0deg; }
    100% { translate: 55% 0; rotate: 0deg; }
  }
  @keyframes peek-top {
    0% { translate: 0 -45%; rotate: 0deg; }
    20%, 81% { translate: 0 32%; rotate: 0deg; }
    100% { translate: 0 -55%; rotate: 0deg; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-notice, .show-progress i, .song-bubble-surge, .hotspot, .request-confirmation, .now-playing-flag, .up-next-flag, .support-modal, .support-card, .help-modal, .help-card, .queue-modal, .queue-card { transition: none; }
}