/* Opt-in layout only. Theme, game rules and artwork belong to each app. */
html:has([data-meeem-game]), body:has([data-meeem-game]) { margin: 0; width: 100%; height: 100%; overflow: hidden; }
[data-meeem-game] { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; min-width: 0; min-height: 0; overflow: hidden; box-sizing: border-box; }
[data-meeem-game] *, [data-meeem-game] *::before, [data-meeem-game] *::after { box-sizing: border-box; }
[data-meeem-game-hud], [data-meeem-game-controls] { flex: 0 0 auto; min-width: 0; }
[data-meeem-game-stage] { position: relative; flex: 1 1 0%; min-width: 0; min-height: 0; overflow: hidden; }
[data-meeem-game-stage] > canvas { display: block; width: 100%; height: 100%; }
[data-meeem-game-controls] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
[data-meeem-game-control-group] { display: flex; flex: 1 1 0%; min-width: 0; gap: 8px; max-width: 168px; }
[data-meeem-game-controls] button { flex: 1 1 0%; min-width: 44px; width: auto; max-width: 80px; min-height: 48px; height: 56px; touch-action: none; user-select: none; }
[data-meeem-game-hud] button, [data-meeem-game-menu] button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
[data-meeem-game-menu] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto; overscroll-behavior: contain; padding: 12px; touch-action: pan-y; }
[data-meeem-game-menu] > * { flex: 0 0 auto; max-width: 100%; margin-block: auto; }
[data-meeem-game-menu].hidden, [data-meeem-game-menu][hidden] { display: none; }
@media (max-height: 500px) {
  [data-meeem-game-detail] { display: none !important; }
  [data-meeem-game-hud] { padding-block: 4px; }
  [data-meeem-game-controls] { padding-block: 4px; }
  [data-meeem-game-controls] button { height: 48px; }
  [data-meeem-game-menu] { padding: 8px; }
  [data-meeem-game-menu] > * { padding: 12px; }
}