/* Mobile webviews reserve browser chrome; fit the game inside the actual visible viewport. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
#game{height:100dvh;max-height:100dvh}
body.immersive-mode #game{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483640}

/* WeChat/iPhone landscape is wide but short. Size the cover from height so title and actions never collide. */
@media (orientation:landscape) and (max-height:600px){
 #cover .edition{top:4%;left:3%}
 #cover .edition strong{font-size:clamp(15px,3.6vh,22px)}
 #cover .edition span{margin-top:3px;font-size:clamp(8px,2.2vh,11px)}
 .cover-title{left:34%;top:13%;width:63%}
 #cover h1{font-size:min(11vw,22vh,150px);line-height:1.02}
 #cover .tagline{font-size:clamp(11px,3.2vh,17px);line-height:1.25;margin-top:2px}
 .cover-actions{bottom:5%;gap:4px}
 #cover .start{min-width:190px;padding:9px 22px;font-size:clamp(13px,3.4vh,17px)}
 #cover #resume{margin-top:2px;font-size:clamp(10px,2.7vh,13px)}
 .cover-bottom{bottom:3px;font-size:clamp(8px,2.2vh,10px)}
 #global-sound{top:max(5px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));min-height:38px;padding:5px 8px;font-size:13px}
}

@media (orientation:landscape) and (max-height:430px){
 .cover-title{top:10%}
 #cover h1{font-size:min(10vw,20vh,120px)}
 .cover-actions{bottom:4%}
 .cover-bottom{display:none}
}

/* The mobile shell gives this document a landscape-sized iframe even while
   WeChat itself remains portrait. Never show the old rotate blocker inside it. */
body.embedded-game #rotate{display:none!important}
body.embedded-game #game{min-height:0}
body.embedded-game #game.chapter-snow::before{inset:0;filter:brightness(.72)}
body.embedded-game #game .light-puzzle-card{will-change:auto}
body.embedded-game #game .shade{backdrop-filter:none}

/* Phone-only chapter four layout: narration and actions get separate columns.
   Copy never captures touches, and long prose is capped above the controls. */
@media (orientation:landscape) and (max-height:600px){
 body.embedded-game #game.chapter-light .light-heading{top:54px;left:3%;right:3%;max-width:58%;padding-left:10px}
 body.embedded-game #game.chapter-light .light-heading h2{font-size:13px;line-height:1.35}
 body.embedded-game #game.chapter-light .light-heading p{margin-top:2px;font-size:9px;line-height:1.35}
 body.embedded-game #game.chapter-light .light-footer{left:3%;right:3%;bottom:18px;padding:0;display:grid;grid-template-columns:minmax(150px,.8fr) minmax(280px,1.6fr);gap:14px;align-items:end;max-height:40%;overflow:visible;pointer-events:none}
 body.embedded-game #game.chapter-light .light-narration{width:auto;min-width:0;text-align:left;margin:0}
 body.embedded-game #game.chapter-light .light-narration p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:12px;line-height:1.45;text-align:left;text-shadow:0 2px 7px #000}
 body.embedded-game #game.chapter-light .light-narration small{display:none}
 body.embedded-game #game.chapter-light .light-controls{pointer-events:auto}
 body.embedded-game #game.chapter-light .light-controls>button{min-height:38px;padding:6px 10px;font-size:12px;line-height:1.35}
}