/**

 * @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.

 */

/**



 * Word Bloom - Styles



 * Flower/petal themed word puzzle



 */







/* ---- Game-specific tokens ---- */



:root {



    --wb-pink: #f368e0;



    --wb-coral: #ff6b6b;



    --wb-gradient: linear-gradient(135deg, #f368e0, #ff6b6b);



    --wb-petal-size: 64px;



    --wb-center-size: 80px;



    --wb-bloom-radius: 100px;



    --wb-glow-pink: rgba(243, 104, 224, 0.4);



    --wb-glow-coral: rgba(255, 107, 107, 0.3);



}







/* ---- Menu Screen ---- */



.game-title {



    font-size: 48px;



    font-weight: 900;



    line-height: 1;



    background: var(--wb-gradient);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 8px;



    letter-spacing: -1px;



}







.game-subtitle {



    color: var(--gp-text-secondary);



    font-size: 15px;



    margin-bottom: 28px;



    font-weight: 500;



}







/* ---- Animated Bloom Logo ---- */



.bloom-logo {



    position: relative;



    width: 100px;



    height: 100px;



    margin: 0 auto 20px;



}







.logo-petal {



    position: absolute;



    width: 28px;



    height: 28px;



    border-radius: 50%;



    background: var(--wb-gradient);



    opacity: 0.7;



}







.logo-center {



    position: absolute;



    width: 32px;



    height: 32px;



    border-radius: 50%;



    background: linear-gradient(135deg, #fff, #f0d0ff);



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    box-shadow: 0 0 20px var(--wb-glow-pink);



}







.logo-petal.p1 { top: 8px; left: 50%; transform: translateX(-50%); }



.logo-petal.p2 { top: 22px; right: 8px; }



.logo-petal.p3 { bottom: 22px; right: 8px; }



.logo-petal.p4 { bottom: 8px; left: 50%; transform: translateX(-50%); }



.logo-petal.p5 { bottom: 22px; left: 8px; }



.logo-petal.p6 { top: 22px; left: 8px; }







.bloom-logo .logo-petal {



    animation: logo-pulse 3s ease-in-out infinite;



}



.logo-petal.p1 { animation-delay: 0s; }



.logo-petal.p2 { animation-delay: 0.5s; }



.logo-petal.p3 { animation-delay: 1s; }



.logo-petal.p4 { animation-delay: 1.5s; }



.logo-petal.p5 { animation-delay: 2s; }



.logo-petal.p6 { animation-delay: 2.5s; }







@keyframes logo-pulse {



    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }



    50% { opacity: 1; transform: translateX(-50%) scale(1.15); }



}



.logo-petal.p2, .logo-petal.p3, .logo-petal.p5, .logo-petal.p6 {



    animation-name: logo-pulse-no-tx;



}



@keyframes logo-pulse-no-tx {



    0%, 100% { opacity: 0.5; transform: scale(1); }



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



}







/* ---- Mode Toggle ---- */



.mode-toggle {



    display: flex;



    gap: 4px;



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



    border-radius: 12px;



    padding: 4px;



    margin-bottom: 20px;



}







.mode-btn {



    padding: 10px 28px;



    border: none;



    border-radius: 10px;



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-text-secondary);



    background: transparent;



    cursor: pointer;



    transition: all 0.2s ease;



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



}







.mode-btn.active {



    background: var(--wb-gradient);



    color: #fff;



    box-shadow: 0 2px 12px var(--wb-glow-pink);



}







.menu-stats {



    display: flex;



    gap: 40px;



    margin-bottom: 24px;



}







/* ---- Progress Bar ---- */



.progress-bar-track {



    width: 100%;



    height: 4px;



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



}







.progress-bar-fill {



    height: 100%;



    width: 0%;



    background: var(--wb-gradient);



    border-radius: 2px;



    transition: width 0.4s ease;



}







/* ---- Current Word Display ---- */



.current-word {



    text-align: center;



    font-size: 28px;



    font-weight: 800;



    letter-spacing: 4px;



    min-height: 48px;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 8px 20px;



    color: #fff;



    text-transform: uppercase;



}







.current-word.invalid {



    animation: shake 0.4s ease;



}







.current-word .center-letter {



    color: var(--wb-pink);



}







@keyframes shake {



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



    20% { transform: translateX(-8px); }



    40% { transform: translateX(8px); }



    60% { transform: translateX(-4px); }



    80% { transform: translateX(4px); }



}







/* ---- Bloom Area ---- */



.bloom-area {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 10px;



    min-height: 0;



}







.bloom-container {



    position: relative;



    width: 280px;



    height: 280px;



}







/* ---- Petals ---- */



.petal {



    position: absolute;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;



    -webkit-tap-highlight-color: transparent;



    user-select: none;



    z-index: 2;



}







.petal-letter {



    font-size: 24px;



    font-weight: 800;



    color: #fff;



    text-transform: uppercase;



    pointer-events: none;



    line-height: 1;



}







/* Center petal */



.center-petal {



    width: var(--wb-center-size);



    height: var(--wb-center-size);



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    background: var(--wb-gradient);



    box-shadow: 0 0 30px var(--wb-glow-pink), 0 0 60px rgba(243, 104, 224, 0.15);



    z-index: 3;



}







.center-petal .petal-letter {



    font-size: 28px;



}







.center-petal:active,



.center-petal.selected {



    transform: translate(-50%, -50%) scale(1.1);



    box-shadow: 0 0 40px var(--wb-glow-pink), 0 0 80px rgba(243, 104, 224, 0.25);



}







/* Outer petals */



.outer-petal {



    width: var(--wb-petal-size);



    height: var(--wb-petal-size);



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



    border: 2px solid rgba(255, 255, 255, 0.12);



    backdrop-filter: blur(4px);



    -webkit-backdrop-filter: blur(4px);



}







.outer-petal:active,



.outer-petal.selected {



    transform: scale(1.12);



    background: rgba(243, 104, 224, 0.25);



    border-color: var(--wb-pink);



    box-shadow: 0 0 20px var(--wb-glow-pink);



}







/* Petal positions (circle around center) */



.outer-petal[data-index="1"] {



    top: 4px;



    left: 50%;



    transform: translateX(-50%);



}



.outer-petal[data-index="1"].selected {



    transform: translateX(-50%) scale(1.12);



}







.outer-petal[data-index="2"] {



    top: 48px;



    right: 8px;



}



.outer-petal[data-index="2"].selected {



    transform: scale(1.12);



}







.outer-petal[data-index="3"] {



    bottom: 48px;



    right: 8px;



}



.outer-petal[data-index="3"].selected {



    transform: scale(1.12);



}







.outer-petal[data-index="4"] {



    bottom: 4px;



    left: 50%;



    transform: translateX(-50%);



}



.outer-petal[data-index="4"].selected {



    transform: translateX(-50%) scale(1.12);



}







.outer-petal[data-index="5"] {



    bottom: 48px;



    left: 8px;



}



.outer-petal[data-index="5"].selected {



    transform: scale(1.12);



}







.outer-petal[data-index="6"] {



    top: 48px;



    left: 8px;



}



.outer-petal[data-index="6"].selected {



    transform: scale(1.12);



}







/* Connector lines between petals */



.bloom-container::before {



    content: '';



    position: absolute;



    top: 50%;



    left: 50%;



    width: 200px;



    height: 200px;



    transform: translate(-50%, -50%);



    border-radius: 50%;



    border: 1px dashed rgba(255, 255, 255, 0.06);



    pointer-events: none;



    z-index: 1;



}







/* SVG drag-to-spell connecting lines */


.bloom-lines {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    pointer-events: none;


    z-index: 10;


}





.bloom-line-segment {


    stroke: var(--wb-pink);


    stroke-width: 3;


    stroke-linecap: round;


    opacity: 0.8;


    filter: drop-shadow(0 0 6px var(--wb-glow-pink));


}





.bloom-line-active {


    stroke: rgba(243, 104, 224, 0.4);


    stroke-width: 2;


    stroke-linecap: round;


    stroke-dasharray: 6 4;


}





/* Petal drag-over highlight */


.petal.drag-over {


    transform: scale(1.18) !important;


    background: rgba(243, 104, 224, 0.35) !important;


    border-color: var(--wb-pink) !important;


    box-shadow: 0 0 24px var(--wb-glow-pink) !important;


}


.center-petal.drag-over {


    transform: translate(-50%, -50%) scale(1.15) !important;


}


.outer-petal[data-index="1"].drag-over,


.outer-petal[data-index="4"].drag-over {


    transform: translateX(-50%) scale(1.18) !important;


}





/* ---- Game Action Buttons ---- */



.game-actions {



    display: flex;



    justify-content: center;



    gap: 16px;



    padding: 8px 20px;



}







.action-btn {



    width: 52px;



    height: 52px;



    border: none;



    border-radius: 50%;



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



    color: var(--gp-text-secondary);



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: all 0.15s ease;



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



}







.action-btn:active {



    transform: scale(0.92);



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



}







.submit-btn {



    background: var(--wb-gradient);



    color: #fff;



    box-shadow: 0 2px 16px var(--wb-glow-pink);



}







.submit-btn:active {



    background: linear-gradient(135deg, #e050d0, #e05555);



}







/* ---- Found Words ---- */



.found-words {



    padding: 4px 16px;



    max-height: 88px;



    overflow-y: auto;



    -webkit-overflow-scrolling: touch;



}







.found-words-list {



    display: flex;



    flex-wrap: wrap;



    gap: 6px;



    justify-content: center;



}







.found-word-tag {



    padding: 4px 12px;



    border-radius: 20px;



    font-size: 13px;



    font-weight: 600;



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



    color: var(--gp-text-secondary);



    text-transform: uppercase;



    letter-spacing: 0.5px;



    animation: tag-pop 0.3s ease;



}







.found-word-tag.full-bloom {



    background: var(--wb-gradient);



    color: #fff;



    box-shadow: 0 2px 12px var(--wb-glow-pink);



}







@keyframes tag-pop {



    0% { transform: scale(0); opacity: 0; }



    60% { transform: scale(1.15); }



    100% { transform: scale(1); opacity: 1; }



}







/* ---- Give Up ---- */



.give-up-row {



    text-align: center;



    padding: 2px 0 10px;



}







.give-up-btn {



    border: none;



    background: none;



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



    font-size: 12px;



    font-weight: 600;



    cursor: pointer;



    padding: 6px 16px;



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



    text-decoration: underline;



    text-underline-offset: 2px;



}







.give-up-btn:active {



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



}







/* ---- Complete Screen ---- */



.complete-badge {



    font-size: 14px;



    font-weight: 700;



    padding: 6px 20px;



    border-radius: 20px;



    background: var(--wb-gradient);



    color: #fff;



    display: inline-block;



    margin-bottom: 12px;



    animation: gp-badge-pop 0.5s ease forwards;



}







.complete-title {



    font-size: 32px;



    font-weight: 900;



    background: var(--wb-gradient);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 20px;



}







.final-score-block {



    display: flex;



    flex-direction: column;



    align-items: center;



    margin-bottom: 20px;



}







.final-label {



    font-size: 12px;



    color: var(--gp-text-secondary);



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



}







.final-value {



    font-size: 48px;



    font-weight: 900;



    background: var(--wb-gradient);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}







.final-stats {



    display: flex;



    gap: 32px;



    margin-bottom: 24px;



}







.final-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}







.final-stat-num {



    font-size: 28px;



    font-weight: 800;



    color: #fff;



}







.final-stat-label {



    font-size: 11px;



    color: var(--gp-text-secondary);



    text-transform: uppercase;



    letter-spacing: 0.5px;



    font-weight: 600;



}







/* ---- Missed Words ---- */



.missed-words-section {



    margin-bottom: 24px;



    width: 100%;



    max-width: 320px;



}







.missed-title {



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-text-secondary);



    margin-bottom: 10px;



    text-transform: uppercase;



    letter-spacing: 1px;



}







.missed-words-list {



    display: flex;



    flex-wrap: wrap;



    gap: 6px;



    justify-content: center;



    max-height: 120px;



    overflow-y: auto;



}







.missed-word-tag {



    padding: 4px 12px;



    border-radius: 20px;



    font-size: 12px;



    font-weight: 600;



    background: rgba(255, 75, 75, 0.1);



    color: rgba(255, 120, 120, 0.7);



    text-transform: uppercase;



    letter-spacing: 0.5px;



}







/* ---- Help Modal ---- */



.help-body {



    display: flex;



    flex-direction: column;



    gap: 14px;



    text-align: left;



}







.help-item {



    display: flex;



    align-items: flex-start;



    gap: 12px;



}







.help-icon {



    font-size: 22px;



    flex-shrink: 0;



    width: 28px;



    text-align: center;



}







.help-item p {



    font-size: 14px;



    color: var(--gp-text-secondary);



    line-height: 1.4;



}







.help-item strong {



    color: var(--gp-text-primary);



}







/* ---- Full Bloom Celebration ---- */



.full-bloom-celebration {



    position: fixed;



    inset: 0;



    z-index: 200;



    display: flex;



    align-items: center;



    justify-content: center;



    pointer-events: none;



}







.full-bloom-text {



    font-size: 36px;



    font-weight: 900;



    background: var(--wb-gradient);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    animation: bloom-celebrate 1.5s ease forwards;



    text-shadow: none;



}







@keyframes bloom-celebrate {



    0% { transform: scale(0); opacity: 0; }



    30% { transform: scale(1.3); opacity: 1; }



    60% { transform: scale(1); opacity: 1; }



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



}







/* Petal bloom particles */



.bloom-particle {



    position: fixed;



    width: 10px;



    height: 10px;



    border-radius: 50%;



    background: var(--wb-gradient);



    pointer-events: none;



    z-index: 201;



    animation: bloom-particle 1s ease-out forwards;



}







@keyframes bloom-particle {



    0% {



        transform: translate(-50%, -50%) scale(1);



        opacity: 1;



    }



    100% {



        transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0);



        opacity: 0;



    }



}







/* ---- Toast adjustments ---- */



.gp-toast.success {



    border-color: rgba(243, 104, 224, 0.3);



}







.gp-toast.error {



    border-color: rgba(255, 75, 87, 0.3);



}







/* ---- Responsive tweaks ---- */



@media (max-height: 640px) {



    .bloom-container {



        width: 240px;



        height: 240px;



    }



    :root {



        --wb-petal-size: 56px;



        --wb-center-size: 70px;



    }



    .current-word {



        font-size: 24px;



        min-height: 40px;



    }



    .found-words {



        max-height: 60px;



    }



}







@media (min-height: 800px) {



    .bloom-container {



        width: 310px;



        height: 310px;



    }



    :root {



        --wb-petal-size: 72px;



        --wb-center-size: 88px;



    }



    .outer-petal[data-index="2"],



    .outer-petal[data-index="6"] { top: 50px; }



    .outer-petal[data-index="3"],



    .outer-petal[data-index="5"] { bottom: 50px; }



}




/* ---- Timer warning state ---- */
.timer-warning {
    color: #ff4757 !important;
    animation: timer-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}