/* Kit UI partagé des jeux Antoine From Mars : jetons, boutons, overlays, focus. */
:root {
  --afm-bg: #050308;
  --afm-surface: rgba(255,255,255,0.04);
  --afm-border: rgba(238,238,255,0.22);
  --afm-text: #eef;
  --afm-muted: #a0a0b8;
  --afm-pink: #ff33aa;
  --afm-cyan: #33ffcc;
  --afm-yellow: #ffee33;
  --afm-oxide: #ff6633;
  --afm-danger: #ff5566;
  --afm-font: 'Courier New', monospace;
}

.afm-icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--afm-yellow);
  outline-offset: 2px;
}

.afm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border-radius: 8px; cursor: pointer;
  font-family: var(--afm-font); font-size: 14px; letter-spacing: 1px; text-decoration: none;
  color: #fff; border: none;
  background: linear-gradient(135deg, #ff00aa, #aa00ff);
  box-shadow: 0 0 16px rgba(255,0,170,0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.afm-btn:hover { box-shadow: 0 0 22px rgba(255,0,170,0.7); }
.afm-btn:active { transform: scale(0.97); }
.afm-btn--ghost {
  background: transparent; color: var(--afm-text); box-shadow: none;
  border: 1px solid var(--afm-border);
}
.afm-btn--ghost:hover { border-color: var(--afm-cyan); box-shadow: none; }

.afm-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  color: var(--afm-text); background: rgba(10,8,16,0.7);
  border: 1px solid var(--afm-border); text-decoration: none; padding: 0;
}
.afm-iconbtn:hover { border-color: var(--afm-cyan); color: var(--afm-cyan); }

#afm-pausebtn {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  z-index: 9000; display: none;
}
#afm-pausebtn.on { display: inline-flex; }

.afm-overlay {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,3,8,0.97); color: var(--afm-text); font-family: var(--afm-font);
}
.afm-overlay.on { display: flex; }
.afm-panel {
  width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.afm-panel h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: 3px; color: var(--afm-pink); text-shadow: 0 0 14px rgba(255,51,170,0.6); }
.afm-panel p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--afm-muted); }
.afm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; text-align: left; min-height: 44px; }
.afm-row input[type="range"] { flex: 1; max-width: 160px; accent-color: var(--afm-pink); }
.afm-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--afm-cyan); }
.afm-step { font-size: 11px; letter-spacing: 2px; color: var(--afm-cyan); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.afm-reduced * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }