바라트로: 포커 로그라이크의 감각적인 피드백

플러시 점수 획득 시 (카드 5장, 기본 175칩)

LAYER 1: 카드 애니메이션
  카드가 핸드에서 → 점수 영역으로 슬라이드
  각 카드가 스프링 바운스로 뒤집힘
  약간의 회전 랜덤성(±3도)으로 유기적 느낌

LAYER 2: 칩 카운터
  숫자가 그냥 나타나지 않고 — 굴러간다(ROLL)
  각 자릿수가 슬롯머신 릴처럼 회전
  파란색 칩 카운트가 올라간 후, 빨간색 배율이 발동

LAYER 3: 화면 효과
  화면 흔들림 강도가 점수 크기에 비례
  CRT 스캔라인이 순간적으로 강해짐
  배경색이 해당 핸드의 색상 쪽으로 펄스

LAYER 4: 파티클 시스템
  점수 획득한 카드에서 칩이 폭발
  점수가 총점으로 날아갈 때 트레일 파티클이 따라감
  색상이 포커 핸드 종류에 매칭

LAYER 5: 오디오
  각 카드가 상승하는 피치의 음을 재생 (5장 기준 C, D, E, F, G)
  배율 발동 시 고유한 "짤랑" 레이어
  목표 점수 도달 = 베이스 드롭 + 화면 플래시

.score-digit {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
}

.score-digit-inner {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 각 자릿수가 시차를 두고 독립적으로 롤링 */
.score-digit:nth-child(1) .score-digit-inner { transition-delay: 0ms; }
.score-digit:nth-child(2) .score-digit-inner { transition-delay: 50ms; }
.score-digit:nth-child(3) .score-digit-inner { transition-delay: 100ms; }
.score-digit:nth-child(4) .score-digit-inner { transition-delay: 150ms; }

/* 롤링: translateY로 목표 자릿수 표시 */
.score-digit-inner[data-value="7"] {
  transform: translateY(-840%); /* 7 * 120% per digit height */
}

/* Balatro 스타일 CRT 오버레이 */
.crt-container {
  position: relative;
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
}

/* 스캔라인 오버레이 */
.crt-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 10;
}

/* 비네트를 통한 미세한 화면 곡률 */
.crt-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 11;
}

/* 텍스트/요소의 형광체 글로우 */
.crt-text {
  color: #e8e8e8;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.5),
    0 0 8px rgba(100, 200, 255, 0.15);
}

플레이한 핸드: 킹 4장

Step 1: 기본 핸드 평가
  "Four of a Kind" 라벨 표시
  기본: 60칩 × 7배율

Step 2: 각 조커가 순서대로 발동 (왼쪽에서 오른쪽)
  ┌─────────┐  ┌─────────┐  ┌─────────┐
  │ Joker 1 │→ │ Joker 2 │→ │ Joker 3 │
  │ +4 배율 │  │ ×1.5    │  │ +30칩   │
  │ (펄스)  │  │ (펄스)  │  │ (펄스)  │
  └─────────┘  └─────────┘  └─────────┘
  각 조커가 활성화될 때 물리적으로 바운스
  각 발동 후 누적 합계 업데이트

Step 3: 최종 점수 애니메이션
  90칩 × 15.0배율 = 1,350
  점수가 트레일 파티클과 함께 칩 총합으로 날아감

핵심 인사이트:
  각 조커 발동을 개별적으로 보여줌으로써
  플레이어는 어떤 조합이 중요한지 학습한다.
  이것이 10페이지짜리 튜토리얼을
  300ms의 순차 애니메이션으로 대체한다.

/* 점수 비례 화면 흔들림 */
@keyframes shake-small {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -2px); }
  75% { transform: translate(-1px, 2px); }
}

@keyframes shake-medium {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 3px); }
  40% { transform: translate(3px, -4px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(4px, -3px); }
}

@keyframes shake-large {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 6px) rotate(-1deg); }
  30% { transform: translate(6px, -8px) rotate(0.5deg); }
  50% { transform: translate(-6px, 4px) rotate(-0.5deg); }
  70% { transform: translate(8px, -6px) rotate(1deg); }
  90% { transform: translate(-4px, 8px) rotate(-0.5deg); }
}

/* 점수 크기에 따라 적용 */
.game-container.shake-small { animation: shake-small 0.2s ease-out; }
.game-container.shake-medium { animation: shake-medium 0.3s ease-out; }
.game-container.shake-large { animation: shake-large 0.5s ease-out; }

function triggerScoreShake(score) {
  const container = document.querySelector('.game-container');
  let shakeClass;

  if (score > 10000) shakeClass = 'shake-large';
  else if (score > 1000) shakeClass = 'shake-medium';
  else shakeClass = 'shake-small';

  container.classList.add(shakeClass);
  container.addEventListener('animationend', () => {
    container.classList.remove(shakeClass);
  }, { once: true });
}

/* 패럴랙스 틸트가 적용된 카드 호버 */
.card {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  transform-style: preserve-3d;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(100, 150, 255, 0.15);
}

/* 선택된 카드는 더 높이 올라감 */
.card.selected {
  transform: translateY(-24px) scale(1.08);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 200, 50, 0.3);
}

/* 특수 카드의 포일/홀로그래픽 쉬머 */
.card.foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(200, 220, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 80%
  );
  background-size: 200% 200%;
  animation: foil-shimmer 3s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}

@keyframes foil-shimmer {
  0% { background-position: 200% 200%; }
  50% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

BALATRO의 점수 색상 체계

  파란색 (#009dff)  = 칩 (기본 값)
  빨간색 (#fe5f55)  = 배율
  금색   (#f0c040)  = 자금/경제
  초록색 (#50c878)  = 남은 핸드
  보라색 (#9b59b6)  = 플래닛 카드 (핸드 업그레이드)

게임 내 모든 숫자가 이 팔레트를 사용한다.
라벨이 필요 없다 — 색상이 곧 라벨이다.