/* Terr-a-spect — глобальний плаваючий плеєр (на всіх сторінках) */
#tas-player{position:fixed;right:18px;bottom:18px;z-index:60;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pa:var(--accent,#5fe3b4);--pa2:var(--accent2,#36c79a);--ptxt:var(--text,#e9f3ef);
  --pmut:var(--muted,#9fb6ad);--pbord:var(--border,rgba(120,190,170,.18));
  /* мобільна чистота: без сірого флешу iOS/Android при тапі й без випадкового виділення тексту кнопок */
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#tas-player button{-webkit-tap-highlight-color:transparent}
#tas-player.tas-hidden{display:none}

/* ── кругла кнопка (mini) ── */
/* зовнішня кнопка — чистий значок без фона/контуру (тінь лише для читабельності) */
.tas-fab{width:56px;height:56px;border:0;padding:0;cursor:pointer;background:none;
  color:var(--pa);display:grid;place-items:center;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));
  transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .24s ease,filter .15s}
.tas-fab:hover{transform:scale(1.1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.tas-fab:active{transform:scale(.95)}
.tas-fab svg{width:34px;height:34px;fill:currentColor}
.tas-open .tas-fab{opacity:0;transform:scale(.35) rotate(-35deg);pointer-events:none}
/* індикатор «грає» на згорнутій кнопці (еквалайзер) */
.tas-eq{display:none;align-items:flex-end;gap:3px;height:20px}
.tas-playing.tas-mini .tas-fab .tas-ico{display:none}
.tas-playing.tas-mini .tas-fab .tas-eq{display:flex}
.tas-eq i{width:3px;background:var(--pa);border-radius:2px;animation:tas-bounce 1s infinite ease-in-out}
.tas-eq i:nth-child(1){height:8px;animation-delay:-.4s} .tas-eq i:nth-child(2){height:18px;animation-delay:-.2s}
.tas-eq i:nth-child(3){height:12px} .tas-eq i:nth-child(4){height:16px;animation-delay:-.3s}
@keyframes tas-bounce{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ── квадратна панель (open) ── */
/* морфінг: коло (FAB) «виростає» з кутка в квадратну панель — пружинистий spring + морф радіуса */
.tas-panel{position:absolute;right:0;bottom:0;width:280px;overflow:hidden;
  background:rgba(8,20,28,.96);backdrop-filter:blur(16px);border:1px solid var(--pbord);
  box-shadow:0 18px 50px rgba(0,0,0,.55);transform-origin:100% 100%;
  opacity:0;visibility:hidden;transform:scale(.26) translateY(8px);border-radius:30px;
  transition:transform .46s cubic-bezier(.34,1.5,.5,1),opacity .3s ease,border-radius .46s ease,visibility 0s linear .46s}
.tas-open .tas-panel{opacity:1;visibility:visible;transform:none;border-radius:16px;
  transition:transform .52s cubic-bezier(.32,1.55,.45,1),opacity .28s ease,border-radius .52s ease,visibility 0s}
/* контент заїжджає зі сходинкою-затримкою — преміум-відчуття */
.tas-panel .tas-top,.tas-panel .tas-seek,.tas-panel .tas-ctrls{opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.tas-open .tas-panel .tas-top{opacity:1;transform:none;transition-delay:.10s}
.tas-open .tas-panel .tas-seek{opacity:1;transform:none;transition-delay:.16s}
.tas-open .tas-panel .tas-ctrls{opacity:1;transform:none;transition-delay:.22s}
@media(prefers-reduced-motion:reduce){
  .tas-fab,.tas-panel,.tas-panel .tas-top,.tas-panel .tas-seek,.tas-panel .tas-ctrls{transition-duration:.01ms!important}
}
.tas-top{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.tas-cover{width:46px;height:46px;border-radius:10px;flex:0 0 46px;object-fit:cover;background:#0d2029}
.tas-meta{min-width:0;flex:1}
.tas-title{font-weight:700;color:var(--ptxt);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .15s}
.tas-title:hover{color:var(--pa)}
.tas-perf{color:var(--pmut);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tas-min{background:none;border:0;color:var(--pmut);cursor:pointer;font-size:1.1rem;line-height:1;padding:4px;border-radius:8px;flex:0 0 auto}
.tas-min:hover{color:var(--ptxt)}
/* seek */
.tas-seek{display:flex;align-items:center;gap:8px;padding:2px 14px}
.tas-seek span{color:var(--pmut);font-size:.72rem;font-variant-numeric:tabular-nums;width:30px;text-align:center}
.tas-seek input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:#28414a;cursor:pointer}
.tas-seek input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--pa)}
.tas-seek input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--pa)}
/* контроли */
.tas-ctrls{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px 14px}
.tas-ctrls button{background:none;border:0;color:var(--ptxt);cursor:pointer;padding:8px;border-radius:50%;display:grid;place-items:center;
  transition:transform .12s ease,color .15s ease,background .15s ease}
.tas-ctrls button:hover{color:var(--pa)}
.tas-ctrls button:active{transform:scale(.88)}     /* явний тактильний відгук замість сірого флешу */
.tas-ctrls svg{width:22px;height:22px;fill:currentColor}
.tas-ctrls .tas-big{background:var(--ptxt);color:#06231a;width:46px;height:46px}
.tas-ctrls .tas-big:hover{background:var(--pa)} .tas-ctrls .tas-big svg{width:24px;height:24px}
/* shuffle УВІМКНЕНО = залитий акцент (однозначно видно, що це режим, а не кнопка-дія) */
.tas-ctrls .tas-shuf.on{color:#06231a;background:var(--pa)}
.tas-ctrls .tas-shuf.on:hover{color:#06231a;background:var(--pa)}

/* Дотикові пристрої: :hover «залипає» кольором після тапу (виглядає як баг). Скидаємо
   hover-стани до дефолтних — тактильний відгук лишається через :active. ON-стан shuffle НЕ чіпаємо. */
@media(hover:none){
  .tas-fab:hover{transform:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
  .tas-ctrls button:hover{color:var(--ptxt)}
  .tas-ctrls .tas-big:hover{background:var(--ptxt)}
  .tas-title:hover{color:var(--ptxt)}
  .tas-min:hover{color:var(--pmut)}
}

@media(max-width:520px){
  #tas-player{right:12px;bottom:12px}
  .tas-panel{width:min(86vw,300px)}
}