/* ═══════════════════════════════════════════════════════════════
   سيادة — Modern theme layer ("Night Gold")
   Load AFTER styles.css. Pure override: no IDs/classes renamed.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#060f26; --bg2:#0b1a3a; --card:rgba(20,38,82,.62); --card2:rgba(34,56,110,.55);
  --solid:#0f1f45; --line:rgba(160,185,255,.13); --line2:rgba(160,185,255,.22);
  --text:#f2f5fc; --muted:#93a3c6; --gold:#f2bd3d; --gold2:#ffe39a; --gold3:#c98d16;
  --green:#34d399; --red:#f87171; --blue:#60a5fa;
  --r:22px; --r-sm:14px; --nav:66px;
  --glass:blur(18px) saturate(150%);
  --sh1:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px -12px rgba(0,0,0,.55);
  --sh-gold:0 10px 30px -10px rgba(242,189,61,.55);
  --grad-gold:linear-gradient(135deg,#ffe8a8 0%,#f2bd3d 45%,#d99a1c 100%);
  --ease:cubic-bezier(.22,1,.36,1);
}
html,body{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased}
body{background:
  radial-gradient(900px 500px at 100% -10%,rgba(56,94,190,.35),transparent 60%),
  radial-gradient(700px 420px at -10% 30%,rgba(242,189,61,.07),transparent 60%),
  radial-gradient(800px 600px at 50% 120%,rgba(37,64,140,.35),transparent 60%),
  var(--bg);background-attachment:fixed}
::selection{background:rgba(242,189,61,.35)}
h1{font-weight:900;letter-spacing:-.2px}h2{font-weight:800;font-size:1.12rem}
.muted{color:var(--muted)}
.wrap{padding:14px 14px calc(var(--nav) + var(--safe) + 34px)}
/* no entrance animation on #view children: several views re-render on timers (chat every 4 s), and a transform there would trap the fixed full-screen map */

/* ── top bar (glass) */
.top{background:linear-gradient(180deg,rgba(6,15,38,.92),rgba(6,15,38,.72));backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-bottom:1px solid var(--line);box-shadow:0 8px 24px -16px rgba(0,0,0,.8)}
.top-in{padding:9px 14px;gap:8px}
.brand{font-weight:900;font-size:1.25rem;gap:9px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand img{width:36px;height:36px;border-radius:11px;box-shadow:0 0 0 1px rgba(242,189,61,.45),0 6px 16px -6px rgba(242,189,61,.6)}
.chips{gap:6px}
.chip,a.chip{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:12px;padding:4px 9px;font-size:.84rem;font-weight:800;color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;transition:background .2s,border-color .2s}
a.chip:hover{border-color:rgba(242,189,61,.5);background:rgba(242,189,61,.08)}
.bell{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line2)}
.badge{background:linear-gradient(180deg,#ff7a7a,#e5484d);box-shadow:0 0 0 2px var(--bg),0 4px 10px rgba(229,72,77,.5)}

/* ── bottom nav: floating glass dock */
.nav{left:10px;right:10px;bottom:calc(var(--safe) + 10px);padding-bottom:0;border:1px solid var(--line2);border-radius:24px;
  background:rgba(9,20,48,.78);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 40px -12px rgba(0,0,0,.75);max-width:540px;margin:0 auto}
.nav-in{height:var(--nav);padding:0 4px}
.nav a{position:relative;font-size:.72rem;font-weight:800;color:var(--muted);transition:color .25s}
.nav a .i{position:relative;z-index:1;font-size:1.3rem;filter:grayscale(.9) brightness(1.1);opacity:.7;transition:transform .3s var(--ease),filter .3s,opacity .3s}
.nav a .i img{width:26px;height:26px;display:block}
.nav a::before{content:"";position:absolute;top:7px;left:50%;width:46px;height:32px;margin-left:-23px;border-radius:12px;background:radial-gradient(60% 80% at 50% 50%,rgba(242,189,61,.28),rgba(242,189,61,.06));box-shadow:inset 0 0 0 1px rgba(242,189,61,.35);opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s var(--ease)}
.nav a.on{color:var(--gold2)}
.nav a.on::before{opacity:1;transform:scale(1)}
.nav a.on .i{filter:none;opacity:1;transform:translateY(-1px) scale(1.08)}
.nav a.on::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* ── cards (glass) */
.card{position:relative;background:linear-gradient(180deg,rgba(26,48,100,.62),rgba(14,30,68,.62));border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0;
  box-shadow:var(--sh1)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 35%,rgba(242,189,61,0) 70%,rgba(242,189,61,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card-h h2,.card>h2{display:flex;align-items:center;gap:8px}
.hero-card{background:radial-gradient(420px 200px at 100% -30%,rgba(242,189,61,.20),transparent 70%),radial-gradient(380px 220px at 0% 130%,rgba(96,165,250,.14),transparent 70%),linear-gradient(180deg,rgba(28,52,108,.78),rgba(14,30,68,.78))}
.tip{background:linear-gradient(180deg,rgba(242,189,61,.07),rgba(14,30,68,.55));border:1px dashed rgba(242,189,61,.35)}

/* ── buttons */
.btn{border-radius:16px;min-height:50px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid var(--line2);box-shadow:0 1px 0 rgba(255,255,255,.06) inset;transition:transform .15s var(--ease),filter .2s,background .2s,border-color .2s,box-shadow .2s}
.btn:hover{border-color:rgba(255,255,255,.28)}
.btn:active{transform:scale(.97)}
.btn.primary{position:relative;overflow:hidden;background:var(--grad-gold);color:#1c1300;border:0;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,var(--sh-gold)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sy-shine 4.5s ease-in-out infinite}
@keyframes sy-shine{0%,70%{left:-60%}100%{left:130%}}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35);color:#fecaca}
.btn.ghost{background:transparent}
.btn.sm{min-height:38px;border-radius:12px}
.btn.big{min-height:58px;border-radius:18px;font-size:1.12rem}
.linkbtn{border-bottom-color:var(--line)}

/* ── forms */
.input{background:rgba(4,12,32,.55);border:1px solid var(--line2);border-radius:var(--r-sm);transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,189,61,.14)}
.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35)}
.okbox{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);color:#a7f3d0}

/* ── progress bars */
.bar{height:10px;background:rgba(0,0,0,.35);border:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.bar>i{position:relative;transition:width .8s var(--ease)}
.bar>i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%)}
.bar.energy>i{background:linear-gradient(90deg,#10b981,#6ee7b7);box-shadow:0 0 12px rgba(52,211,153,.55)}
.bar.xp>i{background:linear-gradient(90deg,#3b82f6,#93c5fd);box-shadow:0 0 12px rgba(96,165,250,.55)}
.bar.rank>i{background:linear-gradient(90deg,#d99a1c,#ffe39a);box-shadow:0 0 12px rgba(242,189,61,.55)}
.stat-h{font-size:.84rem}

/* ── avatars */
.av{border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line2);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.av.lg{border-radius:24px}
.av.frame{background:conic-gradient(from 210deg,#ffe8a8,#f2bd3d,#a855f7,#ffe8a8,#d99a1c,#a855f7,#ffe8a8);animation:sy-spinglow 3s ease-in-out infinite alternate}
@keyframes sy-spinglow{from{box-shadow:0 0 14px rgba(242,189,61,.35)}to{box-shadow:0 0 28px rgba(242,189,61,.65)}}

/* ── lists, pills, tabs */
.li{padding:12px 6px;border-bottom:1px solid var(--line);transition:background .2s}
a.li:hover,.li:has(a):hover{background:rgba(255,255,255,.035)}
.pill{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--muted);padding:2px 10px}
.pill.gold{background:var(--grad-gold);color:#1c1300;border-color:transparent;box-shadow:0 4px 12px -4px rgba(242,189,61,.6)}
.pill.green{background:rgba(52,211,153,.16);color:#6ee7b7;border-color:rgba(52,211,153,.4)}
.tabs{background:rgba(4,12,32,.55);border:1px solid var(--line);border-radius:16px;padding:4px}
.tabs button,.tabs a{border-radius:12px;transition:background .25s,color .25s}
.tabs button.on,.tabs a.on{background:linear-gradient(180deg,rgba(242,189,61,.22),rgba(242,189,61,.08));color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(242,189,61,.35)}

/* ── tiles / quick actions (home dashboard) */
.tile,.qa,.statbox,.itemc,.ctype,.day,.copt,.aopt,.cooldown,.reward-lines,.code{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.tile{border-radius:18px;padding:16px 10px;transition:transform .2s var(--ease),border-color .2s,background .2s}
.tile:hover,.qa:hover{border-color:rgba(242,189,61,.4)}
.tile:active,.qa:active{transform:scale(.97)}
.tile .i,.qa .qi{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.qa{border-radius:18px;padding:12px 4px;transition:transform .2s var(--ease),border-color .2s}
.qa.go{background:radial-gradient(120% 90% at 50% 0%,rgba(242,189,61,.22),rgba(242,189,61,.03) 70%),rgba(255,255,255,.03);border-color:rgba(242,189,61,.55);box-shadow:0 10px 24px -12px rgba(242,189,61,.55);animation:sy-breathe 2.4s ease-in-out infinite}
@keyframes sy-breathe{50%{box-shadow:0 10px 30px -8px rgba(242,189,61,.75)}}
.statbox{border-radius:16px;padding:12px 10px}
.statbox .v{font-size:1.15rem;font-weight:900}
.today-grid{gap:10px}
.itemc{border-radius:16px}
.ctype{border-width:1px;border-radius:18px}
.ctype:hover{border-color:rgba(242,189,61,.5)}
.day{border-radius:12px}
.day.now{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,189,61,.2),0 8px 18px -8px rgba(242,189,61,.6);background:rgba(242,189,61,.1)}
.cooldown{border-style:dashed;border-color:var(--line2);border-radius:18px}
.big-clock{font-weight:900;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.price{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.chest.ready{border-color:var(--gold)}
.check .bx{border-radius:9px;border-color:var(--line2);transition:background .25s,border-color .25s}
.check.done .bx{background:linear-gradient(180deg,#6ee7b7,#10b981);border-color:transparent;box-shadow:0 0 12px rgba(52,211,153,.45)}
.gov .pres-card{background:linear-gradient(90deg,rgba(242,189,61,.18),rgba(242,189,61,.02));border-color:rgba(242,189,61,.45);border-radius:18px}
.founder-card{border-color:rgba(242,189,61,.5)}

/* ── onboarding / auth */
.hero{padding:34px 6px 8px}
.hero img{width:108px;height:108px;border-radius:30px;box-shadow:0 0 0 1px rgba(242,189,61,.5),0 20px 50px -10px rgba(242,189,61,.55);animation:sy-float 5s ease-in-out infinite}
@keyframes sy-float{50%{transform:translateY(-6px)}}
.hero h1{font-size:2.6rem;font-weight:900;background:linear-gradient(180deg,#fff 10%,var(--gold2) 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(242,189,61,.25))}
.steps i{height:5px;background:rgba(255,255,255,.12);transition:background .3s,width .3s var(--ease)}
.steps i.on{width:40px;background:var(--grad-gold);box-shadow:0 0 10px rgba(242,189,61,.6)}
.copt{border-width:1px;border-radius:16px;transition:border-color .2s,background .2s}
.copt.on,.aopt.on{border-color:var(--gold);background:rgba(242,189,61,.1);box-shadow:0 0 0 3px rgba(242,189,61,.15)}
.aopt{border-width:1px;border-radius:16px}
.code{border:1px dashed rgba(242,189,61,.6);color:var(--gold2)}
.tut-slide .i{filter:drop-shadow(0 8px 20px rgba(242,189,61,.35))}

/* ── chat */
.msg .b{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:18px;border-start-start-radius:6px;padding:7px 12px;box-shadow:0 4px 12px -8px rgba(0,0,0,.6)}
.msg.me .b{background:linear-gradient(135deg,rgba(242,189,61,.24),rgba(242,189,61,.1));border-color:rgba(242,189,61,.35);border-start-start-radius:18px;border-start-end-radius:6px}
.msg .n{color:var(--gold2)}
.composer{background:linear-gradient(180deg,transparent,var(--bg) 30%);bottom:calc(var(--nav) + var(--safe) + 18px)}

/* ── modal / toast / skeleton */
.modal-bg{background:rgba(2,6,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{background:linear-gradient(180deg,rgba(18,36,78,.97),rgba(9,20,48,.98));border:1px solid var(--line2);border-radius:28px 28px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.8);animation:sy-up .35s var(--ease)}
.modal::before{content:"";display:block;width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);margin:-6px auto 12px}
@media(min-width:600px){.modal{border-radius:28px}.modal::before{display:none}}
@keyframes sy-up{from{transform:translateY(40px);opacity:0}}
.toast{background:rgba(14,30,68,.92);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.7);animation:sy-drop .35s var(--ease)}
@keyframes sy-drop{from{transform:translate(-50%,-14px);opacity:0}}
.toast.bad{border-color:rgba(248,113,113,.45)}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%}

/* ═══════════════ MAP ═══════════════ */
.mapwrap{border:1px solid var(--line2);border-radius:22px;
  background:radial-gradient(120% 90% at 50% 35%,#12306a 0%,#0a1d46 45%,#050d24 100%);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.03)}
.mapwrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(3,8,22,.65) 100%)}
.mapwrap .map,.map{background:transparent}
.map>rect:first-child{fill:url(#sy-grid)}
.map .others path{fill:#15254d;fill-opacity:.85;stroke:rgba(140,170,240,.16)}
.map .inset{fill:rgba(10,24,58,.6);stroke:rgba(242,189,61,.35);stroke-dasharray:5 4}
.map .ctrs{filter:drop-shadow(0 0 6px rgba(110,160,255,.28))}
.map .ct{fill-opacity:.76;stroke:rgba(225,236,255,.7);stroke-linejoin:round;transition:fill-opacity .3s,filter .3s}
@media(hover:hover){.map .ct:hover{fill-opacity:1;filter:brightness(1.18) saturate(1.1)}}
.map .ct.mine{fill-opacity:.95;stroke:rgba(255,227,154,.85)}
.map .ct.sel{fill-opacity:1;stroke:#ffe39a;filter:brightness(1.15) url(#sy-glow);animation:sy-sel 2s ease-in-out infinite}
@keyframes sy-sel{50%{fill-opacity:.82}}
.mapwrap.sy-drag .ctrs,.mapwrap.sy-drag .ct.sel{filter:none!important}
.mapwrap.sy-drag .rgs{filter:none}
.map .rgs{filter:drop-shadow(0 0 3px rgba(255,255,255,.55))}
.map .rg{stroke:rgba(255,255,255,.95)}
.map .rg[data-cap="1"][stroke="#fff"]{stroke:#ffe39a}
.map .rg[stroke="#ef5350"]{stroke:#ff6b6b}
.map text,.map .lb{font-family:'Cairo',sans-serif}
.map .lb{fill:#f5f8ff;font-weight:800;stroke:rgba(5,13,36,.85);stroke-linejoin:round;paint-order:stroke;letter-spacing:.2px}
.map .lb.sel{fill:#ffe39a}
.map .bt{filter:drop-shadow(0 0 4px rgba(248,113,113,.9));animation:sy-pulse 1.4s ease-in-out infinite}
@keyframes sy-pulse{50%{opacity:.55}}
.sy-ping{fill:none;stroke:#ffe39a;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,215,106,.9))}
/* floating controls */
.mapctl{gap:8px;z-index:3}
.mbtn,.fm-btn{border-radius:16px;border:1px solid var(--line2);background:rgba(9,20,48,.72);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 24px -10px rgba(0,0,0,.8);color:var(--text);transition:transform .2s var(--ease),border-color .2s,background .2s}
.mbtn:hover,.fm-btn:hover{border-color:rgba(242,189,61,.55);color:var(--gold2)}
.mbtn:active,.fm-btn:active{transform:scale(.92)}
.fm-title{background:rgba(9,20,48,.72);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line2);border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 24px -10px rgba(0,0,0,.8)}
.presets{gap:7px}
.presets .pill{background:rgba(9,20,48,.7);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-color:var(--line2);color:var(--text);transition:background .25s,color .25s,box-shadow .25s}
.presets .pill.gold,.fm-map .presets .pill.gold{background:var(--grad-gold);color:#1c1300;box-shadow:var(--sh-gold)}
.fm-map .presets .pill{background:rgba(9,20,48,.72)}
.fm-map .mapwrap{border-radius:0;border:0;box-shadow:none}
.fm-sheet{background:linear-gradient(180deg,rgba(20,40,86,.88),rgba(9,20,48,.92));backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line2);border-radius:26px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -10px 50px -10px rgba(0,0,0,.8);animation:sy-up .4s var(--ease)}
.fm-x{border-radius:12px;background:rgba(255,255,255,.06);border-color:var(--line2)}
.legend .pill{color:var(--text)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}