/* One mobile framing layer for every stage. Desktop rules remain untouched. */
@media (min-width:701px) {
  body.game-active main{width:min(1100px,max(780px,calc((100svh - 260px) * 1.7778)),100%);padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
  body.game-active header{margin-bottom:16px}
  body.game-active #hint{margin:10px auto 8px}
  body.game-active #experience>.muted{margin-top:8px}
}

@media (max-width:700px) {
  body{place-items:start center;min-height:100svh;overflow-x:hidden}
  main{width:100%;padding:max(20px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  header{margin-bottom:14px}
  header p{margin:0;font-size:10px;line-height:1.35}
  h1{margin:8px 0;font-size:clamp(27px,10vw,42px)}
  #entry{min-height:min(68svh,520px);padding:36px 14px max(22px,env(safe-area-inset-bottom))}
  #entry p{font-size:clamp(13px,3.6vw,16px);line-height:1.5}
  #entry .muted{font-size:12px;margin:8px 0 14px}
  #language-selector{margin-top:18px}
  #language-selector button{min-height:42px;padding:8px 13px}
  #experience{width:100%}
  #room,#garden,#memory,#playroom,#mirror-room,#final-walk{width:100%;max-width:none;min-height:0;aspect-ratio:16/9;margin-inline:auto}
  #hint{min-height:20px;margin:10px auto 8px;font-size:12px;line-height:1.4;max-width:92%}
  .controls{width:100%;max-width:none;gap:7px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .controls button{min-width:0;min-height:50px;padding:9px 4px;font-size:clamp(11px,3.4vw,14px);line-height:1.15}
  #experience>.muted{margin:7px 0 0;font-size:10px;line-height:1.35}
  #memory-view,#playroom-note,#final-memory-view{max-width:calc(100vw - max(20px,env(safe-area-inset-left)) - max(20px,env(safe-area-inset-right)));max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))}
  #memory-note,#playroom-note-text{width:min(88vw,570px);padding:clamp(24px,7vw,48px);font-size:clamp(17px,5vw,26px)}
  #moon-warning{font-size:clamp(10px,2.8vw,12px)}
}

@media (max-width:1024px) and (pointer:coarse) {
  button,#stage6-credits button{min-height:44px}
  #moon{min-width:48px;min-height:48px}
}

/* Phone landscape keeps the 16:9 art large and places touch controls beside it. */
@media (max-width:950px) and (max-height:560px) and (orientation:landscape) {
  body.game-active{display:block;min-height:100svh}
  body.game-active main{width:100%;max-width:none;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  body.game-active header{display:none}
  body.game-active #experience{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(136px,21vw,184px);grid-template-rows:minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center;min-height:calc(100svh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
  body.game-active #experience>#room,
  body.game-active #experience>#garden,
  body.game-active #experience>#memory,
  body.game-active #experience>#playroom,
  body.game-active #experience>#mirror-room,
  body.game-active #experience>#final-walk{grid-column:1;grid-row:1/3;width:100%;aspect-ratio:16/9;align-self:center}
  body.game-active #hint{grid-column:2;grid-row:1;align-self:end;width:100%;max-width:none;min-height:0;margin:0;font-size:11px;line-height:1.35}
  body.game-active .controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;width:100%;gap:6px;margin:0;padding:0}
  body.game-active .controls button{min-height:42px;padding:7px 5px;font-size:11px}
  body.game-active #experience>.muted{display:none}
}

@media (max-width:430px) and (max-height:720px) and (orientation:portrait) {
  header p{display:none}
  header{margin-bottom:8px}
  h1{font-size:28px;margin:4px 0}
  #hint{margin:7px auto 6px}
  .controls button{min-height:46px}
  #experience>.muted{display:none}
}