:root {
  --dialog-bg: #fffdf2;
  --dialog-border: #2a2a2a;
  --accent: #f04a4a;
  --accent-dark: #b02a2a;
  --gold: #f5c542;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif;
  background: #000;
  color: #222;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Bulle de dialogue personnages ─────────────────────────────── */
#char-bubble {
  position: absolute; /* dans #map-container : suit le scroll de la carte */
  z-index: 8500;
  pointer-events: none;
  transform-origin: center bottom;
  /* Pas de filter ici — filter sur un position:fixed casse le comportement
     viewport dans certains navigateurs (le rend relatif à son parent GPU). */
  animation: bubble-pop 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bubble-pop {
  from { transform: translateX(-50%) translateY(-100%) scale(0.4); opacity: 0; }
  to   { transform: translateX(-50%) translateY(-100%) scale(1);   opacity: 1; }
}
.char-bubble-text {
  background: #fffdf2;
  border: 3px solid #2a2a2a;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.45;
  max-width: 200px;
  text-align: center;
  white-space: pre-wrap;
  font-style: normal;
  /* Ombre sur l'enfant, pas sur le conteneur fixed */
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.char-bubble-text.thought {
  font-style: italic;
  color: #555;
}
.char-bubble-arrow {
  width: 0; height: 0;
  margin: 0 auto;
  border-left:  10px solid transparent;
  border-right: 10px solid transparent;
  border-top:   10px solid #2a2a2a;
  position: relative;
}
.char-bubble-arrow::after {
  content: '';
  position: absolute;
  top: -13px; left: -8px;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid #fffdf2;
}
/* ── Curseur pointer sur personnages cliquables (SVG) ───────────── */
.char-clickable { cursor: pointer; }

#game {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ===== MAP ===== */
#map-container {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #1a1a1a;
  -webkit-overflow-scrolling: touch;
}

#map {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero character positioned over the map */
#hero {
  position: absolute;
  width: 42px;
  height: 58px;
  transform: translate(-50%, -88%);
  transition: left 0.6s ease-in-out, top 0.6s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

.hero-sprite {
  position: relative;
  width: 100%;
  height: 100%;
  animation: bob 1.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.hero-shadow {
  position: absolute;
  bottom: 0; left: 50%;
  width: 30px; height: 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(1.5px);
  z-index: 0;
}

/* Long shoulder-length black hair, behind the head */
.hero-back-hair {
  position: absolute;
  top: 2px; left: 50%;
  width: 30px;
  height: 34px;
  background: #1a1410;
  border-radius: 16px 16px 10px 10px / 18px 18px 6px 6px;
  transform: translateX(-50%);
  border: 2px solid #000;
  z-index: 1;
  box-shadow: inset -2px -1px 0 rgba(255,255,255,0.06);
}
/* hair tips slightly flicked outward */
.hero-back-hair::before,
.hero-back-hair::after {
  content: '';
  position: absolute;
  bottom: -2px;
  width: 8px; height: 10px;
  background: #1a1410;
  border: 2px solid #000;
  border-top: none;
}
.hero-back-hair::before {
  left: -3px;
  border-radius: 0 0 0 8px;
  transform: rotate(-8deg);
}
.hero-back-hair::after {
  right: -3px;
  border-radius: 0 0 8px 0;
  transform: rotate(8deg);
}

.hero-head {
  position: absolute;
  top: 8px; left: 50%;
  width: 20px; height: 22px;
  background: #f7d8b8;
  border-radius: 10px 10px 9px 9px;
  transform: translateX(-50%);
  border: 2px solid #2a2a2a;
  z-index: 2;
}
/* simple eyes */
.hero-head::before {
  content: '';
  position: absolute;
  top: 9px; left: 4px;
  width: 3px; height: 3px;
  background: #1a1410;
  border-radius: 50%;
  box-shadow: 7px 0 0 #1a1410;
}
/* subtle smile */
.hero-head::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  width: 5px; height: 2px;
  border-bottom: 1.5px solid #8a3a2a;
  border-radius: 0 0 4px 4px;
  transform: translateX(-50%);
}

/* Asymmetric fringe / bangs sweeping right */
.hero-bangs {
  position: absolute;
  top: 6px; left: 50%;
  width: 22px; height: 10px;
  transform: translateX(-50%);
  z-index: 3;
}
.hero-bangs::before {
  content: '';
  position: absolute;
  top: 0; left: -1px;
  width: 16px; height: 9px;
  background: #1a1410;
  border: 2px solid #000;
  border-radius: 9px 12px 4px 8px;
  transform: rotate(-6deg);
}
.hero-bangs::after {
  content: '';
  position: absolute;
  top: 1px; right: -1px;
  width: 9px; height: 8px;
  background: #1a1410;
  border: 2px solid #000;
  border-radius: 4px 9px 8px 3px;
  transform: rotate(8deg);
}

.hero-body {
  position: absolute;
  top: 28px; left: 50%;
  width: 24px; height: 22px;
  background: #fafafa;
  border: 2px solid #2a2a2a;
  border-radius: 9px 9px 7px 7px;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.08);
}
/* small collar hint */
.hero-body::before {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  width: 8px; height: 4px;
  background: #f7d8b8;
  border: 2px solid #2a2a2a;
  border-top: none;
  border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
}
/* skirt / lower garment */
.hero-body::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -10px;
  width: 22px; height: 10px;
  background: var(--accent);
  border: 2px solid #2a2a2a;
  border-top: none;
  border-radius: 0 0 8px 8px;
  transform: translateX(-50%);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

/* ===== Map nodes ===== */
.node circle.dot {
  fill: #fff;
  stroke: #2a2a2a;
  stroke-width: 3;
  transition: fill 0.2s;
}

.node.completed circle.dot {
  fill: var(--gold);
}

.node.current circle.dot {
  fill: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

.node.boss circle.dot {
  r: 14;
  stroke-width: 4;
}

.node.mini circle.dot {
  fill: #4ac4f0;
  stroke: #1670a0;
  stroke-width: 3;
}

.node.mini.current circle.dot { fill: var(--accent); }
.node.mini.completed circle.dot { fill: var(--gold); }

.node text.mini-mark {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  fill: #fff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3;
  stroke-linejoin: round;
  font-weight: bold;
}

.node.locked circle.dot {
  fill: #d0d0d0;
}

.node text.label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  fill: #fff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3;
  stroke-linejoin: round;
}

.node text.boss-star {
  font-size: 12px;
  text-anchor: middle;
  fill: #fff;
}

@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(240,74,74,0.6)); }
  50% { filter: drop-shadow(0 0 8px rgba(240,74,74,0.9)); }
}

.path-line {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  opacity: 0.85;
}

.zone-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  fill: #fff;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 4;
  stroke-linejoin: round;
}

/* ===== Play button ===== */
#play-btn {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 16px 36px;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: #fff;
  background: var(--accent);
  border: 4px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--accent-dark), 0 8px 20px rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 10;
  animation: appear 0.4s ease-out, btn-bob 1.8s ease-in-out 0.5s infinite;
}

#play-btn:active {
  transform: translateX(-50%) translateY(4px);
  box-shadow: 0 2px 0 var(--accent-dark), 0 4px 10px rgba(0,0,0,0.4);
}

@keyframes appear {
  from { opacity: 0; transform: translateX(-50%) scale(0.6); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes btn-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* ===== Zone banner ===== */
#zone-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  text-align: center;
  padding: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
  z-index: 8;
  pointer-events: none;
}

#zone-banner-text {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  animation: banner 3s ease forwards;
}

@keyframes banner {
  0% { opacity: 0; transform: translateY(-20px); }
  15%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ===== Dialog ===== */
#dialog {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  z-index: 20;
  cursor: pointer;
}

.dialog-box {
  position: relative;
  background: var(--dialog-bg);
  border: 4px solid var(--dialog-border);
  border-radius: 12px;
  padding: 20px 22px;
  min-height: 110px;
  font-size: 17px;
  line-height: 1.45;
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--dialog-bg) inset, 0 8px 24px rgba(0,0,0,0.5);
  animation: slide-up 0.35s ease-out;
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#dialog-text {
  margin: 0;
  white-space: pre-wrap;
}

#dialog-text .caret {
  display: inline-block;
  width: 8px;
  background: currentColor;
  animation: blink 0.8s steps(2) infinite;
  margin-left: 1px;
}

@keyframes blink {
  50% { opacity: 0; }
}

.dialog-arrow {
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: var(--accent);
  font-size: 14px;
  animation: arrow-bob 0.8s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.2s;
}

.dialog-box.ready .dialog-arrow {
  opacity: 1;
}

@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ===== Quiz ===== */
#quiz {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #1b2a4a 0%, #0e1830 100%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  color: #fff;
  animation: quiz-in 0.35s ease-out;
}

@keyframes quiz-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.quiz-top {
  padding: 14px 18px 10px;
}

.quiz-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.quiz-lives {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 8px;
  line-height: 1;
}

.timer-bar {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
}

.timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6cf07a, #f5c542);
  transition: width 0.1s linear, background 0.3s;
  border-radius: 6px;
}

.timer-fill.warn { background: linear-gradient(90deg, #f5c542, #ff7a3a); }
.timer-fill.danger { background: linear-gradient(90deg, #ff7a3a, #ff3a3a); animation: timer-flash 0.5s ease-in-out infinite; }

@keyframes timer-flash {
  50% { opacity: 0.6; }
}

.quiz-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px 24px;
  gap: 18px;
  overflow-y: auto;
}

.quiz-card {
  background: var(--dialog-bg);
  color: #1a1a1a;
  border: 4px solid var(--dialog-border);
  border-radius: 14px;
  padding: 22px 20px;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#quiz-question { margin: 0; }

#quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slingshot-btn {
  display: block;
  margin: 0 auto;
  padding: 8px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: var(--gold);
  color: #2a2a2a;
  border: 3px solid #2a2a2a;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #888;
  letter-spacing: 0.5px;
  transition: transform 0.1s, box-shadow 0.1s;
}

.slingshot-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #888;
}

.choice-btn {
  width: 100%;
  padding: 16px 14px;
  background: #fff;
  color: #1a1a1a;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 #2a2a2a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.choice-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2a2a2a;
}

.choice-btn[disabled] {
  cursor: default;
  opacity: 0.85;
}

.choice-btn.correct {
  background: #6cf07a;
  border-color: #2a8a3a;
  color: #0a3a10;
  animation: shake-good 0.5s ease;
}

.choice-btn.wrong {
  background: #ff7a7a;
  border-color: #a02020;
  color: #4a0a0a;
  animation: shake-bad 0.5s ease;
}

.choice-btn.reveal {
  background: #6cf07a;
  border-color: #2a8a3a;
  color: #0a3a10;
}

@keyframes shake-good {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) scale(1.02); }
  75% { transform: translateX(4px) scale(1.02); }
}
@keyframes shake-bad {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Feedback overlay (✓ / ✗) */
.quiz-feedback {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 40;
  font-size: 160px;
  font-weight: 900;
  animation: fb 1s ease forwards;
}

.quiz-feedback.good { color: #6cf07a; text-shadow: 0 0 30px rgba(108,240,122,0.6); }
.quiz-feedback.bad  { color: #ff5a5a; text-shadow: 0 0 30px rgba(255,90,90,0.6); }

@keyframes fb {
  0% { opacity: 0; transform: scale(0.4); }
  20% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ===== Recap ===== */
#recap {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: quiz-in 0.3s ease;
}

.recap-box {
  background: var(--dialog-bg);
  border: 4px solid var(--dialog-border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.recap-box h2 {
  margin: 0 0 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: #1a1a1a;
}

.recap-box.win h2 { color: #2a8a3a; }
.recap-box.lose h2 { color: #a02020; }

.recap-box p {
  margin: 8px 0;
  font-size: 17px;
  font-weight: 700;
  color: #2a2a2a;
}

#recap-score {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  margin: 16px 0;
  color: var(--accent);
}

.recap-coins {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  margin: 10px 0 4px;
  letter-spacing: 0.5px;
}

#recap-btn {
  margin-top: 18px;
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: #fff;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--accent-dark);
}

#recap-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--accent-dark);
}

/* ===== Boss mode ===== */

/* Animated epic background — applied to #quiz in boss mode */
#quiz.boss-mode {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 80, 80, 0.35), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 80, 255, 0.35), transparent 50%),
    linear-gradient(180deg, #2a0030 0%, #0a0020 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: boss-bg 8s ease-in-out infinite;
  position: fixed;
  overflow: hidden;
}

@keyframes boss-bg {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%      { background-position: 100% 100%, 0% 0%, 0 0; }
}

#quiz.boss-mode::before,
#quiz.boss-mode::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Flash lightning */
#quiz.boss-mode::before {
  background: rgba(255, 255, 255, 0);
  animation: lightning 6s ease-in-out infinite;
}

@keyframes lightning {
  0%, 92%, 100% { background: rgba(255, 255, 255, 0); }
  93%, 95%      { background: rgba(255, 255, 255, 0.35); }
  94%           { background: rgba(255, 255, 255, 0); }
}

/* Drifting stars */
#quiz.boss-mode::after {
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 50%, #fff, transparent),
    radial-gradient(2px 2px at 40% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 15%, #fff, transparent),
    radial-gradient(2px 2px at 10% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, #fff, transparent);
  opacity: 0.6;
  animation: stars-drift 30s linear infinite;
}

@keyframes stars-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}

#quiz.boss-mode .quiz-top,
#quiz.boss-mode .quiz-body,
#quiz.boss-mode .quiz-feedback {
  position: relative;
  z-index: 1;
}

/* Versus bar */
.versus-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 4px;
  font-family: 'Press Start 2P', monospace;
}

.versus-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.versus-side.right { align-items: flex-end; }

.versus-name {
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.versus-score {
  font-size: 24px;
  color: #6cf07a;
  text-shadow: 2px 2px 0 #000;
  transition: transform 0.25s ease;
}

.versus-score.boss { color: #ff7a7a; }

.versus-score.bump {
  animation: score-bump 0.5s ease;
}

@keyframes score-bump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}

.versus-vs {
  font-size: 14px;
  color: #f5c542;
  text-shadow: 1px 1px 0 #000;
  padding: 0 8px;
}

/* Boss answer badge on a choice button */
.choice-btn.boss-pick {
  position: relative;
}

.choice-btn.boss-pick::after {
  content: attr(data-boss-label);
  position: absolute;
  top: -8px;
  right: 8px;
  background: #6a3aa8;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border: 2px solid #2a0a4a;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 #2a0a4a;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-btn.boss-pick {
  border-color: #6a3aa8;
  box-shadow: 0 4px 0 #6a3aa8;
}

/* When the boss picked the correct answer, blend both */
.choice-btn.correct.boss-pick,
.choice-btn.reveal.boss-pick {
  background: linear-gradient(135deg, #6cf07a 0%, #6cf07a 60%, #b89af5 60%, #b89af5 100%);
}

/* ===== Boss intro overlay ===== */
#boss-intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.boss-intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 80, 80, 0.4), transparent 60%),
    linear-gradient(180deg, #1a0020 0%, #000 100%);
  animation: boss-bg 8s ease-in-out infinite, intro-zoom 1.2s ease-out;
}

@keyframes intro-zoom {
  from { transform: scale(1.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.boss-intro-content {
  position: relative;
  z-index: 1;
  padding: 30px;
  max-width: 380px;
  width: 100%;
}

.boss-avatar-big {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  background: linear-gradient(160deg, #fff, #d0d0d0);
  border: 5px solid #2a2a2a;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), 0 12px 40px rgba(0, 0, 0, 0.6);
  animation: avatar-pop 0.8s ease-out 0.3s backwards, avatar-bob 2.5s ease-in-out 1s infinite;
}

@keyframes avatar-pop {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes avatar-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.boss-name-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  animation: slide-down 0.6s ease-out 0.6s backwards;
}

@keyframes slide-down {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

#boss-intro-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: #f5c542;
  text-shadow: 3px 3px 0 #000;
}

.boss-relation {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #ddd;
  text-shadow: 2px 2px 0 #000;
}

.boss-intro-dialog {
  font-size: 17px;
  font-weight: 700;
  background: var(--dialog-bg);
  color: #1a1a1a;
  border: 4px solid var(--dialog-border);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 80px;
  margin-bottom: 22px;
  animation: slide-up 0.5s ease-out 0.9s backwards;
}

#boss-intro-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  padding: 16px 24px;
  color: #fff;
  background: var(--accent);
  border: 4px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--accent-dark);
  cursor: pointer;
  animation: slide-up 0.5s ease-out 1.2s backwards;
}

#boss-intro-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--accent-dark);
}

/* Recap special — boss */
.recap-box.boss-recap h2 { color: #6a3aa8; }

.recap-versus {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 14px 0;
  font-family: 'Press Start 2P', monospace;
}
.recap-versus .rv-side { display: flex; flex-direction: column; gap: 4px; }
.recap-versus .rv-name { font-size: 10px; color: #555; }
.recap-versus .rv-score { font-size: 30px; }
.recap-versus .rv-score.celine { color: #2a8a3a; }
.recap-versus .rv-score.boss   { color: #a02020; }
.recap-versus .rv-vs { font-size: 14px; color: #f5c542; text-shadow: 1px 1px 0 #000; }

/* ===== Mini-jeu ===== */
#minigame {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #0e3a55 0%, #051a30 100%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  color: #fff;
  animation: quiz-in 0.35s ease-out;
}

.mg-top { padding: 14px 18px 10px; }

.mg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px 24px;
  gap: 18px;
}

.mg-input-row {
  display: flex;
  gap: 8px;
}

#mg-input {
  flex: 1;
  padding: 18px 16px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  background: #fff;
  color: #1a1a1a;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2a2a2a;
  outline: none;
  text-align: center;
}

#mg-input:focus {
  border-color: #6cf07a;
  box-shadow: 0 4px 0 #2a8a3a, 0 0 0 3px rgba(108, 240, 122, 0.3);
}

.mg-feedback {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  min-height: 40px;
  letter-spacing: 0.5px;
}

.mg-feedback.good {
  color: #6cf07a;
  text-shadow: 2px 2px 0 #000;
  animation: pop-fb 0.4s ease;
}

.mg-feedback.dup {
  color: #f5c542;
  text-shadow: 2px 2px 0 #000;
  animation: shake-fb 0.4s ease;
}

@keyframes pop-fb {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shake-fb {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Recap mini-jeu */
.recap-box.mg-recap h2 { color: #1670a0; }

.recap-missed {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  font-style: italic;
  text-align: left;
}

.recap-missed strong { color: #1a1a1a; font-style: normal; }

/* Larger phones */
@media (min-width: 500px) {
  #game { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
}

/* ===== Coin counter ===== */
#coin-counter {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 12;
  background: rgba(0,0,0,0.72);
  border: 3px solid var(--gold);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ===== Mute button ===== */
#mute-btn {
  position: fixed;
  top: 60px;
  left: 12px;
  z-index: 12;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  background: rgba(0,0,0,0.72);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

#mute-btn:active { opacity: 0.6; }

/* ===== Shop button ===== */
#shop-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 12;
  padding: 10px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fff;
  background: #2a7a3a;
  border: 3px solid #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 4px 0 #1a4a22, 0 6px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  letter-spacing: 0.5px;
}

#shop-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1a4a22;
}

/* ===== Shop modal ===== */
#shop-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  animation: quiz-in 0.25s ease;
}

.shop-box {
  background: var(--dialog-bg);
  border: 4px solid var(--dialog-border);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
}

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 3px solid #2a2a2a;
  background: linear-gradient(180deg, #1b2a4a 0%, #0e1830 100%);
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}

.shop-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
}

#shop-close {
  background: var(--accent);
  border: 2px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--accent-dark);
  flex-shrink: 0;
  padding: 0;
}

#shop-close:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-dark);
}

.shop-tabs {
  display: flex;
  background: #d4d4d4;
  border-bottom: 3px solid #2a2a2a;
  flex-shrink: 0;
}

.shop-tab {
  flex: 1;
  padding: 10px 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  background: transparent;
  border: none;
  border-right: 2px solid #2a2a2a;
  cursor: pointer;
  color: #777;
  line-height: 1.6;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s;
}

.shop-tab:last-child { border-right: none; }

.shop-tab.active {
  background: var(--dialog-bg);
  color: #1a1a1a;
  font-weight: bold;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
}

.shop-item {
  background: #fff;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 #2a2a2a;
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.shop-item:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a2a2a; }

.shop-item.selected {
  border-color: var(--gold);
  box-shadow: 0 4px 0 #9a7010, 0 0 0 3px rgba(245,197,66,0.35);
  background: #fffde8;
}

.shop-item.purchased {
  background: #eafaee;
  border-color: #2a8a3a;
  box-shadow: 0 4px 0 #1a5a22;
  opacity: 0.9;
  cursor: default;
}

.shop-item.locked {
  background: #f2f2f2;
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(40%);
}

.shop-item.locked:active { transform: none; box-shadow: 0 4px 0 #2a2a2a; }

.shop-item-icon {
  font-size: 34px;
  line-height: 1;
}

.pikachu-icon {
  width: 44px;
  height: 44px;
  background: #FFE400;
  border: 2px solid #CC8800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 0 #CC8800;
  flex-shrink: 0;
}

.shop-item-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #1a1a1a;
  line-height: 1.5;
  word-break: break-word;
  hyphens: auto;
}

.shop-item-price {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #9a7010;
  line-height: 1;
}

.shop-item.purchased .shop-item-price { color: #2a8a3a; }
.shop-item.locked .shop-item-price { color: #888; }

.shop-footer {
  padding: 10px 14px 14px;
  border-top: 3px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.shop-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #a02020;
  text-align: center;
  margin: 0;
  min-height: 20px;
  line-height: 1.6;
}

.shop-msg.good { color: #2a8a3a; }

.shop-item-desc {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #5a6a8a;
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 2px;
}

#shop-buy-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--accent-dark);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}

#shop-buy-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: 0 3px 0 #555;
  background: #888;
}

#shop-buy-btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--accent-dark);
}

/* ===== Comment modal ===== */
#comment-modal {
  position: fixed;
  inset: 0;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  padding: 20px;
  animation: quiz-in 0.2s ease;
}

.comment-box {
  background: var(--dialog-bg);
  border: 4px solid var(--dialog-border);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  animation: slide-up 0.3s ease-out;
}

.comment-result-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 3px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.comment-result-header.good    { background: linear-gradient(180deg, #2a8a3a, #1a6a2a); }
.comment-result-header.bad     { background: linear-gradient(180deg, #a02020, #6a1010); }
.comment-result-header.timeout { background: linear-gradient(180deg, #555, #333); }

#comment-result-icon {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}

#comment-result-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  line-height: 1.5;
}

.comment-boss-row {
  padding: 10px 14px 8px;
  background: rgba(106,58,168,0.08);
  border-bottom: 2px solid rgba(106,58,168,0.2);
  flex-shrink: 0;
}

.boss-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  margin-bottom: 6px;
}

.bc-you, .bc-boss {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
}

.bc-good { background: #6cf07a; color: #0a3a10; border: 2px solid #2a8a3a; }
.bc-bad  { background: #ff7a7a; color: #4a0a0a; border: 2px solid #a02020; }
.bc-vs   { color: var(--gold); text-shadow: 1px 1px 0 #000; font-size: 11px; }

.boss-question-result {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 2px 4px;
  line-height: 1.5;
}

.boss-question-result.win  { color: #2a8a3a; }
.boss-question-result.lose { color: #a02020; }
.boss-question-result.tie  { color: #9a7010; }

/* Rappel question + bonne réponse dans le modal de commentaire */
#comment-question-recall {
  padding: 10px 16px 10px;
  background: rgba(0,0,0,0.06);
  border-bottom: 2px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

#comment-recall-question {
  margin: 0 0 7px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  line-height: 1.4;
}

#comment-recall-answer {
  margin: 0;
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #1a5c28;
  background: rgba(42,138,58,0.13);
  border: 2px solid #2a8a3a;
  border-radius: 8px;
  padding: 5px 10px;
  line-height: 1.5;
}

.comment-text-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  min-height: 70px;
  -webkit-overflow-scrolling: touch;
}

#comment-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #1a1a1a;
  white-space: pre-wrap;
}

.comment-footer {
  padding: 12px 16px 14px;
  border-top: 3px solid #2a2a2a;
  flex-shrink: 0;
}

#comment-continue-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--accent-dark);
  cursor: pointer;
}

#comment-continue-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--accent-dark);
}

/* =============================================
   BOSS FIGHT — NEW SYSTEM
   ============================================= */

/* selected-locked : joueur a choisi, pas encore révélé */
.choice-btn.selected-locked {
  background: #1b2a4a;
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(245,197,66,0.35), 0 4px 0 #333;
}

/* Versus bar hearts mode */
#quiz.boss-mode .versus-score {
  font-size: 13px;
  letter-spacing: 2px;
}

/* ===== PASSWORD SCREEN ===== */
#boss-password {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.boss-pw-box {
  background: #111827;
  border: 4px solid var(--gold);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 0 40px rgba(245,197,66,0.25);
}

.boss-pw-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.boss-pw-avatar {
  font-size: 46px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, #d0d0d0);
  border: 3px solid var(--gold);
  overflow: hidden;
}

/* Photo de boss (PNG) affichée à la place de l'emoji, cadrée en rond */
.boss-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.boss-pw-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  margin: 0;
}

.boss-pw-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #9ca3af;
  text-align: center;
  margin: 0;
}

#boss-pw-input {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  background: #1e293b;
  color: #fff;
  border: 3px solid #374151;
  border-radius: 10px;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
}

#boss-pw-input:focus { border-color: var(--gold); }

.boss-pw-error {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--accent);
  text-align: center;
  margin: 0;
  line-height: 1.8;
}

#boss-pw-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  background: var(--gold);
  color: #2a2a2a;
  border: 3px solid #2a2a2a;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a6000;
  transition: transform 0.1s, box-shadow 0.1s;
}

#boss-pw-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7a6000;
}

/* ===== HANDOFF SCREEN ===== */
#boss-handoff {
  position: fixed;
  inset: 0;
  background: #071a07;
  z-index: 33;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.boss-handoff-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 320px;
}

.handoff-icon { font-size: 64px; }

.handoff-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74,222,128,0.5);
  margin: 0;
  line-height: 1.7;
}

.handoff-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  color: #d1d5db;
  margin: 0;
  line-height: 1.5;
}

.handoff-sub strong {
  color: #fff;
  font-size: 22px;
}

#boss-handoff-btn {
  padding: 14px 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: #22c55e;
  color: #052e16;
  border: 3px solid #166534;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 #14532d;
  transition: transform 0.1s, box-shadow 0.1s;
}

#boss-handoff-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #14532d;
}

/* ===== BATTLE RESULT SCREEN ===== */
#boss-battle {
  position: fixed;
  inset: 0;
  background: #0c0c18;
  z-index: 33;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.battle-box {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.battle-fighters {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 10px;
}

.battle-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.battle-side.right {
  align-items: flex-end;
  text-align: right;
}

.battle-fighter-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
  line-height: 1.5;
}

.battle-hearts {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
}

.battle-answer-chip {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 8px;
  background: #1e293b;
  color: #9ca3af;
  border: 2px solid #374151;
  word-break: break-word;
  max-width: 140px;
  line-height: 1.35;
}

.battle-answer-chip.correct {
  background: #14532d;
  color: #86efac;
  border-color: #22c55e;
}

.battle-answer-chip.wrong {
  background: #450a0a;
  color: #fca5a5;
  border-color: #ef4444;
}

.battle-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
}

.battle-round-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--gold);
  text-align: center;
  line-height: 1.8;
}

/* Tug of war */
.tug-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tug-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #4ade80;
  flex-shrink: 0;
  width: 38px;
  text-align: center;
  line-height: 1.5;
}

.tug-label.right { color: var(--accent); }

.tug-track {
  flex: 1;
  height: 28px;
  background: var(--accent);
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(255,255,255,0.05);
}

#tug-fill {
  height: 100%;
  background: #22c55e;
  width: 50%;
  border-radius: 14px 0 0 14px;
  /* transition set via JS */
}

@keyframes tug-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

.tug-track.shake { animation: tug-shake 0.65s ease; }

/* Lutte de la barre avant révélation */
@keyframes tug-fight {
  0%   { width: 50%; }
  7%   { width: 63%; }
  14%  { width: 37%; }
  22%  { width: 67%; }
  30%  { width: 32%; }
  38%  { width: 62%; }
  46%  { width: 38%; }
  54%  { width: 65%; }
  62%  { width: 34%; }
  70%  { width: 58%; }
  78%  { width: 42%; }
  86%  { width: 54%; }
  93%  { width: 47%; }
  100% { width: 50%; }
}

.tug-fill.fighting {
  animation: tug-fight 3s ease-in-out;
}

/* Chip réponse cachée (suspens) */
.battle-answer-chip.hidden-chip {
  background: #1a2a4a;
  color: rgba(255,255,255,0.25);
  font-size: 20px;
  letter-spacing: 3px;
  border: 2px dashed rgba(255,255,255,0.15);
}

/* Bouton de révélation */
#battle-reveal-btn {
  width: 100%;
  padding: 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  background: linear-gradient(135deg, #e84a8a 0%, #f5a623 100%);
  color: #fff;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 24px rgba(232,74,138,0.45);
  animation: reveal-pulse 1s ease-in-out infinite;
  transition: transform 0.1s, box-shadow 0.1s;
}

#battle-reveal-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.45);
  animation: none;
}

@keyframes reveal-pulse {
  0%,100% { box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 20px rgba(232,74,138,0.4); }
  50%      { box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 40px rgba(232,74,138,0.85); }
}

.battle-result-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
  text-align: center;
  line-height: 2;
  min-height: 34px;
}

#battle-next-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: var(--gold);
  color: #2a2a2a;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a6000;
  transition: transform 0.1s, box-shadow 0.1s;
}

#battle-next-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7a6000;
}

/* ══════════════════════════════════════════════
   MINI-JEU BASKETBALL
══════════════════════════════════════════════ */

/* Panier sur la carte */
#basket-hoop {
  position: absolute;
  z-index: 15;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
  transform-origin: bottom center;
  animation: bk-hoop-sway 2.8s ease-in-out infinite;
  padding: 4px; /* zone de tap plus large */
}

@keyframes bk-hoop-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg);  }
}

/* Modal principal */
#basket-game {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  padding: 10px;
}

.basket-box {
  background: #0f1d33;
  border: 3px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}

/* ── Scoreboard ── */
.bk-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bk-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 70px;
}

.bk-pname {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.55);
}

.bk-score {
  font-family: 'Press Start 2P', monospace;
  font-size: 26px;
  color: #fff;
  min-width: 2ch;
  text-align: center;
}

.bk-score.bump { animation: bk-score-bump 0.22s ease; }
@keyframes bk-score-bump {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.45); color: var(--gold); }
}

.bk-combo {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fb923c;
  text-align: center;
  margin-top: 2px;
  white-space: nowrap;
}

.bk-combo.pop {
  animation: bk-combo-pop 0.28s ease;
}

@keyframes bk-combo-pop {
  0%   { transform: scale(1.7); color: #fbbf24; }
  100% { transform: scale(1);   color: #fb923c; }
}

.bk-middle { text-align: center; }

.bk-timer {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--gold);
}

.bk-timer.urgent { color: #ef4444; animation: bk-tick 1s step-end infinite; }
@keyframes bk-tick { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Terrain / panier ── */
.bk-court {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 150px;
  background: linear-gradient(180deg, #071428 0%, #0e2244 60%, #1a3a6a 100%);
  border-radius: 14px;
  padding: 14px 14px 20px;
  position: relative;
  overflow: hidden;
}

/* Sol du terrain */
.bk-court::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  background: #b45309;
  border-top: 3px solid #d97706;
}

/* Badge 2 PTS / 3 PTS */
.bk-shot-badge {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.3s, box-shadow 0.3s;
}

.bk-shot-badge.two {
  background: #15803d;
  color: #fff;
  box-shadow: 0 0 12px rgba(21,128,61,0.7);
}

.bk-shot-badge.three {
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 0 12px rgba(109,40,217,0.7);
}

/* Panier visuel */
.bk-hoop {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  margin-bottom: 16px;
  will-change: transform;
}

.bk-hoop.close { transform: scale(1.38) translateY(6px); }
.bk-hoop.far   { transform: scale(0.56) translateY(-22px); }

.bk-backboard {
  width: 74px;
  height: 52px;
  background: #f1f5f9;
  border: 3px solid #94a3b8;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.bk-target {
  width: 26px;
  height: 20px;
  border: 3px solid #ef4444;
  border-radius: 2px;
}

.bk-ring {
  width: 58px;
  height: 16px;
  border: 5px solid #f97316;
  border-radius: 50%;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(249,115,22,0.6);
}

/* Flash panier réussi / raté */
.bk-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
}

.bk-flash.hit  { animation: bk-fhit  0.55s ease forwards; }
.bk-flash.miss { animation: bk-fmiss 0.4s  ease forwards; }

@keyframes bk-fhit  { 0%{opacity:0.65;background:#16a34a} 100%{opacity:0} }
@keyframes bk-fmiss { 0%{opacity:0.55;background:#dc2626} 100%{opacity:0} }

/* ── Barre pendule ── */
.bk-bar-section { padding: 0 2px; }

.bk-bar-track {
  position: relative;
  height: 38px;
  background: #1a2e4a;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 19px;
  overflow: hidden;
}

.bk-bar-zone {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 19px;
  background: rgba(34,197,94,0.38);
  border-left:  3px solid #22c55e;
  border-right: 3px solid #22c55e;
  transition: left 0.28s ease, width 0.28s ease;
}

.bk-bar-cursor {
  position: absolute;
  top: 5px; bottom: 5px;
  width: 5px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255,255,255,0.95);
  transform: translateX(-50%);
  will-change: left;
}

/* ── Bouton ballon ── */
.bk-shoot-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bk-ball-btn {
  font-size: 56px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
  touch-action: none;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.bk-ball-btn.pressed {
  transform: scale(0.85);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.bk-record-lbl {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(255,255,255,0.38);
  margin-top: 5px;
  text-align: center;
}

/* Écran cooldown basket */
#basket-cooldown {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  padding: 16px;
}

.bk-cd-box {
  background: #0f1d33;
  border: 3px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}

.bk-cd-icon { font-size: 44px; }

.bk-cd-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--gold);
}

.bk-cd-time {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: #ef4444;
}

.bk-cd-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.bk-cd-box button {
  padding: 12px 24px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: var(--gold);
  color: #2a2a2a;
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 0 #7a6000;
  margin-top: 4px;
}

/* Ligne "nouveau record" dans le résultat */
.bk-result-record {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fbbf24;
  text-align: center;
  animation: bk-record-glow 1s ease-in-out infinite alternate;
}

@keyframes bk-record-glow {
  from { text-shadow: 0 0 8px rgba(251,191,36,0.4); }
  to   { text-shadow: 0 0 18px rgba(251,191,36,0.9); }
}

.bk-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin: 0;
  text-align: center;
}

/* ── Ballon bonus ── */
.bk-bonus-ball {
  position: absolute;
  font-size: 38px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 12;
  animation: bk-bonus-spin 0.7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px rgba(249,115,22,0.9));
}

@keyframes bk-bonus-spin {
  from { transform: scale(1)    rotate(-10deg); }
  to   { transform: scale(1.18) rotate(10deg); }
}

/* ── Overlay résultat ── */
.bk-result {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.bk-result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  text-align: center;
}

#bk-result-icon  { font-size: 56px; }

#bk-result-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  line-height: 2;
}

#bk-result-scores {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 4px;
}

#bk-result-btn {
  padding: 14px 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: var(--gold);
  color: #2a2a2a;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a6000;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   DÉFI DU CHIEN — Chien animé
══════════════════════════════════════════════ */

#trivia-dog {
  position: absolute;
  font-size: 34px;
  cursor: pointer;
  z-index: 20;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
}

.dog-sprite {
  display: inline-block;
  animation: dog-hop 0.38s ease-in-out infinite alternate;
}

@keyframes dog-hop {
  from { transform: translateY(0px) rotate(0deg); }
  to   { transform: translateY(-5px) rotate(4deg); }
}

/* ══════════════════════════════════════════════
   DÉFI DU CHIEN — Modaux
══════════════════════════════════════════════ */

#trivial-modal,
#trivial-ranking {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  padding: 12px;
}

.trivial-box {
  background: #0f1d33;
  border: 3px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

/* Header modal catégories */
.trivial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trivial-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--gold);
}

.trivial-header button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

/* Roue trivial (SVG) */
.trivial-camembert-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.trivial-camembert-wrap svg {
  filter: drop-shadow(0 0 12px rgba(0,0,0,0.6));
}

/* Texte intro */
.trivial-intro {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin: 0;
}

/* Grille des catégories */
.trivial-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trivial-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: #1a2e4a;
  border: 3px solid var(--cc, #fff);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
  position: relative;
}

.trivial-cat-btn:active:not([disabled]) {
  transform: scale(0.95);
}

.trivial-cat-btn.won {
  background: color-mix(in srgb, var(--cc, #fff) 20%, #0f1d33);
  opacity: 0.6;
  cursor: default;
}

.tcb-emoji { font-size: 26px; }

.tcb-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}

.tcb-check {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  color: #4ade80;
  font-weight: bold;
}

/* ── Écran de classement ── */

.trivial-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f5a623;
}

#trivial-cat-emoji { font-size: 22px; }

#trivial-cat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fff;
}

.trivial-question-text {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.trivial-order-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.55);
}

.trivial-order-hint.bottom {
  justify-content: flex-end;
}

/* Liste d'items à classer */
.trivial-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trivial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a2e4a;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.15s, border-color 0.1s, opacity 0.15s;
  user-select: none;
  cursor: grab;
  touch-action: none;
}
.trivial-item:active { cursor: grabbing; }

.trivial-item.correct {
  background: #14532d;
  border-color: #22c55e;
}

.trivial-item.correct-answer {
  background: #1e3a5f;
  border-color: #3b82f6;
}

/* Drag handle */
.trivial-drag-handle {
  font-size: 17px;
  color: rgba(255,255,255,0.3);
  cursor: grab;
  touch-action: none;
  user-select: none;
  padding: 0 4px 0 0;
  line-height: 1;
  flex-shrink: 0;
}

.trivial-drag-handle:active { cursor: grabbing; color: rgba(255,255,255,0.7); }

/* Pendant le glissement — l'élément source devient un fantôme discret */
.trivial-item.t-dragging {
  opacity: 0.15;
  border-style: dashed;
  cursor: grabbing;
}

/* Espace de dépôt en pointillé — apparaît entre deux éléments */
.trivial-drop-placeholder {
  border-radius: 12px;
  border: 2.5px dashed var(--gold);
  background: rgba(245, 197, 66, 0.07);
  flex-shrink: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.trivial-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.t-arrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  width: 28px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  padding: 0;
  line-height: 1;
}

.t-arrow:active:not([disabled]) {
  background: rgba(255,255,255,0.22);
  transform: scale(0.9);
}

.t-arrow[disabled] {
  opacity: 0.2;
  cursor: default;
}

.trivial-item-text {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  line-height: 1.3;
}

/* Footer boutons */
.trivial-ranking-footer {
  display: flex;
  gap: 10px;
}

.trivial-back-btn {
  flex: 0 0 auto;
  padding: 12px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: #1a2e4a;
  color: rgba(255,255,255,0.7);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.trivial-back-btn:active { background: #243d5c; }

.trivial-validate-btn {
  flex: 1;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: var(--gold);
  color: #2a2a2a;
  border: 3px solid #2a2a2a;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a6000;
  transition: transform 0.1s, box-shadow 0.1s;
}

.trivial-validate-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7a6000;
}

/* Message résultat */
.trivial-result-msg {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  line-height: 1.4;
}

.trivial-result-msg.win {
  background: #14532d;
  color: #86efac;
  border: 2px solid #22c55e;
}

.trivial-result-msg.lose {
  background: #450a0a;
  color: #fca5a5;
  border: 2px solid #ef4444;
}

/* Message victoire totale */
.trivial-all-won-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--gold);
  text-align: center;
  padding: 20px;
}