@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Tajawal:wght@400;500;700&display=swap');

:root {
  --night: #1b1330;
  --parchment: #f2e9d8;
  --sun: #e8a33d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--night);
  color: var(--parchment);
  font-family: 'Tajawal', sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

#game-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #241c38 0%, #120c1f 100%);
}

#game-container {
  width: 100%;
  height: 100%;
  max-width: 960px;
  max-height: 540px;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

#game-container canvas {
  display: block;
  touch-action: none;
  /* Let Phaser handle canvas sizing through FIT mode */
}

/* Keep the whole page from scrolling/zooming on mobile while playing */
body {
  touch-action: none;
}

@media (max-width: 700px) {
  #game-container {
    /* Let Phaser handle aspect ratio preservation via FIT mode */
    max-width: 100%;
    max-height: 100%;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}