/**

 * @author      Mike Fairbrother <mike@fairbrother.me>

 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/* Breath - Calm Focus Game Styles */







/* Logo */



.breath-logo { margin-bottom: 20px; }



.breath-orb-preview {



    width: 80px; height: 80px;



    border-radius: 50%;



    background: radial-gradient(circle at 40% 40%, rgba(96,165,250,0.6), rgba(167,139,250,0.4), rgba(96,165,250,0.1));



    box-shadow: 0 0 40px rgba(96,165,250,0.3), 0 0 80px rgba(167,139,250,0.15);



    margin: 0 auto;



    animation: breath-preview 6s ease-in-out infinite;



}



@keyframes breath-preview {



    0%, 100% { transform: scale(0.8); opacity: 0.7; }



    50% { transform: scale(1.1); opacity: 1; }



}







/* Title */



.breath-title {



    font-size: 48px;



    font-weight: 800;



    letter-spacing: -1px;



    background: linear-gradient(135deg, #60a5fa, #a78bfa, #c084fc);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 4px;



}



.breath-subtitle {



    font-size: 15px;



    color: rgba(255,255,255,0.45);



    font-weight: 500;



    margin-bottom: 24px;



}







/* Menu stats */



.breath-stats-row {



    display: flex;



    gap: 20px;



    margin-bottom: 28px;



    justify-content: center;



}



.breath-menu-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.breath-menu-num {



    font-size: 24px;



    font-weight: 800;



    color: #fff;



}



.breath-menu-lbl {



    font-size: 10px;



    color: rgba(255,255,255,0.35);



    text-transform: uppercase;



    letter-spacing: 0.8px;



    font-weight: 600;



}







/* Pattern selector */



.breath-pattern-selector, .breath-duration-selector {



    margin-bottom: 20px;



    width: 100%;



    max-width: 320px;



}



.breath-pattern-label {



    font-size: 11px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 1px;



    color: rgba(255,255,255,0.3);



    margin-bottom: 8px;



    text-align: left;



}



.breath-patterns {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 8px;



}



.breath-pattern-btn {



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 12px 10px;



    border: 1px solid rgba(255,255,255,0.08);



    border-radius: 12px;



    background: rgba(255,255,255,0.04);



    cursor: pointer;



    transition: all 150ms;



    font-family: var(--gp-font-stack);



}



.breath-pattern-btn.active {



    background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));



    border-color: rgba(96,165,250,0.4);



}



.bp-name {



    font-size: 14px;



    font-weight: 700;



    color: #fff;



}



.bp-desc {



    font-size: 11px;



    color: rgba(255,255,255,0.4);



    font-weight: 500;



}



.breath-pattern-btn.active .bp-name { color: #60a5fa; }







/* Duration selector */



.breath-durations {



    display: flex;



    gap: 6px;



}



.breath-dur-btn {



    flex: 1;



    padding: 10px 6px;



    border: 1px solid rgba(255,255,255,0.08);



    border-radius: 10px;



    background: rgba(255,255,255,0.04);



    color: rgba(255,255,255,0.5);



    font-size: 12px;



    font-weight: 600;



    cursor: pointer;



    transition: all 150ms;



    font-family: var(--gp-font-stack);



}



.breath-dur-btn.active {



    background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));



    border-color: rgba(96,165,250,0.4);



    color: #fff;



}







/* Breathing Session */



.breath-session {



    position: absolute;



    inset: 0;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    padding: 20px;



}







.breath-timer {



    font-size: 16px;



    font-weight: 600;



    color: rgba(255,255,255,0.3);



    letter-spacing: 1px;



    position: absolute;



    top: 24px;



}







/* Visual orb area */



.breath-visual {



    position: relative;



    width: 280px;



    height: 280px;



    display: flex;



    align-items: center;



    justify-content: center;



}







.breath-ring {



    position: absolute;



    border-radius: 50%;



    border: 1px solid rgba(96,165,250,0.1);



    transition: all 0.3s ease;



}



.breath-ring-outer {



    width: 260px; height: 260px;



}



.breath-ring-mid {



    width: 220px; height: 220px;



    border-color: rgba(167,139,250,0.1);



}







.breath-orb {



    width: 120px; height: 120px;



    border-radius: 50%;



    background: radial-gradient(circle at 40% 40%, rgba(96,165,250,0.7), rgba(167,139,250,0.5), rgba(96,165,250,0.15));



    box-shadow: 0 0 40px rgba(96,165,250,0.3), 0 0 80px rgba(167,139,250,0.15);



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;



    z-index: 2;



}



.breath-orb.inhale {



    transform: scale(1.8);



    box-shadow: 0 0 60px rgba(96,165,250,0.5), 0 0 120px rgba(167,139,250,0.25);



}



.breath-orb.hold {



    box-shadow: 0 0 50px rgba(96,165,250,0.4), 0 0 100px rgba(167,139,250,0.2);



}



.breath-orb.exhale {



    transform: scale(0.7);



    box-shadow: 0 0 30px rgba(96,165,250,0.2), 0 0 60px rgba(167,139,250,0.1);



}







.breath-instruction {



    font-size: 14px;



    font-weight: 700;



    color: rgba(255,255,255,0.9);



    letter-spacing: 0.5px;



    transition: opacity 0.3s;



}



.breath-count {



    font-size: 28px;



    font-weight: 800;



    color: #fff;



    font-variant-numeric: tabular-nums;



}







.breath-particles {



    position: absolute;



    inset: 0;



    pointer-events: none;



    z-index: 1;



}







/* Progress */



.breath-progress {



    margin-top: 40px;



    width: 200px;



    text-align: center;



}



.breath-progress-bar {



    height: 3px;



    background: rgba(255,255,255,0.08);



    border-radius: 2px;



    overflow: hidden;



    margin-bottom: 8px;



}



.breath-progress-fill {



    height: 100%;



    background: linear-gradient(90deg, #60a5fa, #a78bfa);



    border-radius: 2px;



    width: 0%;



    transition: width 0.5s ease;



}



.breath-cycle-count {



    font-size: 12px;



    color: rgba(255,255,255,0.3);



    font-weight: 600;



}







.breath-stop-btn {



    position: absolute;



    bottom: 32px;



    padding: 10px 24px;



    border: 1px solid rgba(255,255,255,0.1);



    border-radius: 12px;



    background: rgba(255,255,255,0.05);



    color: rgba(255,255,255,0.4);



    font-size: 14px;



    font-weight: 600;



    cursor: pointer;



    font-family: var(--gp-font-stack);



    transition: all 150ms;



}



.breath-stop-btn:active { transform: scale(0.95); }







/* Complete screen */



.breath-complete-orb {



    width: 60px; height: 60px;



    border-radius: 50%;



    background: radial-gradient(circle at 40% 40%, rgba(46,213,115,0.6), rgba(96,165,250,0.4));



    box-shadow: 0 0 30px rgba(46,213,115,0.3);



    margin: 0 auto 20px;



}



.breath-complete-title {



    font-size: 28px;



    font-weight: 800;



    background: linear-gradient(135deg, #60a5fa, #2ed573);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 8px;



}



.breath-complete-msg {



    font-size: 14px;



    color: rgba(255,255,255,0.4);



    margin-bottom: 28px;



    font-weight: 500;



}



.breath-complete-stats {



    display: flex;



    gap: 24px;



    margin-bottom: 28px;



}



.breath-cstat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.breath-cstat-num {



    font-size: 24px;



    font-weight: 800;



    color: #fff;



}



.breath-cstat-lbl {



    font-size: 10px;



    color: rgba(255,255,255,0.35);



    text-transform: uppercase;



    letter-spacing: 0.8px;



    font-weight: 600;



}







/* Help sections */



.help-section { margin-bottom: 16px; }



.help-section h4 {



    font-size: 14px;



    font-weight: 700;



    color: #60a5fa;



    margin-bottom: 4px;



}



.help-section p {



    font-size: 13px;



    color: rgba(255,255,255,0.6);



    line-height: 1.6;



}