html, body { margin: 0; height: 100%; overflow: hidden; }
/* fallback when the script does not run: the base room's sky over its plank floor */
body { background: linear-gradient(#bfe0f2, #f9e8d2 82%, #b98b5c 82%); }

.pc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

#pc-scene { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; }

#pc-nav { position: fixed; inset: 0; pointer-events: none; }

.pc-btn {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.pc-btn canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pc-btn:focus { outline: none; }
/* a light ring inside a dark one reads on the light and the dark rooms */
.pc-btn:focus-visible { outline: 2px solid #fff8ec; outline-offset: 2px; box-shadow: 0 0 0 6px #221d19; }

/* while a transition runs the buttons are hidden: the picked one sinks a pixel and fades, the rest go at once;
   the new room's buttons fade in when it is done */
.pc-btn { transition: opacity 0.25s; }
#pc-nav.pc-busy .pc-btn { opacity: 0; transition: none; cursor: default; }
#pc-nav.pc-busy .pc-btn.pc-picked { transform: translateY(2px); animation: pc-pick 0.45s steps(3, end) forwards; }
@keyframes pc-pick { from { opacity: 1; } 55% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pc-btn, #pc-nav.pc-busy .pc-btn.pc-picked { transition: none; animation: none; }
}