/* ===========================================================================
   txx.network — presentation fixes applied over the compiled Next.js build.

   No source project is available, so these are corrections layered on the
   build's own CSS. Port them into the components when the source exists;
   a fresh `next build` will not include this file.

   1. Header logo was being cropped.
   2. Hard "comic" shadows were overwhelming on small screens.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. HEADER LOGO — cropped by object-fit:cover

   logo.png is 380x166 (aspect 2.29). Its box renders at 154x58 on mobile
   (aspect 2.66) and 205x68 on desktop (aspect 3.01). With `cover`, the image
   is scaled to FILL the box, so the taller-than-needed image gets its top and
   bottom sliced off — clipping the points of the hexagonal badge.

   `contain` fits the whole mark inside the box instead. The box keeps its
   width, so surrounding layout is unchanged; the logo simply sits centred.
   --------------------------------------------------------------------------- */
.comic-logo img,
header img[src*="logo"],
a[class*="logo"] img {
  object-fit: contain !important;
  object-position: left center !important;
}
.comic-logo {
  overflow: visible !important;   /* nothing to clip once the image fits */
}


/* ---------------------------------------------------------------------------
   2. MOBILE SHADOWS

   The offset shadows (7-14px) are sized for wide cards. On a phone the cards
   sit ~354px wide inside a 390px viewport, so a 10-12px shadow becomes a thick
   black band down the right edge and under every card — and with ~35 cards
   stacked it dominates the yellow sections.

   The comic style is kept, just scaled to the smaller cards.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {

  /* large panels: 10-14px -> 5px */
  .spec-card,
  .hanging-card,
  .wood-frame {
    box-shadow: 5px 6px 0 0 #17191f !important;
  }

  /* mid-size cards and rows: 7-10px -> 4px */
  main article,
  section article,
  .comic-faq details,
  details[class],
  .road-window,
  .unlock-note,
  .launch-note,
  .allocation-strip,
  .allocation-visual,
  .supply-card,
  .contract-card,
  .community-card,
  form[class*="form"],
  aside[class*="notice"] {
    box-shadow: 4px 5px 0 0 #17191f !important;
  }

  /* table rows sit inside a card already — keep theirs subtle */
  tbody tr {
    box-shadow: 3px 4px 0 0 #17191f !important;
  }

  /* the yellow-shadowed safety note keeps its colour, just smaller */
  .social-safety {
    box-shadow: 4px 5px 0 0 #ffd20a !important;
  }

  /* small pills and buttons: already modest, trim slightly */
  .status-pill,
  .token-timer,
  .community-telegram,
  .scroll-rocket,
  a[class*="get-started"] {
    box-shadow: 3px 4px 0 0 #17191f !important;
  }

  /* our own private-sale card, kept consistent with the rest */
  .txx-sale-card {
    box-shadow: 4px 4px 0 rgba(23, 25, 31, .28) !important;
  }
}

/* very small phones: trim once more so cards keep breathing room */
@media (max-width: 380px) {
  .spec-card,
  .hanging-card,
  .wood-frame {
    box-shadow: 4px 4px 0 0 #17191f !important;
  }
  main article,
  section article,
  .comic-faq details,
  details[class],
  .road-window {
    box-shadow: 3px 4px 0 0 #17191f !important;
  }
}