* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #281810;
  color: #4a2518;
  font: 600 1rem system-ui, sans-serif;
}
.stage {
  position: relative;
  width: min(100%, calc(100cqh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
}
.frame, .menu-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.previous-frame { position: absolute; inset: 0; pointer-events: none; }
#menu {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, calc(100cqh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
}
.menu-credit {
  position: absolute;
  right: 1.2%;
  bottom: .8%;
  margin: 0;
  color: #fff0d4;
  font: 600 clamp(9px, .85cqw, 13px)/1.2 system-ui, sans-serif;
  text-shadow: 0 1px 3px #32170c, 0 0 4px #32170c;
}
.menu-art { position: absolute; inset: 0; pointer-events: none; }
.menu-title-art { clip-path: inset(0 0 48% 0); }
.start-art {
  clip-path: inset(52% 0 24% 0);
  transform-origin: 72.35% 64.05%;
}
.resume-art {
  clip-path: inset(76% 0 0 0);
  transform-origin: 72.15% 85%;
}
.start-art, .resume-art, .menu-button { transform: scale(.6); }
.menu-button {
  position: absolute;
  background: transparent;
  border: 0;
  border-radius: 100vmax;
  cursor: pointer;
}
.menu-button:focus-visible, #next:focus-visible { outline: 3px solid #fff5c7; outline-offset: 3px; }
.menu-button:disabled { cursor: default; background: rgb(45 25 18 / 32%); }
.start { left: 48.3%; top: 53.4%; width: 48.1%; height: 21.3%; }
.resume { left: 52.5%; top: 72%; width: 39.3%; height: 15%; }
.dialogue {
  position: absolute;
  top: 12%;
  left: 48%;
  width: 45%;
  padding: .65em .9em;
  border: 2px solid #985232;
  border-radius: 1em;
  background: #fff4de;
  box-shadow: 0 .3em .75em #552d2544;
  font-size: clamp(12px, 2.2cqw, 30px);
}
.dialogue::before {
  content: "";
  position: absolute;
  left: -.4em;
  top: 55%;
  width: .65em;
  height: .65em;
  transform: rotate(45deg);
  background: #fff4de;
  border-left: 2px solid #985232;
  border-bottom: 2px solid #985232;
}
.dialogue p { margin: 0 0 .45em; }
.dialogue[data-scene^="hallway"] { left: 23%; top: 15%; width: 37%; }
.dialogue[data-scene="living"] { left: 40%; top: 24%; width: 32%; }
.dialogue[data-scene^="hallway"]::before,
.dialogue[data-scene="living"]::before {
  left: auto;
  right: -.4em;
  transform: rotate(225deg);
}
.happy {
  position: absolute;
  bottom: -.8%;
  right: -3%;
  height: 82%;
  width: auto;
  animation: happy-arrival .62s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes happy-arrival {
  from { transform: translateX(110%); }
  to { transform: translateX(0); }
}
.hearts { position: absolute; inset: 0; pointer-events: none; }
.hearts span {
  position: absolute;
  color: #f67f8c;
  text-shadow: 0 .065em #a74652, 0 0 .24em #fff0c8;
  line-height: 1;
  font-size: clamp(14px, 3.5cqw, 54px);
  opacity: 0;
  animation: floating-heart 2.1s ease-out infinite both;
}
.hearts span:nth-child(1) { left: 74%; top: 43%; --drift: -35%; --tilt: -17deg; }
.hearts span:nth-child(2) { left: 81%; top: 23%; --drift: -18%; --tilt: -10deg; animation-delay: .25s; }
.hearts span:nth-child(3) { left: 94%; top: 31%; --drift: 15%; --tilt: 16deg; animation-delay: .6s; }
.hearts span:nth-child(4) { left: 71%; top: 64%; --drift: -40%; --tilt: -22deg; animation-delay: .95s; }
.hearts span:nth-child(5) { left: 94%; top: 59%; --drift: 15%; --tilt: 12deg; animation-delay: 1.25s; }
@keyframes floating-heart {
  0% { transform: translateY(12%) rotate(var(--tilt)) scale(.52); opacity: 0; }
  23% { opacity: .95; }
  65% { opacity: .8; }
  100% { transform: translate(var(--drift), -105%) rotate(var(--tilt)) scale(1.06); opacity: 0; }
}
#next {
  display: block;
  margin-left: auto;
  background: #ffe3b3;
  border: 1px solid #985232;
  color: inherit;
  border-radius: .6em;
  padding: .25em .7em;
  min-height: 28px;
  font: inherit;
  font-size: .82em;
  cursor: pointer;
}
.waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.waves i {
  position: absolute;
  left: 44%;
  top: 25%;
  width: 23%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(1px, .24cqw, 4px) solid #fff0ab;
  border-block-color: transparent;
  opacity: 0;
  animation: ring-wave .72s ease-out infinite;
}
.waves i:nth-child(2) { animation-delay: .24s; }
.waves i:nth-child(3) { animation-delay: .48s; }
@keyframes ring-wave {
  0% { transform: translate(-50%, -50%) scale(1.15, .55); opacity: 0; }
  23% { opacity: .88; }
  100% { transform: translate(-50%, -50%) scale(1.9, .9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .happy { animation: none; }
  .hearts span { animation: none; opacity: .82; transform: rotate(var(--tilt)); }
  .waves i { animation: none; transform: translate(-50%, -50%) scale(1.55, .7); opacity: .75; }
  .waves i:not(:first-child) { display: none; }
}

#resume {
  color: #652a10;
  background: linear-gradient(#fff2d0, #ffd19a 70%, #f3a56a);
  border: clamp(2px, .45cqw, 7px) solid #743416;
  box-shadow: inset 0 .16em #fff8df, inset 0 -.16em #dd8b58, 0 .18em .35em #49230c65;
  font: italic 800 clamp(14px, 3.4cqw, 56px)/1.05 Georgia, serif;
  white-space: nowrap;
}
#resume:disabled { opacity:.65; }
.game-window:has(.level-menu:not([hidden])) {
  background: #58301d url("level-menu-wall.png") center / cover no-repeat;
}
.game-window:has(.level-menu:not([hidden])) > .stage { visibility: hidden; }
.level-menu {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: auto;
  padding: clamp(12px, 3vmin, 30px);
  color: #fff4db;
  text-align: center;
}
.level-menu h2:focus { outline: none; }
.level-menu :is(a, button):focus-visible {
  outline: 3px solid #fff5c7;
  outline-offset: 3px;
}
.level-menu h2 { margin:0 0 .6rem; }
.level-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; max-width:760px; margin:0 auto .8rem; }
.level-grid a { color:#42271b; background:#ffebca; border:2px solid #edb45e; border-radius:12px; overflow:hidden; text-decoration:none; font-weight:750; padding-bottom:.4rem; }
.level-grid img { width:100%; height:clamp(60px,19vh,155px); object-fit:cover; display:block; margin-bottom:.3rem; }
#levels-back {
  min-height: 44px;
  padding: 0 1.5rem;
  border: 2px solid #edb45e;
  border-radius: 12px;
  background: #ffebca;
  color: #42271b;
  font: inherit;
}

@media (max-width: 600px) {
  #resume { width: 46%; left: 49%; min-height: 36px; transform: none; }
  .level-menu {
    display: grid;
    align-content: safe center;
    justify-items: center;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  }
  .level-menu .level-grid { width: 100%; }
  .level-grid img { height:auto; aspect-ratio:16/9; }
  .level-grid a { min-height:44px; }
}