/* =====================================================================
   IGTT MOBILE V20 — responsive + iPhone safe-area pass · 2026-09-13
   Goal: one responsive build from 320px small phones through 430px+ phones.
   This file intentionally loads LAST and only changes compact layouts.
   ===================================================================== */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
  overflow-x:clip;
}
body{max-width:100%;overflow-x:clip}
img,video,canvas{max-width:100%;height:auto}
svg{max-width:100%}
*,*::before,*::after{box-sizing:border-box}

/* iOS: don't zoom the whole page when a text field receives focus. */
@media(max-width:760px){
  input,textarea,select{font-size:16px!important}
  textarea{resize:vertical}
  button,[role="button"],.igtt-btn,.answer-link,.codex-main-tab,.codex-ranking-tab,.codex-chapter-jump{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .igtt-btn,.answer-link,.codex-main-tab,.codex-ranking-tab,.codex-chapter-jump,.book-nav-btn,.thought-spin-button,.spin-button,.home-next-actions a,.home-next-actions button{min-height:44px}
}

/* ---------------------------------------------------------------------
   App chrome / iPhone notch + Home Indicator
   Requires viewport-fit=cover (added to every HTML page in V20).
   --------------------------------------------------------------------- */
@media(max-width:899px){
  body.app-shell{
    padding-bottom:calc(88px + max(8px,env(safe-area-inset-bottom)))!important;
  }
  body.app-shell .top-left-menu{
    top:max(10px,env(safe-area-inset-top))!important;
    left:max(10px,env(safe-area-inset-left))!important;
  }
  body.app-shell .header-logo{
    padding-left:max(62px,calc(52px + env(safe-area-inset-left)))!important;
    padding-right:max(62px,calc(52px + env(safe-area-inset-right)))!important;
  }
  .app-bottom-nav{
    left:0!important;right:0!important;bottom:0!important;width:100%!important;
    padding-left:max(5px,env(safe-area-inset-left))!important;
    padding-right:max(5px,env(safe-area-inset-right))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  .app-nav-item{min-width:0!important;min-height:56px!important;padding-inline:2px!important}
  .app-nav-item svg{width:20px!important;height:20px!important}
}

@media(max-width:360px){
  .app-nav-item{font-size:clamp(.43rem,2.15vw,.52rem)!important;letter-spacing:.015em!important;gap:4px!important}
  .app-nav-item svg{width:19px!important;height:19px!important}
  body.app-shell .header-logo .think-logo{max-width:168px!important}
}

/* Mobile Safari dynamic toolbar: tall interactive shells use dynamic viewport. */
@supports(height:100dvh){
  @media(max-width:760px){
    .modal,.igtt-modal,.thought-spin-modal,.spin-modal{max-height:calc(100dvh - 24px)!important}
  }
}

/* ---------------------------------------------------------------------
   Community Codex — Discover / My Thoughts / Rankings
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .codex-world-shell{width:calc(100% - 6px)!important;max-width:100%!important}
  .codex-paper-sheet{max-width:100%!important;overflow:clip}
  .codex-main-tabs{
    top:calc(max(6px,env(safe-area-inset-top)) + 2px)!important;
    width:calc(100% - 14px)!important;
    max-width:620px!important;
    padding:4px!important;
    gap:4px!important;
  }
  .codex-main-tab{min-width:0!important;min-height:44px!important;padding:7px 3px!important}
  .codex-main-tab>span{font-size:clamp(.45rem,2.25vw,.51rem)!important;white-space:nowrap}

  /* Chapter rails are intentionally swipeable rather than shrinking labels. */
  .codex-chapter-quicknav,.codex-chapter-seals,.codex-ranking-tabs{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-inline:10px;
  }
  .codex-chapter-quicknav{padding-inline:3px!important}
  .codex-chapter-jump{min-height:40px!important}

  /* The book should never be wider than the physical screen on iOS. */
  .codex-paper-book-shell,.landing-codex-book-shell{
    max-width:calc(100vw - 12px)!important;
    box-sizing:border-box!important;
  }
  body.codex-paper-world .codex-paper-book-shell .tier-book,
  body.landing-entry-world .landing-v18-codex .tier-book.codex-book{
    width:100%!important;
    max-width:100%!important;
  }
  body.codex-paper-world .codex-page-inner{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  #codexPanelMine,#codexPanelRankings{max-width:100%!important;overflow:clip}
  .codex-my-summary{max-width:100%!important}
  .codex-my-stats{gap:7px!important}
  .codex-my-stats>div{min-width:0!important;padding:11px 8px!important}
  .codex-my-stats strong{font-size:clamp(1.05rem,6vw,1.4rem)!important;overflow-wrap:anywhere}
  .codex-chapter-seals{scroll-snap-type:x proximity!important}
  .codex-chapter-seal{scroll-snap-align:start;flex:0 0 auto}

  /* Rankings: protect the right-hand XP column on 320–390px phones. */
  #codexPanelRankings .codex-ranking-row,
  #codexPanelRankings .codex-ranking-row.is-thought{
    grid-template-columns:32px minmax(0,1fr) minmax(64px,auto)!important;
    gap:7px!important;
    min-width:0!important;
  }
  #codexPanelRankings .codex-ranking-person,
  #codexPanelRankings .codex-ranking-score{min-width:0!important}
  #codexPanelRankings .codex-ranking-person strong,
  #codexPanelRankings .codex-ranking-person small{overflow-wrap:anywhere}
  #codexPanelRankings .codex-ranking-score{max-width:92px;text-align:right}
  #codexPanelRankings .codex-ranking-score strong{white-space:normal!important;overflow-wrap:anywhere}
  #codexPanelRankings .codex-ranking-tab{min-height:44px!important}

  .codex-ranking-more,.codex-ranking-meter-cta{min-height:44px!important}
  .codex-ranking-foot{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

@media(max-width:360px){
  .codex-world-head{padding-inline:10px!important}
  .codex-world-head h1{font-size:clamp(2rem,12vw,2.7rem)!important}
  .codex-main-tabs{width:calc(100% - 10px)!important}
  .codex-main-tab>small{display:none!important}
  #codexPanelMine,#codexPanelRankings{padding-left:8px!important;padding-right:8px!important}
  .codex-my-summary{padding:12px 8px!important}
  .codex-my-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .codex-chapter-seal{min-width:62px!important}
  .codex-ranking-tab{min-width:138px!important}
  #codexPanelRankings .codex-ranking-row,
  #codexPanelRankings .codex-ranking-row.is-thought{
    grid-template-columns:29px minmax(0,1fr) minmax(58px,auto)!important;
    padding-left:7px!important;padding-right:7px!important;
  }
  #codexPanelRankings .codex-ranking-score{max-width:76px}
}

/* ---------------------------------------------------------------------
   Home — preserve the trailer hierarchy at small widths.
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .home-world .home-v10{width:calc(100% - 18px)!important;max-width:620px!important}
  .home-v10-top .home-title{overflow-wrap:normal;word-break:normal}
  .home-v18-book-paper{max-width:100%!important;overflow:hidden!important}
  .home-v18-book-heading{min-width:0}
  .home-v18-book-heading .home-v10-eyebrow{min-width:0;overflow-wrap:anywhere}
  .home-v18-book-stats{min-width:0}
  .home-v18-book-stats>*{max-width:100%}
  .home-world .home-v10-book-summary .home-level-up-cta{min-height:96px!important}

  .thought-grid{grid-template-columns:1fr!important;gap:11px!important}
  .community-thought,.community-thought:first-child{
    grid-column:auto!important;
    min-height:0!important;
    padding:18px 17px!important;
    border-radius:18px!important;
  }
  .community-thought:first-child .thought-question,.thought-question{font-size:clamp(1.18rem,6vw,1.55rem)!important}
  .thought-preview{font-size:.91rem!important;line-height:1.55!important}
  .home-section{margin-top:46px!important}

  .week-row{grid-template-columns:30px minmax(0,1fr) auto!important;gap:7px!important}
  .week-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .week-xp{white-space:nowrap;font-size:.66rem!important}
}

@media(max-width:430px){
  .home-world .home-v10{width:calc(100% - 14px)!important}
  .home-v10-top .home-title{font-size:clamp(2rem,11.5vw,2.85rem)!important;line-height:.94!important}
  .home-v10-top-note{font-size:.74rem!important}
  .home-v18-book-paper{padding:15px!important;border-radius:17px!important}
  .home-v18-book-emblem{padding-bottom:10px!important}
  .home-v18-chapter-orb{width:54px!important;height:54px!important}
  .home-v18-book-paper .home-v17-book-owner{font-size:1.45rem!important}
  .home-v18-book-stats .home-v10-pages,
  .home-world .home-v18-book-stats .home-currency{white-space:normal!important;line-height:1.25!important;padding-block:6px!important;height:auto!important}
  .home-v17-book-links{gap:9px!important}
  .home-v17-book-links a{min-height:32px;display:inline-flex;align-items:center}
  .home-world .home-v10-book-summary .home-level-up-cta{padding:13px 14px!important;column-gap:10px!important}
  .home-v18-level-wheel-ring{--wheel-size:62px!important}
  .home-v18-level-wheel{--wheel-size:62px!important;width:62px!important;height:62px!important}
  .home-v18-level-wheel-ring::before{width:72px!important;height:72px!important}
}

@media(max-width:340px){
  .home-v18-book-heading{display:block!important}
  .home-world .home-v18-book-heading .home-level-chip{margin-top:7px!important}
  .home-world .home-v10-book-summary .home-level-up-cta{grid-template-columns:minmax(0,1fr) 58px!important;padding-inline:12px!important}
  .home-v18-level-wheel-ring{--wheel-size:56px!important}
  .home-v18-level-wheel{--wheel-size:56px!important;width:56px!important;height:56px!important}
  .home-v18-level-wheel-ring::before{width:66px!important;height:66px!important}
}

/* ---------------------------------------------------------------------
   Landing — full Community Codex remains interactive without clipping.
   --------------------------------------------------------------------- */
@media(max-width:700px){
  body.landing-entry-world .landing-page{width:100%!important;max-width:100%!important;overflow-x:clip}
  body.landing-entry-world .landing-v16-hero .landing-v3-title{overflow-wrap:normal;word-break:normal}
  body.landing-entry-world .landing-v16-wheel-machine{max-width:100%!important}
  body.landing-entry-world .landing-v16-spinner{
    --wheel-size:min(220px,calc(100vw - 86px))!important;
    width:var(--wheel-size)!important;height:var(--wheel-size)!important;
  }
  body.landing-entry-world .landing-v18-codex-nav{
    width:calc(100% - 6px)!important;
    justify-content:flex-start!important;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:10px;
  }
  body.landing-entry-world .landing-v18-codex-nav .codex-chapter-jump{min-height:40px!important}
  body.landing-entry-world .landing-v18-codex .landing-codex-book-shell{
    width:calc(100% - 4px)!important;
    max-width:430px!important;
  }
  body.landing-entry-world .landing-v18-codex .landing-v18-codex-controls{max-width:100%!important}
  body.landing-entry-world .landing-v18-codex-cta{width:calc(100% - 18px)!important;max-width:430px!important;min-height:48px}
}

@media(max-width:360px){
  body.landing-entry-world .landing-v16-hero .landing-v3-title{font-size:clamp(2.5rem,14vw,3.35rem)!important}
  body.landing-entry-world .landing-v16-after h2,
  body.landing-entry-world .landing-v18-codex .landing-codex-intro h2{font-size:clamp(1.9rem,10.5vw,2.45rem)!important}
  body.landing-entry-world .landing-v16-spinner{--wheel-size:min(206px,calc(100vw - 80px))!important}
  body.landing-entry-world .landing-v18-codex-live{max-width:calc(100% - 10px)}
  body.landing-entry-world .landing-v18-codex .codex-page-inner{padding-left:15px!important;padding-right:11px!important}
}

/* ---------------------------------------------------------------------
   Level Up — hard fit the actual wheel, especially 320/375px iPhones.
   --------------------------------------------------------------------- */
@media(max-width:760px){
  .arcade-shell{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}
  .wheel-stage{--wheel-size:min(258px,calc(100vw - 76px))!important;padding-left:13px!important;padding-right:13px!important}
  .wheel-stage .spinner-container,.wheel-stage .wheel-ring .spinner-container{
    --wheel-size:min(258px,calc(100vw - 76px))!important;
    width:var(--wheel-size)!important;height:var(--wheel-size)!important;
  }
  .wheel-stage .spin-button-container{margin-top:20px!important}
  .arcade-row{grid-template-columns:27px minmax(0,1fr) minmax(58px,auto)!important}
  .arcade-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .arcade-score{min-width:58px!important;max-width:84px;text-align:right}
}
@media(max-width:360px){
  .arcade-shell{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
  .wheel-stage{--wheel-size:min(222px,calc(100vw - 82px))!important;padding-inline:10px!important}
  .wheel-stage .spinner-container,.wheel-stage .wheel-ring .spinner-container{
    --wheel-size:min(222px,calc(100vw - 82px))!important;
  }
  .wc-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;flex-wrap:wrap}
}

/* ---------------------------------------------------------------------
   Thought writing + Thought detail. Parchment page first, machine second.
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .questions-container,.questions,.response-page-shell,.thought-detail-journey{max-width:100%!important}
  .question-hero-card,.thought-content-card,.thought-question-card,.thought-answer-card,.thought-xp-card{max-width:100%!important}
  .question-hero-card,.thought-content-card{padding-left:16px!important;padding-right:16px!important}
  .answer-editor{width:100%!important;max-width:100%!important;min-height:120px}
  .your-answer-controls{gap:8px!important;flex-wrap:wrap}
  .your-answer-controls button,.your-answer-controls a{flex:1 1 140px;min-height:44px}

  /* Landing Q1: keep the primary CTA easy to tap without letting the long
     control row turn it into an oversized full-width block on phones. */
  body.landing-entry-world .landing-v2-first-actions{
    align-items:center!important;
    gap:10px!important;
  }
  body.landing-entry-world .landing-v2-first-actions .answer-link{
    width:auto!important;
    flex:0 0 auto!important;
    align-self:center!important;
    min-height:44px!important;
    padding:11px 20px!important;
    font-size:.62rem!important;
    line-height:1.15!important;
  }
  body.landing-entry-world .landing-v2-first-actions .landing-v2-account-link{
    width:auto!important;
    flex:0 0 auto!important;
    align-self:center!important;
  }

  .response-page-shell{width:calc(100% - 16px)!important;margin-inline:auto!important}
  .thought-detail-tier-head{min-width:0;gap:10px!important}
  .thought-detail-tier-head>*{min-width:0}
  .thought-xp-card{overflow:hidden}
  .thought-spin-button{min-height:48px!important}
  .thought-xp-separation-note{overflow-wrap:anywhere}
}
@media(max-width:360px){
  .response-page-shell{width:calc(100% - 10px)!important}
  .question-hero-card,.thought-content-card{padding-left:13px!important;padding-right:13px!important}
}

/* ---------------------------------------------------------------------
   Profile + question hub + Read the Room + leaderboard safety nets.
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .profile-page-shell.profile-v2{width:calc(100% - 14px)!important}
  .profile-v2 .profile-identity-hero{padding-left:15px!important;padding-right:15px!important}
  .profile-v2 .profile-identity-stats{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
  .profile-v2 .profile-identity-stats>div{min-width:0}
  .profile-v2 .profile-identity-stats strong{overflow-wrap:anywhere}
  .profile-v2 .profile-destination{grid-template-columns:23px minmax(0,1fr) auto!important;min-width:0}

  .questions-hub-page .tier-book-shell,.questions-hub-page .tier-book{max-width:100%!important}
  .read-room-shell,.book1-board-shell,.book1-ranking-shell{max-width:100%!important}
  .lb-wrap,.lb-card,.lb-table-wrap{max-width:100%!important}
  .lb-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

@media(max-width:360px){
  .profile-v2 .profile-identity-stats{gap:4px!important}
  .profile-v2 .profile-identity-stats>div{padding:9px 4px!important}
  .profile-v2 .profile-chapter-badges{overflow-x:auto!important;justify-content:flex-start!important;scroll-snap-type:x proximity;padding-bottom:5px}
  .profile-v2 .profile-chapter-badge-slot{flex:0 0 56px;scroll-snap-align:start}
}

/* Fixed overlays must remain usable above iPhone's home indicator. */
@media(max-width:760px){
  .igtt-sound-toggle{bottom:calc(88px + max(10px,env(safe-area-inset-bottom)))!important}
  .igtt-feedback-toast{bottom:calc(82px + max(12px,env(safe-area-inset-bottom)))!important}
  .modal,.igtt-modal,.thought-spin-modal,.spin-modal{
    max-width:calc(100vw - 18px)!important;
    margin-left:auto!important;margin-right:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(16px,env(safe-area-inset-bottom))!important;
  }
}

/* Touch devices should not retain desktop hover lift/black-overlay states. */
@media(hover:none) and (pointer:coarse){
  .community-thought:hover,.home-game-card:hover,.profile-v2 .profile-destination:hover,
  .codex-answer:hover,.codex-chapter-seal:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}