/* Préversion 31 — uniquement les deux animations demandées par PasKing.
   Aucun chronomètre, son, état de jeu ni contenu lexical n'est piloté par CSS. */

/* Le chiffre, son cercle sculpté et les commandes gardent leurs dimensions. */
:where(.tu-countdown) .tu-countdown-number,
#taboo-countdown .countdown-number {
  --orbit31-beam: #26785a;
  --orbit31-head: #d9efb5;
  --orbit31-tail: rgba(38, 120, 90, .24);
  --orbit31-track: rgba(38, 120, 90, .16);
  position: relative;
  isolation: isolate;
  overflow: visible;
  animation: countdown31-beat 1s cubic-bezier(.18,.8,.3,1) 3 both;
}
/* Le Relais Crème utilise déjà un fond sombre : son faisceau reste clair. */
html:not([data-appearance]) #taboo-countdown .countdown-number,
html[data-appearance="cream"] #taboo-countdown .countdown-number {
  --orbit31-beam: #c9eaa8;
  --orbit31-head: #fffdf4;
  --orbit31-tail: rgba(201, 234, 168, .25);
  --orbit31-track: rgba(201, 234, 168, .22);
}
html[data-appearance="dark"] :is(.tu-countdown-number, #taboo-countdown .countdown-number) {
  --orbit31-beam: #81c784;
  --orbit31-head: #e0f4d5;
  --orbit31-tail: rgba(129, 199, 132, .25);
  --orbit31-track: rgba(129, 199, 132, .2);
}
html[data-appearance="glass"] :is(.tu-countdown-number, #taboo-countdown .countdown-number) {
  --orbit31-beam: #a9f5d8;
  --orbit31-head: #ffffff;
  --orbit31-tail: rgba(169, 245, 216, .26);
  --orbit31-track: rgba(169, 245, 216, .23);
}
html[data-appearance="brutal"] :is(.tu-countdown-number, #taboo-countdown .countdown-number) {
  --orbit31-beam: #d89b16;
  --orbit31-head: #ffdf55;
  --orbit31-tail: rgba(216, 155, 22, .28);
  --orbit31-track: rgba(17, 17, 17, .13);
}
:is(.tu-countdown-number, #taboo-countdown .countdown-number)::before,
:is(.tu-countdown-number, #taboo-countdown .countdown-number)::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}
:is(.tu-countdown-number, #taboo-countdown .countdown-number)::before {
  border: 2px solid var(--orbit31-track);
}
/* Repli sans masque : un arc clair tourne, jamais un disque sur le chiffre. */
:is(.tu-countdown-number, #taboo-countdown .countdown-number)::after {
  border: 4px solid transparent;
  border-top-color: var(--orbit31-beam);
  border-right-color: var(--orbit31-tail);
  filter: drop-shadow(0 0 5px var(--orbit31-tail));
  animation: countdown31-orbit 3s linear 1 both;
  will-change: transform;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) and (background: conic-gradient(red, blue)) {
  :is(.tu-countdown-number, #taboo-countdown .countdown-number)::after {
    border: 0;
    padding: 4px;
    background: conic-gradient(from -90deg,
      transparent 0deg 215deg,
      var(--orbit31-tail) 265deg,
      var(--orbit31-beam) 325deg,
      var(--orbit31-head) 349deg,
      transparent 353deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
@keyframes countdown31-orbit {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}
@keyframes countdown31-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.035); }
  36% { transform: scale(.992); }
  65% { transform: scale(1); }
}

/* Seul le nombre rouge tremble : aucune commande de jeu n'est déplacée. */
html .app .timer-row strong.critical-shake,
html .app #timesup .tu-remote-timer.critical-shake {
  transform-origin: center;
  animation: urgency31-impact .36s linear infinite;
}
@keyframes urgency31-impact {
  0%, 100% { transform: translate(0,0) rotate(0); }
  14% { transform: translate(-9px,2px) rotate(-3deg); }
  28% { transform: translate(9px,-2px) rotate(3deg); }
  42% { transform: translate(-7px,-1px) rotate(-2deg); }
  56% { transform: translate(7px,1px) rotate(2deg); }
  72% { transform: translate(-4px,1px) rotate(-1deg); }
  86% { transform: translate(4px,-1px) rotate(1deg); }
}

/* Accessibilité : ni rotation, ni pulsation, ni secousse ; l'état rouge reste. */
@media (prefers-reduced-motion: reduce) {
  :is(.tu-countdown-number, #taboo-countdown .countdown-number),
  :is(.tu-countdown-number, #taboo-countdown .countdown-number)::after,
  html .app .timer-row strong.critical-shake,
  html .app #timesup .tu-remote-timer.critical-shake {
    animation: none !important;
    filter: none;
  }
}
html[data-motion="reduce"] :is(.tu-countdown-number, #taboo-countdown .countdown-number),
html[data-motion="reduce"] :is(.tu-countdown-number, #taboo-countdown .countdown-number)::after,
html[data-motion="reduce"] .app .timer-row strong.critical-shake,
html[data-motion="reduce"] .app #timesup .tu-remote-timer.critical-shake {
  animation: none !important;
  filter: none;
}