:root {
    --primary: #749c6d;
    --primary-dark:#578169;
    --surprise:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gallery:linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
    --bg:#f8faff;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg);display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:#f3f3f3;opacity:.8;background-image:radial-gradient(#cacaca 0.8500000000000001px,transparent 0.8500000000000001px),radial-gradient(#cacaca 0.8500000000000001px,#f3f3f3 0.8500000000000001px);background-size:34px 34px;background-position:0 0,17px 17px}
.game-wrapper{width:100%;max-width:1000px;padding:20px;text-align:center}
h1{color:var(--primary);margin:20px 0;font-size:2.5rem;text-shadow:2px 2px 4px #0000001a}
.game-stats{display:flex;justify-content:center;gap:15px;margin-bottom:25px}
.board-wrapper{}
.board-wrapper h2{color:var(--primary);}
.stat-box{background:var(--white);padding:12px 25px;border-radius:15px;box-shadow:0 4px 15px #0000000d;min-width:110px;background:white;}
.stat-box .label{font-size:.7rem;color:#95a5a6;text-transform:uppercase;display:block;margin-bottom:4px}
.stat-box .value{font-size:1.3rem;font-weight:800;color:var(--primary)}
.controls-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:40px}
.main-actions{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}
.action-btn{padding:14px 28px;border:none;border-radius:50px;color:#fff!important;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);box-shadow:0 5px 15px #0003;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:1rem;min-width:200px;}
#resetBtn{white-space:nowrap;width:auto;background:var(--primary);background-image: linear-gradient(135deg,rgba(255,255,255, .3) , rgba(0,0,0, .3));}
#surpriseBtn,.surprise-theme{background:var(--surprise)}
#openGalleryBtn,.browse-theme{background:var(--gallery)}
.retry-btn{background:var(--primary)}
.action-btn:hover{transform:translateY(-4px);box-shadow:0 10px 25px #0000004d;filter:brightness(1.1)}
.action-btn:active{transform:translateY(0)}
.difficulty-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto}
.diff-btn{padding:10px 18px;border:2px solid #fff;border-radius:25px;background:#fff;font-weight:700;cursor:pointer;transition:.3s;box-shadow:0 4px 6px #0000000d;color:#555;flex:1 1 auto;min-width:80px;text-align:center}
.diff-btn.active{background:#333;color:#fff;border-color:#333;}
.grid-container{display:grid;gap:20px;justify-content:center;align-content:center;margin:30px auto;grid-template-columns:repeat(var(--cols,4),1fr);width:fit-content;max-width:95vw;perspective:1000px}
.memory-card{aspect-ratio:1/1;width:120px;max-width:25vw;cursor:pointer}
.card-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.memory-card.flipped .card-inner{transform:rotateY(180deg)}
.card-back,.card-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 15px #0000001a}
.card-back{background:url(../images/game-bg-7.png) center center / 168% no-repeat transparent;color:#fff;font-size:2.5rem;font-weight:700}
.card-front{background:#fff;transform:rotateY(180deg);padding:10px;border:2px solid #eee}
.card-front img{width:80%;height:80%;object-fit:contain}
.card-front span{font-size:.7rem;font-weight:700;margin-top:5px;color:#333}
.victory-card{background:#fff;border-radius:30px;padding:40px;text-align:center;box-shadow:0 20px 60px #0000004d;width:90%;max-width:500px;margin:auto}
.star-rating{font-size:55px;margin:15px 0;display:flex;justify-content:center;gap:10px;min-height:70px}
.star{display:inline-block;color:#f1c40f;text-shadow:0 0 15px #f1c40f66;opacity:0;transform:scale(0);animation:starPop .6s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
.star-empty{color:#ddd!important;text-shadow:none}
/* Real Half-Star Effect */
.star.half {
    position:relative;
    color:#ddd !important; /* Base color (Empty) */
    text-shadow:none;
}

.star.half::after {
    content:'\2605'; /* Full star symbol */
    position:absolute;
    left:0;
    top:0;
    width:50%; /* Only show half */
    overflow:hidden;
    color:#f1c40f; /* Gold color */
    text-shadow:0 0 15px #f1c40f66;
}

/* Optional:Golden Glow for 5 stars */
.perfect-score .star {
    filter:drop-shadow(0 0 10px rgba(241, 196, 15, 0.8));
    animation:pulse 1.5s infinite alternate;
}

@keyframes pulse {
    to { transform:scale(1.1); }
}
@keyframes starPop {
to{opacity:1;transform:scale(1)}
}
.stats-grid{display:flex;justify-content:space-around;background:#f8f9fa;padding:25px;border-radius:20px;margin:25px 0;border:1px solid #eee}
.stat-item{display:flex;flex-direction:column;align-items:center}
.stat-label{font-size:.8rem;color:#888;text-transform:uppercase;margin-bottom:5px}
.stat-value{font-size:3.8rem;font-weight:900;color:var(--primary)}
.modal-actions{display:flex;flex-direction:column;gap:15px;margin-top:20px;align-items:center;}
.gallery-modal{width:95%!important;max-width:900px!important;padding:30px!important}
.gallery-header{margin-bottom:30px;text-align:center}
.search-box{max-width:450px;margin:15px auto 0}
.search-box input{width:100%;padding:12px 25px;border-radius:30px;border:2px solid #eee;outline:none;font-size:1rem;transition:.3s;background:#f9f9f9}
.theme-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:10px}
.preview-stack{display:flex;justify-content:center;align-items:center;width:100%;height:70px;margin-bottom:15px;position:relative}
.preview-img{width:50px;height:50px;border-radius:50%;border:3px solid #fff;object-fit:cover;box-shadow:0 4px 10px #0000001a;background:#fff;position:absolute;transition:.3s}
.preview-img.img-small{transform:translateX(-50px) scale(1.2) rotate(-10deg);z-index:1;filter:blur(1px);}
.preview-img.img-large{transform:translateX(50px) scale(1.2) rotate(10deg);z-index:1;filter:blur(1px);}
.preview-img.img-medium{transform:scale(1.5);z-index:2;box-shadow:0 6px 15px #00000026}
.theme-card h3{margin:0;font-size:1.1rem;color:#333;font-weight:700}
.theme-card{background:#fff;border-radius:20px;padding:25px 15px;text-align:center;box-shadow:0 10px 20px #0000000d;cursor:pointer;transition:all .3s ease;border:1px solid #f0f0f0;display:flex;flex-direction:column;align-items:center}
.theme-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px #0000001f;border-color:var(--primary)}
.theme-card h3{font-size:.9rem;color:#333;font-weight:400;margin-top:10px}
.preview-img{width:55px;height:55px;border-radius:10px;border:3px solid #fff;box-shadow:0 3px 10px #00000026;margin-left:0px;background:#fff;padding:5px;}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-overlay.active{display:flex}
.modal-content{background:#fff;border-radius:30px;position:relative;max-height:90vh;overflow-y:auto;width:95%;max-width:500px}
.close-btn{position:absolute;right:25px;top:20px;font-size:35px;cursor:pointer;color:#aaa;transition:.3s}
.close-btn:hover{color:#333}
.main-title{font-size:3.5rem;font-weight:900;color:#2d3436;letter-spacing:-2px;margin-bottom:-5px;}
.main-title .accent{color:var(--primary);position:relative}
.tagline{font-size:.8rem;color:#a0a0a0;text-transform:uppercase;letter-spacing:4px;font-weight:600;margin:0 auto 20px;}
.close-modal-btn {position:absolute;top:15px;right:20px;background:none;border:none;font-size:30px;color:#999;cursor:pointer;line-height:1;transition:0.3s;}
.close-modal-btn:hover {color:var(--primary);transform:scale(1.1);}
.victory-card {position:relative;}

.game-design{width:100%;height:100%;position:relative;z-index:-1;}
.game-design .mainBackground{background:url(../images/game-bg-1.png) center center / 100% no-repeat transparent;height:400px;width:100%;position:relative;margin-bottom:-400px;}
.game-design .mainBackground::after{content:"";width:100%;height:350px;display:block;position:absolute;bottom:0;left:0;background:linear-gradient(0deg, #f3f3f3, transparent);}
.game-design .bottom-right-bush{background:url(../images/game-bg-3.png) center center / 100% no-repeat transparent;width:350px;aspect-ratio:1.5;position:fixed;right:-60px;bottom:-80px;}
.game-design .bottom-left-bush{background:url(../images/game-bg-5.png) center center / 100% no-repeat transparent;width:300px;aspect-ratio:1.5;position:fixed;left:-100px;bottom:-80px;}

@media (max-width:600px) {
.difficulty-buttons{gap:6px;padding:0 10px}
.diff-btn{padding:8px 12px;font-size:.85rem;min-width:28%}
.main-actions{width:100%;flex-direction:column;align-items:center}
.action-btn{width:90%}
.memory-card{width:auto;height:auto;max-width:100%}
.grid-container{gap:8px;margin:10px auto;width:100%;max-width:98vw;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.stat-value{font-size:3.3rem}
.star-rating{font-size:40px}
.card-back{font-size:1.5rem}
.card-front img{width:90%;height:80%}
h1{font-size:1.6rem;margin:10px 0}
.stat-box{padding:8px 12px;min-width:80px}
.stat-box .value{font-size:1rem}

.game-design .mainBackground{height:200px;}
}