/* Mobile phone play: landscape game layout, large touch targets and safe-area support. */
#orientationNotice{display:none}
button{-webkit-touch-callout:none;user-select:none;touch-action:manipulation}
.touch-controls{user-select:none;-webkit-user-select:none}
.touch-controls button{touch-action:none}
.touch-controls button:active{transform:translateY(3px) scale(.96);filter:brightness(1.12)}

@media (orientation:portrait) and (max-width:900px){
  body:after{content:none!important}
  #game{visibility:hidden}
  #orientationNotice{
    position:fixed;z-index:9999;inset:0;
    display:grid;place-content:center;justify-items:center;gap:10px;
    padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    text-align:center;color:#fff9d3;
    background:
      radial-gradient(circle at 50% 34%,#38cfc966,transparent 24%),
      linear-gradient(155deg,#0a5963,#062b3a 68%,#171c46);
  }
  #orientationNotice span{font-size:clamp(72px,24vw,118px);line-height:.8;filter:drop-shadow(0 0 22px #ffe369)}
  #orientationNotice strong{font:900 clamp(26px,8vw,42px) Georgia,serif}
  #orientationNotice small{max-width:310px;font-size:clamp(14px,4.4vw,19px);font-weight:800;line-height:1.35;color:#d7fffa}
}

@media (orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:520px){
  html,body,#game,.screen{height:100dvh;min-height:100dvh}
  body{overscroll-behavior:none}
  .scene{max-height:100dvh}
  .build-badge{display:none}

  /* Adventure map: swipeable, readable cards instead of a squeezed five-column row. */
  .map-title{top:max(5px,env(safe-area-inset-top));width:88vw}
  .map-title .eyebrow{font-size:8px}
  .map-title h1{margin:1px;font-size:clamp(25px,7.2vh,38px);line-height:.95}
  .map-title p{margin:3px;font-size:clamp(10px,2.8vh,14px)}
  .realm-path{
    width:100%;height:100%;margin:0;padding:clamp(74px,20vh,96px) max(16px,env(safe-area-inset-right)) 38px max(16px,env(safe-area-inset-left));
    grid-template-columns:repeat(5,minmax(178px,32vw));gap:10px;align-items:center;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
    -webkit-overflow-scrolling:touch
  }
  .realm,.realm:nth-child(n){min-height:124px;padding:9px 8px;transform:none;scroll-snap-align:center;border-radius:18px}
  .realm h2{margin:3px 0;font-size:clamp(16px,4.8vh,22px)}
  .realm .time,.realm-skill{font-size:8px!important;min-height:18px;margin:2px 0 3px!important}
  .realm .lock{font-size:23px}.sockets{margin:4px;gap:8px;font-size:20px}
  .realm .primary{min-height:42px;padding:8px 12px;border-radius:13px;font-size:12px}
  #resetProgress{right:max(6px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom));padding:5px 8px;font-size:9px}

  /* Consistent compact HUD and mission strip in every realm. */
  .hud{
    top:max(4px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));
    gap:3px;flex-wrap:nowrap;overflow:hidden
  }
  .hud span{min-height:24px;padding:3px 6px;font-size:clamp(8px,2.5vh,10px);line-height:1;gap:3px}
  .health-status{min-width:145px;max-width:175px;flex:0 0 auto}
  .health-track{width:58px;height:10px;border-width:1px}
  .hud-tool,.hud-progress,.hud-boss{max-width:27vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .objective-tracker{
    top:max(34px,calc(env(safe-area-inset-top) + 32px));left:max(7px,env(safe-area-inset-left));
    max-width:min(52%,350px);gap:5px;padding:4px 9px 4px 5px;border-radius:12px 999px 999px 12px
  }
  .objective-compass{width:25px;height:25px;font-size:15px}
  .objective-tracker small{font-size:7px}.objective-tracker b{font-size:clamp(9px,2.7vh,12px);line-height:1.05}
  .quest-banner{top:max(69px,19%);max-width:64%;padding:5px 10px;border-width:1px;border-radius:12px;font-size:clamp(9px,2.8vh,12px)}

  /* Thumb controls remain clear of notches and browser chrome. */
  .touch-controls{
    left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));gap:4px
  }
  .touch-controls button{width:48px;height:48px;min-width:48px;border-radius:14px;font-size:21px;box-shadow:0 3px 10px #0019}
  .touch-controls .attack-button{width:62px;height:62px;min-width:62px;margin-left:auto;font-size:28px;box-shadow:0 0 14px #fff18a,0 5px 0 #6a3b18}
  .touch-controls .attack-button span{font-size:25px}.touch-controls .attack-button small{margin-top:2px;font-size:7px;letter-spacing:.05em}
  .action-spacer{min-width:0}
  .nexus-controls,.castle-controls,.shadow-controls,.field-controls{gap:3px}

  /* Story navigation and instruction overlays fit short phone screens. */
  .story-ribbon{top:3%;width:58%;min-height:25%;padding:8px 12px 49px;border-width:2px}
  .story-ribbon p,.story-ribbon p.teaching-font{font-size:clamp(16px,5.3vh,25px);line-height:1}
  .story-navigation{left:9px;right:9px;bottom:6px;gap:7px}
  .journey-arrow{min-width:76px;height:37px;gap:4px;border-width:1px}
  .journey-arrow span{font-size:19px}.journey-arrow small{font-size:8px}
  .skip-button{right:max(6px,env(safe-area-inset-right));bottom:max(5px,env(safe-area-inset-bottom));padding:5px 8px;font-size:9px}
  .lesson-feedback{bottom:2%;max-width:62%;padding:4px 8px;font-size:10px}

  /* Mission and reward parchment always remains vertically reachable. */
  .mission-modal{padding:max(7px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .mission-scroll{
    width:min(690px,92%);max-height:calc(100dvh - 14px);overflow:auto;
    padding:16px 29px 14px;border-width:4px;border-radius:20px 13px 21px 12px
  }
  .mission-scroll::before,.mission-scroll::after{font-size:21px}
  .mission-scroll::before{left:8px}.mission-scroll::after{right:8px}
  .mission-eyebrow{font-size:8px}.mission-scroll h2{margin:3px 0;font-size:clamp(22px,7vh,34px);line-height:1}
  .mission-scroll p{margin:0 auto 9px;font-size:clamp(11px,3.5vh,15px);line-height:1.22}
  .mission-scroll button,.magic-button{min-height:42px;padding:8px 14px;font-size:12px}
  .reward-scroll{padding-top:11px}.sunbeam-reward{width:min(300px,48%);max-height:104px;margin:-6px auto}
  .reward-star{font-size:48px}.big-sockets{gap:18px;font-size:36px}

  /* Clock lessons keep a two-column layout in landscape, including small phones. */
  .modal{padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .teaching-card{
    width:min(780px,calc(100vw - 16px));max-height:calc(100dvh - 10px);overflow:auto;
    grid-template-columns:minmax(145px,38%) 1fr;gap:3px 12px;padding:8px 12px;border-width:4px;border-radius:20px 13px
  }
  .teaching-card>.eyebrow{font-size:8px}
  .teaching-card canvas{grid-column:1;grid-row:2;width:min(34vw,190px);max-height:calc(100dvh - 50px);margin:auto}
  .teaching-copy h2{margin:2px 0 5px;font-size:clamp(21px,6vh,30px)}
  .teaching-copy p{min-height:0;margin:4px 0 8px;font-size:clamp(12px,3.6vh,16px);line-height:1.23}
  .teaching-copy nav{gap:6px}.teaching-copy nav button{min-height:42px;padding:7px 10px;font-size:11px}

  .question-card{
    width:min(780px,calc(100vw - 16px));max-height:calc(100dvh - 10px);overflow:auto;
    grid-template-columns:minmax(145px,38%) 1fr;grid-template-rows:auto auto auto 1fr auto;
    gap:3px 10px;padding:8px 12px;border-width:4px;border-radius:20px 13px
  }
  .question-card::before,.question-card::after{display:none}
  .question-card canvas{grid-column:1;grid-row:1/7;width:min(34vw,190px);max-height:calc(100dvh - 24px);margin:auto}
  .question-card .eyebrow,.question-card h2,.question-feedback,.answer-choices,.question-card .primary,.question-timer{grid-column:2}
  .question-card .eyebrow{font-size:8px}.question-card h2{margin:1px;font-size:clamp(18px,5.6vh,27px);line-height:1}
  .question-feedback{min-height:20px;margin:0;font-size:10px;line-height:1.1}
  .answer-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .answer-choices button{min-height:40px;padding:5px 7px;border-radius:10px;font-size:11px}
  .question-card .primary{min-height:42px;padding:7px 12px;font-size:12px}
  .question-timer{height:14px}.question-timer b{font-size:9px}
  .question-magic-celebration{left:72%;top:50%;transform:translate(-50%,-50%) scale(.7)}

  .complete-card{width:min(570px,92vw);max-height:calc(100dvh - 14px);overflow:auto;padding:11px 18px;border-radius:20px}
  .complete-card h1{margin:2px;font-size:clamp(26px,8vh,39px)}.complete-card p{margin:5px;font-size:12px}
  .complete-card .primary{min-height:42px;padding:8px 14px;font-size:12px}
}

@media (orientation:landscape) and (max-height:390px){
  .touch-controls button{width:44px;height:44px;min-width:44px}
  .touch-controls .attack-button{width:56px;height:56px;min-width:56px}
  .objective-tracker{top:max(31px,calc(env(safe-area-inset-top) + 29px))}
  .quest-banner{top:max(62px,18%)}
  .hud span{min-height:21px;padding:2px 5px}
  .health-status{min-width:132px}.health-track{width:50px}
}


/* Phone full-screen control and HUD clearance */
@media (hover:none) and (orientation:landscape), (max-width:900px) and (orientation:landscape){
  .fullscreen-button{display:block}
  .hud{right:max(92px,calc(env(safe-area-inset-right) + 86px))}
  :fullscreen .fullscreen-button,:-webkit-full-screen .fullscreen-button{top:max(6px,env(safe-area-inset-top))}
}
@media (orientation:landscape) and (max-height:430px){
  .fullscreen-button{width:66px;min-height:41px;border-radius:12px}
  .fullscreen-button span{font-size:20px}.fullscreen-button small{font-size:8px}
  .hud{right:max(79px,calc(env(safe-area-inset-right) + 73px))}
  .sun-checkpoint{height:128px!important;width:60px!important}
}