/* ═══════════════════════════════════════════════════════════════
   mobile.css — responsive overrides (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Circles ─────────────────────────────────────────────────── */
  .circle-wrap {
    width: 85vw;
    height: 85vw;
    max-width: none;
    max-height: none;
  }

  /* ── Layout: stack vertically ────────────────────────────────── */
  .circle-row {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }

  /* Left panel goes above circle, right panel below */
  .panel-left  { order: 1; }
  .circle-wrap { order: 2; }
  .panel-right { order: 3; }

  .panel {
    max-width: 100%;
    text-align: center !important;
    font-size: 14px;
  }

  .panel-right .panel-link {
    display: inline-block;
    margin: 0 8px;
  }

  /* ── Corner nav ──────────────────────────────────────────────── */
  #corner-nav {
    padding: 18px 20px;
  }

  #nav-info,
  #nav-contact {
    font-size: 14px;
  }

  #nav-contact::after {
    content: 'LINKS';
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  /* ── Back button ─────────────────────────────────────────────── */
  #back-btn {
    top: 50px;
    right: 20px;
    font-size: 11px;
  }

  /* ── Circle form: expand circle on mobile ────────────────────── */
  .circle-wrap.form-active {
    width: 92vw;
    height: 92vw;
  }

  /* ── Video: full width when playing ─────────────────────────── */
  .circle-wrap.video-active {
    width: 92vw;
    height: 92vw;
  }

}

@media (max-width: 480px) {
  .circle-wrap {
    width: 88vw;
    height: 88vw;
  }
}