/* Плеер в духе скина «Metrix» из Winamp: лаймовое стекло в хромовой рамке,
   цифры-пиксели, анализатор, эквалайзер и плейлист. Всё нарисовано CSS. */

#ampRoot { position: fixed; right: 12px; bottom: 12px; z-index: 5; pointer-events: none; }
.amp-scale { zoom: 1.28; display: flex; flex-direction: column; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.45)); }
@media (max-width: 900px) { .amp-scale { zoom: 1; } }
@media (max-width: 640px) { #ampRoot { right: 6px; top: 62px; bottom: auto; } .amp-scale { zoom: .86; } }
@media (max-height: 520px) and (pointer: coarse) { #ampRoot { right: 6px; top: 70px; bottom: auto; } .amp-scale { zoom: .86; } }     /* телефон боком: плеер наверху справа, чтобы не закрывать кнопки геймпада */

.wa { position: relative; width: 275px; height: 116px; pointer-events: auto; font-family: var(--px, 'DotGothic16', monospace);
  background: linear-gradient(180deg, #eef0ea 0%, #c3c7bd 40%, #9a9f93 100%);
  border-radius: 7px; box-shadow: 0 0 0 1px #343a2c, inset 0 1px 0 #fff, inset 0 -2px 0 #6c7266; color: #1d2b05; -webkit-font-smoothing: none; }
.wa::before { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,.06) 1px 2px); }
.wa + .wa { margin-top: 0; }
.wa.eq { height: 116px; } .wa.pl { height: 148px; }
.wa.off { display: none; }

/* лаймовое стекло */
.wa-in { position: absolute; left: 5px; right: 5px; top: 17px; bottom: 5px; border-radius: 9px;
  background: radial-gradient(ellipse at 28% 12%, #d7ff55 0%, #a5d41f 34%, #6a9a0e 70%, #4c7508 100%);
  box-shadow: inset 0 0 0 1px #2b4607, inset 0 2px 2px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.4); }
.wa-in::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 36%; border-radius: 7px 7px 20px 20px / 7px 7px 10px 10px;
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.04)); pointer-events: none; }
.wa.pl .wa-in { background: linear-gradient(#6a9a0e, #4c7508); }
.wa.pl .wa-in::after, .wa.eq .wa-in::after { opacity: .6; }

/* заголовок */
.wa-title { position: absolute; left: 5px; right: 5px; top: 3px; height: 12px; border-radius: 4px; cursor: move; touch-action: none;
  background: linear-gradient(#6a8a1c, #2f4608); box-shadow: inset 0 0 0 1px #1a2a04, inset 0 1px 0 rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; }
.wa-title b { font: 400 9px/12px var(--px, monospace); color: #e6f7a2; letter-spacing: .35em; text-shadow: 1px 1px 0 #162203; }
.wa-title::before, .wa-title::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 70px;
  background: repeating-linear-gradient(90deg, #b7d94a 0 1px, transparent 1px 3px); opacity: .5; }
.wa-title::before { left: 8px; } .wa-title::after { right: 38px; }
.wa-btns { position: absolute; right: 4px; top: 2px; display: flex; gap: 2px; }
.wa-btns button { width: 9px; height: 8px; padding: 0; border: 1px solid #12200a; background: linear-gradient(#d7dccf, #8b9382); cursor: pointer; border-radius: 1px; }
.wa-btns button:active { background: #6c7266; }

/* LCD */
.lcd { position: absolute; left: 14px; top: 20px; width: 84px; height: 64px; background: #07110a; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #25410a, 0 1px 0 rgba(255,255,255,.55); }
.lcd .lbl { position: absolute; left: 22px; top: 2px; font-size: 6px; letter-spacing: .08em; color: #5f9a1a; white-space: nowrap; }
.lcd canvas { position: absolute; image-rendering: pixelated; }
#waTime { left: 16px; top: 9px; width: 62px; height: 20px; }
#waSpec { left: 6px; top: 34px; width: 72px; height: 24px; }
.lcd .pl-ind { position: absolute; left: 4px; top: 6px; width: 7px; height: 8px; }
.lcd .pl-ind::before { content: ""; position: absolute; left: 1px; top: 0; border: 4px solid transparent; border-left: 6px solid #8aff2a; border-right: 0; }
.leds { position: absolute; left: 3px; top: 22px; display: flex; flex-direction: column; gap: 3px; }
.leds i { width: 7px; height: 5px; background: linear-gradient(#313d22, #1a2210); border: 1px solid #0c1406; border-radius: 1px; box-shadow: 0 1px 0 rgba(255,255,255,.35); }
.leds i.on { background: #9fff3a; box-shadow: 0 0 4px #9fff3a; }

/* бегущая строка, kbps/kHz */
.mq { position: absolute; left: 106px; top: 21px; width: 156px; height: 15px; overflow: hidden; border-radius: 7px; background: #16270a;
  box-shadow: inset 0 0 0 1px #0a1404, inset 0 2px 3px #000, 0 1px 0 rgba(255,255,255,.5); }
.mq span { position: absolute; left: 0; top: 0; font: 400 10px/15px var(--px, monospace); color: #e4ff62; white-space: nowrap; will-change: transform; padding-left: 8px; }
.inf { position: absolute; left: 106px; top: 40px; width: 100px; height: 12px; border-radius: 6px; background: #16270a; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  box-shadow: inset 0 0 0 1px #0a1404, inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.5); font-size: 8px; color: #8fc83a; letter-spacing: .06em; }
.inf b { font-weight: 400; color: #d4ff58; }
.ms { position: absolute; left: 212px; top: 40px; display: flex; gap: 3px; }
.ms i { width: 24px; height: 12px; border-radius: 6px; background: #16270a; box-shadow: inset 0 0 0 1px #0a1404, 0 1px 0 rgba(255,255,255,.5);
  font: 400 6px/12px var(--px, monospace); text-align: center; color: #44641a; font-style: normal; }
.ms i.on { color: #d4ff58; text-shadow: 0 0 3px #9fff3a; }

/* ползунки */
.sl { position: absolute; touch-action: none; cursor: pointer; }
.sl .tk { position: absolute; border-radius: 3px; background: linear-gradient(#0d1707, #263a0c); box-shadow: inset 0 0 0 1px #0a1204, 0 1px 0 rgba(255,255,255,.5); }
.sl .th { position: absolute; background: linear-gradient(#ffd24a, #c58310); border: 1px solid #5a3a05; border-radius: 2px; }
.sl.h { height: 9px; } .sl.h .tk { left: 0; right: 0; top: 3px; height: 4px; } .sl.h .th { top: 0; width: 7px; height: 9px; margin-left: -3px; }
.sl.seek .th { width: 22px; margin-left: -11px; height: 9px; background: linear-gradient(#f2f3ef, #a8aca0); border-color: #3a3f33; border-radius: 4px; }
.sl.v { width: 12px; } .sl.v .tk { left: 3px; right: 3px; top: 0; bottom: 0; }
.sl.v .fill { position: absolute; left: 4px; right: 4px; bottom: 0; background: linear-gradient(#caff48, #6fa80f); border-radius: 0 0 2px 2px; box-shadow: 0 0 4px #9fff3a; }
.sl.v .th { left: 0; width: 12px; height: 6px; margin-top: -3px; background: linear-gradient(#f4f5f0, #8d9286); border-color: #2c3128; }
.vol { left: 106px; top: 58px; width: 64px; } .bal { left: 176px; top: 58px; width: 38px; } .seek { left: 106px; top: 72px; width: 154px; }

.tg { position: absolute; height: 12px; padding: 0 5px; font: 400 8px/10px var(--px, monospace); color: #8fc83a; letter-spacing: .08em;
  background: linear-gradient(#1f3309, #0e1905); border: 1px solid #0a1204; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.5); }
.tg.on { color: #e4ff62; text-shadow: 0 0 4px #9fff3a; }
.tg:active { transform: translateY(1px); }
#waEq { left: 222px; top: 56px; } #waPl { left: 244px; top: 56px; }

/* транспорт */
.tp { position: absolute; left: 12px; top: 90px; display: flex; gap: 2px; }
.tp button { width: 23px; height: 16px; padding: 0; border: 1px solid #070d03; border-radius: 3px; cursor: pointer; position: relative;
  background: linear-gradient(#41453a 0%, #1b1e16 48%, #0b0d08 52%, #202418 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.4); }
.tp button svg { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; fill: #f1f3ec; }
.tp button:active, .tp button.on { background: linear-gradient(#0b0d08, #262a1e); }
.tp button.on svg { fill: #a8ff3a; filter: drop-shadow(0 0 2px #9fff3a); }
.tp .gap { width: 6px; }
.sr { position: absolute; left: 172px; top: 92px; display: flex; gap: 8px; }
.sr span { font: 400 7px/10px var(--px, monospace); color: #2b4107; letter-spacing: .12em; cursor: pointer; padding-bottom: 1px; border-bottom: 1px dotted #2b4107; }
.sr span.on { color: #fff; text-shadow: 0 0 3px #caff48; border-color: #fff; }

/* эквалайзер */
.eq .tg { top: 22px; } #eqOn { left: 12px; } #eqAuto { left: 40px; } #eqPre { left: 226px; }
.eqg { position: absolute; left: 80px; top: 20px; width: 138px; height: 28px; border-radius: 3px; background: #07110a; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #25410a; }
.eqg canvas { width: 138px; height: 28px; display: block; image-rendering: pixelated; }
.eqs { position: absolute; left: 0; top: 52px; width: 100%; height: 56px; }
.eqs .sl.v { position: absolute; top: 0; height: 44px; }
.eqs .lab { position: absolute; top: 46px; font-size: 6px; color: #d4ff58; text-align: center; width: 18px; letter-spacing: 0; text-shadow: 0 1px 0 #1a2a04; }
.eqs .db { position: absolute; left: 24px; width: 30px; font-size: 6px; color: #d4ff58; background: #16270a; border-radius: 3px; text-align: center; line-height: 9px; box-shadow: inset 0 0 0 1px #0a1404; }

/* плейлист */
.pl .lst { position: absolute; left: 10px; top: 20px; width: 243px; height: 88px; overflow: hidden; background: #1c3406; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #0a1404, inset 0 2px 3px #000; }
.pl .lst ol { list-style: none; margin: 0; padding: 2px; }
.pl .lst li { display: flex; gap: 6px; font: 400 10px/13px var(--px, monospace); color: #bff24d; padding: 0 3px; cursor: pointer; white-space: nowrap; }
.pl .lst li .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pl .lst li .d { color: #8fc83a; }
.pl .lst li.sel { background: #000; color: #fff; }
.pl .lst li.cur { color: #fff; text-shadow: 0 0 3px #caff48; }
.pl .scr { position: absolute; left: 256px; top: 20px; width: 9px; height: 88px; border-radius: 3px; background: linear-gradient(90deg, #bfc3b8, #8b9082); box-shadow: inset 0 0 0 1px #3c4236; }
.pl .scr i { position: absolute; left: 1px; right: 1px; top: 2px; height: 22px; background: linear-gradient(90deg, #eef0ea, #a7ac9f); border-radius: 2px; box-shadow: inset 0 0 0 1px #3c4236; }
.plb { position: absolute; left: 10px; top: 112px; display: flex; gap: 3px; }
.plb button { width: 22px; height: 16px; padding: 0; border: 1px solid #070d03; border-radius: 8px; cursor: pointer; font: 400 6px/14px var(--px, monospace); color: #e4ffa0; letter-spacing: .04em;
  background: linear-gradient(#5b7d1c, #2a4108); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 1px 1px 0 #0a1404; }
.plb button:active { background: linear-gradient(#2a4108, #3a5710); }
.plt { position: absolute; left: 142px; top: 112px; width: 70px; height: 16px; border-radius: 4px; background: #16270a; color: #e4ff62; font: 400 9px/16px var(--px, monospace);
  text-align: center; box-shadow: inset 0 0 0 1px #0a1404, inset 0 1px 2px #000; }
.plc { position: absolute; left: 216px; top: 112px; width: 44px; height: 16px; border-radius: 4px; background: #16270a; color: #e4ff62; font: 400 9px/16px var(--px, monospace);
  text-align: center; box-shadow: inset 0 0 0 1px #0a1404, inset 0 1px 2px #000; }

/* на заставке VS плеер приглушаем, чтобы он не закрывал карточки */
body.vs-on #ampRoot { opacity: .18; pointer-events: none; transition: opacity .2s; }
@media (max-height: 520px) and (pointer: coarse) { body.end-on #ampRoot { opacity: .2; pointer-events: none; transition: opacity .2s; } }     /* итоги и табло боком: плеер не должен закрывать очки */
/* на титуле плеера нет: он выезжает, когда нажали START, и тогда же начинает играть музыка */
body.title-on #ampRoot { opacity: 0; transition: opacity .5s; }
body.title-on #ampRoot *, body.vs-on #ampRoot * { pointer-events: none !important; }