/* Phase 3mb: phone / tablet layout. Only media queries (and body.touch): the desktop layout is untouched. Loaded last from index.html. */
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  html,body{height:100dvh;overscroll-behavior:none;-webkit-text-size-adjust:100%}
  body{height:100dvh;overflow:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  /* top bar: status first, the buttons wrap below; capped so the canvas keeps the screen */
  #bar{flex-wrap:wrap;gap:6px 10px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;max-height:34vh;overflow-y:auto;font-size:14px}
  #bar #clock{flex:1 1 100%;font-size:14px}
  #bar>span[style*="flex:1"]{display:none}
  #bar button{min-height:44px;min-width:44px;padding:6px 12px;font-size:15px;touch-action:manipulation}
  #speeds{display:inline-flex;gap:4px}
  #chips .chip{font-size:13px;padding:4px 10px}
  #now{flex-wrap:wrap;gap:4px 10px;padding:6px 10px;font-size:14px}
  #now .txt{font-size:15px;flex:1 1 60%}#now .note{margin-left:0;font-size:14px}
  #now button{min-height:44px;font-size:14px !important;padding:4px 12px !important}
  #now b{font-size:12px}
  /* the right panel becomes a bottom sheet (toggled by the Log button of touch.js) */
  #main{position:relative}
  #panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:52vh;z-index:8;box-sizing:border-box;padding:12px 14px calc(14px + env(safe-area-inset-bottom));font-size:15px;border-top:3px solid #e8c64a;transform:translateY(110%);transition:transform .2s;visibility:hidden}
  body.plog #panel{transform:none;visibility:visible}
  #panel button{min-height:44px;font-size:15px;padding:8px 10px}
  #panel .log{font-size:14px}
  #panel h4{font-size:14px}
  #ack{font-size:15px}
  /* overlays: full width, 16 px text, 44 px targets */
  #scene .box{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:14px 14px}
  #scene .ln,#scene .chk,#scene .chg,#scene .chg b{font-size:15px}
  #scene .cur{font-size:17px}
  #scene .tag{font-size:14px}
  #scene button{min-height:44px;font-size:16px;padding:10px 12px}
  #scene button small{font-size:14px}
  #scene .vp button{min-height:40px;font-size:14px;padding:6px 12px}
  #scene .box.comic{width:calc(100vw - 16px);flex-direction:column;padding:10px}
  #scene .box.comic .port{flex:0 0 auto;width:42%;align-self:flex-start}
  #poi .box{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px 14px;box-sizing:border-box}
  #poi button{min-height:44px;font-size:16px;padding:10px 12px}
  #poi h3{font-size:18px}
  #poi .box *{font-size:max(1em,15px)}
  #title{padding:0 24px}#title h1{font-size:44px;letter-spacing:.1em}#title p{font-size:17px}#title button{min-height:48px;font-size:20px}
  #prompt{font-size:16px}
  #screenWrap{padding:0 !important}
}
/* the comic page (comic.js): readable and tappable on a phone */
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  #scene .cpg{width:calc(100vw - 8px);max-height:calc(100dvh - 8px);border-width:3px;box-shadow:4px 4px 0 #000,0 0 0 2px #9a5bd6}
  #scene .chd{padding:6px 10px;gap:8px}
  #scene .chd .ttl{font-size:20px}
  #scene .cscroll{padding:10px 10px 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #scene .ctray{margin:0 -10px;padding:18px 10px calc(10px + env(safe-area-inset-bottom))}
  #scene .ctray .cc{min-height:48px;font-size:16px;padding:10px 12px 10px 44px}
  #scene .ctray .cc small{font-size:14px}
  #scene .ctray .vp button{min-height:40px;padding:6px 12px;font-size:14px}
  #scene .cold{font-size:14px;min-height:44px;box-sizing:border-box}
}
@media (max-width:760px) and (orientation:portrait){
  #scene .cu{flex-wrap:wrap}
  #scene .cu .pt{flex:0 0 38%;width:38%;max-width:38%}
}