:root {
  --uno-red: #e74c3c;
  --uno-blue: #3b82f6;
  --uno-green: #2ecc71;
  --uno-yellow: #f1c40f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1.5rem;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #1f2b24 0%, #0f1512 70%);
  color: #f2f2f2;
  font-family: system-ui, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.topbar h1 {
  font-size: 1.4rem;
  margin: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.difficulty-field {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  opacity: .85;
}

.difficulty-field select {
  background: #20202a;
  color: #f2f2f2;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  padding: .4rem .6rem;
  font-weight: 700;
  cursor: pointer;
}

.btn {
  background: #2ecc71;
  color: #08260f;
  border: none;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.btn:hover {
  background: #58e08c;
  transform: translateY(-2px);
}

.btn--secondary {
  background: transparent;
  color: #f2f2f2;
  border: 2px solid rgba(255, 255, 255, .3);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, .1);
}

.table {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

/* ---------- Cartes ---------- */

.card {
  width: 64px;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .3s ease;
}

.card--red { background: linear-gradient(160deg, #ff7675, var(--uno-red)); }
.card--blue { background: linear-gradient(160deg, #74b9ff, var(--uno-blue)); }
.card--green { background: linear-gradient(160deg, #7bed9f, var(--uno-green)); }
.card--yellow {
  background: linear-gradient(160deg, #fff3a0, var(--uno-yellow));
  color: #4d3d00;
  text-shadow: none;
}
.card--wild {
  background: conic-gradient(from 180deg, var(--uno-red), var(--uno-yellow), var(--uno-green), var(--uno-blue), var(--uno-red));
}
.card--special {
  background: linear-gradient(160deg, #6c5ce7, #2d1b5e);
  border-color: #d6c2ff;
}

.card--playable {
  cursor: pointer;
  outline: 2px solid #fff;
  outline-offset: 3px;
  animation: pulseGlow 1.6s ease-in-out infinite;
}

.card--playable:hover {
  transform: translateY(-14px) scale(1.06);
  box-shadow: 0 14px 22px rgba(0, 0, 0, .5);
}

.card--disabled {
  opacity: .4;
  filter: grayscale(.4);
}

.card--playing {
  transition: transform .3s ease, opacity .3s ease;
  transform: translateY(-60px) scale(1.15);
  opacity: 0;
  pointer-events: none;
}

.card.dealt {
  animation: dealIn .5s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 255, 255, .6); }
}

@keyframes dealIn {
  from { opacity: 0; transform: translate(-60vw, -50vh) rotate(-30deg) scale(.4); }
  to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes flipIn {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(-4deg); }
}

.card-back {
  width: 64px;
  height: 96px;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #2b2b39, #2b2b39 6px, #37374a 6px, #37374a 12px);
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

/* ---------- Table de jeu ---------- */

.game-table {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #1f7a4d 0%, #145536 60%, #0d3b26 100%);
  border: 10px solid #3c2415;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, .5),
    0 20px 40px rgba(0, 0, 0, .5);
}

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  z-index: 2;
}

.seat--top { top: 6%; left: 50%; transform: translate(-50%, 0); }
.seat--left { top: 50%; left: 7%; transform: translate(0, -50%); }
.seat--right { top: 50%; right: 7%; transform: translate(0, -50%); }
.seat--bottom { bottom: 6%; left: 50%; transform: translate(-50%, 0); }

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.avatar-face {
  width: 100%;
  height: 100%;
}

.avatar--p0 { background: linear-gradient(160deg, #ffd76a, #e0a324); }
.avatar--p1 { background: linear-gradient(160deg, #ff8a8a, #d94a4a); }
.avatar--p2 { background: linear-gradient(160deg, #7bd4ff, #2f8fc7); }
.avatar--p3 { background: linear-gradient(160deg, #b28dff, #6c4fd6); }

.seat--active .avatar {
  border-color: #58e08c;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), 0 0 18px rgba(88, 224, 140, .7);
}

.seat-label {
  font-size: .7rem;
  background: rgba(0, 0, 0, .4);
  padding: .15rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.seat--active .seat-label {
  color: #58e08c;
  font-weight: 700;
}

.seat-shield:empty {
  display: none;
}

.shield-badge {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #2d1b5e;
  background: linear-gradient(160deg, #d6c2ff, #b39ddb);
  padding: .2rem .5rem;
  border-radius: 999px;
}

.seat-uno:empty {
  display: none;
}

.uno-seat-badge {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .2rem .5rem;
  border-radius: 999px;
}

.uno-seat-badge--risk {
  color: #fff;
  background: #c0392b;
  animation: unoBadgePulse 1s ease-in-out infinite;
}

.uno-seat-badge--declared {
  color: #08260f;
  background: linear-gradient(160deg, #ffe08a, var(--uno-yellow));
}

@keyframes unoBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ---------- Bouton UNO ---------- */

.uno-button-container {
  display: flex;
  justify-content: center;
  min-height: 60px;
}

.uno-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ff6b6b, #c0392b);
  color: #fff;
  border: 3px solid #ffe08a;
  border-radius: 999px;
  padding: .8rem 2rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
  animation: unoButtonPulse 1s ease-in-out infinite;
}

.uno-btn:hover {
  transform: translateY(-2px);
}

@keyframes unoButtonPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(192, 57, 43, .5); }
  50% { box-shadow: 0 4px 22px rgba(255, 107, 107, .9); }
}

.uno-timer-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: #ffe08a;
  transform-origin: left center;
  animation-name: unoCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes unoCountdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ---------- Distribution des cartes ---------- */

.dealing-card {
  position: absolute;
  width: 40px;
  height: 60px;
  margin-left: -20px;
  margin-top: -30px;
  z-index: 6;
  animation: dealFly .55s ease-out forwards;
}

@keyframes dealFly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(.85); opacity: 0; }
}

/* ---------- Piles centrales ---------- */

.table-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2rem;
  align-items: center;
  z-index: 2;
}

.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.pile-label {
  font-size: .75rem;
  opacity: .7;
}

#draw-pile .card-back {
  cursor: pointer;
  transition: transform .15s ease;
}

#draw-pile .card-back:hover {
  transform: translateY(-6px);
}

#draw-pile.card-back--disabled .card-back {
  cursor: not-allowed;
  opacity: .3;
}

#draw-pile.card-back--disabled .card-back:hover {
  transform: none;
}

#discard-pile .card {
  animation: flipIn .4s ease both;
}

.player-hand {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  min-height: 110px;
}

/* ---------- Choix de couleur (Wild) ---------- */

.color-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease both;
  z-index: 10;
}

.color-picker {
  display: flex;
  gap: 1.2rem;
  background: #20202a;
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.color-picker p {
  width: 100%;
  text-align: center;
}

.color-swatch {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: transform .15s ease;
}

.color-swatch:hover {
  transform: scale(1.12);
}

.color-swatch--red { background: var(--uno-red); }
.color-swatch--blue { background: var(--uno-blue); }
.color-swatch--green { background: var(--uno-green); }
.color-swatch--yellow { background: var(--uno-yellow); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Bandeau de tour & messages ---------- */

.turn-banner {
  max-width: 900px;
  margin: 0 auto 1rem;
  text-align: center;
  font-weight: 700;
  padding: .6rem;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

.turn-banner--human {
  background: rgba(46, 204, 113, .18);
  color: #58e08c;
}

.turn-banner--ai {
  background: rgba(255, 255, 255, .06);
  color: #cfcfd6;
}

.turn-banner--winner {
  background: rgba(241, 196, 15, .2);
  color: var(--uno-yellow);
  font-size: 1.1rem;
}

.effect-message {
  max-width: 900px;
  margin: -0.5rem auto 1rem;
  text-align: center;
  min-height: 1.2rem;
  font-size: .85rem;
  opacity: .8;
}

/* ---------- Modale des règles ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease both;
  z-index: 20;
  padding: 1.5rem;
}

.modal {
  position: relative;
  background: #20202a;
  border-radius: 16px;
  padding: 2rem;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.modal h2 {
  margin-top: 0;
}

.modal h3 {
  margin-bottom: .3rem;
  color: #58e08c;
}

.modal p {
  margin-top: 0;
  opacity: .9;
  line-height: 1.4;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #f2f2f2;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.rules-card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rules-card-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rules-card-row .card {
  flex-shrink: 0;
  width: 56px;
  height: 84px;
  font-size: .9rem;
}

.rules-card-row p {
  margin: 0;
}