"use client"; function MainComponent() { const [witches, setWitches] = React.useState([]); const [loading, setLoading] = React.useState(true); const [activeWitch, setActiveWitch] = React.useState(null); const [currentIndex, setCurrentIndex] = React.useState(0); const [playerDeck, setPlayerDeck] = React.useState([]); const [availableWitches, setAvailableWitches] = React.useState([]); const [gamePhase, setGamePhase] = React.useState("deck-building"); const [aiDeck, setAiDeck] = React.useState([]); const [activeAiWitch, setActiveAiWitch] = React.useState(null); const [battleLog, setBattleLog] = React.useState([]); const [playerCurrentIndex, setPlayerCurrentIndex] = React.useState(0); const [aiCurrentIndex, setAiCurrentIndex] = React.useState(0); const [winner, setWinner] = React.useState(null); const [selectedWitchIndex, setSelectedWitchIndex] = React.useState(null); const [draggedWitch, setDraggedWitch] = React.useState(null); const [currentTurn, setCurrentTurn] = React.useState("player"); const [battleMessage, setBattleMessage] = React.useState(""); const [showBattleMessage, setShowBattleMessage] = React.useState(false); const [showVictoryCard, setShowVictoryCard] = React.useState(false); const [victoryWitch, setVictoryWitch] = React.useState(null); const [isLandscape, setIsLandscape] = React.useState(false); React.useEffect(()=>{ const checkOrientation = ()=>{ if (window.innerWidth <= 768) { setIsLandscape(window.innerHeight < window.innerWidth); } else { setIsLandscape(false); } }; checkOrientation(); window.addEventListener("resize", checkOrientation); return ()=>window.removeEventListener("resize", checkOrientation); }, []); React.useEffect(()=>{ fetch("/api/db/halloween-87", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `halloween_data`", values: [] }) }).then((res)=>{ if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } return res.json(); }).then((data)=>{ const formattedWitches = data.map((witch)=>({ name: witch.名前, hp: parseInt(witch.HP, 10), attack: parseInt(witch.攻撃力, 10), magic: parseInt(witch.魔力, 10), speed: parseInt(witch.素早さ, 10), durability: parseInt(witch.耐久力, 10), attribute: witch.属性, skill1: witch.スキル1, skill2: witch.スキル2, imageUrl: witch.画像URL })); const shuffled = [ ...formattedWitches ].sort(()=>0.5 - Math.random()); const selected = shuffled.slice(0, 10); setWitches(formattedWitches); setAvailableWitches(selected); setLoading(false); }).catch((error)=>{ console.error("データの取得に失敗しました:", error); setLoading(false); }); }, []); const handleSelectWitch = (witch)=>{ if (playerDeck.length < 5) { setPlayerDeck([ ...playerDeck, witch ]); setAvailableWitches(availableWitches.filter((w)=>w !== witch)); } }; const startBattle = ()=>{ if (playerDeck.length === 5) { const remainingWitches = availableWitches.slice(0, 5); setAiDeck(remainingWitches); setGamePhase("battle"); setActiveWitch(playerDeck[0]); setActiveAiWitch(remainingWitches[0]); setPlayerCurrentIndex(0); setAiCurrentIndex(0); setBattleLog([ { source: "system", message: "バトル開始！" } ]); setSelectedWitchIndex(0); } }; const handleAction = async (action)=>{ if (!activeWitch || !activeAiWitch || winner) return; const calculateDamage = (attacker, defender, actionType)=>{ let damage = actionType === "attack" ? attacker.attack : attacker.magic; if (attacker.attribute === "地" && defender.attribute === "水" || attacker.attribute === "水" && defender.attribute === "風" || attacker.attribute === "風" && defender.attribute === "地") { damage *= 1.5; } const defenseBonus = actionType === "defend" ? 0.5 : defender.durability / 200; const randomFactor = 0.9 + Math.random() * 0.2; return Math.floor(damage * (1 - defenseBonus) * randomFactor); }; const playerFirst = activeWitch.speed > activeAiWitch.speed; const executeAction = (attacker, defender, actionType, source)=>{ const damage = calculateDamage(attacker, defender, actionType); const newDefender = { ...defender, hp: Math.max(0, defender.hp - damage) }; setBattleLog((prev)=>[ { source: source, message: `${attacker.name}の${actionType === "attack" ? "攻撃" : actionType === "skill" ? "魔法" : "防御"}！${damage}のダメージ！` }, ...prev ]); return { newDefender, defeated: newDefender.hp <= 0 }; }; if (currentTurn === "player") { setBattleMessage("プレイヤーのターン！"); setShowBattleMessage(true); await new Promise((resolve)=>setTimeout(resolve, 1000)); const { newDefender: newAiWitch, defeated: aiDefeated } = executeAction(activeWitch, activeAiWitch, action, "player"); setActiveAiWitch(newAiWitch); setBattleMessage(`${activeWitch.name}の${action === "attack" ? "攻撃" : action === "skill" ? "スキル" : "防御"}！`); await new Promise((resolve)=>setTimeout(resolve, 1000)); if (aiDefeated) { const nextAiIndex = aiCurrentIndex + 1; if (nextAiIndex >= aiDeck.length) { setWinner("player"); setBattleMessage("🎉 プレイヤーの勝利！"); setVictoryWitch(activeWitch); setShowVictoryCard(true); return; } setAiCurrentIndex(nextAiIndex); setActiveAiWitch(aiDeck[nextAiIndex]); setBattleMessage(`${activeAiWitch.name}は倒れた！次の魔女が登場！`); await new Promise((resolve)=>setTimeout(resolve, 1000)); } setCurrentTurn("ai"); setBattleMessage("AIのターン！"); await new Promise((resolve)=>setTimeout(resolve, 1000)); const aiAction = activeAiWitch.hp < activeAiWitch.hp * 0.3 ? "defend" : activeAiWitch.magic > activeAiWitch.attack ? "skill" : "attack"; setBattleMessage(`${activeAiWitch.name}の${aiAction === "attack" ? "攻撃" : aiAction === "skill" ? "スキル" : "防御"}！`); await new Promise((resolve)=>setTimeout(resolve, 1000)); const { newDefender: newPlayerWitch, defeated: playerDefeated } = executeAction(activeAiWitch, activeWitch, aiAction, "ai"); setActiveWitch(newPlayerWitch); if (playerDefeated) { const nextPlayerIndex = playerCurrentIndex + 1; if (nextPlayerIndex >= playerDeck.length) { setWinner("ai"); setBattleMessage("🤖 AIの勝利！"); setVictoryWitch(activeAiWitch); setShowVictoryCard(true); return; } setPlayerCurrentIndex(nextPlayerIndex); setActiveWitch(playerDeck[nextPlayerIndex]); setBattleMessage(`${activeWitch.name}は倒れた！次の魔女が登場！`); await new Promise((resolve)=>setTimeout(resolve, 1000)); setSelectedWitchIndex(nextPlayerIndex); } setCurrentTurn("player"); setShowBattleMessage(false); } }; const nextCard = ()=>{ setCurrentIndex((prevIndex)=>availableWitches.length > 0 ? (prevIndex + 1) % availableWitches.length : 0); }; const prevCard = ()=>{ setCurrentIndex((prevIndex)=>availableWitches.length > 0 ? prevIndex === 0 ? availableWitches.length - 1 : prevIndex - 1 : 0); }; const handleDragStart = (witch, index)=>{ setDraggedWitch({ witch, index }); }; const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (targetIndex)=>{ if (draggedWitch === null) return; const newDeck = [ ...playerDeck ]; const [removed] = newDeck.splice(draggedWitch.index, 1); newDeck.splice(targetIndex, 0, removed); setPlayerDeck(newDeck); setDraggedWitch(null); }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#1a1a1a] text-[#ff6b6b]", __source: { fileName: "", lineNumber: 247, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-bounce", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, "🎃 ロード中... 🎃")); } if (!isLandscape && window.innerWidth <= 768) { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-[#1a1a1a] text-white flex flex-col items-center justify-center p-4 text-center", __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, "📱"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this }, "スマートフォンを横向きにしてください"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }, "より良い体験のために横画面でプレイすることをお勧めします")); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#2a2a2a] text-white p-2 md:p-4", __source: { fileName: "", lineNumber: 266, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 267, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl md:text-4xl lg:text-6xl text-center mb-2 md:mb-4 text-[#ff9234] font-henny-penny", __source: { fileName: "", lineNumber: 268, columnNumber: 9 }, __self: this }, "🎃 Witch Deck 🎃")), gamePhase === "deck-building" && /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto bg-[#3a3a3a] rounded-[10px] md:rounded-[20px] p-2 md:p-4 shadow-[0_8px_32px_rgba(0,0,0,0.25)] border-2 md:border-4 border-[#4a4a4a] transform scale-[0.80] md:scale-100 origin-top", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-2 md:mb-4", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-2xl lg:text-3xl font-bold text-[#ff9234] mb-1 md:mb-2", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, "魔女を5人選んでデッキを作ろう！ (", playerDeck.length, "/5)"), /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-lg lg:text-xl text-[#c850c0]", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, currentIndex + 1, " / ", availableWitches.length)), availableWitches.length > 0 && availableWitches[currentIndex] && /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] md:h-[500px] lg:h-[700px] mx-auto", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#2a2a2a] rounded-[10px] md:rounded-[20px] shadow-[0_8px_32px_rgba(0,0,0,0.25)] p-2 md:p-4 transform transition-all duration-300 hover:scale-[1.02]", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-full flex flex-row gap-2 md:gap-4", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex flex-col", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[200px] md:h-[400px] mb-2 md:mb-4 rounded-xl overflow-hidden bg-gradient-to-br from-[#fef6ff] to-[#fdf2ff] shadow-inner", __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: availableWitches[currentIndex].imageUrl, alt: availableWitches[currentIndex].name, className: "w-full h-full object-contain p-2", __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-lg md:text-2xl lg:text-3xl font-bold text-center text-[#c850c0]", __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this }, availableWitches[currentIndex].name, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-center items-center gap-1 md:gap-4 mt-1 md:mt-2", __source: { fileName: "", lineNumber: 298, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-base lg:text-xl text-white", __source: { fileName: "", lineNumber: 299, columnNumber: 25 }, __self: this }, "属性: ", availableWitches[currentIndex].attribute), /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-base lg:text-xl text-white", __source: { fileName: "", lineNumber: 302, columnNumber: 25 }, __self: this }, "スキル: ", availableWitches[currentIndex].skill1)))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex flex-col justify-center space-y-2 md:space-y-4", __source: { fileName: "", lineNumber: 308, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-2 md:p-6 rounded-xl", __source: { fileName: "", lineNumber: 309, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 310, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-3xl", __source: { fileName: "", lineNumber: 311, columnNumber: 25 }, __self: this }, "❤️"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 312, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-[24px] mb-1 text-[#ff6b6b]", __source: { fileName: "", lineNumber: 313, columnNumber: 27 }, __self: this }, "HP"), /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-8 bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 316, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#ff6b6b] to-[#ff8585]", style: { width: `${Math.min(100, availableWitches[currentIndex].hp / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 317, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-2xl font-bold", __source: { fileName: "", lineNumber: 329, columnNumber: 25 }, __self: this }, availableWitches[currentIndex].hp))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-2 md:p-6 rounded-xl", __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-3xl", __source: { fileName: "", lineNumber: 336, columnNumber: 25 }, __self: this }, "⚔️"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 337, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-[24px] mb-1 text-[#ff9234]", __source: { fileName: "", lineNumber: 338, columnNumber: 27 }, __self: this }, "攻撃力"), /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-8 bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 341, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#ff9234] to-[#ffb067]", style: { width: `${Math.min(100, availableWitches[currentIndex].attack / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 342, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-2xl font-bold", __source: { fileName: "", lineNumber: 355, columnNumber: 25 }, __self: this }, availableWitches[currentIndex].attack))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-2 md:p-6 rounded-xl", __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 361, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-3xl", __source: { fileName: "", lineNumber: 362, columnNumber: 25 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 363, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-[24px] mb-1 text-[#4fc3f7]", __source: { fileName: "", lineNumber: 364, columnNumber: 27 }, __self: this }, "魔力"), /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-8 bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 367, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#4fc3f7] to-[#81d4fa]", style: { width: `${Math.min(100, availableWitches[currentIndex].magic / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 368, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-2xl font-bold", __source: { fileName: "", lineNumber: 380, columnNumber: 25 }, __self: this }, availableWitches[currentIndex].magic))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-2 md:p-6 rounded-xl", __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-3xl", __source: { fileName: "", lineNumber: 387, columnNumber: 25 }, __self: this }, "⚡"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 388, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-[24px] mb-1 text-[#ffeb3b]", __source: { fileName: "", lineNumber: 389, columnNumber: 27 }, __self: this }, "素早さ"), /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-8 bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 392, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#ffeb3b] to-[#fff176]", style: { width: `${Math.min(100, availableWitches[currentIndex].speed / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 393, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-2xl font-bold", __source: { fileName: "", lineNumber: 405, columnNumber: 25 }, __self: this }, availableWitches[currentIndex].speed))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-2 md:p-6 rounded-xl", __source: { fileName: "", lineNumber: 410, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 411, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg md:text-3xl", __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, "🛡️"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 413, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-[24px] mb-1 text-[#9c27b0]", __source: { fileName: "", lineNumber: 414, columnNumber: 27 }, __self: this }, "耐久力"), /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-8 bg-[#1a1a1a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 417, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#9c27b0] to-[#ba68c8]", style: { width: `${Math.min(100, availableWitches[currentIndex].durability / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 418, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-2xl font-bold", __source: { fileName: "", lineNumber: 431, columnNumber: 25 }, __self: this }, availableWitches[currentIndex].durability))))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-4 md:gap-8 mt-4 md:mt-8", __source: { fileName: "", lineNumber: 442, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevCard, className: "text-2xl md:text-4xl text-[#ff6b6b] hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 443, columnNumber: 13 }, __self: this }, "◀"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectWitch(availableWitches[currentIndex]), disabled: playerDeck.length >= 5, className: "relative group w-[200px] md:w-[300px] h-[50px] md:h-[100px] bg-[url('/images/menu-bg.png')] bg-cover bg-center", __source: { fileName: "", lineNumber: 449, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#ff9234] opacity-75 group-hover:opacity-100 transition-opacity rounded-[16px] md:rounded-[32px]", __source: { fileName: "", lineNumber: 454, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative text-white px-8 md:px-16 py-3 md:py-6 text-lg md:text-xl transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 455, columnNumber: 15 }, __self: this }, "選択する")), /*#__PURE__*/ React.createElement("button", { onClick: nextCard, className: "text-2xl md:text-4xl text-[#ff6b6b] hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 459, columnNumber: 13 }, __self: this }, "▶")), playerDeck.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-16", __source: { fileName: "", lineNumber: 468, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl md:text-2xl font-bold mb-3 md:mb-6 text-center text-[#c850c0]", __source: { fileName: "", lineNumber: 469, columnNumber: 15 }, __self: this }, "選択した魔女たち（ドラッグで順番を変更できます）"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 md:gap-6 overflow-x-auto pb-4", __source: { fileName: "", lineNumber: 472, columnNumber: 15 }, __self: this }, playerDeck.map((witch, index)=>/*#__PURE__*/ React.createElement("div", { key: index, draggable: true, onDragStart: ()=>handleDragStart(witch, index), onDragOver: handleDragOver, onDrop: ()=>handleDrop(index), className: "relative w-[120px] md:w-[160px] lg:w-[200px] flex-shrink-0 bg-white rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.1)] p-3 md:p-6 transform transition-all duration-300 hover:scale-105 cursor-move", __source: { fileName: "", lineNumber: 474, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[100px] md:h-[160px] mb-2 md:mb-4 rounded-xl overflow-hidden bg-gradient-to-br from-[#fef6ff] to-[#fdf2ff] shadow-inner", __source: { fileName: "", lineNumber: 482, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: witch.imageUrl, alt: witch.name, className: "w-full h-full object-contain p-1 md:p-2", __source: { fileName: "", lineNumber: 483, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-base md:text-lg font-bold text-center text-[#c850c0]", __source: { fileName: "", lineNumber: 489, columnNumber: 21 }, __self: this }, witch.name), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1 md:top-2 right-1 md:right-2 text-xl md:text-2xl bg-[#ff9234] text-white w-6 h-6 md:w-8 md:h-8 flex items-center justify-center rounded-full", __source: { fileName: "", lineNumber: 492, columnNumber: 21 }, __self: this }, index + 1)))), /*#__PURE__*/ React.createElement("button", { onClick: startBattle, disabled: playerDeck.length !== 5, className: "mt-4 md:mt-12 mx-auto block px-8 md:px-16 py-3 md:py-5 rounded-full bg-gradient-to-r from-[#c850c0] to-[#ffcc70] text-white font-bold text-lg md:text-2xl shadow-lg disabled:opacity-50 transform transition-all duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 499, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1 md:gap-2", __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/fb6b3a94-1bf9-43e5-80ee-1b7b9caf39fc/-/format/auto/", alt: "ghost decoration", className: "w-4 h-4 md:w-8 md:h-8 scale-x-[-1]", __source: { fileName: "", lineNumber: 505, columnNumber: 19 }, __self: this }), "バトル開始", /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/fb6b3a94-1bf9-43e5-80ee-1b7b9caf39fc/-/format/auto/", alt: "ghost decoration", className: "w-4 h-4 md:w-8 md:h-8", __source: { fileName: "", lineNumber: 511, columnNumber: 19 }, __self: this }))))), gamePhase === "battle" && /*#__PURE__*/ React.createElement("div", { className: "relative max-w-6xl mx-auto bg-[#3a3a3a] rounded-[10px] md:rounded-[20px] p-2 md:p-4 shadow-[0_8px_32px_rgba(0,0,0,0.25)] border-2 md:border-4 border-[#4a4a4a] transform scale-[0.75] md:scale-100 origin-top", __source: { fileName: "", lineNumber: 524, columnNumber: 9 }, __self: this }, showBattleMessage && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#000000cc] px-4 md:px-8 py-2 md:py-4 rounded-xl", __source: { fileName: "", lineNumber: 526, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-4xl font-bold text-white", __source: { fileName: "", lineNumber: 527, columnNumber: 15 }, __self: this }, battleMessage)), winner && !showVictoryCard && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-2 md:mb-8", __source: { fileName: "", lineNumber: 534, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-3xl font-bold text-[#ff9234]", __source: { fileName: "", lineNumber: 535, columnNumber: 15 }, __self: this }, winner === "player" ? "🎉 プレイヤーの勝利！" : "🤖 AIの勝利！")), showVictoryCard && victoryWitch && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 544, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] md:w-[600px] h-[400px] md:h-[800px] bg-[#2a2a2a] rounded-[20px] md:rounded-[40px] p-4 md:p-8 shadow-[0_8px_32px_rgba(0,0,0,0.5)] border-2 md:border-4 border-[#4a4a4a] victory-card", __source: { fileName: "", lineNumber: 545, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 sparkles", __source: { fileName: "", lineNumber: 546, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 547, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-4xl font-bold text-center text-[#ff9234] mb-4 md:mb-8", __source: { fileName: "", lineNumber: 548, columnNumber: 19 }, __self: this }, winner === "player" ? "🎉 勝利！" : "🤖 勝利！"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] md:h-[500px] mb-3 md:mb-6 rounded-xl md:rounded-2xl overflow-hidden bg-gradient-to-br from-[#fef6ff] to-[#fdf2ff] shadow-inner", __source: { fileName: "", lineNumber: 551, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: victoryWitch.imageUrl, alt: victoryWitch.name, className: "w-full h-full object-contain p-2", __source: { fileName: "", lineNumber: 552, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-lg md:text-3xl font-bold text-center text-[#c850c0] mb-2 md:mb-4", __source: { fileName: "", lineNumber: 558, columnNumber: 19 }, __self: this }, victoryWitch.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "mt-2 md:mt-4 w-full bg-[#ff6b6b] text-white py-2 md:py-4 rounded-full text-base md:text-xl font-bold hover:bg-[#ff5252] transition-colors", __source: { fileName: "", lineNumber: 561, columnNumber: 19 }, __self: this }, "もう一度プレイ")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 md:gap-12 mb-2 md:mb-8", __source: { fileName: "", lineNumber: 572, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 573, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-[10px] md:rounded-[40px] p-2 md:p-8 relative z-10 shadow-[0_8px_32px_rgba(0,0,0,0.25)] border-2 md:border-4 border-[#4a4a4a]", __source: { fileName: "", lineNumber: 574, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1 md:mb-6", __source: { fileName: "", lineNumber: 575, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-base md:text-3xl font-bold text-[#ff9234]", __source: { fileName: "", lineNumber: 576, columnNumber: 19 }, __self: this }, "プレイヤー"), /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-xl font-bold text-[#ff9234]", __source: { fileName: "", lineNumber: 579, columnNumber: 19 }, __self: this }, "残り: ", playerDeck.length - playerCurrentIndex, "体")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 583, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[100px] md:w-[400px] h-[100px] md:h-[400px]", __source: { fileName: "", lineNumber: 584, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: activeWitch?.imageUrl, alt: activeWitch?.name, className: `w-full h-full object-contain rounded-lg mb-1 md:mb-4 ${activeWitch?.hp <= 0 ? "grayscale" : ""}`, __source: { fileName: "", lineNumber: 585, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-2xl font-bold mb-1 md:mb-4", __source: { fileName: "", lineNumber: 593, columnNumber: 19 }, __self: this }, activeWitch?.name, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-1 md:gap-4 mt-1 md:mt-2", __source: { fileName: "", lineNumber: 595, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs md:text-lg text-white", __source: { fileName: "", lineNumber: 596, columnNumber: 23 }, __self: this }, "属性: ", activeWitch?.attribute), /*#__PURE__*/ React.createElement("span", { className: "text-xs md:text-lg text-white", __source: { fileName: "", lineNumber: 599, columnNumber: 23 }, __self: this }, "スキル: ", activeWitch?.skill1))), /*#__PURE__*/ React.createElement("div", { className: "w-full space-y-1 md:space-y-6", __source: { fileName: "", lineNumber: 604, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative mb-1 md:mb-8", __source: { fileName: "", lineNumber: 605, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1 md:gap-4", __source: { fileName: "", lineNumber: 606, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 md:w-12 h-4 md:h-12", __source: { fileName: "", lineNumber: 607, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-4xl", __source: { fileName: "", lineNumber: 608, columnNumber: 27 }, __self: this }, "❤️")), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 610, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-12 bg-[#2a2a2a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 611, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full bg-gradient-to-r from-[#ff6b6b] to-[#ff8585] transition-all duration-300`, style: { width: `${Math.max(0, activeWitch?.hp / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 612, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-3xl font-bold", __source: { fileName: "", lineNumber: 623, columnNumber: 25 }, __self: this }, activeWitch?.hp))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-1 md:gap-2 text-[10px] md:text-sm", __source: { fileName: "", lineNumber: 628, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 629, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 630, columnNumber: 25 }, __self: this }, "⚔️"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 631, columnNumber: 25 }, __self: this }, activeWitch?.attack)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 633, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 634, columnNumber: 25 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 635, columnNumber: 25 }, __self: this }, activeWitch?.magic)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 637, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 638, columnNumber: 25 }, __self: this }, "⚡"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 639, columnNumber: 25 }, __self: this }, activeWitch?.speed)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 641, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 642, columnNumber: 25 }, __self: this }, "🛡️"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 643, columnNumber: 25 }, __self: this }, activeWitch?.durability))))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 651, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-[10px] md:rounded-[40px] p-2 md:p-8 relative z-10 shadow-[0_8px_32px_rgba(0,0,0,0.25)] border-2 md:border-4 border-[#4a4a4a]", __source: { fileName: "", lineNumber: 652, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1 md:mb-6", __source: { fileName: "", lineNumber: 653, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-base md:text-3xl font-bold text-[#4fc3f7]", __source: { fileName: "", lineNumber: 654, columnNumber: 19 }, __self: this }, "AI"), /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-xl font-bold text-[#4fc3f7]", __source: { fileName: "", lineNumber: 657, columnNumber: 19 }, __self: this }, "残り: ", aiDeck.length - aiCurrentIndex, "体")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 661, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[100px] md:w-[400px] h-[100px] md:h-[400px]", __source: { fileName: "", lineNumber: 662, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: activeAiWitch?.imageUrl, alt: activeAiWitch?.name, className: `w-full h-full object-contain rounded-lg mb-1 md:mb-4 ${activeAiWitch?.hp <= 0 ? "grayscale" : ""}`, __source: { fileName: "", lineNumber: 663, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm md:text-2xl font-bold mb-1 md:mb-4", __source: { fileName: "", lineNumber: 671, columnNumber: 19 }, __self: this }, activeAiWitch?.name, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-1 md:gap-4 mt-1 md:mt-2", __source: { fileName: "", lineNumber: 673, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs md:text-lg text-white", __source: { fileName: "", lineNumber: 674, columnNumber: 23 }, __self: this }, "属性: ", activeAiWitch?.attribute), /*#__PURE__*/ React.createElement("span", { className: "text-xs md:text-lg text-white", __source: { fileName: "", lineNumber: 677, columnNumber: 23 }, __self: this }, "スキル: ", activeAiWitch?.skill1))), /*#__PURE__*/ React.createElement("div", { className: "w-full space-y-1 md:space-y-6", __source: { fileName: "", lineNumber: 682, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative mb-1 md:mb-8", __source: { fileName: "", lineNumber: 683, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1 md:gap-4", __source: { fileName: "", lineNumber: 684, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 md:w-12 h-4 md:h-12", __source: { fileName: "", lineNumber: 685, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-4xl", __source: { fileName: "", lineNumber: 686, columnNumber: 27 }, __self: this }, "❤️")), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 688, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 md:h-12 bg-[#2a2a2a] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 689, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full bg-gradient-to-r from-[#ff6b6b] to-[#ff8585] transition-all duration-300`, style: { width: `${Math.max(0, activeAiWitch?.hp / 100 * 100)}%` }, __source: { fileName: "", lineNumber: 690, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-3xl font-bold", __source: { fileName: "", lineNumber: 701, columnNumber: 25 }, __self: this }, activeAiWitch?.hp))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-1 md:gap-2 text-[10px] md:text-sm", __source: { fileName: "", lineNumber: 706, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 707, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 708, columnNumber: 25 }, __self: this }, "⚔️"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 709, columnNumber: 25 }, __self: this }, activeAiWitch?.attack)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 711, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 712, columnNumber: 25 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 713, columnNumber: 25 }, __self: this }, activeAiWitch?.magic)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 715, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 716, columnNumber: 25 }, __self: this }, "⚡"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 717, columnNumber: 25 }, __self: this }, activeAiWitch?.speed)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 719, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-lg", __source: { fileName: "", lineNumber: 720, columnNumber: 25 }, __self: this }, "🛡️"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 721, columnNumber: 25 }, __self: this }, activeAiWitch?.durability)))))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 md:gap-4 mt-2 md:mt-8 mb-2 md:mb-8", __source: { fileName: "", lineNumber: 730, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAction("attack"), disabled: currentTurn !== "player", className: "px-2 md:px-6 py-1 md:py-3 bg-[#ff9234] text-white rounded-full hover:bg-[#ff7b00] transition-colors disabled:opacity-50 text-sm md:text-base", __source: { fileName: "", lineNumber: 731, columnNumber: 13 }, __self: this }, "攻撃"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAction("skill"), disabled: currentTurn !== "player", className: "px-2 md:px-6 py-1 md:py-3 bg-[#4fc3f7] text-white rounded-full hover:bg-[#03a9f4] transition-colors disabled:opacity-50 text-sm md:text-base", __source: { fileName: "", lineNumber: 738, columnNumber: 13 }, __self: this }, "魔法"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAction("defend"), disabled: currentTurn !== "player", className: "px-2 md:px-6 py-1 md:py-3 bg-[#9c27b0] text-white rounded-full hover:bg-[#7b1fa2] transition-colors disabled:opacity-50 text-sm md:text-base", __source: { fileName: "", lineNumber: 745, columnNumber: 13 }, __self: this }, "防御")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 md:mt-8 p-2 md:p-4 bg-[#2a2a2a] rounded-[10px] md:rounded-[20px] h-[60px] md:h-[200px] overflow-y-auto", __source: { fileName: "", lineNumber: 754, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm md:text-xl font-bold mb-1 md:mb-4 text-[#ff9234]", __source: { fileName: "", lineNumber: 755, columnNumber: 13 }, __self: this }, "バトルログ"), battleLog.map((log, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-1 md:mb-2 text-xs md:text-base ${log.source === "system" ? "text-[#ff9234]" : log.source === "player" ? "text-[#4fc3f7]" : "text-[#ff6b6b]"}`, __source: { fileName: "", lineNumber: 759, columnNumber: 15 }, __self: this }, log.message)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 776, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .battle-message { animation: fadeIn 0.3s ease-in-out; } @keyframes sparkle { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .sparkles::before { content: '✨'; position: absolute; animation: sparkle 1.5s infinite; font-size: 24px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073; } .victory-card { transform: scale(1.2); transition: transform 0.5s ease-in-out; } .victory-card img { animation: shine 2s infinite; } @keyframes shine { 0% { filter: brightness(100%); } 50% { filter: brightness(150%); } 100% { filter: brightness(100%); } } @media (max-width: 768px) { body { overflow-x: hidden; } .victory-card { transform: scale(0.85); } } `)); }