/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
    /* Claymorphism Palette - Vibrant & Soft */
    --bg-cream: #EFF6FF;
    /* Soft Blue-ish White (like reference) */
    --card-white: #FFFFFF;
    --text-dark: #2D3748;

    /* Vibrant Accents */
    --primary-peach: #60A5FA;
    /* Blue (like the rocket/button) */
    --primary-peach-dark: #3B82F6;
    --accent-yellow: #FCD34D;
    --accent-purple: #C084FC;
    --accent-green: #34D399;

    /* Clay Effects */
    --clay-shadow:
        inset 6px 6px 12px rgba(255, 255, 255, 0.8),
        inset -6px -6px 12px rgba(0, 0, 0, 0.1),
        8px 8px 20px rgba(0, 0, 0, 0.05);

    --clay-btn-shadow:
        inset 4px 4px 8px rgba(255, 255, 255, 0.4),
        inset -4px -4px 8px rgba(0, 0, 0, 0.2),
        0px 10px 20px rgba(96, 165, 250, 0.4);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Varela Round', sans-serif;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Clean Soft Gradient Background */
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* App Container - Mobile Wrapper */
/* App Container - Glassmorphism */
#app-container {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    box-shadow:
        20px 20px 60px rgba(176, 196, 222, 0.4),
        -20px -20px 60px rgba(255, 255, 255, 0.8),
        inset 10px 10px 20px rgba(255, 255, 255, 0.5),
        inset -10px -10px 20px rgba(0, 0, 0, 0.02);
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

@media (min-width: 600px) {
    #app-container {
        margin: 20px;
        height: calc(100% - 40px);
        border-radius: 40px;
    }
}

/* Background Pattern Decoration */
#app-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(96, 165, 250, 0.1) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    z-index: -1;
    pointer-events: none;
}


/* Helpers */
.hidden {
    display: none !important;
}

/* Decorative Background Elements */
.bg-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.deco-star {
    width: 30px;
    height: 30px;
}

.deco-cloud {
    width: 40px;
    height: 30px;
}

.deco-heart {
    width: 25px;
    height: 25px;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Header */
.app-header {
    flex: 0 0 auto;
    /* Don't grow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    z-index: 10;
}

.btn-back {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    cursor: pointer;
}

.score-badge {
    background: white;
    padding: 3px 10px;
    border-radius: 15px;
    border: 2px solid #eee;
    font-size: 0.9rem;
    color: var(--primary-peach-dark);
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
}

/* Progress Section */
.progress-section {
    flex: 0 0 auto;
    padding: 0 15px;
    margin-bottom: 5px;
}

.progress-header {
    text-align: right;
    font-size: 0.8rem;
    color: #AAA;
    font-weight: 700;
    margin-bottom: 2px;
}

.progress-segments {
    display: flex;
    gap: 0;
    /* Continuous */
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    overflow: hidden;
    /* Inner shadow for depth */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.segment {
    flex: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    border: none;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
    /* Soft inner depth */
}

.segment.active {
    background: var(--primary-peach);
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.1),
        0 4px 10px rgba(96, 165, 250, 0.3);
    /* Glow */
    transform: translateY(0);
}

/* Main Content Area */
.quiz-content,
.intro-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* --- CLAYMORPHISM STYLE INTRO --- */
.clay-intro {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #F4EDDD; /* Cream background */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Changed from center to allow scrolling */
    padding: 30px 0 20px 0; /* Add top/bottom padding so content doesn't stick to edges */
    overflow-y: auto; /* Fix 1: Enable scrolling freely */
    overflow-x: hidden;
}

.clay-deco {
    position: absolute;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    z-index: 1;
    pointer-events: none;
}

.clay-container-inner {
    width: 100%;
    max-width: 100%; /* Stretch full width on mobile */
    display: flex;
    flex-direction: column; /* Mobile stacks vertically */
    align-items: center;
    gap: 15px; /* Reduced gap severely from 30px */
    z-index: 10;
    padding: 10px 20px; /* Reduced vertical padding */
}

/* Base style for desktop wrappers so they play nice on mobile */
.desktop-left, .desktop-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 15px;
}

/* Logo Alignment */
.clay-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px; /* Tiny separation */
}

.clay-logo-img {
    width: 180px; /* Scaled down from 250px */
    height: auto;
    filter: drop-shadow(0 8px 15px rgba(176, 125, 98, 0.2));
}

/* Typography */
.clay-typography {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Tighter gap for texts */
}

.clay-headline {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.2rem; /* Scaled down */
    line-height: 1.1;
    color: #a87e66;
    margin: 0;
    letter-spacing: 1px;
    /* Soft 3D text effect */
    text-shadow: 
        0px 2px 0px #866451,
        0px 4px 6px rgba(134, 100, 81, 0.3);
}

.clay-subtext {
    font-size: 0.95rem; /* Scaled down */
    font-weight: 600;
    color: #5c4433;
    margin: 0;
    line-height: 1.3;
}

/* Clay Input Card */
.clay-input-card {
    width: 100%;
    background: #F4EDDD; /* match bg for true clay merging feel */
    border-radius: 25px; /* Soften border */
    padding: 15px 20px; /* Tighter internal padding */
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* The Clay Extrusion Shadow */
    box-shadow: 
        -6px -6px 15px rgba(255, 255, 255, 1), /* Top light */
        6px 6px 15px rgba(176, 125, 98, 0.3), /* Bottom shadow */
        inset 2px 2px 4px rgba(255, 255, 255, 0.6); /* Soft inner rim */
}

.clay-label {
    font-size: 0.95rem; /* Tighter label */
    font-weight: 700;
    color: #5c4433;
}

.clay-input-wrapper {
    width: 100%;
    position: relative;
}

.clay-input-field {
    width: 100%;
    background: #EBE1CB; /* Slightly darker than bg to look pressed in */
    border: none;
    border-radius: 16px;
    padding: 12px 15px; /* Reduced input padding */
    font-size: 1.1rem; /* Scaled down slightly */
    font-weight: 700;
    color: #4A3628;
    outline: none;
    /* Inset shadow makes it look carved in */
    box-shadow: 
        inset 4px 4px 8px rgba(176, 125, 98, 0.25),
        inset -4px -4px 8px rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.clay-input-field::placeholder {
    color: #a87e66;
    opacity: 0.6;
}

.clay-input-field:focus {
    box-shadow: 
        inset 6px 6px 12px rgba(176, 125, 98, 0.35),
        inset -6px -6px 12px rgba(255, 255, 255, 0.9);
}

/* Clay Submit Button */
.clay-btn-submit {
    width: 100%;
    background: #DE8663; /* Terracotta Orange */
    color: white;
    font-size: 1.15rem; /* Reduced text scale */
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 16px; /* Tightened padding */
    border: none;
    border-radius: 30px; /* Reduced border radius scaling */
    cursor: pointer;
    position: relative;
    z-index: 10;
    touch-action: manipulation; /* Fix click delays on mobile */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Pillowy 3D Clay Extrusion */
    box-shadow: 
        0px 6px 0px #b86b4d, /* Thinner 3D bottom */
        0px 10px 15px rgba(222, 134, 99, 0.4), /* Drop shadow */
        inset 0px 4px 8px rgba(255, 255, 255, 0.4); /* Top highlight */
    transition: all 0.1s ease;
    margin-top: 5px; /* Tighter margins */
}

.clay-btn-submit:active {
    transform: translateY(4px);
    box-shadow: 
        0px 2px 0px #b86b4d, 
        0px 4px 10px rgba(222, 134, 99, 0.3),
        inset 0px 4px 8px rgba(255, 255, 255, 0.4); 
}

/* Scientific Footer */
.clay-footer-legal {
    margin-top: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #8c7666;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.8;
}


/* Hero / Stimulus - IMPROVED LAYOUT */
.hero-image-container {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    position: relative;
    /* Anchor for absolute feedback */

    /* Responsive Fluid Height */
    flex: 0 0 35%;
    /* Fixed proportion of screen */
    min-height: 160px;
    max-height: 250px;
}

.speaker-btn-floating {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    transform: none;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 15;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 2px solid #E3F2FD;
}

.speaker-btn-floating.static-mode {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-flex;
    margin: 5px auto 10px auto;
}

.speaker-btn-floating span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #6a85b6;
    letter-spacing: 0.5px;
}

.speaker-btn-floating:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.speaker-btn-floating:active {
    transform: translateY(0) scale(0.95);
}

/* STIMULUS ALIGNMENT CLASSES */
.stimulus-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.stimulus-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: nowrap;
    /* Prevent breaking if possible */
}

.stimulus-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.question-illustration {
    width: 100%;
    max-width: 200px;
    max-height: 160px;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    /* Clay Style */
    box-shadow: var(--clay-shadow);
    /* Initial Animation State for GSAP */
    opacity: 0;
    transform: scale(0.8);
}

.stimulus-icon-small {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.stimulus-text {
    font-size: 1.2rem;
    color: #555;
    text-align: center;
    line-height: 1.3;
    font-weight: 700;
}

.stimulus-subtext {
    font-size: 1rem;
    color: #888;
}

.stimulus-vs {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary-peach-dark);
    margin: 0 8px;
}

/* Question Text */
.question-text {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 5px;
    flex: 0 0 auto;
    background: white;
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow:
        inset 4px 4px 8px rgba(255, 255, 255, 0.8),
        inset -4px -4px 8px rgba(0, 0, 0, 0.05),
        var(--shadow-soft);
    border: 2px dashed var(--primary-peach);
    display: inline-block;
    width: fit-content;
    align-self: center;
    position: relative;
}

/* Speech Bubble Tail */
.question-text::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent var(--primary-peach) transparent;
}

.question-text::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 9px 9px 9px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    z-index: 1;
}


/* Speaker Button */
.speaker-btn {
    background: #E3F2FD;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    flex: 0 0 auto;
    z-index: 10;
}

/* Options Grid */
.options-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
    /* Closer to button */
    margin-top: auto;
    /* Push to bottom of flex container */
    flex: 0 0 auto;
}

.option-card {
    background: white;
    border-radius: 16px;
    padding: 10px;
    position: relative;
    box-shadow: var(--shadow-soft);
    border: 3px solid transparent;
    /* Prepare for border */
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
    height: 110px;
    /* Standardize height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.option-card:active {
    transform: scale(0.95);
}

.option-card.selected {
    border-color: var(--primary-peach);
    background: #FFFBF7;
}

.option-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-A {
    background: #FFAB91;
}

.badge-B {
    background: #81C784;
}

.badge-C {
    background: #64B5F6;
}

.badge-D {
    background: #BA68C8;
}

.option-content img {
    height: 48px;
    width: auto;
    margin-bottom: 5px;
}

.option-text {
    font-size: 1rem;
    font-weight: 700;
    color: #666;
    text-align: center;
}

/* Footer Action */
.app-footer {
    flex: 0 0 auto;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: white;
    /* Ensure bg to cover content if scrolling */
    z-index: 100;
}

input {
    width: 100%;
    background: #F0F4F8;
    appearance: none;
    outline: none;
    /* Clay Input Look */
    border: none;
    border-radius: 20px;
    padding: 15px;
    box-shadow:
        inset 5px 5px 10px rgba(163, 177, 198, 0.4),
        inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

input:focus {
    box-shadow:
        inset 2px 2px 5px rgba(163, 177, 198, 0.4),
        inset -2px -2px 5px rgba(255, 255, 255, 0.8),
        0 0 0 3px var(--primary-peach);
}

/* Button Action (Clay Style) */
.btn-action {
    background: var(--primary-peach);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    /* Pillow shape */
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--clay-btn-shadow);
    transition: all 0.2s ease;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-action::after {
    /* Glossy highlight on top */
    content: '';
    position: absolute;
    top: 5px;
    left: 20px;
    right: 20px;
    height: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 20px;
}

.btn-action:active {
    transform: scale(0.96);
    box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.2);
}

/* TIER 1: VERY SMALL SCREENS (iPhone 5, SE, < 670px) */
@media (max-height: 670px) {
    .app-header {
        padding: 8px 15px;
    }

    .progress-section {
        margin-bottom: 10px;
    }

    /* Layout Logic: Switch Footer to Static to prevent overlap */
    #app-container {
        overflow-y: auto;
        /* Enable full scroll on body */
        display: block;
        /* Disable flex column to allow natural flow */
    }

    .quiz-content {
        overflow: visible;
        /* Let it expand */
        flex: none;
        height: auto;
        padding-bottom: 0;
    }

    /* Stick to bottom of flow, not screen */
    .app-footer {
        position: relative;
        margin-top: 20px;
    }

    /* Shrink Hero */
    .hero-image-container {
        flex: none;
        height: 140px;
        /* Force small fixed height */
        min-height: 0;
        /* Override */
        margin-bottom: 10px;
        padding: 5px;
    }

    /* Shrink Options */
    .options-grid {
        /* No grid needed for slider */
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .option-card {
        height: 90px;
        padding: 5px;
    }

    .option-content img {
        height: 40px;
    }

    .option-text {
        font-size: 0.9rem;
    }

    /* Shrink Stimulus Icons */
    .stimulus-icon {
        width: 50px;
        height: 50px;
    }

    .stimulus-text {
        font-size: 1rem;
    }
}

/* TIER 2: STANDARD MOBILE (> 671px) */
@media (min-height: 671px) {
    /* No special footer rules needed for standard height */
}

/* DESKTOP MODE (Phone Simulator) */
@media (min-width: 600px) {
    body {
        align-items: center;
        background-color: #f0f2f5;
        background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
        background-size: 20px 20px;
    }

    #app-container {
        height: 90vh;
        max-height: 850px;
        border-radius: 30px;
        border: 8px solid #333;
    }
}

/* Feedback Display Styles (Centered in Arc) */
.feedback-display-center {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.feedback-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 0px;
}

.feedback-text {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

/* --- ARC SLIDER STYLES --- */
.slider-container {
    width: 100%;
    margin: 5px 0 10px 0;
    padding: 10px;
    background: #E0E5EC;
    border-radius: 25px;
    box-shadow: var(--clay-shadow);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.arc-slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.arc-slider-svg {
    width: 100%;
    height: auto;
    max-width: 280px;
    touch-action: none;
    overflow: visible;
    /* Prevent clipping of thumb */
    position: relative;
    z-index: 20;
    /* Ensure it stays on top of speaker button */
}

.arc-track {
    fill: none;
    stroke: #BDC3C7;
    stroke-width: 18;
    /* Thicker track */
    stroke-linecap: round;
}

.arc-progress {
    fill: none;
    stroke: url(#arc-gradient);
    stroke-width: 18;
    /* Thicker progress */
    stroke-linecap: round;
    transition: stroke-dasharray 0.1s ease;
}

.arc-thumb-group {
    cursor: pointer;
}

.arc-thumb-animate {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: 0px 0px;
    /* Scale from center of local coords */
    transform-box: fill-box;
    /* Ensure proper box calculation */
}

.arc-thumb-bg {
    fill: #FFFFFF;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.arc-thumb-group:active .arc-thumb-animate {
    transform: scale(1.2);
}

.slider-labels {
    width: 100%;
    max-width: 280px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 0.75rem;
    color: #888;
    font-weight: 700;
    margin-top: -15px;
}

/* TIER 3: DESKTOP (Large Screens >= 1024px) */
@media (min-width: 1024px) {
    #app-container {
        max-width: 1000px;
        /* Wider container */
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        /* Header, Progress, Content */
        height: 90vh;
        /* Give some vertical margin */
        max-height: 800px;
    }

    /* Since container padding is removed, ensure header doesn't hit borders */
    .app-header {
        grid-row: 1;
        padding: 30px 40px 10px 40px;
    }
    
    .progress-section {
        grid-row: 2;
        padding: 0 40px 0 40px;
    }
    
    .quiz-content {
        grid-row: 3;
    }

    /* Desktop overrides for Clay Intro: Full Screen Split Box */
    .clay-intro {
        justify-content: center;
        align-items: center; 
        width: 100%;
        max-width: none; /* Let it stretch fully */
        margin: 0; 
        height: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none; 
        background-color: #F4EDDD; 
        position: relative;
    }

    .clay-container-inner {
        transform: none; 
        width: 100%;
        max-width: 1100px; /* Limit ultra-wide stretch */
        display: grid;
        grid-template-columns: 1fr 1fr; /* Split down middle */
        gap: 60px; /* Big space between logo and form */
        align-items: center; /* Center vertically against each other */
        padding: 40px;
    }

    .desktop-left {
        align-items: center; 
        justify-content: center;
    }

    .desktop-left .clay-logo-img {
        width: 450px; /* Super-size the logo for desktop left column */
        filter: drop-shadow(0 15px 30px rgba(176, 125, 98, 0.2));
    }

    .desktop-right {
        align-items: flex-start; /* Left align form content */
        text-align: left;
    }
    
    .desktop-right .clay-typography {
        text-align: left;
        align-items: flex-start;
    }

    .desktop-right .clay-headline {
        font-size: 4rem; /* Huge title */
    }

    .desktop-right .clay-subtext {
        font-size: 1.3rem; 
        margin-bottom: 10px;
    }

    .desktop-right .clay-input-card {
        max-width: 400px; /* don't let form stretch too far on big screens */
    }

    .desktop-right .clay-btn-submit {
        max-width: 400px; 
        padding: 22px;
        font-size: 1.4rem;
        border-radius: 40px;
    }

    .desktop-right .clay-footer-legal {
        justify-content: flex-start; 
        font-size: 0.95rem;
    }

    /* 2-Column Grid Layout for Quiz View */
    #view-quiz {
        display: grid;
        grid-template-columns: 45% 55%; /* More proportional split */
        grid-template-rows: max-content 1fr; /* Important: fixes infinite growth */
        gap: 20px 60px; /* Better row and column spacing */
        align-items: center;
        justify-content: center;
        height: 100%;
        overflow: hidden;
        padding: 40px 60px; /* Increased padding */
        position: relative;
    }

    /* Decorative element for desktop right column */
    #view-quiz::before {
        content: 'Pilih jawaban yang paling sesuai dengan dirimu!';
        position: absolute;
        top: 40px;
        right: 180px; /* Placed left of the speaker button */
        font-size: 0.95rem; /* Reduced from 1.2rem */
        font-weight: 700;
        color: var(--primary-peach);
        background: rgba(255, 255, 255, 0.8);
        padding: 8px 16px; /* Reduced from 10px 20px */
        border-radius: 20px;
        border: 2px dashed var(--primary-peach);
        box-shadow: var(--shadow-soft);
        z-index: 10;
        max-width: 45%;
        text-align: center;
    }

    /* Left Column: Image */
    #stimulus-container {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: 100%;
        width: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: rgba(255, 255, 255, 0.5); /* Soft background for image container */
        border-radius: 30px;
        padding: 20px;
        box-shadow: inset 4px 4px 10px rgba(0,0,0,0.02);
    }

    /* Target the dynamic wrapper */
    .stimulus-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Target the specific question image class */
    .question-illustration {
        width: 100%;
        height: auto;
        max-height: 500px; /* Constrained slightly so it doesn't overwhelm */
        object-fit: contain;
        max-width: none;
        border-radius: 25px; /* Softer rounded corners */
        box-shadow: var(--clay-shadow);
        transition: transform 0.3s ease;
    }
    
    .question-illustration:hover {
        transform: scale(1.02);
    }

    /* Keep the speaker floating normally on desktop */
    #speaker-container-mobile {
        position: absolute;
        top: 30px;
        right: 45px;
        margin: 0 !important;
        z-index: 15;
    }
    
    #speaker-container-mobile .static-mode {
        position: relative;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* Right Column: Question Text */
    .question-text {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin-top: 130px; 
        margin-bottom: 30px;
        align-self: start; /* Prevents CSS Grid cumulative height bug */
        font-size: 1.3rem; /* Reduced from 1.8rem */
        line-height: 1.4;
        padding: 15px 25px; /* Reduced from 25px 35px */
        background: white;
        border: 3px dashed var(--primary-peach);
        box-shadow: var(--clay-shadow);
    }
    
    .question-text::before {
        top: -10px;
        border-width: 0 12px 12px 12px;
    }
    
    .question-text::after {
        top: -14px;
        border-width: 0 14px 14px 14px;
    }

    /* Right Column: Content (Slider) */
    .options-grid {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        margin-top: 0;
        margin-bottom: auto;
        justify-content: center; /* Center slider instead of top */
        align-items: center;
    }

    .arc-slider-svg {
        max-width: 450px;
        /* Even Larger slider on desktop */
    }

    /* Hide redundant mascot on desktop */
    .mascot-companion {
        display: none !important;
    }

    /* Ensure Footer spans full width */
    .app-footer {
        grid-column: 1 / -1;
        width: 100%;
    }
}