/* Mobile-only layout polish. Desktop game composition remains owned by index.html. */

#title,
#card,
#help,
#menu,
#chapterList{
  touch-action:pan-y;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

#card.psalm23{
  box-sizing:border-box;
  align-items:flex-start;
  overflow-y:auto;
  padding-top:calc(env(safe-area-inset-top,0px) + 24px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
}
#card.psalm23 .inner{
  width:min(40rem,100%);
  min-width:0;
  margin-block:0;
}
.psalm23 #cVerse{
  white-space:pre-line;
  line-height:1.68;
}
.psalm23 #cCite{
  white-space:pre-line;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.45;
}

#my-shepherd-call{
  max-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 16px)!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
}

@media (max-width:600px){
  #title,
  #card{
    box-sizing:border-box;
    align-items:flex-start;
    overflow-y:auto;
    padding:
      calc(env(safe-area-inset-top,0px) + 18px)
      calc(env(safe-area-inset-right,0px) + 16px)
      calc(env(safe-area-inset-bottom,0px) + 18px)
      calc(env(safe-area-inset-left,0px) + 16px);
  }
  #title .inner,
  #card .inner{
    width:100%;
    min-width:0;
    margin-block:0;
  }
  #title .inner{gap:.8rem;}
  #title h1{font-size:clamp(2.7rem,17vw,4.4rem);}
  #title .sub{font-size:1rem;}
  #title .row{margin-top:.2rem;}

  #chapterList{
    width:100%;
    min-height:0;
    max-height:42vh;
    overflow-y:auto;
    grid-template-columns:1fr;
    padding-right:4px;
  }

  #card{background:linear-gradient(180deg,rgba(10,11,17,.96),rgba(10,11,17,.84));}
  #card.psalm23{
    padding-top:calc(env(safe-area-inset-top,0px) + 18px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  }
  #card .inner{gap:.78rem;}
  #card h2{font-size:clamp(2rem,11vw,3rem);}
  #card blockquote{font-size:1rem;line-height:1.48;margin:.3rem 0;}
  #card .numeral{top:-2.3rem;right:0;font-size:8rem;}

  #help{
    top:calc(env(safe-area-inset-top,0px) + 8px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
    transform:translateX(-50%);
    max-height:none;
    overflow-y:auto;
  }
  #menu{
    box-sizing:border-box;
    align-items:flex-start;
    overflow-y:auto;
    padding:
      calc(env(safe-area-inset-top,0px) + 16px)
      calc(env(safe-area-inset-right,0px) + 16px)
      calc(env(safe-area-inset-bottom,0px) + 16px)
      calc(env(safe-area-inset-left,0px) + 16px);
  }
  #menu .inner{margin-block:0;width:100%;}

  .btn,
  .lang button,
  #chapterList button,
  #dialog .choices button,
  #help button,
  #menu button{
    min-height:44px;
  }
  .ibtn{width:44px;height:44px;min-width:44px;min-height:44px;}

  #plate{
    left:calc(env(safe-area-inset-left,0px) + 12px);
    top:calc(env(safe-area-inset-top,0px) + 10px);
    width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 132px);
    max-width:none;
    min-width:0;
  }
  #plate .ctitle{font-size:1rem;line-height:1.18;}
  #objective{font-size:.8rem;line-height:1.28;flex-wrap:wrap;gap:.2rem .45rem;}
  #tr{
    right:calc(env(safe-area-inset-right,0px) + 10px);
    top:calc(env(safe-area-inset-top,0px) + 8px);
    gap:6px;
  }
  #stones{position:absolute;right:0;top:52px;}
  #compass{
    left:auto;
    right:calc(env(safe-area-inset-right,0px) + 16px);
    top:calc(env(safe-area-inset-top,0px) + 94px);
    transform:none;
    width:36px;
    height:36px;
  }
  #toast{top:24%;max-width:calc(100vw - 32px);}
  #prompt{
    bottom:calc(env(safe-area-inset-bottom,0px) + 154px);
    max-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px);
    white-space:normal;
    text-align:center;
  }

  #joy{
    left:calc(env(safe-area-inset-left,0px) + 16px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
    width:104px;
    height:104px;
  }
  #knob{width:44px;height:44px;margin:-22px;}
  #tAct{
    right:calc(env(safe-area-inset-right,0px) + 16px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
    width:64px;
    height:64px;
    min-width:44px;
    min-height:44px;
  }
  #tSling{
    right:calc(env(safe-area-inset-right,0px) + 88px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 68px);
    width:64px;
    height:64px;
    min-width:44px;
    min-height:44px;
  }
  #tRun{
    right:calc(env(safe-area-inset-right,0px) + 16px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
    width:52px;
    height:52px;
    min-width:44px;
    min-height:44px;
  }
  .tbtn svg{width:22px;height:22px;}

  #my-shepherd-call{
    width:min(18rem,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 32px))!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 154px)!important;
  }
}

@media (max-height:500px) and (max-width:950px) and (orientation:landscape){
  #title,
  #card,
  #menu{
    box-sizing:border-box;
    align-items:flex-start;
    overflow-y:auto;
    padding:
      calc(env(safe-area-inset-top,0px) + 8px)
      calc(env(safe-area-inset-right,0px) + 14px)
      calc(env(safe-area-inset-bottom,0px) + 8px)
      calc(env(safe-area-inset-left,0px) + 14px);
  }
  #title .inner,
  #card .inner,
  #menu .inner{
    width:100%;
    min-width:0;
    margin-block:0;
  }
  #title .inner{max-width:38rem;gap:.42rem;}
  #title .heb{font-size:1.15rem;}
  #title h1{font-size:clamp(2.1rem,8vw,3.4rem);line-height:.92;}
  #title .sub{font-size:.9rem;}
  #title .foot{font-size:.72rem;line-height:1.3;}
  #title .row{margin-top:0;}

  #chapterList{
    min-height:0;
    max-height:46vh;
    overflow-y:auto;
    grid-template-columns:repeat(2,minmax(13rem,1fr));
  }
  #chapterList button{min-height:44px;padding:.42rem .65rem;}
  #chapterList .hl{font-size:1.35rem;}
  #chapterList .tt{font-size:.9rem;}
  #chapterList .rf{font-size:.68rem;}

  #card.psalm23{
    padding-top:calc(env(safe-area-inset-top,0px) + 8px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  }
  #card .inner{max-width:44rem;gap:.42rem;}
  #card h2{font-size:clamp(1.65rem,5.4vw,2.4rem);}
  #card .ref,#card .note{font-size:.78rem;line-height:1.35;}
  #card blockquote{font-size:.88rem;line-height:1.38;margin:.15rem 0;max-width:42rem;}
  #card cite{font-size:.66rem;margin-top:.25rem;}
  #card .numeral{top:-2.2rem;right:0;font-size:7rem;}
  #cQs{gap:.28rem;padding-top:.45rem;}
  #cQs ol{gap:.2rem;font-size:.78rem;line-height:1.3;}
  #card .row{margin-top:.15rem;}

  #help{
    top:calc(env(safe-area-inset-top,0px) + 6px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 6px);
    transform:translateX(-50%);
    width:min(620px,calc(100% - 28px));
    max-height:none;
    overflow-y:auto;
    padding:.75rem 1rem;
  }
  #help h3{font-size:1.05rem;margin-bottom:.45rem;}
  #help dl{font-size:.78rem;gap:.25rem .7rem;margin-bottom:.5rem;}
  #menu .inner{max-width:560px;gap:.42rem;}
  #menu h3{font-size:1.35rem;}

  .btn,
  .lang button,
  #dialog .choices button,
  #help button,
  #menu button,
  .ibtn,
  .tbtn{
    min-height:44px;
  }
  .btn{padding:.52rem 1rem;font-size:.88rem;}
  .ibtn{width:44px;height:44px;min-width:44px;}

  #plate{
    left:calc(env(safe-area-inset-left,0px) + 10px);
    top:calc(env(safe-area-inset-top,0px) + 6px);
    width:calc(50vw - env(safe-area-inset-left,0px) - 48px);
    max-width:22rem;
    gap:.2rem;
  }
  #plate .eyebrow{font-size:.58rem;}
  #plate .ctitle{font-size:.86rem;line-height:1.12;}
  #objective{font-size:.7rem;line-height:1.22;padding:.3rem .5rem;flex-wrap:wrap;gap:.15rem .35rem;}
  #tr{
    right:calc(env(safe-area-inset-right,0px) + 8px);
    top:calc(env(safe-area-inset-top,0px) + 6px);
  }
  #compass{
    left:50%;
    right:auto;
    top:calc(env(safe-area-inset-top,0px) + 8px);
    transform:translateX(-50%);
    width:34px;
    height:34px;
  }
  #stones{padding:.35rem .5rem;}
  #toast{top:20%;font-size:1.15rem;}
  #prompt{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);max-width:42vw;white-space:normal;text-align:center;}

  #joy{
    left:calc(env(safe-area-inset-left,0px) + 14px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    width:104px;
    height:104px;
  }
  #knob{width:44px;height:44px;margin:-22px;}
  #tAct{
    right:calc(env(safe-area-inset-right,0px) + 14px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    width:64px;
    height:64px;
  }
  #tSling{
    right:calc(env(safe-area-inset-right,0px) + 86px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 56px);
    width:64px;
    height:64px;
  }
  #tRun{
    right:calc(env(safe-area-inset-right,0px) + 14px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
    width:50px;
    height:50px;
  }

  #dialog{
    bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
    max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);
    overflow-y:auto;
    padding:.7rem .9rem .8rem;
  }
  #dialog .txt{font-size:.9rem;line-height:1.35;min-height:0;}

  #my-shepherd-call{
    width:min(18rem,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 300px))!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;
  }
}