バラトロ：ポーカーローグライクにおけるジューシーなフィードバック

フラッシュをスコアリングする場合（5枚、ベース175チップ）

レイヤー 1: カードアニメーション
  カードが手札 → スコアリングエリアへスライド
  各カードがスプリングバウンスで裏返る
  有機的な感触のためのわずかな回転ランダム性（±3deg）

レイヤー 2: チップカウンター
  数字は単に表示されるのではなく、ロールする
  各桁がスロットマシンのリールのように回転
  青のチップカウントが上昇し、次に赤のマルチプライヤーが発動

レイヤー 3: スクリーンエフェクト
  画面揺れの強度がスコアの大きさに比例
  CRTスキャンラインが一瞬強調される
  背景色がハンドのカラーに向かってパルス

レイヤー 4: パーティクルシステム
  スコアリングされたカードからチップが飛散
  トレイルパーティクルがスコアの合計への飛行に追従
  色がポーカーハンドタイプに対応

レイヤー 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; }

/* ロール：ターゲットの桁を表示するためにY方向にトランスレート */
.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枚

ステップ 1: ベースハンドの評価
  「Four of a Kind」ラベルが表示
  ベース: 60 chips × 7 mult

ステップ 2: 各Jokerが順番に発動（左から右）
  ┌─────────┐  ┌─────────┐  ┌─────────┐
  │ Joker 1 │→ │ Joker 2 │→ │ Joker 3 │
  │ +4 mult │  │ ×1.5    │  │ +30chips│
  │ (pulse) │  │ (pulse) │  │ (pulse) │
  └─────────┘  └─────────┘  └─────────┘
  各Jokerはアクティベート時に物理的にバウンスする
  各トリガー後にランニングトータルが更新される

ステップ 3: 最終スコアアニメーション
  90 chips × 15.0 mult = 1,350
  スコアがトレイルパーティクルとともにチップ合計へ飛んでいく

重要な洞察：
  各Jokerのトリガーを個別に見せることで、
  プレイヤーはどの組み合わせが重要かを学ぶ。
  これは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のスコアリングカラーシステム

  Blue (#009dff)  = チップ（ベース値）
  Red  (#fe5f55)  = マルチプライヤー
  Gold (#f0c040)  = マネー/経済
  Green (#50c878) = 残りハンド数
  Purple (#9b59b6)= Planetカード（ハンドアップグレード）

ゲーム内のすべての数値がこのパレットを使用。
ラベルは不要 — 色そのものがラベルだ。