@font-face { font-family: Creepster; src: url("/assets/halloween/Creepster-Regular.ttf") format("truetype"); font-display: swap; font-weight: 400; }
.app[data-theme="halloween"] :is(.brandmark, .intro-wordmark, .stage-talk-brand strong){font-family: Creepster, system-ui; letter-spacing: 0.06em;}
.app[data-theme="halloween"] .brandmark{font-weight: 400; font-size: 28px;}
.app[data-theme="halloween"] .brandmark small{font-family: system-ui; font-size: 8px;}
.app[data-theme="halloween"] .p2-desk-header{position: relative;}
.app[data-theme="halloween"] .p2-desk-header::after{content: ""; position: absolute; right: 0px; top: 0px; width: 48px; height: 48px; pointer-events: none; opacity: 0.14; background: repeating-conic-gradient(from 270deg at 100% 0%, transparent 0deg, transparent 14deg, rgb(227, 194, 231) 15deg, rgb(227, 194, 231) 16deg, transparent 17deg, transparent 29deg); border-radius: 0px 0px 0px 100%; border: 1px solid rgb(220, 182, 228);}
.app[data-theme="halloween"]{--accent: #ff9b51; --accent-rgb: 255,155,81; --base: #100b16; --surface: #21162a; --line: #49304b; --stage-bg: #0c0810; --ui-text: #f8eee5; --ui-muted: #b9a8c5; --ui-surface: #231b2b; --ui-border: #49344f; background: radial-gradient(at 12% 5%, rgba(80, 35, 51, 0.333), transparent 45%), radial-gradient(at 85% 70%, rgba(75, 35, 143, 0.2), transparent 55%), rgb(16, 11, 22);}
.app[data-theme="halloween"] .topbar{background: linear-gradient(95deg, rgb(33, 16, 32), rgb(17, 12, 25) 60%, rgb(41, 23, 39)); border-color: rgba(139, 70, 40, 0.282); box-shadow: rgba(109, 37, 140, 0.125) 0px 3px 30px;}
.app[data-theme="halloween"] .brand-icon{font-size: 0px; width: 27px; height: 27px; background: rgb(255, 155, 81); mask: url("/assets/halloween/pumpkin.svg") center center / contain no-repeat; filter: drop-shadow(rgba(255, 116, 31, 0.533) 0px 0px 8px);}
.app[data-theme="halloween"] :is(.rail, .inspector, .gv4-sidebar){background: linear-gradient(165deg, rgb(27, 17, 31), rgb(13, 11, 20));}
.app[data-theme="halloween"] :is(.p2-desk-header, .gv4-heading, .rail-head){background: linear-gradient(120deg, rgb(65, 32, 46), rgb(37, 19, 44) 65%, rgb(57, 35, 68));}
.app[data-theme="halloween"] .p2-star{color: rgb(255, 155, 81); text-shadow: rgba(255, 102, 40, 0.4) 0px 0px 18px;}
.app[data-theme="halloween"] .studio-theme-grid [data-studio-theme="halloween"]{grid-column: 1 / -1; min-height: 48px; border-color: rgba(255, 155, 81, 0.27); background: linear-gradient(110deg, rgb(70, 32, 42), rgb(38, 23, 47)); color: rgb(255, 211, 175);}
.app[data-theme="halloween"] :is(.scene.active, .p2-layout-choice.active, .p2-camera-choice.active){box-shadow: rgba(237, 127, 37, 0.125) 0px 0px 20px inset, rgba(181, 83, 163, 0.094) 0px 0px 18px; border-color: rgba(255, 173, 107, 0.6) !important;}
.app[data-theme="halloween"] :is(.source-card, .hd43-camera-panel, .gv4-control-card, .studio-info-panel, .p2-feature-card){border-color: rgba(130, 93, 113, 0.3); background: linear-gradient(135deg, rgb(36, 25, 37), rgb(19, 16, 27));}
.app[data-theme="halloween"] .stage-mount{border-color: rgba(255, 155, 81, 0.314); box-shadow: rgba(183, 124, 236, 0.125) 0px 0px 0px 1px, rgba(96, 16, 63, 0.19) 0px 12px 50px;}
.app[data-theme="halloween"] .camera-tile{border-color: rgba(255, 155, 81, 0.565); box-shadow: rgba(173, 117, 217, 0.165) 0px 0px 0px 1px, rgba(218, 89, 25, 0.157) 0px 0px 18px, rgba(0, 0, 0, 0.533) 0px 10px 24px;}
.app[data-theme="halloween"] .camera-placeholder{background: radial-gradient(at 50% 75%, rgb(86, 48, 70), rgb(27, 19, 38) 65%); color: rgb(255, 185, 117);}
.app[data-theme="halloween"] .stage-title{border-color: rgba(255, 155, 81, 0.25) !important; background: linear-gradient(100deg, rgba(33, 19, 33, 0.93), rgba(16, 13, 24, 0.79)) !important;}
.app[data-theme="halloween"] .stage-talk-brand strong{background: linear-gradient(140deg, rgb(255, 225, 173), rgb(255, 155, 81) 55%, rgb(196, 151, 237)) text; color: transparent;}
.app[data-theme="halloween"] .nx-neural{--nx-accent: #ff9b51;}
.app[data-theme="halloween"] :is(.nx-player-popover, .gv42-dialog){background: rgba(27, 17, 36, 0.96); border-color: rgba(163, 107, 173, 0.333);}
.app[data-theme="halloween"] .nx-neural-empty{background: radial-gradient(at 35% 30%, rgb(81, 44, 69), rgb(16, 9, 22) 75%);}
.halloween-ornaments{display: none; position: absolute; inset: 0px; z-index: 6; pointer-events: none; overflow: hidden;}
.app[data-theme="halloween"] .halloween-ornaments{display: block;}
.halloween-ornaments i{position: absolute; display: block; pointer-events: none;}
.halloween-moon{right: 2%; top: 2%; width: 18px; height: 18px; border-radius: 50%; background: rgb(232, 205, 160); box-shadow: rgba(246, 183, 101, 0.4) 0px 0px 22px;}
.halloween-bat{right: 5%; top: 4%; width: 36px; height: 23px; background: rgb(196, 155, 221); mask: url("/assets/halloween/bat.svg") center center / contain no-repeat; opacity: 0.6;}
.halloween-pumpkin{left: 1.4%; bottom: 1.5%; width: 18px; height: 18px; background: rgb(255, 155, 81); mask: url("/assets/halloween/pumpkin.svg") center center / contain no-repeat; opacity: 0.4;}
.app[data-theme="halloween"][data-ui-motion="expressive"] .halloween-bat{animation: 6s ease-in-out 0s infinite normal none running hauntedBatFloat;}
.app[data-theme="halloween"][data-ambience="off"] .halloween-ornaments{display: none;}
.app[data-theme="halloween"] .intro-overlay{background: radial-gradient(at 50% 65%, rgba(110, 43, 38, 0.4), transparent 60%), radial-gradient(at 30% 20%, rgba(84, 43, 101, 0.6), rgb(14, 9, 21) 70%);}
.app[data-theme="halloween"] .intro-mark{font-size: 0px; width: clamp(45px, 12%, 140px); height: clamp(45px, 12vw, 140px); background: rgb(255, 173, 107); mask: url("/assets/halloween/pumpkin.svg") center center / contain no-repeat; filter: drop-shadow(rgba(255, 96, 41, 0.333) 0px 0px 25px);}
.app[data-theme="halloween"] .intro-wordmark{color: rgb(246, 214, 185); text-shadow: rgba(167, 93, 187, 0.314) 0px 0px 35px;}
.halloween-frame-backdrop{position: absolute; z-index: 0; pointer-events: none; overflow: visible; isolation: isolate;}
.halloween-frame-backdrop[hidden]{display: none !important;}
.halloween-frame-visitor{display: block; position: absolute; top: 12%; width: clamp(40px, 34%, 64px); height: clamp(44px, 48%, 78px); opacity: 0; pointer-events: none; transform: translateY(10px) scale(.75) rotate(var(--visitor-drift,0deg)); transition: opacity 850ms, transform 1200ms cubic-bezier(0.2, 0.7, 0.3, 1); filter: drop-shadow(rgba(180, 106, 211, 0.25) 0px 0px 6px);}
.halloween-frame-visitor[data-side="left"]{left: -38px;}
.halloween-frame-visitor[data-side="right"]{right: -38px;}
.halloween-frame-visitor[data-kind="skeleton"]{top: -14px; width: clamp(44px, 36%, 64px); height: clamp(64px, 74%, 100px);}
.visitor-visible .halloween-frame-visitor{opacity: 0.85; transform: translateY(-5px) scale(1) rotate(var(--visitor-drift,0deg));}
.halloween-frame-visitor::before{content: ""; position: absolute; inset: 0px; background: rgb(217, 198, 223); mask: url("/assets/halloween/skeleton.svg") center center / contain no-repeat;}
.halloween-frame-visitor[data-kind="pumpkin"]::before{background: rgb(239, 174, 117); mask-image: url("/assets/halloween/pumpkin.svg");}
.halloween-frame-visitor[data-kind="web"]::before{background: rgb(198, 177, 211); mask-image: url("/assets/halloween/cobweb.svg"); opacity: 0.65;}
.halloween-frame-visitor[data-kind="pumpkin"]::after{content: ""; position: absolute; inset: -12px -8px 12px; background: rgb(194, 168, 208); opacity: 0.4; mask: url("/assets/halloween/cobweb.svg") center center / contain no-repeat; z-index: -1;}
@media (prefers-reduced-motion: reduce){.halloween-frame-backdrop{display: none !important;}
.halloween-frame-visitor{transition: none;}}
@property --halloween-frame-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.halloween-camera-edge{display: none; position: absolute; inset: 0px; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden;}
.app[data-theme="halloween"] .halloween-camera-edge{display: block;}
.halloween-camera-edge::before{z-index: 2; content: ""; position: absolute; inset: 0px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--halloween-frame-angle),#ff9b5130 0deg,#ff9b5130 225deg,#c293ed99 265deg,#fff0d4 292deg,#ff9b51 312deg,#ff9b5130 340deg); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; animation: 8s linear 0s infinite normal none running hauntedFrameOrbit;}
.halloween-camera-edge::after{z-index: 3; content: ""; position: absolute; inset: 0px; border-radius: inherit; box-shadow: rgba(255, 138, 57, 0.22) 0px 0px 7px inset; pointer-events: none; animation: 5s ease-in-out 0s infinite normal none running hauntedFrameBreath;}
.camera-guest .halloween-camera-edge::before{animation-delay: -4s; animation-direction: reverse;}
.camera-tile[data-camera-shape="hexagon"] .halloween-camera-edge::before{clip-path: polygon(evenodd, 25% 0px, 75% 0px, 100% 50%, 75% 100%, 25% 100%, 0px 50%, 25% 0px, 26% 2%, 2% 50%, 26% 98%, 74% 98%, 98% 50%, 74% 2%, 26% 2%);}
.camera-tile[data-camera-shape="diamond"] .halloween-camera-edge::before{clip-path: polygon(evenodd, 50% 0px, 100% 50%, 50% 100%, 0px 50%, 50% 0px, 50% 2%, 2% 50%, 50% 98%, 98% 50%, 50% 2%);}
.camera-tile:is([data-camera-shape="hexagon"], [data-camera-shape="diamond"]) .halloween-camera-edge::before{mask: none; padding: 0px;}
@keyframes hauntedFrameOrbit { 
  100% { --halloween-frame-angle: 360deg; }
}
@keyframes hauntedFrameBreath { 
  50% { opacity: 0.35; }
}
.halloween-frame-eyes{position: absolute; z-index: 1; left: calc(50% - 13px); top: 3%; width: 26px; height: 7px; display: flex; gap: 4px; pointer-events: none; opacity: 0.8; transform-origin: center center; animation: 7s ease-in-out 0s infinite normal none running hauntedFrameBlink;}
.halloween-frame-eyes i{display: block; width: 11px; height: 7px; border-radius: 65% 35% 60% 40%; background: rgb(233, 187, 127); box-shadow: rgba(255, 155, 81, 0.25) 0px 0px 5px; position: relative; pointer-events: none;}
.halloween-frame-eyes i + i{border-radius: 35% 65% 40% 60%;}
.halloween-frame-eyes i::after{content: ""; position: absolute; width: 3px; height: 6px; left: 4px; top: 0px; background: rgb(37, 18, 41); border-radius: 50%;}
.camera-guest .halloween-frame-eyes{animation-delay: -3s;}
.camera-guest .halloween-frame-eyes i{background: rgb(201, 163, 237); box-shadow: rgba(177, 124, 217, 0.25) 0px 0px 5px;}
.camera-tile[data-camera-shape="diamond"] .halloween-frame-eyes{top: 15%;}
@keyframes hauntedFrameBlink { 
  0%, 34%, 38%, 72%, 76%, 100% { transform: scaleY(1); opacity: 0.8; }
  35%, 36%, 73%, 74% { transform: scaleY(0.08); opacity: 0.35; }
}
.app[data-ambience="off"] .halloween-camera-edge{display: none !important;}
@media (prefers-reduced-motion: reduce){.halloween-camera-edge::before, .halloween-camera-edge::after, .halloween-frame-eyes{animation: auto ease 0s 1 normal none running none !important;}}
.cinema-stage.scene-changing:is([data-transition="haunt"], [data-transition="bats"], [data-transition="mist"])::before{background: rgb(16, 8, 23);}
.cinema-stage.scene-changing[data-transition="haunt"]::after{content: ""; position: absolute; inset: 0px; z-index: 91; pointer-events: none; background: url("/assets/halloween/pumpkin.svg") center center / 24% auto no-repeat; filter: sepia(1) saturate(5) hue-rotate(330deg) drop-shadow(rgba(255, 113, 41, 0.5) 0px 0px 30px); animation: 0.9s ease-in-out 0s 1 normal both running halloweenPortal;}
.cinema-stage.scene-changing[data-transition="bats"]::after{content: ""; position: absolute; inset: 0px; z-index: 91; pointer-events: none; background-image: url("/assets/halloween/bat.svg"), url("/assets/halloween/bat.svg"), url("/assets/halloween/bat.svg"); background-size: 40% auto, 26% auto, 20% auto; background-repeat: no-repeat; background-position: 50% 50%, 18% 22%, 84% 70%; filter: drop-shadow(rgb(173, 118, 220) 0px 0px 18px); animation: 0.9s ease-in-out 0s 1 normal both running halloweenSwarm;}
.cinema-stage.scene-changing[data-transition="mist"]::after{content: ""; position: absolute; inset: -15%; z-index: 91; pointer-events: none; background: radial-gradient(at 30% 70%, rgba(206, 167, 216, 0.5), transparent 48%), radial-gradient(at 70% 30%, rgba(238, 156, 98, 0.5), transparent 45%); animation: 0.9s ease-in-out 0s 1 normal both running halloweenMist;}
@keyframes halloweenPortal { 
  0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  40%, 55% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(2.5) rotate(12deg); }
}
@keyframes halloweenSwarm { 
  0% { opacity: 0; transform: translateX(-55%) scale(0.6); }
  40%, 58% { opacity: 1; transform: translateX(0px) scale(1); }
  100% { opacity: 0; transform: translateX(55%) scale(1.4); }
}
@keyframes halloweenMist { 
  0% { opacity: 0; transform: translateX(-18%); }
  40%, 58% { opacity: 1; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(18%); }
}
@keyframes hauntedBatFloat { 
  50% { transform: translateY(4px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce){.halloween-bat{animation: auto ease 0s 1 normal none running none !important;}
.cinema-stage.scene-changing:not([data-scene-motion="full"]):is([data-transition="haunt"], [data-transition="bats"], [data-transition="mist"])::after{animation: 0.9s linear 0s 1 normal both running nexusSceneCover; transform: none;}}
.stage-cameras{isolation: isolate;}
.stage-cameras > .camera-tile{z-index: 1;}