/* ── layout.css — top bar, main grid ── */

/* ── Top bar ── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  background: rgba(8,3,14,0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237,227,240,0.08);
}

/* ── Announcement band ── */
.announcement {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font: 400 0.74rem/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.ann-badge {
  font: 700 0.58rem/1 var(--font-mono);
  letter-spacing: 0.10em;
  color: var(--gold);
  background: rgba(242,166,36,0.10);
  border: 1px solid rgba(242,166,36,0.28);
  border-radius: 3px;
  padding: 0.18em 0.45em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ann-text {
  color: rgba(237,227,240,0.52);
}

.ann-sep {
  color: rgba(237,227,240,0.18);
}

.ann-link {
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  transition: color 0.2s;
  flex-shrink: 0;
}
.ann-link:hover { color: var(--cream); }
.ann-arrow { font-size: 0.9rem; }

/*
 * .main = the outer wrapper that holds both panels.
 * Inset from screen edges — top bar height + side margins.
 * No background. Both panels are transparent over the global bg.
 */
.main {
  position: fixed;
  inset: 90px 0 90px 0;
  /* inset: 44px 0 0 0; */
  padding: 0 6%;
  display: grid;
  grid-template-columns: 36% 64%;
  z-index: 1;
  column-gap: 0;
  overflow: visible;
}

/* ── Left panel — studio, fully transparent ── */
.panel-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.4rem 2.8rem 3rem 0;
  border-right: 1px solid var(--sep);
  overflow-y: auto;
  overflow-x: visible;
}
.panel-left::-webkit-scrollbar { width: 3px; }
.panel-left::-webkit-scrollbar-track { background: transparent; }
.panel-left::-webkit-scrollbar-thumb {
  background: rgba(242,166,36,0.14);
  border-radius: 2px;
}

/* ── Right panel — transparent, game section + robot ── */
.panel-right {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3.4rem 0 3rem 3rem;
  overflow: visible;
}

/* ── Smoke overlay — kept in DOM but invisible; not used for parallax ── */
.smoke-overlay { display: none; }


/* ════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ════════════════════════════════════ */

/* ─── Tablet & large phone (≤ 768px) ───
   Switch to single-column stack.
   Game panel floats to top, studio info below.
   Body becomes scrollable. */
@media (max-width: 768px) {
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Remove backdrop-filter blur — repaints on every scroll frame on mobile GPU */
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 3, 14, 0.88);
  }

  /* Parallax is off on mobile — will-change just wastes GPU compositing layers */
  body::before,
  .bg-left {
    will-change: auto;
  }

  .main {
    position: relative;
    inset: auto;
    margin-top: 44px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: calc(100dvh - 44px);
  }

  /* Game section comes first on mobile */
  .panel-right {
    order: -1;
    position: relative;
    padding: 2.2rem 6% 1.8rem;
    min-height: max(260px, 58vw);
    overflow: visible;
  }

  /* Studio info below game section */
  .panel-left {
    order: 1;
    padding: 2rem 6% 5rem;
    border-right: none;
    border-top: 1px solid var(--sep);
    overflow: visible;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  .panel-left::-webkit-scrollbar { display: none; }

  .robot-bg {
    height: 100%;
    right: -3%;
    bottom: -2%;
    opacity: 0.50;
    will-change: auto;
    /* mix-blend-mode:screen forces offscreen compositing — not worth it on mobile */
    mix-blend-mode: normal;
    filter: none;
  }
}

/* ─── Phone portrait (≤ 480px) ─── */
@media (max-width: 480px) {
  .topbar { padding: 0 4%; }
  .ann-text { display: none; }
  .ann-sep  { display: none; }

  .panel-right {
    padding: 1.8rem 5% 1.4rem;
    min-height: max(240px, 54vw);
  }

  .panel-left {
    padding: 1.8rem 5% 5rem;
    gap: 1.2rem;
  }
}

/* ─── Landscape phone (wide & short: ≤ 900px × ≤ 500px) ───
   Keep two-column grid but make page scrollable. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .main {
    position: relative;
    inset: auto;
    margin-top: 44px;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: calc(100dvh - 44px);
    overflow: visible;
  }

  .panel-right {
    order: 0;
    min-height: auto;
    padding: 1.4rem 0 1.4rem 2.5rem;
    overflow: visible;
  }

  .panel-left {
    order: 0;
    padding: 1.4rem 2rem 1.4rem 0;
    border-right: 1px solid var(--sep);
    border-top: none;
    overflow-y: auto;
    justify-content: flex-start;
    gap: 1rem;
  }

  .robot-bg {
    height: 90%;
    opacity: 0.48;
    will-change: auto;
    mix-blend-mode: normal;
    filter: none;
  }

  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 3, 14, 0.88);
  }

  body::before,
  .bg-left {
    will-change: auto;
  }
}