/* ============================================================
   CELESTIAL MASTER — SEXTANT SIMULATOR styles (Phase 4)
   ============================================================ */

.sx-panel{padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}

.sx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sx-tab{
  font-family:var(--font-ar);font-weight:700;font-size:.85rem;
  color:var(--ink-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:10px 6px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.sx-tab.active{
  color:var(--navy-900);
  background:linear-gradient(135deg,var(--gold-300),var(--gold));
  border-color:var(--gold);
}

.sx-target-row{
  text-align:center;font-weight:700;font-size:1rem;
  color:var(--ink);
}
.sx-target-row .mono{color:var(--cyan);font-size:1.15rem;letter-spacing:1px}

/* القراءة الحية */
.sx-read-wrap{text-align:center}
.sx-read{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:1.7rem;font-weight:700;letter-spacing:2px;
  color:var(--gold-300);
  background:rgba(10,22,40,.75);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-sm);
  padding:8px 22px;
  direction:ltr;
  text-shadow:0 0 18px rgba(212,168,87,.35);
}
.sx-read.off-arc{color:var(--cyan);text-shadow:0 0 18px rgba(77,208,225,.4)}

/* المسرح: سكستانت + درام */
.sx-stage{
  display:flex;gap:10px;align-items:stretch;
  direction:ltr;
}
.sx-stage svg{flex:1;min-width:0;touch-action:none}
#sx-arm{cursor:grab}
#sx-arm:active{cursor:grabbing}

.sx-drum{
  width:96px;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  touch-action:none;cursor:ns-resize;
  user-select:none;
}
.sx-drum-win{
  position:relative;
  width:86px;height:150px;
  background:linear-gradient(180deg,rgba(10,22,40,.95),rgba(26,47,79,.9) 50%,rgba(10,22,40,.95));
  border:1px solid var(--glass-border-strong);
  border-radius:10px;
  overflow:hidden;
}
.sx-drum-line{
  position:absolute;left:0;right:0;top:50%;
  height:0;border-top:2px solid var(--danger);
  box-shadow:0 0 8px rgba(231,76,60,.6);
  pointer-events:none;
}
.sx-drum-lbl{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:1px;
  color:var(--ink-dim);
}

/* أزرار الدقة */
.sx-btns{
  display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
  direction:ltr;
}
.sx-b{
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  color:var(--gold-300);
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  border-radius:8px;
  padding:10px 2px;cursor:pointer;
  transition:background .15s;
}
.sx-b:active{background:rgba(212,168,87,.2)}
.sx-b.fine{color:var(--cyan);border-color:rgba(77,208,225,.4)}

/* منظار الأفق — وضع IE */
.sx-scope{
  position:relative;
  width:min(280px,80%);aspect-ratio:1;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  background:#0a1628;
  direction:ltr;
}
.sx-scope-half{
  position:absolute;top:0;bottom:0;width:50%;
  overflow:hidden;
}
.sx-direct{right:0}
.sx-reflect{left:0;border-right:1px dashed rgba(147,163,188,.4)}
.sx-h-line{
  position:absolute;left:-4%;right:-4%;top:50%;
  height:0;
  border-top:3px solid #4dd0e1;
  box-shadow:0 -40px 60px rgba(77,208,225,.15);
}
.sx-reflect .sx-h-line{border-top-color:#e6c074;transition:transform .06s linear}
.sx-scope::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,rgba(20,41,74,.35) 0 49.5%,rgba(10,22,40,.55) 50.5%);
  pointer-events:none;
}
.sx-scope-ring{
  position:absolute;inset:0;border-radius:50%;
  border:4px solid #1a2f4f;
  box-shadow:inset 0 0 24px rgba(0,0,0,.7);
  pointer-events:none;
  transition:border-color .2s;
}
.sx-scope.aligned .sx-scope-ring{border-color:var(--success)}

/* إجابة IE */
.sx-ie-answer{margin-top:10px}
.sx-ie-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#sx-ie-controls{display:flex;flex-direction:column;gap:4px}

/* التغذية الراجعة */
.sx-feedback{
  min-height:1.4em;
  text-align:center;font-size:.9rem;font-weight:600;line-height:1.7;
}
.sx-feedback.ok{color:var(--success)}
.sx-feedback.bad{color:var(--danger)}

@media (max-width:400px){
  .sx-read{font-size:1.35rem;padding:6px 14px}
  .sx-btns{grid-template-columns:repeat(4,1fr)}
  .sx-drum{width:78px}
  .sx-drum-win{width:70px;height:130px}
}