/* All room, television, landscape, celestial, and weather art is raster ImageGen art. */
:root { background: #e7e4da; --muted: #746f61; --line: #d3ccbb; }
body { background: #ebe8df; color: #373f34; }
.app { max-width: 1500px; padding: 0 32px; }
.page-header { height: 72px; }
.brand { font-size: 23px; }
.brand span { color: #868270; }
.guest-button { background: #fffaf0; border-color: #c8c6b2; font-size: 11px; }
.intro { padding: 22px 0 25px; }
.intro .eyebrow { color: #8b8972; }
h1 { font-size: clamp(30px, 3.2vw, 42px); }
.intro>p:last-child { color: #7b7868; }
.room-stage { position: relative; isolation: isolate; width: 100%; max-width: 1360px; margin: auto; aspect-ratio: 1672 / 941; border-radius: 18px; background: #958873; box-shadow: 0 15px 45px #4e443320; }
.room-image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; background: url('assets/world/room-neutral.png') center / 100% 100% no-repeat; pointer-events: none; z-index: 1; filter: brightness(var(--room-light, 1)); transition: filter 2s linear; }
.room-image { isolation:isolate; }
.room-base, .room-light-pass { position:absolute; inset:0; background-repeat:no-repeat; border-radius:inherit; pointer-events:none; }
.room-base, .room-lamp-spill { background-size:100% 100%; background-position:center; }
.room-base { transition:filter 2s linear; }
.room-light-pass { background-blend-mode:multiply; mix-blend-mode:screen; mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; transition:opacity 1.5s linear; }
.table-lamp { position:absolute; z-index:2; padding:0; border:0; background-color:transparent; background-repeat:no-repeat; cursor:pointer; transition:filter 1s linear; -webkit-tap-highlight-color:transparent; }
.table-lamp:hover { background-color:transparent; }
.table-lamp:focus-visible { outline:2px solid #f1dcac; outline-offset:3px; border-radius:12px; }
.celestial-halo { position:absolute; z-index:1; aspect-ratio:1; background-repeat:no-repeat; pointer-events:none; transform:translate(-50%,-50%); }
.outside-window { position: absolute; isolation: isolate; z-index: 0; left: 6.878%; top: 10.733%; width: 33.493%; height: 49.203%; overflow: hidden; background: #8fa9b8; }
.outside-sky, .outside-storm-sky { position: absolute; z-index: 0; inset: -2% -7%; background-repeat: no-repeat; pointer-events: none; transition: filter 2s linear; }
.outside-storm-sky { background-position: center; background-size: cover; }
.outside-landscape { position: absolute; z-index: 2; inset: -2% -3%; background-repeat: no-repeat; pointer-events: none; filter: brightness(var(--outside-light, 1)); transition: filter 2s linear; }
.world-sun { position: absolute; z-index: 1; width: 8%; aspect-ratio: 1; background: url('assets/world/weather-sprites.png') 0 100% / 400% 200% no-repeat; pointer-events: none; transform: translate(-50%, -50%); }
.world-moon { position: absolute; z-index: 1; width: 11%; aspect-ratio: 1; background: url('assets/world/moon-phases.png') 0 0 / 200% 400% no-repeat; pointer-events: none; transform: translate(-50%, -50%); }
#weather-particles { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.weather-object, .weather-sprite, .weather-particle { position: absolute; aspect-ratio: 1; background-image: url('assets/world/weather-sprites.png'); background-size: 400% 200%; background-repeat: no-repeat; pointer-events: none; }
.world-tornado { position: absolute; z-index: 3; left: 66%; bottom: 31%; width: 25%; aspect-ratio: 1; background-image: url('assets/world/tornado-motion.png'); background-size: 500% 200%; background-repeat: no-repeat; pointer-events: none; }
.world-lightning { position: absolute; z-index: 3; left: 61%; top: 2%; width: 34%; height: 65%; aspect-ratio: auto; background-position: 33.333% 100%; pointer-events: none; }
.world-meter { position: absolute; z-index: 3; left: 7.1%; top: 62.4%; max-width: 33%; border: 1px solid #fffa; border-radius: 10px; padding: 10px 13px; color: #fdf7e9; background: #3c3b30c9; box-shadow: 0 3px 12px #2f291b19; font-size: 10px; backdrop-filter: blur(7px); }
.world-meter>span, .world-meter>p { display: block; margin: 0; line-height: 1.7; }
.world-meter strong, .world-meter time, #world-time, #world-clock { font-family: Manrope, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.world-meter .world-caption, .world-meter-title { color: #dad4be; font-size: 8px; letter-spacing: .6px; }
.television { position: absolute; z-index: 3; left: 44.5%; top: 8%; width: 51%; max-width: none; margin: 0; padding: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.tv-body { display: grid; grid-template-columns: minmax(0,1fr) 41px; gap: 2px; align-items: center; }
.screen-case { position: relative; aspect-ratio: 1586 / 992; background: url('assets/world/tv-frame.png') center / 100% 100% no-repeat; filter: drop-shadow(0 6px 7px #251b1640); }
.screen { position: absolute; left: 5.8008%; top: 9.879%; width: 88.4615%; height: 72.0766%; aspect-ratio: auto; border-radius: 0; background: #111; }
.scene { inset: 0 4.69%; }
.screen-shade { box-shadow: inset 0 0 30px #16271b22; }
.screen-top { left: 11px; right: 11px; top: 11px; gap: 6px; }
.live-badge { font-size: 6px; letter-spacing: 1px; gap: 5px; }
.viewers { font-size: 8px; padding: 4px 6px; background: #18312788; }
.screen-bottom { left: 12px; right: 12px; bottom: 12px; gap: 5px; }
.screen-channel { font-size: 7px; letter-spacing: 1px; }
.screen-bottom>span:last-child { font-size: 8px; }
.arrival { top: 40px; left: 10px; padding: 4px 8px 4px 4px; font-size: 8px; }
.arrival .avatar { width: 20px; height: 20px; }
.reaction-rail { align-self: center; flex-direction: column; gap: 0; padding: 5px 3px; color: #eee8d8; background: #303529f0; border: 1px solid #77775f; border-radius: 12px; }
.reaction-rail p { font-size: 5px; margin: 0 0 5px; letter-spacing: .6px; line-height: 1.6; }
#emoji-buttons { flex-direction: column; gap: 3px; }
.emoji-button { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; background: #f6f0d314; border-color: #c8c5a62e; }
.emoji-button:hover { background: #b8bd8640; }
.rail-note { display: none; }
.control-bar { position: relative; min-height: 67px; gap: 10px; padding: 11px 13px; margin: -4px 0 0 4%; border: 1px solid #eee1c632; border-radius: 12px; background: #29392deb; box-shadow: 0 5px 13px #2d241f28; flex-wrap: wrap; }
.channel-info { gap: 9px; }
.channel-number { width: 27px; height: 27px; font-size: 9px; }
.channel-info p { font-size: 10px; }
.channel-info>div>span { font-size: 8px; margin-top: 3px; }
.playback-controls { gap: 5px; margin-left: auto; }
.sound-button { font-size: 9px; padding: 7px 8px; gap: 5px; }
.sound-button>span:first-child { font-size: 15px; }
select { font-size: 9px; max-width: 156px; padding: 8px 22px 8px 8px; }
.icon-button { width: 29px; height: 29px; font-size: 20px; }
.tv-settings { position: relative; margin-left: 4%; margin-top: 7px; border: 1px solid #a9b59c66; border-radius: 10px; background: #2b3b2af5; padding: 13px; font-size: 10px; gap: 12px; box-shadow: 0 6px 20px #27211933; }
.sound-prompt { position: relative; margin-left: 4%; margin-top: 7px; border: 1px solid #fffc; border-radius: 10px; padding: 10px 12px; font-size: 9px; gap: 8px; box-shadow: 0 5px 13px #2d241f20; }
.sound-prompt button { font-size: 9px; padding: 6px 9px; }
.below-tv { max-width: 1360px; margin: 16px auto 20px; color: #79725f; }
footer { color: #827a66; }
.television:fullscreen { position: fixed; inset: 0; padding: 12px; width: 100vw; height: 100dvh; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #171e18; overflow: auto; }
.television:fullscreen .tv-body { width: min(100%, calc((100dvh - 160px) * 1.6 + 45px)); grid-template-columns: minmax(0,1fr) 41px; gap: 4px; }
.television:fullscreen .control-bar, .television:fullscreen .tv-settings, .television:fullscreen .sound-prompt { width: min(100%, calc((100dvh - 160px) * 1.6 + 45px)); margin-left: 0; flex-shrink: 0; }
.television:fullscreen .scene { inset: 0 4.69%; }
.television:fullscreen .screen-top { top: 17px; left: 20px; right: 20px; }
.television:fullscreen .screen-bottom { bottom: 17px; left: 20px; right: 20px; }
.television:fullscreen .live-badge { font-size: 8px; }
.television:fullscreen .screen-channel, .television:fullscreen .viewers { font-size: 10px; }
.television:fullscreen .screen-bottom>span:last-child { font-size: 11px; }
@media (min-width: 901px) and (max-height: 900px) {
  .page-header { height: 62px; }
  .intro { padding: 17px 0 19px; }
  h1 { font-size: 33px; }
  .intro .eyebrow { margin-bottom: 8px; }
  .intro>p:last-child { margin-top: 8px; }
  .room-stage { max-width: min(1360px, calc((100svh - 255px) * 1672 / 941)); }
  .below-tv { max-width: min(1360px, calc((100svh - 255px) * 1672 / 941)); }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .television { top: 7%; }
  .emoji-button { width: 27px; height: 27px; font-size: 16px; }
  .tv-body { grid-template-columns: minmax(0,1fr) 37px; }
  .reaction-rail p { display: none; }
  .control-bar { padding: 9px 10px; min-height: 62px; gap: 9px; }
  .channel-info { width: 100%; }
  .playback-controls { width: 100%; margin: 0; }
  select { flex: 1; max-width: none; min-width: 0; }
  .world-meter { top: 63%; padding: 8px 10px; font-size: 9px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .app { padding: 0 20px; }
  .room-stage { aspect-ratio: auto; min-height: 790px; border-radius: 16px; padding: 480px 13px 18px; overflow: hidden; }
  .room-image { width: 959.5px; height: 540px; max-width: none; left: -1.5%; right: auto; border-radius: 0; }
  .outside-window { left: calc(66px - 1.5%); top: 58px; width: 321px; height: 266px; }
  .world-meter { top: 244px; left: calc(75px - 1.5%); max-width: 285px; padding: 7px 10px; font-size: 9px; }
  .world-meter strong, .world-meter time, #world-time, #world-clock { font-size: 15px; }
  .television { position: relative; left: auto; top: auto; width: 100%; margin: 0; }
  .tv-body { grid-template-columns: minmax(0,1fr) 43px; gap: 1px; }
  .screen-case { background-size: 100% 100%; }
  .reaction-rail { flex-direction: column; padding: 5px 3px; }
  .reaction-rail p { display: none; }
  #emoji-buttons { flex-direction: column; width: auto; gap: 3px; }
  .emoji-button { width: 31px; height: 31px; font-size: 18px; }
  .control-bar { padding: 12px; margin-left: 3%; gap: 11px; }
  .channel-info { width: auto; }
  .playback-controls { width: auto; margin-left: auto; }
  select { max-width: 170px; }
  .tv-settings, .sound-prompt { margin-left: 3%; }
  .below-tv { margin: 15px 0 19px; }
}
@media (max-width: 540px) and (orientation: portrait) {
  .app { padding: 0 12px; }
  .page-header { height: 71px; gap: 8px; }
  .brand { font-size: 18px; }
  .guest-button { font-size: 8px; max-width: 137px; padding-right: 8px; }
  .guest-button .avatar { width: 24px; height: 24px; }
  .intro { padding: 24px 0 22px; }
  h1 { font-size: 31px; }
  .intro>p:last-child { font-size: 10px; }
  .room-stage { min-height: 688px; padding: 380px 4px 15px; }
  .room-image { width: 781.83px; height: 440px; left: -3%; }
  .outside-window { left: calc(53.8px - 3%); top: 47px; width: 262px; height: 217px; }
  .world-meter { top: 184px; left: calc(63px - 3%); max-width: 237px; padding: 6px 9px; font-size: 8px; }
  .world-meter strong, .world-meter time, #world-time, #world-clock { font-size: 14px; }
  .world-meter .world-caption { font-size: 7px; }
  .tv-body { grid-template-columns: minmax(0,1fr) 32px; gap: 0; }
  .reaction-rail { padding: 4px 2px; border-radius: 9px; }
  #emoji-buttons { gap: 1px; }
  .emoji-button { width: 25px; height: 25px; border-radius: 7px; font-size: 15px; }
  .screen-top { top: 9px; left: 8px; right: 8px; gap: 4px; }
  .live-badge { font-size: 5px; letter-spacing: .8px; gap: 3px; }
  .viewers { font-size: 6px; padding: 3px 5px; }
  .screen-bottom { left: 8px; right: 8px; bottom: 8px; }
  .screen-channel { font-size: 6px; letter-spacing: .7px; }
  .screen-bottom>span:last-child { font-size: 6px; }
  .control-bar { margin-left: 3%; padding: 12px 9px; min-height: 89px; gap: 12px; }
  .channel-info { width: 100%; }
  .channel-info p { font-size: 11px; }
  .channel-info>div>span { font-size: 8px; }
  .playback-controls { width: 100%; margin: 0; gap: 3px; }
  .sound-button { font-size: 8px; padding: 7px; }
  select { width: auto; min-width: 0; max-width: none; flex: 1; font-size: 8px; padding: 7px 19px 7px 7px; }
  .icon-button { width: 27px; height: 29px; }
  .arrival { top: 31px; left: 7px; font-size: 7px; }
  .arrival .avatar { width: 17px; height: 17px; }
  .sound-prompt { padding: 9px; gap: 6px; font-size: 8px; }
  .sound-prompt button { font-size: 8px; padding: 6px 8px; }
  .tv-settings { padding: 12px 9px; font-size: 9px; gap: 10px; }
  .below-tv { font-size: 9px; flex-direction: column; gap: 5px; }
  footer { font-size: 8px; padding: 16px 0; }
  .avatar-filters { flex-wrap: wrap; }
}
@media (max-width: 350px) and (orientation: portrait) {
  .brand { font-size: 16px; }
  .guest-button { max-width: 130px; font-size: 7px; gap: 5px; }
  .room-stage { padding-top: 360px; min-height: 636px; }
  .room-image { width: 746.29px; height: 420px; }
  .outside-window { left: calc(51.3px - 3%); top: 45px; width: 250px; height: 207px; }
  .world-meter { top: 177px; }
  .tv-body { grid-template-columns: minmax(0,1fr) 28px; }
  .emoji-button { width: 23px; height: 23px; font-size: 14px; }
  .reaction-rail { padding: 2px 1px; }
  .screen-channel { font-size: 5px; }
  .screen-bottom>span:last-child { display: none; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .app { padding: 0 15px; }
  .page-header { height: 48px; }
  .intro { display: none; }
  .tv-section { padding-top: 10px; }
  .room-stage { max-width: min(100%, calc((100svh - 105px) * 1672 / 941)); }
  .television { top: 5%; width: 53%; left: 43%; }
  .tv-body { grid-template-columns: minmax(0,1fr) 29px; gap: 0; }
  .reaction-rail { padding: 2px 1px; }
  .reaction-rail p { display: none; }
  #emoji-buttons { gap: 1px; }
  .emoji-button { width: 23px; height: 23px; font-size: 14px; }
  .control-bar { margin-top: -3px; min-height: 45px; padding: 7px; flex-wrap: nowrap; gap: 5px; }
  .channel-info { width: auto; }
  .channel-info p { font-size: 8px; }
  .channel-info>div>span, .channel-number { display: none; }
  .playback-controls { width: auto; gap: 2px; margin-left: auto; }
  .sound-button { padding: 6px; }
  #sound-label { display: none; }
  select { width: auto; flex: none; max-width: 105px; padding: 6px 17px 6px 6px; font-size: 8px; }
  .icon-button { width: 25px; height: 25px; font-size: 18px; }
  .world-meter { top: 64%; font-size: 8px; padding: 6px 9px; }
  .world-meter strong, .world-meter time, #world-time, #world-clock { font-size: 13px; }
  .world-meter .world-caption { display: none; }
  .sound-prompt { padding: 7px; font-size: 8px; }
  .sound-prompt button { font-size: 8px; padding: 5px 7px; }
  .below-tv { display: none; }
  footer { border: 0; padding: 10px 0; font-size: 8px; }
  .screen-top { top: 8px; left: 7px; right: 7px; }
  .screen-bottom { bottom: 8px; left: 7px; right: 7px; }
  .live-badge { font-size: 5px; }
  .viewers, .screen-channel, .screen-bottom>span:last-child { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .room-image, .room-base, .room-light-pass, .table-lamp, .outside-landscape, .outside-sky, .outside-storm-sky { transition: none; }
}