:root{color-scheme:dark;--bg:#05060f;--line:rgba(140,100,255,.22);--text:#f0eaff;--muted:#a89bc8;--cyan:#5ee7ff;--magenta:#ff6bcb;--purple:#9b6dff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:'Vazirmatn',Tahoma,sans-serif;overflow:hidden}
.screen{position:fixed;inset:0;overflow:hidden}
.screen[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(160,130,255,.35);background:rgba(20,16,40,.7);color:var(--text);font-size:18px}

/* welcome */
#welcome{background-size:cover;background-position:center}
.welcome-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,6,15,.25),rgba(5,6,15,.85))}
.welcome-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:18px}
.welcome-copy h1{margin:0;font-size:clamp(30px,5vw,58px);text-shadow:0 4px 30px #000}
.welcome-copy p{margin:0;max-width:560px;line-height:1.9;color:#e4dcff;text-shadow:0 2px 12px #000}
.btn-enter{margin-top:10px;padding:14px 44px;border-radius:14px;border:1px solid rgba(160,140,255,.45);background:linear-gradient(135deg,#7b5cff,#5a3fd4);color:#fff;font-size:18px;font-weight:700;box-shadow:0 6px 30px rgba(123,92,255,.45);transition:.2s}
.btn-enter:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(123,92,255,.6)}
.btn-enter.small{padding:10px 18px;font-size:13px;margin-top:12px}

/* globe */
#globeScreen{background:radial-gradient(ellipse at 50% 40%,#14112e 0%,#05060f 70%)}
.globe-host{position:absolute;inset:0}
.globe-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--cyan);z-index:2}
.globe-loading[hidden]{display:none}
.globe-host canvas{display:block;width:100%;height:100%;cursor:grab}
.globe-host canvas:active{cursor:grabbing}
.globe-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);background:rgba(10,8,22,.6);padding:8px 16px;border-radius:12px;border:1px solid var(--line);white-space:nowrap}
.city-card{position:absolute;top:22px;right:22px;width:min(340px,calc(100vw - 44px));padding:20px;border-radius:18px;background:rgba(14,12,32,.92);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,30,.6);backdrop-filter:blur(14px)}
.city-card[hidden]{display:none}
.city-card .icon-btn{position:absolute;top:12px;left:12px;width:30px;height:30px;font-size:16px}
.city-name{font-size:22px;font-weight:700;margin-top:4px}
.city-country{font-size:12px;color:var(--cyan);margin-top:4px}
.city-status{margin-top:14px;font-size:13px;line-height:1.7;color:#d9d0f5}
.progress{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:12px}
.progress i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--purple),var(--cyan),var(--magenta));animation:slide 1.6s ease-in-out infinite}
.progress.done i{width:100%;animation:none}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.city-intro{font-size:12.5px;line-height:1.9;color:var(--muted);margin:12px 0 0}

/* story */
.story-stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#000}
#storyScreen{overflow:hidden}
.story-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.story-scroll::-webkit-scrollbar{display:none}
.story-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 55%,rgba(0,0,0,.5))}
.story-back{position:absolute;top:18px;left:18px;z-index:3;width:auto;padding:0 14px;background:rgba(0,0,0,.45)}
.story-head{position:absolute;top:24px;right:24px;z-index:2;max-width:min(560px,80vw)}
.story-head h2{margin:0 0 8px;font-size:clamp(22px,3.4vw,40px);text-shadow:0 3px 20px #000}
.story-head p{margin:0;font-size:13px;line-height:1.8;color:#e4dcff;text-shadow:0 2px 10px #000}
.story-copy{position:absolute;right:6vw;bottom:14vh;max-width:min(600px,86vw);z-index:2;transition:opacity .6s ease,transform .6s ease}
.story-copy.hide{opacity:0;transform:translateY(16px)}
.story-year{display:inline-block;font-size:13px;color:var(--cyan);margin-bottom:6px}
.story-copy h3{margin:0 0 10px;font-size:clamp(20px,2.6vw,32px);text-shadow:0 3px 18px #000}
.story-copy p{margin:0;font-size:clamp(14px,1.5vw,19px);line-height:1.95;text-shadow:0 2px 10px #000}
.story-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);z-index:2}
.story-progress i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.story-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.7);z-index:2}
#storyTrack{width:100%}
@media(max-width:700px){.story-copy{right:5vw;left:5vw;bottom:12vh;max-width:none}.globe-hint{font-size:12px;white-space:normal;width:86vw;text-align:center}}

.back-studio{position:absolute;top:18px;left:18px;z-index:3;padding:9px 14px;border-radius:10px;border:1px solid rgba(160,130,255,.35);background:rgba(20,16,40,.7);color:var(--text);text-decoration:none;font-size:13px}