/* KI Lightbox — clean full stylesheet (TV big, screen window tighter inside glass) */

/* Base reset for the overlay */
#ki-lightbox, #ki-lightbox * { box-sizing: border-box; }
.ki-hidden { display: none !important; }

/* Overlay root */
#ki-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: auto; /* allow scroll on short screens */
}

/* Dimmed backdrop */
.ki-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
}

/* TV bigger */
.ki-tv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1.5); /* bigger TV */
  transform-origin: center center;
  width: min(95vw, 1200px);
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

/* TV frame artwork (PNG/JPG/SVG) */
.ki-tv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.6));
}

/* Smaller, tighter screen window inside the glass (used by live stage and intro) */
.ki-screen,
.ki-intro {
  position: absolute;
  left: 24.0%;
  right: 35.5%;
  top: 18.0%;
  bottom: 30.5%;
  display: grid;
  place-items: center;
  background: #02070c;
  border-radius: 1.6vmin;
  overflow: hidden;
  z-index: 3;
}

/* Live stage media: fit to window, keep aspect, don’t overfill */
.ki-stage,
.ki-stage img,
.ki-stage video,
.ki-stage canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block;
  background: #02070c;
  user-select: none;
  -webkit-user-drag: none;
  margin: 0 auto;
}

/* Optional caption area (only if you render one inside .ki-screen) */
.ki-caption {
  color: #7fe8ff;
  font-size: .9rem;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(0,229,255,.08), rgba(0,229,255,.02));
  border-top: 1px solid rgba(0,229,255,.25);
}

/* Intro media fits the same window as .ki-screen */
.ki-intro img,
.ki-intro video,
.ki-intro canvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* same fit as live media */
  display: block;
}

/* Decorative/interactive hotspots (if used) */
.ki-knob, .ki-wheel, .ki-close {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* Example hotspot positions (keep/remove as needed) */
.ki-knob--top    { right: 24.5%;  top: 22.5%;  width: 6%;  height: 10%; border-radius: 50%; }
.ki-knob--mid    { right: 24.5%;  top: 40.8%; width: 6%;  height: 10%; border-radius: 50%; }
.ki-knob--bottom { right: 23.3%;   top: 54.4%;  width: 9%;  height: 16%; border-radius: 12px; }
.ki-wheel--front { right: 35.5%; bottom: 10.5%; width: 7.5%; height: 12%; border-radius: 50%; }
.ki-wheel--rear  { right: 23.5%; bottom: 12%;   width: 7.5%; height: 12%; border-radius: 50%; }
.ki-close        { left: 2.5%;   top: 8%;       width: 6%;  height: 10%; border-radius: 8px; }

.ki-knob:focus-visible, .ki-wheel:focus-visible, .ki-close:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
}
.ki-knob:hover, .ki-wheel:hover, .ki-close:hover {
  box-shadow: 0 0 0 2px rgba(0,229,255,.25) inset;
}

/* Small screens */
@media (max-width: 520px) {
  .ki-tv { width: 100vw; }
  .ki-caption { font-size: .8rem; }
}/* Neon title above the TV */
.ki-title {
position: absolute;
left: 44%;
top: 67.8vmin; /* adjust up/down if needed */
transform: translateX(-50%);
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 900;
font-size: clamp(16px, 2.2vw, 28px);
background: linear-gradient(90deg, #49f8ff, #b057ff, #49f8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #00e5ff;
text-shadow: 0 0 8px #49f8ff, 0 0 16px #ff2fbf;
z-index: 99999;
pointer-events: none;
}

/* Generic knob tooltips */
.ki-knob,
.ki-wheel,
.ki-close {
position: absolute;
}
.ki-knob[data-label],
.ki-wheel[data-label],
.ki-close[data-label] {
--tip-bg: #07161e;
--tip-border: #49f8ff;
--tip-glow: rgba(73,248,255,.75);
}
.ki-knob[data-label]::after,
.ki-wheel[data-label]::after,
.ki-close[data-label]::after {
content: attr(data-label);
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 6px);
white-space: nowrap;
padding: 4px 8px;
border-radius: 8px;
font: 600 11px/1.1 'Electrolize', 'Orbitron', system-ui, sans-serif;
color: #cfefff;
background: var(--tip-bg);
border: 1px solid var(--tip-border);
text-shadow: 0 0 6px #49f8ff;
box-shadow: 0 0 12px var(--tip-glow), inset 0 0 10px rgba(176,87,255,.15);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.ki-knob[data-label]:hover::after,
.ki-wheel[data-label]:hover::after,
.ki-close[data-label]:hover::after {
opacity: 1;
transform: translate(-50%, 2px);
}.ki-knob[data-label],
.ki-wheel[data-label],
.ki-close[data-label] {
position: absolute;
}

.ki-knob[data-label]::after,
.ki-wheel[data-label]::after,
.ki-close[data-label]::after {
content: attr(data-label);
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 6px);
white-space: nowrap;
padding: 4px 8px;
border-radius: 8px;
font: 600 11px/1.1 'Electrolize','Orbitron',system-ui,sans-serif;
color: #cfefff;
background: #07161e;
border: 1px solid #49f8ff;
text-shadow: 0 0 6px #49f8ff;
box-shadow: 0 0 12px rgba(73,248,255,.75), inset 0 0 10px rgba(176,87,255,.15);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}

.ki-knob[data-label]:hover::after,
.ki-wheel[data-label]:hover::after,
.ki-close[data-label]:hover::after {
opacity: 1;
transform: translate(-50%, 2px);
}
/* Center the screen contents */
#ki-lightbox .ki-screen {
  display: grid;
  place-items: center;
  align-items: center;
  justify-items: center;
}

/* Base stage centering (landscape and portrait) */
#ki-lightbox .ki-screen .ki-stage {
  display: block;
  margin: 0 auto;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Portraits: smaller and nudged up a bit (JS adds .tall-portrait) */
#ki-lightbox .ki-screen .ki-stage.tall-portrait {
  max-height: 50% !important;  /* tweak: 80 for bigger, 75/72 for smaller */
  max-width: 100% !important;
  transform: translateY(-50%);  /* nudge upward; try -6%/-8% if needed */
}