/* ══════════════════════════════════════════════════════════════
   Kbbexpress — DA « Billet Sanrio »
   Le langage graphique d'Hello Kitty (blanc, encre épaisse, rouge
   nœud, pointe de jaune nez) × l'objet billet de train.
   Fond drenché rouge ; surfaces = tickets blancs à contour encre
   et ombre franche façon sticker die-cut ; typo unique Baloo 2.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --rouge: #e8344e;          /* le rouge du nœud — LE fond */
  --rouge-p: #c9243c;        /* rouge pressé / ombres sur rouge */
  --blanc: #ffffff;
  --encre: #1b1b20;          /* contours épais + texte */
  --jaune: #f5c518;          /* le nez — par touches uniquement */
  --papier: #fff1ee;         /* puits intérieurs, teinté vers le rouge */
  --ligne: #efdcd8;          /* filets discrets sur blanc */
  --vert-ok: #2f9e58;
  --contour: 2.5px solid var(--encre);
  --ombre: 0 4px 0 rgba(27, 27, 32, .30);
  --radius: 18px;
  /* alias hérités (modules) */
  --rose: var(--rouge);
  --rose-fonce: var(--rouge-p);
  --rose-pale: var(--papier);
  --creme: var(--blanc);
  --brun: #6b6560;
  --brun-clair: #a8a29c;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}
input::placeholder { color: #6b6560; opacity: 1; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  touch-action: pan-x pan-y; /* pas de pinch-zoom ni double-tap zoom */
}

body {
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  background: var(--rouge);
  color: var(--encre);
  user-select: none;
}

#app { display: flex; flex-direction: column; height: 100dvh; }

.hidden { display: none !important; }

/* ── Topbar : à même le rouge ── */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 10px;
  background: transparent;
  color: var(--blanc);
  z-index: 5;
}
.topbar-title {
  font-weight: 800; font-size: 1.15rem; letter-spacing: .3px;
  text-shadow: 0 2px 0 rgba(27, 27, 32, .18);
}
.topbar-title .star { color: var(--jaune); text-shadow: none; }
.chip {
  border: var(--contour); border-radius: 999px;
  background: var(--blanc); color: var(--encre);
  font-family: inherit; font-weight: 700; font-size: .95rem;
  padding: 8px 16px; min-height: 44px; box-shadow: var(--ombre);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(27, 27, 32, .30); }

/* ── Screens ── */
.screen {
  flex: 1; overflow-y: auto;
  padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  animation: screen-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
/* les enfants d'une colonne flex scrollable ne doivent JAMAIS se compresser
   (overflow:hidden met leur min-height auto à 0 → contenus rognés) */
.screen > *, .modal > * { flex-shrink: 0; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.screen-center { justify-content: center; text-align: center; }

h1.titre {
  font-size: 2.3rem; font-weight: 800; color: var(--blanc);
  letter-spacing: -.01em; line-height: 1.1;
  text-shadow: 0 3px 0 rgba(27, 27, 32, .18);
  text-wrap: balance;
}
.sous-titre { font-size: 1rem; color: rgba(255, 255, 255, .92); font-weight: 600; }

/* ── Kitty d'accueil ── */
.kitty-hero {
  width: 168px; max-width: 48vw;
  filter: drop-shadow(0 6px 0 rgba(27, 27, 32, .22));
  animation: kitty-pop .5s cubic-bezier(.22, 1.35, .36, 1) both;
}
@keyframes kitty-pop {
  from { opacity: 0; transform: scale(.55) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── Cartes-tickets ── */
.card {
  width: 100%; max-width: 480px;
  background: var(--blanc);
  border: var(--contour);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 18px;
  line-height: 1.5;
}
.card.rose { background: var(--blanc); }

/* ── Boutons stickers ── */
.btn {
  border: var(--contour); border-radius: 999px;
  font-family: inherit; font-weight: 800; font-size: 1.08rem;
  padding: 14px 28px;
  background: var(--encre); color: var(--blanc);
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(27, 27, 32, .3); }
.btn.secondaire { background: var(--blanc); color: var(--encre); }
.btn.large { width: 100%; max-width: 480px; }
.btn.mini { font-size: .88rem; padding: 8px 16px; min-height: 44px; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ── Guide (bulle du Shérif) ── */
.guide { display: flex; gap: 10px; align-items: flex-end; width: 100%; max-width: 480px; }
.guide-avatar {
  width: 60px; height: 60px; flex: 0 0 60px;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  overflow: hidden;
}
.guide-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.guide-bulle {
  position: relative;
  background: var(--blanc);
  border: var(--contour);
  border-radius: 18px 18px 18px 4px;
  box-shadow: var(--ombre);
  padding: 12px 15px;
  font-size: .98rem; font-weight: 500;
  line-height: 1.45;
}

/* ── Le ticket (coupon) ── */
.ticket {
  --punch: var(--rouge);
  width: 100%; max-width: 420px;
  background: var(--blanc);
  border: var(--contour);
  border-radius: 14px;
  padding: 30px 16px 14px;
  text-align: center;
  position: relative;
  box-shadow: var(--ombre);
  overflow: hidden;
}
.ticket::before {
  content: "KBBEXPRESS · BILLET À CONSERVER";
  position: absolute; top: 0; left: 0; right: 0;
  padding: 4px 0 3px;
  background: var(--rouge); color: var(--blanc);
  font-size: .58rem; font-weight: 800; letter-spacing: 2.5px;
  border-bottom: 2px dashed rgba(255, 255, 255, .55);
}
.ticket .emoji { font-size: 2.3rem; margin-top: 4px; }
.ticket .ticket-titre { font-weight: 800; font-size: 1.15rem; color: var(--rouge); }
.ticket .ticket-sub {
  font-size: .68rem; font-weight: 700; color: var(--brun);
  letter-spacing: 1.6px; text-transform: uppercase; margin-top: 3px;
}

/* ── Modals ── */
.modal-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(27, 27, 32, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in .16s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 440px;
  background: var(--blanc);
  border: var(--contour);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(27, 27, 32, .35);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  text-align: center;
  animation: pop-in .26s cubic-bezier(.22, 1.35, .36, 1) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.88) rotate(-1deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.modal h2 { font-weight: 800; }
.modal .ticket { --punch: var(--blanc); }

/* ── Toasts ── */
#toasts {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--encre); color: var(--blanc);
  border: 2px solid var(--blanc);
  border-radius: 999px; padding: 10px 18px;
  font-size: .92rem; font-weight: 600; max-width: 88vw;
  box-shadow: 0 4px 0 rgba(27, 27, 32, .35);
  animation: toast-in .25s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Inputs ── */
.champ {
  width: 100%;
  border: var(--contour);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit; font-size: 1.02rem; font-weight: 500;
  background: var(--blanc); color: var(--encre);
  outline: none;
}
.champ:focus { box-shadow: 0 0 0 3px var(--jaune); }

/* ── Progression : la ligne de chemin de fer ── */
.progress-etoiles {
  position: relative;
  display: flex; gap: 26px; align-items: center;
  padding: 6px 4px;
}
.progress-etoiles::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  border-top: 3px dashed rgba(255, 255, 255, .55);
  transform: translateY(-50%);
}
.progress-etoiles span {
  position: relative; z-index: 1;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rouge);
  border: 2.5px solid var(--blanc);
  font-size: 0; display: block;
  transition: transform .2s ease, background .2s ease;
}
.progress-etoiles span.done { background: var(--blanc); }
.progress-etoiles span.cur {
  background: var(--jaune); border-color: var(--encre);
  transform: scale(1.45);
  animation: gare-pulse 1.6s ease-in-out infinite;
}
@keyframes gare-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .55); }
  55%      { box-shadow: 0 0 0 7px rgba(245, 197, 24, 0); }
}

/* ── Confetti ── */
.confetti {
  position: fixed; z-index: 60; top: -20px;
  font-size: 1.3rem; pointer-events: none;
  animation: confetti-fall linear both;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(360deg); opacity: .8; }
}

/* ── Utilitaires jeux ── */
.jeu-header {
  width: 100%; max-width: 480px;
  display: flex; justify-content: space-between; align-items: center;
}
.jeu-titre {
  font-weight: 800; font-size: 1.25rem; color: var(--blanc);
  text-shadow: 0 2px 0 rgba(27, 27, 32, .18);
}
.lien-skip {
  border: none; background: rgba(27, 27, 32, .32);
  border-radius: 999px;
  font-family: inherit; font-weight: 700;
  color: var(--blanc); font-size: .85rem; text-decoration: underline;
  cursor: pointer; padding: 10px 16px; min-height: 44px;
}
canvas.jeu-canvas {
  width: 100%; max-width: 480px;
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  background: var(--blanc);
  touch-action: none;
}

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  .screen, .modal, .toast, .kitty-hero { animation-duration: .01s !important; }
  .progress-etoiles span.cur { animation: none; }
  .confetti { display: none; }
  .btn, .chip { transition: none; }
}