* { box-sizing: border-box; }
html, body {
 margin: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: #000;
 color: #fff;
}
body { font: 12px/1.3 Tahoma, "MS Sans Serif", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px dotted #fff2aa; outline-offset: 3px; }
[hidden] { display: none !important; }

.aquarium-player {
 position: fixed;
 inset: calc(var(--joyradio-header-height, 48px) + env(safe-area-inset-top, 0px)) 0 0;
 display: grid;
 grid-template-rows: 41px minmax(0, 1fr) auto;
 background: #060b20;
}
.stone {
 background-color: #56608b;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.036 .064' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.52 0 0 0 .02 0 .62 0 0 .04 0 0 .85 0 .11 0 0 0 .88 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 36% 20%, #b7c9e9, #606f9b 55%, #34345b);
 border: 2px solid;
 border-color: #bdcbed #24233e #181a31 #9faed6;
 box-shadow: inset 1px 1px #e9e9ff77, inset -2px -2px #15193688;
}
.tank-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 2px 13px 3px;
}
.tank-toolbar h1 {
 display: flex;
 align-items: center;
 gap: 9px;
 margin: 0;
 color: #ffe8a1;
 text-shadow: 1px 2px #15102d;
 font: bold 16px/1 Georgia, "Times New Roman", serif;
 letter-spacing: .4px;
 white-space: nowrap;
}
.tank-toolbar h1 svg { width: 38px; height: 26px; filter: drop-shadow(1px 2px #151631); }
.toolbar-button {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 3px 10px;
 border: 1px solid;
 border-color: #afbbd8 #252740 #252740 #afbbd8;
 background: #30395c99;
 box-shadow: inset 0 0 3px #d8dcf055, 1px 1px #19162b;
 color: #fff7d4;
 text-shadow: 1px 1px #121427;
}
.toolbar-button span { font-size: 20px; line-height: 18px; }
.tuning-controls { display: flex; align-items: center; gap: 8px; }
.toolbar-button:hover, .toolbar-button[aria-expanded=true], .toolbar-button[aria-pressed=true] { background: #273052; }
.tank-display {
 position: relative;
 min-height: 0;
 background: linear-gradient(#52d1f3, #0086c2 45%, #00589a);
 overflow: hidden;
 border-inline: 5px ridge #acb8ce;
}
.tank-background, #aquarium, .water-light, .glass-edge { position: absolute; inset: 0; }
.tank-background, #aquarium { display: block; width: 100%; height: 100%; }
.tank-background { object-fit: fill; user-select: none; }
#aquarium, .water-light, .glass-edge { pointer-events: none; }
.water-light {
 background: repeating-linear-gradient(114deg, transparent 0 14%, #d2fff316 17%, transparent 22% 33%);
 mix-blend-mode: screen;
 animation: light-in-water 14s ease-in-out infinite alternate;
}
@keyframes light-in-water {
 from { transform: translateX(-4%) skewX(3deg); opacity: .25; }
 to { transform: translateX(4%) skewX(-3deg); opacity: .6; }
}
.glass-edge {
 box-shadow: inset 0 3px 4px #e9ffff77, inset 0 -2px 4px #0f243b88, inset 2px 0 #e4fbff55, inset -2px 0 #e4fbff33;
}
#fish-channels { position: absolute; inset: 0; pointer-events: none; }
.fish-target {
 position: absolute;
 top: 0;
 left: 0;
 border: 0;
 padding: 0;
 border-radius: 50%;
 background: transparent;
 pointer-events: auto;
}
.fish-target:focus-visible { outline: none; }
.fish-caption {
 position: absolute;
 top: calc(100% + 2px);
 left: 50%;
 transform: translateX(-50%);
 padding: 2px 6px;
 border: 1px solid #c6d8f056;
 background: #071a32ce;
 color: #fff2c6;
 font: 10px/1.2 Tahoma, sans-serif;
 white-space: nowrap;
 pointer-events: none;
 opacity: 0;
}
.fish-target[data-assigned=true] .fish-caption,
.fish-target[aria-pressed=true] .fish-caption,
.fish-target:hover .fish-caption,
.fish-target:focus-visible .fish-caption { opacity: 1; }
.fish-target:focus-visible .fish-caption { outline: 1px dotted #fff2aa; outline-offset: 2px; }
.aquarium-player.playing .fish-target .fish-caption { opacity: 0; }
.aquarium-player.playing .fish-target:is([data-playing], :focus-visible) .fish-caption { opacity: 1; }
@media (any-hover: hover) {
 .aquarium-player.playing .fish-target:hover .fish-caption { opacity: 1; }
}

.audio-console {
 display: grid;
 grid-template-columns: 192px minmax(180px, 1fr) 192px;
 gap: 6px 22px;
 padding: 10px 20px max(6px, env(safe-area-inset-bottom, 0px));
 border-top: 3px ridge #d0d9e9;
 min-height: 109px;
}
.transport, .playback-options { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pearl-button, .small-button {
 display: grid;
 place-items: center;
 flex: none;
 border: 2px solid;
 border-color: #bac7e6 #1d2340 #1b1d3c #a2b3dd;
 box-shadow: inset 2px 2px 3px #e1e6fb88, inset -3px -4px 4px #202543aa, 1px 2px #0e1023;
 background: radial-gradient(ellipse at 35% 24%, #b3becf, #6d7c9b 50%, #343451 83%);
 color: #fcf4cd;
}
.pearl-button { width: 46px; height: 46px; border-radius: 45% 48% 44% 50%; padding: 8px; }
.play-button {
 width: 60px;
 height: 60px;
 border-radius: 48%;
 color: #ffeb98;
 background: radial-gradient(ellipse at 34% 24%, #a6bdc5, #546e89 46%, #303255 82%);
}
.pearl-button svg, .small-button svg, .volume-control svg {
 fill: currentColor;
 filter: drop-shadow(1px 1px #14142b);
}
.pearl-button svg { width: 24px; height: 24px; }
.play-button svg { width: 31px; height: 31px; }
.pearl-button:hover, .small-button:hover { filter: brightness(1.16); }
.audio-console button:disabled, .audio-console input:disabled { opacity: .45; cursor: default; }
.pearl-button:active, .small-button:active, .small-button[aria-pressed=true] {
 border-color: #26203c #b8c6e1 #b8c6e1 #26203c;
 box-shadow: inset 2px 3px 5px #131a39;
}
.now-playing { min-width: 0; }
.track-screen {
 display: flex;
 align-items: center;
 min-height: 47px;
 gap: 12px;
 padding: 5px 13px;
 border: 3px solid;
 border-color: #1b172f #9faaca #a4b3ce #181a31;
 background: #030b0f;
 box-shadow: inset 0 0 12px #000, 0 0 0 1px #333454;
 color: #fff0ad;
 font-family: "Lucida Console", "Courier New", monospace;
}
.track-caption { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track-caption strong {
 font-size: 14px;
 line-height: 1.1;
 font-weight: 400;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 text-shadow: 0 0 5px #dbc77466;
}
.track-caption > span { color: #98b9aa; font-size: 9px; letter-spacing: 1px; }
#track-count { color: #83a59e; font-size: 9px; white-space: nowrap; }
#spectrum { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-left: auto; }
#spectrum i {
 width: 3px;
 height: var(--level, 3px);
 max-height: 24px;
 background: repeating-linear-gradient(to top, #b6dc84 0 2px, transparent 2px 3px);
}
.seek-row { display: flex; gap: 9px; align-items: center; height: 24px; }
.seek-row output {
 color: #f3efda;
 text-shadow: 1px 1px #13162d;
 font: 10px "Lucida Console", monospace;
 width: 31px;
 white-space: nowrap;
}
.seek-row output:last-child { text-align: right; }
input[type=range] {
 appearance: none;
 height: 7px;
 border-radius: 0;
 border: 1px solid;
 border-color: #171b37 #adbedc #adbedc #171b37;
 background: linear-gradient(to right, #8fae87 var(--fill, 0%), #1d3042 var(--fill, 0%));
 cursor: pointer;
 min-width: 0;
 margin: 0;
}
input[type=range]::-webkit-slider-thumb {
 appearance: none;
 width: 11px;
 height: 15px;
 background: linear-gradient(110deg, #e9e2c0, #a5b1ba 55%, #59627b);
 border: 1px solid;
 border-color: #fff9d8 #20253b #25273e #f0e4c4;
 box-shadow: 1px 1px #10182b;
 border-radius: 2px;
}
input[type=range]::-moz-range-thumb {
 width: 10px;
 height: 14px;
 background: #b9c1c2;
 border: 1px outset #eeebc9;
 border-radius: 2px;
}
#seek { flex: 1; }
.extra-controls { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 2px; }
.small-button {
 width: 31px;
 height: 29px;
 padding: 5px;
 border-width: 1px;
 border-radius: 35%;
}
.small-button svg { width: 18px; height: 18px; }
.small-button[aria-pressed=true] { color: #c6f8b2; background: #2b4250; }
#favorite[aria-pressed=true] { color: #ffb3bd; }
.volume-control { width: 143px; display: flex; align-items: center; gap: 8px; }
.volume-control > button { border: 0; padding: 0; background: transparent; color: #e8ebd5; display: grid; place-items: center; width: 20px; }
.volume-control svg { width: 17px; height: 17px; }
.volume-control input { flex: 1; }
.volume-control > button[aria-pressed=true] { opacity: .45; }
.console-status {
 grid-column: 1/-1;
 display: flex;
 align-items: center;
 gap: 6px;
 padding-top: 2px;
 border-top: 1px solid #20294b55;
 font-size: 9px;
 line-height: 13px;
 color: #e0e3d6;
 text-shadow: 1px 1px #222440;
}
.signal-led { width: 5px; height: 5px; border: 1px solid #1a281a; border-radius: 50%; background: #7c8d75; }
.playing .signal-led { background: #b7e784; box-shadow: 0 0 4px #e0f492; }
.console-brand { margin-left: auto; letter-spacing: 1px; color: #cdd3df; font-size: 8px; }

.playlist-panel {
 position: absolute;
 right: 9px;
 top: 8px;
 width: min(315px, calc(100% - 18px));
 max-height: calc(100% - 16px);
 overflow: auto;
 padding: 10px;
 z-index: 5;
 box-shadow: 3px 5px 12px #00182c99;
}
.playlist-panel > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c4d1ec55; padding-bottom: 8px; }
.playlist-panel h2 { font: 12px "Lucida Console", monospace; margin: 0; color: #ffedbc; }
.playlist-panel > header button { border: 1px outset #9eacc4; background: #3b4668; padding: 0 5px; font-size: 19px; line-height: 18px; }
.favorite-filter { display: flex; gap: 6px; align-items: center; font-size: 10px; padding: 10px 0; color: #f1efdf; }
.favorite-filter input { accent-color: #657e84; margin: 0; }
.queue-track {
 display: grid;
 width: 100%;
 grid-template-columns: 17px 1fr auto;
 align-items: center;
 gap: 8px;
 text-align: left;
 padding: 9px;
 background: #0e2133cc;
 border: 1px solid #8496b9;
 box-shadow: inset 1px 1px 3px #04111e;
 color: #eee5c7;
}
.queue-track[aria-current=true] { color: #fbeb9f; background: #132939; }
.queue-track > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.queue-track small { color: #98b5b1; font-size: 9px; }
.queue-track time { font: 10px monospace; }
.queue-empty { font-size: 11px; padding: 12px 2px; margin: 0; color: #f1ecd5; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (min-width: 1600px) {
 .audio-console { grid-template-columns: 235px minmax(180px, 1fr) 235px; padding-inline: 32px; }
 .track-screen { min-height: 52px; }
}
@media (max-width: 750px) {
 .tank-toolbar { padding-inline: 7px; }
 .tank-toolbar h1 { font-size: 14px; gap: 5px; }
 .tank-background { object-fit: cover; }
 .audio-console { grid-template-columns: 146px minmax(110px, 1fr); gap: 5px 12px; padding: 9px 12px max(5px, env(safe-area-inset-bottom, 0px)); }
 .transport { gap: 8px; }
 .pearl-button { width: 36px; height: 36px; padding: 6px; }
 .pearl-button svg { width: 20px; height: 20px; }
 .play-button { width: 51px; height: 51px; }
 .play-button svg { width: 27px; height: 27px; }
 .extra-controls { grid-column: 1/-1; flex-direction: row; justify-content: space-between; padding-top: 0; }
 .playback-options { gap: 9px; }
 .small-button { width: 28px; height: 26px; padding: 5px; }
 .small-button svg { width: 16px; height: 16px; }
 .track-screen { min-height: 41px; padding: 5px 7px; gap: 5px; }
 .track-caption strong { font-size: 12px; }
 #spectrum { gap: 1px; }
 #spectrum i { width: 2px; }
 #track-count { display: none; }
 .seek-row { height: 22px; gap: 5px; }
 .seek-row output { font-size: 9px; width: 27px; }
}
@media (max-width: 420px) {
 .aquarium-player { grid-template-rows: 37px minmax(0, 1fr) auto; }
 .tank-display { border-inline-width: 3px; }
 .tuning-controls { gap: 5px; }
 .toolbar-button { padding-inline: 6px; font-size: 11px; }
 .audio-console { padding-inline: 9px; grid-template-columns: 125px minmax(100px, 1fr); gap: 5px 9px; }
 .transport { gap: 6px; }
 .pearl-button { width: 32px; height: 32px; }
 .play-button { width: 47px; height: 47px; }
 .track-screen { padding: 5px 6px; }
 .track-caption strong { font-size: 11px; }
 .track-caption > span { font-size: 8px; }
 #spectrum { display: none; }
}
@media (max-height: 450px) and (min-width: 751px) {
 .aquarium-player { grid-template-rows: 33px minmax(0, 1fr) auto; }
 .audio-console { min-height: 89px; padding-top: 6px; }
 .track-screen { min-height: 34px; }
 .play-button { width: 49px; height: 49px; }
}
@media (min-width: 751px) and (hover: hover) and (pointer: fine) {
 /* Fit the artwork between the fixed navigation and the player controls. */
 html { height: auto; min-height: 100%; overflow: auto; }
 body {
  --nav-height: calc(var(--joyradio-header-height, 48px) + env(safe-area-inset-top, 0px));
  --toolbar-height: 41px;
  --console-height: 116px;
  --frame-gap: 12px;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--frame-gap)) 0 var(--frame-gap);
 }
 .aquarium-player {
  --tank-height: max(290px, calc(100svh - var(--nav-height) - var(--toolbar-height) - var(--console-height) - 2 * var(--frame-gap)));
  position: relative;
  inset: auto;
  flex: none;
  width: min(1120px, calc(100vw - 32px), calc(var(--tank-height) * 1672 / 941 + 10px));
  grid-template-rows: var(--toolbar-height) auto var(--console-height);
 }
 .tank-display { box-sizing: content-box; aspect-ratio: 1672 / 941; }
 .tank-background { object-fit: contain; }
 .audio-console {
  grid-template-columns: 154px minmax(0, 1fr) 146px;
  min-height: 0;
  gap: 6px 14px;
  padding: 9px 14px 6px;
 }
 .track-screen { min-height: 47px; }
 .transport { gap: 8px; }
 .pearl-button { width: 40px; height: 40px; padding: 6px; }
 .play-button { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .water-light { animation: none; } }