:root{--bg-dark:#0a0806;--bg-panel:#0d0a06;--gold:#e8c44c;--gold-warm:#c9b97a;--gold-dim:#a89870;--text:#e8dcc0;--text-narrator:#b8aa8a;--text-dim:#8a7d65;--text-muted:#7a6f58;--text-faint:#5a4f3a;--text-ghost:#3a3428;--font-serif:"Crimson Text", Georgia, serif;--font-mono:"Courier New", monospace;--font-arabic:"Amiri", serif;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.7s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-dark);width:100%;min-height:100%;color:var(--text);font-family:var(--font-serif);font-size:16px;line-height:1.6}.arabic-font{font-family:var(--font-arabic);font-size:1.2em;line-height:1.8}.rtl{text-align:right;direction:rtl}.mono{font-family:var(--font-mono)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--gold-warm);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gold)}*{scrollbar-width:thin;scrollbar-color:var(--gold-warm) var(--bg-dark)}@keyframes blink{50%{opacity:0}}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.7}}@keyframes floatP{0%{opacity:0;transform:translateY(0)}10%{opacity:.4}90%{opacity:.3}to{opacity:0;transform:translateY(-100vh)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes gpulse{0%,to{box-shadow:0 0 20px #e8c44c0a}50%{box-shadow:0 0 30px #e8c44c1a}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-loading{background:var(--bg-dark);justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.game-loading-text{color:var(--gold);font-size:18px;font-family:var(--font-serif);animation:1.5s ease-in-out infinite pulse}.site-header{background:var(--bg-dark);border-bottom:1px solid #c9b97a1a;padding:16px 24px}.site-header a{color:var(--gold);font-family:var(--font-serif);text-decoration:none}.btn{color:var(--gold);letter-spacing:4px;font-size:14px;font-family:var(--font-mono);cursor:pointer;text-transform:uppercase;background:#e8c44c0f;border:1px solid #c9b97a59;border-radius:3px;padding:14px 44px;transition:all .3s}.btn:hover{border-color:var(--gold);background:#e8c44c24}.bilingual-ar{font-family:var(--font-arabic);text-align:right;direction:rtl}.landing-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:48px 24px;display:flex}.landing-page h1{color:var(--gold);text-shadow:0 0 60px #e8c44c33;margin-bottom:8px;font-size:48px;font-weight:400}.landing-page p{color:var(--gold-dim);margin-bottom:32px;font-style:italic}.landing-page a{color:var(--gold);text-decoration:none}.btn-gold{color:var(--gold);background:#e8c44c14;border:1px solid #e8c44c66;text-decoration:none;display:inline-block}.btn-gold:hover{background:#e8c44c2e}.btn-secondary{color:var(--text-dim);background:0 0;border:1px solid #c9b97a26;text-decoration:none;display:inline-block}.btn-secondary:hover{color:var(--gold-warm);border-color:#c9b97a4d}.story-reader{min-height:calc(100vh - 60px);display:flex}.story-reader h2{color:var(--gold);margin-bottom:16px;font-size:28px;font-weight:400}.story-reader p{color:var(--text);margin-bottom:16px;line-height:1.85}.story-sidebar{border-right:1px solid #c9b97a0f;width:240px;min-width:240px;max-height:calc(100vh - 60px);padding:24px 16px;position:sticky;top:52px;overflow-y:auto}.story-sidebar-title{color:var(--text-faint);letter-spacing:3px;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;border-bottom:1px solid #c9b97a0f;margin-bottom:20px;padding-bottom:12px}.story-sidebar-era{margin-bottom:4px}.story-sidebar-era-name{color:var(--text-muted);border-radius:3px;align-items:center;gap:8px;padding:6px 8px;font-size:14px;text-decoration:none;transition:all .2s;display:flex}.story-sidebar-era-name:hover{color:var(--gold-warm);background:#c9b97a0a}.story-sidebar-era-name.active{color:var(--gold);background:#e8c44c0f}.story-sidebar-era-order{color:var(--text-ghost);font-size:10px;font-family:var(--font-mono);min-width:18px}.story-sidebar-chapters{margin:4px 0 12px;padding-left:26px}.story-sidebar-chapter{color:var(--text-faint);border-radius:2px;padding:4px 8px;font-size:13px;text-decoration:none;transition:all .2s;display:block}.story-sidebar-chapter:hover{color:var(--gold-warm)}.story-sidebar-chapter.active{color:var(--gold);background:#e8c44c0a}.story-content{flex:1;max-width:800px;padding:32px 40px;position:relative}.story-era-index{padding:20px 0}.story-era-index-title{color:var(--gold);margin-bottom:32px;font-size:24px;font-weight:400}.story-era-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.story-era-card{background:#c9b97a05;border:1px solid #c9b97a14;border-radius:4px;padding:20px;text-decoration:none;transition:all .3s;display:block}.story-era-card:hover{background:#c9b97a0a;border-color:#c9b97a33}.story-era-card h3{color:var(--gold);margin-bottom:4px;font-size:18px;font-weight:400}.story-era-card-order{color:var(--text-ghost);font-size:10px;font-family:var(--font-mono);letter-spacing:2px;margin-bottom:8px;display:block}.story-era-card-subtitle{color:var(--gold-dim);margin:2px 0;font-size:13px;font-style:italic}.story-era-card-period{color:var(--text-faint);font-size:11px;font-family:var(--font-mono);letter-spacing:1px;margin-bottom:8px;display:block}.story-era-card-desc{color:var(--text-muted);margin-bottom:12px;font-size:14px;line-height:1.7}.story-era-card-chapters{color:var(--text-ghost);font-size:10px;font-family:var(--font-mono);letter-spacing:2px}.story-chapter-list{padding:20px 0}.story-chapter-list-header{margin-bottom:32px}.story-chapter-list-header h2{color:var(--gold);margin-bottom:8px;font-size:28px;font-weight:400}.story-chapter-list-desc{color:var(--text-narrator);margin-bottom:12px;font-size:15px;line-height:1.8}.story-chapter-list-meta{color:var(--text-faint);font-size:12px;font-family:var(--font-mono);letter-spacing:1px;gap:16px;display:flex}.story-chapter-cards{flex-direction:column;gap:12px;display:flex}.story-chapter-card{background:#c9b97a05;border:1px solid #c9b97a14;border-radius:4px;padding:20px;text-decoration:none;transition:all .3s;display:block}.story-chapter-card:hover{background:#c9b97a0a;border-color:#c9b97a33}.story-chapter-card h3{color:var(--gold);margin-bottom:6px;font-size:18px;font-weight:400}.story-chapter-card p{color:var(--text-muted);font-size:14px;line-height:1.7}.story-chapter-card-num{color:var(--text-faint);font-size:11px;font-family:var(--font-mono);letter-spacing:2px;margin-bottom:6px;display:block}.story-chapter-card-duration{color:var(--text-ghost);font-size:10px;font-family:var(--font-mono);margin-top:8px;display:block}.story-chapter-content{padding:20px 0}.story-chapter-header{border-bottom:1px solid #c9b97a0f;margin-bottom:40px;padding-bottom:24px}.story-chapter-era-label{color:var(--text-faint);font-size:11px;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;display:block}.story-chapter-title{color:var(--gold);margin-bottom:8px;font-size:32px;font-weight:400}.story-chapter-meta{gap:16px;display:flex}.story-chapter-time,.story-chapter-duration{color:var(--text-faint);font-size:12px;font-family:var(--font-mono);letter-spacing:1px}.story-segments{flex-direction:column;gap:20px;display:flex}.story-chapter-intro{background:#c9b97a08;border-left:2px solid #e8c44c33;border-radius:0 4px 4px 0;padding:20px 24px}.story-chapter-intro p{color:var(--text-narrator);margin:0;font-size:16px;font-style:italic;line-height:1.85}.story-dialogue-block{padding:4px 0}.story-dialogue-player{border-left:2px solid #e8c44c26;padding-left:16px}.story-dialogue-speaker{color:var(--gold);font-size:13px;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;display:block}.story-dialogue-text{color:var(--text);font-size:16px;line-height:1.85}.story-dialogue-text p{margin-bottom:8px}.story-dialogue-text p:last-child{margin-bottom:0}.story-verse-quote{color:var(--gold-warm);background:#e8c44c05;border-left:2px solid #e8c44c4d;border-radius:0 3px 3px 0;margin:12px 0;padding:12px 20px;font-style:italic}.story-knowledge-block{background:#c9b97a08;border:1px solid #c9b97a14;border-radius:4px;margin:12px 0;padding:20px}.story-knowledge-header{align-items:center;gap:8px;margin-bottom:8px;display:flex}.story-knowledge-icon{font-size:16px}.story-knowledge-label{color:var(--text-faint);font-size:10px;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase}.story-knowledge-title{color:var(--gold);margin-bottom:8px;font-size:17px;font-weight:400}.story-knowledge-content{color:var(--text-muted);font-size:14px;line-height:1.8}.story-empty{text-align:center;padding:60px 20px}.story-empty p{color:var(--text-faint);font-style:italic}.story-chapter-nav{border-top:1px solid #c9b97a0f;justify-content:space-between;margin-top:48px;padding-top:24px;display:flex}.story-chapter-nav .btn{padding:10px 28px;font-size:11px}.story-play-fab{color:var(--gold);font-size:12px;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:40;background:#e8c44c1a;border:1px solid #e8c44c4d;border-radius:3px;padding:10px 24px;text-decoration:none;transition:all .3s;position:fixed;bottom:24px;right:24px}.story-play-fab:hover{border-color:var(--gold);background:#e8c44c33}@media (width<=768px){.story-sidebar{display:none}.story-content{padding:24px 16px}}