/* Standalone mobile optimizations for Werewolf fil-rouge play */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Ensure the native HTML `hidden` attribute overrides Tailwind display utilities
 * (.flex, .block, .grid, etc.) regardless of class specificity. */
[hidden] {
  display: none !important;
}

html, body {
  overflow-x: hidden;
  /* Pull-to-refresh laissé actif sur mobile : recharger est sans risque (le token
     stocké rejoint automatiquement la partie) et le bloquer déroute les joueurs.
     On neutralise en revanche l'overscroll horizontal, qui déclenche le geste de
     navigation arrière et ferait vraiment quitter la partie. */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

/* Custom scroll handling inside chats */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.4);
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@keyframes pulse-red-glow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.8);
    transform: scale(1.02);
    opacity: 1;
  }
}
.timer-danger-glow {
  animation: pulse-red-glow 0.8s infinite alternate;
}

/* Ghostly spectator styles */
#root-viewport.is-dead, #root-container.is-dead {
  filter: grayscale(45%) sepia(15%) hue-rotate(250deg) brightness(80%);
  box-shadow: inset 0 0 40px rgba(168, 85, 247, 0.45);
}

#ghost-banner {
  animation: pulse-ghost 2.5s infinite ease-in-out;
}

@keyframes pulse-ghost {
  0%, 100% {
    background-color: rgba(59, 7, 95, 0.7);
    color: rgba(216, 180, 254, 0.8);
  }
  50% {
    background-color: rgba(88, 28, 135, 0.85);
    color: rgba(243, 232, 255, 1);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
  }
}

/* Announcement modal animations */
@keyframes bounceGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes progressShrink {
  from { width: 100%; }
  to { width: 0%; }
}

.animate-bounce-gentle {
  animation: bounceGentle 2s ease-in-out infinite;
}

.animate-announcement-progress {
  animation: progressShrink 4.0s linear forwards;
}

/* Theme customizations for modals */
.night-theme {
  background: linear-gradient(135deg, #090d16 0%, #020617 100%);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
}
.night-theme .radial-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
}

.day-theme {
  background: linear-gradient(135deg, #1e1b18 0%, #0c0a09 100%);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
}
.day-theme .radial-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
}

.vote-theme {
  background: linear-gradient(135deg, #1c1917 0%, #0c0a09 100%);
  border-color: rgba(234, 179, 8, 0.3);
  box-shadow: 0 0 40px rgba(234, 179, 8, 0.15);
}
.vote-theme .radial-glow {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, transparent 70%);
}

.death-theme {
  background: linear-gradient(135deg, #1e152a 0%, #09050d 100%);
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.15);
}
.death-theme .radial-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
}

.victory-village-theme {
  background: linear-gradient(135deg, #062f22 0%, #022c22 100%);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
}
.victory-village-theme .radial-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

.victory-wolves-theme {
  background: linear-gradient(135deg, #3f0712 0%, #1c050a 100%);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.2);
}
.victory-wolves-theme .radial-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
}

.gameover-theme {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 0 40px rgba(148, 163, 184, 0.15);
}
.gameover-theme .radial-glow {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.4) 0%, transparent 70%);
}

@keyframes loadingProgress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.animate-loading-progress {
  animation: loadingProgress 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dock de navigation ───────────────────────────────────────────────────
   Les libellés d'onglet viennent des dictionnaires de thème et peuvent tenir
   en deux mots ("Le Comptoir", "Big-Beer Agents"). Sans contrainte ils se
   coupent sur deux lignes et déforment la barre : on les garde sur une seule
   ligne, quitte à rétrécir la police puis à couper à l'ellipse. */
.nav-tab-label {
  display: block;
  max-width: 100%;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

@media (max-width: 380px) {
  .nav-tab-label { font-size: 9px; }
}

/* ── Mentions @pseudo dans le chat ─────────────────────────────────────── */
.chat-mention {
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-radius: 4px;
  padding: 0 2px;
}
.bg-stone-900 .chat-mention {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.18);
}
.chat-mention-me {
  color: #fff;
  background: #d97706;
}
.bg-stone-900 .chat-mention-me {
  color: #1c1917;
  background: #fbbf24;
}

/* Liste d'auto-complétion des mentions, ancrée au-dessus du composeur. */
.mention-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 168px;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid #e7e5e4;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.mention-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1c1917;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
}
.mention-picker-item[aria-selected="true"],
.mention-picker-item:hover {
  background: #f5f5f4;
}
.mention-picker-item .mention-picker-dead {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #a8a29e;
  text-transform: uppercase;
}