:root{--bg-color:#f5f5f5;--text-color:#333;--primary-color:#4CAF50;--primary-hover:#45a049;--card-front:#2980b9;--card-back:#2c3e50;--nav-bg:#fff;--nav-shadow:#0000001a}
[data-theme="dark"]{--bg-color:#1a1a1a;--text-color:#fff;--primary-color:#66bb6a;--primary-hover:#4caf50;--card-front:#1565c0;--card-back:#1a237e;--nav-bg:#2d2d2d;--nav-shadow:#0003}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Arial',sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.6;transition:background-color 0.3s,color .3s}
.navbar{background-color:var(--nav-bg);padding:1rem 0;box-shadow:0 2px 4px var(--nav-shadow);position:sticky;top:0;z-index:1000;transition:background-color .3s}
.nav-content{max-width:1400px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;height:80px}
@media (max-width: 768px) {
.nav-content{padding:0 .5rem;flex-wrap:wrap;height:auto;padding-top:.5rem;padding-bottom:.5rem}
.nav-brand{font-size:1.8rem;width:100%;text-align:center;margin-bottom:.5rem}
.nav-stats{order:2;margin:0}
.nav-menu{order:1}
.memory-game{gap:5px}
.container{padding:10px}
.difficulty-menu{right:auto;left:0}
}
.nav-stats{display:flex;gap:2rem;margin-left:auto;margin-right:2rem;align-items:center}
.stat-item{display:flex;align-items:center;gap:.8rem;font-size:1.2rem}
.stat-label{color:var(--text-color);opacity:.8}
.stat-value{font-weight:700;color:var(--primary-color);font-size:1.4rem}
.nav-brand{font-size:2.2rem;font-weight:700;display:flex;align-items:center;gap:1rem}
.nav-logo{width:48px;height:48px;object-fit:contain}
@media (max-width: 768px) {
.nav-brand{font-size:1.8rem;width:100%;text-align:center;margin-bottom:.5rem}
.nav-logo{width:36px;height:36px}
}
.nav-menu{display:flex;gap:1rem;align-items:center}
.difficulty-selector{position:relative}
.difficulty-menu{position:absolute;top:100%;right:0;background-color:var(--nav-bg);border-radius:8px;box-shadow:0 2px 8px var(--nav-shadow);padding:.5rem;display:none;flex-direction:column;gap:.5rem;min-width:200px;margin-top:.5rem}
.difficulty-menu.active{display:flex}
.difficulty-option{background:none;border:none;padding:.5rem 1rem;text-align:left;color:var(--text-color);border-radius:4px;margin:0;cursor:pointer;transition:background-color .2s}
.difficulty-option:hover{background-color:#0000001a}
.difficulty-option.active{background-color:var(--primary-color);color:#fff}
.nav-button{background:none;border:none;padding:.7rem 1rem;font-size:1.2rem;cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:.5rem;transition:all .3s}
.nav-button-primary{background-color:var(--primary-color);color:#fff;font-weight:600}
.nav-button-primary:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 2px 4px #0003}
.nav-button:hover{background-color:#0000001a}
.container{max-width:1400px;margin:0 auto;padding:1rem;display:flex;align-items:center}
header{text-align:center;margin-bottom:30px}
.game-info{display:flex;justify-content:center;gap:30px;margin:15px 0;font-size:18px}
button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:10px 2px;cursor:pointer;border-radius:5px;transition:background-color .3s}
button:hover{background-color:var(--primary-hover)}
.memory-game{display:grid;gap:12px;width:100%;margin:.25rem auto;justify-content:center;padding:.25rem}
.memory-game[data-grid="4x4"]{grid-template-columns:repeat(4,minmax(120px,180px));max-width:800px}
.memory-game[data-grid="4x7"]{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(7,minmax(100px,140px));max-width:1050px}
.memory-game[data-grid="4x10"]{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(10,minmax(90px,120px));max-width:1300px}
.card-front,.card-back::before{font-size:2.5rem}
@media (max-width: 1200px) {
.memory-game{gap:10px}
.memory-game[data-grid="4x4"]{grid-template-columns:repeat(4,minmax(70px,110px))}
.memory-game[data-grid="4x8"]{grid-template-columns:repeat(8,minmax(60px,90px))}
.memory-game[data-grid="4x10"]{grid-template-columns:repeat(10,minmax(50px,80px))}
}
@media (max-width: 768px) {
.memory-game{gap:8px;padding:.25rem;margin:0}
.memory-game[data-grid="4x4"],.memory-game[data-grid="4x7"],.memory-game[data-grid="4x10"]{grid-template-columns:repeat(4,1fr);max-width:100%;margin-top:0}
.container{padding:.25rem}
.nav-content{padding:.25rem}
.card-front,.card-back::before{font-size:1.8rem}
.nav-content{flex-direction:column;align-items:center;padding:.25rem}
.nav-brand{margin-bottom:.1rem}
.nav-stats{margin:.1rem 0}
.container{padding:0}
.nav-logo{width:24px;height:24px}
}
.game-info{background-color:var(--bg-color);padding:2rem 1rem;margin:2rem 0}
.game-info-content{max-width:1000px;margin:0 auto}
.game-info h2{text-align:center;color:var(--text-color);font-size:2.5rem;margin-bottom:2rem}
.game-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:1000px;margin:0 auto}
.rule-item{display:flex;align-items:flex-start;gap:1.5rem;padding:1.5rem;background-color:var(--nav-bg);border-radius:12px;box-shadow:0 2px 8px var(--nav-shadow);transition:transform .3s}
.rule-item:hover{transform:translateY(-5px)}
.rule-icon{font-size:2.5rem;color:var(--primary-color)}
.rule-item p{margin:0;line-height:1.5;color:var(--text-color)}
@media (max-width: 768px) {
.game-info{padding:1rem;margin:1rem 0}
.game-info h2{font-size:1.5rem;margin-bottom:1rem}
.game-rules{grid-template-columns:1fr;gap:1rem}
.rule-item{padding:.75rem}
.rule-icon{font-size:1.5rem}
}
.footer{background-color:var(--nav-bg);padding:1rem;text-align:center;margin-top:2rem;box-shadow:0 -2px 4px var(--nav-shadow)}
.footer-content{max-width:600px;margin:0 auto;color:var(--text-color)}
.footer a{color:var(--primary-color);text-decoration:none;transition:color .3s}
.footer a:hover{color:var(--primary-hover)}
@media (max-width: 768px) {
.footer{margin-top:1rem;padding:.5rem}
.footer p{font-size:.9rem}
}
.navbar{padding:1rem;text-align:center}
.nav-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1200px;margin:0 auto}
.nav-brand{font-size:1.2rem;font-weight:700;white-space:nowrap;text-align:center;width:100%}
.nav-stats{display:flex;gap:2rem;justify-content:center;align-items:center}
.nav-menu{display:flex;gap:1rem;align-items:center}
.difficulty-selector{position:relative}
.difficulty-menu{position:absolute;top:100%;right:0;background:var(--bg-color);border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:.5rem;display:none;z-index:100;min-width:150px;margin-top:.5rem}
.difficulty-menu.show{display:block}
.difficulty-option{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:none;border:none;color:var(--text-color);cursor:pointer;white-space:nowrap}
.difficulty-option:hover{background:var(--primary-color);color:#fff;border-radius:4px}
@media (max-width: 768px) {
.game-end-content {max-width:95%;padding:1rem}
.game-end-content h2{font-size:1.5rem!important}
.game-end-content p{font-size:1rem}
.game-end-stats{margin:.5rem 0;grid-template-columns:1fr;gap:1rem}
.game-end-summary{margin:.5rem 0;font-size:1rem}
.game-end-stat-value{font-size:1.2rem}
.navbar{padding:.5rem}
.social-share {margin:.5rem 0;gap:.5rem}
.nav-content{flex-direction:column;gap:.4rem}
.nav-brand{font-size:1.1rem}
.nav-stats{order:1;width:100%;gap:.6rem;margin:.2rem 0}
h1{font-size:1.3rem}
.nav-menu{order:2;gap:.1rem;justify-content:center;flex-wrap:wrap}
.nav-button{padding:.2rem .4rem;font-size:1rem}
.memory-game{padding:.5rem}
.memory-game[data-grid="4x4"],.memory-game[data-grid="4x8"],.memory-game[data-grid="4x10"]{grid-template-columns:repeat(4,1fr);gap:5px;max-width:100%}
.card-back::before{font-size:1.8rem}
.card-front{font-size:1.8rem}
.difficulty-menu{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:300px;background:var(--bg-color);border-radius:12px;box-shadow:0 4px 16px #0003;padding:1rem}
.difficulty-option{padding:.8rem 1rem;text-align:center;font-size:1.1rem}
.share-btn{width:60px;height:60px;padding:.8rem}
.share-icon{width:48px;height:48px}
.game-end-content{width:90%;padding:1rem}
}
.card{position:relative;width:100%;height:0;padding-bottom:100%;cursor:pointer}
.card.flipped .card-front{transform:rotateY(0)}
.card.flipped .card-back{transform:rotateY(180deg)}
.card.matched{cursor:default}
.card-face{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 8px #0000001a;transition:transform .3s}
.card:not(.flipped):not(.matched) .card-back:hover{transform:rotateY(0) translateY(-5px)}
.card.flipped .card-back:hover,.card.matched .card-back:hover{transform:rotateY(180deg)}
.card-front{background-color:#2980b9;font-size:40px;color:#fff;transform:rotateY(180deg);backface-visibility:hidden}
.card-back{background-color:var(--card-back);position:absolute;backface-visibility:hidden}
.card-back::before{content:'?';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5em;color:#ffffff4d;font-weight:700;text-shadow:0 2px 4px #0003}
.card-back::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(45deg,#ffffff1a,#ffffff1a 10px,#fff3 10px,#fff3 20px);border-radius:10px}
.game-end{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:none;justify-content:center;align-items:center;z-index:1000}
.game-end.show{display:flex;animation:fadeIn .3s ease-out}
.game-end-content{background-color:var(--nav-bg);padding:2rem;border-radius:16px;text-align:center;box-shadow:0 4px 20px #0003;max-width:90%;width:400px;transform:scale(0.9);opacity:0;animation:popIn .4s ease-out forwards}
.game-end-content h2{color:var(--primary-color);font-size:2rem;margin-bottom:1rem}
.game-end-content p{font-size:1.2rem;margin-bottom:1.5rem;color:var(--text-color)}
.game-end-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0;padding:1rem;background-color:var(--bg-color);border-radius:8px}
.game-end-summary{font-size:1.1rem;color:var(--text-color);margin:1.5rem 0;line-height:1.5;padding:1rem;background-color:var(--bg-color);border-radius:8px}
.highlight-stat{color:var(--primary-color);font-weight:700;font-size:1.2rem}
.social-share{display:flex;justify-content:center;gap:1rem;margin:1.5rem 0}
.share-btn{background:none;border:none;padding:1rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;border-radius:16px;width:80px;height:80px}
.share-icon{width:64px;height:64px;object-fit:contain}
.share-btn:hover{transform:translateY(-2px);opacity:.8}
#share-x{background-color:#000;color:#fff}
#share-reddit{background-color:#FF4500;color:#fff}
#share-whatsapp{background-color:#25D366;color:#fff}
.game-end-stat{text-align:center}
.game-end-stat-label{font-size:.9rem;color:var(--text-color);opacity:.8}
.game-end-stat-value{font-size:1.5rem;font-weight:700;color:var(--primary-color)}
#play-again-btn{background-color:var(--primary-color);color:#fff;border:none;padding:.8rem 2rem;font-size:1.1rem;border-radius:8px;cursor:pointer;transition:all .3s;font-weight:600}
#play-again-btn:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 2px 4px #0003}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
@keyframes popIn {
0%{transform:scale(0.9);opacity:0}
100%{transform:scale(1);opacity:1}
}
.play-section{padding:1rem 0;background-color:var(--nav-bg)}
.play-section-content{text-align:center}
.play-section h2{margin-bottom:2rem;color:var(--text-color);font-size:2.5rem}
.play-content{max-width:1200px;margin:0 auto;text-align:center}
.play-features{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:3rem 0}
.feature-item{background-color:var(--bg-color);padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s}
.feature-item:hover{transform:translateY(-5px)}
.feature-icon{font-size:3rem;margin-bottom:1rem;color:var(--primary-color)}
.feature-item h3{color:var(--primary-color);margin-bottom:1rem;font-size:1.5rem}
.feature-item p{font-size:1.2rem}
.story-section{max-width:1000px;margin:4rem auto;text-align:left;padding:2rem;background-color:var(--bg-color);border-radius:12px;box-shadow:0 4px 6px #0000001a}
.story-section h3{color:var(--primary-color);margin-bottom:1.5rem;font-size:2.5rem}
.story-section p{margin-bottom:1.5rem;line-height:1.8;font-size:1.3rem;color:var(--text-color)}
.benefits{padding:4rem 0;background-color:var(--nav-bg)}
.benefits-content{text-align:center}
.benefits h2{margin-bottom:2rem;color:var(--text-color);font-size:2.5rem}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1200px;margin:0 auto}
.benefit-card{background-color:var(--bg-color);padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s}
.benefit-card:hover{transform:translateY(-5px)}
.benefit-card h3{color:var(--primary-color);margin-bottom:1rem;font-size:1.5rem}
.benefit-card p{font-size:1.2rem}
.faq{padding:4rem 0;background-color:var(--nav-bg)}
.faq-content{text-align:center}
.faq h2{margin-bottom:2rem;color:var(--text-color);font-size:2.5rem}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:1200px;margin:0 auto}
.faq-item{background-color:var(--bg-color);padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s}
.faq-item:hover{transform:translateY(-5px)}
.faq-item h3{color:var(--primary-color);margin-bottom:1rem;font-size:1.5rem}
.faq-item p{font-size:1.2rem}
@media (max-width: 768px) {
.story-section{max-width:90%;margin:3rem auto}
.navbar{padding:.2rem;position:relative}
.play-features{grid-template-columns:1fr}
.benefits-grid{grid-template-columns:1fr}
.faq-grid{grid-template-columns:1fr}
.play-section h2,.benefits h2,.faq h2{font-size:2rem}
.story-section h3{font-size:2rem}
.feature-item h3,.benefit-card h3,.faq-item h3{font-size:1.3rem}
.feature-icon{font-size:2.5rem}
.story-section p,.feature-item p,.benefit-card p,.faq-item p{font-size:1.1rem}
}
.benefits h2,.faq h2{text-align:center;margin-bottom:2rem;color:var(--text-color)}
.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:1000;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:opacity .3s ease;font-size:1rem;box-shadow:0 2px 8px #0000001a}
.back-to-top:hover{opacity:.9;transform:translateY(-2px)}
.back-to-top .emoji{font-size:1.2rem}
.back-to-top .text{font-weight:500}
.back-to-top{opacity:0;pointer-events:none}
body.show-back-to-top .back-to-top{opacity:1;pointer-events:auto}