/**

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

 */

/**



 * Memory Garden - Styles



 * Warm garden/nature themed card matching game



 */







/* ---- Garden Design Tokens ---- */



:root {



    --mg-green-deep: #2d5a27;



    --mg-green-mid: #4a8c3f;



    --mg-green-soft: #6db85a;



    --mg-pink-soft: #f0a0b0;



    --mg-pink-warm: #e87f99;



    --mg-earth: #8b6f4e;



    --mg-earth-light: #c9a96e;



    --mg-petal: #ffd6e0;



    --mg-bloom-glow: rgba(255, 200, 120, 0.5);



    --mg-card-face: linear-gradient(135deg, #3a7d32 0%, #2d6b25 40%, #1f5a1a 100%);



    --mg-card-matched: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);



    --mg-flip-speed: 0.5s;



}







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



.menu-garden-icon {



    display: flex;



    gap: 6px;



    justify-content: center;



    margin-bottom: 8px;



}



.garden-emoji {



    font-size: 40px;



    animation: mg-sway 3s ease-in-out infinite;



}



.garden-e1 { animation-delay: 0s; }



.garden-e2 { animation-delay: 0.5s; font-size: 48px; }



.garden-e3 { animation-delay: 1s; }







@keyframes mg-sway {



    0%, 100% { transform: rotate(-5deg); }



    50% { transform: rotate(5deg); }



}







.menu-title {



    font-size: 42px;



    font-weight: 900;



    line-height: 1;



    margin-bottom: 6px;



    background: linear-gradient(135deg, #a8e063, #56ab2f);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}







.menu-subtitle {



    font-size: 15px;



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



    margin-bottom: 24px;



}







/* ---- Difficulty Selector ---- */



.difficulty-selector {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 8px;



    width: 100%;



    max-width: 300px;



    margin-bottom: 20px;



}



.diff-btn {



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 10px 8px;



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



    border-radius: var(--gp-radius-sm);



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



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



    cursor: pointer;



    transition: all 0.2s ease;



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



}



.diff-btn.active {



    border-color: var(--mg-green-soft);



    background: rgba(109, 184, 90, 0.12);



    color: var(--mg-green-soft);



}



.diff-btn:active {



    transform: scale(0.96);



}



.diff-label {



    font-size: 15px;



    font-weight: 700;



}



.diff-detail {



    font-size: 11px;



    opacity: 0.6;



    margin-top: 2px;



}







/* ---- Menu Stats ---- */



.menu-stats {



    display: flex;



    gap: 32px;



    margin-bottom: 24px;



}



.menu-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.menu-stat-value {



    font-size: 24px;



    font-weight: 800;



    color: var(--mg-green-soft);



}



.menu-stat-label {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 0.5px;



}







/* ---- Board Area ---- */



#board-area {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 12px;



    overflow: hidden;



}







#board {



    display: grid;



    gap: 8px;



    width: 100%;



    max-width: 380px;



    perspective: 800px;



}







/* Grid layouts per difficulty */



#board.grid-4x3 { grid-template-columns: repeat(4, 1fr); }



#board.grid-4x4 { grid-template-columns: repeat(4, 1fr); }



#board.grid-5x4 { grid-template-columns: repeat(5, 1fr); }



#board.grid-6x4 { grid-template-columns: repeat(6, 1fr); }







/* ---- Card ---- */



.card {



    position: relative;



    aspect-ratio: 1;



    cursor: pointer;



    -webkit-tap-highlight-color: transparent;



}







.card-inner {



    position: relative;



    width: 100%;



    height: 100%;



    transition: transform var(--mg-flip-speed) ease;



    transform-style: preserve-3d;



}







.card.flipped .card-inner {



    transform: rotateY(180deg);



}







.card-face, .card-back {



    position: absolute;



    inset: 0;



    border-radius: var(--gp-radius-sm);



    display: flex;



    align-items: center;



    justify-content: center;



    backface-visibility: hidden;



    -webkit-backface-visibility: hidden;



}







/* Card back - leaf pattern */



.card-back {



    background: var(--mg-card-face);



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);



    z-index: 2;



    overflow: hidden;



}



.card-back::before {



    content: '';



    position: absolute;



    inset: 4px;



    border-radius: 6px;



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



    background: repeating-linear-gradient(



        45deg,



        transparent,



        transparent 6px,



        rgba(255, 255, 255, 0.04) 6px,



        rgba(255, 255, 255, 0.04) 7px



    );



}



.card-back::after {



    content: '\1F33F';



    font-size: clamp(16px, 5vw, 28px);



    opacity: 0.35;



    filter: grayscale(0.3);



}







/* Card face - emoji side */



.card-face {



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



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



    transform: rotateY(180deg);



    font-size: clamp(24px, 8vw, 42px);



    z-index: 1;



}







/* Card states */



.card:active .card-inner {



    transform: scale(0.95);



}



.card.flipped:active .card-inner {



    transform: rotateY(180deg) scale(0.95);



}







.card.locked {



    pointer-events: none;



}







/* ---- Matched Card Bloom ---- */



.card.matched .card-face {



    background: linear-gradient(135deg, rgba(255, 236, 210, 0.15), rgba(252, 182, 159, 0.1));



    border-color: rgba(255, 200, 120, 0.3);



    box-shadow: 0 0 20px var(--mg-bloom-glow), 0 0 40px rgba(255, 200, 120, 0.2);



}







.card.matched .card-inner {



    animation: mg-bloom 0.6s ease-out;



}







@keyframes mg-bloom {



    0% { transform: rotateY(180deg) scale(1); }



    40% { transform: rotateY(180deg) scale(1.15); }



    70% { transform: rotateY(180deg) scale(0.95); }



    100% { transform: rotateY(180deg) scale(1); }



}







/* Bloom pulse on matched cards */



.card.matched::after {



    content: '';



    position: absolute;



    inset: -4px;



    border-radius: 14px;



    background: radial-gradient(circle, rgba(255, 200, 120, 0.3), transparent 70%);



    animation: mg-bloom-pulse 2s ease-in-out infinite;



    pointer-events: none;



}







@keyframes mg-bloom-pulse {



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



    50% { opacity: 0.8; transform: scale(1.05); }



}







/* Mismatch shake */



.card.mismatch .card-inner {



    animation: mg-shake 0.4s ease;



}







@keyframes mg-shake {



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



    20% { transform: rotateY(180deg) translateX(-4px); }



    40% { transform: rotateY(180deg) translateX(4px); }



    60% { transform: rotateY(180deg) translateX(-3px); }



    80% { transform: rotateY(180deg) translateX(2px); }



}







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



.complete-title {



    font-size: 32px;



    font-weight: 900;



    margin-bottom: 16px;



    background: linear-gradient(135deg, #ffd93d, #ff9f43);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}







/* Star Rating */



.star-rating {



    display: flex;



    gap: 8px;



    margin-bottom: 20px;



}



.star {



    font-size: 40px;



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



    transition: all 0.4s ease;



    transform: scale(0);



}



.star.earned {



    color: #ffd93d;



    text-shadow: 0 0 12px rgba(255, 217, 61, 0.5);



    transform: scale(1);



    animation: mg-star-pop 0.5s ease backwards;



}



.star[data-index="0"].earned { animation-delay: 0.2s; }



.star[data-index="1"].earned { animation-delay: 0.5s; }



.star[data-index="2"].earned { animation-delay: 0.8s; }







@keyframes mg-star-pop {



    0% { transform: scale(0) rotate(-30deg); }



    60% { transform: scale(1.3) rotate(5deg); }



    100% { transform: scale(1) rotate(0); }



}







/* Complete Stats */



.complete-stats {



    display: flex;



    gap: 24px;



    margin-bottom: 16px;



}



.complete-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.complete-stat-num {



    font-size: 28px;



    font-weight: 800;



    color: var(--mg-green-soft);



}



.complete-stat-label {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 0.5px;



}







/* New Best Badge */



.new-best {



    display: inline-block;



    padding: 6px 20px;



    border-radius: 20px;



    background: linear-gradient(135deg, #ffd93d, #ff9f43);



    color: #1a1640;



    font-size: 14px;



    font-weight: 800;



    margin-bottom: 16px;



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



    animation-delay: 0.3s;



}







.hidden {



    display: none !important;



}







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



.help-section {



    margin-bottom: 14px;



}



.help-emoji-row {



    font-size: 28px;



    margin-bottom: 6px;



    letter-spacing: 4px;



}



.help-text {



    font-size: 14px;



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



    line-height: 1.5;



}



.help-icons {



    font-size: 24px;



    margin-bottom: 4px;



}







/* ---- Petal Particles ---- */



.petal {



    position: fixed;



    font-size: 20px;



    pointer-events: none;



    z-index: 200;



    animation: mg-petal-fall linear forwards;



}







@keyframes mg-petal-fall {



    0% {



        opacity: 1;



        transform: translateY(0) rotate(0deg) scale(1);



    }



    100% {



        opacity: 0;



        transform: translateY(100vh) rotate(360deg) scale(0.5);



    }



}







/* Match burst particles */



.match-burst {



    position: absolute;



    font-size: 16px;



    pointer-events: none;



    z-index: 30;



    animation: mg-burst 0.7s ease-out forwards;



}







@keyframes mg-burst {



    0% {



        opacity: 1;



        transform: translate(0, 0) scale(1);



    }



    100% {



        opacity: 0;



        transform: translate(var(--bx), var(--by)) scale(0.3);



    }



}







/* ---- Responsive Tweaks ---- */



@media (max-height: 600px) {



    #board-area { padding: 6px; }



    #board { gap: 5px; }



    .card-back::after { font-size: 14px; }



}







@media (max-width: 340px) {



    #board { gap: 5px; }



    .difficulty-selector { gap: 6px; }



    .diff-btn { padding: 8px 6px; }



}







/* Smooth entrance for board */



#board .card {



    opacity: 0;



    animation: mg-card-enter 0.3s ease forwards;



}







@keyframes mg-card-enter {



    from {



        opacity: 0;



        transform: scale(0.8) rotateY(20deg);



    }



    to {



        opacity: 1;



        transform: scale(1) rotateY(0);



    }



}