/* Mobile framing uses the existing raster TV and garden art at a stable size. */
.tv-pan-viewport, .garden-pan-viewport { display: contents; }
.mobile-pan-tools, .mobile-room-nav, .mobile-back-tv { display: none; }

@media (max-width: 900px) {
  .app { padding: 0 12px; }
  .page-header { height: 70px; }
  .intro { padding: 20px 0; }
  .intro .eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .intro>p:last-child { max-width: 320px; font-size: 11px; }
  .room-stage { aspect-ratio: auto; min-height: 0; max-width: none; padding: 0; overflow: visible; border-radius: 16px; background: transparent; box-shadow: none; }
  .room-image, .outside-window, .world-meter, #room-lamp-toggle { display: none; }
  .television { position: relative; inset: auto; width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 16px; background: #26372e; box-shadow: 0 12px 30px #29392d20; overflow: hidden; }
  .tv-body { display: flex; flex-direction: column; gap: 0; width: 100%; align-items: stretch; }
  .tv-pan-viewport { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #a6b197 #26372e; background: #202b23; }
  .tv-pan-viewport:focus-visible, .garden-pan-viewport:focus-visible { outline: 3px solid #d3a756; outline-offset: -3px; }
  .tv-pan-viewport>.screen-case { width: max(760px, 100%); max-width: none; flex: none; aspect-ratio: 1586 / 992; }
  /* These labels follow the visible opening, without moving or resizing the scene. */
  .tv-pan-viewport .screen-top, .tv-pan-viewport .screen-bottom { left: calc(var(--tv-visible-left, 0px) + 12px); right: auto; width: calc(var(--tv-visible-width, 100%) - 24px); }
  .tv-pan-viewport .screen-top { top: 14px; gap: 6px; }
  .tv-pan-viewport .live-badge { font-size: 8px; letter-spacing: 1px; }
  .tv-pan-viewport .viewers { font-size: 10px; padding: 5px 8px; }
  .tv-pan-viewport .screen-bottom { bottom: 14px; gap: 8px; }
  .tv-pan-viewport .screen-channel { font-size: 9px; letter-spacing: 1px; }
  .tv-pan-viewport .screen-bottom>span:last-child { display: none; }
  .tv-pan-viewport .arrival { top: 48px; left: calc(var(--tv-visible-left, 0px) + 12px); max-width: calc(var(--tv-visible-width, 100%) - 24px); font-size: 10px; }
  .tv-pan-viewport .arrival .avatar { width: 22px; height: 22px; }
  .mobile-pan-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: #d6dfcb; background: #26372e; }
  .mobile-pan-tools p { margin: 0; font-size: 11px; line-height: 1.5; }
  .mobile-pan-tools button { min-height: 44px; flex-shrink: 0; padding: 9px 12px; border: 1px solid #829473; border-radius: 8px; color: #f6f5e8; background: #354b37; font-size: 11px; }
  .reaction-rail { width: 100%; align-self: stretch; flex-direction: row; padding: 2px 10px 10px; border: 0; border-radius: 0; background: #26372e; overflow: hidden; }
  .reaction-rail p, .rail-note { display: none; }
  #emoji-buttons { display: flex; flex-direction: row; justify-content: flex-start; gap: 6px; width: 100%; max-height: 58px !important; padding: 2px 0 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .reaction-rail .emoji-button { width: 44px; height: 44px; font-size: 22px; border-radius: 10px; }
  .control-bar { width: auto; margin: 0 10px 10px; padding: 13px 10px; min-height: 0; gap: 14px; flex-wrap: wrap; background: #29392d; }
  .channel-info { width: 100%; gap: 9px; }
  .channel-number { display: grid; width: 32px; height: 32px; font-size: 11px; }
  .channel-info p { font-size: 13px; }
  .channel-info>div>span { display: block; font-size: 10px; line-height: 1.5; }
  .playback-controls { width: 100%; margin: 0; gap: 8px; flex-wrap: wrap; }
  .playback-controls .sound-button { min-height: 44px; padding: 10px 12px; font-size: 12px; }
  #sound-label { display: inline; }
  .playback-controls .icon-button { width: 44px; height: 44px; font-size: 25px; }
  .playback-controls #music-select { order: 1; width: 100%; max-width: none; flex: 1 0 100%; min-height: 44px; padding: 11px 28px 11px 10px; font-size: 13px; }
  .tv-settings, .sound-prompt { width: auto; margin: 0 10px 10px; padding: 14px 12px; gap: 14px; font-size: 12px; }
  .tv-settings>span { width: 100%; }
  .tv-settings label { min-height: 44px; font-size: 12px; }
  .tv-settings input[type=range] { height: 28px; }
  .color-presets button { min-height: 44px; padding: 10px 12px; font-size: 12px; }
  .sound-prompt { flex-wrap: wrap; }
  .sound-prompt button { min-height: 44px; padding: 10px 12px; font-size: 12px; }
  .below-tv { display: flex; flex-direction: column; margin: 15px 0; gap: 6px; font-size: 11px; text-align: center; }
  .below-tv>span { font-size: 10px; }
  .mobile-room-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 17px 0 22px; }
  .mobile-room-nav button, .mobile-back-tv { min-height: 44px; padding: 11px 18px; border: 1px solid #879774; border-radius: 10px; background: #425b36; color: #fffdf0; font-size: 13px; }
  .mobile-room-nav p { max-width: 140px; margin: 0; color: #79725f; font-size: 11px; line-height: 1.6; }
  .mobile-layout-ready .community:not(.mobile-avatars-open) { display: none; }
  .community { width: 100%; margin: 18px 0 24px; padding: 0; }
  .community-heading { padding: 18px 13px 0; flex-wrap: wrap; }
  .community-heading>button { min-height: 44px; font-size: 12px; }
  .garden-pan-tools { background: #f0ecdf; color: #5e6d50; padding: 10px 13px; }
  .garden-pan-tools button { background: #fdfbf1; border-color: #b3bba2; color: #526145; }
  .garden-pan-viewport { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #879774 #e0e3d3; }
  .garden-pan-viewport>.watcher-list { width: max(1100px, 100%); min-width: 1100px; height: 350px; max-height: none; }
  .garden-pan-viewport .gathering-person .avatar.gathering-sprite { width: calc(82px * var(--crowd-scale, 1)); height: calc(82px * var(--crowd-scale, 1)); }
  .mobile-back-tv { display: block; margin: 14px auto; }
  .tv-pan-viewport, .garden-pan-viewport { overflow-anchor: none; }
  .television:fullscreen { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; overflow: auto; padding: 8px; justify-content: flex-start; }
  .television:fullscreen .tv-body { width: 100%; flex-shrink: 0; }
  .television:fullscreen .tv-pan-viewport>.screen-case { width: max(760px, 100%); }
  .television:fullscreen .control-bar, .television:fullscreen .tv-settings, .television:fullscreen .sound-prompt { width: calc(100% - 20px); }
}
@media (max-width: 350px) {
  .playback-controls { gap: 5px; }
  .playback-controls .sound-button { padding: 10px 9px; }
  .mobile-room-nav { gap: 9px; }
}