/* ---- Polices (chargées depuis dist/public) ---- */
@font-face {
  font-family: 'GretelScript-Caps';
  src: url('./assets/Fonts/GretelScript-Caps.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ChauPhilomeneOne-Regular';
  src: url('./assets/Fonts/ChauPhilomeneOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- Page & conteneurs ---- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;                 /* par défaut desktop: pas de svh */
    background-color: #1d1d1d;   /* couleur des bandes */
    overflow: hidden;
    overscroll-behavior: none;    /* empêche pull-to-refresh/scroll élastique */
    -webkit-text-size-adjust: 100%;
  }
  
  #app {
    width: 100%;
    height: 100%;
  }
  
  #game-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1d1d1d;    /* couleur des bandes */
    /* Pas de padding pour éviter le décalage des coordonnées input en fullscreen */
    display: flex;                 /* centre le canvas sans subpixels */
    justify-content: center;
    align-items: center;
  }

  /* Mobile/tactile: viewport stable */
  @media (hover: none) and (pointer: coarse) {
    html, body { height: 100svh; }
    #game-container { min-height: 100svh; height: 100svh; }
    /* Empêche les subpixels sur le canvas en mobile (letterbox) */
    #game-container canvas { image-rendering: auto; }
    /* Verrouille le centrage pour éviter les translations fractionnaires */
    #game-container { padding: 0; }
    /* Empêche les reflows horizontaux transitoires */
    body { width: 100vw; overflow-x: hidden; }
  }
  
  /* ---- Canvas Phaser ---- */
  canvas {
    display: block;
    /* Si ton jeu est en pixel-art, dé-commente :
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    */
    touch-action: none;           /* bloque scroll/zoom tactile sur le canvas */
    -ms-touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Curseur visible par défaut sur desktop */
  #game-container canvas {
  	cursor: default;
  }
  
  .is-touch #game-container canvas {
    cursor: none !important;      /* cache le curseur uniquement sur tactile */
  }
  
  /* ---- Variables & helper HUD ---- */
  :root {
    --hud-padding: 16px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
  }
  
  .hud-safe-pad {
    padding-top: calc(var(--hud-padding) + var(--safe-top));
    padding-right: calc(var(--hud-padding) + var(--safe-right));
    padding-bottom: calc(var(--hud-padding) + var(--safe-bottom));
    padding-left: calc(var(--hud-padding) + var(--safe-left));
    pointer-events: none; /* utile si overlay HTML au-dessus du canvas */
  }