:root{
  --bg:#05060f;
  --ink:#eaf0ff;
  --muted:#9aa6c8;
  --accent:#6db0ff;
  --gold:#ffd479;
  --panel:rgba(10,14,30,.82);
  --line:rgba(150,180,255,.55);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  color:var(--ink);
  font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  overscroll-behavior:none;}
#sky{position:fixed;inset:0;display:block;touch-action:none;}

/* Top status bar */
#topbar{
  position:fixed;top:0;left:0;right:0;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(to bottom, rgba(5,6,15,.85), rgba(5,6,15,0));
  pointer-events:none;z-index:5;
}
#title{font-weight:700;font-size:15px;letter-spacing:.2px;flex:0 0 auto;}
#status{font-size:13px;color:var(--muted);text-align:center;min-height:18px;flex:1 1 auto;}
#status .ok{color:var(--gold);font-weight:700;}

/* Compass toggle (auto vs. manual) */
#compass{
  pointer-events:auto;flex:0 0 auto;
  width:46px;height:46px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);
  backdrop-filter:blur(6px);transition:border-color .2s, opacity .2s;
}
#compass:active{transform:scale(.95);}
#compass svg{display:block;}
#compass .ring{fill:none;stroke:rgba(190,210,255,.30);stroke-width:1.4;}
#compass .tickc{stroke:rgba(190,210,255,.45);stroke-width:1.2;stroke-linecap:round;}
#compass .lubber{fill:var(--accent);}
#compass .north{fill:#ff5d5d;}
#compass .south{fill:rgba(190,205,240,.45);}
#compass .hub{fill:#eaf0ff;}
#compass .lbl{fill:rgba(205,220,255,.7);font:600 8px Vazirmatn,sans-serif;}
#compass .lbl-n{fill:#ff8080;font:700 8.5px Vazirmatn,sans-serif;}
#compass .slash{stroke:var(--accent);stroke-width:2;stroke-linecap:round;display:none;}
/* Disabled (manual): hide the whole card, show only one narrow slash. */
#compass.manual{border-color:rgba(109,176,255,.6);}
#compass.manual .ring,
#compass.manual .needle,
#compass.manual .lubber,
#compass.manual .hub{display:none;}
#compass.manual .slash{display:block;}

/* Bottom bar */
#bottombar{
  position:fixed;left:0;right:0;bottom:0;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(to top, rgba(5,6,15,.92), rgba(5,6,15,0));
  z-index:5;display:flex;flex-direction:column;gap:8px;
}
#hint{font-size:12px;color:var(--muted);text-align:center;min-height:16px;}
.bottomrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#pickerBtn{
  max-width:78%;background:var(--panel);color:var(--ink);
  border:1px solid rgba(120,150,230,.35);border-radius:14px;
  padding:10px 16px;font-size:15px;font-family:inherit;font-weight:600;
  cursor:pointer;backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#pickerLabel{overflow:hidden;text-overflow:ellipsis;}
#pickerBtn:active{transform:scale(.99);}
#pickerBtn .chev{color:var(--accent);font-size:13px;}

/* Popups (bottom sheets) */
#pickerModal, #aboutModal{
  position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,4,12,.6);backdrop-filter:blur(4px);
}
#pickerModal[hidden], #aboutModal[hidden]{display:none;}
.modal-card{
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  background:rgba(11,16,34,.97);border:1px solid rgba(120,150,230,.25);
  border-radius:22px 22px 0 0;padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  box-shadow:0 -10px 50px rgba(0,0,0,.6);
  animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4;}to{transform:none;opacity:1;}}
.modal-grab{width:44px;height:5px;border-radius:3px;background:rgba(160,180,230,.35);margin:8px auto 6px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px;}
.modal-head span{font-weight:700;font-size:17px;}
#closeModal, #closeAbout{
  background:rgba(255,255,255,.08);border:none;color:var(--ink);
  width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;font-family:inherit;
}
/* About popup */
#aboutBody{overflow-y:auto;padding:4px 4px 8px;line-height:1.9;color:var(--ink);}
#aboutBody p{margin:0 0 12px;font-size:14px;color:var(--muted);}
#aboutVersion{
  margin-top:8px;padding-top:14px;border-top:1px solid rgba(120,150,230,.18);
  font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;
}
#aboutVersion b{color:var(--ink);font-weight:600;}
#aboutVersion .bld{direction:ltr;}
/* Help (?) button */
#helpBtn{
  pointer-events:auto;flex:0 0 auto;
  width:34px;height:34px;padding:0;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:700;
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);color:var(--accent);
  backdrop-filter:blur(6px);
}
#helpBtn:active{transform:scale(.95);}
#grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;
  overflow-y:auto;padding:4px 2px 2px;
}
.cell{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,150,230,.15);
  border-radius:14px;padding:10px 6px;cursor:pointer;font-family:inherit;color:var(--ink);
}
.cell:active{transform:scale(.97);}
.cell.sel{border-color:var(--accent);background:rgba(109,176,255,.16);}
.cell .icon{width:64px;height:64px;}
.cellname{font-size:12px;font-weight:500;text-align:center;line-height:1.3;}
.cellen{font-size:10px;font-weight:400;color:var(--muted);text-align:center;line-height:1.2;}

/* Intro / permission overlay */
#overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%, #0b1230 0%, #05060f 70%);
  padding:28px;text-align:center;
}
#overlay .card{max-width:420px;}
#overlay h1{font-size:24px;margin:0 0 6px;}
#overlay .sub{color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 22px;}
#overlay ul{list-style:none;padding:0;margin:0 0 24px;text-align:right;}
#overlay li{font-size:14px;color:var(--ink);margin:10px 0;display:flex;gap:10px;align-items:flex-start;}
#overlay li b{color:var(--accent);}
#startBtn{
  background:linear-gradient(180deg,#6db0ff,#3d7ee0);color:#04122c;border:none;
  border-radius:16px;padding:16px 26px;font-size:18px;font-weight:700;font-family:inherit;
  width:100%;cursor:pointer;box-shadow:0 8px 30px rgba(80,140,255,.35);
}
#startBtn:active{transform:scale(.98);}
#overlay .note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.8;}
.star-emoji{font-size:34px;}