/* minigames.css — overlay des mini-jeux (spec §6, §11.5). Injecté par minigames.js au 1er lancement.
   Classes préfixées mg-. Animations : transform / opacity uniquement. Polices du site (style.css). */

.mg-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #02030a;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  contain: strict;
  color: #eaf3ff;
  font-family: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
  animation: mg-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mg-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.mg-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(150, 200, 255, 0.26);
  border-radius: 50%;
  background: rgba(8, 13, 30, 0.78);
  color: #eaf3ff;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms;
}
.mg-btn svg { width: 22px; height: 22px; display: block; }
.mg-btn:hover { transform: scale(1.06); }
.mg-btn:active { transform: scale(0.94); }
.mg-btn:focus { outline: none; }
.mg-btn:focus-visible { outline: 2px solid #7ff0ff; outline-offset: 3px; }

.mg-close { position: absolute; top: 12px; right: 12px; z-index: 3; }

/* bandeau des autres joueurs (partie partagée) */
.mg-band {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 200px);
  transform: translateX(-50%);
  pointer-events: none;
  flex-wrap: wrap;
  justify-content: center;
}
.mg-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--c, #eaf3ff);
  border-radius: 999px;
  background: rgba(8, 13, 30, 0.72);
}
.mg-chip-av { width: 26px; height: 31px; display: block; object-fit: contain; }
.mg-chip-dot { width: 18px; height: 18px; margin: 4px; border-radius: 50%; background: var(--c, #eaf3ff); display: block; }
.mg-chip-sc { font: 700 14px/1 var(--f-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; min-width: 2ch; }

/* podium */
.mg-podium {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: min(300px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(150, 200, 255, 0.26);
  border-radius: 24px;
  background: rgba(6, 10, 26, 0.94);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  animation: mg-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mg-medal { width: 104px; height: 120px; animation: mg-medal 700ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.mg-medal svg { width: 100%; height: 100%; display: block; }
.mg-score {
  font: 800 44px/1 var(--f-display, 'Unbounded', 'Arial Black', sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: opacity 200ms;
}
.mg-pending .mg-score { opacity: 0.55; }
.mg-extra { display: flex; align-items: center; gap: 10px; min-height: 0; }
.mg-extra:empty { display: none; }
.mg-xp { font: 700 18px/1 var(--f-mono, ui-monospace, monospace); color: #ffd27a; }
.mg-rec { display: inline-block; width: 28px; height: 22px; }
.mg-rec svg { width: 100%; height: 100%; display: block; }
.mg-err { font: 500 14px/1.3 var(--f-body, system-ui, sans-serif); color: #ff4d6d; text-align: center; }
.mg-err:empty { display: none; }

.mg-rank { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mg-rank:empty { display: none; }
.mg-rk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgba(150, 200, 255, 0.16);
  border-left: 3px solid var(--c, #eaf3ff);
  border-radius: 12px;
}
.mg-rk b { margin-left: auto; font: 700 16px/1 var(--f-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.mg-rk.mg-me { background: rgba(127, 240, 255, 0.08); }
.mg-rk .mg-crown { position: absolute; left: 6px; top: -9px; width: 20px; height: 14px; }

.mg-actions { display: flex; gap: 14px; margin-top: 6px; }
.mg-actions .mg-btn { width: 56px; height: 56px; }
.mg-actions .mg-btn svg { width: 26px; height: 26px; }
.mg-replay { border-color: rgba(127, 240, 255, 0.6); color: #7ff0ff; }

@keyframes mg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes mg-medal { 0% { opacity: 0; transform: scale(0.4) rotate(-25deg); } 70% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }

.mg-rm, .mg-rm .mg-podium, .mg-rm .mg-medal { animation-duration: 1ms; animation-delay: 0ms; }
.mg-rm .mg-btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .mg-root, .mg-podium, .mg-medal { animation-duration: 1ms; animation-delay: 0ms; }
  .mg-btn { transition: none; }
}

@media (max-width: 520px) {
  .mg-band { top: 68px; max-width: calc(100% - 24px); }
  .mg-score { font-size: 36px; }
}