*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafaf8;--sidebar-bg:#1a1a2e;--sidebar-text:#e0e0e0;--sidebar-active:#e94560;--card-bg:#fff;--text:#2c2c2c;--text-light:#666;--accent:#0f3460;--accent-light:#16213e;--farsi-color:#1a1a2e;--border:#e0e0e0;--success:#2ecc71;--highlight:#fff3cd}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}#root{width:100%;display:flex}.sidebar{background:var(--sidebar-bg);width:280px;min-height:100vh;color:var(--sidebar-text);z-index:10;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-logo{letter-spacing:1px;cursor:pointer;border-bottom:1px solid #ffffff1a;padding:24px 20px;font-size:22px;font-weight:700}.nav-section-title{text-transform:uppercase;letter-spacing:1.5px;color:#fff6;padding:16px 20px 8px;font-size:11px}.nav-item{cursor:pointer;align-items:center;gap:10px;padding:8px 20px 8px 28px;font-size:14px;transition:all .15s;display:flex}.nav-item:hover{background:#ffffff0d}.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600}.letter-preview{text-align:center;opacity:.7;width:28px;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:18px}.nav-item.active .letter-preview{opacity:1}.main-content{flex:1;max-width:900px;margin-left:280px;padding:40px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;padding:32px;box-shadow:0 1px 3px #0000000f}.card h2{color:var(--accent);margin-bottom:16px;font-size:20px}.card h3{color:var(--accent-light);margin:20px 0 10px;font-size:16px}.letter-hero{text-align:center;padding:40px 32px}.big-letter{color:var(--farsi-color);justify-content:center;align-items:center;min-height:140px;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:120px;line-height:1;display:flex;overflow:visible}.big-letter.diacritic-hero{font-size:80px}.letter-name{margin-top:16px;font-size:28px;font-weight:700}.letter-sound{color:var(--text-light);margin-top:4px;font-size:18px}.letter-type{background:var(--highlight);color:#856404;border-radius:20px;margin-top:12px;padding:4px 12px;font-size:12px;display:inline-block}.mnemonic-box{background:#f0f7ff;border-radius:8px;align-items:center;gap:20px;margin-bottom:16px;padding:20px;display:flex}.mnemonic-icon{text-align:center;min-width:60px;font-size:40px}.mnemonic-text{font-size:15px;line-height:1.5}.mnemonic-word{color:var(--accent);font-weight:700}.forms-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;display:grid}.form-cell{text-align:center;border:1px solid var(--border);background:#f8f9fa;border-radius:8px;padding:16px 8px}.form-label{text-transform:uppercase;color:var(--text-light);margin-bottom:8px;font-size:11px}.form-char{color:var(--farsi-color);font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:36px}.rule-item{border-left:3px solid var(--accent);margin-bottom:8px;padding:8px 0 8px 20px;font-size:14px;line-height:1.5}.word-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px;display:grid}.word-item{border:1px solid var(--border);background:#f8f9fa;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;display:flex}.word-farsi{color:var(--farsi-color);text-align:center;direction:rtl;min-width:80px;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:22px}.word-info{font-size:13px}.word-translit{color:var(--accent);font-weight:600}.word-english{color:var(--text-light)}.section-header{margin-bottom:32px}.section-header h1{color:var(--accent);margin-bottom:8px;font-size:32px}.section-desc{color:var(--text-light);font-size:15px;line-height:1.6}.audio-btn{border:2px solid var(--accent);color:var(--accent);cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:12px;transition:all .15s;display:inline-flex}.audio-btn:hover{background:var(--accent);color:#fff}.badge{border-radius:12px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.badge-connecting{color:#155724;background:#d4edda}.badge-nonconnecting{color:#721c24;background:#f8d7da}.games-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.game-card{background:var(--card-bg);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:12px;padding:28px;transition:all .15s}.game-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 4px 12px #00000014}.game-card-icon{color:var(--accent);margin-bottom:12px;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:36px}.game-card-title{color:var(--accent);margin-bottom:8px;font-size:18px;font-weight:700}.game-card-desc{color:var(--text-light);margin-bottom:16px;font-size:13px;line-height:1.5}.game-play-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:8px 28px;font-size:14px;font-weight:600}.game-play-btn:hover{opacity:.9}.game-start-btn{background:var(--sidebar-active);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:20px;padding:12px 36px;font-size:16px;font-weight:600}.game-start-btn:hover{opacity:.9}.game-header{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 20px;font-size:14px;font-weight:600;display:flex}.game-score{color:var(--accent)}.game-streak{color:var(--sidebar-active)}.game-round{color:var(--text-light)}.result-score{color:var(--accent);margin:16px 0;font-size:48px;font-weight:700}.result-stats{justify-content:center;gap:32px;margin:20px 0;display:flex}.result-stat{text-align:center}.result-stat-value{color:var(--accent);font-size:24px;font-weight:700}.result-stat-label{color:var(--text-light);font-size:12px}.option-grid{grid-template-columns:1fr 1fr;gap:12px;max-width:500px;margin:0 auto;display:grid}.option-btn{border:2px solid var(--border);background:var(--card-bg);cursor:pointer;text-align:center;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:60px;padding:16px;transition:all .15s;display:flex}.option-btn:hover:not(.disabled){border-color:var(--accent);background:#f0f4ff}.option-btn.correct{border-color:var(--success);background:#d4edda}.option-btn.wrong{background:#f8d7da;border-color:#e74c3c}.option-btn.disabled{cursor:default;opacity:.7}.option-farsi{color:var(--farsi-color);font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:24px}.option-label{color:var(--text);font-size:14px;font-weight:600}.spell-slots{direction:rtl;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0;display:flex}.spell-slot{border:2px dashed var(--border);width:48px;height:56px;color:var(--farsi-color);background:#f8f9fa;border-radius:8px;justify-content:center;align-items:center;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:24px;display:flex}.spell-slot.filled{border-style:solid;border-color:var(--accent);background:#fff}.spell-slot.wrong{background:#f8d7da;border-color:#e74c3c}.letter-pool{flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0;display:flex}.letter-tile{border:2px solid var(--border);background:var(--card-bg);cursor:pointer;width:48px;height:48px;color:var(--farsi-color);border-radius:8px;justify-content:center;align-items:center;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:22px;transition:all .15s;display:flex}.letter-tile:hover:not(.used){border-color:var(--accent);background:#f0f4ff}.letter-tile.used{opacity:.2;cursor:default}.timer-bar{background:#e9ecef;border-radius:8px;height:32px;margin-bottom:16px;position:relative;overflow:hidden}.timer-fill{background:var(--accent);border-radius:8px;height:100%;transition:width 1s linear}.timer-text{color:var(--text);font-size:13px;font-weight:700;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.grammar-table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}.grammar-table th{background:var(--accent);color:#fff;text-align:left;padding:10px 14px}.grammar-table td{border-bottom:1px solid var(--border);padding:10px 14px}.grammar-table tr:hover td{background:#f8f9fa}.grammar-table .farsi-cell{direction:rtl;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:18px}.reading-text{text-align:right;overflow-wrap:break-word;max-width:100%;color:var(--farsi-color);direction:rtl;background:#fffef5;border:1px solid #e8e0c8;border-radius:8px;padding:24px;font-family:Noto Naskh Arabic,Geeza Pro,serif;font-size:22px;line-height:2}.hamburger{z-index:30;background:var(--sidebar-bg);cursor:pointer;border:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;display:none;position:fixed;top:12px;left:12px}.hamburger span{background:#fff;border-radius:2px;width:20px;height:2px;display:block}.sidebar-backdrop{display:none}@media (width<=768px){.hamburger{display:flex}.sidebar-backdrop{z-index:15;background:#00000080;display:block;position:fixed;inset:0}.sidebar{z-index:20;width:280px;transition:transform .25s;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{max-width:100%;margin-left:0;padding:60px 16px 24px}.section-header h1{font-size:24px}.section-desc{font-size:14px}.card{margin-bottom:16px;padding:20px 16px}.card h2{font-size:18px}.letter-hero{padding:24px 16px}.big-letter{min-height:100px;font-size:80px}.letter-name{font-size:22px}.letter-sound{font-size:16px}.forms-grid{grid-template-columns:repeat(2,1fr);gap:8px}.form-cell{padding:12px 4px}.form-char{font-size:28px}.word-list{grid-template-columns:1fr}.mnemonic-box{text-align:center;flex-direction:column;gap:12px;padding:16px}.games-grid{grid-template-columns:1fr}.game-card{padding:20px}.game-header{gap:8px;padding:10px 12px;font-size:13px}.option-grid{grid-template-columns:1fr 1fr;max-width:100%}.spell-slot{width:40px;height:48px;font-size:20px}.letter-tile{width:42px;height:42px;font-size:20px}.grammar-table{-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}.grammar-table th,.grammar-table td{white-space:nowrap;padding:8px 10px;font-size:13px}.grammar-table .farsi-cell{font-size:16px}.result-stats{gap:16px}.result-score{font-size:36px}.result-stat-value{font-size:20px}.reading-text{padding:16px;font-size:20px}}@media (width<=380px){.main-content{padding:56px 10px 16px}.card{padding:16px 12px}.big-letter{font-size:64px}.forms-grid{grid-template-columns:1fr 1fr}.form-char{font-size:24px}.option-grid{grid-template-columns:1fr}.spell-slot{width:36px;height:42px;font-size:18px}.letter-tile{width:38px;height:38px;font-size:18px}.option-farsi{font-size:20px}}