/* ==========================================================================
   SHAPE-SKIN ENGINE
   Optional per-skin feature: cuts the #player container to a custom
   silhouette (via SVG <clipPath>) and adds a 3D drop-shadow for depth.
   Opt-in by adding `shape: {...}` to a skin definition in skin-manager.js.

   When `body.has-shape-skin` is set:
     - #player is clamped to the skin's width/height (supplied via CSS vars)
     - clip-path: url(#shape-skin-clip) cuts it to the silhouette
     - filter: drop-shadow() gives the "modern flair" 3D tinge
     - existing .hw-overlay CSS-drawn decoration is hidden (replaced by the
       silhouette itself; can be re-enabled per skin via another selector)
   ========================================================================== */

body.has-shape-skin #player .player-main {
  width: var(--shape-skin-width, 500px);
  height: var(--shape-skin-height, 700px);
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  clip-path: url(#shape-skin-clip);
  -webkit-clip-path: url(#shape-skin-clip);
  /* 3D tinge: soft soft ambient shadow + a subtle light-from-above highlight.
     drop-shadow respects the clip-path silhouette (unlike box-shadow). */
  filter:
    drop-shadow(0 20px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
  overflow: visible;
  background: var(--shape-skin-bg, var(--bg-player));
  background-size: cover;
  background-position: center;
}

/* The SVG element that holds the <clipPath> is hidden but present in the DOM.
   shape-skin.js injects it on demand and references it via url(#…). */
#shape-skin-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
}

/* When a shape-skin is active, hide the CSS-drawn hardware-overlay markup —
   the silhouette itself replaces it. .hw-overlay is a sibling of .player-main
   (skin-hardware.js appends it directly to #player), so target it there. */
body.has-shape-skin #player > .hw-overlay {
  display: none;
}

/* A gentle light-sweep highlight layered on top to suggest the "ceramic
   catching studio light" look. Positioned inside the clipped region. */
body.has-shape-skin #player .player-main::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 18%,
    transparent 38%,
    transparent 70%,
    rgba(0, 0, 0, 0.18) 100%
  );
  mix-blend-mode: overlay;
  z-index: 100;
}

/* On hover, the light-sweep brightens slightly — subtle, not gamey. */
body.has-shape-skin #player .player-main:hover::before {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 20%,
    transparent 40%,
    transparent 68%,
    rgba(0, 0, 0, 0.22) 100%
  );
  transition: background 280ms ease-out;
}

/* Mobile: scale the player down so it fits viewport. clip-path scales with
   the container when using SVG <clipPath> with clipPathUnits="userSpaceOnUse"
   as long as we apply a transform:scale. KISS for now — just cap dims. */
@media (max-width: 560px) {
  body.has-shape-skin #player .player-main {
    width: min(92vw, var(--shape-skin-width, 500px));
    height: min(92vh, var(--shape-skin-height, 700px));
  }
}