/* ============================================================
   mobile.css — <768px fallback: CSS parallax star layers,
   vertical constellation cards, responsive layouts.
   Desktop hides these by default.
   ============================================================ */

/* hidden on desktop */
#mobile-parallax, #mobile-constellation { display: none; }
#mobile-particles { display: none; }

body.is-mobile {
  overflow-y: auto;   /* allow page scroll on mobile */
  overflow-x: hidden;
}
body.is-mobile #hud { display: none; }       /* hide desktop HUD on mobile */
body.is-mobile #starfield { display: none !important; }
body.is-mobile.panel-open { overflow: hidden; } /* panel scrolls internally */

/* show mobile layers */
body.is-mobile #mobile-parallax { display: block; }
body.is-mobile #mobile-constellation { display: block; }

/* ---------- CSS parallax star layers ---------- */
#mobile-parallax {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.parallax-layer {
  position: absolute; inset: -20%;
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 80px 120px, #c8d2e0, transparent),
    radial-gradient(1px 1px at 160px 80px, #fff, transparent),
    radial-gradient(2px 2px at 240px 200px, #f5a623, transparent),
    radial-gradient(1px 1px at 320px 50px, #fff, transparent);
  opacity: 0.5;
}
.parallax-layer.layer-1 { background-size: 350px 350px; opacity: 0.35; animation: drift1 120s linear infinite; }
.parallax-layer.layer-2 { background-size: 500px 500px; opacity: 0.25; animation: drift2 180s linear infinite; }
.parallax-layer.layer-3 { background-size: 700px 700px; opacity: 0.15; animation: drift3 260s linear infinite; }
@keyframes drift1 { from { transform: translateY(0); } to { transform: translateY(-350px); } }
@keyframes drift2 { from { transform: translateY(0); } to { transform: translateY(-500px); } }
@keyframes drift3 { from { transform: translateY(0); } to { transform: translateY(-700px); } }

#mobile-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: block; }

/* ---------- Mobile constellation ---------- */
#mobile-constellation {
  position: relative; z-index: 2;
  padding: 90px 18px 60px;
  min-height: 100vh;
}
.mobile-header { text-align: center; margin-bottom: 36px; }
.mobile-eyebrow { color: #f5a623; font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; }
.mobile-title { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: #fff; text-shadow: 0 0 30px rgba(245,166,35,0.5); }
.mobile-sub { color: #8a93a6; font-size: 11px; letter-spacing: 0.05em; margin-top: 6px; }

.card-grid { display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 0 auto; }
.star-card {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 18px 20px; text-align: left;
  background: rgba(8,10,16,0.78);
  border: 1px solid rgba(120,140,180,0.18);
  border-left: 3px solid var(--card-color, #f5a623);
  border-radius: 4px;
  color: #e8ecf3;
  min-height: 44px;          /* touch target */
  transition: transform 150ms, border-color 150ms, background 150ms;
  -webkit-tap-highlight-color: transparent;
}
.star-card:active { transform: scale(0.98); background: rgba(120,140,180,0.08); }
.card-dot {
  flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--card-color, #f5a623);
  box-shadow: 0 0 16px var(--card-color, #f5a623);
}
.card-label { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.card-sub { color: #6a7388; font-size: 11px; letter-spacing: 0.04em; }
.star-card--project .card-label { color: var(--card-color); }
.card-go { color: var(--card-color, #f5a623); font-size: 10px; letter-spacing: 0.08em; }

/* ---------- Responsive themed panels ---------- */
@media (max-width: 768px) {
  .panel-inner { padding: 80px 18px 100px; }
  .panel h1 { font-size: 36px; }
  .panel h2 { font-size: 22px; }
  .identity-panel .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .identity-panel .panel-inner { padding-top: 90px; }
  .solar-box { max-width: 100%; }
  .cinder-hero, .ttgod-hero { min-height: 240px; }
  .cmp-row { flex-direction: column; }
  .cmp-vs { padding: 8px 0; }
  .mech-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .flip-grid { grid-template-columns: 1fr; }
  .flow-box { font-size: 11px; }
  .api-output { height: 180px; }
  .phase-viz { flex-direction: column; align-items: stretch; }
  .phase-line { width: 2px; height: 24px; margin: 4px auto; }
  .contact-actions { flex-direction: column; }
  .panel-return { font-size: 10px; padding: 6px 12px; }
  #dir-tree { font-size: 10px; }
}

/* keep HUD energy widget hidden on very small screens */
@media (max-width: 480px) {
  body:not(.is-mobile) #energy-widget { display: none; }
}