/* the site's mini-player, carried into Pong as its 8-bit self */
html.pong-on.pong-mus .vz-dock{display:flex!important}
html.pong-on .vz-dock .vz-pill,html.pong-on .vz-dock .vz-tip2,html.pong-on .vz-dock .vz-scrub{display:none!important}
.vz-dock.px-sw{animation:pxSw .46s steps(8) both}
@keyframes pxSw{0%{transform:translate(-50%,0) scale(1);filter:none}40%,60%{transform:translate(-50%,0) scale(1.12,.18);filter:contrast(3) saturate(0) brightness(1.7)}100%{transform:translate(-50%,0) scale(1);filter:none}}
.vz-dock.px8{border-radius:0!important;gap:6px;padding:6px;background:#000;border:3px solid #EEF3EF;box-shadow:4px 4px 0 #ff004d;image-rendering:pixelated}
.vz-dock.px8 .vz-stop,.vz-dock.px8 .vz-skip,.vz-dock.px8 .vz-mute{width:38px;height:38px;border-radius:0;background:#000;border:2px solid #EEF3EF;-webkit-backdrop-filter:none;backdrop-filter:none;color:#EEF3EF;font:10px/1 "Press Start 2P",monospace;box-shadow:none;cursor:pointer;padding:0}
.vz-dock.px8 .vz-stop:active,.vz-dock.px8 .vz-skip:active,.vz-dock.px8 .vz-mute:active{background:#EEF3EF;color:#000}
.vz-dock.px8 svg{shape-rendering:crispEdges}
.vz-dock.px8 .vz-now{display:block!important;position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.vz-dock.px8 .vz-now button,.vz-dock.px8 .vz-now small{display:none}
.vz-dock.px8 .vz-now b{font:8px/1.4 "Press Start 2P",monospace;color:#ffe9a8;text-shadow:none;background:#000;padding:4px 6px;border:2px solid #ffe9a8}
.vz-dock.px8 .vz-now b:before{content:"\266A  "}
.vz-mute{display:none}
html.pong-on .vz-dock.px8 .vz-mute{display:grid;place-items:center}
.pg-mu.gone,.pg-hurt.gone{display:none!important}
/* Pong high scores */
.pg-run{font:8px/1.6 "Press Start 2P",monospace;color:#ffe9a8;margin:10px 0 0}
.pg-hs-h{font:8px/1.4 "Press Start 2P",monospace;opacity:.75;margin:14px 0 6px;letter-spacing:.06em}
.pg-hs{list-style:none;margin:0 auto 6px;padding:0;width:min(260px,100%);text-align:left;font:9px/2 "Press Start 2P",monospace}
.pg-hs li{display:flex;justify-content:space-between;gap:12px}
.pg-hs-n{font:7px/1.4 "Press Start 2P",monospace;opacity:.6;margin:0 0 6px}
.pg-hsf{margin-top:8px}

/* game cue under the brands */
.pong-hint{display:block;margin:18px 0 0;text-align:center;font:9px/1.6 "Press Start 2P",monospace;letter-spacing:.06em;color:var(--fg);opacity:.75;animation:pongHint 1.6s steps(2) infinite}
@keyframes pongHint{50%{opacity:.25}}
/* in the game the 8-bit player keeps the track name inside its own box (never a floating yellow label) */
html.pong-on .vz-dock.px8 .vz-now,html.pong-on .vz-dock.px8 .vz-scrub,html .vz-dock.px8 .vz-now{display:none!important}
.vz-dock.px8 .px-tn{display:block;font:8px/38px "Press Start 2P",monospace;color:#EEF3EF;width:min(40vw,190px);flex:none;overflow:hidden;white-space:nowrap;padding:0 6px;border:2px solid #EEF3EF;height:38px;box-sizing:border-box}
.vz-dock.px8 .px-tn span{display:inline-block;padding-left:100%;animation:pxTn 9s steps(90) infinite}
.vz-dock:not(.px8) .px-tn{display:none}
@keyframes pxTn{to{transform:translateX(-100%)}}
/* the pixel wipe that turns the player into its 8-bit self */
.px-wipe{position:fixed;z-index:450;pointer-events:none;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.vz-dock.px8 .px-tn span{animation:none;padding-left:0}}
/* compact 8-bit player: same footprint as a small cassette deck, never a full-width bar */
.vz-dock.px8,html.mp-on .vz-dock.px8.on,html.mp-on:not(.vz-on) .vz-dock.px8.on{display:flex!important;left:50%!important;right:auto!important;width:auto!important;transform:translate(-50%,0);grid-template-columns:none!important;grid-template-rows:none!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;gap:4px!important;padding:4px!important;border-width:2px!important;box-shadow:3px 3px 0 #ff004d!important;border-radius:0!important}
.vz-dock.px8 .vz-stop,.vz-dock.px8 .vz-skip,.vz-dock.px8 .vz-mute,html.mp-on:not(.vz-on) .vz-dock.px8 .vz-stop,html.mp-on:not(.vz-on) .vz-dock.px8 .vz-skip{width:28px!important;height:28px!important;font-size:8px}
.vz-dock.px8 svg{width:12px;height:12px}
.vz-dock.px8 .px-tn{font-size:7px;line-height:24px;height:28px;width:min(30vw,130px);padding:0 4px;grid-column:auto!important}