/* Shared RetroMods video player (used by the watch page, home page and profiles). */
/* ── Player (970 x 546: stage + 9 px seek bar + 35 px control bar) ────── */
.wp-player {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 970 / 546;
  margin: 8px 9px 0 8px;
  background: #252525;
  color: #fff;
  overflow: hidden;
  user-select: none;
}
.wp-stage { position: relative; flex: 1 1 auto; min-height: 0; background: #252525; overflow: hidden; }
.wp-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; display: block;
}
.wp-player.is-unavailable .wp-video { display: none; }

/* Seek bar */
.wp-seek {
  --p: 0%;
  position: relative; z-index: 3; flex: 0 0 9px; height: 9px;
  background: #a1a1a1; cursor: pointer; touch-action: none;
}
.wp-seek-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p);
  background: linear-gradient(to bottom, #01b847, #005220);
}
.wp-seek-thumb {
  position: absolute; top: 50%;
  left: clamp(8.5px, var(--p), calc(100% - 8.5px));
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border-radius: 50%; background: #d9d9d9;
}
.wp-seek-thumb::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: linear-gradient(to bottom, #01b847, #015220);
}

/* Control bar */
.wp-controls {
  position: relative; z-index: 2; flex: 0 0 35px; height: 35px;
  display: flex; align-items: center;
  background: linear-gradient(to bottom, #222, #101010);
}
.wp-div { flex: none; align-self: stretch; width: 2px; background: linear-gradient(to right, #312f2f 50%, #111 50%); }
.wp-cell { display: flex; align-items: center; height: 100%; flex: none; }
.wp-cell--play { width: 37px; padding-left: 8px; }
.wp-cell--skip { width: 84px; padding: 1px 0 0 15px; gap: 13px; }
.wp-cell--vol  { width: 115px; padding-left: 9px; }
.wp-cell--time { width: 78px; padding-left: 6px; font: 300 13px/1 'Montserrat', sans-serif; color: #a1a1a1; white-space: nowrap; }
.wp-cell--grow { flex: 1 1 auto; min-width: 0; }
.wp-cell--gear { width: 35px; padding-left: 6px; position: relative; }
.wp-cell--fs   { width: 37px; padding-left: 9px; }
.wp-ctl { display: block; line-height: 0; color: #aaa; }
.wp-ctl svg { display: block; fill: currentColor; }
.wp-ctl:hover, .wp-ctl[aria-expanded="true"] { color: #fff; }
.wp-player.is-playing .wp-ico-play, .wp-player:not(.is-playing) .wp-ico-pause { display: none; }
.wp-player.is-muted .wp-ico-waves, .wp-player:not(.is-muted) .wp-ico-mute { display: none; }
.wp-player.is-fullscreen .wp-ico-fs, .wp-player:not(.is-fullscreen) .wp-ico-fs-exit { display: none; }
.wp-ico-mute { stroke: currentColor; stroke-width: 2; fill: none; }

.wp-mute { margin-right: 14px; }
.wp-vol { --v: 100%; position: relative; width: 55px; height: 35px; cursor: pointer; touch-action: none; flex: none; }
.wp-vol-track { position: absolute; left: 0; right: 0; top: 15px; height: 6px; background: #a1a1a1; }
.wp-vol-fill { position: absolute; left: 0; top: 15px; height: 6px; width: var(--v); background: #05a141; }
.wp-vol-knob { position: absolute; top: 11px; left: clamp(0px, var(--v), calc(100% - 3px)); width: 3px; height: 14px; background: #fff; }
.wp-vol:focus-visible { outline-offset: 2px; }

/* Settings menu (speed) opens upward inside the stage */
.wp-menu {
  position: absolute; bottom: calc(100% + 12px); left: -6px; z-index: 10;
  min-width: 150px; padding: 6px 0;
  background: linear-gradient(to bottom, #2a2a2a, #121212);
  border: 1px solid #353535; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  font: 400 13px/18px 'Montserrat', sans-serif; color: #e6e6e6; white-space: nowrap;
}
.wp-menu-label { padding: 2px 14px 4px; font-weight: 600; color: #a1a1a1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.wp-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 5px 14px; }
.wp-menu button::before { content: ""; width: 10px; height: 10px; flex: none; }
.wp-menu button[aria-checked="true"]::before { background: #00ff6a; clip-path: polygon(0 55%, 18% 40%, 40% 62%, 82% 12%, 100% 28%, 40% 100%); }
.wp-menu button:hover { background: linear-gradient(to bottom, #00fe72, #009945); color: #fff; }

.wp-player:fullscreen { aspect-ratio: auto; margin: 0; width: 100%; height: 100%; }
.wp-player:-webkit-full-screen { aspect-ratio: auto; margin: 0; width: 100%; height: 100%; }


/* Reset site-wide button styling inside the player */
.wp-player button { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; min-width: 0; height: auto; font: inherit; text-shadow: none; text-transform: none; cursor: pointer; }
.wp-player .wp-menu button { padding: 5px 14px; text-align: left; }
.wp-player .wp-ctl { color: #aaa; }
.wp-player .wp-ctl:hover, .wp-player .wp-ctl[aria-expanded="true"] { color: #fff; }