/* DECH — Cvičení styly (light v2) */
*{margin:0;padding:0;box-sizing:border-box;}
body{
    background:#fef7ed;color:#0f172a;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100vh;min-height:100dvh;padding:20px 15px;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    user-select:none;-webkit-user-select:none;
}

.screen{display:none;flex-direction:column;align-items:center;width:100%;max-width:560px;text-align:center;}
.screen.active{display:flex;}

/* === INTRO SCREEN === */
.type-tabs{display:flex;gap:6px;margin-bottom:25px;}
.type-tab{
    padding:10px 16px;border-radius:20px;border:1px solid #e2e8f0;
    background:#ffffff;color:#475569;font-size:.85rem;font-weight:600;
    cursor:pointer;transition:all .2s;text-decoration:none;
}
.type-tab.active{background:var(--phase-color);color:#ffffff;border-color:var(--phase-color);}

.intro-icon{font-size:3rem;margin-bottom:10px;}
.intro-title{font-size:1.4rem;font-weight:700;margin-bottom:4px;color:#0f172a;}
.intro-sub{font-size:.9rem;color:#475569;margin-bottom:20px;}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:20px;}
.info-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 10px;box-shadow:0 4px 16px rgba(15,23,42,0.08);}
.info-val{font-size:1.3rem;font-weight:700;color:var(--phase-color);}
.info-lbl{font-size:.65rem;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-top:3px;}

.sound-toggles{display:flex;gap:8px;margin-bottom:25px;}
.snd-btn{
    padding:10px 16px;border-radius:12px;border:1px solid #e2e8f0;
    background:#ffffff;color:#475569;font-size:.85rem;cursor:pointer;transition:all .2s;
}
.snd-btn.active{background:#dbeafe;color:#0f172a;border-color:#60a5fa;}

.btn-start{
    width:100%;padding:18px;border:2px solid #ffffff;border-radius:30px;
    background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);
    color:#ffffff;font-size:1.1rem;font-weight:700;cursor:pointer;
    box-shadow:0 6px 24px rgba(8,145,178,.45), 0 2px 8px rgba(15,23,42,.25);transition:transform .15s;
}
.btn-start:active{transform:scale(.96);}

.back-link{display:block;margin-top:15px;color:#94a3b8;font-size:.8rem;text-decoration:none;}
.back-link:hover{color:#475569;}

.community-line{
    font-size:.8rem;color:#475569;margin-bottom:15px;
    display:flex;align-items:center;gap:6px;justify-content:center;
}
.pulse-dot{
    width:8px;height:8px;border-radius:50%;background:#4CAF50;
    animation:pulseDot 2s ease infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(76,175,80,.5)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(76,175,80,0)}}

.btn-share{
    width:100%;padding:14px;border:1px solid #e2e8f0;border-radius:30px;
    background:#ffffff;color:#475569;font-size:.9rem;cursor:pointer;
    transition:all .2s;margin-top:8px;
}
.btn-share:active{background:#f1f5f9;color:#0f172a;}

/* === EXERCISE SCREEN === */
/* Horní nápis — skoro od kraje ke kraji */
.ex-header{
    margin: 4px 0 6px;
    width: 92vw; max-width: 520px;
    font-size: clamp(1rem, 3.2vw, 1.25rem);
    color:#94a3b8;font-weight:700;
    letter-spacing:0.18em;
    text-transform: uppercase;
}
.cycle-counter{
    font-size: clamp(0.95rem, 2.6vw, 1.05rem);
    color:#475569; margin-bottom:24px;
    font-weight: 600;
}
.cycle-counter span{color:var(--phase-color);font-weight:800;}

/* Kruh skoro do krajů — pojistka aspect-ratio aby NIKDY nevznikla elipsa */
.circle-wrap{
    position:relative;
    width: min(92vw, 400px);
    aspect-ratio: 1 / 1;
    display:flex;align-items:center;justify-content:center;
    margin: 0 auto 36px;
}
@media (min-width:600px){
    .circle-wrap{ width: min(70vw, 480px); }
}

.breath-circle{
    width:100%; height:100%;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    border:18px solid var(--phase-color);
    background:radial-gradient(circle, color-mix(in srgb, var(--phase-color) 25%, transparent), color-mix(in srgb, var(--phase-color) 10%, transparent));
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--phase-color) 25%, transparent),
        0 0 100px 30px color-mix(in srgb, var(--phase-color) 50%, transparent),
        0 20px 140px 20px color-mix(in srgb, var(--phase-color) 40%, transparent),
        inset 0 0 80px color-mix(in srgb, var(--phase-color) 22%, transparent);
    will-change:transform;
    transform:scale(.4);
    box-sizing:border-box;
    aspect-ratio: 1 / 1;
}

/* Texty vždy bílé s jemným tmavým 1px outlinem (varianta 3 z demo) */
.circle-count{
    font-size: clamp(5.5rem, 20vw, 9rem);
    font-weight:900;line-height:1;color:#ffffff;
    text-shadow:
        -1px -1px 0 rgba(15,23,42,0.85),  1px -1px 0 rgba(15,23,42,0.85),
        -1px  1px 0 rgba(15,23,42,0.85),  1px  1px 0 rgba(15,23,42,0.85),
         0 4px 18px rgba(0,0,0,0.40);
    letter-spacing:-0.02em;
}
.circle-phase-sm{
    font-size: clamp(1.8rem, 5.5vw, 2.6rem);
    color:#ffffff;
    font-weight:800;
    margin-top:6px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    opacity:1;
    text-shadow:
        -1px -1px 0 rgba(15,23,42,0.80),  1px -1px 0 rgba(15,23,42,0.80),
        -1px  1px 0 rgba(15,23,42,0.80),  1px  1px 0 rgba(15,23,42,0.80),
         0 2px 10px rgba(0,0,0,0.35);
}

/* "Vydechni..." — níže a skoro od kraje ke kraji */
.phase-text{
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight:900;
    margin: 18px auto 8px;
    min-height:1.5em;
    width: 92vw; max-width: 520px;
    color:#ffffff;
    text-shadow:
        -1px -1px 0 rgba(15,23,42,0.85),  1px -1px 0 rgba(15,23,42,0.85),
        -1px  1px 0 rgba(15,23,42,0.85),  1px  1px 0 rgba(15,23,42,0.85),
         0 4px 18px rgba(0,0,0,0.45);
    letter-spacing:-0.01em;
    line-height: 1.1;
}
.phase-hint{
    font-size: clamp(1.05rem, 2.9vw, 1.25rem);
    color:#ffffff; font-weight:700;
    min-height:1.2em;
    margin: 0 auto 24px;
    width: 92vw; max-width: 520px;
    text-shadow:
        -1px -1px 0 rgba(15,23,42,0.75),  1px -1px 0 rgba(15,23,42,0.75),
        -1px  1px 0 rgba(15,23,42,0.75),  1px  1px 0 rgba(15,23,42,0.75),
         0 2px 12px rgba(0,0,0,0.30);
}

.progress-wrap{width:100%;height:4px;background:#e2e8f0;border-radius:2px;margin-bottom:20px;overflow:hidden;}
.progress-bar{height:100%;background:var(--phase-color);border-radius:2px;transition:width .3s;}

.ex-controls{display:flex;gap:12px;}
.ex-btn{
    padding:14px 28px;border-radius:25px;border:1px solid #e2e8f0;
    background:#ffffff;color:#475569;font-size:1rem;cursor:pointer;transition:all .15s;
}
.ex-btn:active{transform:scale(.95);}
.ex-btn.pause{font-size:1.2rem;}

/* === DONE SCREEN === */
.done-icon{font-size:3.5rem;margin-bottom:15px;}
.done-title{font-size:1.4rem;font-weight:700;margin-bottom:5px;color:#0f172a;}
.done-sub{font-size:.9rem;color:#475569;margin-bottom:15px;}
.wisdom-bubble{
    display:none;background:linear-gradient(135deg,rgba(96,165,250,0.12),rgba(37,99,235,0.08));
    border:1px solid rgba(96,165,250,0.35);border-radius:16px;padding:14px 18px;
    margin:0 auto 20px;max-width:320px;text-align:center;
    animation:wisdomIn 0.8s ease forwards;opacity:0;
}
.wisdom-bubble.show{display:block;}
.wisdom-text{font-size:.85rem;color:#1e3a8a;line-height:1.5;font-style:italic;}
.wisdom-author{font-size:.68rem;color:#475569;margin-top:6px;}
@keyframes wisdomIn{
    0%{opacity:0;transform:translateY(15px) scale(0.95);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}

.done-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;margin-bottom:25px;}
.done-stat{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 8px;box-shadow:0 4px 16px rgba(15,23,42,0.08);}
.done-stat .info-val{font-size:1.1rem;}
.done-stat .info-lbl{font-size:.6rem;}

.btn-outline{
    display:block;width:100%;padding:14px;border:1px solid #e2e8f0;border-radius:25px;
    background:transparent;color:#475569;font-size:.95rem;font-weight:600;
    cursor:pointer;text-decoration:none;text-align:center;margin-bottom:8px;transition:all .15s;
}
.btn-outline:active{transform:scale(.97);}

/* === PHASE COLORS === */
.phase-inhale{--phase-color:#ff6b35;}      /* sunset oranž */
.phase-hold{--phase-color:#10b981;}        /* sytá smaragdová */
.phase-exhale{--phase-color:#0891b2;}      /* sytá tyrkysová - kontrast proti modrému body */
.phase-hold2{--phase-color:#10b981;}

/* Accessibility: prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
    .breath-circle{transition:none!important;}
    .reward-item,.reward-text{animation:none!important;}
}

/* === GAMIFICATION REWARDS === */
.reward-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden;}
.reward-item{position:absolute;bottom:-60px;font-size:2.2rem;animation:floatUp 2.2s ease-out forwards;opacity:0;}
@keyframes floatUp{
    0%{opacity:0;transform:translateY(0) scale(.5);}
    15%{opacity:1;transform:translateY(-80px) scale(1.3);}
    50%{opacity:1;transform:translateY(-220px) scale(1);}
    100%{opacity:0;transform:translateY(-400px) scale(.7);}
}
.reward-text{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:1.3rem;font-weight:800;color:#ff6b35;text-shadow:0 2px 15px rgba(236,72,153,.5);animation:rewardPop 3s ease-out forwards;z-index:1001;pointer-events:none;text-align:center;line-height:1.6;}
@keyframes rewardPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
    12%{opacity:1;transform:translate(-50%,-50%) scale(1.2);}
    25%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    75%{opacity:1;}
    100%{opacity:0;transform:translate(-50%,-60%) scale(.9);}
}
.streak-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.25);border-radius:20px;padding:6px 14px;margin-top:10px;font-size:.85rem;color:#ff6b35;font-weight:600;}
.level-badge{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:#94a3b8;margin-top:6px;}