/* Pixel Room: the scene is one SVG; colours come from here so the room
   follows the time of day in India, the real weather and the desk lamp. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rm-main { padding: 28px 0 64px; }
.rm-top { margin-bottom: 28px; }
.rm-top .back-link { color: var(--text); }
.rm-title { margin: 0 0 8px; }
.rm-sub { margin: 0 0 20px; color: var(--muted); }

.rm-frame {
  position: relative;
  max-width: 960px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 #0d0630;
  background: var(--deep);
  line-height: 0;
}
.rm-svg { display: block; width: 100%; height: auto; image-rendering: pixelated; user-select: none; -webkit-user-select: none; }

/* ---------- palette (day) ---------- */
.rm-svg {
  --wall: #cdc2f5; --wall-2: #c3b6f2; --floor: #8a6fe0; --floor-2: #7a5fd6;
  --wood: #b07a4f; --wood-dark: #6e4630; --sky: #9fd8ff; --city: #b4a6ea;
  --dark: 0;
}
.rm-svg[data-time='dawn'] { --sky: #ffc9a8; --city: #a796e4; --dark: 0.12; }
.rm-svg[data-time='sunset'] { --wall: #c3a9ef; --wall-2: #b99fe9; --sky: #ff9f7a; --city: #6c4fc0; --dark: 0.18; }
.rm-svg[data-time='night'] { --wall: #5b3fc4; --wall-2: #5539ba; --floor: #3f22a3; --floor-2: #371c96; --sky: #170a45; --city: #2a1466; --dark: 0.45; }
.rm-svg[data-time='night'].lit { --dark: 0.18; }
.rm-svg[data-wx='cloudy'] { --sky: #c6d6f0; }
.rm-svg[data-wx='rain'], .rm-svg[data-wx='storm'] { --sky: #7f78b8; }
.rm-svg[data-wx='fog'] { --sky: #d9d4ea; }
.rm-svg[data-time='night'][data-wx='rain'], .rm-svg[data-time='night'][data-wx='storm'] { --sky: #120838; }

.wall { fill: var(--wall); }
.wall-2 { fill: var(--wall-2); }
.floor { fill: var(--floor); }
.floor-2 { fill: var(--floor-2); }
.ink { fill: var(--ink); }
.wood { fill: var(--wood); }
.wood-dark { fill: var(--wood-dark); }
.rug { fill: var(--pink); }
.rug-2 { fill: #ffd2ef; }
.sky { fill: var(--sky); transition: fill 0.6s steps(4); }
.sun { fill: var(--yellow); }
.px-moon { fill: #fff6c2; }
.moon-2 { fill: #e8dca0; }
.px-star { fill: #fff; }
.px-cloud { fill: #fff; }
.rain { fill: #c9e6ff; }
.px-city { fill: var(--city); }
.city-win { fill: var(--yellow); opacity: 0; }
.curtain { fill: var(--pink); }
.curtain-2 { fill: var(--pink-deep); }
.clockface { fill: #120838; }
.clock-txt { fill: var(--mint); font-family: var(--pixel); font-size: 5px; font-weight: 700; }
.b-pink { fill: var(--pink); }
.b-mint { fill: var(--mint); }
.b-yellow { fill: var(--yellow); }
.b-lav { fill: #ece6ff; }
.b-ink { fill: #4a24b3; }
.crate { fill: #8e5b3a; }
.radio { fill: var(--pink); }
.grille { fill: #c95fb4; }
.grille-2 { fill: var(--ink); }
.dial { fill: var(--mint); }
.note { fill: var(--yellow); }
.sheet { fill: #f4f0ff; }
.pillow { fill: #fff; }
.blanket { fill: #6a4fd6; }
.blanket-2 { fill: #8a72e8; }
.gb { fill: #ece6ff; }
.gb-screen { fill: var(--mint); }
.leaf { fill: #3fcf8e; }
.leaf-2 { fill: #2aa86f; }
.pot { fill: #d9774f; }
.chair { fill: #4a24b3; }
.screen { fill: #120838; }
.code-1 { fill: var(--pink); }
.code-2 { fill: var(--mint); }
.code-3 { fill: var(--yellow); }
.cursor { fill: #fff; }
.mugc { fill: var(--yellow); }
.steam { fill: #fff; opacity: 0.7; }
.paper { fill: #fff; }
.cal-top { fill: var(--pink); }
.cal-num { fill: var(--ink); font-family: var(--pixel); font-size: 6.5px; font-weight: 700; }
.cal-lbl { fill: var(--pink-deep); font-family: var(--pixel); font-size: 3.5px; font-weight: 700; }
.poster { fill: var(--yellow); }
.poster-txt { fill: var(--ink); font-family: var(--pixel); font-size: 5px; font-weight: 700; }
.shade { fill: var(--mint); }
.bulb { fill: #fff6c2; }
.beam, .glow { fill: #fff2a8; opacity: 0; pointer-events: none; }
.dark { fill: #0b0530; opacity: var(--dark); pointer-events: none; transition: opacity 0.4s steps(3); }
.z-txt { fill: #fff; font-family: var(--pixel); font-size: 5px; font-weight: 700; }

/* ---------- live states ---------- */
.w-moon, .w-stars, .w-clouds, .w-rain, .cat-sleep, .zzz, .notes { display: none; }
.rm-svg[data-time='night'] .w-sun { display: none; }
.rm-svg[data-time='night'] .w-moon, .rm-svg[data-time='night'] .w-stars { display: inline; }
.rm-svg[data-time='night'] .city-win, .rm-svg[data-time='sunset'] .city-win { opacity: 1; }
.rm-svg[data-wx='cloudy'] .w-clouds, .rm-svg[data-wx='rain'] .w-clouds, .rm-svg[data-wx='storm'] .w-clouds, .rm-svg[data-wx='fog'] .w-clouds { display: inline; }
.rm-svg[data-wx='rain'] .w-rain, .rm-svg[data-wx='storm'] .w-rain { display: inline; }
.rm-svg[data-wx='rain'] .w-sun, .rm-svg[data-wx='storm'] .w-sun, .rm-svg[data-wx='fog'] .w-sun { display: none; }
.rm-svg[data-wx='storm'] .w-stars, .rm-svg[data-wx='rain'] .w-stars { display: none; }
.rm-svg[data-time='night'] .cat-awake { display: none; }
.rm-svg[data-time='night'] .cat-sleep, .rm-svg[data-time='night'] .zzz { display: inline; }
.rm-svg.playing .notes { display: inline; }
.rm-svg.lit .beam { opacity: 0.35; }
.rm-svg.lit .glow { opacity: 0.12; }
.rm-svg:not(.lit) .bulb { fill: #8a7fb8; }

/* ---------- objects ---------- */
.hit { fill: transparent; }
.obj { cursor: pointer; outline: none; }
.obj:hover, .obj:focus-visible {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.obj:focus-visible { filter: drop-shadow(1px 0 0 var(--yellow)) drop-shadow(-1px 0 0 var(--yellow)) drop-shadow(0 1px 0 var(--yellow)) drop-shadow(0 -1px 0 var(--yellow)); }
.hint { fill: var(--yellow); }
.obj.seen .hint { display: none; }
.obj.bump { animation: rm-bump 0.3s steps(2); transform-box: fill-box; transform-origin: bottom center; }
@keyframes rm-bump { 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: no-preference) {
  .hint { animation: rm-blink 1.2s steps(2) infinite; }
  .w-rain { animation: rm-rain 0.5s steps(3) infinite; }
  .notes { animation: rm-notes 1.4s steps(4) infinite; }
  .steam { animation: rm-steam 1.6s steps(3) infinite; }
  .cursor { animation: rm-blink 1s steps(2) infinite; }
  .zzz { animation: rm-notes 2.4s steps(4) infinite; }
}
@keyframes rm-blink { 50% { opacity: 0; } }
@keyframes rm-rain { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes rm-notes { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } }
@keyframes rm-steam { 0% { transform: translateY(1px); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateY(-3px); opacity: 0; } }

/* ---------- toast ---------- */
.rm-toast {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; padding: 8px 12px; max-width: calc(100% - 24px);
  font-family: var(--pixel); font-size: 13px; line-height: 1.3; text-align: center;
  color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; pointer-events: none; transition: opacity 0.2s steps(2);
}
.rm-toast.show { opacity: 1; }

/* ---------- progress + list ---------- */
.rm-progress { display: flex; align-items: center; gap: 12px; max-width: 960px; margin: 22px 0 14px; }
.rm-found { font-family: var(--pixel); font-size: 13px; text-transform: uppercase; white-space: nowrap; }
.rm-bar { flex: 1; height: 12px; border: 3px solid var(--ink); background: #2a1466; box-shadow: 0 0 0 2px var(--line); }
.rm-bar span { display: block; height: 100%; width: 0; background: var(--mint); transition: width 0.3s steps(6); }
.rm-things { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 960px; }
.rm-thing {
  width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  padding: 8px 10px; font: inherit; text-align: left; cursor: pointer;
  color: var(--panel-ink); background: var(--panel); border: 3px solid var(--ink); box-shadow: 3px 3px 0 #0d0630;
}
.rm-thing b { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; }
.rm-thing small { font-size: 11px; color: #5d4aa8; }
.rm-thing:hover, .rm-thing:focus-visible { background: #fff6c2; outline: none; }
.rm-thing.seen { background: #c9f7ec; }

/* ---------- dialog ---------- */
.rm-dlg {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto;
  margin: auto; color: var(--panel-ink);
}
.rm-dlg::backdrop { background: rgba(11, 5, 48, 0.6); }
.rm-dlg .window-bar { align-items: center; position: sticky; top: 0; }
.rm-x { font: inherit; font-size: 18px; line-height: 1; color: #fff; background: none; border: 0; padding: 4px 6px; cursor: pointer; min-width: 36px; min-height: 32px; }
.rm-x:hover, .rm-x:focus-visible { color: var(--yellow); outline: none; }
.rm-dlg-body { padding: 18px 18px 20px; }
.rm-dlg-body h3 { margin: 0 0 6px; font-family: var(--pixel); font-size: 18px; text-transform: uppercase; }
.rm-dlg-body p { margin: 0 0 12px; line-height: 1.55; }
.rm-dlg-body .muted { color: #5d4aa8; font-size: 13px; }
.rm-big { font-family: var(--pixel); font-size: 40px; line-height: 1; margin: 6px 0 10px; }
.rm-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-list a { display: block; padding: 10px 12px; color: var(--panel-ink); background: #f4f0ff; border: 3px solid var(--ink); text-decoration: none; }
.rm-list a:hover, .rm-list a:focus-visible { background: #fff6c2; }
.rm-list b { display: block; font-family: var(--pixel); font-size: 13px; text-transform: uppercase; }
.rm-list small { font-size: 12px; color: #5d4aa8; }
.rm-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chips li { padding: 4px 8px; font-size: 13px; background: #f4f0ff; border: 2px solid var(--ink); }
.rm-song { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; min-width: 0; }
.rm-song img { width: 64px; height: 64px; image-rendering: pixelated; border: 3px solid var(--ink); flex: none; background: var(--line); }
.rm-song div { min-width: 0; }
.rm-song b, .rm-song span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-dlg .btn { margin-top: 4px; }

@media (max-width: 760px) {
  .rm-things { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rm-frame { margin: 0 -16px; border-left: 0; border-right: 0; box-shadow: none; }
  .rm-toast { font-size: 11px; bottom: 8px; }
}
@media (max-width: 360px) {
  .rm-things { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones: bigger room, swipe to look around ---------- */
.rm-scroll { overflow: hidden; }
.rm-swipe { display: none; }
@media (max-width: 760px) {
  .rm-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rm-scroll::-webkit-scrollbar { display: none; }
  .rm-scroll .rm-svg { width: 620px; max-width: none; }
  .rm-swipe {
    display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); margin: 0; padding: 3px 8px;
    font-family: var(--pixel); font-size: 10px; line-height: 1.4; white-space: nowrap; color: #fff; background: rgba(30, 15, 82, 0.8);
    pointer-events: none; transition: opacity 0.3s steps(2);
  }
  .rm-frame.swiped .rm-swipe { opacity: 0; }
}