/* Shared cross-device platform layer for every Kids Game Zone title. */
:root {
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html { height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: var(--app-height); }
button, select, input, [role="button"] { font: inherit; -webkit-tap-highlight-color: transparent; }
button, select, [role="button"], a { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px;
}

.home-btn-wrap {
  top: calc(12px + var(--safe-top)) !important;
  left: calc(12px + var(--safe-left)) !important;
}
.home-btn { min-height: 44px; }
body.is-embedded .home-btn-wrap,
body.is-embedded > .home-btn { display: none !important; }

/* Canvas physics game: controls must remain reachable below the board. */
body[data-game="gravity"] { min-height: var(--app-height); }
@media (max-width: 767px) {
  body[data-game="gravity"] {
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    padding-top: var(--safe-top);
    padding-bottom: calc(10px + var(--safe-bottom));
  }
  body[data-game="gravity"] header { margin-top: 8px; }
  body[data-game="gravity"] h1 { font-size: clamp(26px, 9vw, 38px); letter-spacing: 6px; }
  body[data-game="gravity"] .mode-tabs { gap: 8px; margin: 10px 0 8px; }
  body[data-game="gravity"] .tab { padding: 10px 15px; font-size: 12px; letter-spacing: 2px; }
  body[data-game="gravity"] #gameCanvas { max-width: min(calc(100vw - 24px), 52dvh, 540px); }
  body[data-game="gravity"] .game-wrapper { padding: 0 12px 12px; }
  body[data-game="gravity"] .sidebar { max-width: min(calc(100vw - 24px), 540px); }
}

/* Coding game: keep the board and command targets comfortably tappable. */
body[data-game="rocketman"] { min-height: var(--app-height) !important; padding-bottom: var(--safe-bottom); }
body[data-game="rocketman"] main { padding-left: max(.75rem, var(--safe-left)); padding-right: max(.75rem, var(--safe-right)); }
@media (max-width: 767px) {
  body[data-game="rocketman"] header { padding-top: max(8px, var(--safe-top)); }
  body[data-game="rocketman"] .btn-cmd { min-height: 64px; }
  body[data-game="rocketman"] #command-list { max-height: 160px !important; }
}

/* Puzzle and language titles use document scrolling on short phone screens. */
body[data-game="sudoku"] .page,
body[data-game="wordsmith"] .page,
body[data-game="copycat"] .page { min-height: var(--app-height); padding-bottom: var(--safe-bottom); }
body[data-game="sudoku"] .top-bar,
body[data-game="wordsmith"] .top-bar,
body[data-game="copycat"] .top-bar { padding-top: max(10px, var(--safe-top)); }

/* Legacy flag game: prevent the keyboard falling below short mobile viewports. */
body[data-game="flag"] { min-height: var(--app-height) !important; padding-bottom: var(--safe-bottom); }
@media (max-height: 700px), (max-width: 420px) {
  body[data-game="flag"] main { padding-top: 12px !important; padding-bottom: 12px !important; }
  body[data-game="flag"] .flag-container { margin-bottom: 16px !important; max-height: 28dvh; }
  body[data-game="flag"] #word-container { margin-bottom: 18px !important; gap: 10px 16px; }
  body[data-game="flag"] .key-btn { min-height: 42px; height: 42px !important; }
}

/* Compact portal chrome on phones, including notched devices. */
#hub { padding-top: max(24px, calc(20px + var(--safe-top))) !important; padding-bottom: max(48px, calc(28px + var(--safe-bottom))) !important; }
#game-topbar { padding-top: var(--safe-top) !important; height: calc(52px + var(--safe-top)) !important; }

@media (pointer: coarse) {
  button, select, [role="button"] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}