@font-face {
  font-family: "Cinema Pixel";
  src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; background: #13151a; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; overscroll-behavior: none; }
#art {
  position: relative;
  width: min(1280px, calc(100vw - 48px), calc((100vh - 48px) * 16 / 9));
  width: min(1280px, calc(100vw - 48px), calc((100dvh - 48px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
}
#scene { display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; }
#ambient, #floral-details { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
#ambient rect { fill: #e2c99a; opacity: .12; animation: mote-drift 12s ease-in-out infinite alternate; }
#ambient rect:nth-child(2) { animation-delay: -5s; animation-duration: 15s; opacity: .09; }
#ambient rect:nth-child(3) { animation-delay: -9s; animation-duration: 18s; opacity: .1; }
@keyframes mote-drift { from { transform: translate(0, 0); } to { transform: translate(1px, -2px); } }
@media (prefers-reduced-motion: reduce) { #ambient { display: none; } }
.dedication {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 40px));
  margin: 0;
  text-align: center;
  font-family: "Cinema Pixel", ui-monospace, monospace;
  font-size: clamp(14px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.7;
  color: #fff0cf;
  text-shadow: 2px 2px 0 #252137, -1px -1px 0 #252137, 1px -1px 0 #252137, -1px 1px 0 #252137;
  overflow-wrap: anywhere;
  white-space: normal;
  pointer-events: none;
}
.dedication.long-message { font-size: clamp(12px, 1.6vw, 22px); }
#typed-message.typing::after { content: ''; display: inline-block; width: .12em; height: 1em; margin-left: .18em; background: currentColor; box-shadow: 1px 1px #252137; vertical-align: -.12em; }
#poster { position: absolute; z-index: 3; display: block; padding: 0; margin: 0; border: 0; background: transparent; color: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#poster:focus { outline: none; }
#poster:focus-visible { outline: 2px dashed #fff0cf; outline-offset: 3px; }
#poster[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  #art {
    width: min(calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
    width: min(calc(100vw - 24px), calc((100dvh - 24px) * 16 / 9));
  }
  .dedication { top: 10px; width: calc(100% - 24px); font-size: 12px; line-height: 1.5; }
  .dedication.long-message { font-size: 8px; }
}
@media (max-height: 440px) and (orientation: landscape) {
  .dedication { top: 10px; font-size: 14px; line-height: 1.55; }
  .dedication.long-message { font-size: 11px; }
}