/* ===== Design system — Les jeux de Lisael ===== */

/* --- Police Fredoka vendorée (OFL) --- */
@font-face {
  font-family: "Fredoka";
  src: url("../assets/fonts/fredoka.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  /* Palette */
  --c-sky:    #7cc6fe;
  --c-grape:  #a78bfa;
  --c-bubble: #ff8fcf;
  --c-sun:    #ffd56b;
  --c-mint:   #7ef0c0;
  --c-coral:  #ff9a76;
  --c-ink:    #3a2f5b;
  --c-cloud:  #fff;

  /* Fond global */
  --grad-app: radial-gradient(120% 120% at 50% 0%, #fff6fb 0%, #eaf4ff 45%, #e7e9ff 100%);

  /* Formes & profondeur */
  --r-lg:   28px;
  --r-md:   18px;
  --tap:    92px;

  --sh-soft: 0 10px 30px rgba(90,70,160,.18);
  --sh-pop:  0 16px 40px rgba(90,70,160,.28);

  /* Alias legacy utilisé par les jeux */
  --shadow:  var(--sh-soft);

  /* Typo */
  --font: "Fredoka", "Baloo 2", ui-rounded, "Trebuchet MS", system-ui, sans-serif;

  /* Couleurs sémantiques (jeux) */
  --c-accent:  var(--c-bubble);
  --c-accent2: var(--c-sky);
  --c-ok:      var(--c-mint);
  --c-text:    var(--c-ink);

  /* Legacy aliases */
  --radius: var(--r-lg);
}

/* ===== Reset ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--grad-app);
  color: var(--c-ink);
  font-family: var(--font);
  touch-action: manipulation;
  user-select: none;
}

/* ===== Écrans ===== */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 16px 0;
}
.screen.active { display: flex; }

/* ===== Boutons géants (springy) ===== */
.btn {
  min-width: var(--tap);
  min-height: var(--tap);
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-lg);
  padding: 18px 32px;
  color: #fff;
  background: var(--c-grape);
  box-shadow: var(--sh-soft);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1),
              box-shadow .15s ease;
  touch-action: manipulation;
}
.btn:hover {
  box-shadow: var(--sh-pop);
  transform: scale(1.03);
}
.btn:active {
  transform: scale(.94);
  box-shadow: 0 4px 12px rgba(90,70,160,.18);
}

.btn--round {
  border-radius: 50%;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  font-size: 2rem;
}

/* ===== Topbar commune aux jeux ===== */
/* Le 🏠 (et 🔊) doivent rester atteignables dans TOUS les jeux, même ceux
   en plein écran (Respiration, Coin calme, Vide ta colère) dont le contenu
   couvre tout l'écran. On garantit donc un empilement très au-dessus du
   #game-host et de tout overlay de jeu, et des boutons toujours cliquables. */
.topbar {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  z-index: 1000;            /* bien au-dessus du contenu des jeux */
  pointer-events: none;     /* la barre laisse passer les clics… */
}
.topbar .btn {
  pointer-events: auto;     /* …mais les boutons restent cliquables */
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-ink);
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: var(--sh-soft);
}
.topbar .btn:hover {
  background: rgba(255,255,255,.92);
}

/* ===== Container de jeu plein écran ===== */
/* z-index explicite < topbar : aucun jeu ne peut recouvrir le 🏠. */
.game-host {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Décalage topbar */
.game-host > * { max-height: calc(100vh - 80px); }

/* ===== Responsive landscape / tablet ===== */
@media (max-height: 500px) {
  .game-host > * { max-height: calc(100vh - 60px); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover  { transform: none; }
  .btn:active { transform: scale(.97); }
}