/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA — CREATOR SECTION MOBILE FIX
   Load LAST, after mobile-fx.css.
   Fixes: HUD sitting beside the photo, stamp overlapping the chips,
          photo squeezed to ~90px, stuck hover states on contact icons.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── Card: room at the top for the stamp ─────────────────────────── */
  .dev-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 56px 20px 30px !important;   /* top padding clears the stamp */
    gap: 22px !important;
  }

  /* ── Stamp: centered banner instead of a corner overlay ──────────── */
  .dev-stamp {
    right: auto !important;
    left: 50% !important;
    top: 16px !important;
    transform: translateX(-50%) scale(1) !important;
    font-size: .56rem !important;
    padding: 6px 14px !important;
    white-space: nowrap;
  }
  /* keep the entry animation, just translate-aware */
  .dev-stamp { opacity: 0; }
  .developer-section.dev-on .dev-stamp {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }

  /* ── THE KEY FIX ──────────────────────────────────────────────────
     .dev-visual-3d is a flex ROW in style.css, so a static .dev-hud
     became a sibling of the photo and halved its width.
     Switch to a column so the photo sits on top, chips underneath. */
  .dev-visual-3d {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto !important;
    gap: 16px;
  }

  .dev-card-inner {
    width: 190px !important;
    max-width: 60vw;
    margin: 0 auto;
  }
  .dev-photo {
    width: 100% !important;
    max-height: 240px !important;
    margin: 0 auto;
  }

  /* ── HUD chips: one centered row under the photo ─────────────────── */
  .dev-hud {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 7px !important;
    width: 100%;
    margin: 0 !important;
  }
  .dev-hud span,
  .dev-hud span:nth-child(2),
  .dev-hud span:nth-child(3) {
    align-self: auto !important;
    transform: none !important;
    font-size: .55rem !important;
    padding: 4px 9px !important;
    white-space: nowrap;
  }
  .developer-section.dev-on .dev-hud span { opacity: 1; }

  /* ── Text block ──────────────────────────────────────────────────── */
  .dev-info { width: 100%; }
  .dev-title { font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important; }
  .dev-name {
    justify-content: center !important;
    font-size: 1.15rem !important;
    gap: 8px !important;
  }
  .dev-realname { font-size: .95rem !important; }
  .dev-bio {
    font-size: .9rem !important;
    line-height: 1.65;
    margin-bottom: 22px !important;
  }

  /* ── Contacts ────────────────────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .contact-item {
    padding: 14px 16px !important;
    justify-content: center;
    font-size: .92rem !important;
    word-break: break-word;
  }

  /* decorative extras that don't survive the shrink */
  .dev-halo { display: none !important; }
  .dev-container::after { display: none !important; }
}

@media (max-width: 480px) {
  .dev-container { padding: 52px 16px 26px !important; }
  .dev-card-inner { width: 165px !important; }
  .dev-hud span { font-size: .5rem !important; padding: 3px 7px !important; }
  .dev-stamp { font-size: .52rem !important; padding: 5px 11px !important; }
  .contact-item { font-size: .86rem !important; padding: 13px 12px !important; }
}

/* ── Touch: kill stuck hover states ───────────────────────────────────
   On mobile, :hover latches after a tap. That left the shimmer overlay
   and the scaled icon frozen — the grey box behind the first icon. */
@media (hover: none) {
  .contact-item::after { display: none !important; }
  .contact-item:hover::after { animation: none !important; }
  .contact-item:hover { transform: none !important; box-shadow: none !important; }
  .contact-item:hover .c-icon {
    transform: none !important;
    filter: none !important;
  }
  .c-icon { background: transparent !important; }
  .dev-card-inner, .dev-photo { transform: none !important; }
  .dev-name:hover { animation: none !important; }
}