:root {
    --bg-color: #0d0d15;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.1);
    --primary: #00f0ff;
    /* Neon Cyan for focus/action */
    --secondary: #7000ff;
    /* Deep Purple for depth */
    --accent: #ff4d4d;
    /* Red for urgent action/stop smoking */
    --text-main: #ffffff;
    --text-muted: #a0a0b0;
    --success: #00ff88;

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --trans-fast: 0.2s ease;
    --trans-med: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Background Effects */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: moveBlob 20s infinite alternate;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: var(--secondary);
    top: -100px;
    left: -100px;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: var(--primary);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

@keyframes moveBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 50px) scale(1.1);
    }
}


.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    /* Force full screen fill, no bars, no cropping */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: -1;
    transition: opacity 1s ease;
    mix-blend-mode: normal;
    /* Better visibility for text images */
}

/* Interstitial Image in Card */
.interstitial-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: block;
}

/* Icons */
.step-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.step-icon svg {
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

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

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

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.logo-img {
    height: 90px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
    margin-left: 20px;
}

.progress-bar-container {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 10px;
}

/* Main Content */
.content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    perspective: 1000px;
    /* For 3D transitions */
}

/* Cards & Text */
h1 {
    font-size: 2rem;
    /* Mobile first, override for desktop */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    text-align: center;
    background: linear-gradient(to bottom, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 32px;
}

.fade-text {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Glass Panel for Questions */
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* Initial state for entering animation */
    /* Handled by GSAP mostly, but default can be here */
}

/* Buttons and Options */
.btn-primary {
    display: inline-block;
    background: var(--primary);
    /* Neon */
    color: #000;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
}

.btn-danger {
    background: var(--accent);
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.4);
    color: #fff;
    width: 100%;
    text-align: center;
}

.btn-danger:hover {
    box-shadow: 0 0 30px rgba(255, 77, 77, 0.6);
}


.options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.option-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    padding: 18px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    transition: all var(--trans-fast);
    display: flex;
    align-items: center;
}

.option-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    transform: translateX(4px);
}

.option-btn.selected {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

/* Interstitial Warning Mode */
.warning-icon {
    font-size: 3rem;
    display: block;
    margin: 0 auto 16px;
    text-align: center;
}

/* Loading Step Styles */
.loading-container {
    text-align: center;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

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

.loading-text {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Desktop Adjustments */
@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    .content-container {
        max-width: 700px;
    }

    .glass-panel {
        padding: 48px;
    }
}

/* Flip Card Styles */
.flip-scene {
    perspective: 1100px;
    width: 100%;
}

.flip-card {
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

/* Emoji Bubbles */
.emoji-bubble {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 9999;
    font-size: 28px;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, .35));
}

.option-btn {
    justify-content: space-between;
    gap: 12px;
}

.opt-emoji {
    opacity: .9;
    font-size: 1.2rem;
}

/* Gamified Progress Bar */
.progress-meta {
    margin-left: 10px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
    min-width: 80px;
    text-align: center;
    font-weight: 600;
}

.progress-bar-container {
    position: relative;
    /* Ensure overflow is not hidden for checkpoints to pop out if needed, but standard bar usually overflow hidden. 
     Actually, if checkpoints are larger than bar height, overflow hidden might cut them. 
     The user prompt asked for checkpoints on the bar. */
    overflow: visible;
}

.progress-checkpoint {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(255, 255, 255, .18);
    z-index: 2;
    transition: background-color 0.3s ease;
}

.progress-checkpoint.active {
    background: var(--success);
    box-shadow: 0 0 10px rgba(0, 255, 136, .8);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .main-header {
        padding: 12px 16px;
    }

    .logo-img {
        height: 50px;
        margin-left: 10px;
    }

    .progress-meta {
        font-size: 0.75rem;
        min-width: auto;
        margin-left: 8px;
    }

    /* Background Image Fix */
    .bg-overlay {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
        word-wrap: break-word;
    }

    .glass-panel {
        padding: 20px;
        border-radius: var(--radius-md);
        width: 100%;
    }

    .option-btn {
        padding: 14px;
        font-size: 0.9rem;
    }

    .content-container {
        padding: 16px;
        width: 100%;
    }

    .emoji-bubble {
        font-size: 24px;
    }
}

.video-wrapper {
    position: relative;
    width: 100%;
    margin: 2rem auto;
    padding: 1rem 0;
}

.video-wrapper vturb-smartplayer {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.15);
}

@media (max-width: 768px) {
    .video-wrapper {
        margin: 1.5rem auto;
        padding: 0.5rem;
    }
}