/* Cinematic Scene Mode - Fullscreen Overlay */

/* ===== Fullscreen Container ===== */
.storyframe.cinematic-scene {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999;
  background: #000;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: cinematic-fade-in 0.8s ease-out;
}

.storyframe.cinematic-scene .window-header,
.storyframe.cinematic-scene .window-resize-handle {
  display: none !important;
}

.storyframe.cinematic-scene .window-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  background: transparent;
}

/* ApplicationV2 apps and legacy v1 apps inside #interface must appear above the cinematic overlay.
   Native <dialog> elements rendered directly on body are handled separately below. */
body:has(.storyframe.cinematic-scene) :is(#interface .application, #interface .app) {
  z-index: 100000 !important;
}

/* Native <dialog> elements (e.g. "Create Page") rendered directly on body by FoundryVTT v13.
   Kept as a separate rule — `:is()` with #interface would give it higher specificity and
   suppress this 200000 value via the !important cascade. */
body:has(.storyframe.cinematic-scene) dialog {
  z-index: 200000 !important;
}

body:has(.storyframe.cinematic-scene)
  :is(#context-menu, #notifications, #dice-box-canvas, #storyframe-gm-sidebar, #file-picker) {
  z-index: 100000 !important;
}

body:has(.storyframe.cinematic-scene) #sidebar {
  z-index: 100000 !important;
}

/* ===== Scene Background ===== */
.cinematic-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

video.cinematic-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cinematic-scene-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0a0f;
  --_open-left-width: 0px;
  --_open-right-width: 0px;
  --_panel-left-reserve: 0px;
  --_panel-right-reserve: 0px;
  --_camera-row-reserve: 0px;
  --filmstrip-speaker-size: 64px;
  --_filmstrip-visible: 0;
}

/* Track open panel widths for spotlight centering */
.cinematic-scene-container:has(.cinematic-left-panel.open) {
  --_open-left-width: var(--left-panel-width, 320px);
}

.cinematic-scene-container:has(.cinematic-side-panel.open) {
  --_open-right-width: var(--right-panel-width, 320px);
}

.cinematic-scene-container:has(.cinematic-challenge-panel:not(.hidden)) {
  --_panel-left-reserve: 360px;
}

.cinematic-scene-container:has(.cinematic-roll-panel:not(.hidden)) {
  --_panel-right-reserve: 360px;
}

.cinematic-scene-container:has(.cinematic-bottom-row:not(.hidden) .cinematic-pc-item) {
  --_camera-row-reserve: 76px;
}

.cinematic-scene-container:has(.cinematic-bottom-row:not(.hidden) .camera-feed-item) {
  --_camera-row-reserve: calc(var(--camera-feed-width, 140px) * 0.75 + 30px);
}

.cinematic-scene-container:has(.cinematic-filmstrip-container:not([style*='display: none'])) {
  --_filmstrip-visible: 1;
}

@keyframes cinematic-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== Skip intro on re-render ===== */
.storyframe.cinematic-scene.skip-intro {
  animation: none;
}

.skip-intro .cinematic-spotlight {
  animation: none !important;
}

/* ===== Fade out on close ===== */
.storyframe.cinematic-scene.cinematic-fade-out {
  animation: cinematic-fade-out var(--fade-out-duration, 1000ms) ease-in forwards !important;
  pointer-events: none;
}

@keyframes cinematic-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ===== Vignette Overlay ===== */
.cinematic-scene-container .vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ===== Active Speaker Spotlight ===== */
.cinematic-scene-container .cinematic-spotlight {
  position: absolute;
  top: 16px;
  bottom: calc(
    (var(--filmstrip-speaker-size) + 76px) * var(--_filmstrip-visible) + var(--_camera-row-reserve)
  );
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  max-width: calc(100vw - var(--_open-left-width) - var(--_open-right-width) - 48px);
  animation: cinematic-speaker-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cinematic-scene-container .spotlight-glow-cinematic {
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    ellipse at center,
    rgba(94, 129, 172, 0.5) 0%,
    rgba(94, 129, 172, 0.15) 45%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.cinematic-scene-container .spotlight-portrait {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - var(--_open-left-width) - var(--_open-right-width) - 80px);
  max-height: calc(100% - 80px);
  object-fit: contain;
  border-radius: var(--sf-radius-xl, 16px);
  border: 3px solid rgba(94, 129, 172, 0.6);
  box-shadow:
    0 0 60px rgba(94, 129, 172, 0.4),
    0 0 120px rgba(94, 129, 172, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.3);
}

.cinematic-scene-container .spotlight-nameplate {
  position: relative;
  z-index: 1;
  margin-top: var(--sf-space-lg, 24px);
  padding: var(--sf-space-sm, 8px) var(--sf-space-xl, 32px);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(94, 129, 172, 0.35);
  border-radius: var(--sf-radius-md, 8px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: var(--sf-space-sm, 8px);
  white-space: nowrap;
}

.cinematic-scene-container .nameplate-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Party sheet button in nameplate */
.cinematic-scene-container .spotlight-party-btn {
  background: transparent;
  border: 1px solid rgba(94, 129, 172, 0.3);
  border-radius: var(--sf-radius-sm, 4px);
  color: rgba(94, 129, 172, 0.7);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}

.cinematic-scene-container .spotlight-party-btn:hover {
  color: rgba(94, 129, 172, 1);
  border-color: rgba(94, 129, 172, 0.7);
  background: rgba(94, 129, 172, 0.15);
}

/* No active speaker state */
.cinematic-scene-container .cinematic-no-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: rgba(255, 255, 255, 0.15);
  font-size: 4rem;
}

/* ===== Spotlight Animations ===== */
@keyframes cinematic-speaker-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* ===== Bottom Row (camera feeds + PC portraits) ===== */
.cinematic-scene-container .cinematic-bottom-row {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 80vw;
  overflow-x: auto;
  scrollbar-width: none;
}

.cinematic-scene-container .cinematic-bottom-row::-webkit-scrollbar {
  display: none;
}

.cinematic-scene-container .cinematic-bottom-row.hidden {
  display: none;
}

.cinematic-scene-container .cinematic-pc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.75;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.cinematic-scene-container .cinematic-pc-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.cinematic-scene-container .cinematic-pc-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cinematic-scene-container .pc-item-name {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Film Strip (Bottom Bar) ===== */
.cinematic-scene-container .cinematic-filmstrip-container {
  position: absolute;
  bottom: calc(8px + var(--_camera-row-reserve));
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: calc(100vw - var(--_open-left-width) - var(--_open-right-width) - 48px);
  z-index: 8;
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Filmstrip resize handle (bottom edge) */
.cinematic-scene-container .filmstrip-resize-handle {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  cursor: ns-resize;
  border-radius: 0 0 4px 4px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s;
  z-index: 1;
}
.cinematic-scene-container .filmstrip-resize-handle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
}
.cinematic-scene-container .filmstrip-resize-handle:hover {
  background: rgba(94, 129, 172, 0.3);
}
.cinematic-scene-container.filmstrip-resizing .filmstrip-speaker,
.cinematic-scene-container.filmstrip-resizing .filmstrip-speaker img {
  transition: none !important;
}

.cinematic-scene-container .cinematic-filmstrip {
  display: flex;
  gap: var(--sf-space-md, 16px);
  padding: var(--sf-space-sm, 8px) var(--sf-space-lg, 24px);
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--sf-radius-xl, 16px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.cinematic-scene-container .cinematic-filmstrip::-webkit-scrollbar {
  display: none;
}

/* Filmstrip scroll indicators */
.cinematic-scene-container .filmstrip-scroll-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 9;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
}

.cinematic-scene-container .filmstrip-scroll-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
  border-radius: var(--sf-radius-xl, 16px) 0 0 var(--sf-radius-xl, 16px);
}

.cinematic-scene-container .filmstrip-scroll-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
  border-radius: 0 var(--sf-radius-xl, 16px) var(--sf-radius-xl, 16px) 0;
}

.cinematic-scene-container
  .cinematic-filmstrip-container.scroll-left-visible
  .filmstrip-scroll-left {
  opacity: 1;
}

.cinematic-scene-container
  .cinematic-filmstrip-container.scroll-right-visible
  .filmstrip-scroll-right {
  opacity: 1;
}

.cinematic-scene-container .filmstrip-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: all 0.3s ease;
}

.cinematic-scene-container .filmstrip-speaker:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.cinematic-scene-container .filmstrip-speaker.gm-clickable {
  cursor: pointer;
}

.cinematic-scene-container .filmstrip-speaker img {
  width: var(--filmstrip-speaker-size, 64px);
  height: var(--filmstrip-speaker-size, 64px);
  object-fit: contain;
  border-radius: var(--sf-radius-md, 8px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  background: rgba(0, 0, 0, 0.4);
}

.cinematic-scene-container .filmstrip-speaker:hover img {
  border-color: rgba(94, 129, 172, 0.7);
  box-shadow: 0 0 16px rgba(94, 129, 172, 0.3);
}

.cinematic-scene-container .filmstrip-name {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: calc(var(--filmstrip-speaker-size, 64px) + 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ===== Filmstrip Speaker State Indicators ===== */
.cinematic-scene-container .filmstrip-speaker.speaker-is-hidden img {
  filter: blur(3px);
  border-color: rgba(191, 97, 106, 0.5);
}

.cinematic-scene-container .filmstrip-speaker.speaker-is-hidden::after {
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.6rem;
  color: rgba(191, 97, 106, 0.9);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  padding: 1px 3px;
  pointer-events: none;
  z-index: 3;
  line-height: 1;
}

.cinematic-scene-container .filmstrip-speaker.name-is-hidden .filmstrip-name {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ===== Filmstrip Speaker Hover Controls ===== */
.cinematic-scene-container .filmstrip-speaker {
  position: relative;
}

.cinematic-filmstrip.controls-hover {
  padding-top: 28px;
}

/* Bridge the gap between the controls (above card) and the card's hover area */
.cinematic-filmstrip.controls-hover .filmstrip-speaker::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  height: 28px;
}

.cinematic-scene-container .filmstrip-speaker-controls {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.cinematic-scene-container .filmstrip-speaker:hover .filmstrip-speaker-controls {
  opacity: 1;
  pointer-events: all;
}

.cinematic-scene-container .fsc-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s,
    background 0.15s;
}

.cinematic-scene-container .fsc-btn:hover {
  transform: scale(1.2);
  background: rgba(94, 129, 172, 0.85);
}

.cinematic-scene-container .fsc-btn-danger:hover {
  background: rgba(192, 57, 43, 0.85);
}

.cinematic-scene-container .filmstrip-speaker-image-nav {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.cinematic-scene-container .filmstrip-speaker:hover .filmstrip-speaker-image-nav {
  opacity: 1;
  pointer-events: all;
}

.cinematic-scene-container .fsc-nav-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: none;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s,
    background 0.15s;
}

.cinematic-scene-container .fsc-nav-btn:hover {
  transform: scale(1.2);
  background: rgba(94, 129, 172, 0.85);
}

/* Controls mode: sides — controls column on left, image nav on right, always visible */
.cinematic-filmstrip.controls-sides .filmstrip-speaker {
  padding-left: 24px;
  padding-right: 24px;
}
.cinematic-filmstrip.controls-sides .filmstrip-speaker-controls {
  top: 4px;
  bottom: 22px;
  left: 2px;
  right: auto;
  transform: none;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
}
.cinematic-filmstrip.controls-sides .filmstrip-speaker-image-nav {
  top: 4px;
  bottom: 22px;
  left: auto;
  right: 2px;
  transform: none;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
}

/* Controls mode: bottombar — static row below name, always visible */
.cinematic-filmstrip.controls-bottombar .filmstrip-speaker-controls {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: all;
  transition: none;
  justify-content: center;
  margin-top: 3px;
}
.cinematic-filmstrip.controls-bottombar .filmstrip-speaker-image-nav {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: all;
  transition: none;
  justify-content: center;
  margin-top: 2px;
}

.cinematic-scene-container .camera-feed-item {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cinematic-scene-container .camera-feed-item video {
  width: var(--camera-feed-width, 140px);
  height: calc(var(--camera-feed-width, 140px) * 0.75);
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #000;
}

.cinematic-scene-container .camera-feed-name {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: var(--camera-feed-width, 140px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Resize handle at bottom of camera row */
.cinematic-scene-container .camera-row-resize-handle {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  cursor: ns-resize;
  border-radius: 0 0 4px 4px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s;
}

.cinematic-scene-container .camera-row-resize-handle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
}

.cinematic-scene-container .camera-row-resize-handle:hover {
  background: rgba(94, 129, 172, 0.3);
}

.cinematic-scene-container .camera-feed-sheet-btn {
  position: absolute;
  bottom: 20px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.15s,
    border-color 0.15s;
}

.cinematic-scene-container .camera-feed-sheet-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cinematic-scene-container .camera-feed-sheet-btn:hover {
  transform: scale(1.15);
  border-color: rgba(94, 129, 172, 0.8);
}

/* Chat message avatar images (dnd5e renders large portraits in .message-sender;
   its size rules are scoped to #chat-log and don't apply inside our containers) */
.cinematic-scene-container .message-sender .avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.cinematic-scene-container .message-sender {
  display: flex;
}

/* ===== Dual Spotlight Stage ===== */
.cinematic-spotlight-stage {
  position: absolute;
  top: 24px;
  bottom: calc(
    (var(--filmstrip-speaker-size) + 76px) * var(--_filmstrip-visible) + var(--_camera-row-reserve)
  );
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  /* Grid with shared rows: portrait row (flexible) + nameplate row (auto, shared height) */
  display: grid;
  grid-template-rows: 1fr auto;
  grid-auto-flow: column;
  align-items: end;
  justify-content: center;
  gap: 0;
  max-width: calc(100vw - var(--_open-left-width) - var(--_open-right-width) - 48px);
  transition: column-gap 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cinematic-spotlight-stage.dual {
  column-gap: 2rem;
}

/* Override single spotlight positioning — now managed by stage.
   Each spotlight spans both rows via subgrid so portrait + nameplate
   share the stage's row tracks. */
.cinematic-spotlight-stage .cinematic-spotlight {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  transform: none;
  max-width: none;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  align-items: end;
  justify-items: center;
  animation: cinematic-spotlight-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cinematic-spotlight-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.cinematic-spotlight-stage .cinematic-spotlight .spotlight-portrait {
  max-width: 100%;
  max-height: calc(
    100vh - (var(--filmstrip-speaker-size) + 76px) * var(--_filmstrip-visible) -
      var(--_camera-row-reserve) - 120px
  );
}

.cinematic-spotlight-stage .cinematic-spotlight.primary {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50vw - var(--_open-left-width) / 2 - var(--_open-right-width) / 2 - 48px);
}

.cinematic-spotlight-stage:not(.dual) .cinematic-spotlight.primary {
  max-width: calc(100vw - var(--_open-left-width) - var(--_open-right-width) - 80px);
}

/* Secondary spotlight — same size, amber glow */
.cinematic-spotlight-stage .cinematic-spotlight.secondary {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50vw - var(--_open-left-width) / 2 - var(--_open-right-width) / 2 - 48px);
}

.cinematic-spotlight.secondary .spotlight-glow-cinematic {
  background: radial-gradient(
    ellipse at center,
    rgba(218, 165, 32, 0.5) 0%,
    rgba(218, 165, 32, 0.15) 45%,
    transparent 70%
  ) !important;
}

.cinematic-spotlight.secondary .spotlight-portrait {
  border-color: rgba(218, 165, 32, 0.6) !important;
  box-shadow:
    0 0 60px rgba(218, 165, 32, 0.4),
    0 0 120px rgba(218, 165, 32, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.cinematic-spotlight.secondary .spotlight-nameplate {
  border-color: rgba(218, 165, 32, 0.35) !important;
}

/* Secondary dismiss button (GM only) */
.spotlight-dismiss-btn {
  background: transparent;
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: var(--sf-radius-sm, 4px);
  color: rgba(218, 165, 32, 0.7);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}

.spotlight-dismiss-btn:hover {
  color: rgba(255, 100, 100, 1);
  border-color: rgba(255, 100, 100, 0.7);
  background: rgba(255, 100, 100, 0.15);
}

/* ===== Speaker Request Queue ===== */
.speaker-request-queue {
  position: absolute;
  top: 70px;
  right: 16px;
  z-index: 50;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: var(--sf-radius-md, 8px);
  backdrop-filter: blur(12px);
  padding: var(--sf-space-sm, 8px);
  min-width: 180px;
  max-width: 280px;
}

.request-queue-header {
  display: flex;
  align-items: center;
  gap: var(--sf-space-sm, 8px);
  padding-bottom: var(--sf-space-sm, 8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--sf-space-sm, 8px);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(218, 165, 32, 0.9);
}

.speaker-request-badge {
  background: rgba(218, 165, 32, 0.3);
  color: rgba(218, 165, 32, 1);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: auto;
}

.request-queue-item {
  display: flex;
  align-items: center;
  gap: var(--sf-space-sm, 8px);
  padding: 4px 0;
}

.request-speaker-name {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-approve-btn,
.request-dismiss-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--sf-radius-sm, 4px);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.75rem;
  line-height: 1;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.request-approve-btn:hover {
  color: rgba(100, 255, 100, 1);
  border-color: rgba(100, 255, 100, 0.5);
  background: rgba(100, 255, 100, 0.1);
}

.request-dismiss-btn:hover {
  color: rgba(255, 100, 100, 1);
  border-color: rgba(255, 100, 100, 0.5);
  background: rgba(255, 100, 100, 0.1);
}

/* ===== Speaker Request Glow on Filmstrip ===== */
.filmstrip-speaker.has-request {
  animation: request-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.6);
  border-radius: var(--sf-radius-sm, 4px);
}

@keyframes request-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.8);
  }
}

/* ===== Player Speaker Controls ===== */
.player-speaker-controls {
  display: flex;
  gap: var(--sf-space-sm, 8px);
  align-items: center;
  margin-right: var(--sf-space-md, 16px);
  position: relative;
}

/* Allow popup to escape bottom row overflow */
.cinematic-bottom-row:has(.speaker-picker-popup) {
  overflow: visible !important;
}

/* Character picker popup — positioned by JS via data-anchor */
.speaker-picker-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--sf-radius-md, 8px);
  backdrop-filter: blur(12px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  animation: picker-appear 0.15s ease-out;
}

@keyframes picker-appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.speaker-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--sf-radius-sm, 4px);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  transition: background 0.12s;
}

.speaker-picker-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.speaker-picker-item img {
  width: 32px;
  height: 32px;
  border-radius: var(--sf-radius-sm, 4px);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.player-speaker-btn {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--sf-radius-md, 8px);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 8px 16px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: var(--sf-space-sm, 8px);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.player-speaker-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.player-speaker-btn.join-btn:hover {
  border-color: rgba(100, 200, 100, 0.6);
  color: rgba(100, 255, 100, 1);
}

.player-speaker-btn.request-btn {
  border-color: rgba(218, 165, 32, 0.4);
  color: rgba(218, 165, 32, 0.9);
}

.player-speaker-btn.request-btn:hover {
  border-color: rgba(218, 165, 32, 0.7);
  color: rgba(218, 165, 32, 1);
  background: rgba(218, 165, 32, 0.15);
}

.player-speaker-btn.requesting {
  border-color: rgba(218, 165, 32, 0.6);
  color: rgba(218, 165, 32, 1);
  animation: request-pulse 2s ease-in-out infinite;
}

.player-speaker-btn.stepdown-btn {
  border-color: rgba(218, 165, 32, 0.4);
  color: rgba(218, 165, 32, 0.9);
}

.player-speaker-btn.stepdown-btn:hover {
  border-color: rgba(255, 100, 100, 0.5);
  color: rgba(255, 100, 100, 1);
}

.player-speaker-btn.leave-btn {
  padding: 8px 10px;
}

.player-speaker-btn.leave-btn:hover {
  border-color: rgba(255, 100, 100, 0.5);
  color: rgba(255, 100, 100, 1);
}

/* PC item states for player speakers */
.cinematic-pc-item.requesting {
  animation: request-pulse 2s ease-in-out infinite;
  border-radius: var(--sf-radius-sm, 4px);
}

/* Player-added speaker indicator on filmstrip — small amber dot */
.filmstrip-speaker.player-speaker::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(218, 165, 32, 0.9);
  box-shadow: 0 0 4px rgba(218, 165, 32, 0.6);
  pointer-events: none;
}

.cinematic-pc-item.speaker-active {
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.6);
  border-radius: var(--sf-radius-sm, 4px);
  border: 2px solid rgba(218, 165, 32, 0.5);
}

/* ===== Responsive Dual Spotlight (narrow viewports) ===== */
@media (max-width: 700px) {
  .cinematic-spotlight-stage.dual {
    grid-auto-flow: row;
    column-gap: 0;
    row-gap: 0.5rem;
  }

  .cinematic-spotlight-stage.dual .cinematic-spotlight {
    max-width: 100%;
  }

  .cinematic-spotlight-stage.dual .spotlight-portrait {
    max-height: 30vh;
  }

  .cinematic-spotlight-stage .spotlight-nameplate {
    padding: var(--sf-space-xs, 4px) var(--sf-space-md, 16px);
  }

  .cinematic-spotlight-stage .nameplate-text {
    font-size: 1rem;
  }
}

/* ===== Responsive Filmstrip (narrow viewports) ===== */
@media (max-width: 500px) {
  .cinematic-filmstrip .filmstrip-speaker {
    --filmstrip-speaker-size: 48px;
  }
  .cinematic-filmstrip .filmstrip-name {
    display: none;
  }
}