/* Croque-Monstres / Word Munchers — styles partagés FR + EN */
* { box-sizing: border-box; }
body {
  font-family: 'Comic Sans MS', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(180deg, #1a1a40 0%, #4a2a6a 100%);
  color: #fff; margin: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 10px; overflow-x: hidden;
}
h1 { font-size: 1.4rem; margin: 8px 0; }
#screenHome, #screenGame, #screenWin, #screenCollection, #screenParents, #screenTickets { width: 100%; max-width: 560px; }
/* Pochette à tickets */
.ticketItem {
  background: #ffd600; color: #222; border-radius: 14px; padding: 12px;
  margin: 8px auto; max-width: 360px; border: 3px dashed #b28900;
  font-weight: bold; display: flex; align-items: center; gap: 8px;
}
.ticketItem.blue { background: #40c4ff; border-color: #0091ea; }
.ticketItem.green { background: #b2ff59; border-color: #76ff03; }
.ticketItem.pink { background: #ff80ab; border-color: #f50057; }
.ticketItem.jack {
  background: linear-gradient(135deg, #ffd700 0%, #fff5b3 50%, #ffd700 100%);
  background-size: 200% auto;
  animation: shine 3s linear infinite;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  border-color: #ccac00;
}
@keyframes shine {
  to { background-position: 200% center; }
}
.ticketItem.used { background: #777; color: #ddd; border-color: #555; opacity: .6; font-weight: normal; }
.ticketItem .tLabel { flex: 1; text-align: left; }
.ticketItem .tDate { font-size: .75rem; opacity: .75; font-weight: normal; }
.ticketItem button { margin: 0; padding: 8px 10px; font-size: .9rem; }
button {
  font-family: inherit; font-size: 1.15rem; border: none; border-radius: 16px;
  padding: 14px 22px; margin: 6px; cursor: pointer; color: #fff;
  background: #7c4dff; box-shadow: 0 4px 0 #5635b2; transition: transform .08s;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #5635b2; }
button.big { font-size: 1.5rem; padding: 18px 34px; background: #00c853; box-shadow: 0 5px 0 #00913d; }
button.ghost { background: rgba(255,255,255,.15); box-shadow: 0 3px 0 rgba(0,0,0,.3); font-size: 1rem; }
.levels { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.levels button { width: 90%; }
.levels button.selected { outline: 4px solid #ffd600; }

/* Monster */
#monster { font-size: 7rem; margin: 6px 0; display: inline-block; transition: transform .1s; }
/* Panique en fin de combat — déclarée AVANT .hit/.giggle pour qu'un
   coup ou un rire reprenne la main quand les deux classes sont là. */
#monster.panic { animation: panicShake .35s infinite; }
@keyframes panicShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  75% { transform: translateX(4px) rotate(3deg); }
}
#monster.hit { animation: hit .45s; }
#monster.giggle { animation: giggle .5s; }
@keyframes hit {
  0% { transform: scale(1) rotate(0); filter: none; }
  30% { transform: scale(.8) rotate(-12deg) translateX(-12px); filter: brightness(2); }
  60% { transform: scale(1.05) rotate(8deg) translateX(8px); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes giggle {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
#monsterName { font-size: 1.1rem; opacity: .9; margin-bottom: 4px; }
.hpWrap { width: 80%; max-width: 380px; background: rgba(0,0,0,.45); border-radius: 12px; margin: 0 auto 10px; padding: 4px; }
#hpBar { height: 20px; border-radius: 8px; background: linear-gradient(90deg, #ff5252, #ff8a80); width: 100%; transition: width .4s; }

/* Word card */
#wordCard {
  background: #fff; color: #222; border-radius: 22px; padding: 26px 16px;
  font-size: 3rem; font-weight: bold; letter-spacing: .06em; line-height: 1.25;
  margin: 8px auto; min-height: 110px; max-width: 96%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#wordCard.sentence { font-size: 1.9rem; letter-spacing: .02em; }
#wordCard.ok { background: #b9f6ca; }
#wordCard span.read { color: #00913d; text-decoration: underline; }
#micLine { font-size: .95rem; opacity: .85; min-height: 1.3em; }
/* Témoin micro : vert = je t'écoute, rouge = micro coupé (TTS, redémarrage) */
#micDot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #ff5252; margin-right: 7px; vertical-align: middle; transition: background .2s; }
#micDot.on { background: #00e676; box-shadow: 0 0 8px #00e676; }
/* Sons complexes colorés (niveau 2), comme à l'école */
#wordCard .son { color: #d81b60; }
#damage {
  position: fixed; font-size: 3rem; font-weight: bold; color: #ffd600;
  pointer-events: none; opacity: 0; left: 50%; top: 30%;
  text-shadow: 2px 2px 0 #000;
}
#damage.show { animation: dmg .8s; }
@keyframes dmg {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  25% { opacity: 1; transform: translate(-50%, -30px) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}

/* Win screen */
#screenWin h2 { font-size: 2rem; margin: 10px 0; }
.bigMonster { font-size: 8rem; display: inline-block; }
.defeat-spin { animation: defeatSpin 1.6s ease-in-out; }
@keyframes defeatSpin {
  0% { transform: rotate(0) scale(1); }
  60% { transform: rotate(720deg) scale(.15); }
  100% { transform: rotate(720deg) scale(1) rotate(180deg); }
}
.defeat-fly { animation: defeatFly 1.8s ease-in; }
@keyframes defeatFly {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(10px) rotate(-15deg); }
  100% { transform: translateY(-60vh) rotate(45deg); }
}
.defeat-flip { animation: defeatFlip 1.5s ease-in-out; }
@keyframes defeatFlip {
  0% { transform: rotateY(0) ; }
  70% { transform: rotateY(900deg) scale(.6); }
  100% { transform: rotateY(1080deg) scale(1) rotate(180deg); }
}
.goldCard { background: linear-gradient(135deg, #ffd600, #ff9100) !important; color: #4a2a00; box-shadow: 0 0 18px #ffd600; }

/* ===== Événement rare : cérémonie jackpot ===== */
#cinemaOverlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #4a2a6a 0%, #0d0d2b 70%);
  animation: cinemaGlow 1.2s ease-in-out infinite alternate;
  text-align: center; overflow: hidden;
}
@keyframes cinemaGlow {
  from { background: radial-gradient(circle at 35% 30%, #6a3a9a 0%, #0d0d2b 70%); }
  to   { background: radial-gradient(circle at 65% 30%, #2a6a8a 0%, #0d0d2b 70%); }
}
.cinemaTicket { font-size: 9rem; animation: ticketEntrance 2.4s ease-out, ticketFloat 2s 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 30px #ffd600); }
@keyframes ticketEntrance {
  0% { transform: scale(0) rotate(-720deg); opacity: 0; }
  60% { transform: scale(1.6) rotate(20deg); opacity: 1; }
  80% { transform: scale(.9) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes ticketFloat { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-16px) rotate(4deg); } }
.cinemaTitle {
  font-size: 2.4rem; margin: 10px 0 4px; color: #ffd600;
  text-shadow: 0 0 18px #ff9100, 2px 2px 0 #000;
  animation: titlePulse .7s ease-in-out infinite alternate;
}
@keyframes titlePulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.cinemaSub { font-size: 1.3rem; opacity: .95; }
.ticket {
  background: #ffd600; color: #222; font-weight: bold; border-radius: 14px;
  padding: 14px; margin: 12px auto; max-width: 340px; font-size: 1.2rem;
  border: 3px dashed #b28900;
}
.ticket.blue { background: #40c4ff; border-color: #0091ea; }
.ticket.green { background: #b2ff59; border-color: #76ff03; }
.ticket.pink { background: #ff80ab; border-color: #f50057; }
.ticket.orange { background: #ffab40; border-color: #f57c00; }
.ticket.purple { background: #ea80fc; border-color: #aa00ff; }
.ticket.cyan { background: #64ffda; border-color: #00bfa5; }
.ticket.peach { background: #ffd180; border-color: #ffab00; }
.ticket.jack {
  background: linear-gradient(135deg, #ffd700 0%, #fff5b3 50%, #ffd700 100%);
  background-size: 200% auto;
  animation: shine 3s linear infinite;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  border-color: #ccac00;
}
/* Collection + streak */
.grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0; }
.grid .slot { background: rgba(255,255,255,.12); border-radius: 14px; padding: 10px; font-size: 2.4rem; min-width: 70px; }
.grid .slot small { display: block; font-size: .65rem; opacity: .8; }
#streakLine { font-size: 1.1rem; margin: 6px; }
.confetti { position: fixed; top: -20px; font-size: 1.6rem; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.hidden { display: none !important; }
e !important; }