/* =====================================================
   double-standard.xyz - Candy Carnival
   ===================================================== */

:root {
    --candy-pink: #FF69B4;
    --candy-yellow: #FFE135;
    --candy-sky: #87CEEB;
    --candy-grape: #9B59B6;
    --candy-mint: #F0FFF0;
    --candy-orange: #FF6F3C;
    --candy-cream: #FFF8F0;
    --candy-soft-pink: #FFB6E1;
    --candy-parchment: #FFF8E7;
    --candy-dark: #2D2235;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--candy-mint);
    color: var(--candy-dark);
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* =====================================================
   Confetti drifting layer (background)
   ===================================================== */
.confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.confetti-bit {
    position: absolute;
    width: var(--size, 12px);
    height: var(--size, 12px);
    background: var(--c, var(--candy-pink));
    opacity: var(--op, 0.32);
    top: var(--y, 50%);
    left: var(--x, 50%);
    animation: drift var(--dur, 24s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.confetti-bit.shape-circle { border-radius: 50%; }
.confetti-bit.shape-square { border-radius: 3px; transform: rotate(15deg); }
.confetti-bit.shape-triangle {
    width: 0;
    height: 0;
    background: transparent;
    border-left: calc(var(--size, 12px) / 2) solid transparent;
    border-right: calc(var(--size, 12px) / 2) solid transparent;
    border-bottom: var(--size, 12px) solid var(--c, var(--candy-yellow));
}
.confetti-bit.shape-star {
    background: var(--c, var(--candy-grape));
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.confetti-bit.shape-squiggle {
    background: transparent;
    border-bottom: 3px solid var(--c, var(--candy-orange));
    border-radius: 50%;
    height: calc(var(--size, 12px) / 2);
}

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(20px, -30px) rotate(90deg); }
    50%  { transform: translate(-20px, -60px) rotate(180deg); }
    75%  { transform: translate(15px, -90px) rotate(270deg); }
    100% { transform: translate(0, -120px) rotate(360deg); }
}

/* =====================================================
   Compass
   ===================================================== */
.compass {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    filter: drop-shadow(2px 4px 0 rgba(45, 34, 53, 0.18));
    transition: transform 0.6s var(--spring);
}
.compass:hover { transform: rotate(-12deg) scale(1.04); }

#compass-progress {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.25s var(--soft);
}

/* =====================================================
   Burst (milestone confetti)
   ===================================================== */
.burst-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
}
.burst-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--bc, var(--candy-pink));
    border-radius: 2px;
    transform: translate(-50%, -50%);
    animation: burst 1.6s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
.burst-piece.shape-circle { border-radius: 50%; }
.burst-piece.shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes burst {
    0% {
        transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 200px))) scale(0.6) rotate(var(--br, 720deg));
        opacity: 0;
    }
}

/* =====================================================
   Booth shell
   ===================================================== */
.booth {
    position: relative;
    width: 100%;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 60px) clamp(120px, 16vh, 180px);
    z-index: 2;
}

.booth + .booth {
    margin-top: -1px;
}

.booth-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    z-index: 4;
}

.booth-eyebrow {
    display: inline-block;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.15rem;
    color: var(--candy-grape);
    background: var(--candy-yellow);
    padding: 4px 14px;
    border: 3px solid var(--candy-dark);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-2deg);
    margin-bottom: 18px;
}

.booth-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--candy-dark);
    max-width: 14ch;
    margin-bottom: 18px;
}

.booth-description {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.45;
    max-width: 38em;
    color: var(--candy-dark);
    margin-bottom: 40px;
}

.wave-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 3;
    pointer-events: none;
}
.wave-bottom { bottom: -1px; }

/* =====================================================
   1. Entrance Arch
   ===================================================== */
.booth-entrance {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.4), transparent 40%),
        linear-gradient(180deg, var(--candy-soft-pink) 0%, var(--candy-sky) 100%);
    min-height: 100vh;
    padding-top: clamp(40px, 8vh, 80px);
    padding-bottom: clamp(160px, 20vh, 240px);
    overflow: hidden;
}

.entrance-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entrance-arch {
    width: min(720px, 95%);
    margin: 0 auto 6px;
    filter: drop-shadow(4px 6px 0 rgba(45, 34, 53, 0.18));
    animation: arch-sway 8s ease-in-out infinite;
}
@keyframes arch-sway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
}

.mascot-pair {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -40px 0 -20px;
    max-width: 760px;
    pointer-events: none;
}
.mascot-wrapper {
    filter: drop-shadow(3px 5px 0 rgba(45, 34, 53, 0.18));
}
.mascot-wrapper-left  { animation: bob-a 3.6s ease-in-out infinite; }
.mascot-wrapper-right { animation: bob-b 3.4s ease-in-out infinite; }
@keyframes bob-a {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes bob-b {
    0%, 100% { transform: translateY(-6px) rotate(2deg); }
    50%      { transform: translateY(4px) rotate(-2deg); }
}

.hero-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--candy-dark);
    margin: 8px 0 8px;
    text-shadow: 4px 4px 0 var(--candy-yellow), 8px 8px 0 var(--candy-pink);
}
.hero-dot {
    color: var(--candy-orange);
}

.bounce-letter {
    display: inline-block;
    transform: translateY(-30px) rotate(-8deg);
    opacity: 0;
    animation: letter-pop 0.6s var(--spring) forwards;
    animation-delay: var(--ld, 0s);
}
@keyframes letter-pop {
    0%   { transform: translateY(-30px) rotate(-8deg); opacity: 0; }
    60%  { transform: translateY(6px)   rotate(2deg);  opacity: 1; }
    100% { transform: translateY(0)     rotate(0);     opacity: 1; }
}

.hero-subtitle {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    color: var(--candy-dark);
    max-width: 40ch;
    margin: 14px auto 28px;
}

.scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 20px;
    background: var(--candy-cream);
    border: 3px solid var(--candy-dark);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
    color: var(--candy-dark);
    animation: hint-bob 1.6s ease-in-out infinite;
}
.scroll-hint svg { animation: arrow-pulse 1.6s ease-in-out infinite; }
@keyframes hint-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@keyframes arrow-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* clouds */
.cloud {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(3px 4px 0 rgba(45, 34, 53, 0.12));
    pointer-events: none;
}
.cloud-a { top: 8%;  left: 6%;  animation: cloud-float 14s ease-in-out infinite; }
.cloud-b { top: 18%; right: 5%; animation: cloud-float 18s ease-in-out infinite reverse; }
.cloud-c { top: 38%; left: 12%; animation: cloud-float 22s ease-in-out infinite; }
@keyframes cloud-float {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(20px); }
}

/* =====================================================
   2. Mirror Booth
   ===================================================== */
.booth-mirror {
    background: var(--candy-cream);
    padding-bottom: clamp(150px, 18vh, 220px);
    overflow: hidden;
}
.booth-mirror::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 30%, var(--candy-soft-pink) 0%, transparent 30%),
        radial-gradient(circle at 88% 70%, var(--candy-sky) 0%, transparent 32%);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.mirror-inner {
    text-align: left;
    margin-left: clamp(0px, 5vw, 80px);
}

.watermark {
    position: absolute;
    z-index: 1;
    opacity: 0.06;
    pointer-events: none;
}
.watermark-scale {
    bottom: 8%;
    right: 4%;
    transform: rotate(-12deg);
}

.mirror-split {
    position: absolute;
    inset: 220px 0 60px 0;
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: center;
    opacity: 0.55;
}
.zigzag-split {
    width: 60px;
    height: 100%;
}

.mirror-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px) clamp(20px, 6vw, 80px);
    align-items: start;
    margin-top: 30px;
    position: relative;
    z-index: 3;
}

.postcard {
    position: relative;
    background: var(--candy-cream);
    border: 4px solid var(--candy-dark);
    padding: 26px 28px 24px;
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--candy-dark);
    transform: rotate(var(--r, 0deg));
    --r: 0deg;
    transition: transform 0.4s var(--spring), box-shadow 0.3s var(--soft);
}
.postcard::before,
.postcard::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background-image: radial-gradient(circle at 7px 0, var(--candy-cream) 7px, transparent 8px);
    background-size: 14px 14px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.postcard::before { top: -14px; }
.postcard::after  { bottom: -14px; transform: rotate(180deg); }

.postcard-left  { background: var(--candy-cream); }
.postcard-right { background: var(--candy-yellow); }

.postcard:hover {
    animation: jiggle 0.4s ease-in-out;
    box-shadow: 8px 8px 0 var(--candy-dark);
}
@keyframes jiggle {
    0%   { transform: rotate(var(--r, 0deg)); }
    25%  { transform: rotate(calc(var(--r, 0deg) - 2deg)) translateY(-3px); }
    50%  { transform: rotate(calc(var(--r, 0deg) + 2deg)); }
    75%  { transform: rotate(calc(var(--r, 0deg) - 1deg)); }
    100% { transform: rotate(var(--r, 0deg)); }
}

.postcard-stamp {
    display: inline-block;
    font-family: 'Patrick Hand', cursive;
    font-size: 1rem;
    color: var(--candy-pink);
    background: var(--candy-dark);
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    transform: rotate(-3deg);
}
.postcard-right .postcard-stamp {
    color: var(--candy-orange);
    background: var(--candy-dark);
    transform: rotate(2deg);
}

.postcard-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: var(--candy-dark);
    margin-bottom: 8px;
    line-height: 1.15;
}
.postcard-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--candy-dark);
    margin-bottom: 14px;
}
.postcard-foot {
    display: inline-block;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--candy-grape);
}

/* alternate offset for organic flow */
.postcard-left  { transform: rotate(var(--r, -3deg)) translateX(-4%); }
.postcard-right { transform: rotate(var(--r, 3deg)) translateX(4%); }

/* =====================================================
   3. Scale of Justice
   ===================================================== */
.booth-scale {
    background: var(--candy-yellow);
    padding-bottom: clamp(160px, 20vh, 240px);
    overflow: hidden;
}
.booth-scale::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(45, 34, 53, 0.05) 18px 19px);
    pointer-events: none;
}

.scale-inner {
    text-align: center;
    margin-right: clamp(0px, 5vw, 80px);
}

.scale-stage {
    position: relative;
    margin: 24px auto 28px;
    max-width: 700px;
    background: var(--candy-cream);
    border: 4px solid var(--candy-dark);
    border-radius: 50% 60% 55% 45% / 50% 45% 60% 55%;
    padding: 24px 20px 14px;
    box-shadow: 8px 10px 0 rgba(45, 34, 53, 0.2);
}

#scale-beam {
    transform-origin: 300px 120px;
    transform: rotate(0deg);
    transition: transform 1.2s var(--spring);
}
.scale-tilt-them #scale-beam { transform: rotate(-9deg); }
.scale-tilt-us   #scale-beam { transform: rotate(9deg); }
.scale-wobble    #scale-beam { animation: wobble 2s ease-out; }

@keyframes wobble {
    0%   { transform: rotate(-12deg); }
    25%  { transform: rotate(8deg); }
    50%  { transform: rotate(-5deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(var(--final, 0deg)); }
}

.evidence-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}
.evidence-btn {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 12px 22px;
    background: var(--candy-cream);
    border: 3px solid var(--candy-dark);
    border-radius: 30px 60px 35px 50px / 60% 40% 55% 45%;
    color: var(--candy-dark);
    box-shadow: 4px 4px 0 var(--candy-dark);
    transition: transform 0.25s var(--spring), background 0.2s, box-shadow 0.2s;
}
.evidence-btn:hover {
    background: var(--candy-pink);
    color: var(--candy-cream);
    transform: translate(-2px, -2px) rotate(-2deg);
    box-shadow: 6px 6px 0 var(--candy-dark);
}
.evidence-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--candy-dark);
}
#evidence-them:hover { background: var(--candy-grape); }
#evidence-us:hover   { background: var(--candy-sky); color: var(--candy-dark); }
#evidence-reset:hover{ background: var(--candy-orange); }

/* =====================================================
   4. Rulebook
   ===================================================== */
.booth-rulebook {
    background: var(--candy-parchment);
    padding-bottom: clamp(160px, 18vh, 240px);
    overflow: hidden;
}
.booth-rulebook::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 105, 180, 0.08), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(45, 34, 53, 0.04) 26px 27px);
    pointer-events: none;
}

.rulebook-inner {
    text-align: left;
    margin-left: clamp(0px, 4vw, 60px);
}

.book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--candy-cream);
    border: 4px solid var(--candy-dark);
    border-radius: 8px 30px 30px 8px / 8px 50px 50px 8px;
    box-shadow: 10px 12px 0 rgba(45, 34, 53, 0.18);
    margin-top: 20px;
    overflow: hidden;
    position: relative;
}
.book-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--candy-dark);
    transform: translateX(-50%);
    z-index: 2;
}
.book-spine::before,
.book-spine::after {
    content: "";
    position: absolute;
    left: -3px;
    width: 10px;
    height: 14px;
    background: var(--candy-pink);
    border: 2px solid var(--candy-dark);
}
.book-spine::before { top: 28px; }
.book-spine::after  { bottom: 28px; background: var(--candy-sky); }

.book-page {
    padding: 32px clamp(20px, 3vw, 40px);
    position: relative;
}
.page-left  { background: var(--candy-cream); }
.page-right { background: var(--candy-parchment); }

.page-heading {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    color: var(--candy-dark);
    margin-bottom: 16px;
    border-bottom: 3px dotted var(--candy-grape);
    padding-bottom: 10px;
}

.rule-list {
    list-style: none;
    counter-reset: rule;
}
.rule-list li {
    counter-increment: rule;
    position: relative;
    padding: 10px 0 10px 38px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    border-bottom: 1px dotted rgba(45, 34, 53, 0.2);
}
.rule-list li:last-child { border-bottom: 0; }
.rule-list li::before {
    content: counter(rule);
    position: absolute;
    left: 0;
    top: 8px;
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--candy-dark);
    border-radius: 50%;
    background: var(--candy-yellow);
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    line-height: 22px;
    color: var(--candy-dark);
}

.rule-text { color: var(--candy-dark); }
.strike {
    position: relative;
    color: var(--candy-grape);
}
.strike::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 52%;
    height: 3px;
    background: var(--candy-pink);
    transform: rotate(-2deg);
    border-radius: 2px;
}
.rule-fix {
    display: block;
    margin-top: 4px;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.15rem;
    color: var(--candy-orange);
    transform: rotate(-1.5deg);
    padding-left: 10px;
}

.margin-doodle {
    position: absolute;
    right: 18px;
    bottom: 16px;
    font-size: 1.6rem;
    transform: rotate(8deg);
    opacity: 0.85;
}

.ruler {
    margin: 36px auto 0;
    max-width: 700px;
    filter: drop-shadow(3px 4px 0 rgba(45, 34, 53, 0.15));
}

/* =====================================================
   5. Excuse Booth
   ===================================================== */
.booth-excuse {
    background: var(--candy-sky);
    padding-bottom: clamp(160px, 18vh, 220px);
    overflow: hidden;
}
.booth-excuse::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 225, 53, 0.25), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(255, 105, 180, 0.2), transparent 40%);
    pointer-events: none;
}

.excuse-inner {
    text-align: left;
    margin-left: clamp(0px, 6vw, 80px);
}

.bubble-cluster {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px clamp(18px, 3vw, 40px);
    margin-top: 30px;
    max-width: 1100px;
}

.speech-bubble {
    position: relative;
    width: 100%;
    aspect-ratio: 240 / 160;
    background: transparent;
    padding: 22px 30px 50px;
    text-align: center;
    transform: rotate(var(--r, 0deg));
    transition: transform 0.3s var(--spring);
    filter: drop-shadow(4px 5px 0 rgba(45, 34, 53, 0.18));
}
.bubble-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.bubble-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    line-height: 1.15;
    color: var(--candy-dark);
    padding: 10px 20px 20px;
}
.bubble-text-light { color: var(--candy-cream); }

.speech-bubble:hover {
    animation: jiggle 0.4s ease-in-out;
}
.speech-bubble.popped {
    animation: pop 0.7s var(--spring);
}
@keyframes pop {
    0%   { transform: rotate(var(--r, 0deg)) scale(1); }
    40%  { transform: rotate(0deg) scale(1.18); }
    100% { transform: rotate(var(--r, 0deg)) scale(1); }
}

.bubble-a { grid-column: span 1; transform: rotate(-3deg) translateY(-10px); --r: -3deg; }
.bubble-b { transform: rotate(2deg) translateY(20px); --r: 2deg; }
.bubble-c { transform: rotate(-2deg); --r: -2deg; }
.bubble-d { transform: rotate(3deg) translateY(-14px); --r: 3deg; }
.bubble-e { transform: rotate(-1deg) translateY(8px); --r: -1deg; }
.bubble-f { transform: rotate(2deg); --r: 2deg; }

.excuse-footnote {
    margin-top: 36px;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.2rem;
    color: var(--candy-cream);
    text-align: center;
}
.annotation {
    background: var(--candy-dark);
    padding: 6px 14px;
    border-radius: 30% 60% 40% 50% / 60% 40% 55% 45%;
    color: var(--candy-yellow);
    transform: rotate(-1deg);
    display: inline-block;
}

/* =====================================================
   6. Funhouse Exit
   ===================================================== */
.booth-exit {
    background: var(--candy-parchment);
    padding-top: clamp(80px, 12vh, 140px);
    padding-bottom: clamp(80px, 12vh, 140px);
    min-height: 60vh;
    text-align: center;
    overflow: hidden;
}

.exit-inner {
    max-width: 760px;
    margin: 0 auto;
    transform: skewY(-1deg);
    transition: transform 0.6s var(--soft);
}
.exit-inner:hover { transform: skewY(1deg); }

.exit-mirror-frame {
    background: var(--candy-cream);
    border: 5px solid var(--candy-dark);
    border-radius: 60px 30px 70px 40px / 50px 60px 40px 70px;
    padding: clamp(36px, 6vw, 60px) clamp(28px, 5vw, 50px);
    box-shadow: 8px 10px 0 var(--candy-pink), 16px 18px 0 var(--candy-grape);
    position: relative;
    transform: skewY(1deg);
}

.exit-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--candy-dark);
    margin-bottom: 18px;
}

.exit-text {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--candy-grape);
    margin-bottom: 26px;
}

.exit-mascots {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 18px 0 22px;
}
.exit-mascots .mascot-wave-a { animation: bob-a 3.4s ease-in-out infinite; }
.exit-mascots .mascot-wave-b { animation: bob-b 3.6s ease-in-out infinite; }

.exit-domain {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--candy-pink);
    letter-spacing: -0.01em;
}

.exit-credit {
    margin-top: 24px;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
    color: var(--candy-dark);
    transform: skewY(1deg);
}

/* =====================================================
   Bounce-enter (intersection observer)
   ===================================================== */
.bounce-target {
    opacity: 0;
    transform: translateY(60px) scale(0.8) rotate(-5deg);
    transition: opacity 0.7s var(--spring), transform 0.8s var(--spring);
    transition-delay: var(--delay, 0s);
}
.bounce-target.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--r, 0deg));
}
.postcard-left.bounce-target.is-visible  { transform: translateY(0) scale(1) rotate(var(--r, -3deg)) translateX(-4%); }
.postcard-right.bounce-target.is-visible { transform: translateY(0) scale(1) rotate(var(--r, 3deg)) translateX(4%); }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 860px) {
    .mascot-pair {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin: -20px 0;
    }
    .mascot-pair svg { width: 110px; height: auto; }

    .mirror-panels {
        grid-template-columns: 1fr;
    }
    .postcard-left,
    .postcard-right { transform: rotate(var(--r, 0deg)) translateX(0); }
    .postcard-left.bounce-target.is-visible,
    .postcard-right.bounce-target.is-visible { transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }

    .mirror-split { display: none; }

    .book {
        grid-template-columns: 1fr;
    }
    .book-spine { display: none; }

    .scale-stage { padding: 16px 8px; }

    .compass { width: 60px; height: 60px; bottom: 14px; right: 14px; }
}

@media (max-width: 520px) {
    .hero-title { text-shadow: 3px 3px 0 var(--candy-yellow), 6px 6px 0 var(--candy-pink); }
    .booth { padding-left: 16px; padding-right: 16px; }
    .bubble-cluster { grid-template-columns: 1fr; }
    .evidence-row { flex-direction: column; align-items: stretch; }
    .evidence-btn { width: 100%; }
}