/* Pong music player (pairs with js/pong-player.js): a small 8-bit deck at the bottom centre of the game.
   One bright PLAY / STOP button, plain previous / next either side, track name and a progress strip. No coloured shadow. */
/* the site's own mini player stays out of the game entirely */
html.pong-on.pong-on.pong-on body .vz-dock{display:none!important}

.pgp{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:420;display:none;align-items:center;gap:6px;
  padding:6px;background:rgba(0,0,0,.78);border:2px solid #EEF3EF;box-shadow:none;border-radius:0;image-rendering:pixelated;
  opacity:.5;transition:opacity .35s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pgp.show{display:flex}
.pgp.awake,.pgp:hover,.pgp:focus-within{opacity:1}
html.pong-on .pg-ov.pg-start~.pgp{opacity:1}

.pgp-b{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;margin:0;border-radius:0;cursor:pointer;
  background:#000;border:2px solid #EEF3EF;color:#EEF3EF;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.pgp-b svg{width:12px;height:12px;fill:currentColor;shape-rendering:crispEdges;display:block}
.pgp-b:active{background:#EEF3EF;color:#000}
/* the one button that matters: bigger, solid yellow, impossible to mistake */
.pgp-play{width:46px;height:46px;background:#ffe600;border-color:#ffe600;color:#000}
.pgp-play svg{width:16px;height:16px}
.pgp-play:active{background:#fff;border-color:#fff;color:#000}
.pgp-play .i-stop{display:none}
.pgp.playing .pgp-play .i-play{display:none}
.pgp.playing .pgp-play .i-stop{display:block}

.pgp-info{flex:none;width:min(34vw,150px);display:flex;flex-direction:column;gap:6px;padding:0 2px 0 4px}
.pgp-row{display:flex;align-items:center;gap:6px;min-width:0}
.pgp-t{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;font:7px/1.5 "Press Start 2P",monospace;color:#EEF3EF;letter-spacing:.04em}
.pgp-t span{display:inline-block;padding-left:100%;animation:pgpT 10s steps(100) infinite}
@keyframes pgpT{to{transform:translateX(-100%)}}
.pgp-time{flex:none;font:7px/1.5 "Press Start 2P",monospace;color:#ffe600}
/* progress strip: tall enough to hit with a thumb, tap or drag to move through the song */
.pgp-bar{position:relative;height:14px;border:2px solid #EEF3EF;background:#000;cursor:pointer;touch-action:none}
.pgp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffe600}
.pgp-bar:focus-visible,.pgp-b:focus-visible{outline:2px solid #ffe600;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pgp-t span{animation:none;padding-left:0}}