*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f6f1e7;--card-bg:#fbf8f1;--card-alt:#f0e9d8;--text:#1f1b16;--text-light:#4a423a;--text-muted:#7a7165;--border:#e4dccb;--border-strong:#cec2a8;--accent:#c8862f;--accent-deep:#9e6a20;--accent-tint:#f2e5c8;--success:#6e7a5a;--success-tint:#dde1cd;--error:#a33b2a;--error-tint:#f1d9d1;--sidebar-bg:#1c2a40;--sidebar-text:#f6f1e7;--sidebar-active:#c8862f;--font-serif:"Instrument Serif", "Cormorant Garamond", Georgia, serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;--font-farsi:"Noto Naskh Arabic", "Geeza Pro", serif;--farsi-color:#1f1b16}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;display:flex}#root{width:100%;display:flex}.sidebar{background:var(--sidebar-bg);width:280px;min-height:100vh;color:var(--sidebar-text);z-index:10;border-right:1px solid #0000004d;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-brand{border-bottom:1px solid #f6f1e714;flex-direction:column;gap:16px;padding:22px 22px 18px;display:flex}.sidebar-brand-row{align-items:center;gap:10px;display:flex}.sidebar-brand-icon{background:var(--accent);width:26px;height:26px;font-family:var(--font-farsi);color:var(--sidebar-bg);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.sidebar-brand-text{flex-direction:column;line-height:1;display:flex}.sidebar-brand-name{font-family:var(--font-serif);letter-spacing:-.3px;cursor:pointer;font-size:22px;font-weight:400}.sidebar-brand-name span{color:var(--accent)}.sidebar-brand-sub{letter-spacing:2px;color:#f6f1e76b;text-transform:uppercase;margin-top:4px;font-size:10px}.sidebar-logo{font-family:var(--font-serif);letter-spacing:-.3px;cursor:pointer;font-size:22px;font-weight:400}.language-switcher{font-family:var(--font-mono);background:#f6f1e70f;border:1px solid #f6f1e714;border-radius:8px;padding:2px;font-size:11px;display:flex}.lang-btn{color:#f6f1e78c;text-align:center;cursor:pointer;letter-spacing:.5px;font-size:11px;font-weight:600;font-family:var(--font-mono);background:0 0;border:none;border-radius:6px;flex:1;padding:6px 0;transition:all .15s}.lang-btn.active{background:var(--accent);color:var(--sidebar-bg)}.lang-btn:hover:not(.active){color:#f6f1e7cc}.nav-section-title{text-transform:uppercase;letter-spacing:2px;color:#f6f1e766;padding:22px 22px 8px;font-size:10px}.nav-item{cursor:pointer;color:#f6f1e7b8;letter-spacing:.1px;border-left:2px solid #0000;align-items:center;gap:12px;padding:10px 18px 10px 22px;font-size:13.5px;font-weight:400;transition:all .15s;display:flex}.nav-item:hover{background:#f6f1e70d}.nav-item.active{color:#f6ead1;border-left-color:var(--accent);background:#c8862f24;font-weight:500}.letter-preview{font-family:var(--font-farsi);color:#f6f1e78c;letter-spacing:1px;direction:rtl;margin-top:2px;font-size:15px;line-height:1}.nav-item.active .letter-preview{color:#f6f1e7bf}.nav-item-badge{width:20px;height:20px;font-family:var(--font-mono);color:#f6f1e773;background:#f6f1e714;border-radius:4px;justify-content:center;align-items:center;font-size:10px;font-weight:600;display:flex}.nav-item.active .nav-item-badge{color:#f2d99b;background:#c8862f47}.sidebar-footer{color:#f6f1e766;border-top:1px solid #f6f1e714;justify-content:space-between;align-items:center;padding:14px 22px;font-size:11px;display:flex}.side-icon{color:#f6f1e78c;flex-shrink:0;width:16px;height:16px}.main-content{flex:1;max-width:900px;margin-left:280px;padding:40px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;margin-bottom:24px;padding:24px}.card h2{font-family:var(--font-serif);color:var(--text);letter-spacing:-.3px;margin-bottom:16px;font-size:22px;font-weight:400}.card h3{color:var(--text-light);margin:20px 0 10px;font-size:15px;font-weight:500}.section-header{margin-bottom:32px}.section-header h1{font-family:var(--font-serif);color:var(--text);letter-spacing:-.8px;margin-bottom:8px;font-size:44px;font-weight:400;line-height:1.05}.section-header h1 em{color:var(--accent);font-style:italic}.section-desc{color:var(--text-light);font-size:15px;line-height:1.55}.eyebrow{font-family:var(--font-mono);color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;font-size:11px}.ornamental-rule{align-items:center;gap:10px;margin:24px 0 14px;display:flex}.ornamental-rule:before,.ornamental-rule:after{content:"";background:var(--border);flex:1;height:1px}.letter-hero{text-align:center;padding:20px 24px 30px}.big-letter{font-family:var(--font-farsi);color:var(--farsi-color);justify-content:center;align-items:center;min-height:140px;font-size:140px;line-height:.9;display:flex;overflow:visible}.big-letter.diacritic-hero{font-size:80px}.letter-name{font-family:var(--font-serif);letter-spacing:-.5px;margin-top:16px;font-size:36px;font-weight:400}.letter-sound{font-family:var(--font-mono);color:var(--text-muted);margin-top:4px;font-size:14px}.letter-type{background:var(--accent-tint);color:var(--accent-deep);letter-spacing:.2px;text-transform:uppercase;border-radius:999px;margin-top:12px;padding:3px 9px;font-size:11px;font-weight:500;display:inline-block}.mnemonic-box{background:var(--bg);border:1px solid var(--border);border-radius:12px;grid-template-columns:140px 1fr;gap:16px;margin-bottom:16px;padding:18px;display:grid}.mnemonic-icon{text-align:center;background:var(--card-alt);border:1px dashed var(--border-strong);border-radius:10px;justify-content:center;align-items:center;min-width:60px;font-size:40px;display:flex}.mnemonic-text{color:var(--text-light);font-size:14px;line-height:1.55}.mnemonic-word{color:var(--text);font-weight:600}.forms-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;display:grid}.form-cell{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:18px 8px}.form-label{font-family:var(--font-mono);text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:8px;font-size:10px}.form-char{font-family:var(--font-farsi);color:var(--farsi-color);font-size:40px;line-height:1}.rule-item{border-left:3px solid var(--accent);color:var(--text-light);margin-bottom:8px;padding:12px 14px;font-size:13.5px;line-height:1.55}.word-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px;display:grid}.word-item{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;align-items:center;gap:14px;padding:14px 16px;display:flex}.word-farsi{font-family:var(--font-farsi);color:var(--farsi-color);text-align:right;direction:rtl;min-width:70px;font-size:24px}.word-divider{background:var(--border);flex-shrink:0;width:1px;height:26px}.word-info{flex:1;font-size:13px}.word-translit{font-family:var(--font-mono);color:var(--accent-deep);letter-spacing:.5px;font-size:12px;font-weight:500}.word-english{color:var(--text-light);margin-top:1px;font-size:13.5px}.audio-btn{background:var(--accent);color:#fff9ec;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;transition:all .15s;display:inline-flex}.audio-btn:hover{opacity:.85}.audio-btn.outline{border:1.5px solid var(--accent);color:var(--accent);background:0 0}.badge{letter-spacing:.2px;font-size:11px;font-weight:500;font-family:var(--font-sans);text-transform:uppercase;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;display:inline-flex}.badge-connecting{background:var(--accent-tint);color:var(--accent-deep)}.badge-nonconnecting{background:var(--error-tint);color:var(--error)}.badge-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.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;border-radius:14px;padding:20px;transition:all .15s;position:relative}.game-card:hover{border-color:var(--accent)}.game-card-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.game-card-num{font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text-muted);font-size:11px}.game-card-icon{font-family:var(--font-farsi);color:var(--accent);text-align:center;justify-content:center;align-items:center;height:32px;margin-bottom:10px;font-size:28px;display:flex}.game-card-title{font-family:var(--font-serif);color:var(--text);letter-spacing:-.3px;margin-bottom:6px;font-size:22px;font-weight:400}.game-card-desc{color:var(--text-light);margin-bottom:16px;font-size:13px;line-height:1.5}.game-play-btn{font-family:var(--font-sans);cursor:pointer;background:var(--text);color:var(--bg);border:1px solid var(--text);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:500;transition:opacity .15s}.game-play-btn:hover{opacity:.85}.game-start-btn{background:var(--accent);color:#fff9ec;cursor:pointer;font-size:15px;font-weight:500;font-family:var(--font-sans);letter-spacing:.1px;border:none;border-radius:10px;margin-top:20px;padding:16px 28px}.game-start-btn:hover{opacity:.85}.game-header{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;align-items:center;gap:16px;margin-bottom:16px;padding:14px 18px;font-size:14px;font-weight:600;display:flex}.game-progress-bar{flex:1;gap:3px;display:flex}.game-progress-segment{background:var(--border);border-radius:2px;flex:1;height:4px}.game-progress-segment.done{background:var(--success)}.game-progress-segment.current{background:var(--accent)}.game-score{font-family:var(--font-mono);color:var(--accent-deep);font-size:14px;font-weight:600}.game-streak{color:var(--error);align-items:center;gap:4px;display:flex}.game-streak-value{font-family:var(--font-mono);font-size:13px;font-weight:600}.game-round{font-family:var(--font-mono);font-size:14px;font-weight:600}.game-round span{color:var(--text-muted)}.game-intro{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:50vh;padding:20px 0;display:flex}.game-intro-title{font-family:var(--font-serif);letter-spacing:-.8px;margin:14px 0 0;font-size:44px;font-weight:400;line-height:1.05}.game-intro-title em{color:var(--accent);font-style:italic}.game-intro-desc{max-width:420px;color:var(--text-light);margin-top:16px;font-size:15px;line-height:1.55}.game-intro-stats{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;gap:28px;margin-top:30px;padding:14px 24px;display:flex}.game-intro-stat{text-align:center;flex-direction:column;gap:2px;display:flex}.game-intro-stat+.game-intro-stat{border-left:1px solid var(--border);padding-left:28px}.game-intro-stat-value{font-family:var(--font-serif);color:var(--text);font-size:22px}.game-intro-stat-label{letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;font-size:10px}.result-score{font-family:var(--font-serif);color:var(--text);letter-spacing:-4px;margin:18px 0;font-size:120px;font-weight:400;line-height:.85}.result-score span{color:var(--text-muted);font-size:48px}.result-message{font-family:var(--font-serif);color:var(--text-light);max-width:340px;margin-top:12px;font-size:18px;font-style:italic;line-height:1.4}.result-stats{grid-template-columns:repeat(4,1fr);gap:14px;width:100%;max-width:480px;margin:30px 0 20px;display:grid}.result-stat{text-align:center;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 6px}.result-stat-value{font-family:var(--font-serif);font-size:28px;line-height:1}.result-stat-value.correct{color:var(--success)}.result-stat-value.wrong{color:var(--error)}.result-stat-value.streak{color:var(--accent)}.result-stat-value.time{color:var(--text-muted)}.result-stat-label{color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;font-size:10px}.option-grid{grid-template-columns:1fr 1fr;gap:14px;max-width:500px;margin:0 auto;display:grid}.option-btn{border:1.5px solid var(--border);background:var(--card-bg);cursor:pointer;text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:60px;padding:30px 16px;transition:all .15s;display:flex;position:relative}.option-btn:hover:not(.disabled){border-color:var(--accent);background:var(--accent-tint)}.option-btn.correct{border-color:var(--success);background:var(--success-tint)}.option-btn.wrong{border-color:var(--error);background:var(--error-tint)}.option-btn.disabled{cursor:default;opacity:.7}.option-farsi{font-family:var(--font-farsi);color:var(--farsi-color);font-size:52px;line-height:1}.option-label{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.5px;margin-top:10px;font-size:12px;font-weight:500}.spell-slots{direction:rtl;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;display:flex}.spell-slot{border:2px dashed var(--border-strong);width:72px;height:80px;font-family:var(--font-farsi);color:var(--farsi-color);background:var(--card-alt);border-radius:12px;justify-content:center;align-items:center;font-size:46px;display:flex}.spell-slot.filled{border-style:solid;border-color:var(--border);background:var(--card-bg)}.spell-slot.active{border-color:var(--accent)}.spell-slot.wrong{border-color:var(--error);background:var(--error-tint)}.letter-pool{flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;display:flex}.letter-tile{border:1px solid var(--text);background:var(--card-bg);cursor:pointer;width:60px;height:60px;font-family:var(--font-farsi);color:var(--farsi-color);box-shadow:0 1px 0 var(--border-strong);border-radius:10px;justify-content:center;align-items:center;font-size:32px;transition:all .15s;display:flex}.letter-tile:hover:not(.used){border-color:var(--accent);background:var(--accent-tint)}.letter-tile.used{opacity:.35;cursor:default;border-color:var(--border);box-shadow:none}.timer-bar{background:var(--border);border-radius:3px;height:6px;margin-bottom:16px;position:relative;overflow:hidden}.timer-fill{background:var(--accent);border-radius:3px;height:100%;transition:width 1s linear}.timer-text{font-family:var(--font-mono);color:var(--text-muted);text-align:right;margin-top:6px;font-size:11px;font-weight:600}.grammar-table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}.grammar-table th{background:var(--text);color:var(--bg);text-align:left;font-family:var(--font-sans);padding:10px 14px;font-weight:500}.grammar-table td{border-bottom:1px solid var(--border);padding:10px 14px}.grammar-table tr:hover td{background:var(--card-alt)}.grammar-table .farsi-cell{font-family:var(--font-farsi);direction:rtl;font-size:18px}.reading-text{font-family:var(--font-farsi);text-align:right;background:var(--card-bg);overflow-wrap:break-word;border:1px solid var(--border);max-width:100%;color:var(--farsi-color);direction:rtl;border-radius:12px;padding:24px;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:#f6f1e7;border-radius:2px;width:20px;height:2px;display:block}.sidebar-backdrop{display:none}.alphabet-cell{background:var(--card-bg);border:1px solid var(--border);border-radius:10px}.alphabet-char{font-family:var(--font-farsi);color:var(--farsi-color);line-height:1}.alphabet-name{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.5px}.alphabet-sound{font-family:var(--font-mono);color:var(--text-muted)}.grammar-explanation{color:var(--text-light);margin-bottom:16px;font-size:15px;line-height:1.6}.btn-primary{font-family:var(--font-sans);cursor:pointer;background:var(--text);color:var(--bg);border:1px solid var(--text);letter-spacing:.1px;border-radius:10px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:inline-flex}.btn-outline{font-family:var(--font-sans);cursor:pointer;color:var(--text);border:1px solid var(--text);letter-spacing:.1px;background:0 0;border-radius:10px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:inline-flex}.btn-ghost{font-family:var(--font-sans);cursor:pointer;color:var(--text);border:1px solid var(--border);letter-spacing:.1px;background:0 0;border-radius:10px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:inline-flex}@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:30px}.section-desc{font-size:14px}.card{margin-bottom:16px;padding:18px 16px}.card h2{font-size:20px}.letter-hero{padding:14px 16px 22px}.big-letter{min-height:100px;font-size:100px}.letter-name{font-size:28px}.letter-sound{font-size:13px}.forms-grid{grid-template-columns:repeat(2,1fr);gap:6px}.form-cell{padding:14px 4px}.form-char{font-size:30px}.word-list{grid-template-columns:1fr}.mnemonic-box{text-align:center;grid-template-columns:1fr;padding:14px}.mnemonic-icon{min-height:80px}.games-grid{grid-template-columns:1fr}.game-card{padding:18px}.game-header{gap:12px;padding:12px 14px;font-size:13px}.option-grid{grid-template-columns:1fr 1fr;max-width:100%}.option-btn{padding:22px 12px}.option-farsi{font-size:42px}.spell-slot{width:56px;height:64px;font-size:36px}.letter-tile{width:52px;height:52px;font-size:28px}.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:8px}.result-score{font-size:80px}.result-score span{font-size:32px}.result-stat-value{font-size:22px}.reading-text{padding:16px;font-size:20px}.game-intro-title{font-size:32px}.game-intro-stats{gap:14px;padding:14px 18px}.game-intro-stat+.game-intro-stat{padding-left:14px}}@media (width<=380px){.main-content{padding:56px 10px 16px}.card{padding:16px 12px}.big-letter{font-size:80px}.forms-grid{grid-template-columns:1fr 1fr}.form-char{font-size:24px}.option-grid{grid-template-columns:1fr}.spell-slot{width:48px;height:56px;font-size:28px}.letter-tile{width:46px;height:46px;font-size:24px}.option-farsi{font-size:36px}}