:root { --obsidian:#0a0a0f; --gold:#c9a96e; --violet:#7c3aed; --cream:#f5f0e8; --green:#4ade80; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Naskh Arabic','Outfit',serif; background:var(--obsidian); color:var(--cream); overflow-x:hidden; direction:rtl; }

.section { position:relative; width:100%; min-height:100vh; overflow:hidden; padding-top:5rem; }
.section-title { font-family:'Noto Naskh Arabic',serif; font-size:2.2rem; color:var(--gold); text-align:center; padding:1rem 1rem; text-shadow:0 0 30px rgba(201,169,110,0.3); }
.section-subtitle { text-align:center; opacity:0.6; font-size:1rem; margin-bottom:1.5rem; }

.main-nav { position:fixed; top:0; left:0; right:0; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; z-index:1000; background:linear-gradient(to bottom,rgba(10,10,15,0.95),rgba(10,10,15,0.7),transparent); backdrop-filter:blur(10px); border-bottom:1px solid rgba(201,169,110,0.1); }
.nav-logo { font-family:'Noto Naskh Arabic',serif; font-size:1.2rem; color:var(--gold); text-decoration:none; display:flex; align-items:center; gap:0.5rem; }
.nav-logo::before { content:"🌴"; font-size:1.4rem; }
.nav-back { color:rgba(245,240,232,0.7); text-decoration:none; font-size:0.9rem; border:1px solid rgba(201,169,110,0.3); padding:0.4rem 1rem; border-radius:50px; transition:0.3s; }
.nav-back:hover { color:var(--gold); border-color:var(--gold); }

.loading-screen { position:fixed; inset:0; background:var(--obsidian); z-index:5000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.loading-screen.hidden { display:none; }
.loading-palm { font-size:4rem; animation:sway 2s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
.loading-text { font-family:'Noto Naskh Arabic',serif; color:var(--gold); font-size:1.2rem; }
.loading-bar { width:200px; height:3px; background:rgba(201,169,110,0.2); border-radius:3px; overflow:hidden; }
.loading-bar-fill { height:100%; background:var(--gold); border-radius:3px; animation:load 1.2s ease-in-out forwards; }
@keyframes load { from{width:0} to{width:100%} }

.game-canvas-container { width:100%; height:70vh; position:relative; }
.game-canvas-container canvas { display:block; width:100%; height:100%; }
.game-controls { display:flex; justify-content:center; gap:1rem; padding:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.game-btn { padding:0.7rem 1.5rem; background:linear-gradient(135deg,var(--violet),#4338ca); color:white; border:1px solid var(--gold); border-radius:50px; cursor:pointer; font-family:'Noto Naskh Arabic',serif; font-size:0.9rem; transition:0.3s; }
.game-btn:hover { transform:translateY(-2px); box-shadow:0 5px 20px rgba(124,58,237,0.4); }
.game-btn.active { background:linear-gradient(135deg,var(--gold),#8b7355); color:var(--obsidian); }

.info-overlay { position:fixed; inset:0; background:rgba(10,10,15,0.95); z-index:2000; display:none; align-items:center; justify-content:center; padding:2rem; }
.info-overlay.active { display:flex; }
.info-box { background:linear-gradient(135deg,#1a0a2e,#2a1a4e); border:2px solid var(--gold); border-radius:20px; padding:2rem; max-width:600px; width:100%; text-align:center; position:relative; animation:fadeIn 0.5s ease; max-height:85vh; overflow-y:auto; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
.info-box h2 { font-family:'Noto Naskh Arabic',serif; color:var(--gold); font-size:1.8rem; margin-bottom:1rem; }
.info-box p { opacity:0.8; line-height:1.8; margin-bottom:1rem; }
.info-box .close-btn { position:absolute; top:1rem; left:1rem; width:36px; height:36px; border-radius:50%; border:1px solid var(--gold); background:transparent; color:var(--gold); cursor:pointer; font-size:1.2rem; transition:0.3s; }
.info-box .close-btn:hover { background:var(--gold); color:var(--obsidian); }

.timeline-bar { display:flex; justify-content:center; align-items:center; gap:0.5rem; padding:1rem; margin:0 auto; max-width:800px; flex-wrap:wrap; }
.timeline-dot { width:16px; height:16px; border-radius:50%; background:rgba(201,169,110,0.3); border:2px solid var(--gold); cursor:pointer; transition:0.3s; position:relative; }
.timeline-dot:hover, .timeline-dot.active { background:var(--gold); transform:scale(1.3); }
.timeline-dot::after { content:attr(data-year); position:absolute; top:-30px; left:50%; transform:translateX(-50%); font-size:0.75rem; color:var(--gold); opacity:0; transition:0.3s; white-space:nowrap; }
.timeline-dot:hover::after, .timeline-dot.active::after { opacity:1; }
.timeline-line { flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); max-width:100px; }

.tag-pill { padding:0.3rem 0.8rem; background:rgba(201,169,110,0.1); border:1px solid rgba(201,169,110,0.2); border-radius:20px; font-size:0.8rem; color:var(--gold); display:inline-block; }
.tag-row { margin-top:1.5rem; display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }

.footer-note { padding:3rem 2rem; text-align:center; opacity:0.4; font-size:0.85rem; }

@media(max-width:768px){ .section-title{font-size:1.6rem} .game-controls{flex-direction:column;align-items:center} }