:root {
  --page-ink: #07111f;
  --page-blue: #115ee9;
  --page-sky: #6dd5ff;
  --page-gold: #f7bd2c;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(180deg, #13a7f5 0%, #77d9ff 52%, #eaf8ff 100%);
  color: var(--page-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  touch-action: none;
}

.game-page {
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.game-shell {
  width: min(100vw - 24px, 1280px);
  height: min(100svh - 24px, 720px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 24px 80px rgba(7, 17, 31, 0.22);
  overflow: hidden;
}

#game-root {
  width: 100%;
  height: 100%;
}

#game-root canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

noscript {
  position: fixed;
  inset: auto 16px 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(7, 17, 31, 0.2);
  font-weight: 700;
}

@media (max-aspect-ratio: 16 / 9) {
  .game-shell {
    width: calc(100vw - 24px);
    height: auto;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .game-shell {
    width: auto;
    height: calc(100svh - 24px);
  }
}