diff --git a/css/main.css b/css/main.css
index 1105dfb..164ad9c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -552,4 +552,526 @@ th {
width: 100%;
height: 100%;
border: none;
+}
+/* ===
+== ゲームアニメーション ===== */
+
+/* ゲームオーバーレイ */
+.game-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ backdrop-filter: blur(10px);
+}
+
+.game-overlay.hidden {
+ display: none;
+}
+
+.overlay-content {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* ロボットアニメーション */
+.robot-animation {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+}
+
+.robot-container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ animation: robotFloat 2s ease-in-out infinite;
+}
+
+@keyframes robotFloat {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-10px); }
+}
+
+.robot {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+}
+
+.robot-head {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(145deg, #e6e6e6, #ffffff);
+ border-radius: 20px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+ animation: robotThink 3s ease-in-out infinite;
+}
+
+@keyframes robotThink {
+ 0%, 100% { transform: rotate(0deg); }
+ 25% { transform: rotate(-5deg); }
+ 75% { transform: rotate(5deg); }
+}
+
+.robot-eye {
+ width: 12px;
+ height: 12px;
+ background: #667eea;
+ border-radius: 50%;
+ position: absolute;
+ top: 25px;
+ animation: robotBlink 2s ease-in-out infinite;
+}
+
+.left-eye {
+ left: 20px;
+}
+
+.right-eye {
+ right: 20px;
+}
+
+@keyframes robotBlink {
+ 0%, 90%, 100% { transform: scaleY(1); }
+ 95% { transform: scaleY(0.1); }
+}
+
+.robot-mouth {
+ width: 20px;
+ height: 10px;
+ background: #4a5568;
+ border-radius: 0 0 20px 20px;
+ position: absolute;
+ bottom: 20px;
+ animation: robotSpeak 1.5s ease-in-out infinite;
+}
+
+@keyframes robotSpeak {
+ 0%, 100% { transform: scaleY(1); }
+ 50% { transform: scaleY(1.5); }
+}
+
+.robot-body {
+ width: 60px;
+ height: 80px;
+ background: linear-gradient(145deg, #f0f0f0, #ffffff);
+ border-radius: 15px;
+ position: relative;
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+.robot-chest {
+ width: 30px;
+ height: 30px;
+ background: #667eea;
+ border-radius: 50%;
+ position: absolute;
+ top: 15px;
+ left: 50%;
+ transform: translateX(-50%);
+ animation: robotHeartbeat 1s ease-in-out infinite;
+}
+
+@keyframes robotHeartbeat {
+ 0%, 100% { transform: translateX(-50%) scale(1); }
+ 50% { transform: translateX(-50%) scale(1.1); }
+}
+
+.robot-arm {
+ width: 15px;
+ height: 50px;
+ background: linear-gradient(145deg, #e6e6e6, #ffffff);
+ border-radius: 10px;
+ position: absolute;
+ top: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.left-arm {
+ left: -20px;
+ animation: robotArmLeft 2s ease-in-out infinite;
+}
+
+.right-arm {
+ right: -20px;
+ animation: robotArmRight 2s ease-in-out infinite;
+}
+
+@keyframes robotArmLeft {
+ 0%, 100% { transform: rotate(0deg); }
+ 50% { transform: rotate(-15deg); }
+}
+
+@keyframes robotArmRight {
+ 0%, 100% { transform: rotate(0deg); }
+ 50% { transform: rotate(15deg); }
+}
+
+.robot-legs {
+ display: flex;
+ gap: 10px;
+}
+
+.robot-leg {
+ width: 20px;
+ height: 40px;
+ background: linear-gradient(145deg, #e6e6e6, #ffffff);
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ animation: robotWalk 1s ease-in-out infinite alternate;
+}
+
+.left-leg {
+ animation-delay: 0s;
+}
+
+.right-leg {
+ animation-delay: 0.5s;
+}
+
+@keyframes robotWalk {
+ 0% { transform: translateY(0px); }
+ 100% { transform: translateY(5px); }
+}
+
+/* 思考バブル */
+.thinking-bubbles {
+ position: absolute;
+ top: -60px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 15px;
+}
+
+.bubble {
+ background: white;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ color: #4a5568;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ animation: bubbleFloat 2s ease-in-out infinite;
+}
+
+.bubble-1 {
+ animation-delay: 0s;
+}
+
+.bubble-2 {
+ animation-delay: 0.5s;
+}
+
+.bubble-3 {
+ animation-delay: 1s;
+}
+
+@keyframes bubbleFloat {
+ 0%, 100% {
+ transform: translateY(0px) scale(1);
+ opacity: 0.7;
+ }
+ 50% {
+ transform: translateY(-15px) scale(1.1);
+ opacity: 1;
+ }
+}
+
+.robot-text {
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 600;
+ text-align: center;
+ animation: textPulse 2s ease-in-out infinite;
+}
+
+@keyframes textPulse {
+ 0%, 100% { opacity: 0.8; }
+ 50% { opacity: 1; }
+}
+
+/* 結果アニメーション */
+.result-animation {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ animation: resultAppear 0.8s ease-out;
+}
+
+@keyframes resultAppear {
+ 0% {
+ opacity: 0;
+ transform: scale(0.5) translateY(50px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateY(0px);
+ }
+}
+
+.result-icon {
+ font-size: 5rem;
+ animation: iconBounce 1s ease-out;
+}
+
+@keyframes iconBounce {
+ 0% { transform: scale(0); }
+ 50% { transform: scale(1.2); }
+ 100% { transform: scale(1); }
+}
+
+.result-text {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ animation: textSlideUp 0.8s ease-out 0.3s both;
+}
+
+@keyframes textSlideUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+}
+
+/* 成功エフェクト */
+.success-effects {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.cracker {
+ position: absolute;
+ bottom: 10%;
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
+ border-radius: 50%;
+ animation: crackerExplode 0.8s ease-out;
+}
+
+.left-cracker {
+ left: 10%;
+ animation-delay: 0.2s;
+}
+
+.right-cracker {
+ right: 10%;
+ animation-delay: 0.4s;
+}
+
+@keyframes crackerExplode {
+ 0% {
+ transform: scale(0) rotate(0deg);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.5) rotate(180deg);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(0.5) rotate(360deg);
+ opacity: 0;
+ }
+}
+
+.rocket-container {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 200px;
+ height: 100%;
+}
+
+.rocket {
+ position: absolute;
+ font-size: 3rem;
+ animation: rocketLaunch 2s ease-out;
+}
+
+.rocket-1 {
+ left: 20%;
+ animation-delay: 0.3s;
+}
+
+.rocket-2 {
+ left: 50%;
+ animation-delay: 0.6s;
+}
+
+.rocket-3 {
+ left: 80%;
+ animation-delay: 0.9s;
+}
+
+@keyframes rocketLaunch {
+ 0% {
+ bottom: 0%;
+ opacity: 1;
+ transform: rotate(0deg) scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: rotate(180deg) scale(1.2);
+ }
+ 100% {
+ bottom: 100%;
+ opacity: 0;
+ transform: rotate(360deg) scale(0.5);
+ }
+}
+
+/* 失敗エフェクト */
+.failure-effects {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.shake-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ animation: shakeEffect 0.6s ease-in-out;
+}
+
+@keyframes shakeEffect {
+ 0%, 100% { transform: translateX(0); }
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+ 20%, 40%, 60%, 80% { transform: translateX(10px); }
+}
+
+.error-icon {
+ font-size: 5rem;
+ animation: errorPulse 1s ease-in-out infinite;
+}
+
+@keyframes errorPulse {
+ 0%, 100% {
+ transform: scale(1);
+ filter: brightness(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ filter: brightness(1.2);
+ }
+}
+
+.error-waves {
+ position: relative;
+ width: 200px;
+ height: 200px;
+}
+
+.wave {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border: 3px solid #ff6b6b;
+ border-radius: 50%;
+ animation: waveExpand 1.5s ease-out infinite;
+}
+
+.wave-1 {
+ animation-delay: 0s;
+}
+
+.wave-2 {
+ animation-delay: 0.3s;
+}
+
+.wave-3 {
+ animation-delay: 0.6s;
+}
+
+@keyframes waveExpand {
+ 0% {
+ width: 0;
+ height: 0;
+ opacity: 1;
+ }
+ 100% {
+ width: 200px;
+ height: 200px;
+ opacity: 0;
+ }
+}
+
+/* 紙吹雪エフェクト（既存の改良版） */
+.confetti {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
+ animation: confettiFall 3s linear infinite;
+}
+
+@keyframes confettiFall {
+ 0% {
+ top: -10px;
+ transform: rotateZ(0deg);
+ }
+ 100% {
+ top: 100vh;
+ transform: rotateZ(720deg);
+ }
+}
+
+/* レスポンシブ対応 */
+@media (max-width: 768px) {
+ .robot-container {
+ transform: scale(0.8);
+ }
+
+ .result-icon {
+ font-size: 3rem;
+ }
+
+ .result-text {
+ font-size: 1.8rem;
+ }
+
+ .robot-text {
+ font-size: 1rem;
+ }
+
+ .thinking-bubbles {
+ transform: translateX(-50%) scale(0.8);
+ }
}
\ No newline at end of file
diff --git a/css/word-reorder.css b/css/word-reorder.css
new file mode 100644
index 0000000..48c1831
--- /dev/null
+++ b/css/word-reorder.css
@@ -0,0 +1,558 @@
+/* Word Reorder UI Styles */
+
+.word-reorder-container {
+ max-width: 100%;
+ margin: 0 auto;
+ padding: 1rem;
+ font-family: 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
+}
+
+.instruction {
+ text-align: center;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.instruction p {
+ margin: 0;
+ font-size: 1.1rem;
+ font-weight: 500;
+}
+
+/* 回答エリア */
+.answer-area {
+ margin-bottom: 2rem;
+}
+
+.answer-area h4 {
+ margin: 0 0 0.8rem 0;
+ color: #2d3748;
+ font-size: 1.2rem;
+ display: flex;
+ align-items: center;
+}
+
+.answer-area h4::before {
+ content: '✓';
+ margin-right: 0.5rem;
+ color: #48bb78;
+ font-weight: bold;
+}
+
+.selected-words {
+ min-height: 80px;
+ padding: 1rem;
+ border: 2px dashed #cbd5e0;
+ border-radius: 12px;
+ background-color: #f7fafc;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ align-items: flex-start;
+ transition: all 0.3s ease;
+}
+
+.selected-words:not(:empty) {
+ border-color: #48bb78;
+ background-color: #f0fff4;
+}
+
+/* 選択可能エリア */
+.available-area {
+ margin-bottom: 2rem;
+}
+
+.available-area h4 {
+ margin: 0 0 0.8rem 0;
+ color: #2d3748;
+ font-size: 1.2rem;
+ display: flex;
+ align-items: center;
+}
+
+.available-area h4::before {
+ content: '📝';
+ margin-right: 0.5rem;
+}
+
+.available-words {
+ min-height: 120px;
+ padding: 1rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 12px;
+ background-color: #ffffff;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ align-items: flex-start;
+}
+
+/* 単語トークン */
+.word-token {
+ display: inline-block;
+ padding: 0.6rem 1rem;
+ border-radius: 8px;
+ font-family: 'Fira Code', 'Consolas', monospace;
+ font-size: 0.95rem;
+ font-weight: 500;
+ cursor: pointer;
+ user-select: none;
+ transition: all 0.2s ease;
+ border: 2px solid transparent;
+ position: relative;
+
+ /* タップターゲットサイズを確保（最小44px） */
+ min-height: 44px;
+ min-width: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+/* トークンタイプ別のスタイル */
+.word-token.keyword {
+ background-color: #e3f2fd;
+ color: #1976d2;
+ border-color: #bbdefb;
+}
+
+.word-token.identifier {
+ background-color: #f3e5f5;
+ color: #7b1fa2;
+ border-color: #e1bee7;
+}
+
+.word-token.operator {
+ background-color: #fff3e0;
+ color: #f57c00;
+ border-color: #ffcc02;
+}
+
+.word-token.number {
+ background-color: #e8f5e8;
+ color: #388e3c;
+ border-color: #c8e6c9;
+}
+
+.word-token.string {
+ background-color: #fce4ec;
+ color: #c2185b;
+ border-color: #f8bbd9;
+}
+
+.word-token.punctuation {
+ background-color: #f5f5f5;
+ color: #616161;
+ border-color: #e0e0e0;
+}
+
+/* ホバー効果 */
+.word-token:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ border-color: currentColor;
+}
+
+/* タップ効果 */
+.word-token.tapped {
+ transform: scale(0.95);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* 選択された単語のスタイル */
+.word-token.selected {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.word-token.selected:hover {
+ transform: translateY(-1px);
+ opacity: 0.8;
+}
+
+/* 新しく追加された単語のアニメーション */
+.word-token.word-added {
+ animation: wordAdded 0.3s ease-out;
+}
+
+@keyframes wordAdded {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0;
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* 空のメッセージ */
+.empty-message {
+ color: #a0aec0;
+ font-style: italic;
+ text-align: center;
+ width: 100%;
+ padding: 1rem;
+ font-size: 1rem;
+}
+
+/* コントロールボタン */
+.controls {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 2rem;
+}
+
+.control-button {
+ padding: 0.8rem 1.5rem;
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ min-height: 44px;
+ min-width: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
+
+.reset-button {
+ background-color: #f56565;
+ color: white;
+ box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
+}
+
+.reset-button:hover {
+ background-color: #e53e3e;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
+}
+
+.check-button {
+ background-color: #48bb78;
+ color: white;
+ box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
+}
+
+.check-button:hover {
+ background-color: #38a169;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
+}
+
+.control-button:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+/* リセットアニメーション */
+.word-reorder-container.reset-animation {
+ animation: resetPulse 0.3s ease-out;
+}
+
+@keyframes resetPulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.02);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+/* レスポンシブデザイン */
+
+/* タブレット */
+@media (max-width: 768px) {
+ .word-reorder-container {
+ padding: 0.8rem;
+ }
+
+ .instruction {
+ padding: 0.8rem;
+ margin-bottom: 1.2rem;
+ }
+
+ .instruction p {
+ font-size: 1rem;
+ }
+
+ .word-token {
+ padding: 0.5rem 0.8rem;
+ font-size: 0.9rem;
+ min-height: 40px;
+ min-width: 40px;
+ }
+
+ .controls {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .control-button {
+ width: 100%;
+ max-width: 300px;
+ }
+}
+
+/* スマートフォン */
+@media (max-width: 480px) {
+ .word-reorder-container {
+ padding: 0.5rem;
+ }
+
+ .instruction {
+ padding: 0.6rem;
+ margin-bottom: 1rem;
+ }
+
+ .instruction p {
+ font-size: 0.95rem;
+ }
+
+ .answer-area h4,
+ .available-area h4 {
+ font-size: 1.1rem;
+ }
+
+ .selected-words,
+ .available-words {
+ padding: 0.8rem;
+ gap: 0.4rem;
+ }
+
+ .word-token {
+ padding: 0.4rem 0.7rem;
+ font-size: 0.85rem;
+ min-height: 44px; /* タップターゲットサイズを維持 */
+ min-width: 44px;
+ }
+
+ .control-button {
+ padding: 0.7rem 1.2rem;
+ font-size: 0.95rem;
+ min-height: 44px;
+ }
+}
+
+/* 非常に小さい画面 */
+@media (max-width: 320px) {
+ .word-token {
+ padding: 0.3rem 0.5rem;
+ font-size: 0.8rem;
+ min-height: 44px;
+ min-width: 44px;
+ }
+
+ .selected-words,
+ .available-words {
+ padding: 0.6rem;
+ gap: 0.3rem;
+ }
+}
+
+/* ダークモード対応 */
+@media (prefers-color-scheme: dark) {
+ .word-reorder-container {
+ color: #e2e8f0;
+ }
+
+ .answer-area h4,
+ .available-area h4 {
+ color: #e2e8f0;
+ }
+
+ .selected-words {
+ background-color: #2d3748;
+ border-color: #4a5568;
+ }
+
+ .selected-words:not(:empty) {
+ border-color: #48bb78;
+ background-color: #1a202c;
+ }
+
+ .available-words {
+ background-color: #2d3748;
+ border-color: #4a5568;
+ }
+
+ .empty-message {
+ color: #718096;
+ }
+}
+
+/* アクセシビリティ */
+@media (prefers-reduced-motion: reduce) {
+ .word-token,
+ .control-button,
+ .selected-words,
+ .word-reorder-container {
+ transition: none;
+ }
+
+ .word-token.word-added {
+ animation: none;
+ }
+
+ .word-reorder-container.reset-animation {
+ animation: none;
+ }
+}
+
+/* フォーカス表示（キーボードナビゲーション対応） */
+.word-token:focus,
+.control-button:focus {
+ outline: 2px solid #4299e1;
+ outline-offset: 2px;
+}
+
+/* 高コントラストモード対応 */
+@media (prefers-contrast: high) {
+ .word-token {
+ border-width: 3px;
+ }
+
+ .selected-words,
+ .available-words {
+ border-width: 3px;
+ }
+}
+/*
+ゲームオーバーレイ（アニメーション用） */
+.game-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ backdrop-filter: blur(5px);
+}
+
+.game-overlay.hidden {
+ display: none;
+}
+
+.overlay-content {
+ text-align: center;
+ color: white;
+}
+
+.suspense-text {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 2rem;
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 0.7;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.05);
+ }
+}
+
+.result-animation {
+ text-align: center;
+}
+
+.result-icon {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: bounceIn 0.6s ease-out;
+}
+
+.result-text {
+ font-size: 2.5rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+
+.result-text.correct {
+ color: #48bb78;
+ text-shadow: 0 0 20px rgba(72, 187, 120, 0.5);
+}
+
+.result-text.incorrect {
+ color: #f56565;
+ text-shadow: 0 0 20px rgba(245, 101, 101, 0.5);
+}
+
+@keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.3);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* 紙吹雪アニメーション */
+.confetti {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: #f39c12;
+ animation: confetti-fall linear infinite;
+}
+
+.confetti:nth-child(odd) {
+ background: #e74c3c;
+ width: 8px;
+ height: 8px;
+ animation-duration: 3s;
+}
+
+.confetti:nth-child(even) {
+ background: #3498db;
+ width: 6px;
+ height: 6px;
+ animation-duration: 2.5s;
+}
+
+.confetti:nth-child(3n) {
+ background: #2ecc71;
+ width: 12px;
+ height: 12px;
+ animation-duration: 3.5s;
+}
+
+@keyframes confetti-fall {
+ 0% {
+ transform: translateY(-100vh) rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(100vh) rotate(720deg);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 75464aa..201f2bd 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
SQL学習ゲーム
+
@@ -66,6 +67,11 @@
解説スライド
+
+
+
+
+
@@ -105,6 +111,68 @@ 💡 ヒント
+
+
+
diff --git a/js/game-engine.js b/js/game-engine.js
index 0942248..ecda5e0 100644
--- a/js/game-engine.js
+++ b/js/game-engine.js
@@ -105,6 +105,163 @@ export class GameEngine {
};
}
+ /**
+ * word-reorderチャレンジの回答をチェック
+ * @param {string} userSQL - ユーザーが構築したSQL
+ * @returns {Promise