/* DONBEX listener tools + visual polish. Visual-only layer; no base layout rewrites. */
#player{--dbx-accent:#69e8ff;--dbx-accent2:#8b6dff}
#player.glass{--dbx-accent:#8beaff;--dbx-accent2:#cf8cff}
#player.stage{--dbx-accent:#ffd073;--dbx-accent2:#ff774f}
#player.pulse{--dbx-accent:#d36bff;--dbx-accent2:#55c8ff}

.dbx-user-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.dbx-user-bg.is-on{opacity:1}
.dbx-user-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,12,.16),rgba(3,6,12,.54))}
#player>.ambient,#player>.stars,#player>.stage-lights,#player>.template-ornament{z-index:1}
#player>.station-top,#player>.visual,#player>.meta,#player>.wave,#player>.controls,#player>.social-preview,#player>.player-brand,#player>.dbx-listener-tools{position:relative;z-index:3}

.dbx-listener-tools{width:min(100%,300px);display:flex;justify-content:center;align-items:center;gap:8px;margin:10px auto 0;flex:0 0 auto}
.dbx-tool-btn{position:relative;width:46px;height:38px;border:1px solid color-mix(in srgb,var(--dbx-accent) 35%,transparent);border-radius:13px;background:rgba(5,9,15,.54);color:#f7fbff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.20);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dbx-tool-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.dbx-tool-btn:active{transform:scale(.96)}
.dbx-tool-btn.is-active{box-shadow:0 0 18px color-mix(in srgb,var(--dbx-accent) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.dbx-timer-badge{position:absolute;right:-6px;top:-7px;min-width:22px;height:18px;padding:0 5px;border-radius:999px;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--dbx-accent),var(--dbx-accent2));color:#071018;font-size:8px;font-weight:950;letter-spacing:-.02em;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 12px color-mix(in srgb,var(--dbx-accent) 70%,transparent),0 4px 10px rgba(0,0,0,.28);pointer-events:none;z-index:4}
.dbx-tool-btn.has-timer .dbx-timer-badge{display:flex}

.dbx-popover{position:fixed;z-index:9999;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,390px);padding:14px;border-radius:20px;background:rgba(7,10,16,.94);border:1px solid rgba(255,255,255,.13);box-shadow:0 26px 80px rgba(0,0,0,.56),0 0 34px color-mix(in srgb,var(--dbx-accent) 16%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#fff}
.dbx-popover[hidden]{display:none!important}
.dbx-pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.dbx-pop-head b{font-size:13px}.dbx-pop-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:21px;line-height:1;cursor:pointer}
.dbx-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dbx-options button{min-height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#fff;font-weight:760;cursor:pointer}.dbx-options button:active{transform:scale(.985)}
.dbx-options .wide{grid-column:1/-1}.dbx-options .danger{color:#ffd8d8}.dbx-timer-status{margin-top:10px;text-align:center;font-size:11px;color:#b9c8d7;min-height:16px}
.dbx-toast{position:fixed;z-index:10000;left:50%;bottom:max(86px,calc(env(safe-area-inset-bottom) + 72px));transform:translateX(-50%) translateY(10px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:999px;background:rgba(5,8,13,.92);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:750;transition:.18s ease}.dbx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Clean travelling perimeter light ONLY on existing social bubbles. No rotating boxes. */
#player .social-preview a{position:relative;isolation:isolate}
body.dbx-audio-playing #player .social-preview a::before{
 content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
 background:linear-gradient(115deg,transparent 0 22%,var(--dbx-accent) 34%,#fff 42%,var(--dbx-accent2) 50%,transparent 62% 100%);
 background-size:320% 100%;background-position:100% 0;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dbx-accent) 58%,transparent));animation:dbxEdgeSlide 2.35s linear infinite
}
@keyframes dbxEdgeSlide{to{background-position:-220% 0}}
body:not(.dbx-audio-playing) #player .social-preview a::before{display:none!important}

/* Mobile-specific responsiveness without moving original template sections. */
@media(max-width:760px){
  .dbx-listener-tools{margin-top:8px;gap:7px;width:auto}
  .dbx-tool-btn{width:44px;height:36px;border-radius:12px}
  .dbx-popover{bottom:max(12px,env(safe-area-inset-bottom));padding:12px;border-radius:18px}
}
@media(max-width:370px){
  .dbx-listener-tools{margin-top:6px;gap:6px}.dbx-tool-btn{width:41px;height:34px}.dbx-tool-btn svg{width:16px;height:16px}
}

/* Stronger response of ORIGINAL visualizers on phones only; no extra visualizer is created. */
@media(pointer:coarse){
  #player .orbit-bars i,#player .glass-meter i{transform-origin:50% 100%;will-change:transform,opacity,filter}
  #player .stage-vu span{will-change:width,filter}
  #player .pulse-canvas{will-change:filter}
  body.dbx-audio-playing #player .orbit-bars,body.dbx-audio-playing #player .glass-meter,body.dbx-audio-playing #player .stage-vu,body.dbx-audio-playing #player .pulse-canvas{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--dbx-accent) 44%,transparent)) saturate(1.22)}
  body:not(.dbx-audio-playing) #player .orbit-bars i,body:not(.dbx-audio-playing) #player .glass-meter i{transform:scaleY(1)!important}
}


/* 2026-09-04 spectrum mobile boost: visualizers only; playback/layout untouched. */
@media (pointer:coarse), (max-width:760px){
  #player .audio-spectrum i,
  #player .orbit-bars i,
  #player .glass-meter i,
  #player .stage-vu span{
    transition:none!important;
  }
  #player.orbit .audio-spectrum,
  #player.orbit .orbit-bars,
  #player.glass .glass-meter,
  #player.stage .stage-vu,
  #player.pulse .pulse-canvas{
    opacity:1!important;
  }
  #player.orbit .audio-spectrum i,
  #player.glass .glass-meter i{
    will-change:height,opacity,filter!important;
  }
  #player.stage .stage-vu span{will-change:width,filter!important}
  #player.pulse .pulse-canvas{will-change:contents,filter!important}
}