/* =============================================================
   AGORA DES MOTS — ANAGRAMMES
   styles/scroll-to-top.css — bouton discret « revenir en haut »,
   micro-patch pré-déploiement. Document-level (hors Shadow DOM),
   chargé comme app.css (voir index.html).
   ============================================================= */

.scroll-top-btn {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(214, 172, 96, .55);
  background: rgba(5, 32, 22, .88);
  color: #eccf8f;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  /* Jamais au-dessus d'une modale : voir scroll-to-top.js en-tête — le plus bas z-index de
     modale confirmé dans le projet est 50, celui-ci reste nettement en dessous. */
  z-index: 45;
  animation: scrollTopBtnIn .2s ease;
}
/* [hidden] (attribut, jamais une classe) bascule display:none nativement — le bouton
   apparaît/disparaît donc instantanément par construction (pas de transition d'opacité
   possible à travers un changement de display, jamais une fausse transition qui ne jouerait
   pas réellement) ; seule une légère animation d'ENTRÉE joue à chaque réapparition. */
@keyframes scrollTopBtnIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.scroll-top-btn:hover,
.scroll-top-btn:focus-visible {
  background: rgba(8, 44, 30, .92);
  border-color: #eccf8f;
}
.scroll-top-btn:focus-visible {
  outline: 2px solid #eccf8f;
  outline-offset: 2px;
}

/* Correctif — comme .game-shell[hidden]/.modal-backdrop[hidden] etc. dans game.css/
   config.css (même piège [hidden] déjà connu dans ce projet) : la règle de classe
   .scroll-top-btn ci-dessus (display:flex) a une origine « auteur », donc l'emporte
   TOUJOURS sur le [hidden]{display:none} par défaut du navigateur, quelle que soit la
   spécificité. Sans cette ligne, scroll.js a beau poser/retirer l'attribut hidden, le
   bouton restait display:flex en permanence (visible dès le chargement, avant même tout
   scroll) — jamais le comportement « apparaît après 480px de scroll » réellement voulu. */
.scroll-top-btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn { animation: none; }
}

@media (max-width: 480px) {
  .scroll-top-btn { width: 40px; height: 40px; font-size: 16px; }
}

/* Partie active sur mobile/tablette (même seuil ≤1024px que le reste du jeu, voir
   "Tablette et mobile (≤ 1024px)" dans game.css) — la flèche peut recouvrir/gêner le
   bouton Valider et les autres contrôles de jeu : masquée complètement (display:none,
   jamais un simple z-index/opacity) tant que <agora-game-view> est visible. État déjà
   fiable et partagé par le moteur local ET online (configView.hidden / gameView.hidden,
   voir app.js#renderApp / #renderOnlineApp) : aucun nouveau système d'état créé ici.
   Desktop intact (aucune règle sous ce breakpoint). */
@media (max-width: 1024px) {
  agora-game-view:not([hidden]) ~ .scroll-top-btn {
    display: none !important;
  }
}