/* ==========================================================================
   DevAlt Player - minimal flat video player chrome.
   No borders, no shadows, no glow. Matches the site palette.
   ========================================================================== */

.dvp {
  position: relative;
  width: 100%;
  height: 100%;
  background: #131314;
  overflow: hidden;
  border-radius: inherit;
  user-select: none;
  -webkit-user-select: none;
}
.dvp video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #131314;
  /* single-finger swipes scroll the page normally; the player flips this to
     "none" while zoomed (one-finger pans) and handles pinch itself */
  touch-action: pan-x pan-y;
}
.dvp.hide-cursor { cursor: none; }
.dvp.zoomed video { cursor: grab; }
/* keyboard shortcuts focus the wrap; the default focus ring shows as a white
   border around the whole player - suppress it (controls stay reachable) */
.dvp:focus, .dvp:focus-visible { outline: none; }

/* ---------- control bar ---------- */
.dvp-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  /* flat translucent scrim so controls stay readable over bright frames -
     a fade, not a shadow */
  background: linear-gradient(transparent, rgba(15, 15, 16, .88));
  display: flex; flex-direction: column; gap: 8px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2;
}
.dvp.idle .dvp-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* ---------- seek bar ---------- */
.dvp-seek {
  position: relative;
  height: 14px;
  display: flex; align-items: center;
  cursor: pointer;
  touch-action: none;
}
.dvp-seek-track {
  position: relative;
  width: 100%; height: 4px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  transition: height .12s ease;
}
.dvp-seek:hover .dvp-seek-track { height: 6px; }
.dvp-buffered {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  transition: width .35s ease;
}
.dvp-played {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #c9c9c9;
  border-radius: 999px;
  transition: width .2s linear;
}
.dvp.scrubbing .dvp-played { transition: none; }
/* playhead dot appears while hovering the seek bar (YouTube-style) */
.dvp-played::after {
  content: "";
  position: absolute; right: -6px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ececec;
  transform: translateY(-50%) scale(0);
  transition: transform .12s ease;
}
.dvp-seek:hover .dvp-played::after { transform: translateY(-50%) scale(1); }
.dvp-seek-tip {
  position: absolute; bottom: 18px;
  transform: translateX(-50%);
  background: #2b2d31; color: #ececec;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: none;
}
.dvp-seek:hover .dvp-seek-tip { display: block; }

/* ---------- button row ---------- */
.dvp-row { display: flex; align-items: center; gap: 4px; }

.dvp-btn {
  border: 0; background: transparent; color: #ececec;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex: none;
  padding: 0;
  text-decoration: none;
}
.dvp-btn:hover { background: rgba(255, 255, 255, .12); }
.dvp-btn svg { width: 18px; height: 18px; display: block; }

.dvp-time {
  color: rgba(236, 236, 236, .85);
  font-size: 12px; font-weight: 550;
  font-variant-numeric: tabular-nums;
  margin: 0 8px;
  white-space: nowrap;
}
.dvp-time .sep { color: rgba(236, 236, 236, .45); margin: 0 3px; }

.dvp-spacer { flex: 1; }

/* ---------- volume ---------- */
.dvp-vol { display: flex; align-items: center; gap: 2px; flex: none; }
.dvp-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px; height: 4px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  cursor: pointer;
  outline-offset: 4px;
}
.dvp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ececec;
  border: 0;
}
.dvp-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ececec;
  border: 0;
}
@media (max-width: 700px) { .dvp-vol-slider { display: none; } }
/* phones have hardware volume keys; drop the whole cluster so quality /
   download / fullscreen stay uncrowded */
@media (max-width: 600px) { .dvp-vol { display: none; } }

/* ---------- settings menu (quality, speed) ---------- */
.dvp-pop { position: relative; flex: none; }
.dvp-pop-btn { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 650; position: relative; }
.dvp-set-btn { position: relative; }

/* red tier chip on the settings gear at 1440p+ (8K / 4K / QHD) */
.dvp-badge {
  position: absolute; top: -4px; right: -5px;
  background: #d24545; color: #fff;
  font-size: 8px; font-weight: 750; line-height: 1;
  padding: 2.5px 4px; border-radius: 4px;
  letter-spacing: .3px;
  pointer-events: none;
  display: none;
}
.dvp-badge.show { display: block; }
.dvp-badge-inline {
  position: static; margin-left: 6px;
}
.dvp-badge-inline.show { display: inline-block; }

.dvp-menu {
  position: absolute; bottom: 40px; right: 0;
  background: rgba(12, 12, 14, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 4px;
  display: none;
  flex-direction: column;
  min-width: 88px;
  z-index: 3;
}
.dvp-settings { min-width: 240px; }
.dvp-menu.open {
  display: flex;
  transform-origin: bottom right;
  animation: dvp-pop .14s ease-out;
}
@keyframes dvp-pop {
  from { opacity: 0; transform: translateY(5px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* YouTube-style root rows: icon + label left, current value + chevron right */
.dvp-setrow {
  border: 0; background: transparent; color: #ececec;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 550; text-align: left;
  transition: background .12s;
  white-space: nowrap;
}
.dvp-setrow:hover { background: rgba(255, 255, 255, .1); }
.dvp-ico { width: 18px; height: 18px; flex: none; display: inline-flex; }
.dvp-ico svg { width: 18px; height: 18px; display: block; }
.dvp-setrow-val {
  margin-left: auto;
  color: rgba(236, 236, 236, .55);
  font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.dvp-chev { font-size: 14px; line-height: 1; }
.dvp-setback { color: rgba(236, 236, 236, .7); border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 6px 6px 0 0; }

/* sub-panel entries with the flat checkmark (no colored highlights) */
.dvp-setcheck {
  border: 0; background: transparent; color: #ececec;
  display: flex; align-items: center;
  text-align: left; font-size: 13px; font-weight: 550;
  padding: 8px 12px 8px 8px; border-radius: 6px; cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.dvp-setcheck:hover { background: rgba(255, 255, 255, .1); }
.dvp-setcheck.active { color: #fff; font-weight: 650; }
.dvp-check { width: 16px; flex: none; display: inline-flex; justify-content: center; }
.dvp-setcheck.active .dvp-check::before { content: "✓"; }

/* ---------- zoom percentage chip ---------- */
.dvp-zoomchip {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  background: #2b2d31; color: #ececec;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}
.dvp-zoomchip.show { opacity: 1; }

/* ---------- big center play flash ---------- */
.dvp-flash {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(15, 15, 16, .72);
  display: flex; align-items: center; justify-content: center;
  color: #ececec;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2;
}
.dvp-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .05s, transform .16s ease-out; }
.dvp-flash svg { width: 24px; height: 24px; }

/* settings gear twists a little while its menu is open */
.dvp-set-btn svg { transition: transform .18s ease; }
.dvp-pop:has(.dvp-menu.open) .dvp-set-btn svg { transform: rotate(30deg); }

/* side seek flash for touch double-taps */
.dvp-side {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 15, 16, .66); color: #ececec;
  font-size: 12px; font-weight: 650;
  padding: 6px 10px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.dvp-side-l { left: 14px; }
.dvp-side-r { right: 14px; }
.dvp-side.show { opacity: 1; }