/* ===========================================================================
   EduKingdom — global page styles
   The game itself is drawn on a Phaser canvas; this file only styles the page
   that hosts it, so the canvas sits centered on a clean dark backdrop with no
   scrollbars or blue tap-highlight flashes on mobile.
   =========================================================================== */

:root {
  /* Kept in sync with Constants.COLORS.bgDeep for a seamless letterbox. */
  --bg-deep: #0e1230;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* no page scroll — the game owns the viewport */
  background: var(--bg-deep);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  /* Disable long-press callouts / text selection / tap highlight on touch. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phaser's canvas — center it and stop it from being draggable. */
#game-root canvas {
  display: block;
  touch-action: none;
  /* Slightly rounded corners look softer inside the letterbox on desktop. */
  border-radius: 4px;
}