/* Viewport backgrounds and safe-area controls for the three English games. */
html { width: 100%; height: 100%; overflow: hidden; }
body[data-game] {
  width: 100%; height: 100%; min-height: 0; overflow: hidden;
  overscroll-behavior: none;
  background: #edcc96 center / cover no-repeat;
}
body[data-game="peekaboo_house"] { background-image: url('assets/peekaboo-bg.webp'); }
body[data-game="jelly_colors"] { background-image: url('assets/jelly-bg.webp'); }
body[data-game="hello_teddy"] { background-image: url('assets/teddy-bg.webp'); }
body[data-game] .game-shell {
  width: 100%; max-width: none; height: 100%; height: 100dvh; min-height: 0;
  margin: 0; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.topbar { flex: none; }
.heading { text-shadow: 0 1px 8px #fff, 0 0 16px #fff; }
.heading p { color: #536d5e; }
body[data-game] .scene {
  flex: 1; min-height: 0; height: auto; background: transparent;
  border-radius: 0; box-shadow: none;
}
.game-shell > .hint {
  flex: none; align-self: center; max-width: min(94%, 720px);
  min-height: 0; padding: 5px 12px; border-radius: 18px;
  background: #fffaf0d9; color: #476152;
}
.game-shell > .word-card { flex: none; }
.game-shell > footer { position: relative; flex: none; z-index: 5; }
.parent-toggle { background: #fffaf0d9; border-radius: 20px; color: #526957; }
#parent-note {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(650px, 94vw); max-height: 45dvh; overflow: auto;
  padding: 16px; border-radius: 18px; background: #fffdf5; color: #476152;
  box-shadow: 0 6px 24px #5b462b33;
}
.audio-notice {
  position: fixed; z-index: 10; left: max(80px, calc(env(safe-area-inset-left) + 80px));
  right: max(80px, calc(env(safe-area-inset-right) + 80px));
  top: max(12px, env(safe-area-inset-top)); height: 56px;
  font-size: 11px; padding: 4px 8px; pointer-events: none;
}
body.audio-unavailable .heading, body.audio-unavailable #replay { visibility: hidden; }
.audio-notice button { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 56px; height: 56px; border-radius: 50%; pointer-events: auto; }
@media (max-height: 700px) {
  body[data-game] .game-shell { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .topbar { grid-template-columns: 44px 1fr 44px; }
  .round-button { width: 44px; height: 44px; }
  .audio-notice { top: max(6px, env(safe-area-inset-top)); height: 44px; }
  .audio-notice button { top: max(6px, env(safe-area-inset-top)); width: 44px; height: 44px; }
  .heading h1 { font-size: 18px; }
  .heading p { display: none; }
  .game-shell > .word-card { min-height: 40px; padding: 4px 12px; }
  .game-shell > .word-card strong { font-size: 25px; }
  .game-shell > .hint { font-size: 12px; padding: 3px 10px; }
}
@media (max-height: 420px) { .game-shell > .hint { display: none; } }