/* CEOroom — плеер «Утро» (app/music.js): корпус-«железка» в духе настольных плееров конца 90-х, свой рисунок.
   Окно видео YouTube всегда видно и не меньше 200×200 (правила YouTube API), поверх него ничего не рисуем.
   Темы: тёмная — графитовый корпус и светящееся ЖК-табло; светлая — серебристый корпус и серо-зелёный ЖК. */
.wp{
  --wp-w:400px;
  --wp-c1:#30373D; --wp-c2:#1B1F23; --wp-hi:rgb(255 255 255 / .10); --wp-lo:rgb(0 0 0 / .6);
  --wp-ink:#AEB7BF; --wp-ink-2:#7E8892;
  --wp-lcd:#080C07; --wp-lcd-2:#0E140C; --wp-seg:#C6D63F; --wp-seg-dim:rgb(198 214 63 / .22); --wp-glow:0 0 6px rgb(198 214 63 / .45);
  --wp-b1:#3A4249; --wp-b2:#252B30; --wp-b-ink:#D6DCE1; --wp-groove:#0B0E10;
  position:fixed;left:8px;top:64px;z-index:35;width:min(var(--wp-w),calc(100vw - 16px));box-sizing:border-box;
  padding:0 8px 8px;border-radius:10px;color:var(--wp-ink);font:500 12px var(--mono);user-select:none;-webkit-user-select:none;
  background:
    repeating-linear-gradient(90deg,rgb(255 255 255 / .018) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--wp-c1),var(--wp-c2));
  border:1px solid var(--wp-lo);
  box-shadow:inset 0 1px 0 var(--wp-hi),inset 0 -1px 0 rgb(0 0 0 / .35),var(--shadow-pop,0 18px 48px -12px rgb(0 0 0 / .6));
}
@media (prefers-color-scheme:light){.wp{
  --wp-c1:#EEF1F3; --wp-c2:#C9D0D5; --wp-hi:rgb(255 255 255 / .95); --wp-lo:rgb(17 20 23 / .28);
  --wp-ink:#2B3238; --wp-ink-2:#4F5A63;
  --wp-lcd:#B9C59A; --wp-lcd-2:#C8D3A9; --wp-seg:#1E2A0C; --wp-seg-dim:rgb(30 42 12 / .16); --wp-glow:none;
  --wp-b1:#FBFCFC; --wp-b2:#D6DCE0; --wp-b-ink:#20262B; --wp-groove:#9AA5AD;
}}
.wp svg.i{width:16px;height:16px}

/* полоса заголовка — за неё таскают */
.wp-bar{display:flex;align-items:center;gap:6px;height:30px;margin:0 -2px;cursor:grab;touch-action:none}
.wp.drag .wp-bar{cursor:grabbing}
.wp.drag iframe{pointer-events:none}
.wp-led{width:7px;height:7px;border-radius:50%;flex:none;background:var(--wp-seg-dim);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .25)}
.wp[data-st="play"] .wp-led{background:var(--wp-seg);box-shadow:var(--wp-glow)}
.wp-name{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--wp-ink)}
.wp-grip{flex:1;height:9px;margin:0 4px;opacity:.75;
  background:repeating-linear-gradient(180deg,var(--wp-hi) 0 1px,var(--wp-lo) 1px 2px,transparent 2px 3px)}
.wp-k{width:24px;height:22px;flex:none;display:grid;place-items:center;border-radius:5px;color:var(--wp-ink);text-decoration:none;
  background:linear-gradient(180deg,var(--wp-b1),var(--wp-b2));border:1px solid var(--wp-lo);box-shadow:inset 0 1px 0 var(--wp-hi)}
.wp-k svg.i{width:13px;height:13px}
.wp-k:hover{color:var(--wp-b-ink)}
.wp-k:active{background:linear-gradient(0deg,var(--wp-b1),var(--wp-b2));box-shadow:inset 0 1px 2px var(--wp-lo)}
.wp.err .wp-yt{color:var(--wp-seg);background:var(--wp-lcd);box-shadow:var(--wp-glow)}

/* корпус: табло, экран, перемотка, пульт */
.wp-body{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);grid-template-areas:"lcd" "screen" "seek" "deck"}

.wp-lcd{grid-area:lcd;min-width:0;padding:7px 10px 6px;border-radius:6px;color:var(--wp-seg);
  background:linear-gradient(180deg,var(--wp-lcd-2),var(--wp-lcd));
  box-shadow:inset 0 2px 4px rgb(0 0 0 / .55),inset 0 0 0 1px rgb(0 0 0 / .4),0 1px 0 var(--wp-hi)}
.wp-row{display:flex;align-items:center;gap:8px;min-width:0}
.wp-st{display:grid;place-items:center;width:16px;flex:none;filter:drop-shadow(var(--wp-glow))}
.wp-st svg.i{width:13px;height:13px}
.wp-st polygon,.wp-st rect{fill:currentColor}
.wp[data-st="buffer"] .wp-st svg{animation:wp-spin 1s linear infinite}
.wp-time{font:500 26px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:var(--wp-glow);min-width:4.2ch}
.wp[data-st="pause"] .wp-time{animation:wp-blink 1.2s steps(2,start) infinite}

/* «волны» — декоративные: настоящего спектра из iframe нет; движутся только во время игры */
.wp-eq{flex:1;display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;height:26px;min-width:0}
.wp-eq i{display:block;width:5px;height:100%;flex:none;transform-origin:bottom;transform:scaleY(.12);
  background:linear-gradient(0deg,var(--wp-seg) 0 55%,color-mix(in srgb,var(--wp-seg) 55%,transparent) 55% 100%);
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 3px);mask:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 3px);
  animation:wp-eq var(--d,.6s) ease-in-out var(--dl,0s) infinite alternate;animation-play-state:paused}
.wp[data-st="play"] .wp-eq i{animation-play-state:running}
.wp[data-st="cued"] .wp-eq i,.wp[data-st="idle"] .wp-eq i,.wp[data-st="ended"] .wp-eq i,.wp[data-st="buffer"] .wp-eq i{animation:none}

.wp-mq{margin-top:5px;overflow:hidden;white-space:nowrap;font:500 12.5px/1.35 var(--mono);text-overflow:ellipsis;text-shadow:var(--wp-glow)}
.wp-mq-t{display:inline}
.wp-mq.run .wp-mq-t{display:inline-flex;animation:wp-mq var(--mq-d,12s) linear infinite;animation-play-state:paused}
.wp-mq.run .wp-mq-t span{padding-right:3em}
.wp[data-st="play"] .wp-mq.run .wp-mq-t{animation-play-state:running}
.wp-meta{display:flex;gap:10px;margin-top:3px;font:500 10px/1.2 var(--mono);letter-spacing:.08em;color:color-mix(in srgb,var(--wp-seg) 70%,transparent)}
.wp-stx{flex:1}

.wp-screen{grid-area:screen;padding:4px;border-radius:6px;background:#000;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06),0 0 0 1px var(--wp-lo),0 1px 0 var(--wp-hi)}
.wp-screen iframe{display:block;width:100%;min-width:200px;aspect-ratio:16/9;min-height:200px;border:0;border-radius:3px;background:#000}

/* дорожки: перемотка и громкость — желобок со светящейся заливкой и металлическим ползунком */
.wp input[type=range]{-webkit-appearance:none;appearance:none;display:block;margin:0;height:18px;background:transparent;cursor:pointer;--p:0%}
.wp input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wp input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--wp-seg) var(--p),var(--wp-groove) var(--p));box-shadow:inset 0 1px 2px rgb(0 0 0 / .6),0 1px 0 var(--wp-hi)}
.wp input[type=range]::-moz-range-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--wp-seg) var(--p),var(--wp-groove) var(--p));box-shadow:inset 0 1px 2px rgb(0 0 0 / .6),0 1px 0 var(--wp-hi)}
.wp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:14px;margin-top:-4px;border-radius:3px;
  background:linear-gradient(180deg,var(--wp-b1),var(--wp-b2));border:1px solid var(--wp-lo);
  box-shadow:inset 0 1px 0 var(--wp-hi),inset 9px 0 0 -8px var(--wp-lo),inset -9px 0 0 -8px var(--wp-lo)}
.wp input[type=range]::-moz-range-thumb{width:20px;height:12px;border-radius:3px;
  background:linear-gradient(180deg,var(--wp-b1),var(--wp-b2));border:1px solid var(--wp-lo);box-shadow:inset 0 1px 0 var(--wp-hi)}
.wp-seek{grid-area:seek;width:100%}

.wp-deck{grid-area:deck;display:flex;align-items:center;gap:10px;min-width:0}
.wp-tr{display:grid;grid-template-columns:repeat(4,minmax(0,44px));gap:4px;flex:none}
.wp-b{height:32px;min-width:0;display:grid;place-items:center;border-radius:5px;color:var(--wp-b-ink);
  background:linear-gradient(180deg,var(--wp-b1),var(--wp-b2));border:1px solid var(--wp-lo);
  box-shadow:inset 0 1px 0 var(--wp-hi),0 1px 1px rgb(0 0 0 / .35)}
.wp-b svg.i{width:15px;height:15px}
.wp-b polygon,.wp-b rect{fill:currentColor}
.wp-b:hover{filter:brightness(1.08)}
.wp-b:active{background:linear-gradient(0deg,var(--wp-b1),var(--wp-b2));box-shadow:inset 0 2px 3px var(--wp-lo);transform:translateY(1px)}
.wp-b:focus-visible,.wp-k:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wp[data-st="play"] .wp-pp,.wp[data-st="buffer"] .wp-pp{color:var(--wp-seg);background:linear-gradient(180deg,var(--wp-lcd-2),var(--wp-lcd));filter:drop-shadow(var(--wp-glow))}
.wp-vol{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.wp-volr{flex:1;min-width:40px}

/* свёрнутый: экран 200×200 слева (меньше нельзя по правилам YouTube), справа табло и пульт */
.wp.mini .wp-body{grid-template-columns:208px minmax(0,1fr);grid-template-areas:"screen lcd" "screen deck";align-items:start}
.wp.mini .wp-screen iframe{width:200px;height:200px;aspect-ratio:auto}
.wp.mini .wp-seek{display:none}
.wp.mini .wp-lcd{padding:6px 8px}
.wp.mini .wp-time{font-size:20px}
.wp.mini .wp-eq{height:18px}
.wp.mini .wp-eq i{width:3px}
.wp.mini .wp-meta .wp-dur{display:none}
.wp.mini .wp-deck{flex-direction:column;align-items:stretch;gap:8px}
.wp.mini .wp-tr{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:480px){
  .wp{padding:0 6px 6px}
  .wp-tr{grid-template-columns:repeat(4,minmax(0,40px))}
  .wp.mini .wp-body{grid-template-columns:208px minmax(0,1fr);gap:6px}
  .wp.mini .wp-vol,.wp.mini .wp-eq,.wp.mini .wp-meta{display:none}
  .wp.mini .wp-tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp.mini .wp-time{font-size:18px}
}

/* окно утра открыто: плеер над ним, шаги прокручиваются выше плеера */
body.mo-open .wp{z-index:55}
body.mo-open:has(#music) .mo{padding-bottom:calc(var(--wp-h,240px) + 24px + var(--safe-b,0px))}

@keyframes wp-eq{0%{transform:scaleY(.12)}35%{transform:scaleY(.7)}70%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@keyframes wp-mq{to{transform:translateX(-50%)}}
@keyframes wp-blink{to{visibility:hidden}}
@keyframes wp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .wp-eq i,.wp[data-st="play"] .wp-eq i{animation:none;transform:scaleY(.45)}
  .wp[data-st="cued"] .wp-eq i,.wp[data-st="idle"] .wp-eq i,.wp[data-st="ended"] .wp-eq i{transform:scaleY(.12)}
  .wp-mq.run .wp-mq-t{display:inline;animation:none}
  .wp-mq.run .wp-mq-t span{padding-right:0}
  .wp-mq.run .wp-mq-t span+span{display:none}
  .wp[data-st="pause"] .wp-time,.wp[data-st="buffer"] .wp-st svg{animation:none}
}