* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background-color: #00c853;
  background-image: url('/assets/img/yellowbrickroad.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* desktop: fill screen */
  font-family: 'Press Start 2P', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.stage { position: relative; height: 100%; width: 100%; display: grid; place-items: center; overflow: hidden; }

/* Vertical video container with safe max size */
.frame {
  display: block;
  width: min(464px, 92vw);
  height: calc(min(464px, 92vw) * 1.48275862); /* 688/464 */
  border-radius: 16px;
  background: #000;
  border: 5px solid #000;
  box-shadow: 8px 8px 0 #000;
}

#doorVideo { display: none; object-fit: cover; }
#poster { background: #000; }

.enter {
  position: absolute; bottom: clamp(18px, 6vh, 44px);
  left: 50%; transform: translateX(-50%);
  height: 56px; padding: 0 22px; border-radius: 12px;
  font-family: 'Press Start 2P', system-ui, monospace; font-size: 14px; letter-spacing: 1px;
  background: #fff; color: #000; border: 4px solid #000; box-shadow: 6px 6px 0 #000;
}
.enter:active { transform: translateX(-50%) translateY(1px); box-shadow: 3px 3px 0 #000; }

.fade { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.fade.is-on { opacity: 1; }

@media (min-height: 840px) {
  .frame { border-radius: 20px; }
}

@media (max-width: 840px) {
  /* Mobile: always fill screen */
  body { background-size: cover; background-position: center center; background-repeat: no-repeat; }
  .frame { width: 100vw; height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  #doorVideo { object-fit: cover; }
  #poster { width: 100vw; height: 100vh; }
  .enter { bottom: 20px; }
}

@media (min-width: 841px) {
  /* Desktop: video/canvas fills viewport height without distorting */
  .frame { height: 100vh; width: auto; }
  #doorVideo { object-fit: contain; }
}