/* ============================================================
   TERRA CONFLICTUS — MOBILE STYLESHEET
   ------------------------------------------------------------
   Every rule in this file is gated by `@media (max-width: 768px)`,
   so it never fires on desktop. The regular browser version is
   completely unchanged. Phones get a stacked, readable layout
   with the heavy decorative animations toned down.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- GLOBAL --------------------------------------- */
  html, body {
    font-size: 14px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;       /* clip glow blobs and stray overflow */
    max-width: 100vw;
  }

  .tc-page { max-width: 100%; }

  /* Stop horizontal overflow from any wide child */
  img, video, iframe, svg, canvas { max-width: 100%; }

  /* Tone down the analog overlays — they thrash on mobile GPUs */
  .tc-vhs       { opacity: 0.35; }
  .tc-scanlines { opacity: 0.55; background-size: 100% 4px; }
  .tc-grain     { opacity: 0.05; animation-duration: 1.4s; }

  /* Shrink the giant ambient blobs so they don't paint offscreen */
  .tc-glow-magenta { width: 360px; height: 360px; left: -120px; top: 60px; filter: blur(40px); }
  .tc-glow-cyan    { width: 320px; height: 320px; right: -120px; top: 220px; filter: blur(40px); }
  .tc-glow-lime    { width: 360px; height: 360px; left: 10%; top: 1400px; filter: blur(40px); }

  /* ---------- TICKER --------------------------------------- */
  .tc-ticker     { padding: 8px 0; font-size: 9.5px; letter-spacing: 0.16em; }
  .tc-marquee    { gap: 20px; padding: 0 14px; animation-duration: 36s; }

  /* ---------- NAV ------------------------------------------ */
  .tc-nav {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .tc-logo { gap: 10px; }
  .tc-logo-mark { width: 36px; height: 36px; border-radius: 10px; }
  .tc-logo-mark span { font-size: 18px; }
  .tc-logo-text-main { font-size: 13px; letter-spacing: 0.03em; }
  .tc-logo-text-sub  { font-size: 8.5px; letter-spacing: 0.18em; }

  .tc-nav-links { display: none; }   /* desktop's horizontal nav is too wide */

  .tc-nav-actions {
    margin-left: auto;
    gap: 8px;
  }
  .tc-btn-chrome,
  .tc-btn-ghost {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  /* Mobile hamburger / quick menu (CSS-only details/summary) ---
     If the page doesn't have one, this rule is harmless. */
  .tc-mobile-menu {
    display: block;
    width: 100%;
    order: 99;
    margin-top: 6px;
    border-top: 1px solid var(--tc-line);
    padding-top: 8px;
  }
  .tc-mobile-menu summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--tc-dim);
    padding: 6px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tc-mobile-menu summary::-webkit-details-marker { display: none; }
  .tc-mobile-menu summary::after { content: "▾"; color: var(--tc-cyan); }
  .tc-mobile-menu[open] summary::after { content: "▴"; }
  .tc-mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 4px;
  }
  .tc-mobile-menu nav a {
    text-decoration: none;
    color: var(--tc-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    padding: 10px 2px;
    border-bottom: 1px solid var(--tc-line);
  }

  /* ---------- HERO (index.html) ---------------------------- */
  .tc-hero {
    padding: 24px 14px 18px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tc-rail { display: none; }

  .tc-eyebrow { gap: 6px; margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.16em; }
  .tc-chip-cyan { padding: 3px 8px; }
  .tc-eyebrow-lime { margin-left: 0; flex-basis: 100%; }

  .tc-holo .tc-line-terra  { font-size: 48px; }
  .tc-holo .tc-conflictus  {
    font-size: 60px;
    transform: none;        /* drop the glitch translate so it doesn't push off-screen */
    animation-name: tcRgbBreathe;
    letter-spacing: -0.04em;
  }
  .tc-subhead { font-size: 20px; margin-left: 2px; }

  .tc-divider { margin-top: 14px; margin-bottom: 16px; gap: 8px; }
  .tc-divider .tc-tag { font-size: 9.5px; letter-spacing: 0.2em; }

  .tc-hero-body {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 4px;
  }
  .tc-lede { font-size: 17px; margin-bottom: 10px; }
  .tc-sub  { font-size: 13px; line-height: 1.55; margin-bottom: 14px; }

  .tc-hero-blurbs { gap: 12px; margin-bottom: 16px; }
  .tc-hero-blurb { padding: 12px 14px; border-radius: 12px; }
  .tc-hero-blurb .blurb-head { font-size: 18px; margin-bottom: 6px; }
  .tc-hero-blurb .blurb-body { font-size: 12.5px; line-height: 1.5; }

  .tc-cta-stack { gap: 8px; margin-bottom: 14px; }
  .tc-cta-primary,
  .tc-cta-secondary,
  .tc-cta-tertiary {
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 0.12em;
    border-radius: 14px;
  }
  .tc-cta-primary { font-size: 12px; }

  .tc-stats { grid-template-columns: 1fr 1fr 1fr; padding: 10px 0; font-size: 8.5px; }
  .tc-stats .num { font-size: 16px; }

  /* ATLAS card — shrink the heavy WebGL stage */
  .tc-atlas { border-radius: 16px; }
  .tc-atlas-head {
    padding: 8px 10px;
    gap: 8px;
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }
  .tc-atlas-mode { display: none; }
  .tc-atlas-stage { height: 320px; }
  .tc-atlas-foot {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
  }
  .tc-atlas-foot-headline { font-size: 14px; }
  .tc-cta-cyan {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 11px;
  }

  /* ---------- FIELD CAPTURE / DEAD CHANNEL ----------------- */
  .tc-section-feed { margin: 0 14px; }
  .tc-feed-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 14px;
  }
  .tc-feed-video {
    max-width: 280px;
    margin: 0 auto;
    border-radius: 14px;
  }
  .tc-feed-video .rec-strip { padding: 8px 10px; font-size: 9px; letter-spacing: 0.16em; }
  .tc-feed-copy { gap: 10px; padding: 0; }
  .tc-feed-copy h2 { font-size: 32px; line-height: 1; }
  .tc-feed-copy .lede { font-size: 16px; line-height: 1.25; }
  .tc-feed-copy .body { font-size: 12.5px; line-height: 1.55; }
  .tc-feed-operator { padding: 12px 14px; border-radius: 12px; }
  .tc-feed-operator .op-head { font-size: 20px; margin-bottom: 8px; }
  .tc-feed-operator p { font-size: 12.5px; line-height: 1.5; }
  .tc-feed-operator .op-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    font-size: 8.5px;
    margin-top: 10px;
    padding-top: 10px;
  }
  .tc-feed-operator .op-stats .v { font-size: 11px; }

  /* ---------- DATA STRIP ---------------------------------- */
  .tc-datastrip {
    margin: 0 14px;
    padding: 10px 12px;
    gap: 10px 18px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    border-radius: 10px;
  }
  .tc-datastrip .accent-cyan { margin-left: 0; }

  /* ---------- READ / RUN / PLAY --------------------------- */
  .tc-section-rrp {
    grid-template-columns: 1fr;
    padding: 36px 14px 20px;
    gap: 22px;
  }
  .tc-section-head .eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .tc-section-head h2 { font-size: 38px; line-height: 0.98; }
  .tc-section-head .ref { font-size: 10px; margin-top: 12px; }

  .tc-mode-grid { grid-template-columns: 1fr; gap: 12px; }

  .tc-version-card { padding: 16px; gap: 8px; }
  .tc-version-card .v-name { font-size: 26px; }
  .tc-version-card .v-tag  { font-size: 10px; letter-spacing: 0.18em; }
  .tc-version-card .v-body { font-size: 12.5px; }
  .tc-version-card .v-specs { grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: 8.5px; }
  .tc-version-card .v-specs .v { font-size: 11px; }

  .tc-mode-card { padding: 16px; }
  .tc-mode-card .mode-word { font-size: 34px; }
  .tc-mode-card .mode-it   { font-size: 18px; }
  .tc-mode-card .tag       { font-size: 10px; margin-bottom: 10px; }
  .tc-mode-card .body      { font-size: 12.5px; margin-bottom: 10px; }
  .tc-mode-card .link-row  { font-size: 10.5px; padding: 4px 0; }

  /* ---------- OPEN ARCHIVE -------------------------------- */
  .tc-section-archive { padding: 16px 14px 36px; }
  .tc-archive-head { gap: 10px; margin-bottom: 14px; }
  .tc-archive-head h2 { font-size: 32px; }
  .tc-archive-head .eyebrow,
  .tc-archive-head .meta { font-size: 10px; letter-spacing: 0.18em; }
  .tc-filters {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .tc-filters .pill { padding: 5px 10px; font-size: 10px; }

  .tc-book-grid { grid-template-columns: 1fr; gap: 14px; }
  .tc-book { border-radius: 14px; }
  .tc-book-cover { height: 180px; }
  .tc-book-title-overlay { font-size: 22px; padding: 0 18px; }
  .tc-book-foot { padding: 14px 14px 10px; gap: 8px; }
  .tc-book-foot .title { font-size: 15px; }
  .tc-book-foot .sub   { font-size: 9.5px; letter-spacing: 0.14em; }
  .tc-book-desc { padding: 0 14px 14px; font-size: 12px; line-height: 1.5; }
  .tc-book-action { padding: 8px 12px; font-size: 10px; }
  .tc-book-preview { padding: 10px 14px; font-size: 9.5px; letter-spacing: 0.14em; }

  .tc-archive-foot { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 10px; }

  /* ---------- FEATURED MAP -------------------------------- */
  .tc-section-featured { padding: 24px 14px 8px; }
  .tc-featured-head { gap: 10px; margin-bottom: 12px; }
  .tc-featured-head h2 { font-size: 32px; }
  .tc-featured-head .eyebrow,
  .tc-featured-head .meta { font-size: 10px; letter-spacing: 0.18em; }
  .tc-featured-card { border-radius: 16px; }
  .tc-featured-head-strip { padding: 8px 10px; font-size: 8.5px; gap: 8px; }
  .tc-featured-head-strip .mode { display: none; }
  .tc-featured-stage { height: 320px; }
  /* The featured iframe is rendered at 1400×900 and CSS-scaled.
     On a 360-ish viewport that's a tiny 0.25 scale, so re-tune. */
  .tc-featured-stage iframe {
    --scale: 0.26;
  }
  .tc-featured-foot { padding: 10px 12px; gap: 10px; font-size: 10px; flex-wrap: wrap; }
  .tc-featured-foot-head { font-size: 14px; }

  /* ---------- FIELD MAPS / OPERATIONAL ATLAS -------------- */
  .tc-section-maps { padding: 18px 14px 36px; }
  .tc-maps-head { gap: 10px; margin-bottom: 14px; }
  .tc-maps-head h2 { font-size: 30px; }
  .tc-maps-head .eyebrow,
  .tc-maps-head .meta { font-size: 10px; letter-spacing: 0.18em; }
  .tc-maps-tabs { margin-left: 0; flex-wrap: wrap; gap: 6px; }
  .tc-maps-tabs .pill { padding: 5px 10px; font-size: 10px; }

  .tc-maps-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tc-map-card { border-radius: 12px; }
  .tc-map-card .body { padding: 10px 12px 12px; gap: 3px; }
  .tc-map-card .title { font-size: 13px; }
  .tc-map-card .sub   { font-size: 9px; letter-spacing: 0.14em; }
  .tc-map-card .ref,
  .tc-map-card .live  { font-size: 8.5px; padding: 2px 6px; }
  .tc-map-card .open  { font-size: 9.5px; letter-spacing: 0.16em; }

  .tc-map-card.card-info .info-head { font-size: 22px; }
  .tc-map-card.card-info .info-body { font-size: 12px; }
  .tc-map-card.card-info .info-stats { font-size: 8.5px; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .tc-map-card.card-info .info-stats .v { font-size: 10.5px; }

  .tc-maps-foot { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10px; }

  /* ---------- MERCH ---------------------------------------- */
  .tc-section-merch { padding: 18px 14px 36px; }
  .tc-merch-head { gap: 10px; margin-bottom: 14px; }
  .tc-merch-head h2 { font-size: 32px; }
  .tc-merch-head .eyebrow,
  .tc-merch-head .meta { font-size: 10px; letter-spacing: 0.18em; }
  .tc-merch-tabs { margin-left: 0; flex-wrap: wrap; gap: 6px; }
  .tc-merch-tabs .pill { padding: 5px 10px; font-size: 10px; }

  .tc-merch-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tc-merch-card { border-radius: 14px; }
  .tc-merch-card .ref,
  .tc-merch-card .status { font-size: 8.5px; padding: 2px 6px; }

  /* ---------- FOOTER --------------------------------------- */
  .tc-foot {
    padding: 18px 14px;
    gap: 10px 14px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }
  .tc-foot .live { margin-left: 0; }

  /* ---------- PRINT LIBRARY (ot_print_library.html) ------- */
  .lib-hero {
    grid-template-columns: 1fr;
    padding: 24px 14px 18px;
    gap: 14px;
  }
  .lib-rail { display: none; }

  .lib-eyebrow { gap: 6px; margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.16em; flex-wrap: wrap; }
  .lib-chip-cyan { padding: 3px 8px; }

  .tc-holo .lib-line-print   { font-size: 40px; }
  .tc-holo .lib-line-library {
    font-size: 56px;
    transform: none;
    animation-name: tcRgbBreathe;
    letter-spacing: -0.04em;
  }
  .lib-subhead { font-size: 18px; }

  .lib-lede { font-size: 17px; line-height: 1.25; }
  .lib-sub  { font-size: 13px; line-height: 1.6; }

  .lib-stats { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; font-size: 8.5px; }
  .lib-stats .num { font-size: 16px; }

  .lib-section { padding: 0 14px 36px; }
  .lib-section-head h2 { font-size: 30px; }
  .lib-section-head .eyebrow { font-size: 10px; letter-spacing: 0.22em; }

  .lib-filter-bar {
    margin: 0 14px 12px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    border-radius: 10px;
  }
  .lib-filter-bar .pill { padding: 5px 10px; font-size: 10px; }

  .lib-catalog { grid-template-columns: 1fr; gap: 14px; }
  .lib-card { border-radius: 14px; }
  .lib-card .cover { height: 200px; }
  .lib-card .body  { padding: 14px 14px 12px; gap: 6px; }
  .lib-card .title { font-size: 16px; }
  .lib-card .sub   { font-size: 10px; letter-spacing: 0.14em; }
  .lib-card .desc  { font-size: 12.5px; line-height: 1.5; }
  .lib-card .actions { gap: 6px; flex-wrap: wrap; }
  .lib-card .actions a { padding: 8px 12px; font-size: 10px; letter-spacing: 0.14em; }

  /* ---------- ATLAS PAGE / GLOBE / MAP PAGES -------------- */
  /* For globe.html, mercator.html, gm_maps — make sure the
     full-bleed canvases/iframes use the viewport. */
  body > iframe[src*="globe"],
  body > iframe[src*="mercator"],
  .full-bleed-map,
  .gm-map-frame { width: 100vw !important; height: 100vh !important; }

  /* ---------- TAP TARGETS --------------------------------- */
  /* Make sure every interactive control hits the 40px tap minimum */
  a, button, summary, .pill { min-height: 40px; }
  a.tc-rail-glyph, a.tc-eyebrow-dim, a.tc-eyebrow-lime { min-height: 0; }
  .tc-marquee > span, .tc-foot .ink, .tc-foot .live,
  .tc-rail-glyph, .tc-rail-spine,
  .tc-stats div, .v-num, .v-name, .v-tag {
    min-height: 0;
  }
  /* Anchors that aren't really buttons (in-paragraph links) shouldn't get
     a min-height; only padded buttons / pills / nav need it. */
  p a, .tc-feed-copy a, .tc-archive-head a { min-height: 0; }

  /* ---------- IMAGE LIGHTBOX ------------------------------ */
  .tc-lightbox-stage { max-width: 95vw; max-height: 80vh; }
  .tc-lightbox-stage img { max-width: 95vw; max-height: 80vh; }
  .tc-lightbox-close { top: 12px; right: 12px; }

  /* ---------- ASK / TRUTH FLOATING WIDGET ----------------- */
  /* Tuck the chat toggles into the bottom-right so they don't
     collide with the stacked mobile nav. */
  #tcask-root {
    right: 10px;
    bottom: 10px;
    top: auto;
    left: auto;
    align-items: flex-end;
    gap: 6px;
    max-width: calc(100vw - 20px);
  }
  #tcask-toggle,
  #tctruth-toggle {
    min-width: 0 !important;
    padding: 9px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
  body > #tcask-toggle {
    right: 10px;
    bottom: 10px;
    top: auto !important;
    left: auto !important;
    position: fixed;
    min-width: 0;
    padding: 9px 12px;
    font-size: 10px;
  }
  .tctruth-panel,
  .tcask-panel {
    width: calc(100vw - 20px) !important;
    height: min(70vh, calc(100vh - 100px)) !important;
    right: 10px;
    bottom: 60px;
    left: auto;
    top: auto;
  }

  /* ---------- LONG-FORM HTML (wikis, slides, modules) ----
     Generic safety net for the OT/TC long-form pages. */
  table { display: block; overflow-x: auto; max-width: 100%; }
  pre   { overflow-x: auto; max-width: 100%; }
  h1    { font-size: clamp(28px, 9vw, 48px); line-height: 1.05; }
  h2    { font-size: clamp(22px, 6.5vw, 36px); line-height: 1.1; }
  h3    { font-size: clamp(18px, 5vw, 28px); line-height: 1.15; }
}

/* ============================================================
   EXTRA-NARROW PHONES (≤ 380px) — iPhone SE, mini, etc.
   ============================================================ */
@media (max-width: 380px) {
  .tc-holo .tc-line-terra  { font-size: 40px; }
  .tc-holo .tc-conflictus  { font-size: 50px; }
  .tc-subhead              { font-size: 17px; }
  .tc-feed-copy h2         { font-size: 28px; }
  .tc-section-head h2      { font-size: 32px; }
  .tc-archive-head h2,
  .tc-featured-head h2,
  .tc-merch-head h2        { font-size: 26px; }
  .tc-maps-head h2         { font-size: 26px; }
  .tc-holo .lib-line-print   { font-size: 32px; }
  .tc-holo .lib-line-library { font-size: 44px; }
  .tc-atlas-stage,
  .tc-featured-stage         { height: 260px; }
  .tc-featured-stage iframe  { --scale: 0.20; }
  .tc-maps-grid,
  .tc-merch-grid             { grid-template-columns: 1fr; }
  .tc-nav { padding: 10px 12px; gap: 8px; }
  .tc-btn-chrome { padding: 7px 10px; font-size: 9.5px; }
}

/* ============================================================
   REDUCED MOTION ON PHONES — kill expensive animations
   (Phones get this even without the OS-level setting, because
   the heavy filters/blurs choke low-end devices.)
   ============================================================ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .tc-holo,
  .tc-conflictus,
  .tc-line-library,
  .tc-scanlines,
  .tc-grain,
  .tc-vhs,
  .tc-pulse-dot,
  .tc-mode-card .mode-word,
  .tc-version-card .v-name {
    animation: none !important;
  }
}