/* The listening deck shares the page's palette, type and original Sciware mark. */
.player {
  position:fixed; z-index:30; inset-inline:0;
  bottom:max(18px,env(safe-area-inset-bottom)); margin-inline:auto;
  width:min(1040px,calc(100% - 40px)); padding:18px 24px;
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px;
  align-items:center; max-height:calc(100dvh - 36px); overflow:auto;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  border-radius:12px; box-shadow:0 18px 80px #0006,0 1px 0 #ffffff08 inset;
  backdrop-filter:blur(24px); isolation:isolate; animation:player-enter .35s ease-out;
}
.player::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 100% 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 52%);
}
body.player-open {padding-bottom:var(--player-clearance,240px)}
body.player-open .toast {bottom:calc(var(--player-clearance,240px) + 12px)}
.player-deck {min-width:0}
.player-heading {padding-inline-end:32px; min-width:0}
.player-kicker {display:flex; align-items:center; gap:8px; color:var(--accent); font-size:10px; margin-bottom:4px}
.player-kicker-rule {width:22px; height:1px; background:var(--border)}
.player-state-dot {width:4px; height:4px; border-radius:50%; background:var(--muted)}
.player[data-state=playing] .player-state-dot {background:var(--accent); box-shadow:0 0 10px var(--accent)}
#player-title {font-size:17px; line-height:1.6; font-weight:500; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.player-orbit {width:150px; height:156px; position:relative; color:var(--accent); user-select:none; align-self:center}
.orbit-signal {display:block; width:150px; height:150px; overflow:visible}
.orbit-guide {stroke:currentColor; stroke-width:.6; opacity:.22; stroke-dasharray:1 5}
.orbit-guide-inner {stroke-dasharray:none; opacity:.1}
.orbit-crosshair {stroke:currentColor; stroke-width:.7; opacity:.45}
.orbit-filaments {stroke:currentColor; stroke-width:.9; stroke-linecap:round}
.orbit-filaments path:nth-child(1) {opacity:.85}
.orbit-filaments path:nth-child(2) {opacity:.4}
.orbit-filaments path:nth-child(3) {opacity:.22}
.orbit-particle {fill:currentColor}
.player-nucleus {position:absolute; width:46px; height:46px; inset:52px auto auto 52px; display:grid; place-items:center; border-radius:50%; background:var(--surface); box-shadow:0 0 22px 8px var(--surface)}
.player-nucleus .original-logo {width:35px; height:30px; opacity:.9}
.orbit-caption {position:absolute; bottom:-3px; width:100%; text-align:center; font:7px/1.4 Arial,sans-serif; letter-spacing:2px; color:var(--muted)}
.player-timeline {display:flex; gap:12px; align-items:center; margin-block:3px 1px; font:11px/1.3 Arial,sans-serif; font-variant-numeric:tabular-nums; color:var(--muted)}
#player-current {color:var(--accent)}
.player-seek-wrap {flex:1; min-width:0; display:flex; align-items:center; --played:0%; --buffered:0%}
.player-range {appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; height:32px; margin:0; background:transparent; cursor:pointer; direction:ltr; accent-color:var(--accent); border:0; padding:0}
.player-range::-webkit-slider-runnable-track {height:3px; border-radius:3px; background:linear-gradient(to right,var(--accent) 0 var(--played,0%),color-mix(in srgb,var(--accent) 30%,var(--soft)) var(--played,0%) var(--buffered,0%),var(--border) var(--buffered,0%) 100%)}
.player-range::-moz-range-track {height:3px; border-radius:3px; background:linear-gradient(to right,var(--accent) 0 var(--played,0%),color-mix(in srgb,var(--accent) 30%,var(--soft)) var(--played,0%) var(--buffered,0%),var(--border) var(--buffered,0%) 100%)}
.player-range::-webkit-slider-thumb {appearance:none; -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent); margin-top:-4px; transition:box-shadow .2s}
.player-range::-moz-range-thumb {width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent)}
.player-range:hover::-webkit-slider-thumb {box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.player-range:disabled {opacity:.35; cursor:default}
.player-controls,.player-transport,.player-settings,.player-volume,.player-speed {display:flex; align-items:center}
.player-controls {justify-content:space-between; gap:16px}
.player-transport {gap:5px; flex-shrink:0}
.player-settings {gap:22px}
.player-button {display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:1px solid transparent; border-radius:50%; color:var(--muted); padding:0; transition:color .2s,background .2s,transform .2s,border-color .2s}
.player-button:hover {background:var(--soft); color:var(--accent)}
.player-button:active {transform:scale(.93)}
.player-button:disabled {opacity:.3}
.player-button svg {width:20px; height:20px; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; fill:none}
.player-skip svg {width:27px; height:27px}
.player-skip text {fill:currentColor; stroke:none; font:9px Arial,sans-serif; text-anchor:middle}
.player-close {position:absolute; left:8px; top:8px; z-index:2; width:44px; height:44px}
.player-close svg {width:18px; height:18px}
.player-play {background:var(--accent); color:var(--bg); width:52px; height:52px; margin-inline:6px; position:relative}
.player-play:hover {background:var(--accent); color:var(--bg); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent)}
.player-play svg {width:23px; height:23px}
.player-play [data-play-icon] {fill:currentColor; stroke:none}
.player-play [data-pause-icon] {stroke-width:3.5}
.player[data-state=loading] .player-play::after {content:''; position:absolute; inset:-4px; border:1px solid transparent; border-top-color:var(--accent); border-radius:50%; animation:player-loading 1.5s linear infinite}
.player-button[aria-pressed=true] {color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.player-speed {gap:5px; font-size:10px; color:var(--muted)}
.player-speed select {height:44px; min-width:72px; padding:8px; border:1px solid var(--border); border-radius:5px; font:12px Arial,sans-serif; color:var(--accent); background:var(--surface); cursor:pointer}
.player-volume {gap:2px}
.player-volume-wrap {width:72px; display:flex; --played:100%; --buffered:100%}
.player-volume .player-button {width:40px; min-width:44px}
.player-volume svg {width:18px; height:18px}
#audio-message {font-size:11px; color:var(--accent); line-height:1.8; margin-top:8px}
#audio-message:empty {display:none}
.player-sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
@keyframes player-loading {to {transform:rotate(360deg)}}
@keyframes player-enter {from {opacity:0; translate:0 12px} to {opacity:1; translate:0 0}}
@media (max-width:900px) {
  .player {grid-template-columns:115px minmax(0,1fr); gap:18px; padding:16px 20px}
  .player-orbit {width:115px; height:128px}
  .orbit-signal {width:115px; height:115px}
  .player-nucleus {inset:38px auto auto 38px; width:39px; height:39px}
  .player-nucleus .original-logo {width:28px; height:25px}
  .orbit-caption {font-size:6px; bottom:0; letter-spacing:1.5px}
  .player-settings {gap:8px}
  .player-volume-wrap {width:48px}
  .player-speed>span {display:none}
  .player-controls {gap:6px}
}
@media (max-width:720px) {
  .player {width:calc(100% - 24px); bottom:max(12px,env(safe-area-inset-bottom)); grid-template-columns:76px minmax(0,1fr); gap:2px 14px; padding:12px 16px; border-radius:10px; max-height:calc(100dvh - 24px)}
  .player-deck {display:contents}
  .player-orbit {grid-row:1; grid-column:1; width:76px; height:76px}
  .orbit-signal {width:76px; height:76px}
  .player-nucleus {inset:24px auto auto 24px; width:28px; height:28px; box-shadow:0 0 12px 3px var(--surface)}
  .player-nucleus .original-logo {width:21px; height:18px}
  .orbit-caption {display:none}
  .player-heading {grid-row:1; grid-column:2; padding-inline-end:30px}
  #player-title {font-size:15px}
  .player-timeline,.player-controls,#audio-message {grid-column:1/-1}
  .player-kicker {font-size:9px; gap:6px}
  .player-kicker-rule {width:14px}
  .player-close {left:4px; top:4px}
  .player-controls {gap:8px}
  .player-settings {gap:12px}
  .player-volume-wrap {width:60px}
}
@media (max-width:520px) {
  .player-controls {flex-wrap:wrap; justify-content:center; gap:8px}
  .player-settings {flex-basis:100%; justify-content:space-between; padding-inline:4px; border-top:1px solid var(--border); padding-top:6px}
  .player-speed>span {display:inline}
  .player-volume-wrap {width:78px}
  .player-transport {gap:9px}
  .player-speed select {height:38px}
  .player-timeline {gap:10px}
}
@media (prefers-reduced-motion:reduce) {
  .player *, .player *::after {animation:none!important; transition:none!important}
}
@media (max-width:360px) {
  .player-transport {gap:4px}
}