/* ============================================================
   STYLE — reset + utilitaires statiques (équivalents Tailwind) + loader.
   Le CSS dynamique du jeu (police, animations, couleurs) est injecté
   par le composant Style dans js/components.js.
   ============================================================ */
  /* Reset + utilitaires (équivalents Tailwind utilisés par le jeu) */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { min-height: 100%; }
  body { background: #14100b; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input, select { font: inherit; }
  .flex { display: flex; } .grid { display: grid; } .block { display: block; }
  .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; }
  .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
  .relative { position: relative; } .absolute { position: absolute; }
  .left-0 { left: 0; } .right-0 { right: 0; }
  .overflow-hidden { overflow: hidden; }
  .min-h-screen { min-height: 100vh; min-height: 100dvh; }
  .w-full { width: 100%; }
  .font-bold { font-weight: 700; }
  .text-center { text-align: center; } .text-left { text-align: left; }
  .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; }
  .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
  .px-1 { padding-left: .25rem; padding-right: .25rem; } .px-2 { padding-left: .5rem; padding-right: .5rem; }
  .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
  .py-3 { padding-top: .75rem; padding-bottom: .75rem; }
  .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
  .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; }
  .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
  .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; }
  #loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #e8dcc8; font-family: sans-serif; }
  #loader .spin { width: 44px; height: 44px; border: 5px solid #3a2f22; border-top-color: #e0b350; border-radius: 50%; animation: ldspin 0.9s linear infinite; }
  @keyframes ldspin { to { transform: rotate(360deg); } }