/* ============================================================
   CyberGames — socle visuel commun (CyberSprint, PhishHunter)
   "Clair & ludique" : crème chaud, cartes blanches arrondies,
   accents corail / orange / ambre, mouvement rebondi.
   Titres : Bricolage Grotesque · Texte : DM Sans.

   FICHIER PARTAGÉ, COPIÉ À L'IDENTIQUE dans chaque jeu :
     CyberSprint  app/static/css/cybergames.css   (référence)
     PhishHunter  app/static/css/cybergames.css
   Toute modification se fait dans CyberSprint puis se recopie
   (vérifier avec `cmp`). Rien de spécifique à un jeu ici : seulement
   les polices, les jetons de design et le fond commun.

   Les polices sont référencées en relatif (../fonts/) : le fichier
   doit rester dans un dossier css/ voisin du dossier fonts/.
   ============================================================ */

/* Polices auto-hébergées (pas de CDN : RGPD, fonctionnement hors ligne).
   WOFF2 variables réduites aux caractères latins. Mises en cache un an d'après
   leur nom de fichier : si une police change, la renommer ici ET dans les
   <link rel="preload"> (même URL résolue, sinon double téléchargement). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-latin.woff2') format('woff2');
}

:root {
  /* warm neutrals */
  --cream:    #fff6ee;
  --cream-2:  #ffeada;
  --card:     #ffffff;
  --card-2:   #fff1e6;   /* hovered row, secondary surface */
  --ink:      #2b1b14;   /* warm near-black */
  --ink-2:    #5b463c;
  --ink-soft: #9a8074;
  --line:     rgba(43,27,20,.10);

  /* brand warmth */
  --coral:    #ff5a3c;
  --coral-d:  #ef451f;
  --orange:   #ff8a2b;
  --amber:    #ffc24b;

  /* answer semaphore (clear good/bad) */
  --good:     #16b169;
  --good-d:   #11985a;
  --bad:      #ff3b30;
  --bad-d:    #e7281d;

  /* dramatic dark for cyberattaque / loss */
  --danger:   #2b1117;

  /* brand gradients */
  --grad-brand: linear-gradient(135deg, var(--orange), var(--coral) 60%, var(--coral-d));
  --grad-warm:  linear-gradient(135deg, var(--orange), var(--coral));
  --grad-good:  linear-gradient(135deg, var(--good), var(--good-d));
  --grad-bad:   linear-gradient(135deg, var(--bad), var(--bad-d));

  /* soft shadows */
  --sh-sm: 0 4px 14px rgba(70,30,15,.10);
  --sh-md: 0 14px 34px rgba(70,30,15,.14);
  --sh-lg: 0 26px 60px rgba(70,30,15,.20);
  --sh-coral: 0 14px 30px rgba(255,90,60,.40);
  --ring:  0 0 0 3px rgba(255,90,60,.14);

  /* type */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- background layers (identical in every game) ---- */
/* <canvas id="bg-canvas"> is painted by js/noise.js (drifting warm orbs) */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }

/* fine grain for a tactile, non-flat surface */
#grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* warm spotlight behind the home title */
#home-fx {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(255,138,43,.40), transparent 70%),
    radial-gradient(40% 40% at 70% 65%, rgba(255,90,60,.28), transparent 70%);
}
#home-fx.on { opacity: 1; animation: glow-breathe 7s ease-in-out infinite; }
@keyframes glow-breathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #home-fx.on { animation: none; } }