/* ============================================================
   Crazy Cards — round table (5 players), UNO-style cards
   ============================================================ */
.uno-table {
  --w: clamp(48px, 13vw, 66px);          /* card width; height = 1.5×  */
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:8px;
  width:100%; max-width:560px; margin:0 auto; min-height:0; padding:2px 2px 0;
}

/* ---------- a single card (UNO oval look) ---------- */
.card {
  width:var(--w); aspect-ratio:2/3; flex:none; position:relative;
  border-radius:calc(var(--w)*0.16);
  background:var(--cardbg, #888);
  border:2px solid rgba(0,0,0,0.32);
  box-shadow:0 4px 9px rgba(0,0,0,0.32),
             inset 0 2px 3px rgba(255,255,255,0.45),
             inset 0 -7px 11px rgba(0,0,0,0.16);
  color:#fff; user-select:none; overflow:hidden;
  transform-style:preserve-3d;
}
.card .oval {
  position:absolute; inset:13% 9%; background:#fff; border-radius:50%;
  transform:rotate(-22deg); box-shadow:inset 0 0 0 2px rgba(0,0,0,0.04);
}
.card .big {
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  font-family:'Astalamet','Realtime',sans-serif; font-weight:800;
  font-size:calc(var(--w)*0.5); color:var(--cc, #333);
  text-shadow:1px 1px 0 rgba(0,0,0,0.12);
}
.card .pip {
  position:absolute; z-index:3; line-height:1; font-weight:800;
  font-size:calc(var(--w)*0.22); color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.card .pip.tl { top:6%; left:9%; }
.card .pip.br { bottom:6%; right:9%; transform:rotate(180deg); }

.card.red    { --cardbg:linear-gradient(145deg,#EF5350,#C62828); --cc:#C62828; }
.card.yellow { --cardbg:linear-gradient(145deg,#FFEE58,#F9A825); --cc:#F57F17; }
.card.green  { --cardbg:linear-gradient(145deg,#66BB6A,#2E7D32); --cc:#2E7D32; }
.card.blue   { --cardbg:linear-gradient(145deg,#42A5F5,#1565C0); --cc:#1565C0; }
.card.wild   { --cardbg:linear-gradient(145deg,#37474F,#15151C); }
.card.wild .oval { background:conic-gradient(#EF5350 0 90deg,#FFEE58 0 180deg,#66BB6A 0 270deg,#42A5F5 0); }
.card.wild .big  { color:#fff; text-shadow:0 2px 3px rgba(0,0,0,0.65); }
.card.back   { --cardbg:linear-gradient(145deg,#3a2d5c,#211738); }
.card.back .oval { background:#E53935; }
.card.back .big  { color:#fff; font-size:calc(var(--w)*0.4); text-shadow:0 2px 3px rgba(0,0,0,0.5); }

/* ---------- the round felt table ---------- */
.table-circle {
  position:relative; width:min(95vw, 50vh, 430px); aspect-ratio:1/1; margin:2px auto 0;
  flex:none;
}
.table-circle::before {
  content:''; position:absolute; inset:7%; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #34815a, #1c5536 70%);
  border:6px solid #123f27;
  box-shadow:inset 0 0 38px rgba(0,0,0,0.45), 0 8px 0 rgba(28,24,20,0.22);
}

/* center piles */
.center-pile {
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  display:flex; gap:12px; z-index:5;
}
.pile-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
.pile-label { font-size:10px; font-weight:800; letter-spacing:1.5px; color:rgba(255,255,255,0.85); }

.draw-pile { position:relative; width:var(--w); aspect-ratio:2/3; cursor:pointer; transition:transform .12s var(--bounce); }
.draw-pile:hover { transform:translateY(-3px); }
.draw-pile:active { transform:translateY(2px); }
.draw-pile .card { position:absolute; inset:0; }
.draw-pile .stack1 { transform:translate(3px,3px); }
.draw-pile .stack2 { transform:translate(6px,6px); }

.discard {
  width:var(--w); aspect-ratio:2/3; border-radius:calc(var(--w)*0.16);
  display:grid; place-items:center;
  box-shadow:0 0 0 5px var(--ring,#bbb), 0 12px 20px rgba(0,0,0,0.32);
  transition:box-shadow .25s ease;
}
.discard .card { animation:dealIn .32s var(--bounce) both; }
@keyframes dealIn { 0%{ transform:rotateY(85deg) translateY(-26px) scale(.9); opacity:0; } 100%{ transform:none; opacity:1; } }

/* direction + current-colour, pinned top-centre of the felt */
.center-meta {
  position:absolute; left:50%; top:1%; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center; z-index:6;
}
.dir-badge {
  width:34px; height:34px; border-radius:50%;
  background:var(--yellow); border:3px solid var(--stroke); box-shadow:0 3px 0 var(--stroke);
  display:grid; place-items:center; font-size:20px; font-weight:800; color:var(--stroke);
}
.color-ind { width:26px; height:26px; border-radius:50%; border:3px solid var(--stroke); box-shadow:0 3px 0 var(--stroke); }

/* the rotating "whose turn" arrow */
.turn-pointer {
  position:absolute; left:50%; top:48%; width:8px; height:34%;
  transform-origin:50% 0; transform:translate(-50%,0) rotate(var(--rot,0deg));
  transition:transform .5s var(--bounce), opacity .3s; z-index:4; pointer-events:none;
}
.turn-pointer::before {     /* stick (outer half only, so it clears the pile) */
  content:''; position:absolute; left:50%; top:46%; bottom:15px; width:8px; transform:translateX(-50%);
  background:linear-gradient(#FFD43B,#FF8A3D); border-radius:5px; box-shadow:0 0 8px rgba(255,180,40,.7);
}
.turn-pointer::after {      /* arrowhead pointing outward toward the seat */
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:20px solid #FF8A3D; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* ---------- seats ---------- */
.seat-pos { position:absolute; transform:translate(-50%,-50%); z-index:5; }
.seat-pos.p0 { left:50%; top:91%; }
.seat-pos.p1 { left:90%; top:61%; }
.seat-pos.p2 { left:74%; top:11%; }
.seat-pos.p3 { left:26%; top:11%; }
.seat-pos.p4 { left:10%; top:61%; }

.opp { display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .2s var(--bounce); }
.opp-fan { --w:26px; position:relative; height:40px; width:54px; display:flex; justify-content:center; }
.opp-fan .card { position:absolute; top:0; transform-origin:bottom center; }

.seat {
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:3px solid var(--stroke); border-radius:999px;
  box-shadow:0 3px 0 var(--stroke); padding:3px 6px 3px 11px;
}
.seat-name { font-weight:800; font-size:12px; color:var(--stroke); letter-spacing:.3px; white-space:nowrap; }
.seat-count {
  min-width:22px; height:22px; padding:0 5px; border-radius:999px;
  background:var(--stroke); color:#fff; font-weight:800; font-size:12px;
  display:grid; place-items:center;
}
.you .seat-name { color:#fff; }
.seat.you { background:var(--blue); }

/* ACTIVE seat — the clear "it's their turn" treatment */
.opp.active { transform:scale(1.16); z-index:8; }
.opp.active .seat {
  border-color:#FF8A3D; background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,212,59,.6), 0 3px 0 var(--stroke);
  animation:seatPulse 1.1s ease-in-out infinite;
}
.opp.active .seat .seat-name { color:var(--stroke); }
.seat.uno { border-color:#E53935 !important; }
.seat.uno .seat-count { background:#E53935; }
@keyframes seatPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(255,212,59,.6), 0 3px 0 var(--stroke);} 50%{ box-shadow:0 0 0 9px rgba(255,212,59,.28), 0 3px 0 var(--stroke);} }

/* ---------- turn banner ---------- */
.turn-banner {
  max-width:92%; text-align:center; font-weight:800; font-size:15px; color:var(--stroke);
  background:var(--card); border:3px solid var(--stroke); border-radius:999px;
  box-shadow:0 4px 0 var(--stroke); padding:7px 18px;
}
.turn-banner.you-turn { background:var(--green); }
.turn-banner.wait { color:var(--muted); }

/* ---------- your hand (3D fan) ---------- */
.hand-area { display:flex; flex-direction:column; align-items:center; width:100%; }
.hand {
  display:flex; justify-content:center; align-items:flex-end;
  perspective:1100px; width:100%;
  min-height:calc(var(--w)*1.5 + 44px); padding-top:28px;
}
.hand-slot {
  margin:0 calc(var(--w)*-0.32); transform-origin:bottom center;
  z-index:var(--z,0); transition:transform .15s ease;
}
.hand-slot .card { transition:transform .16s ease, box-shadow .16s ease; }
.hand-slot .card.playable {
  transform:translateY(-15px);
  box-shadow:0 0 0 3px #FFD43B, 0 8px 16px rgba(0,0,0,0.34),
             inset 0 2px 3px rgba(255,255,255,0.45);
  cursor:pointer;
}
.hand-slot:hover { z-index:200; }
.hand-slot:hover .card.playable { transform:translateY(-42px) translateZ(40px) scale(1.07); }
.hand-slot .card.dim { filter:brightness(0.82) saturate(0.72); cursor:not-allowed; }

.pass-btn { min-width:150px; margin-bottom:6px; }

/* ---------- colour picker ---------- */
.color-choices { display:flex; gap:14px; justify-content:center; margin-top:6px; }
.color-choices button {
  width:58px; height:58px; border-radius:16px; cursor:pointer;
  border:4px solid var(--stroke); box-shadow:0 5px 0 var(--stroke);
  background:var(--cc); transition:transform .12s var(--bounce);
}
.color-choices button:hover { transform:translateY(-4px); }
.color-choices button:active { transform:translateY(3px); box-shadow:0 0 0 var(--stroke); }

@media (prefers-reduced-motion: reduce) {
  .opp.active .seat { animation:none; }
  .discard .card { animation:none; }
  .turn-pointer { transition:opacity .3s; }
}