/* Jeu plein écran sur canvas ; un seul univers visuel sombre, quel que soit le thème. */
:root { --bg: #05070a; --fg: #ffffff; color-scheme: dark; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; }
canvas:focus-visible { outline: 2px solid #5cf2ff; outline-offset: -4px; }
/* Fin du défi du jour : seul élément HTML posé sur le canvas, dans la palette néon du jeu */
#defiFin { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(340px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 10px; z-index: 2;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
#defiFin[hidden], #defiCopie[hidden] { display: none; }
/* Lien vers privacy.html, en haut de l'écran Options (seul autre élément HTML sur le canvas) */
#lienLegal { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2; padding: 10px 14px;
  color: rgba(255, 255, 255, .72); font: 300 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; }
#lienLegal[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#lienLegal:focus-visible { outline: 2px solid #5cf2ff; outline-offset: 2px; border-radius: 6px; }
#defiApercu { margin: 0; padding: 12px 16px; border: 1px solid rgba(255, 201, 77, .3); border-radius: 18px;
  background: rgba(5, 7, 10, .86); box-shadow: inset 0 0 22px rgba(92, 242, 255, .06);
  font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#defiPartager { min-height: 52px; padding: 0 20px; border-radius: 26px; border: 1.5px solid #ffc94d; cursor: pointer;
  background: rgba(255, 201, 77, .12); color: #ffc94d; font-family: inherit; font-size: 14px; font-weight: 300;
  letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 26px rgba(255, 201, 77, .22); }
#defiPartager:active { background: rgba(255, 201, 77, .22); }
/* Partage en image (carte 1080×1920, share-card.js) : bouton secondaire, cyan */
#defiImage { min-height: 48px; padding: 0 20px; border-radius: 24px; border: 1px solid rgba(92, 242, 255, .55); cursor: pointer;
  background: rgba(5, 7, 10, .86); color: #5cf2ff; font-family: inherit; font-size: 13px; font-weight: 300;
  letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 20px rgba(92, 242, 255, .14); }
#defiImage:active { background: rgba(92, 242, 255, .16); }
#defiImage:focus-visible { outline: 2px solid #5cf2ff; outline-offset: 3px; }
#defiPartager:focus-visible, #defiTexte:focus-visible { outline: 2px solid #5cf2ff; outline-offset: 3px; }
#defiEtat { min-height: 1.3em; margin: 0; text-align: center; color: #5cf2ff; font-size: 12px; letter-spacing: .06em; }
#defiCopie { display: flex; flex-direction: column; gap: 6px; color: rgba(255, 255, 255, .75); font-size: 12px; }
#defiTexte { -webkit-user-select: text; user-select: text; resize: none; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(92, 242, 255, .4); background: #05070a; color: #fff; font: 12px/1.45 ui-monospace, Consolas, monospace; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}