/* ── Single card stage ── */
.card-stage {
  display: flex; flex-direction: column; align-items: center;
  padding-block: 0 var(--space-md);
  min-height: 100dvh; justify-content: center;
  -webkit-user-select: none; user-select: none;
}

/* ── Card wrapper — large, centered ── */
.big-card-wrapper {
  perspective: 1200px; cursor: pointer;
  width: clamp(17rem, 55vw, 22rem);
  aspect-ratio: 9/16;
  will-change: transform, opacity;
}
.big-card-wrapper .card { width: 100%; height: 100%; border-radius: 1.75rem; }
.big-card-wrapper .card-back .card-number { font-size: 6.5rem; }
.big-card-wrapper .card-back .tap-hint { font-size: 0.85rem; margin-block-start: var(--space-md); letter-spacing: 2px; }
.big-card-wrapper .char-wrap { width: 8.5rem; height: 10.5rem; }
.big-card-wrapper .card-role-name { font-size: var(--font-size-xl); margin-block-start: var(--space-md); letter-spacing: 1px; font-weight: 900; }
.big-card-wrapper .char-shadow { width: 5rem; height: 0.85rem; }
.big-card-wrapper .card-face { border-radius: 1.75rem; }

/* ── Tap hint on back ── */
.tap-hint {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  color: rgba(255,255,255,.35); position: relative; z-index: 1;
}
.tap-hint-arrow {
  display: inline-block; font-size: 1rem;
  animation: tapArrowPulse 1.5s ease-in-out infinite;
}

/* ── Tap hint on flipped card (next player) ── */
.tap-hint-next {
  position: absolute; bottom: var(--space-md); inset-inline: 0; text-align: center;
  font-size: 0.78rem; color: rgba(255,255,255,.4); letter-spacing: 1px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  animation: fadeIn .4s ease;
}
.swipe-arrow {
  display: inline-block;
  animation: swipeArrowMove 1.8s ease-in-out infinite;
  font-size: 1.1rem;
}

/* ── Card 3D flip ── */
.card-wrapper { aspect-ratio: 2/3; perspective: 1000px; cursor: pointer; }
.card {
  width: 100%; height: 100%; position: relative;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1.25rem;
  will-change: transform;
}
.card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card.flipped { transform: rotateY(180deg); }
.card.flipped .card-back .card-number { display: none; }
.card-face {
  position: absolute; width: 100%; height: 100%; border-radius: 1.25rem;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}

/* ── Card hover/focus states ── */
.card-wrapper:hover .card,
.big-card-wrapper:hover .card {
  box-shadow: 0 0 30px rgba(233,69,96,.15);
}
.card-wrapper:focus-visible,
.big-card-wrapper:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 4px;
  border-radius: 1.25rem;
}

/* ── Card back ── */
.card-back {
  background: linear-gradient(145deg, #080810, #030306, #000000);
  border: 1.5px solid rgba(60,70,120,.12);
  box-shadow: 0 12px 36px rgba(0,0,0,.8), inset 0 0 80px rgba(0,0,0,.95);
}
.card-back::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 40%, rgba(233,69,96,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Floating particles on card back ── */
.card-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit; overflow: hidden; touch-action: none;
}
.card-particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(233,69,96,.4);
  box-shadow: 0 0 6px rgba(233,69,96,.3);
  animation: particleFloat var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%); bottom: var(--y, 10%);
}
.card-particle:nth-child(even) {
  background: rgba(245,166,35,.3);
  box-shadow: 0 0 6px rgba(245,166,35,.25);
}

/* ── Lightning effect on flip ── */
.card.lightning-active .card-back::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(185deg, transparent 40%, rgba(140,160,255,.6) 41%, transparent 42%),
    linear-gradient(195deg, transparent 55%, rgba(180,200,255,.4) 55.5%, transparent 56.5%),
    linear-gradient(170deg, transparent 30%, rgba(200,220,255,.5) 30.5%, transparent 31.5%);
  animation: lightningFlash 0.6s ease-out forwards;
}
.card.lightning-active::before {
  content: ''; position: absolute; inset: -8px; border-radius: 2rem; z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 40px rgba(140,160,255,.5), 0 0 80px rgba(100,120,255,.3), 0 0 120px rgba(80,100,255,.15);
  animation: lightningGlow 0.6s ease-out forwards;
}

/* ── Card number ── */
.card-number {
  font-size: 2.8rem; font-weight: 900; color: var(--accent);
  text-shadow: 0 0 30px var(--accent), 0 0 60px rgba(233,69,96,.3);
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 15px var(--accent));
  animation: numPulse 3s ease-in-out infinite;
}
.card-back .tap-hint {
  font-size: var(--font-size-xs); color: rgba(255,255,255,.3);
  margin-block-start: var(--space-sm); position: relative; z-index: 1; letter-spacing: 2px;
}

/* ── Card front shared ── */
.card-front { transform: rotateY(180deg); }

/* ── Mafia card ── */
.card-front.mafia {
  background: radial-gradient(ellipse at 50% 0%, #2a0000 0%, #110000 50%, #0a0000 100%);
  border: 1.5px solid rgba(200,0,0,.45);
  box-shadow: 0 0 40px rgba(180,0,0,.35), inset 0 0 50px rgba(0,0,0,.5);
}
.card-front.mafia::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(140,0,0,.3) 0%, transparent 65%); pointer-events: none;
}

/* ── Citizen card ── */
.card-front.citizen {
  background: radial-gradient(ellipse at 50% 0%, #001f1a 0%, #000e14 50%, #000810 100%);
  border: 1.5px solid rgba(0,200,120,.35);
  box-shadow: 0 0 40px rgba(0,180,100,.25), inset 0 0 50px rgba(0,0,0,.5);
}
.card-front.citizen::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,120,80,.25) 0%, transparent 65%); pointer-events: none;
}

/* ── Independent card ── */
.card-front.independent {
  background: radial-gradient(ellipse at 50% 0%, #1a0030 0%, #0d0018 50%, #080010 100%);
  border: 1.5px solid rgba(180,100,255,.35);
  box-shadow: 0 0 40px rgba(150,80,230,.25), inset 0 0 50px rgba(0,0,0,.5);
}
.card-front.independent::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(120,60,200,.25) 0%, transparent 65%); pointer-events: none;
}
.independent .card-role-name { color: #d8b4fe; text-shadow: 0 0 10px #9333ea; }
.independent .card-role-num { color: rgba(180,140,255,.65); }

/* ── Character SVG wrapper ── */
.char-wrap {
  position: relative; z-index: 2; width: 4.5rem; height: 5.5rem;
  animation: charFloat 3.2s ease-in-out infinite;
}
.char-wrap svg { width: 100%; height: 100%; overflow: visible; }

/* ── Eye glow pulse ── */
.eg { animation: eyeGlow 2s ease-in-out infinite; }

/* ── Shadow under character ── */
.char-shadow {
  width: 3rem; height: 0.5rem; background: rgba(0,0,0,.5); border-radius: 50%;
  margin-block-start: -0.25rem; z-index: 2; position: relative;
  animation: shadowPulse 3.2s ease-in-out infinite; filter: blur(4px);
}

/* ── Role label ── */
.card-role-name {
  font-size: 0.8rem; font-weight: 700; position: relative; z-index: 3;
  margin-block-start: var(--space-2xs); letter-spacing: .5px; text-align: center;
  padding-inline: var(--space-2xs);
}
.mafia .card-role-name { color: #ff5555; text-shadow: 0 0 10px #ff0000; }
.citizen .card-role-name { color: #44ff99; text-shadow: 0 0 10px #00cc55; }
.card-role-num { font-size: 1.2rem; font-weight: 900; position: relative; z-index: 3; margin-block-start: 3px; }
.mafia .card-role-num { color: rgba(255,100,100,.65); }
.citizen .card-role-num { color: rgba(80,255,160,.65); }

/* ── Mafia/citizen ambient particles on card ── */
.mafia-sparks, .citizen-sparks {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: 1.125rem; overflow: hidden;
}
.mafia-sparks::before { content: '\2620'; position: absolute; font-size: 4.5rem; opacity: .04; bottom: -0.5rem; inset-inline-end: -0.5rem; transform: rotate(-15deg); }
.mafia-sparks::after { content: '\26A1'; position: absolute; font-size: 2.8rem; opacity: .05; top: 0.25rem; inset-inline-start: 0.25rem; }
.citizen-sparks::before { content: '\2B50'; position: absolute; font-size: 3.5rem; opacity: .05; bottom: -0.3125rem; inset-inline-end: -0.3125rem; }
.citizen-sparks::after { content: '\2728'; position: absolute; font-size: 2.2rem; opacity: .06; top: 0.25rem; inset-inline-start: 0.25rem; }

/* ── Card responsive ── */
@media (max-width: 30em) {
  .card-stage { min-height: 85dvh; padding-block: 0 var(--space-sm); }
  .big-card-wrapper { width: 78vw; max-width: 19rem; }
  .big-card-wrapper .card-back .card-number { font-size: 5.5rem; }
  .big-card-wrapper .char-wrap { width: 7rem; height: 8.5rem; }
}

/* ── Landscape mode ── */
@media (orientation: landscape) and (max-height: 500px) {
  .card-stage { min-height: 80dvh; }
  .big-card-wrapper {
    aspect-ratio: 3/4; width: clamp(10rem, 35vw, 16rem);
  }
  .big-card-wrapper .card-back .card-number { font-size: 3.5rem; }
  .big-card-wrapper .char-wrap { width: 5rem; height: 6rem; }
  .big-card-wrapper .card-role-name { font-size: var(--font-size-base); }
  .fs-stats-bar { padding: 0 var(--space-md); }
}