:root {
  --bg: #fff8e7; /* cosmic latte */
  --transition-ms: 1200ms;
  --fg: #1a1a1a;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app { min-height: 100dvh; }

.stage {
  position: relative;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg); /* cosmic latte letterbox */
}

.frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: contain; /* letterbox; no cropping */
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--transition-ms) ease-in-out;
}

.frame.active { opacity: 1; }

.msg {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #444;
}

.home-link {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: inline-block;
  z-index: 1000;
  opacity: 0.4; /* ~40% opacity */
}
.home-link img { height: 28px; width: 28px; display: block; }
.home-link:hover { opacity: 0.7; }