/* One warm little house; the windows are the toys, not controls around them. */
body[data-game="peekaboo"] .game-progress { display: none; }
body[data-game="peekaboo"] .game-content { container-type: size; width: min(940px,100%); }
body[data-game="peekaboo"] .play-heading { padding-bottom: 8px; }
.peekaboo-scene { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.peekaboo-house { flex: 0 1 auto; width: min(860px,92%); display: flex; flex-direction: column; max-height: calc(100% - 40px); }
.peekaboo-roof { position: relative; height: min(110px,16cqh); flex: 0 0 auto; margin: 0 -1%; z-index: 1; }
.peekaboo-roof > svg { width: 100%; height: 100%; overflow: visible; }
.peekaboo-heart { position: absolute; bottom: 10%; left: calc(50% - 16px); width: 32px; height: 32px; opacity: .45; transition: opacity .5s; }
.peekaboo-all-home .peekaboo-heart { opacity: 1; }
.peekaboo-rooms { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,3vw,36px); padding: clamp(20px,4cqh,38px) clamp(20px,4vw,42px) 22px; background: #f2dfba; border-radius: 0 0 18px 18px; box-shadow: inset 0 -6px 0 #dcc59f; min-height: 0; }
.peekaboo-window { position: relative; display: block; width: 100%; height: clamp(150px,40cqh,265px); border: 0; padding: 0; background: transparent; border-radius: 46% 46% 8% 8%; color: #6f645b; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.peekaboo-opening { position: absolute; inset: 0 0 10px; display: block; border-radius: 46% 46% 4px 4px; overflow: hidden; isolation: isolate; background: #506967; box-shadow: 0 0 0 6px #d1b589; pointer-events: none; }
.peekaboo-wallpaper { position: absolute; inset: 0; background: radial-gradient(circle, #ffffff12 2px, transparent 3px) 0 0 / 24px 24px; }
.peekaboo-friend { display: block; position: absolute; width: 102%; height: 90%; left: -1%; bottom: -2%; transform-origin: 50% 100%; }
.peekaboo-friend svg { width: 100%; height: 100%; }
.peekaboo-curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: var(--peekaboo-curtain); transition: transform .54s cubic-bezier(.22,.75,.27,1); z-index: 2; box-shadow: inset -2px 0 0 #00000010; }
.peekaboo-curtain-left { left: 0; transform-origin: top left; }
.peekaboo-curtain-right { right: 0; transform-origin: top right; box-shadow: inset 2px 0 0 #00000010; }
.peekaboo-curtain::before { content: ''; position: absolute; inset: 0 13%; border-left: 2px solid #ffffff1c; border-right: 2px solid #00000009; }
.peekaboo-curtain i { position: absolute; top: 65%; right: 13%; height: 12px; width: 12px; background: #fff0d5; border-radius: 50%; box-shadow: 0 2px 0 #00000013; }
.peekaboo-curtain-right i { right: auto; left: 13%; }
.peekaboo-curtain-left { transform: translateX(calc(var(--peekaboo-open,0) * -85%)) rotate(calc(var(--peekaboo-open,0) * 5deg)); }
.peekaboo-curtain-right { transform: translateX(calc(var(--peekaboo-open,0) * 85%)) rotate(calc(var(--peekaboo-open,0) * -5deg)); }
.peekaboo-dragging { cursor: grabbing; }
.peekaboo-dragging .peekaboo-curtain { transition: none; }
.peekaboo-paw { transform-origin: 127px 174px; }
.peekaboo-ears { transform-origin: 90px 85px; }
.peekaboo-paw-left { transform-origin: 45px 178px; }
.peekaboo-paw-right { transform-origin: 137px 176px; }
.peekaboo-accessory-flower { transform-origin: 128px 173px; }
.peekaboo-accessory-hat { transform-origin: 90px 50px; }
.peekaboo-accessory-blanket { transform-origin: 90px 178px; }
.peekaboo-still .peekaboo-window[data-open="true"] .peekaboo-paw { transform: translate(0,-6px) rotate(-8deg); }
.peekaboo-still .peekaboo-window[data-open="true"] .peekaboo-ears { transform: rotate(-2deg); }
.peekaboo-still .peekaboo-window[data-open="true"] .peekaboo-paw-left { transform: translate(4px,-2px) rotate(12deg); }
.peekaboo-still .peekaboo-window[data-open="true"] .peekaboo-paw-right { transform: translate(-4px,-2px) rotate(-12deg); }
.peekaboo-sill { position: absolute; bottom: 0; left: -6%; width: 112%; height: 14px; background: #c8a77d; border-radius: 6px; box-shadow: 0 4px 0 #b7956e; pointer-events: none; }
.peekaboo-number { position: absolute; left: 0; right: 0; bottom: -27px; font-size: 12px; line-height: 18px; color: #716450; pointer-events: none; }
.peekaboo-window:focus-visible { outline: 3px solid #345b65; outline-offset: 9px; }
.peekaboo-hint .peekaboo-opening { box-shadow: 0 0 0 6px #d1b589, 0 0 0 10px #f5b95b; }
.peekaboo-step { width: 108%; align-self: center; flex: 0 0 12px; margin-top: 7px; border-radius: 10px; background: #93aa82; }
.peekaboo-caption { margin: 0; min-height: 1.4em; text-align: center; font-size: clamp(.78rem,1.5vw,1rem); color: var(--tf-muted); }
.play-view.is-paused .peekaboo-curtain { transition: none; }
.reduce-motion .peekaboo-curtain, .reduce-motion .peekaboo-heart { transition: none; }
@media (max-width: 560px) and (min-height: 520px) {
  .peekaboo-house { width: min(390px,92%); }
  .peekaboo-roof { height: clamp(42px,9cqh,64px); }
  .peekaboo-rooms { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 24px; padding: 18px 24px 30px; }
  .peekaboo-window { height: clamp(85px,26cqh,180px); }
  .peekaboo-window:last-child { grid-column: 1 / -1; width: calc((100% - 24px)/2); justify-self: center; }
  .peekaboo-heart { width: 23px; height: 23px; left: calc(50% - 11px); }
  .peekaboo-scene { gap: 10px; }
  .peekaboo-sill { height: 9px; box-shadow: 0 3px 0 #b7956e; }
  .peekaboo-number { bottom: -22px; font-size: 10px; }
  .peekaboo-caption { font-size: 12px; max-width: 280px; line-height: 1.4; }
}
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  body[data-game="peekaboo"] .play-topline { flex-basis: 62px; }
  body[data-game="peekaboo"] .play-brand { display: none; }
  body[data-game="peekaboo"] .play-heading { position: absolute; top: 18px; left: 165px; right: 120px; padding: 0; }
  body[data-game="peekaboo"] .play-heading h1 { font-size: 18px; }
  body[data-game="peekaboo"] .play-heading > p:last-child { font-size: 11px; }
  body[data-game="peekaboo"] .game-content { margin-top: 0; }
  body[data-game="peekaboo"] .play-view { --play-bottom-space: calc(57px + env(safe-area-inset-bottom,0px)); }
  .peekaboo-scene { gap: 4px; }
  .peekaboo-house { width: min(650px,88%); max-height: calc(100% - 22px); }
  .peekaboo-roof { height: 23cqh; }
  .peekaboo-rooms { padding: 12px 35px 20px; gap: 28px; }
  .peekaboo-window { height: clamp(50px,43cqh,120px); }
  .peekaboo-friend { width: 100%; height: 100%; }
  .peekaboo-heart { height: 22px; width: 22px; left: calc(50% - 11px); }
  .peekaboo-opening { border-radius: 35% 35% 4px 4px; box-shadow: 0 0 0 4px #d1b589; }
  .peekaboo-sill { height: 8px; }
  .peekaboo-number { bottom: -19px; font-size: 10px; }
  .peekaboo-step { flex-basis: 6px; margin-top: 4px; }
  .peekaboo-caption { font-size: 11px; }
}
@media (max-height: 360px) and (min-aspect-ratio: 1/1) {
  body[data-game="peekaboo"] .play-heading > p:last-child { display: none; }
  .peekaboo-house { width: 86%; }
  .peekaboo-rooms { padding-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .peekaboo-curtain, .peekaboo-heart { transition: none; }
}