/* ============ UNO card rendering ============ */
.uno-card {
  width: 74px;
  height: 110px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 900;
  font-size: 2rem;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  border: 4px solid white;
  user-select: none;
  background: #333;
}
@media (max-width: 640px) {
  .uno-card { width: 56px; height: 84px; font-size: 1.4rem; border-width: 3px; }
}

.uno-card .oval {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  transform: rotate(-25deg);
  background: rgba(255,255,255,.18);
}
.uno-card .corner { position: absolute; font-size: .8rem; line-height: 1; }
.uno-card .corner.tl { top: 5px; left: 7px; }
.uno-card .corner.br { bottom: 5px; right: 7px; transform: rotate(180deg); }

.card-red    { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.card-yellow { background: linear-gradient(135deg, #facc15, #ca8a04); }
.card-green  { background: linear-gradient(135deg, #22c55e, #15803d); }
.card-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.card-black  { background: linear-gradient(135deg, #1f2937, #000); }

.card-back {
  background: radial-gradient(ellipse at center, #dc2626 0%, #7f1d1d 70%, #450a0a 100%);
}
.card-back::after {
  content: 'UNO';
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: 2px 2px 0 #b91c1c;
  transform: rotate(-25deg);
}

/* ============ Opponent mini card-backs (visual fanned stack) ============ */
.mini-fan {
  display: flex;
  justify-content: center;
  height: 34px;
  margin-top: 3px;
}
.mini-card {
  width: 20px;
  height: 30px;
  border-radius: 4px;
  border: 1.5px solid #fff;
  background: radial-gradient(ellipse at center, #dc2626 0%, #7f1d1d 75%);
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  margin-left: -10px;
  transform-origin: bottom center;
  position: relative;
}
.mini-card:first-child { margin-left: 0; }
.mini-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(253, 224, 71, .35);
  transform: rotate(-25deg);
}

/* ============ Hand cards ============ */
.hand-card {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
  filter: grayscale(.65) brightness(.6);
}
.hand-card.playable {
  filter: none;
  box-shadow: 0 0 12px rgba(253, 224, 71, .55);
  animation: glowPulse 1.6s ease-in-out infinite;
}
.hand-card.playable:hover {
  transform: translateY(-14px) scale(1.06);
  box-shadow: 0 0 22px rgba(253, 224, 71, .95);
  z-index: 30 !important;
  animation: none;
}
.hand-card.pending-draw { outline: 3px dashed #fde047; outline-offset: 2px; }
.hand-card:not(.playable) { cursor: not-allowed; }
.spectating .hand-card { filter: grayscale(1) brightness(.4); cursor: default; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(253, 224, 71, .35); }
  50%      { box-shadow: 0 0 18px rgba(253, 224, 71, .8); }
}

/* ============ Opponent seat ============ */
.opponent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px 8px;
  border-radius: 14px;
  background: rgba(30, 41, 59, .8);
  border: 2px solid transparent;
  min-width: 96px;
  transition: border-color .3s, box-shadow .3s;
  position: relative;
}
.opponent.current {
  border-color: #fde047;
  box-shadow: 0 0 16px rgba(253, 224, 71, .4);
}
.opponent.finished { opacity: .65; border-color: #6366f1; }
.opponent .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg, #6366f1, #4338ca);
}
.opponent .avatar.bot { background: linear-gradient(135deg, #9333ea, #6b21a8); }

/* Opponent turn timer ring */
.seat-timer {
  position: absolute;
  top: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #fde047;
  font-size: .6rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: #fde047;
}
.seat-timer.warn { border-color: #ef4444; color: #ef4444; animation: blink .5s step-end infinite; }
@keyframes blink { 50% { opacity: .3; } }

.rank-badge {
  position: absolute;
  top: -8px; left: -8px;
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
}

/* ============ Option buttons (lobby) ============ */
.opt-btn { transition: all .15s; color: #94a3b8; }
.opt-btn.selected {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, .18) !important;
  color: #fff;
}

/* ============ Misc ============ */
.dir-arrow { transition: transform .4s; }
.uno-logo { text-shadow: 3px 3px 0 rgba(0,0,0,.4); }
#my-hand .hand-card { margin-bottom: 4px; }
#turn-timer-bar { will-change: width; }
.chat-name { color: #93c5fd; font-weight: 700; }