/* Quit Smoking Modal Styles */
.quit-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.quit-modal-overlay.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}

.quit-modal-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    width: 100%;
    max-width: 1200px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modalSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button */
.quit-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.quit-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Header Section */
.quit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 24px;
    background: linear-gradient(45deg, #00ff88, #00ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text {
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: #00ff88;
}

.nav-btn {
    background: linear-gradient(45deg, #00ff88, #00ccff);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.nav-btn:hover {
    transform: scale(1.05);
}

/* Hero Section */
.quit-hero-section {
    position: relative;
    padding: 40px;
    min-height: 500px;
    overflow: hidden;
}

/* Cinematic Background */
.cinematic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Smoke Particles */
.smoke-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(100, 100, 100, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(120, 120, 120, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(90, 90, 90, 0.25) 0%, transparent 50%);
    animation: smokeFloat 8s infinite ease-in-out;
}

@keyframes smokeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(5deg); opacity: 0.6; }
}

/* Floating Butterflies */
.floating-butterflies {
    position: absolute;
    width: 100%;
    height: 100%;
}

.butterfly {
    position: absolute;
    font-size: 20px;
    animation: butterflyFly 12s infinite ease-in-out;
}

.butterfly-1 {
    top: 20%;
    left: 70%;
    animation-delay: 0s;
}

.butterfly-2 {
    top: 60%;
    left: 80%;
    animation-delay: 4s;
}

.butterfly-3 {
    top: 40%;
    left: 85%;
    animation-delay: 8s;
}

@keyframes butterflyFly {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-30px, -20px) rotate(10deg); }
    50% { transform: translate(-60px, 10px) rotate(-5deg); }
    75% { transform: translate(-30px, 30px) rotate(15deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Forest Silhouette */
.forest-silhouette {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 60%;
    background: linear-gradient(to top, 
        rgba(0, 50, 0, 0.4) 0%,
        rgba(0, 80, 0, 0.3) 30%,
        rgba(0, 100, 0, 0.2) 60%,
        transparent 100%);
    clip-path: polygon(0 100%, 20% 60%, 40% 80%, 60% 40%, 80% 70%, 100% 30%, 100% 100%);
}

/* Glowing Particles */
.glowing-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #00ff88, transparent);
    border-radius: 50%;
    animation: particleFloat 6s infinite ease-in-out;
}

.particle-1 { top: 10%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 30%; left: 20%; animation-delay: 1.2s; }
.particle-3 { top: 50%; left: 15%; animation-delay: 2.4s; }
.particle-4 { top: 70%; left: 25%; animation-delay: 3.6s; }
.particle-5 { top: 20%; left: 30%; animation-delay: 4.8s; }

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
}

/* Hero Content */
.quit-hero-content {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 10;
}

.hero-left {
    flex: 1;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    background: linear-gradient(45deg, #00ff88, #00ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.highlight-text {
    color: #00ff88;
    font-weight: 600;
}

/* Input Section */
.input-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.custom-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-select:hover {
    border-color: #00ff88;
    background: rgba(255, 255, 255, 0.15);
}

.custom-select option {
    background: #1a1a2e;
    color: white;
}

.milestone-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    backdrop-filter: blur(10px);
}

.milestone-input span {
    color: white;
    font-size: 14px;
}

.progress-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.dot.active {
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
}

/* Calculator Widget */
.calculator-widget {
    flex: 0 0 350px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-header {
    text-align: center;
    margin-bottom: 20px;
}

.widget-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

.calculator-item {
    margin-bottom: 20px;
}

.calc-label {
    color: white;
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

.calc-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
}

.calc-number {
    color: #00ff88;
    font-size: 24px;
    font-weight: 700;
}

.calc-controls {
    display: flex;
    gap: 8px;
}

.calc-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calc-btn:hover {
    background: #00ff88;
    border-color: #00ff88;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ff88, #00ccff);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.health-message {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.heart-icon {
    font-size: 24px;
    animation: heartbeat 2s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.health-message span {
    color: white;
    font-size: 12px;
    line-height: 1.4;
}

.start-journey-btn {
    width: 100%;
    background: linear-gradient(45deg, #00ff88, #00ccff);
    border: none;
    color: white;
    padding: 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.start-journey-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 255, 136, 0.3);
}

/* Personalized Quit Plan Section */
.quit-plan-section {
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
}

.section-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-badge {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.plan-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    align-items: start;
}

.metric-card {
    text-align: center;
}

.metric-icon {
    font-size: 24px;
    margin-bottom: 16px;
}

.metric-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
}

.circle-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#00ff88 0deg, #00ff88 var(--progress, 85deg), rgba(255, 255, 255, 0.1) var(--progress, 85deg));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle-progress::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background: #1a1a2e;
    border-radius: 50%;
}

.circle-text {
    position: relative;
    z-index: 10;
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}

.circle-text strong {
    font-size: 24px;
    font-weight: 700;
    color: #00ff88;
}

.money-saved .circle-progress {
    background: conic-gradient(#ffd93d 0deg, #ffd93d var(--progress, 65deg), rgba(255, 255, 255, 0.1) var(--progress, 65deg));
}

.money-icons {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.money-icon {
    font-size: 16px;
    animation: moneyFloat 2s infinite ease-in-out;
}

.money-icon:nth-child(2) { animation-delay: 0.5s; }
.money-icon:nth-child(3) { animation-delay: 1s; }

@keyframes moneyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.metric-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 4px;
}

.metric-value {
    color: #ffd93d;
    font-size: 18px;
    font-weight: 700;
}

/* Coping Section */
.coping-section {
    grid-column: span 2;
}

.coping-title {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.coping-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.coping-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
}

.coping-icon {
    font-size: 20px;
}

.coping-text {
    color: white;
    font-size: 14px;
    line-height: 1.3;
}

.coping-text small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.lung-health {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 16px;
}

.lung-icon {
    font-size: 24px;
    animation: lungBreathe 3s infinite ease-in-out;
}

@keyframes lungBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.lung-text {
    color: #00ff88;
    font-weight: 600;
}

/* Gamified Tracker Section */
.gamified-section {
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
}

.tracker-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.challenge-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.challenge-icon {
    font-size: 32px;
    background: linear-gradient(45deg, #ffd93d, #ff6b6b);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.challenge-info h3 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.challenge-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.coach-section {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.coach-avatar {
    flex-shrink: 0;
}

.coach-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.coach-info {
    flex: 1;
}

.coach-info h4 {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.coach-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
}

.coach-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coach-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coach-btn:hover {
    background: #00ff88;
    border-color: #00ff88;
}

.stats-display {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.big-stat {
    flex: 1;
}

.stat-number {
    color: #00ff88;
    font-size: 48px;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.3;
}

.user-avatar {
    flex-shrink: 0;
}

.user-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00ff88;
}

.leaderboard {
    grid-column: span 2;
}

.leaderboard h3 {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.leader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leader-info {
    flex: 1;
}

.leader-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.leader-streak {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.leader-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score {
    color: #ffd93d;
    font-size: 14px;
    font-weight: 600;
}

.badge {
    font-size: 16px;
}

.achievement {
    color: #00ff88;
    font-size: 12px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .quit-modal-container {
        margin: 10px;
        border-radius: 16px;
    }
    
    .quit-hero-content {
        flex-direction: column;
    }
    
    .calculator-widget {
        flex: none;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .plan-metrics {
        grid-template-columns: 1fr;
    }
    
    .coping-section {
        grid-column: span 1;
    }
    
    .tracker-content {
        grid-template-columns: 1fr;
    }
    
    .leaderboard {
        grid-column: span 1;
    }
    
    .journey-stages {
        grid-template-columns: 1fr;
    }
}
/* ===============================
   Cinematic: big smoke puffs + better butterflies + glowing particles
   Append this at the END of quit-smoking-modal.css
   =============================== */

/* Make smoke container visible and allow overflow for high puffs */
.smoke-particles {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* Individual puff */
.smoke-particles .puff {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0;
  transform-origin: center;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 30% 30%,
              rgba(255,255,255,0.96) 0%,
              rgba(220,220,220,0.65) 18%,
              rgba(180,180,180,0.35) 40%,
              rgba(150,150,150,0.15) 65%,
              transparent 100%);
  animation: puffUp var(--puffDur,6s) linear infinite;
  will-change: transform, opacity, filter;
}

/* different sizes/positions (you can create up to 10 puffs) */
.smoke-particles .puff:nth-child(1){ left: 10%; width: 48px; height:48px; --puffDur:6.2s; animation-delay: -1.2s;}
.smoke-particles .puff:nth-child(2){ left: 22%; width: 62px; height:62px; --puffDur:7s; animation-delay: -2.1s;}
.smoke-particles .puff:nth-child(3){ left: 34%; width: 44px; height:44px; --puffDur:5.6s; animation-delay: -0.7s;}
.smoke-particles .puff:nth-child(4){ left: 46%; width: 70px; height:70px; --puffDur:8s; animation-delay: -3.4s;}
.smoke-particles .puff:nth-child(5){ left: 58%; width: 56px; height:56px; --puffDur:6.6s; animation-delay: -2.8s;}
.smoke-particles .puff:nth-child(6){ left: 70%; width: 42px; height:42px; --puffDur:5.8s; animation-delay: -1.6s;}
.smoke-particles .puff:nth-child(7){ left: 82%; width: 50px; height:50px; --puffDur:7.2s; animation-delay: -2.9s;}
.smoke-particles .puff:nth-child(8){ left: 28%; width: 90px; height:90px; --puffDur:9s; animation-delay: -4.2s; opacity:0.85; filter: blur(8px);}

/* Puff animation - rising, spreading and fading */
@keyframes puffUp {
  0% {
    transform: translateY(0) scale(0.6) rotate(0deg);
    opacity: 0;
    filter: blur(6px) brightness(1);
  }
  8% {
    opacity: 0.85;
  }
  55% {
    transform: translateY(-120px) scale(1.25) rotate(6deg);
    opacity: 0.45;
    filter: blur(8px) brightness(0.95);
  }
  100% {
    transform: translateY(-260px) scale(1.9) rotate(12deg);
    opacity: 0;
    filter: blur(12px) brightness(0.9);
  }
}

/* butterfly enhancements - drop shadow + wing micro-flap + multi animation */
.floating-butterflies .butterfly {
  will-change: transform, filter;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.45));
  animation: butterflyFly var(--flyDur,12s) infinite ease-in-out,
             wingFlap 0.55s infinite ease-in-out;
  transform-origin: center;
  display: inline-block;
}

/* separate micro-flap for “wing” effect (subtle scaleY) */
@keyframes wingFlap {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.86); }
  100% { transform: scaleY(1); }
}

/* make butterflies pop a bit when they first appear */
.floating-butterflies .butterfly { opacity: 0; transform: translateY(6px) scale(0.98); }
.floating-butterflies .butterfly.show { opacity: 1; transform: translateY(0) scale(1); transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .6s; }

/* glowing particles tweak for more glow */
.glowing-particles .particle {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(0,255,136,0.95), rgba(0,255,136,0.25), transparent 70%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* lung inhale-exhale */
.lung-visual {
  animation: lungBreathe 3.4s infinite ease-in-out;
  transform-origin: center;
  will-change: transform, filter;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));
}

/* slightly stronger inhale for the final clear-lungs stage */
.stage-3 .lung-visual {
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(.25,.9,.4,1);
}

/* minor polish for cinematic-journey smoke overlay (so it blends) */
.cinematic-journey .smoke-effect { mix-blend-mode: screen; filter: blur(6px) contrast(.95); opacity: .9; }

/* small performance hint */
.smoke-particles .puff,
.floating-butterflies .butterfly,
.glowing-particles .particle { will-change: transform, opacity; }
/* 🎨 Cinematic Jewel Styling for Mini Calculator Widget */
.calculator-widget {
  background: linear-gradient(145deg, #0d0d0f, #1a1a1d);
  border-radius: 18px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), inset 0 0 25px rgba(0, 255, 136, 0.15);
  position: relative;
  overflow: hidden;
  color: #eafdf6;
}

.calculator-widget::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.12), transparent 60%);
  animation: pulseGlow 6s infinite alternate;
  z-index: 0;
}

@keyframes pulseGlow {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(1.2); opacity: 0.3; }
}

.widget-header {
  text-align: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.widget-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.7);
  animation: shimmerTitle 3s infinite linear;
}

@keyframes shimmerTitle {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.calculator-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.calculator-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.25);
}

.calc-label {
  font-size: 14px;
  color: #b8f5da;
  font-weight: 600;
  text-transform: uppercase;
}

.calc-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calc-number {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  transition: transform 0.2s ease;
}

.calc-controls {
  display: flex;
  gap: 8px;
}

.calc-btn {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.4);
  border-radius: 8px;
  color: #00ff88;
  font-size: 18px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.calc-btn:hover {
  background: rgba(0, 255, 136, 0.25);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  transition: width 0.4s ease;
}

.health-message {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #00ff88;
  border-radius: 10px;
  font-size: 13px;
  color: #dfffee;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.heart-icon {
  font-size: 18px;
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.start-journey-btn {
  margin-top: 18px;
  padding: 14px;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  border: none;
  border-radius: 12px;
  color: #0d0d0f;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow: 0 8px 20px rgba(0, 255, 136, 0.35);
  z-index: 1;
}

.start-journey-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 255, 136, 0.55);
}
.start-journey-btn {
    position: relative;
    z-index: 10;          /* brings button above overlays */
    pointer-events: auto; /* makes sure it's clickable */
}

.mini-calculator-widget::before,
.mini-calculator-widget::after {
    pointer-events: none; /* overlays don’t block clicks */
}
/* Personalized Quit Plan Container */
.quit-plan {
  background: radial-gradient(circle at top left, #0d1b2a, #1b263b, #0d1b2a);
  border-radius: 18px;
  padding: 20px;
  margin: 25px 0;
  color: #e0f7ff;
  box-shadow: 0 0 25px rgba(0, 183, 255, 0.3);
  position: relative;
  overflow: hidden;
}

/* Neon Sapphire Glow Title */
.quit-plan .section-title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #00b4d8, #90e0ef, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.5s infinite linear;
}

/* Progress Meters */
.quit-plan .progress-bar {
  height: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  margin: 10px 0;
}
.quit-plan .progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #0077b6, #48cae4);
  animation: progressFill 2.5s ease-out forwards;
}

/* AI Coping Strategy Cards */
.coping-card {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px 0;
  box-shadow: 0 0 15px rgba(0,183,255,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.coping-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0,183,255,0.5);
}

/* Animations */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
@keyframes progressFill {
  from { width: 0; }
  to { width: 75%; } /* <-- dynamically controlled in JS later */
}
/* Quit Plan Section */
.quit-plan-section {
  margin: 60px 0;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0a192f, #112240);
  box-shadow: 0 0 25px rgba(0,255,255,0.2);
  color: #fff;
}

.quit-plan-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #5ee7df;
  text-shadow: 0 0 8px #00f7ff;
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% { text-shadow: 0 0 8px #00f7ff; }
  50% { text-shadow: 0 0 18px #0ff; }
  100% { text-shadow: 0 0 8px #00f7ff; }
}

/* Layout */
.quit-plan-content {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.quit-plan-stats,
.quit-plan-coping {
  flex: 1;
  min-width: 280px;
}

/* Stats Cards */
.stat-card {
  background: rgba(0, 200, 255, 0.1);
  border: 1px solid rgba(0, 200, 255, 0.3);
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  text-align: center;
  transition: 0.3s;
}
.stat-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
}
.stat-label {
  font-size: 1rem;
  color: #5ee7df;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

/* Progress Bar */
.progress-container {
  margin-top: 15px;
}
.progress-label {
  font-size: 0.9rem;
  margin-bottom: 5px;
  display: block;
}
.progress-bar {
  width: 100%;
  height: 14px;
  border-radius: 7px;
  background: #0d2538;
  overflow: hidden;
  border: 1px solid #0ff;
}
.progress-fill {
  width: 65%; /* Change dynamically via JS later */
  height: 100%;
  background: linear-gradient(90deg, #00f7ff, #00ffa1);
  box-shadow: 0 0 15px #00f7ff;
  transition: width 1s ease-in-out;
}

/* Coping Cards */
.coping-title {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #5ee7df;
}
.coping-card {
  background: rgba(255,255,255,0.05);
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: 0.3s;
}
.coping-card:hover {
  background: rgba(0,255,200,0.08);
  transform: translateY(-4px);
}
/* Metrics Container */
.plan-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* Each Metric Card */
.metric-card {
  background: #0d1b2a;
  border-radius: 16px;
  padding: 20px;
  width: 180px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}
.metric-card:hover {
  transform: translateY(-5px);
}

/* Icon */
.metric-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

/* Circle Progress */
.metric-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: conic-gradient(#00e6e6 calc(var(--progress, 0) * 1%), #1b263b 0%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-progress {
  --progress: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-text {
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}

.metric-label {
  font-size: 14px;
  color: #aaa;
  margin-top: 6px;
}
.metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #00e6e6;
}

/* Money Saved Icons */
.money-icons {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.money-icon {
  font-size: 18px;
}
.money-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  animation: floatMoney 3s infinite ease-in-out;
}

.money-icon {
  font-size: 1.2rem;
  margin: 2px 0;
  animation: bounceMoney 2s infinite alternate;
}

@keyframes floatMoney {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes bounceMoney {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/* Coach Vital Boost Breathing Exercise Modal */
.coach-breathing-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10001;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.coach-breathing-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.coach-breathing-modal-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;       /* ⬅️ limit height to 90% of screen */
  background: linear-gradient(135deg, #0a1929, #1e3a5f);
  border-radius: 20px;
  overflow-y: auto;       /* ⬅️ add scroll only if content exceeds */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coach-breathing-modal-overlay.active .coach-breathing-modal-container {
  transform: scale(1);
}

.breathing-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.breathing-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  animation: breathingParticles 8s infinite ease-in-out;
}

@keyframes breathingParticles {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.1) rotate(2deg); opacity: 0.8; }
}

.breathing-content {
  position: relative;
  z-index: 10;
  padding: 40px;
  text-align: center;
  color: white;
}

.breathing-image-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

.breathing-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: breathingAnimation 4s infinite ease-in-out;
  filter: brightness(1.1) contrast(1.2);
}

@keyframes breathingAnimation {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: brightness(1.1) contrast(1.2) hue-rotate(0deg);
  }
  25% { 
    transform: scale(1.05) rotate(1deg); 
    filter: brightness(1.2) contrast(1.3) hue-rotate(5deg);
  }
  50% { 
    transform: scale(1.1) rotate(0deg); 
    filter: brightness(1.3) contrast(1.4) hue-rotate(10deg);
  }
  75% { 
    transform: scale(1.05) rotate(-1deg); 
    filter: brightness(1.2) contrast(1.3) hue-rotate(5deg);
  }
}

.breathing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 40%, rgba(0, 255, 255, 0.2) 70%, rgba(0, 200, 255, 0.4) 100%);
  animation: breathingGlow 4s infinite ease-in-out;
}

@keyframes breathingGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.breathing-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.countdown-timer {
  font-size: 4em;
  font-weight: 800;
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  animation: timerPulse 1s infinite ease-in-out;
}

@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.stop-breathing-btn {
  background: linear-gradient(45deg, #ff4757, #ff3742);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}

.stop-breathing-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 71, 87, 0.6);
}

.breathing-instructions {
  text-align: center;
}

.breathing-instructions h3 {
  font-size: 1.8em;
  color: #00ffff;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.breathing-instructions p {
  font-size: 1.1em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive Design for Breathing Modal */
@media (max-width: 768px) {
  .breathing-image-container {
    width: 250px;
    height: 250px;
  }
  
  .countdown-timer {
    font-size: 3em;
  }
  
  .breathing-instructions h3 {
    font-size: 1.5em;
  }
  
  .breathing-instructions p {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .breathing-content {
    padding: 20px;
  }
  
  .breathing-image-container {
    width: 200px;
    height: 200px;
  }
  
  .countdown-timer {
    font-size: 2.5em;
  }
}
.money-icon {
  font-size: 1.2rem;
  margin: 2px 0;
  animation: bounceMoney 2s infinite alternate;
  color: #1db954; /* emerald green */
  text-shadow: 0 0 6px rgba(29, 185, 84, 0.8),
               0 0 12px rgba(29, 185, 84, 0.6),
               0 0 20px rgba(29, 185, 84, 0.4);
}
/* Make all main feature sections clickable */
.challenge-card,
.coach-section,
.stats-display {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
  padding: 15px;
}

/* Hover Effects */
.challenge-card:hover,
.coach-section:hover,
.stats-display:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
}

/* Glow Animation */
@keyframes glowPulse {
  0% { box-shadow: 0 0 5px rgba(0,200,255,0.3); }
  50% { box-shadow: 0 0 20px rgba(0,200,255,0.7); }
  100% { box-shadow: 0 0 5px rgba(0,200,255,0.3); }
}

/* Apply glow animation */
.challenge-card:hover,
.coach-section:hover,
.stats-display:hover {
  animation: glowPulse 1.5s infinite;
}
/* Progress bar */
.progress-bar {
  width: 100%;
  height: 10px;
  background: #eee;
  border-radius: 5px;
  margin: 10px 0;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  transition: width 0.5s ease-in-out;
}
.progress-text {
  font-size: 0.9rem;
  color: #555;
}

/* CTA Button */
.join-btn {
  margin-top: 10px;
  padding: 8px 15px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.join-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(0,200,255,0.7);
}
.challenge-message {
  margin-top: 10px;
  font-size: 16px;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.challenge-message {
  color: green;
  font-weight: bold;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.fighters-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: #222; /* match your theme */
  margin: 0;
}
.fighters-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.fighters-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  display: inline-block;
}

.shield-icon {
  font-size: 1.8rem;
  color: #ffcc00; /* golden shield for contrast */
}
/* ========== Fighters Modal ========== */
.fighters-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.fighters-modal-overlay.active {
  display: flex;
}

.fighters-modal-container {
  position: relative;
  background: #111;
  border-radius: 15px;
  padding: 30px 20px 40px;
  max-width: 650px;
  width: 90%;
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  animation: scaleIn 0.4s ease;
}

/* Scale in animation */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Close Button */
.fighters-close {
  position: absolute;
  top: 15px; right: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #ff4757;
  transition: 0.3s;
}
.fighters-close:hover { transform: scale(1.2); }

/* Blinking Animated Title */
.fighters-modal-title {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
  animation: blinkColors 2s infinite;
}

@keyframes blinkColors {
  0% { color: #ff4757; }
  25% { color: #00ffff; }
  50% { color: #ffcc00; }
  75% { color: #ff00ff; }
  100% { color: #ff4757; }
}

/* Avatar Grid */
.fighters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 15px;
  justify-items: center;
  margin-bottom: 25px;
}

.fighter-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00ffff;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeWave 1s forwards;
}

/* Staggered wave animation */
.fighter-avatar:nth-child(1) { animation-delay: 0.1s; }
.fighter-avatar:nth-child(2) { animation-delay: 0.2s; }
.fighter-avatar:nth-child(3) { animation-delay: 0.3s; }
.fighter-avatar:nth-child(4) { animation-delay: 0.4s; }
.fighter-avatar:nth-child(5) { animation-delay: 0.5s; }
.fighter-avatar:nth-child(6) { animation-delay: 0.6s; }
.fighter-avatar:nth-child(7) { animation-delay: 0.7s; }
.fighter-avatar:nth-child(8) { animation-delay: 0.8s; }
.fighter-avatar:nth-child(9) { animation-delay: 0.9s; }
.fighter-avatar:nth-child(10) { animation-delay: 1s; }

@keyframes fadeWave {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fighter-avatar:hover {
  transform: scale(1.15);
  border-color: #ff4757;
  transition: 0.3s;
}

/* CTA Button */
.join-fighters-btn {
  background: linear-gradient(90deg, #ff4757, #ffcc00, #00ffff);
  background-size: 300% 300%;
  color: #111;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  animation: gradientShift 4s infinite, pulseBtn 1.5s infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulseBtn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.join-fighters-btn:hover {
  color: #fff;
  transform: scale(1.12);
  transition: 0.3s;
}

/* Fix container width and spacing */
.leaderboard {
  width: 100%;
  max-width: 900px;  /* keeps it neat in center */
  margin: 0 auto 40px auto; /* center + space below */
  display: block;   /* force full block, no floating */
  clear: both;      /* prevent other sections jumping */
}

/* Each leaderboard item */
.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
}

/* --- Leaderboard Patch --- */
.leaderboard {
  width: 100%;               /* take full row */
  max-width: 900px;          /* optional: keeps it neat */
  margin: 0 auto 40px auto;  /* center + spacing below */
  display: block;            /* ensures it's a block section */
  clear: both;               /* clears floats from above */
}

.leaderboard-item {
  display: flex;              /* side by side layout */
  align-items: center;        /* vertically align content */
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-sizing: border-box;     /* avoid stretching */
  width: 100%;                /* keep full width inside container */
}

.leader-info {
  flex: 1;                    /* stretch in middle */
  margin-left: 12px;
}

.leader-score {
  text-align: right;
  min-width: 120px;           /* stop jumping to next line */
}

.leader-avatar {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  object-fit: cover;
}

/* ================================
   🎬 Cinematic Leaderboard Styles
   ================================ */

.leaderboard {
  max-width: 800px;
  margin: 60px auto;
  padding: 30px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 200, 255, 0.2);
  text-align: center;
  position: relative;
  z-index: 1;
}

.leaderboard-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 25px;
  background: linear-gradient(90deg, #00f7ff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowTitle 3s infinite alternate;
}

@keyframes glowTitle {
  from { text-shadow: 0 0 10px #00f7ff, 0 0 20px #ff00ff; }
  to { text-shadow: 0 0 20px #00f7ff, 0 0 40px #ff00ff; }
}

/* Leaderboard items */
.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 20px;
  margin: 15px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leaderboard-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 200, 255, 0.2);
}

/* Rank styles */
.rank {
  font-size: 1.8rem;
  flex: 0 0 50px;
  text-align: center;
}

.leader-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin: 0 15px;
  border: 2px solid #00f7ff;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
  object-fit: cover;
}

.leader-info {
  flex: 1;
  text-align: left;
  color: #fff;
}

.leader-name {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
}

.leader-streak {
  font-size: 0.9rem;
  color: #aaa;
}

.leader-score {
  text-align: right;
}

.score {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  color: #00f7ff;
}

.achievement {
  font-size: 0.85rem;
  color: #ff66ff;
}

/* Responsive Layout */
@media (max-width: 600px) {
  .leaderboard-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 15px;
  }

  .leader-score {
    text-align: left;
    margin-top: 10px;
  }
}

/* Rank-based highlight */
.leaderboard-item:nth-child(1) {
  border: 1px solid gold;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.leaderboard-item:nth-child(2) {
  border: 1px solid silver;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.6);
}
.leaderboard-item:nth-child(3) {
  border: 1px solid #cd7f32; /* Bronze */
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.6);
}

/* Animated entry effect */
.leaderboard-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;
}
.leaderboard-item:nth-child(1) { animation-delay: 0.2s; }
.leaderboard-item:nth-child(2) { animation-delay: 0.4s; }
.leaderboard-item:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Score glow */
.score {
  animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 5px #00f7ff; }
  to { text-shadow: 0 0 15px #00f7ff, 0 0 25px #ff00ff; }
}

/* override for anchored modal (used by JS) */
.anchored-modal {
  display: none; /* JS toggles display + inline styles */
  background: rgba(0,0,0,0.85); /* overlay limited to section */
  backdrop-filter: blur(6px);
}

/* when JS sets active class */
.anchored-modal.active {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* override for anchored modal (used by JS) */
.anchored-modal {
  display: none; /* JS toggles display + inline styles */
  background: rgba(0,0,0,0.85); /* overlay limited to section */
  backdrop-filter: blur(6px);
}

/* when JS sets active class */
.anchored-modal.active {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* === Adjust modal widths only === */

/* Coach Vital Boost modal */
.coach-breathing-modal-container {
  max-width: 700px;   /* wider than before */
  width: 90%;         /* scales nicely on smaller screens */
}

/* Fighters modal */
.fighters-modal-container {
  max-width: 880px;   /* give this one more width since grid inside */
  width: 92%;
}

/* Mobile: still shrink a bit */
@media (max-width: 720px) {
  .coach-breathing-modal-container,
  .fighters-modal-container {
    max-width: 96%;   /* nearly full width */
    width: 96%;
  }
}

/* Coach Vital Boost Modal */
#coachBreathingModal .coach-breathing-modal-container {
  width: 800px !important;   /* Stretch width */
  max-width: 90%;            /* Responsive */
  height: auto !important;   /* Prevent tall stretch */
  margin: auto;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b0b;       /* Keep dark theme */
  padding: 20px;
}

/* Fighters Modal */
#fightersModal .fighters-modal-container {
  width: 600px !important;   /* Stretch width */
  max-width: 90%;
  height: auto !important;
  margin: auto;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b0b;
  padding: 20px;
}

/* ✅ Coach Vital Boost Modal (wider) */
#coachBreathingModal .coach-breathing-modal-container {
  width: 840px !important;
  max-width: 90% !important;
  height: auto !important;
  max-height: 85vh !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  border-radius: 16px;
}

/* ✅ Fighters Modal (slightly smaller) */
#fightersModal .fighters-modal-container {
  width: 640px !important;
  max-width: 85% !important;
  height: auto !important;
  max-height: 80vh !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  border-radius: 16px;
}

/* Restore Original Coach Breathing Modal */
.coach-breathing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* dimmed background */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Modal container */
.coach-breathing-modal-container {
  background: #111;                  /* original dark background */
  border-radius: 15px;
  padding: 20px;
  width: 70vw;                       /* stretch horizontally */
  max-width: 1000px;                 /* cap on desktops */
  height: auto;                      /* remove forced tall height */
  max-height: 90vh;                  /* prevent overflow */
  overflow-y: auto;                  /* only scroll if needed */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Background animations */
.breathing-background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #222 0%, #000 100%);
  border-radius: 15px;
  overflow: hidden;
  z-index: 0;
}

.breathing-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('particles.png') repeat;
  opacity: 0.3;
  z-index: 0;
}

/* Modal content */
.breathing-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

.breathing-image-container {
  max-height: 50vh;    /* prevent image from blowing up */
  margin-bottom: 20px;
}

.breathing-image {
  max-width: 100%;
  border-radius: 10px;
}

.breathing-controls {
  margin-top: 10px;
}

.stop-breathing-btn {
  background: #ff5555;
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.stop-breathing-btn:hover {
  background: #ff3333;
}

/* ---------- Gamified Tracker: force spacing between Coach & Fighters ---------- */
/* 1) General spacing for the two card types (safe & global) */
.gamified-section .coach-section,
.gamified-section .stats-display,
.coach-section,
.stats-display,
.fighters-card,
.coach-card {
  display: block !important;       /* ensure they behave like block elements */
  width: 100% !important;
  margin: 0 0 28px 0 !important;   /* primary spacing between cards */
  box-sizing: border-box !important;
}

/* 2) If Fighters follows Coach as a direct sibling, ensure extra top gap */
.gamified-section .coach-section + .stats-display,
.coach-section + .stats-display,
.coach-section + .fighters-card {
  margin-top: 32px !important;
}

/* 3) If one or both were accidentally absolutely-positioned (common source of overlap), reset positioning */
.gamified-section .coach-section[style*="position: absolute"],
.gamified-section .stats-display[style*="position: absolute"],
.coach-section[style*="position: absolute"],
.stats-display[style*="position: absolute"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-bottom: 28px !important;
  z-index: 1 !important;
}

/* 4) Last-child safety to avoid extra bottom gap in the section */
.gamified-section .tracker-content > :last-child,
.gamified-section > :last-child {
  margin-bottom: 0 !important;
}

/* 5) Small-screen adjustments */
@media (max-width: 768px) {
  .gamified-section .coach-section,
  .gamified-section .stats-display {
    margin-bottom: 22px !important;
  }
}

/* Gamified Tracker Section */
.gamified-section {
  margin: 40px auto;
  padding: 20px;
  background: #f8f9ff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: center;
}

.gamified-section .section-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 25px;
  color: #333;
}

/* Tracker Content Layout */
.tracker-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

/* Card Styles */
.card {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  padding: 20px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}

.card-description {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

/* Buttons */
.action-btn {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.action-btn:hover {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
}

/* VS Layout */
.vs-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 80px;
}

.vs-text {
  font-size: 2rem;
  font-weight: bold;
  color: #ff4d4d;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Layout */
.tracker-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* space between items */
  margin-top: 2rem;
}

/* VS Center */
.vs-layout {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-text {
  font-size: 2rem;
  font-weight: bold;
  color: #ff4d6d;
  background: #fff;
  border-radius: 50%;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Card styling */
.card {
  background: linear-gradient(135deg, #f0f9ff, #e0f7fa);
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
}

/* Avatar */
.card-avatar {
  margin-bottom: 1rem;
}

.card-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

/* Title */
.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Description */
.card-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1rem;
}

/* Button */
.action-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.action-btn:hover {
  background: #0056b3;
}

/* Specific card touches */
.coach-card .action-btn {
  background: #28a745; /* green */
}

.coach-card .action-btn:hover {
  background: #1e7e34;
}

.fighters-card .action-btn {
  background: #e83e8c; /* pink */
}

.fighters-card .action-btn:hover {
  background: #bd216d;
}

/* Gamified Section Container */
.gamified-section {
  background: linear-gradient(135deg, #f9fafb, #f1f5f9); /* soft light gray */
  padding: 2rem;
  border-radius: 20px;
  margin: 2rem auto;
  max-width: 1000px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

/* Title styling */
.gamified-section .section-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: #333;
}

/* Tracker layout stays same */
.tracker-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* Card styling (cleaner background) */
.card {
  background: #ffffff; /* solid white card on soft section bg */
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

/* ===== Strong override for Gamified Tracker container ===== */
.gamified-section {
  /* section background (choose light or dark per your app theme) */
  background: linear-gradient(135deg, #0f2740 0%, #0b2540 100%) !important;
  color: #ffffff !important;

  /* layout constraints so it doesn't stretch the whole page */
  max-width: 1100px !important;
  margin: 40px auto !important;
  padding: 28px !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(2,12,27,0.45) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Title color inside the section */
.gamified-section .section-title {
  color: #f6fbff !important;
  margin-bottom: 20px !important;
}

/* Cards placed on top of the section */
.gamified-section .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
  width: 260px !important;
}

/* VS center styling */
.gamified-section .vs-layout .vs-text {
  background: radial-gradient(circle at 40% 30%, #ffffff22, #0000) !important;
  color: #ff6b90 !important;
  padding: 12px 18px !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(255,107,144,0.12) !important;
}

/* Ensure separation from the next section (Live Leaderboard) */
.gamified-section {
  margin-bottom: 40px !important;
}

/* Extra safety: bump leaderboard down if it's too close */
.leaderboard,
.cinematic-journey,
#leaderboard {
  margin-top: 48px !important;
}

/* Responsive: collapse horizontally on small screens */
@media (max-width: 820px) {
  .tracker-content, .vs-layout, .gamified-section .tracker-content {
    flex-direction: column !important;
    gap: 18px !important;
    align-items: center !important;
  }

  .gamified-section {
    padding: 20px !important;
    margin: 24px 16px !important;
  }
}

.gamified-section .card {
  background: #ffffff; /* clean white cards */
  color: #0f2740; /* dark navy text for readability */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); /* subtle lift */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gamified-section .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.gamified-section h2,
.gamified-section h3,
.gamified-section .card-title {
  color: #ffffff; /* make headings white */
  font-weight: 700;
}

.gamified-section .card h3,
.gamified-section .card .card-title {
  color: #0f2740; /* keep card titles dark */
}

.gamified-section .card p,
.gamified-section .card li {
  color: #333333; /* readable dark gray inside white cards */
  font-size: 15px;
  line-height: 1.5;
}

/* Coach Vital Boost title */
.gamified-section .coach-card h3,
.gamified-section .coach-card h4 {
  color: #00ff66; /* bright green */
  font-weight: 700;
  animation: blinkPulse 2s infinite;
}

/* Fighters title */
.gamified-section .fighters-card h3,
.gamified-section .fighters-card h4 {
  color: #ff8800; /* orange */
  font-weight: 700;
  animation: blinkPulse 2s infinite;
}

/* Blinking + pulsing effect */
@keyframes blinkPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.gamified-section .card p,
.gamified-section .card li,
.gamified-section .card span {
  color: #ffffff; /* white text inside cards */
}

/* Coach Vital Boost Title (Green + Pulse) */
.coach-section h4 {
  color: #00ff66; /* bright green */
  font-weight: 700;
  animation: blinkPulse 2s infinite;
}

/* Fighters Title (Orange + Pulse) */
.fighters-title {
  color: #ff8800; /* orange */
  font-weight: 700;
  animation: blinkPulse 2s infinite;
}

/* Inner text inside cards → White */
.coach-section p,
.stats-display p,
.stats-display span {
  color: #ffffff;
}

/* Pulse + Blink Animation */
@keyframes blinkPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* Coach Vital Boost Title */
.coach-card .card-title {
  color: green !important;
  font-weight: bold;
  animation: pulseGreen 2s infinite;
}

/* Fighters Title */
.fighters-card .card-title {
  color: orange !important;
  font-weight: bold;
  animation: pulseOrange 2s infinite;
}

/* Pulse Animations */
@keyframes pulseGreen {
  0% { text-shadow: 0 0 5px green; }
  50% { text-shadow: 0 0 15px lime; }
  100% { text-shadow: 0 0 5px green; }
}

@keyframes pulseOrange {
  0% { text-shadow: 0 0 5px orange; }
  50% { text-shadow: 0 0 15px gold; }
  100% { text-shadow: 0 0 5px orange; }
}