/*
 * Shared player core: base layer for every entry (Video.js v10, @videojs/html 10.3.0).
 *
 * The core owns behavior-facing styling once: layout of the media surface, auto-hide timing,
 * icon state swaps, focus rings, the radius system, designed states, captions clearance and
 * every preference fallback. A skin only sets tokens and draws its own surfaces on top.
 *
 * Control art (rebuild, Nov 7, 2026): every icon is an <img> of the entry's own generated art,
 * art/<name>.png next to the entry page (cut from the ChatGPT and Gemini sheets, see
 * build/art-manifest.md). The core never draws a glyph; it only swaps which image shows.
 * --sk-icon-render: image-rendering for the art (pixelated for pixel-art entries).
 *
 * Token contract (set on .sk-root by a skin):
 *   v10 public properties: --media-accent-color, --media-accent-text-color, --media-border-radius,
 *                          --media-font-family, --media-border-color, --media-object-fit
 *   detail pass:           --sk-pad, --sk-r-outer, --sk-r-inner (derived), --sk-hit, --sk-icon,
 *                          --sk-ink, --sk-surface, --sk-surface-solid, --sk-blur, --sk-hairline,
 *                          --sk-track, --sk-buffer, --sk-fill, --sk-focus, --sk-focus-gap,
 *                          --sk-cue-clearance, motion timings below.
 */

@font-face {
  font-family: "Inter";
  src: url(fonts/Inter-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(fonts/Inter-600.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

video-player.sk-player {
  display: block;
}

.sk-root {
  /* v10 public custom properties (same names the packaged skins support) */
  --media-accent-color: #8fb8ff;
  --media-accent-text-color: #0b0b0e; /* static fallback when contrast-color() is missing */
  --media-border-radius: 16px;
  --media-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --media-border-color: transparent;
  --media-object-fit: contain;
  --media-object-position: center;

  /* Radius system: inner = outer minus padding, never below zero */
  --sk-pad: 8px;
  --sk-r-outer: var(--media-border-radius);
  --sk-r-inner: max(0px, calc(var(--sk-r-outer) - var(--sk-pad)));

  /* Sizes */
  --sk-hit: 44px;
  --sk-icon: 22px;
  --sk-time-chars: 4; /* JS widens this to the duration's character count */

  /* Color and surface */
  --sk-ink: #f4f4f6;
  --sk-ink-2: #d4d4da;
  --sk-surface: rgb(18 18 22 / .72);
  --sk-surface-solid: #141418;
  --sk-blur: 20px;
  --sk-hairline: rgb(255 255 255 / .10);
  --sk-hairline-strong: rgb(255 255 255 / .24);
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 12px 32px rgb(0 0 0 / .28);
  --sk-track: rgb(255 255 255 / .38);
  --sk-buffer: rgb(255 255 255 / .56);
  --sk-fill: var(--media-accent-color);
  --sk-track-h: 4px;
  --sk-track-h-hover: 6px;

  /* Focus: a light ring outside a dark gap, so it reads on any frame */
  --sk-focus: #ffffff;
  --sk-focus-gap: #111114;
  --sk-focus-w: 2px;
  --sk-focus-off: 2px;

  /* Motion (Set C defaults): entrances 180ms, exits 120ms fade only, controls 100ms in / 160ms out */
  --sk-ease: cubic-bezier(.2, .8, .2, 1);
  --sk-enter: 180ms;
  --sk-exit: 120ms;
  --sk-show: 100ms;
  --sk-hide: 160ms;
  --sk-enter-scale: .96;

  /* Captions are lifted this far above the bottom edge so they never sit under the controls */
  --sk-cue-clearance: 96px;

  /* Optical nudges: zero for generated art (each image is centered as drawn); a skin may set them */
  --sk-nudge-play: 0px;
  --sk-nudge-replay-x: 0px;
  --sk-nudge-replay-y: 0px;
  --sk-nudge-vol-high: 0px;
  --sk-nudge-vol-low: 0px;
  --sk-nudge-vol-off: 0px;
  --sk-icon-render: auto;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container: sk / inline-size;
  border-radius: var(--sk-root-radius, 0px);
  background: #000;
  color: var(--sk-ink);
  font-family: var(--media-font-family);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

@supports (color: contrast-color(red)) {
  .sk-root {
    --media-accent-text-color: contrast-color(var(--media-accent-color));
  }
}

.sk-root :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* Media and poster fill the surface */
.sk-root > :is(mux-video, video),
.sk-root > media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sk-root > :is(mux-video, video) {
  object-fit: var(--media-object-fit);
}
.sk-root > media-poster {
  pointer-events: none;
  transition: opacity var(--sk-exit) linear;
}
.sk-root > media-poster::part(image),
.sk-root > media-poster img {
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit);
  object-position: var(--media-object-position);
}
.sk-root > media-poster:not([data-visible]) {
  opacity: 0;
}
/* A missing asset must not show the browser's broken-image glyph (core flag 2, folded in) */
.sk-root[data-error] > media-poster {
  visibility: hidden;
}

/* Hide the cursor when the viewer is idle during playback */
.sk-root[data-playing]:not([data-user-active]) {
  cursor: none;
}

/* ---------- Controls: auto-hide ---------- */

.sk-root media-controls {
  display: contents;
}

.sk-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--sk-show) linear;
}
.sk-controls > * {
  pointer-events: auto;
}
/* Never hide a control that holds keyboard focus */
.sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 0;
  transition-duration: var(--sk-hide);
}
.sk-controls:not([data-visible]):not(:has(:focus-visible)) > * {
  pointer-events: none;
}

.sk-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--sk-scrim, none);
  transition: opacity var(--sk-show) linear;
}
.sk-backdrop:not([data-visible]) {
  opacity: 0;
  transition-duration: var(--sk-hide);
}

/* ---------- Buttons and icons ---------- */

.sk-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sk-hit);
  height: var(--sk-hit);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sk-btn-radius, var(--sk-r-inner));
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--sk-exit) linear, color var(--sk-exit) linear;
}
.sk-btn[hidden] {
  display: none;
}

.sk-icon {
  grid-area: 1 / 1;
  display: block;
  width: var(--sk-icon);
  height: var(--sk-icon);
  object-fit: contain;
  image-rendering: var(--sk-icon-render);
  fill: currentColor;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Play / pause / replay */
.sk-icon--play { translate: var(--sk-nudge-play) 0; }
.sk-icon--replay { translate: var(--sk-nudge-replay-x) var(--sk-nudge-replay-y); }
media-play-button:not([data-paused]) .sk-icon--play,
media-play-button[data-ended] .sk-icon--play,
media-play-button[data-paused] .sk-icon--pause,
media-play-button[data-ended] .sk-icon--pause,
media-play-button:not([data-ended]) .sk-icon--replay {
  display: none;
}
/* Autoplay pending shows pause, as v10 documents */
media-play-button:not([data-started])[data-paused] .sk-icon--pause {
  display: none;
}

/* Mute: level-aware speaker glyphs */
.sk-icon--vol-high { translate: var(--sk-nudge-vol-high) 0; }
.sk-icon--vol-low { translate: var(--sk-nudge-vol-low) 0; }
.sk-icon--vol-off { translate: var(--sk-nudge-vol-off) 0; }
media-mute-button .sk-icon--vol-low,
media-mute-button .sk-icon--vol-off {
  display: none;
}
media-mute-button:is([data-volume-level="low"], [data-volume-level="medium"]) .sk-icon--vol-high,
media-mute-button:is([data-muted], [data-volume-level="off"]) .sk-icon--vol-high {
  display: none;
}
media-mute-button:is([data-volume-level="low"], [data-volume-level="medium"]):not([data-muted]) .sk-icon--vol-low {
  display: block;
}
media-mute-button:is([data-muted], [data-volume-level="off"]) .sk-icon--vol-off {
  display: block;
}

/* Fullscreen (one generated glyph for both states: in fullscreen it sits pressed in) */
media-fullscreen-button[data-fullscreen] .sk-icon--fs-enter,
media-fullscreen-button:not([data-fullscreen]) .sk-icon--fs-exit {
  display: none;
}
.sk-icon--fs-exit {
  filter: var(--sk-fs-exit-filter, brightness(.82) saturate(.9));
  scale: var(--sk-fs-exit-scale, .92);
}

/* Captions: a short accent bar marks "on" without relying on color alone (shape + position) */
.sk-cc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--sk-cc-on, var(--sk-fill));
  translate: -50% 0;
  opacity: 0;
  transition: opacity var(--sk-exit) linear;
}
.sk-cc[data-active]::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-cc::after {
    scale: .4 1;
    transition: opacity var(--sk-exit) linear, scale var(--sk-exit) var(--sk-ease);
  }
  .sk-cc[data-active]::after {
    scale: 1 1;
    transition-duration: var(--sk-enter);
  }
}

/* ---------- Focus ---------- */

.sk-root :is(.sk-btn, .sk-focus-target, media-slider-thumb, [role="button"], [role="slider"], button, a):focus {
  outline: none;
}
.sk-root :is(.sk-btn, .sk-focus-target, [role="button"], button, a):focus-visible {
  outline: var(--sk-focus-w) solid var(--sk-focus);
  outline-offset: var(--sk-focus-off);
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
  z-index: 1;
}
/* Sliders: the ring wraps the whole track area (the thumb is the focus owner) */
.sk-seek:has(media-slider-thumb:focus-visible),
.sk-volume-slider:has(media-slider-thumb:focus-visible) {
  outline: var(--sk-focus-w) solid var(--sk-focus);
  outline-offset: var(--sk-focus-off);
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
}

/* ---------- Seek ---------- */

.sk-seek {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--sk-seek-hit, 32px);
  border-radius: var(--sk-seek-radius, var(--sk-r-inner));
  cursor: pointer;
  touch-action: none;
}
@media (pointer: coarse) {
  .sk-seek {
    height: max(var(--sk-seek-hit, 32px), 44px);
  }
}
.sk-track {
  position: relative;
  width: 100%;
  height: var(--sk-track-h);
  border-radius: 999px;
  background: var(--sk-track);
  overflow: hidden;
  transition: height var(--sk-exit) var(--sk-ease);
}
.sk-seek[data-interactive] .sk-track {
  height: var(--sk-track-h-hover);
  transition-duration: var(--sk-enter);
}
.sk-buffer,
.sk-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}
.sk-buffer {
  width: var(--media-slider-buffer);
  background: var(--sk-buffer);
}
.sk-fill {
  width: var(--media-slider-fill);
  background: var(--sk-fill);
}
.sk-thumb {
  position: absolute;
  top: 50%;
  left: var(--media-slider-fill);
  width: var(--sk-thumb, 14px);
  height: var(--sk-thumb, 14px);
  border-radius: 50%;
  background: var(--sk-thumb-color, var(--sk-ink));
  translate: -50% -50%;
}

/* Preview (thumbnail + time) rises from the pointer */
.sk-preview {
  position: absolute;
  bottom: calc(100% + 10px);
  left: var(--media-slider-pointer);
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity var(--sk-exit) linear;
}
.sk-seek[data-pointing] .sk-preview,
.sk-seek[data-dragging] .sk-preview {
  opacity: 1;
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-preview {
    scale: var(--sk-enter-scale);
    transition: opacity var(--sk-exit) linear, scale 0s linear var(--sk-exit);
  }
  .sk-seek[data-pointing] .sk-preview,
  .sk-seek[data-dragging] .sk-preview {
    scale: 1;
    transition: opacity var(--sk-enter) linear, scale var(--sk-enter) var(--sk-ease);
  }
}
.sk-preview-image {
  display: block;
  width: var(--sk-preview-w, 160px);
  max-width: 160px;
  min-width: 96px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sk-preview-radius, 8px);
  box-shadow: 0 0 0 1px var(--sk-hairline), var(--sk-shadow);
  background: #000;
}
.sk-preview-image[data-hidden] {
  display: none;
}
.sk-preview-time {
  display: block;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--sk-surface-solid);
  color: var(--sk-ink);
  font: 600 13px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Time ---------- */

.sk-time {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: .35em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sk-time media-time {
  display: inline-block;
  min-width: calc(var(--sk-time-chars) * 1ch);
}
.sk-time media-time[data-type="current"] {
  text-align: right;
}
.sk-time media-time[data-type="duration"] {
  text-align: left;
}
.sk-time media-time-separator {
  color: var(--sk-ink-2);
}

/* ---------- Volume ---------- */

.sk-volume {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.sk-volume-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--sk-vol-w, 80px);
  height: var(--sk-hit);
  margin-inline: 8px;
  border-radius: var(--sk-r-inner);
  cursor: pointer;
  touch-action: none;
}
.sk-volume-slider[hidden] {
  display: none;
}
.sk-volume-slider .sk-track {
  height: 4px;
}
.sk-volume-slider .sk-fill {
  background: var(--sk-vol-fill, var(--sk-ink));
}
.sk-volume-slider .sk-thumb {
  --sk-thumb: 12px;
  scale: 0;
  transition: scale var(--sk-exit) var(--sk-ease);
}
/* The thumb is revealed from the mute edge on hover or focus; the level itself stays readable */
.sk-volume:is(:hover, :focus-within) .sk-volume-slider .sk-thumb,
.sk-volume-slider[data-interactive] .sk-thumb {
  scale: 1;
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: reduce) {
  .sk-volume-slider .sk-thumb {
    scale: 1;
    opacity: 0;
    transition: opacity 90ms linear;
  }
  .sk-volume:is(:hover, :focus-within) .sk-volume-slider .sk-thumb,
  .sk-volume-slider[data-interactive] .sk-thumb {
    opacity: 1;
  }
}

/* ---------- Center play (pointer and touch target; the bar's play button is the accessible one) ---------- */

.sk-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.sk-bigplay {
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--sk-enter) linear;
}
.sk-root:not([data-paused]) .sk-bigplay,
.sk-root[data-waiting] .sk-bigplay,
.sk-root[data-error] .sk-bigplay {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--sk-exit);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-bigplay {
    transition: opacity var(--sk-enter) linear, scale var(--sk-enter) var(--sk-ease);
  }
  .sk-root:not([data-paused]) .sk-bigplay {
    scale: var(--sk-enter-scale);
    transition: opacity var(--sk-exit) linear, scale 0s linear var(--sk-exit);
  }
}

/* ---------- Loading (buffering) ---------- */

.sk-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sk-exit) linear;
}
.sk-loading[data-visible] {
  opacity: 1;
  transition-duration: var(--sk-enter);
}
.sk-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(var(--sk-blur));
  backdrop-filter: blur(var(--sk-blur));
  box-shadow: inset 0 0 0 1px var(--sk-hairline), var(--sk-shadow);
}
.sk-spinner .sk-icon {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-loading[data-visible] .sk-spinner .sk-icon {
    animation: sk-spin 900ms linear infinite;
  }
}
@keyframes sk-spin {
  to { rotate: 360deg; }
}

/* ---------- Error dialog (alertdialog from v10, drawn in the skin's surface) ---------- */

.sk-error-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgb(0 0 0 / .55);
  transition: opacity var(--sk-exit) linear;
}
.sk-error {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(360px, calc(100% - 32px));
  padding: 20px 20px 16px;
  border-radius: var(--sk-r-outer);
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(var(--sk-blur));
  backdrop-filter: blur(var(--sk-blur));
  box-shadow: inset 0 0 0 1px var(--sk-hairline), var(--sk-shadow);
  color: var(--sk-ink);
  text-align: center;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transition: opacity var(--sk-exit) linear;
}
.sk-error-backdrop:not([data-open]),
.sk-error:not([data-open]) {
  display: none;
}
.sk-error-backdrop:is([data-starting-style], [data-ending-style]),
.sk-error:is([data-starting-style], [data-ending-style]) {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-error {
    transition: opacity var(--sk-enter) linear, scale var(--sk-enter) var(--sk-ease);
  }
  .sk-error[data-starting-style] {
    scale: var(--sk-enter-scale);
  }
  .sk-error[data-ending-style] {
    transition: opacity var(--sk-exit) linear;
  }
}
.sk-error-icon {
  width: 28px;
  height: 28px;
  fill: var(--sk-error-accent, var(--sk-fill));
}
.sk-error-title {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
}
.sk-error-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sk-ink);
}
.sk-error-close {
  display: grid;
  place-items: center;
  min-width: 96px;
  height: var(--sk-hit);
  margin-top: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: calc(var(--sk-hit) / 2);
  background: var(--sk-fill);
  color: var(--media-accent-text-color);
  font: 600 14px/1 var(--media-font-family);
  cursor: pointer;
}

/* ---------- Empty state (no source) ---------- */

.sk-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  pointer-events: none;
}
.sk-root[data-empty] .sk-empty {
  display: grid;
}
.sk-empty p {
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--sk-surface);
  box-shadow: inset 0 0 0 1px var(--sk-hairline);
  font-size: 14px;
}
.sk-root[data-empty] .sk-controls {
  display: none;
}

/* ---------- Visually hidden helper ---------- */

.sk-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Preference fallbacks ---------- */

/* Solid surfaces when transparency is reduced or more contrast is asked for */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root {
    --sk-surface: var(--sk-surface-solid);
    --sk-blur: 0px;
    --sk-hairline: var(--sk-hairline-strong);
  }
}
@media (prefers-contrast: more) {
  .sk-root {
    --sk-track: rgb(255 255 255 / .62);
    --sk-track-h: 6px;
    --sk-track-h-hover: 8px;
    --sk-focus-w: 3px;
  }
}

/* Reduced motion: no transforms, opacity changes of 100ms or less */
@media (prefers-reduced-motion: reduce) {
  .sk-root {
    --sk-enter: 90ms;
    --sk-exit: 80ms;
    --sk-show: 0ms;
    --sk-hide: 90ms;
    --sk-enter-scale: 1;
  }
  .sk-track {
    transition: none;
  }
}

/* Forced colors: system colors, currentColor icons, outline focus, bordered track */
@media (forced-colors: active) {
  .sk-root {
    --sk-focus: Highlight;
    --sk-focus-gap: Canvas;
  }
  .sk-icon {
    fill: currentColor;
  }
  .sk-btn {
    color: ButtonText;
  }
  .sk-track {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .sk-fill {
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-buffer {
    background: GrayText;
    forced-color-adjust: none;
  }
  .sk-thumb {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .sk-error,
  .sk-spinner,
  .sk-preview-time {
    border: 1px solid CanvasText;
  }
}