/* Mobile-only presentation layer. Desktop scene geometry is intentionally untouched. */
.rotate-device{display:none}

/* Introductory copy should never sit on top of a room interaction. */
.intro,.hint{pointer-events:none}

@media (max-width:900px) and (hover:none) and (pointer:coarse){
  .intro{top:2%!important;left:2%!important;text-shadow:0 1px 4px #000}
  .intro span{font-size:8px!important;letter-spacing:1.2px}
  .intro p{margin:3px 0!important;font-size:15px!important;line-height:1.02!important}
  .hint{bottom:2%!important;left:2%!important;font-size:10px!important}
}

@media (max-width:900px) and (hover:none) and (pointer:coarse) and (orientation:portrait){
  /* A helpful welcome, not a roadblock: portrait remains fully usable. */
  .rotate-device{position:fixed;z-index:1000;left:50%;top:50%;display:grid;place-content:center;justify-items:center;gap:8px;width:min(310px,82vw);padding:24px 22px;pointer-events:none;background:radial-gradient(circle at 50% 35%,#382617,#090604 76%);border:1px solid #9f7944;color:#f6e4ba;text-align:center;box-shadow:0 18px 55px #000b;transform:translate(-50%,-50%);animation:portrait-tip 6s ease forwards}
  .rotate-device span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #cba660;border-radius:50%;font:38px/1 Georgia,serif;color:#f4ca68;animation:rotate-device-hint 1.8s ease-in-out infinite}
  .rotate-device strong{font:11px "DM Mono",monospace;letter-spacing:.13em}
  .rotate-device p{max-width:260px;margin:0;color:#d4bc91;font:21px/1.08 "Patrick Hand",cursive}
}

@keyframes rotate-device-hint{50%{transform:rotate(90deg)}}
@keyframes portrait-tip{0%,72%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

@media (max-width:900px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  /* Keep the complete 16:9 artwork visible. 190svh clipped the lower part of
     room pages on shorter phones, including the theatre screen. */
  :root{--mobile-scene-width:181svh}
  .viewport{overflow:hidden}
  .room{width:var(--mobile-scene-width);height:101.8125svh;min-height:0;margin:-.90625svh auto 0}
  .pc-stage,.gramo-stage,.camera-stage,.movies-stage,.food-stage,.globe-stage,.garage-stage,.porsche-stage,.safe-stage,.scribble-stage,.suitcase-stage,.telephone-stage{width:var(--mobile-scene-width)!important}
  .pc-view.direct .pc-stage{width:100vw!important;height:100svh!important}
  .pc-view.direct .pc-display{width:100%;height:100%}
  .pc-view.direct .pc-display iframe{min-width:100%;min-height:100%}
  .movies-view .movie-screen{padding:3.4% 4.5% 8%!important;box-shadow:inset 0 0 50px #000,0 0 22px #f3bc6360}
  /* The CRT scanline layer reads as a white divider on compact phone screens. */
  .movies-view .movie-screen::after{display:none}
  .movies-view .movie-shelf{padding-top:1%}
  .movies-view .movie-card-grid{height:calc(100% - 26px);min-height:0;margin-top:1%;gap:12px;padding:2px 4px 5px;scroll-padding-inline:2%}
  .movies-view .movie-card{flex-basis:clamp(94px,20vw,132px)}
  .movies-view .movie-card-art{height:clamp(112px,27svh,142px);min-height:0}
  /* Some page artwork is taller than a landscape phone. Let it travel
     vertically instead of cutting its lower edge off. */
  .journal-view.open{display:block;overflow-y:auto;overscroll-behavior:contain;padding:5svh 0 8svh}
  .journal-library{min-height:100%;padding-block:0 5svh}
  .blog-modal.open{max-height:92svh;overflow-y:auto;overscroll-behavior:contain}
  .camera-close,.movies-close,.food-close,.globe-close,.gramo-close,.pc-close{transform:scale(.9);transform-origin:top right}
}