/* === Base (sans Tailwind) === */
body {
  margin: 0;
  background: #1c1917;
  color: #f5f5f4;
  font-family: system-ui, sans-serif;
}

#app {
  min-height: 100vh;
}

.app-connection-alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 0.625rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  background: rgba(127, 29, 29, 0.95);
  color: #fecaca;
  border-bottom: 1px solid #ef4444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.app-connection-alert[hidden] {
  display: none;
}

.app-connection-alert--success {
  background: rgba(6, 78, 59, 0.95);
  color: #a7f3d0;
  border-bottom-color: #10b981;
}

body:has(.app-connection-alert:not([hidden])) #app {
  padding-top: 2.75rem;
}

.loading-fallback {
  text-align: center;
  padding: 2rem;
  color: #f59e0b;
}

#app-error {
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #450a0a;
  border: 1px solid #ef4444;
  border-radius: 0.5rem;
  color: #fecaca;
}

#app-error p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* === Accessibilité === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #f59e0b;
  color: #1c1917;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* === Transitions d'écran === */
#app.screen-enter {
  animation: screenFadeIn 0.35s ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
  #app.screen-enter,
  .timer-urgent,
  .duel-standoff-active .duelist-silhouette,
  .duel-dust,
  .muzzle-flash,
  .confetti-piece,
  .role-card-wrap.is-flipping .role-card {
    animation: none !important;
  }
}

/* === Timer === */
@keyframes pulse-timer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.timer-urgent {
  animation: pulse-timer 0.8s ease-in-out infinite;
}

.timer-bar-fill {
  transition: width 0.15s linear;
}

.role-reveal-timer {
  padding: 0.75rem 1rem;
  background: rgba(41, 37, 36, 0.85);
  border: 1px solid #57534e;
  border-radius: 0.75rem;
}

/* === Cartes rôle === */
.role-card {
  background: linear-gradient(145deg, #292524 0%, #1c1917 100%);
  border: 2px solid #d97706;
}

.role-card-wrap.is-flipping .role-card {
  animation: roleFlip 0.6s ease-out 1 forwards;
}

.role-card-wrap.is-revealed .role-card {
  transform: perspective(600px) rotateY(0);
  opacity: 1;
}

/* === Bouton « J'ai vu mon rôle » === */
.btn-role-seen {
  position: relative;
  overflow: hidden;
}

.btn-role-seen.is-pressing {
  animation: roleSeenPop 0.45s ease-out;
}

.btn-role-seen.is-confirmed {
  pointer-events: none;
}

.btn-role-seen-ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(167, 243, 208, 0.55) 0%, transparent 65%);
  animation: roleSeenRipple 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes roleSeenPop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }
  35% {
    transform: scale(0.96);
  }
  65% {
    transform: scale(1.03);
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes roleSeenRipple {
  0% {
    opacity: 1;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

@keyframes roleFlip {
  0% {
    transform: perspective(600px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(600px) rotateY(0);
    opacity: 1;
  }
}

/* === Saloons === */
.saloon-badge-a {
  border-left: 4px solid #f59e0b;
}

.saloon-badge-b {
  border-left: 4px solid #a8a29e;
}

/* === Overlay secret (pass-and-play) === */
.secret-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
}

.secret-overlay-inner {
  background: rgba(28, 25, 23, 0.92);
  border: 1px dashed #78716c;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #a8a29e;
}

.secret-overlay-icon {
  font-size: 1.25rem;
}

/* === Arène de duel === */
.duel-arena-suspended .duel-arena {
  filter: brightness(0.85);
}

.duel-arena-suspended .duelist-choice-badge {
  visibility: hidden;
}

.duel-arena-revealed .duel-arena {
  animation: arenaReveal 0.5s ease-out;
}

@keyframes arenaReveal {
  0% { box-shadow: 0 0 0 0 transparent; }
  40% { box-shadow: 0 0 30px 4px #f59e0b66; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.duel-arena-revealed .duelist.shoot .duelist-silhouette,
.duel-arena-revealed .duelist.hold .duelist-silhouette {
  animation: revealPop 0.45s ease-out both;
}

.duel-arena-revealed .duelist-right .duelist-silhouette {
  animation-delay: 0s;
}

@keyframes revealPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.reveal-simultaneous-text {
  animation: revealPop 0.4s ease-out;
}

.reveal-countdown-bar {
  transition: width 0.15s linear;
}

.duel-arena {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid #44403c;
  min-height: 160px;
}

.duel-arena-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #78350f22 0%, #1c1917 40%, #292524 100%);
}

.duel-gunfighters {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  z-index: 1;
}

.duelist {
  flex: 1;
  text-align: center;
  transition: transform 0.3s, opacity 0.3s;
}

.duelist-silhouette {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.25rem;
}

.duel-standoff-active .duelist-silhouette {
  animation: standoffPulse 1.2s ease-in-out infinite;
}

.duelist-right .duelist-silhouette {
  animation-delay: 0.6s;
}

@keyframes standoffPulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.05) translateY(-4px); }
}

.duelist-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.duel-vs {
  font-family: 'Rye', serif;
  color: #f59e0b;
  font-size: 1.25rem;
  padding: 0 0.5rem;
}

.duelist.shoot .duelist-silhouette {
  animation: shootRecoil 0.35s ease-out;
}

@keyframes shootRecoil {
  0% { transform: scale(1); }
  40% { transform: scale(1.2) rotate(-8deg); }
  100% { transform: scale(1); }
}

.duelist.hold .duelist-silhouette {
  opacity: 0.85;
}

.duelist-choice-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.1rem;
}

.duelist-eliminated {
  opacity: 0.35;
  filter: grayscale(1);
  transform: scale(0.9);
}

.duel-dust {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(transparent, #a8a29e33);
  animation: dustDrift 2s ease-in-out infinite;
}

@keyframes dustDrift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* === FX layer === */
#fx-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
}

#fx-layer.shake-light {
  animation: shakeLight 0.4s ease-out;
}

#fx-layer.shake-medium {
  animation: shakeMedium 0.45s ease-out;
}

#fx-layer.shake-heavy {
  animation: shakeHeavy 0.5s ease-out;
}

@keyframes shakeLight {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes shakeMedium {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-8px, 2px); }
  40% { transform: translate(8px, -2px); }
  60% { transform: translate(-6px, -1px); }
  80% { transform: translate(6px, 1px); }
}

@keyframes shakeHeavy {
  0%, 100% { transform: translate(0); }
  15% { transform: translate(-12px, 4px); }
  30% { transform: translate(12px, -4px); }
  45% { transform: translate(-10px, 2px); }
  60% { transform: translate(10px, -2px); }
  75% { transform: translate(-6px, 0); }
}

.muzzle-flash {
  position: absolute;
  top: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef3c7 0%, #f59e0b55 40%, transparent 70%);
  animation: flashPop 0.35s ease-out forwards;
}

.muzzle-flash-left {
  left: 15%;
}

.muzzle-flash-center {
  left: 50%;
  margin-left: -60px;
}

.muzzle-flash-right {
  right: 15%;
}

@keyframes flashPop {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.8); }
}

.duel-result-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rye', serif;
  font-size: 2rem;
  color: #f59e0b;
  text-shadow: 0 2px 20px #000;
  animation: bannerPop 1s ease-out forwards;
}

.duel-result-shoot {
  color: #ef4444;
}

.duel-result-hold {
  color: #86efac;
}

/* === Roulette volontaire (inline sur page Saloon) === */
.player-chip.roulette-candidate {
  border: 2px solid transparent;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.player-chip.roulette-highlight {
  background-color: rgb(180 83 9 / 0.4) !important;
  border-color: rgb(251 191 36) !important;
  box-shadow: 0 0 14px rgb(251 191 36 / 0.55);
}

.player-chip.roulette-winner {
  background-color: rgb(22 101 52 / 0.45) !important;
  border-color: rgb(74 222 128) !important;
  box-shadow: 0 0 18px rgb(74 222 128 / 0.65);
}

/* === Choix de duel (sélection locale du joueur) === */
#btn-shoot.duel-choice-selected {
  box-shadow: 0 0 0 3px rgb(251 191 36), 0 0 14px rgb(239 68 68 / 0.55);
  background-color: rgb(153 27 27) !important;
}

#btn-hold.duel-choice-selected {
  box-shadow: 0 0 0 3px rgb(251 191 36), 0 0 12px rgb(134 239 172 / 0.45);
  border-color: rgb(74 222 128) !important;
  background-color: rgb(20 83 45 / 0.55) !important;
  color: rgb(187 247 208) !important;
}

.duel-choice-status .duel-choice-label {
  color: rgb(251 191 36);
}

@keyframes bannerPop {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* === Confetti victoire === */
.confetti-wrap {
  position: absolute;
  inset: 0;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  left: var(--x);
  width: 8px;
  height: 12px;
  background: var(--color, #f59e0b);
  animation: confettiFall 2.5s ease-in forwards;
  animation-delay: var(--delay);
  opacity: 0.9;
}

.confetti-citizens .confetti-piece:nth-child(odd) { --color: #f59e0b; }
.confetti-citizens .confetti-piece:nth-child(even) { --color: #86efac; }
.confetti-outlaws .confetti-piece:nth-child(odd) { --color: #ef4444; }
.confetti-outlaws .confetti-piece:nth-child(even) { --color: #1c1917; border: 1px solid #78716c; }

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* === Bouton son flottant === */
.sound-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 45;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #292524;
  border: 2px solid #57534e;
  color: #f59e0b;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.sound-toggle:hover {
  background: #44403c;
  transform: scale(1.05);
}

.sound-toggle[aria-pressed="true"] {
  border-color: #f59e0b;
}

.sound-toggle-muted {
  opacity: 0.6;
}

.leave-game-btn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 45;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  background: #450a0a;
  border: 1px solid #991b1b;
  color: #fecaca;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.leave-game-btn:hover {
  background: #7f1d1d;
  transform: scale(1.02);
}

.leave-game-btn.hidden {
  display: none;
}

/* === Saloon layout + chat discussion === */
.saloon-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: min(70vh, calc(100vh - 5rem));
}

@media (min-width: 900px) {
  .saloon-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
  }

  .saloon-game-column {
    flex: 1;
    min-width: 0;
    max-width: 52%;
  }

  .saloon-chat {
    flex: 1;
    min-width: 0;
    max-width: 48%;
  }
}

.saloon-game-column {
  display: flex;
  flex-direction: column;
}

.saloon-chat {
  display: flex;
  flex-direction: column;
  background: #292524;
  border: 2px solid #d97706;
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 16rem;
  flex: 1;
}

.saloon-chat-header {
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #44403c 0%, #292524 100%);
  border-bottom: 1px solid #57534e;
}

.saloon-chat-messages {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 10rem;
  max-height: none;
}

.saloon-chat-msg {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.saloon-chat-system {
  padding: 0.5rem 0.65rem;
  border-radius: 0.375rem;
  background: rgba(180, 83, 9, 0.15);
  border-left: 3px solid #d97706;
}

.saloon-chat-system .saloon-chat-text {
  color: #fcd34d;
  font-style: italic;
}

.saloon-chat-author {
  display: block;
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 0.1rem;
}

.saloon-chat-text {
  color: #f5f5f4;
  word-break: break-word;
}

.saloon-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #57534e;
  background: #1c1917;
}

.saloon-chat-form input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #57534e;
  background: #292524;
  color: #f5f5f4;
  font-size: 1rem;
}

.saloon-chat-send {
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: #d97706;
  color: #1c1917;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.saloon-chat-send:hover {
  background: #f59e0b;
}

/* === Roulette volontaire === */
.roulette-wheel {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  border: 4px solid #d97706;
  background: conic-gradient(
    from 0deg,
    #292524 0deg 60deg,
    #44403c 60deg 120deg,
    #292524 120deg 180deg,
    #44403c 180deg 240deg,
    #292524 240deg 300deg,
    #44403c 300deg 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
}

.roulette-wheel.roulette-spinning {
  animation: rouletteSpin 0.35s linear infinite;
}

.roulette-slots {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: #fbbf24;
  font-weight: 600;
}

@keyframes rouletteSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bot-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  font-size: 0.9em;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.95;
}

.player-chip-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.discord-float-wrap {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 150;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.discord-voice-panel code {
  font-size: 0.75rem;
}

.eliminated-badge {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.45));
}