/**
 * Puppets & Stage Styling - Animations, Gestures, Curtains & Backdrops
 */

/* ==========================================================================
   Stage Architecture
   ========================================================================== */
.theatre-stage {
    position: relative;
    width: 100%;
    height: 380px;
    background: #111;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), inset 0 0 80px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Stage Lighting & Footlights */
.stage-footlights {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, rgba(255, 215, 0, 0.25), transparent);
    pointer-events: none;
    z-index: 12;
}

.stage-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, #593318, #361f0e);
    border-top: 4px solid #7d4822;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Wooden planks pattern */
.stage-floor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 60px,
        rgba(0, 0, 0, 0.25) 60px,
        rgba(0, 0, 0, 0.25) 62px
    );
    opacity: 0.7;
}

/* ==========================================================================
   Backdrops & Stage Scenery
   ========================================================================== */
.stage-scenery {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.stage-scenery svg {
    width: 100%;
    height: 100%;
    display: block;
}

.theatre-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: all 0.6s ease;
    z-index: 1;
}

/* 1. Theatre Velvet */
.theatre-stage.bd-theatre::before {
    background: radial-gradient(circle at 50% 35%, #7a1523 0%, #3d070f 65%, #180004 100%);
}

/* 2. Enchanted Woods */
.theatre-stage.bd-woods::before {
    background: radial-gradient(circle at 50% 25%, #1d3557 0%, #0b1a2a 70%, #03080e 100%);
    background-image: 
        radial-gradient(circle at 20% 40%, rgba(82, 183, 136, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(244, 162, 97, 0.2) 0%, transparent 50%),
        linear-gradient(to bottom, #0d1b2a 0%, #1b4332 75%, #081c15 100%);
}

/* 3. Classroom */
.theatre-stage.bd-classroom::before {
    background: 
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        linear-gradient(to bottom, #1e3d2f 0%, #152b21 80%, #0b1712 100%);
}

/* 4. Castle */
.theatre-stage.bd-castle::before {
    background: 
        radial-gradient(circle at 25% 40%, rgba(255, 140, 0, 0.3) 0%, transparent 45%),
        radial-gradient(circle at 75% 40%, rgba(255, 140, 0, 0.3) 0%, transparent 45%),
        linear-gradient(to bottom, #2b2d42 0%, #1a1a24 70%, #0d0d12 100%);
}

/* 5. Party */
.theatre-stage.bd-party::before {
    background: 
        radial-gradient(circle at 50% 30%, #7209b7 0%, #3a0ca3 50%, #10002b 100%);
}

/* 6. Home Living Room (Cozy Family Room) */
.theatre-stage.bd-livingroom::before {
    background-color: #dda15e;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 235, 175, 0.6) 0%, transparent 48%),
        radial-gradient(circle at 80% 35%, rgba(254, 250, 224, 0.35) 0%, transparent 42%),
        repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(188, 108, 37, 0.08) 38px, rgba(188, 108, 37, 0.08) 40px),
        linear-gradient(to bottom, #d4a373 0%, #bc6c25 65%, #603813 100%);
}

/* 7. Cozy Kitchen */
.theatre-stage.bd-kitchen::before {
    background-color: #cad2c5;
    background-image: 
        radial-gradient(circle at 80% 25%, rgba(255, 243, 176, 0.5) 0%, transparent 45%),
        repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(0, 0, 0, 0.06) 22px, rgba(0, 0, 0, 0.06) 24px),
        repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(0, 0, 0, 0.05) 48px, rgba(0, 0, 0, 0.05) 50px),
        linear-gradient(to bottom, #84a98c 0%, #52796f 40%, #354f52 100%);
}

/* 8. Sunny Outdoor Park / Meadow */
.theatre-stage.bd-park::before {
    background: 
        radial-gradient(circle at 22% 22%, #fff3b0 0%, #ffe66d 14%, rgba(255, 230, 109, 0.2) 28%, transparent 45%),
        radial-gradient(ellipse at 30% 95%, #52b788 0%, #2d6a4f 55%, transparent 75%),
        radial-gradient(ellipse at 80% 95%, #74c69d 0%, #40916c 55%, transparent 75%),
        linear-gradient(to bottom, #0077b6 0%, #0096c7 35%, #48cae4 70%, #90e0ef 100%);
}

/* 9. Starry Night Sky / Dreamland */
.theatre-stage.bd-nightsky::before {
    background-color: #03045e;
    background-image: 
        radial-gradient(circle at 78% 22%, #ffeaa7 0%, rgba(255, 234, 167, 0.3) 15%, transparent 35%),
        radial-gradient(circle at 25% 40%, rgba(131, 56, 236, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 60% 65%, rgba(67, 97, 238, 0.3) 0%, transparent 50%),
        radial-gradient(2px 2px at 30px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 100px 90px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 160px 45px, #ffeaa7, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 230px 115px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 290px 55px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 320px 135px, #ffeaa7, rgba(0,0,0,0)),
        linear-gradient(to bottom, #03045e 0%, #0d1b2a 50%, #1b263b 85%, #08111e 100%);
}

/* 10. TV Studio / Newsroom */
.theatre-stage.bd-studio::before {
    background: 
        radial-gradient(circle at 50% 25%, rgba(0, 180, 216, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 15% 45%, rgba(247, 37, 133, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 85% 45%, rgba(76, 201, 240, 0.25) 0%, transparent 45%),
        repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(255, 255, 255, 0.04) 30px, rgba(255, 255, 255, 0.04) 32px),
        linear-gradient(135deg, #03045e 0%, #023e8a 45%, #0077b6 100%);
}

/* 11. Tropical Beach & Sunset */
.theatre-stage.bd-beach::before {
    background: 
        radial-gradient(circle at 50% 40%, #ffbe0b 0%, #fb5607 25%, #ff006e 55%, transparent 75%),
        radial-gradient(ellipse at 50% 90%, #e9c46a 0%, #d4a373 50%, transparent 75%),
        linear-gradient(to bottom, #3a0ca3 0%, #7209b7 30%, #f72585 65%, #ffb703 100%);
}

/* ==========================================================================
   Puppet Characters on Stage
   ========================================================================== */
.puppets-container {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.puppet-actor {
    position: relative;
    width: 48%;
    max-width: 240px;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    transform-origin: bottom center;
}

.puppet-actor.actor-left {
    transform: translateY(15px);
}

.puppet-actor.actor-right {
    transform: translateY(15px);
}

/* Active Speaker Emphasis */
.puppet-actor.is-speaking {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 0 25px rgba(255, 230, 110, 0.45));
    z-index: 8;
}

.puppet-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ==========================================================================
   SVG Transform Origins & Rig Coordinate Fixes
   ========================================================================== */
.puppet-head,
.puppet-ear,
.puppet-eyebrow,
.puppet-eye,
.pupil-group,
.eyelid,
.puppet-mouth-group,
.mouth-interior,
.mouth-closed-line,
.puppet-jaw,
.mouth-tongue,
.monster-tuft-l,
.monster-tuft-r,
.owl-tuft-l,
.owl-tuft-r,
.robot-antenna {
    transform-box: fill-box;
}

/* Head rotates from neck */
.puppet-head {
    transform-origin: 50% 85%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mouth Interior scales DOWNWARDS from top center of the mouth opening */
.mouth-interior {
    transform-origin: 50% 0%;
    transition: transform 0.06s ease-out, opacity 0.06s ease-out;
}

/* Closed Mouth Line transforms from its center */
.mouth-closed-line {
    transform-origin: 50% 50%;
    transition: opacity 0.08s ease-out, transform 0.2s ease-out;
}

/* Lower Jaw drops down from its top attachment */
.puppet-jaw {
    transform-origin: 50% 0%;
    transition: transform 0.06s ease-out;
}

/* Tongue inside mouth */
.mouth-tongue {
    transform-origin: 50% 50%;
    transition: transform 0.06s ease-out;
}

/* Eyebrows pivot from their natural anchor */
.eyebrow-left {
    transform-origin: 80% 50%;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eyebrow-right {
    transform-origin: 20% 50%;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pupils */
.pupil-group {
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
}

/* Eyelids blink down from top of eye */
.eyelid {
    transform-origin: 50% 0%;
    transition: transform 0.1s ease-out;
}

/* ==========================================================================
   Puppet Arms & Limb Rigging
   ========================================================================== */
.puppet-arm {
    transform-box: fill-box;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.arm-left {
    transform-origin: 80% 10%;
}

.arm-right {
    transform-origin: 20% 10%;
}

/* Static & Active Arm Poses (Accurately Calibrated to Standard Puppet Skeleton) */
.arm-pose-rest .arm-left,
.arm-pose-rest .arm-right {
    transform: rotate(0deg) translate(0, 0);
}

/* 1. Wave Right Hand (Natural friendly wave beside chin & cheek) */
.arm-pose-wave .arm-right {
    animation: armWaveRight 0.75s ease-in-out infinite alternate;
}
.arm-pose-wave .arm-left {
    transform: rotate(0deg);
}

/* 2. Wave Both Hands */
.arm-pose-wave_both .arm-left {
    animation: armWaveLeft 0.75s ease-in-out infinite alternate;
}
.arm-pose-wave_both .arm-right {
    animation: armWaveRight 0.75s ease-in-out infinite alternate;
}

/* 3. Cheer / Celebration \o/ (Both arms high in the sky) */
.arm-pose-cheer .arm-left {
    animation: armCheerLeft 0.65s ease-in-out infinite alternate;
}
.arm-pose-cheer .arm-right {
    animation: armCheerRight 0.65s ease-in-out infinite alternate;
}

/* 4. Gasp / Hands to Cheeks (Shocked / Surprised / Scared) - Lands squarely on cheeks */
.arm-pose-gasp .arm-left {
    transform: translate(12px, -28px) rotate(145deg);
}
.arm-pose-gasp .arm-right {
    transform: translate(-12px, -28px) rotate(-145deg);
}

/* 5. Facepalm / Wiping Tears (Crying / Despair) - Hand covers eye */
.arm-pose-facepalm .arm-left {
    transform: translate(10px, -12px) rotate(-30deg);
}
.arm-pose-facepalm .arm-right {
    transform: translate(-10px, -45px) rotate(155deg);
}

/* 6. Point Forward / Outward */
.arm-pose-point .arm-right {
    transform: translate(12px, -12px) rotate(-75deg);
}
.arm-pose-point .arm-left {
    transform: rotate(0deg);
}

/* 7. Shrug "I Don't Know" (Arms out wide with hands raised) */
.arm-pose-shrug .arm-left {
    transform: translate(-8px, -12px) rotate(45deg);
}
.arm-pose-shrug .arm-right {
    transform: translate(8px, -12px) rotate(-45deg);
}

/* 8. Clap Hands (Both hands meet and rapidly slap in center of chest) */
.arm-pose-clap .arm-left {
    animation: armClapLeft 0.35s ease-in-out infinite alternate;
}
.arm-pose-clap .arm-right {
    animation: armClapRight 0.35s ease-in-out infinite alternate;
}

/* 9. Thinking / Chin Tap (Hand touches chin) */
.arm-pose-thinking .arm-left {
    transform: translate(10px, -10px) rotate(-35deg);
}
.arm-pose-thinking .arm-right {
    transform: translate(-15px, -22px) rotate(130deg);
}

/* 10. Cross Arms (Forearms folded tightly across chest) */
.arm-pose-cross .arm-left {
    transform: translate(22px, -14px) rotate(-55deg);
}
.arm-pose-cross .arm-right {
    transform: translate(-22px, -14px) rotate(55deg);
}

/* 11. Dance Sway with Arms (Alternating rhythmic swing) */
.arm-pose-dance .arm-left {
    animation: armDanceLeft 0.8s ease-in-out infinite alternate;
}
.arm-pose-dance .arm-right {
    animation: armDanceRight 0.8s ease-in-out infinite alternate;
}

/* Arm Keyframe Animations - Clean Rotations with Anchored Shoulders */
@keyframes armWaveRight {
    0% { transform: translate(0px, -4px) rotate(-95deg); }
    100% { transform: translate(-2px, -8px) rotate(-120deg); }
}

@keyframes armWaveLeft {
    0% { transform: translate(0px, -4px) rotate(95deg); }
    100% { transform: translate(2px, -8px) rotate(120deg); }
}

@keyframes armCheerLeft {
    0% { transform: translate(0px, -8px) rotate(140deg); }
    100% { transform: translate(0px, -14px) rotate(155deg); }
}

@keyframes armCheerRight {
    0% { transform: translate(0px, -8px) rotate(-140deg); }
    100% { transform: translate(0px, -14px) rotate(-155deg); }
}

@keyframes armClapLeft {
    0% { transform: translate(25px, -25px) rotate(-50deg); }
    100% { transform: translate(35px, -25px) rotate(-65deg); }
}

@keyframes armClapRight {
    0% { transform: translate(-25px, -25px) rotate(50deg); }
    100% { transform: translate(-35px, -25px) rotate(65deg); }
}

@keyframes armDanceLeft {
    0% { transform: translate(-5px, -10px) rotate(-35deg); }
    100% { transform: translate(10px, -20px) rotate(55deg); }
}

@keyframes armDanceRight {
    0% { transform: translate(10px, -20px) rotate(-55deg); }
    100% { transform: translate(-5px, -10px) rotate(35deg); }
}

/* ==========================================================================
   Emote Visual FX Overlays
   ========================================================================== */
.puppet-fx {
    pointer-events: none;
    transform-box: fill-box;
}

.fx-item {
    transition: opacity 0.25s ease;
}

.fx-tears .tear-l {
    animation: tearFall 0.75s infinite linear;
}
.fx-tears .tear-r {
    animation: tearFall 0.75s infinite linear 0.22s;
}

@keyframes tearFall {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(28px); opacity: 0; }
}

.fx-anger {
    animation: angerPulse 0.5s infinite alternate ease-in-out;
}
@keyframes angerPulse {
    0% { transform: scale(0.9) rotate(0deg); }
    100% { transform: scale(1.18) rotate(12deg); }
}

.fx-hearts .heart-1 {
    animation: floatHeart 1.3s infinite ease-in-out;
}
.fx-hearts .heart-2 {
    animation: floatHeart 1.5s infinite ease-in-out 0.35s;
}
@keyframes floatHeart {
    0% { transform: translateY(0) scale(0.9); opacity: 0.6; }
    50% { transform: translateY(-14px) scale(1.15); opacity: 1; }
    100% { transform: translateY(-24px) scale(0.95); opacity: 0.7; }
}

.fx-music text {
    animation: floatNote 1.4s infinite ease-in-out;
}
@keyframes floatNote {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-12px) rotate(10deg); }
}

.fx-sweat {
    animation: sweatJiggle 0.85s infinite ease-in-out;
}
@keyframes sweatJiggle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.fx-sleep text {
    animation: sleepFloat 1.8s infinite ease-out;
}
@keyframes sleepFloat {
    0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
    30% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(14px, -24px) scale(1.25); opacity: 0; }
}

/* ==========================================================================
   Puppet Animation Gestures
   ========================================================================== */
@keyframes puppetBounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-24px) scaleY(1.05); }
    50% { transform: translateY(0) scaleY(0.95); }
    75% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes puppetNod {
    0% { transform: rotate(0deg); }
    25% { transform: translateY(8px) rotate(6deg); }
    50% { transform: translateY(-4px) rotate(-2deg); }
    75% { transform: translateY(6px) rotate(4deg); }
    100% { transform: rotate(0deg); }
}

@keyframes puppetShake {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-10deg) translateX(-6px); }
    40% { transform: rotate(10deg) translateX(6px); }
    60% { transform: rotate(-8deg) translateX(-4px); }
    80% { transform: rotate(6deg) translateX(3px); }
    100% { transform: rotate(0deg); }
}

@keyframes puppetTilt {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(-12deg) translateY(-4px); }
    70% { transform: rotate(-12deg) translateY(-4px); }
    100% { transform: rotate(0deg); }
}

@keyframes puppetShiver {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-3px, 2px) rotate(-2deg); }
    30% { transform: translate(3px, -2px) rotate(2deg); }
    45% { transform: translate(-2px, -2px) rotate(-1deg); }
    60% { transform: translate(2px, 2px) rotate(1deg); }
    75% { transform: translate(-2px, 1px); }
}

@keyframes puppetZoom {
    0% { transform: scale(1); }
    40% { transform: scale(1.12) translateY(-14px); }
    80% { transform: scale(1.1) translateY(-10px); }
    100% { transform: scale(1); }
}

@keyframes puppetDoubleNod {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    20% { transform: rotate(8deg) translateY(10px); }
    40% { transform: rotate(-2deg) translateY(-2px); }
    65% { transform: rotate(8deg) translateY(10px); }
    85% { transform: rotate(-1deg) translateY(-1px); }
}

@keyframes puppetLookAround {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-16deg) translateX(-10px); }
    45% { transform: rotate(-16deg) translateX(-10px); }
    65% { transform: rotate(16deg) translateX(10px); }
    85% { transform: rotate(16deg) translateX(10px); }
}

@keyframes puppetBow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40% { transform: translateY(22px) rotate(14deg) scaleY(0.92); }
    70% { transform: translateY(22px) rotate(14deg) scaleY(0.92); }
}

/* Human Puppet Specific Enhancements */
.puppet-human .puppet-head {
    transform-origin: 50% 88%;
}
.puppet-human .arm-left {
    transform-origin: 88% 12%;
}
.puppet-human .arm-right {
    transform-origin: 12% 12%;
}

@keyframes puppetDance {
    0%, 100% { transform: rotate(0deg) translateY(0) scaleY(1); }
    15% { transform: rotate(-14deg) translateY(-14px) scaleY(1.05); }
    30% { transform: rotate(14deg) translateY(-4px) scaleY(0.96); }
    45% { transform: rotate(-16deg) translateY(-16px) scaleY(1.06); }
    60% { transform: rotate(16deg) translateY(-4px) scaleY(0.96); }
    75% { transform: rotate(-12deg) translateY(-14px) scaleY(1.05); }
    90% { transform: rotate(8deg) translateY(-6px) scaleY(1); }
}

@keyframes puppetPop {
    0% { transform: scale(0.8) translateY(30px); opacity: 0.6; }
    50% { transform: scale(1.15) translateY(-22px); opacity: 1; }
    75% { transform: scale(0.96) translateY(2px); }
    100% { transform: scale(1) translateY(0); }
}

.gesture-bounce { animation: puppetBounce 0.7s cubic-bezier(0.28, 0.84, 0.42, 1); }
.gesture-nod { animation: puppetNod 0.6s ease; }
.gesture-doublenod { animation: puppetDoubleNod 0.9s ease; }
.gesture-shake { animation: puppetShake 0.7s ease; }
.gesture-tilt { animation: puppetTilt 1.0s ease; }
.gesture-shiver { animation: puppetShiver 0.8s infinite; }
.gesture-zoom { animation: puppetZoom 0.9s ease; }
.gesture-lookaround { animation: puppetLookAround 1.2s ease; }
.gesture-bow { animation: puppetBow 1.1s ease; }
.gesture-dance { animation: puppetDance 1.2s ease-in-out; }
.gesture-pop { animation: puppetPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ==========================================================================
   Speech Bubbles
   ========================================================================== */
.stage-speech-bubble {
    position: absolute;
    bottom: 74%;
    max-width: 320px;
    min-width: 120px;
    padding: 10px 18px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage-speech-bubble.pos-left {
    left: 25px;
}

.stage-speech-bubble.pos-right {
    right: 25px;
}

/* Bubble Tail */
.stage-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -12px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #ffffff;
}

.stage-speech-bubble.pos-left::after {
    left: 45px;
}

.stage-speech-bubble.pos-right::after {
    right: 45px;
}

/* ==========================================================================
   Stage Curtains
   ========================================================================== */
.stage-curtains {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

/* Top Valance */
.curtain-valance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: repeating-linear-gradient(
        90deg,
        #8b0000 0px,
        #b22222 25px,
        #590000 50px
    );
    border-bottom: 5px solid #d4af37;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
    border-radius: 0 0 20px 20px;
    z-index: 25;
}

/* Left & Right Velvet Drapes */
.curtain-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    background: repeating-linear-gradient(
        90deg,
        #800000 0px,
        #b22222 30px,
        #500000 60px
    );
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.85);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.curtain-left {
    left: 0;
    border-right: 4px solid #d4af37;
    transform-origin: left top;
}

.curtain-right {
    right: 0;
    border-left: 4px solid #d4af37;
    transform-origin: right top;
}

/* Open Curtains */
.theatre-stage.curtains-open .curtain-left {
    transform: translateX(-88%) skewX(-4deg);
}

.theatre-stage.curtains-open .curtain-right {
    transform: translateX(88%) skewX(4deg);
}

/* Closed Curtains */
.theatre-stage.curtains-closed .curtain-left {
    transform: translateX(0);
}

.theatre-stage.curtains-closed .curtain-right {
    transform: translateX(0);
}

/* Curtains Hidden Mode */
.theatre-stage.curtains-hidden .stage-curtains {
    display: none !important;
}

/* ==========================================================================
   Framing Modes (Duo, Auto-Speaker Focus, Solo Left, Solo Right)
   ========================================================================== */
.theatre-stage.frame-solo-left .puppets-container,
.theatre-stage.frame-speaker-left .puppets-container {
    justify-content: center !important;
}

.theatre-stage.frame-solo-left .actor-right,
.theatre-stage.frame-speaker-left .actor-right {
    display: none !important;
}

.theatre-stage.frame-solo-left .actor-left,
.theatre-stage.frame-speaker-left .actor-left {
    width: 60%;
    max-width: 320px;
    margin: 0 auto;
    transform: translateY(15px) scale(1.15);
}

.theatre-stage.frame-solo-left .actor-left.is-speaking,
.theatre-stage.frame-speaker-left .actor-left.is-speaking {
    transform: translateY(-5px) scale(1.22);
}

.theatre-stage.frame-solo-right .puppets-container,
.theatre-stage.frame-speaker-right .puppets-container {
    justify-content: center !important;
}

.theatre-stage.frame-solo-right .actor-left,
.theatre-stage.frame-speaker-right .actor-left {
    display: none !important;
}

.theatre-stage.frame-solo-right .actor-right,
.theatre-stage.frame-speaker-right .actor-right {
    width: 60%;
    max-width: 320px;
    margin: 0 auto;
    transform: translateY(15px) scale(1.15);
}

.theatre-stage.frame-solo-right .actor-right.is-speaking,
.theatre-stage.frame-speaker-right .actor-right.is-speaking {
    transform: translateY(-5px) scale(1.22);
}

/* Center Speech Bubble in Single-Speaker Framing */
.theatre-stage.frame-solo-left .stage-speech-bubble,
.theatre-stage.frame-solo-right .stage-speech-bubble,
.theatre-stage.frame-speaker-left .stage-speech-bubble,
.theatre-stage.frame-speaker-right .stage-speech-bubble {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

.theatre-stage.frame-solo-left .stage-speech-bubble::after,
.theatre-stage.frame-solo-right .stage-speech-bubble::after,
.theatre-stage.frame-speaker-left .stage-speech-bubble::after,
.theatre-stage.frame-speaker-right .stage-speech-bubble::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* ==========================================================================
   YouTube Video Recording & Export Modes (Landscape 16:9 & Portrait 9:16 Shorts)
   ========================================================================== */

/* Fullscreen Recording & Preview States */
body.recording-mode,
body.recording-preview-mode {
    overflow: hidden !important;
    background: #000000 !important;
}

body.recording-mode .site-header,
body.recording-mode .studio-intro,
body.recording-mode .studio-workspace-column,
body.recording-mode .stage-toolbar,
body.recording-mode .stage-settings-bar,
body.recording-mode .performance-bar,
body.recording-preview-mode .site-header,
body.recording-preview-mode .studio-intro,
body.recording-preview-mode .studio-workspace-column,
body.recording-preview-mode .stage-toolbar,
body.recording-preview-mode .stage-settings-bar,
body.recording-preview-mode .performance-bar {
    display: none !important;
}

body.recording-mode .studio-layout,
body.recording-preview-mode .studio-layout {
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    transform: none !important;
}

body.recording-mode .studio-stage-column,
body.recording-preview-mode .studio-stage-column {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    background: #000000 !important;
}

body.recording-mode .stage-section,
body.recording-preview-mode .stage-section {
    position: static !important;
    inset: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000000 !important;
    transform: none !important;
}

/* 1. Portrait Format (9:16) - Optimized for YouTube Shorts, Reels, TikTok */
body.rec-format-portrait #stage-theatre {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    height: 100vh !important;
    width: 56.25vh !important; /* 9 / 16 = 0.5625 */
    max-width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99990 !important;
}

body.rec-format-portrait .puppets-container {
    padding: 0 5% !important;
    bottom: 20px !important;
    height: 75% !important;
}

body.rec-format-portrait .puppet-actor {
    width: 48% !important;
    max-width: none !important;
    height: 75% !important;
    transform: translateY(10px) scale(1.15) !important;
}

body.rec-format-portrait .puppet-actor.is-speaking {
    transform: translateY(-8px) scale(1.25) !important;
}

body.rec-format-portrait .theatre-stage.frame-solo-left .actor-left,
body.rec-format-portrait .theatre-stage.frame-speaker-left .actor-left,
body.rec-format-portrait .theatre-stage.frame-solo-right .actor-right,
body.rec-format-portrait .theatre-stage.frame-speaker-right .actor-right {
    width: 68% !important;
    height: 80% !important;
    transform: translateY(5px) scale(1.28) !important;
}

body.rec-format-portrait .theatre-stage.frame-solo-left .actor-left.is-speaking,
body.rec-format-portrait .theatre-stage.frame-speaker-left .actor-left.is-speaking,
body.rec-format-portrait .theatre-stage.frame-solo-right .actor-right.is-speaking,
body.rec-format-portrait .theatre-stage.frame-speaker-right .actor-right.is-speaking {
    transform: translateY(-10px) scale(1.36) !important;
}

body.rec-format-portrait .stage-speech-bubble {
    bottom: 66% !important;
    max-width: 86% !important;
    font-size: 1.15rem !important;
    padding: 12px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

body.rec-format-portrait .curtain-valance {
    height: 52px !important;
}

body.rec-format-portrait .stage-floor {
    height: 85px !important;
}

/* 2. Landscape Format (16:9) - Standard Full HD YouTube Video */
body.rec-format-landscape #stage-theatre {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    width: 100vw !important;
    height: 56.25vw !important; /* 9 / 16 = 0.5625 */
    max-height: 100vh !important;
    max-width: 177.78vh !important; /* 16 / 9 = 1.7778 */
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99990 !important;
}

body.rec-format-landscape .puppets-container {
    padding: 0 10% !important;
    height: 80% !important;
}

body.rec-format-landscape .puppet-actor {
    width: 42% !important;
    max-width: 360px !important;
    height: 85% !important;
}

body.rec-format-landscape .stage-speech-bubble {
    bottom: 72% !important;
    font-size: 1.15rem !important;
    max-width: 420px !important;
}

/* 3. Square Format (1:1) - Social Media Feed */
body.rec-format-square #stage-theatre {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    width: min(100vw, 100vh) !important;
    height: min(100vw, 100vh) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99990 !important;
}

body.rec-format-square .puppets-container {
    padding: 0 6% !important;
    height: 75% !important;
}

body.rec-format-square .puppet-actor {
    width: 46% !important;
    height: 78% !important;
}

body.rec-format-square .stage-speech-bubble {
    bottom: 70% !important;
    max-width: 80% !important;
}

/* Floating Recording HUD */
.recording-hud {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    background: rgba(18, 26, 26, 0.92);
    border: 1px solid rgba(228, 183, 108, 0.4);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(228, 183, 108, 0.15);
    backdrop-filter: blur(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rec-status-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rec-dot {
    width: 12px;
    height: 12px;
    background: #e63946;
    border-radius: 50%;
    box-shadow: 0 0 10px #e63946;
    animation: recPulse 1.2s infinite ease-in-out;
}

@keyframes recPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

.rec-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ff6b6b;
}

.rec-format-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #e4b76c);
    padding: 3px 10px;
    background: rgba(228, 183, 108, 0.12);
    border-radius: 999px;
    border: 1px solid rgba(228, 183, 108, 0.25);
}

.rec-timer {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    min-width: 44px;
    text-align: center;
}

.rec-actions {
    display: flex;
    gap: 8px;
}

/* In Portrait Mode: place HUD in the right margin so it never overlaps the stage */
body.rec-format-portrait .recording-hud {
    left: auto !important;
    right: 24px !important;
    top: 20px !important;
    transform: none !important;
}

/* Faded state during active recording so toolbar NEVER shows in video */
.recording-hud.hud-faded {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
}

body.rec-format-portrait .recording-hud.hud-faded {
    transform: translateX(12px) !important;
}

/* Video Export Modal Styles */
.modal.open {
    display: flex !important;
    z-index: 100000 !important;
}

.export-format-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 680px) {
    .export-format-grid {
        grid-template-columns: 1fr;
    }
}

.format-card {
    position: relative;
    border: 2px solid var(--border-color, #3c4a48);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.format-card:hover {
    border-color: rgba(228, 183, 108, 0.6);
    background: rgba(228, 183, 108, 0.05);
}

.format-card.selected {
    border-color: var(--primary, #e4b76c);
    background: rgba(228, 183, 108, 0.12);
    box-shadow: 0 0 16px rgba(228, 183, 108, 0.2);
}

.format-card-icon {
    font-size: 28px;
    line-height: 1;
}

.format-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main, #f3eee4);
}

.format-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary, #e4b76c);
    padding: 2px 8px;
    border-radius: 999px;
}

.format-card-dims {
    font-size: 11px;
    color: var(--text-muted, #b0bcb6);
    font-family: monospace;
}

/* Transcode Progress Modal */
.transcode-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    backdrop-filter: blur(8px);
}

.transcode-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(228, 183, 108, 0.2);
    border-top-color: var(--primary, #e4b76c);
    border-radius: 50%;
    animation: spinSpinner 0.9s linear infinite;
}

@keyframes spinSpinner {
    to { transform: rotate(360deg); }
}