/* ADMAP SUR-BTC-DOJO · CMP-GK-STAGE — mobile portrait + landscape
 * Linked from labs/bitcoin-dojo.html + public/bitcoin-dojo/
 * Breakpoints: 760 portrait phone · landscape short-height · 940 tablet stack
 */
html{ -webkit-text-size-adjust: 100%; }
body{
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Section chip rail — horizontal scroll, no wrap crush */
.gk-sections,
.pd-tabs,
.sec-tabs{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.gk-sections > *,
.pd-tabs > *,
.sec-tabs > *{
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Prediction / journal tables — allow sideways scroll without page blowout */
.pj-table,
table.pj-table{
  min-width: 0 !important;
}
.pj-scroll,
.table-wrap,
.pj-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Man vs Machine faceoff — collapse fixed center column on phone */
@media (max-width: 760px){
  .page{
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(48px, calc(32px + env(safe-area-inset-bottom))) !important;
  }
  .pubbar{
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
  }
  .pub-cta{ width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .hero{ padding: 22px 0 16px; }
  .hero h1, .gk-title{ font-size: clamp(18px, 6.2vw, 26px) !important; line-height: 1.15; }
  .news{
    flex-direction: column;
    align-items: stretch !important;
    padding: 16px !important;
  }
  .news-form{ width: 100%; }
  .news-form input{ min-width: 0 !important; width: 100%; }

  .warbar{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .warbar > *{ min-width: 0; }

  .stats{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }

  .war-wrap{
    flex-direction: column !important;
    height: auto !important;
    gap: 10px !important;
  }
  .war-main, .war-right, .war-side{
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  #war-canvas{
    width: 100% !important;
    height: min(42vh, 360px) !important;
    min-height: 220px !important;
    max-height: 420px;
  }
  #war-feed{ max-height: 140px !important; font-size: 10px; }
  #depth-inset{ height: 100px !important; flex-basis: 100px !important; }

  .mv-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .fo-wrap, .faceoff, .mv-face{
    display: flex !important;
    flex-direction: column !important;
  }
  .fo-center, .fo-mid{
    width: 100% !important;
    max-width: none !important;
    order: -1;
  }

  .sleeve-board,
  .sleeve-row,
  .pj-sumgrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .pd-grid{ grid-template-columns: 1fr !important; }
  .rec-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .gk-stage{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .gk-mast{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .gk-command{ grid-template-columns: 1fr !important; }
}

/* Narrow phones */
@media (max-width: 400px){
  #war-canvas{ min-height: 200px !important; height: min(38vh, 300px) !important; }
  .sleeve-board{ grid-template-columns: 1fr 1fr !important; }
  .brand .wm{ font-size: 13px; letter-spacing: 2px; }
  .btn{ padding: 8px 12px; font-size: 10px; }
}

/* Landscape phones / short viewport — keep battlefield usable without endless scroll */
@media (orientation: landscape) and (max-height: 520px){
  .page{ padding-top: 4px !important; padding-bottom: 24px !important; }
  .hero{ padding: 8px 0 6px !important; }
  .hero p, .gk-deck{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pubbar{ padding: 8px 0; }
  .gk-stage{
    min-height: 0 !important;
    height: auto !important;
  }
  .war-wrap{
    flex-direction: row !important;
    align-items: stretch !important;
    height: min(68vh, 360px) !important;
    gap: 8px !important;
  }
  .war-main{ flex: 1 1 auto !important; min-width: 0; min-height: 0 !important; }
  .war-right, .war-side{
    flex: 0 0 min(38vw, 220px) !important;
    width: min(38vw, 220px) !important;
    max-height: 100%;
    overflow: auto;
  }
  #war-canvas{
    height: 100% !important;
    min-height: 160px !important;
    max-height: none !important;
  }
  #depth-inset{ height: 72px !important; flex-basis: 72px !important; }
  #war-feed{ max-height: none !important; flex: 1; }
  .stats{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .mv-grid{ grid-template-columns: 1fr 1fr !important; }
  .news{ display: none; } /* defer promo band in landscape short */
}

/* Wide landscape tablets keep stacked prediction cards readable */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 700px){
  #war-canvas{ max-height: 48vh; }
  .gk-stage{ min-height: calc(100dvh - 24px); }
}

/* Touch targets */
@media (pointer: coarse){
  .btn, .badge, .gk-sections a, .gk-sections button, .pd-tabs button{
    min-height: 40px;
  }
}