M9: 게임 26종 30초 요약 카드·[?] 지금 할 수 있는 것 내용

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/games/ninety-nine/quick.tsx

@@ -0,0 +1,72 @@
+/** 구십구 30초 규칙 요약 (docs/07 §5). */
+import type { QuickCard } from '../types';
+
+/** A 44 × 62 card at (x, y). */
+function Card({ label, x, y, color = '#1d4ed8', dim, ok }: { label: string; x: number; y: number; color?: string; dim?: boolean; ok?: boolean }) {
+  return (
+    <g transform={`translate(${x} ${y})`} opacity={dim ? 0.45 : 1}>
+      {ok && <rect x={-3} y={-3} width={50} height={68} rx={9} fill="none" stroke="#16a34a" strokeWidth={3} />}
+      <rect width={44} height={62} rx={7} fill="#fffef9" stroke={color} strokeWidth={2.5} />
+      <text x={22} y={40} textAnchor="middle" fontSize={label.length > 2 ? 15 : 22} fontWeight={900} fill={color}>
+        {label}
+      </text>
+    </g>
+  );
+}
+
+function Dial({ n, x, y, r = 30, hot }: { n: number; x: number; y: number; r?: number; hot?: boolean }) {
+  return (
+    <g>
+      <circle cx={x} cy={y} r={r} fill={hot ? '#b91c1c' : '#1f2937'} />
+      <text x={x} y={y + 9} textAnchor="middle" fontSize={26} fontWeight={900} fill="#fff">
+        {n}
+      </text>
+    </g>
+  );
+}
+
+export const quickStart: QuickCard[] = [
+  {
+    pic: (
+      <svg viewBox="0 0 250 110" width={250} height={110} aria-hidden>
+        <Dial n={85} x={40} y={50} />
+        <text x={84} y={58} fontSize={24} fontWeight={900} fill="#374151">+</text>
+        <Card label="10" x={104} y={19} />
+        <text x={160} y={58} fontSize={24} fontWeight={900} fill="#374151">=</text>
+        <Dial n={95} x={212} y={50} hot />
+      </svg>
+    ),
+    alt: '합계 85에 10 카드를 내서 95가 되는 모습',
+    title: '내 카드를 더해요',
+    text: '차례마다 카드 1장을 내고 그 수만큼 합계를 바꿔요. 보통은 낸 뒤 1장을 다시 받아요.',
+  },
+  {
+    pic: (
+      <svg viewBox="0 0 250 120" width={250} height={120} aria-hidden>
+        <Dial n={95} x={36} y={50} hot />
+        <Card label="8" x={90} y={19} dim />
+        <text x={112} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">103 ✕</text>
+        <Card label="7" x={144} y={19} dim />
+        <text x={166} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">102 ✕</text>
+        <Card label="±9" x={198} y={19} color="#7c3aed" ok />
+        <text x={220} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#15803d">−9 → 86</text>
+      </svg>
+    ),
+    alt: '합계 95에서 8과 7은 99를 넘어 어둡고, ±9 카드만 빼기로 낼 수 있어요',
+    title: '99를 넘기면 안 돼요',
+    text: '합계가 99를 넘게 되는 카드는 낼 수 없어요. 낼 카드가 하나도 없으면 져요(탈락하거나 목숨을 잃어요).',
+  },
+  {
+    pic: (
+      <svg viewBox="0 0 250 90" width={250} height={90} aria-hidden>
+        <Card label="±9" x={8} y={14} color="#7c3aed" />
+        <Card label="±10" x={68} y={14} color="#7c3aed" />
+        <Card label="0" x={128} y={14} color="#0f766e" />
+        <Card label="조커" x={188} y={14} color="#be185d" />
+      </svg>
+    ),
+    alt: '특수 카드 ±9, ±10, 0, 조커',
+    title: '특수 카드로 버텨요',
+    text: '±9·±10은 빼기도 돼요. 0은 방향만 바꾸고, 조커는 합계를 원하는 수(보통 60~99)로 만들어요. 끝까지 남으면 이겨요.',
+  },
+];