/* ========================================================
   FORTNITE / BATTLE-ROYALE THEME OVERRIDE
   Live-Feed Webcam Window Frame Component

   Palette: strictly Orange (#ff8000) + Anthracite,
   matching the existing overlay styleguide (no neon).

   Usage: add the class "theme-fortnite" to the cam window
   element alongside its existing classes, e.g.:
     <div class="cam-window is-standby theme-fortnite" id="cam-window-frame">

   Or drive it via the same URL-param pattern already used in
   overlay.html for [data-layer]:
     ?layer=fortnite  ->  html[data-layer="fortnite"] .cam-window { ... }

   Load this file AFTER webcam-frame.css so it can override it.
   ======================================================== */

:root {
  --fn-orange: #ff8000;
  --fn-orange-dim: #cc6600;
  --fn-anthracite: #2b2b2f;
  --fn-anthracite-dark: #1a1a1c;
  --fn-bg: #141416;
  --fn-panel: #1c1c1f;
}

/* ---- Window frame ---- */
.cam-window.theme-fortnite,
html[data-layer="fortnite"] .cam-window,
html[data-cam-theme="fortnite"] .cam-window,
html[data-theme="fortnite"] .cam-window,
body.theme-fortnite .cam-window {
  background: linear-gradient(160deg, var(--fn-panel) 0%, var(--fn-bg) 100%);
  border: 2px solid var(--fn-anthracite);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 128, 0, 0.25),
    0 0 18px rgba(255, 128, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.6);
  position: absolute;
  overflow: hidden;
}

/* Default Fortnite Minimap Cover: Position OR (top: 10px, right: 10px) & Gross (width: 430px) */
.cam-window.theme-fortnite,
html[data-layer="fortnite"] .cam-window,
html[data-cam-theme="fortnite"] .cam-window,
html[data-theme="fortnite"] .cam-window,
body.theme-fortnite .cam-window {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 430px !important;
  max-width: calc(100vw - 20px) !important;
  transform: none !important;
  z-index: 9999 !important;
}

/* Specific Fortnite Scale Overrides */
.cam-window.theme-fortnite.scale-large,
html[data-layer="fortnite"] .cam-window.scale-large,
html[data-cam-theme="fortnite"] .cam-window.scale-large,
html[data-theme="fortnite"] .cam-window.scale-large,
body.theme-fortnite .cam-window.scale-large {
  width: 430px !important;
}

.cam-window.theme-fortnite.scale-normal,
html[data-layer="fortnite"] .cam-window.scale-normal,
html[data-cam-theme="fortnite"] .cam-window.scale-normal,
html[data-theme="fortnite"] .cam-window.scale-normal,
body.theme-fortnite .cam-window.scale-normal {
  width: 360px !important;
}

.cam-window.theme-fortnite.scale-small,
html[data-layer="fortnite"] .cam-window.scale-small,
html[data-cam-theme="fortnite"] .cam-window.scale-small,
html[data-theme="fortnite"] .cam-window.scale-small,
body.theme-fortnite .cam-window.scale-small {
  width: 260px !important;
}

/* Position overrides when explicitly selected via UI/commands */
.cam-window.theme-fortnite.pos-ol,
.cam-window.theme-fortnite.pos-tl,
.cam-window.theme-fortnite.pos-top-left,
html[data-layer="fortnite"] .cam-window.pos-ol,
html[data-cam-theme="fortnite"] .cam-window.pos-ol {
  top: 25px !important;
  left: 25px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.cam-window.theme-fortnite.pos-or,
.cam-window.theme-fortnite.pos-tr,
.cam-window.theme-fortnite.pos-top-right,
html[data-layer="fortnite"] .cam-window.pos-or,
html[data-cam-theme="fortnite"] .cam-window.pos-or {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.cam-window.theme-fortnite.pos-ul,
.cam-window.theme-fortnite.pos-bl,
.cam-window.theme-fortnite.pos-bottom-left,
html[data-layer="fortnite"] .cam-window.pos-ul,
html[data-cam-theme="fortnite"] .cam-window.pos-ul {
  bottom: 25px !important;
  left: 25px !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

.cam-window.theme-fortnite.pos-ur,
.cam-window.theme-fortnite.pos-br,
.cam-window.theme-fortnite.pos-bottom-right,
html[data-layer="fortnite"] .cam-window.pos-ur,
html[data-cam-theme="fortnite"] .cam-window.pos-ur {
  bottom: 25px !important;
  right: 25px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.cam-window.theme-fortnite.pos-center,
.cam-window.theme-fortnite.pos-c,
.cam-window.theme-fortnite.pos-m,
.cam-window.theme-fortnite.pos-mitte,
html[data-layer="fortnite"] .cam-window.pos-center,
html[data-cam-theme="fortnite"] .cam-window.pos-center {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.cam-window.theme-fortnite.scale-full,
.cam-window.theme-fortnite.scale-fullscreen,
.cam-window.theme-fortnite.scale-zoom,
html[data-layer="fortnite"] .cam-window.scale-full,
html[data-cam-theme="fortnite"] .cam-window.scale-full {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
}

/* subtle pulsing orange edge instead of a rainbow ring */
.cam-window.theme-fortnite::before,
html[data-layer="fortnite"] .cam-window::before,
html[data-cam-theme="fortnite"] .cam-window::before,
html[data-theme="fortnite"] .cam-window::before,
body.theme-fortnite .cam-window::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(90deg, var(--fn-anthracite), var(--fn-orange), var(--fn-anthracite));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fn-border-flow 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes fn-border-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* ---- Titlebar ---- */
.cam-window.theme-fortnite .cam-titlebar,
html[data-layer="fortnite"] .cam-titlebar {
  background: linear-gradient(90deg, var(--fn-anthracite-dark), var(--fn-panel));
  border-bottom: 2px solid var(--fn-anthracite);
  position: relative;
  z-index: 2;
}

.cam-window.theme-fortnite .cam-title,
html[data-layer="fortnite"] .cam-title {
  font-family: 'Orbitron', 'Outfit', sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 128, 0, 0.5);
}

.cam-window.theme-fortnite .cam-title-group,
html[data-layer="fortnite"] .cam-title-group {
  position: relative;
  padding-left: 6px;
}

.cam-window.theme-fortnite .cam-title-group::before,
html[data-layer="fortnite"] .cam-title-group::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) skewX(-12deg);
  width: 4px;
  height: 70%;
  background: var(--fn-orange);
  box-shadow: 0 0 8px rgba(255, 128, 0, 0.7);
}

/* ---- Live dot ---- */
.cam-window.theme-fortnite .cam-live-dot,
html[data-layer="fortnite"] .cam-live-dot {
  background-color: var(--fn-anthracite);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.cam-window.theme-fortnite.is-local-live .cam-live-dot,
.cam-window.theme-fortnite.is-remote-live .cam-live-dot,
html[data-layer="fortnite"] .cam-window.is-local-live .cam-live-dot,
html[data-layer="fortnite"] .cam-window.is-remote-live .cam-live-dot {
  background-color: var(--fn-orange);
  box-shadow: 0 0 10px var(--fn-orange);
  animation: fn-pulse-dot 1.2s infinite;
}

.cam-window.theme-fortnite.is-standby .cam-live-dot,
html[data-layer="fortnite"] .cam-window.is-standby .cam-live-dot {
  background-color: var(--fn-orange-dim);
  box-shadow: 0 0 6px rgba(204, 102, 0, 0.6);
}

.cam-window.theme-fortnite.is-closed .cam-live-dot,
.cam-window.theme-fortnite.has-error .cam-live-dot,
html[data-layer="fortnite"] .cam-window.is-closed .cam-live-dot,
html[data-layer="fortnite"] .cam-window.has-error .cam-live-dot {
  background-color: #6b6b6f;
  box-shadow: 0 0 6px rgba(107, 107, 111, 0.6);
}

@keyframes fn-pulse-dot {
  0%   { opacity: 1;    transform: scale(1); }
  50%  { opacity: 0.55; transform: scale(1.25); }
  100% { opacity: 1;    transform: scale(1); }
}

/* ---- Control buttons ---- */
.cam-window.theme-fortnite .cam-btn,
html[data-layer="fortnite"] .cam-btn {
  background: var(--fn-anthracite);
  border: 1px solid #3a3a3f;
  color: #ffffff;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.cam-window.theme-fortnite .cam-btn:hover,
html[data-layer="fortnite"] .cam-btn:hover {
  background: var(--fn-orange);
  border-color: var(--fn-orange);
  box-shadow: 0 0 10px rgba(255, 128, 0, 0.6);
  transform: scale(1.05);
}

.cam-window.theme-fortnite .cam-btn-close:hover,
html[data-layer="fortnite"] .cam-btn-close:hover {
  background: #6b6b6f;
  border-color: #6b6b6f;
  box-shadow: none;
}

.cam-window.theme-fortnite .cam-btn-blur.effect-blur,
.cam-window.theme-fortnite .cam-btn-blur.effect-pixelate,
.cam-window.theme-fortnite .cam-btn-blur.active,
html[data-layer="fortnite"] .cam-btn-blur.effect-blur,
html[data-layer="fortnite"] .cam-btn-blur.effect-pixelate,
html[data-layer="fortnite"] .cam-btn-blur.active {
  background: var(--fn-orange) !important;
  border-color: var(--fn-orange) !important;
  color: #1a1200 !important;
  box-shadow: 0 0 10px rgba(255, 128, 0, 0.8) !important;
}

/* ---- Video container / jagged corner accents ---- */
.cam-window.theme-fortnite .cam-video-container,
html[data-layer="fortnite"] .cam-video-container {
  position: relative;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
}

.cam-window.theme-fortnite .cam-video-container::after,
html[data-layer="fortnite"] .cam-video-container::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--fn-orange);
  clip-path: polygon(
    0 0, 22px 0, 22px 3px, 3px 3px, 3px 22px, 0 22px,
    0 100%, 22px 100%, 22px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 22px), 0 calc(100% - 22px),
    100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 22px), 100% calc(100% - 22px),
    100% 0, calc(100% - 22px) 0, calc(100% - 22px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 22px, 100% 22px
  );
  opacity: 0.8;
  pointer-events: none;
  z-index: 11;
}

/* ---- Standby overlay ---- */
.cam-window.theme-fortnite .cam-overlay-standby,
html[data-layer="fortnite"] .cam-overlay-standby {
  background: radial-gradient(circle at 50% 40%, rgba(255, 128, 0, 0.18), rgba(20, 20, 22, 0.96));
}

.cam-window.theme-fortnite .cam-standby-icon,
html[data-layer="fortnite"] .cam-standby-icon {
  filter: drop-shadow(0 0 8px rgba(255, 128, 0, 0.6));
}

.cam-window.theme-fortnite .cam-standby-text,
html[data-layer="fortnite"] .cam-standby-text {
  font-family: 'Orbitron', 'Outfit', sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fn-orange);
  text-shadow: 0 0 6px rgba(255, 128, 0, 0.5);
}

/* ---- Blur / Pixelate active states ---- */
.cam-window.theme-fortnite.is-blurred,
.cam-window.theme-fortnite.is-pixelated,
html[data-layer="fortnite"] .cam-window.is-blurred,
html[data-layer="fortnite"] .cam-window.is-pixelated {
  border-color: var(--fn-orange) !important;
  box-shadow:
    0 0 0 1px rgba(255, 128, 0, 0.4),
    0 0 18px rgba(255, 128, 0, 0.5),
    0 10px 28px rgba(0, 0, 0, 0.6) !important;
}

/* ========================================================
   OPTIONAL MODIFIER: JAGGED "EXPLOSION" CLIP-PATH
   Add class "explosion-clip" alongside "theme-fortnite" to
   cut the entire frame into a spiky comic-explosion silhouette:
     <div class="cam-window theme-fortnite explosion-clip ...">
   Reads best on scale-full / fullscreen presets or a dedicated
   "highlight" cam slot rather than the default 340px docked window.
   ======================================================== */

.cam-window.explosion-clip,
html[data-layer="fortnite"] .cam-window.explosion-clip {
  clip-path: polygon(
    4% 18%, 14% 6%, 22% 16%, 30% 2%, 40% 14%,
    50% 0%, 60% 14%, 70% 2%, 78% 16%, 86% 6%,
    96% 18%, 88% 30%, 100% 40%, 86% 48%,
    98% 60%, 84% 66%, 94% 80%, 80% 82%,
    86% 96%, 72% 88%, 64% 100%, 56% 86%,
    44% 100%, 36% 86%, 28% 100%, 20% 88%,
    8% 96%, 14% 82%, 0% 76%, 12% 64%,
    0% 54%, 12% 44%, 2% 32%, 16% 28%
  );
  border-radius: 0;
  border-width: 3px;
  padding: 4px;
}

.cam-window.explosion-clip .cam-video-container,
html[data-layer="fortnite"] .cam-window.explosion-clip .cam-video-container {
  clip-path: inherit;
}

.cam-window.explosion-clip::before,
html[data-layer="fortnite"] .cam-window.explosion-clip::before {
  clip-path: inherit;
  -webkit-mask: none;
  mask: none;
  background: transparent;
  border: 3px solid var(--fn-orange);
  filter: drop-shadow(0 0 8px rgba(255, 128, 0, 0.6));
  animation: none;
}

/* ========================================================
   OPTIONAL DECORATION: CORNER "POW" BURST BADGE
   Purely decorative, no HTML change needed — renders on the
   video container's top-right corner via a jagged star clip.
     <div class="cam-window theme-fortnite burst-badge ...">
   ======================================================== */

.cam-window.burst-badge .cam-video-container::before,
html[data-layer="fortnite"] .cam-window.burst-badge .cam-video-container::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--fn-orange), var(--fn-anthracite-dark));
  clip-path: polygon(
    50% 0%, 61% 18%, 80% 8%, 78% 29%,
    100% 32%, 86% 48%, 100% 64%, 78% 68%,
    82% 88%, 62% 80%, 52% 100%, 40% 80%,
    20% 88%, 24% 68%, 2% 64%, 16% 48%,
    0% 30%, 22% 28%, 20% 8%, 39% 18%
  );
  box-shadow: 0 0 12px rgba(255, 128, 0, 0.6);
  z-index: 20;
  pointer-events: none;
  animation: fn-burst-pop 2.6s ease-in-out infinite;
}

@keyframes fn-burst-pop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.06) rotate(-5deg); }
}