/* ═══════════════════════════════════════════════════
   CARDS — Rich SVG-style card design
   ═══════════════════════════════════════════════════ */

/* ── Base Card ── */
.card {
  width: 100px; height: 148px;
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 2.1rem;
  position: relative; cursor: pointer;
  user-select: none; flex-shrink: 0;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base);
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 6px 12px rgba(0,0,0,.45),
    0 10px 30px rgba(0,0,0,.25);
  border: 1.5px solid rgba(255,255,255,.12);
  overflow: hidden;
}

/* Sheen overlay */
.card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 5px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    transparent 45%,
    rgba(0,0,0,.1) 100%);
  z-index: 1;
}

/* ── Custom image overlay ── */
/* When a card has a custom image, it fills the entire card */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 5px;
  z-index: 10; /* Above all CSS decorations */
  display: block;
}

/* Oval */
.card-oval {
  position: absolute;
  width: 68px; height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  transform: rotate(-25deg);
  pointer-events: none; z-index: 1;
}

/* Corner pips */
.card-corner {
  position: absolute;
  font-size: .75rem; font-weight: 800;
  font-family: var(--font-heading);
  z-index: 3; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}
.card-corner.top-left  { top: 6px;    left: 8px; }
.card-corner.bot-right { bottom: 6px; right: 8px; transform: rotate(180deg); }

.card-corner-num  { font-size: .88rem; font-weight: 900; }
.card-corner-suit { font-size: .65rem; opacity: .9; }

/* Center value */
.card-value {
  position: relative; z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  line-height: 1;
  font-size: 2.6rem;
}

/* Center icon for specials */
.card-icon {
  font-size: 2.4rem; position: relative;
  z-index: 2; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.card-label {
  position: relative; z-index: 2;
  font-size: .44rem; font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  margin-top: 4px; opacity: .9;
  background: rgba(0,0,0,.28);
  padding: 2px 5px; border-radius: 3px;
}

/* ── Color Variants ── */
.card.card-red {
  background: linear-gradient(155deg, #e8564a 0%, #a81e10 100%);
  color: #fff;
}
.card.card-blue {
  background: linear-gradient(155deg, #4a90e8 0%, #163fa8 100%);
  color: #fff;
}
.card.card-green {
  background: linear-gradient(155deg, #3dba6a 0%, #0e6b30 100%);
  color: #fff;
}
.card.card-yellow {
  background: linear-gradient(155deg, #f7ce3a 0%, #c98b00 100%);
  color: #2a1800;
}

/* Wild — spectacular four-quadrant */
.card.card-wild {
  background:
    conic-gradient(from 0deg at 50% 50%,
      #e8564a 0deg 90deg,
      #4a90e8 90deg 180deg,
      #3dba6a 180deg 270deg,
      #f7ce3a 270deg 360deg);
  color: #fff;
}
.card.card-wild .card-oval {
  border-color: rgba(255,255,255,.4);
  background: rgba(0,0,0,.25);
}

/* Blitz specials */
.card.card-special {
  background: linear-gradient(155deg, #9b6cf7 0%, #4a3db8 100%);
  color: #fff;
}

/* ── Hand Interaction ── */
.hand-container .card { margin-left: -22px; }
.hand-container .card:first-child { margin-left: 0; }

.hand-container .card:hover {
  transform: translateY(-26px) scale(1.1);
  z-index: 20;
}

.hand-container .card.playable:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 10px 32px rgba(0,0,0,.5),
    0 0 0 3px #d4af37,
    0 0 28px rgba(212,175,55,.6);
}

.hand-container .card.not-playable {
  opacity: .42; cursor: not-allowed;
  filter: brightness(.65) saturate(.5);
}
.hand-container .card.not-playable:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ── Card Back ── */
.card.card-back {
  background: linear-gradient(155deg, #1e1428 0%, #0e0a18 100%);
  border: 1.5px solid rgba(212,175,55,.2);
  cursor: default;
}
.card-back-inner {
  position: absolute; inset: 5px;
  border-radius: 6px;
  border: 1.5px solid rgba(212,175,55,.18);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(212,175,55,.04) 0px,
      rgba(212,175,55,.04) 1px,
      transparent 1px, transparent 8px),
    repeating-linear-gradient(
      -45deg,
      rgba(212,175,55,.04) 0px,
      rgba(212,175,55,.04) 1px,
      transparent 1px, transparent 8px);
}
.card-back-diamond {
  position: absolute; top: 50%; left: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%,-50%) rotate(45deg);
  border: 2px solid rgba(212,175,55,.3);
}

/* ── Animations ── */
.card.card-dealt  { animation: deal .38s var(--ease-spring) forwards; }
@keyframes deal {
  from { opacity: 0; transform: translateY(-50px) scale(.6) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}

.card.card-drawn   { animation: draw-in .35s var(--ease-spring) forwards; }
@keyframes draw-in {
  from { opacity: 0; transform: translateX(-40px) scale(.6); }
  to   { opacity: 1; transform: none; }
}

.card.discard-new  { animation: discard-pop .35s var(--ease-spring); }
@keyframes discard-pop {
  from { opacity: 0; transform: scale(1.4) rotate(15deg); }
  to   { opacity: 1; transform: none; }
}

.card.card-played  { animation: card-fly .4s ease forwards; }
@keyframes card-fly {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.2) translateY(-24px) rotate(8deg); }
  100% { transform: scale(.6) translateY(-100px); opacity: 0; }
}

/* ── Discard pile ── */
.discard-pile .card { cursor: default; }
.discard-pile .card:hover { transform: none; }

/* ── Peek cards ── */
.peek-cards .card { cursor: default; transform: scale(.8); }
.peek-cards .card:hover { transform: scale(.8); }

/* ════════════════════════════════════════════════════
   CANDY CRUSH BURST TEXT
   ════════════════════════════════════════════════════ */
.burst-text {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-heading);
  font-weight: 900;
  text-align: center;
  line-height: 1;
  /* Stroke */
  -webkit-text-stroke: 2px rgba(0,0,0,.55);
  paint-order: stroke fill;
  animation: burst-anim 1.25s cubic-bezier(.22,.8,.44,1) forwards;
  transform-origin: center;
  letter-spacing: -.01em;
}

@keyframes burst-anim {
  0%   { opacity: 0;   transform: scale(.3) rotate(-10deg) translateY(0); }
  15%  { opacity: 1;   transform: scale(1.35) rotate(4deg) translateY(-20px); }
  35%  { opacity: 1;   transform: scale(.95) rotate(-2deg) translateY(-50px); }
  55%  { opacity: 1;   transform: scale(1.08) rotate(1deg) translateY(-80px); }
  80%  { opacity: .9;  transform: scale(1)   rotate(0deg) translateY(-120px); }
  100% { opacity: 0;   transform: scale(.8)  rotate(0deg) translateY(-170px); }
}

/* Particle dots around burst text */
.burst-particle {
  position: fixed;
  z-index: 9998;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-fly 1s ease-out forwards;
}
@keyframes particle-fly {
  0%   { opacity: 1; transform: scale(1) translate(0,0); }
  100% { opacity: 0; transform: scale(.3) translate(var(--tx), var(--ty)); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .card { width: 76px; height: 112px; font-size: 1.6rem; border-radius: 5px; }
  .card-oval { width: 52px; height: 78px; }
  .card-img { border-radius: 4px; }
  .card-value { font-size: 2rem; }
  .card-icon { font-size: 1.8rem; }
  .card-label { font-size: .38rem; }
  .card-corner { font-size: .62rem; }
  .card-corner-num { font-size: .72rem; }
  .hand-container .card { margin-left: -18px; }
  .hand-container .card:hover { transform: translateY(-18px) scale(1.07); }
}
@media (max-width: 480px) {
  .card { width: 60px; height: 88px; font-size: 1.25rem; border-radius: 4px; }
  .card-oval { width: 40px; height: 60px; }
  .card-img { border-radius: 3px; }
  .card-value { font-size: 1.5rem; }
  .card-icon { font-size: 1.4rem; }
  .hand-container .card { margin-left: -14px; }
  .hand-container .card:hover { transform: translateY(-14px) scale(1.05); }
}