:root {
  color-scheme: dark;
  --ad-height: 90px;
  --page-bg: #05070b;
  --divider: #232a36;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page-bg);
}

.page-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--ad-height);
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.game-area {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.game-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.monetag-zone {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-right: max(8px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: max(8px, env(safe-area-inset-left));
  border-top: 1px solid var(--divider);
  background: var(--page-bg);
  isolation: isolate;
}

@media (max-width: 600px) {
  :root {
    --ad-height: 100px;
  }
}