const { useState, useEffect, useRef } = React;

function App() {
  // 状態管理
  const [player, setPlayer] = useState(INITIAL_PLAYER);
  const [weapon, setWeapon] = useState(INITIAL_WEAPON);
  const [inventoryWeapons, setInventoryWeapons] = useState([]);
  const [inventoryParts, setInventoryParts] = useState({'fire': 1, 'spread': 1});
  const [discoveredParts, setDiscoveredParts] = useState(['fire', 'spread']);
  const [discoveredWeapons, setDiscoveredWeapons] = useState(['w_pipe']);
  const [discoveredSynergies, setDiscoveredSynergies] = useState([]);
  const [floor, setFloor] = useState(1);
  const [enemy, setEnemy] = useState(null);
  const [isBattling, setIsBattling] = useState(false);
  const [logs, setLogs] = useState([]);
  const [activeTab, setActiveTab] = useState('battle');
  const [gameState, setGameState] = useState('title'); // 'title' | 'transition' | 'playing'
  
  const [selectedWeaponId, setSelectedWeaponId] = useState(null);
  const [craftMode, setCraftMode] = useState('socket');
  const [materialWeaponId, setMaterialWeaponId] = useState(null);

  const [saveCode, setSaveCode] = useState('');
  const [loadCode, setLoadCode] = useState('');
  const [notifications, setNotifications] = useState([]);

  const [tooltip, setTooltip] = useState({ visible: false, partId: null, x: 0, y: 0, align: 'bottom' });

  const showTooltip = (e, partId) => {
    if (!partId) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const wouldOverflow = rect.bottom + 100 > window.innerHeight;
    setTooltip({
      visible: true,
      partId,
      x: rect.left + rect.width / 2,
      y: wouldOverflow ? rect.top - 10 : rect.bottom + 10,
      align: wouldOverflow ? 'top' : 'bottom'
    });
  };

  const hideTooltip = () => {
    setTooltip(prev => ({ ...prev, visible: false }));
  };

  const addLog = (msg) => {
    setLogs(prev => {
      const newLogs = [...prev, msg];
      if (newLogs.length > 30) newLogs.shift();
      return newLogs;
    });
  };

  // 計算ロジック
  const calcPlayerStats = () => {
    const prefixData = PREFIXES[weapon.prefix] || PREFIXES['none'];
    let stats = {
      atk: weapon.baseAtk * prefixData.atkMult,
      spd: player.baseSpd * prefixData.spdMult,
      hpMax: player.maxHp * prefixData.hpMult
    };
    let activeSynergies = [];

    const socketedParts = weapon.sockets.filter(p => p !== null);
    socketedParts.forEach(pId => {
      if (PARTS[pId] && PARTS[pId].apply) {
        PARTS[pId].apply(stats);
      }
    });

    let availableParts = [...socketedParts];

    // 要求数が多いシナジーから判定
    const sortedSynergies = [...SYNERGIES].sort((a, b) => b.req.length - a.req.length);
    for (const syn of sortedSynergies) {
      let times = 0;
      while (true) {
        let tempParts = [...availableParts];
        let canForm = true;
        for (const req of syn.req) {
          const idx = tempParts.indexOf(req);
          if (idx !== -1) {
            tempParts.splice(idx, 1);
          } else {
            canForm = false;
            break;
          }
        }
        if (canForm) {
          times++;
          availableParts = tempParts;
        } else {
          break;
        }
      }

      if (times > 0) {
        for (let i = 0; i < times; i++) {
          if (syn.apply) syn.apply(stats);
        }
        activeSynergies.push({ ...syn, times });
      }
    }

    stats.atk = Math.max(1, stats.atk);
    stats.spd = Math.max(0.1, stats.spd);

    return { atk: Math.floor(stats.atk), spd: stats.spd, hpMax: Math.floor(stats.hpMax), activeSynergies };
  };

  const stats = calcPlayerStats();

  const [synergyPopup, setSynergyPopup] = useState(null);
  const [isFadingOut, setIsFadingOut] = useState(false);
  const prevSynergiesRef = useRef('');

  const activeSynergiesStr = JSON.stringify(stats.activeSynergies.map(s => `${s.name}x${s.times}`));
  useEffect(() => {
    if (stats.activeSynergies.length > 0 && activeSynergiesStr !== prevSynergiesRef.current) {
      setSynergyPopup({ syns: stats.activeSynergies, id: Date.now() });
      setIsFadingOut(false);
      
      let newDisc = [];
      stats.activeSynergies.forEach(syn => {
        newDisc.push(syn.name);
      });
      setDiscoveredSynergies(prev => {
        let next = [...prev];
        let changed = false;
        newDisc.forEach(n => {
          if (!next.includes(n)) { next.push(n); changed = true; }
        });
        return changed ? next : prev;
      });
    }
    prevSynergiesRef.current = activeSynergiesStr;
  }, [activeSynergiesStr]);

  useEffect(() => {
    if (synergyPopup && !isFadingOut) {
      const fadeTimer = setTimeout(() => {
        setIsFadingOut(true);
      }, 2500);
      return () => clearTimeout(fadeTimer);
    } else if (isFadingOut) {
      const removeTimer = setTimeout(() => {
        setSynergyPopup(null);
      }, 500);
      return () => clearTimeout(removeTimer);
    }
  }, [synergyPopup, isFadingOut]);

  // --- 回復ロジック ---
  const healCost = 50 + (floor * 10);

  const heal = () => {
    if (isBattling) return;
    if (player.hp >= stats.hpMax) {
      addLog("HPは既に満タンです。");
      return;
    }
    if ((player.scrap || 0) >= healCost) {
      setPlayer(p => ({ ...p, hp: stats.hpMax, scrap: (p.scrap || 0) - healCost }));
      addLog(`[回復] ${healCost} スクラップを消費してHPを全回復しました。`);
    } else {
      addLog("[警告] スクラップが足りません！");
    }
  };

  // --- バトルループ ---
  const playerGaugeRef = useRef(0);
  
  useEffect(() => {
    if (!isBattling) return;
    if (!enemy) {
      setEnemy(generateEnemy(floor));
      addLog(`階層 ${floor}: 敵が出現！`);
      return;
    }

    const interval = setInterval(() => {
      setEnemy(prevEnemy => {
        if (!prevEnemy) return null;
        let newEnemy = { ...prevEnemy };
        let newPlayerHp = player.hp;
        let enemyDied = false;
        let playerDied = false;

        playerGaugeRef.current += stats.spd * 10; 
        if (playerGaugeRef.current >= 100) {
          playerGaugeRef.current = 0;
          const dmg = stats.atk;
          newEnemy.hp -= dmg;
          const synNames = stats.activeSynergies.map(s => `${s.name}${s.times > 1 ? `x${s.times}` : ''}`).join('+');
          const synTxt = synNames ? `${synNames} ` : '';
          addLog(`あなたのアタック！ ${synTxt}${dmg}ダメージ！`);
          
          if (newEnemy.hp <= 0) {
            enemyDied = true;
          }
        }

        if (!enemyDied) {
          newEnemy.gauge += 10; 
          if (newEnemy.gauge >= newEnemy.maxGauge) {
            newEnemy.gauge = 0;
            const edmg = newEnemy.atk;
            newPlayerHp -= edmg;
            addLog(`敵の攻撃！ ${edmg}ダメージを受けた！`);
            if (newPlayerHp <= 0) {
              playerDied = true;
            }
          }
        }

        if (playerDied) {
          setIsBattling(false);
          addLog("【GAME OVER】 探索に失敗し、拠点に帰還しました... (フロアとスクラップを喪失しました)");
          setPlayer(p => ({ ...p, hp: stats.hpMax, scrap: 0 }));
          setFloor(1);
          return null;
        }

        // 敵撃破時の処理 (スクラップ獲得を追加)
        if (enemyDied) {
          const gainedScrap = 10 + (floor * 5);
          
          // プレイヤーのHPとスクラップを同時に更新
          setPlayer(p => ({ 
            ...p, 
            hp: newPlayerHp, 
            scrap: (p.scrap || 0) + gainedScrap 
          }));
          
          addLog(`敵を撃破！ ${gainedScrap} スクラップを獲得。`);
          
          const drop = generateDrop(floor);
          const notifId = Date.now() + Math.random();

          if (drop.type === 'weapon') {
            const pfxName = PREFIXES[drop.item.prefix].name;
            const itemName = pfxName ? `${pfxName}${drop.item.name}` : drop.item.name;
            addLog(`【取得】 ${itemName} を見つけた！`);
            setInventoryWeapons(prev => [...prev, drop.item]);
            setDiscoveredWeapons(prev => prev.includes(drop.item.typeId) ? prev : [...prev, drop.item.typeId]);
            setNotifications(prev => [...prev, { id: notifId, msg: `WEAPON DROP: ${itemName}`, type: 'weapon' }]);
          } else {
            const itemName = PARTS[drop.item].name;
            addLog(`【取得】 ジャンク: ${itemName} を見つけた！`);
            setInventoryParts(prev => ({...prev, [drop.item]: (prev[drop.item] || 0) + 1}));
            setDiscoveredParts(prev => prev.includes(drop.item) ? prev : [...prev, drop.item]);
            setNotifications(prev => [...prev, { id: notifId, msg: `PART DROP: ${itemName}`, type: 'part' }]);
          }
          
          setTimeout(() => {
            setNotifications(prev => prev.filter(n => n.id !== notifId));
          }, 3500);

          setFloor(f => f + 1);
          return null; 
        }

        // 敵が死んでいない場合はHPだけ更新
        setPlayer(p => ({ ...p, hp: newPlayerHp }));
        return newEnemy;
      });
    }, 100);

    return () => clearInterval(interval);
  }, [isBattling, enemy, floor, stats.atk, stats.spd, activeSynergiesStr, stats.hpMax, player.hp]);

  // HP上限変更時の調整
  useEffect(() => {
    if (player.hp > stats.hpMax) {
      setPlayer(p => ({ ...p, hp: stats.hpMax }));
    }
  }, [stats.hpMax]);

  // --- セーブ＆ロード ---
  const generateSaveData = () => {
    const data = { p: player, w: weapon, iw: inventoryWeapons, ip: inventoryParts, f: floor, dp: discoveredParts, ds: discoveredSynergies, dw: discoveredWeapons };
    try {
      const json = JSON.stringify(data);
      const base64 = btoa(encodeURIComponent(json));
      setSaveCode(base64);
    } catch (e) {
      alert("セーブデータの生成に失敗しました。");
    }
  };

  const loadSaveData = () => {
    try {
      const json = decodeURIComponent(atob(loadCode));
      const data = JSON.parse(json);
      setPlayer(data.p);
      setWeapon(data.w);
      setInventoryWeapons(data.iw || []);
      setInventoryParts(data.ip || {});
      setFloor(data.f || 1);

      const dp = data.dp || Object.keys(data.ip || {}).filter(k => data.ip[k] > 0);
      if (data.w && data.w.sockets) {
        data.w.sockets.forEach(s => { if (s && !dp.includes(s)) dp.push(s); });
      }
      setDiscoveredParts(dp);
      setDiscoveredSynergies(data.ds || []);

      let dw = data.dw || ['w_pipe'];
      const addWepType = (wep) => {
        if (!wep) return;
        const type = WEAPON_TYPES.find(wt => wt.name === wep.name);
        if (type && !dw.includes(type.id)) dw.push(type.id);
      };
      addWepType(data.w);
      if (data.iw) data.iw.forEach(addWepType);
      setDiscoveredWeapons(dw);

      setEnemy(null);
      setIsBattling(false);
      addLog("データを復元しました！");
      setLoadCode('');
    } catch (e) {
      alert("無効なセーブコードです。");
    }
  };

  useEffect(() => {
    const data = { p: player, w: weapon, iw: inventoryWeapons, ip: inventoryParts, f: floor, dp: discoveredParts, ds: discoveredSynergies, dw: discoveredWeapons };
    localStorage.setItem('junk_code_zero_save', JSON.stringify(data));
  }, [player, weapon, inventoryWeapons, inventoryParts, floor, discoveredParts, discoveredSynergies, discoveredWeapons]);

  useEffect(() => {
    const saved = localStorage.getItem('junk_code_zero_save');
    if (saved) {
      try {
        const data = JSON.parse(saved);
        // 過去のセーブデータにscrapが無い場合のフォールバック
        if(data.p && data.p.scrap === undefined) data.p.scrap = 0;
        
        setPlayer(data.p);
        setWeapon(data.w);
        setInventoryWeapons(data.iw);
        setInventoryParts(data.ip);
        setFloor(data.f);

        const dp = data.dp || Object.keys(data.ip || {}).filter(k => data.ip[k] > 0);
        if (data.w && data.w.sockets) {
          data.w.sockets.forEach(s => { if (s && !dp.includes(s)) dp.push(s); });
        }
        setDiscoveredParts(dp);
        setDiscoveredSynergies(data.ds || []);

        let dw = data.dw || ['w_pipe'];
        const addWepType = (wep) => {
          if (!wep) return;
          const type = WEAPON_TYPES.find(wt => wt.name === wep.name);
          if (type && !dw.includes(type.id)) dw.push(type.id);
        };
        addWepType(data.w);
        if (data.iw) data.iw.forEach(addWepType);
        setDiscoveredWeapons(dw);
      } catch (e) {}
    }
  }, []);

  // --- アクション (クラフト) ---
  const equipWeapon = (wepId) => {
    const wepIndex = inventoryWeapons.findIndex(w => w.id === wepId);
    if (wepIndex === -1) return;
    const newWep = inventoryWeapons[wepIndex];
    setInventoryWeapons(prev => [...prev.filter(w => w.id !== wepId), weapon]);
    setWeapon(newWep);
    setSelectedWeaponId(null);
  };

  const attachPart = (partId, socketIndex) => {
    if (!inventoryParts[partId] || inventoryParts[partId] <= 0) return;
    setWeapon(prev => {
      const newSockets = [...prev.sockets];
      const oldPart = newSockets[socketIndex];
      newSockets[socketIndex] = partId;
      
      setInventoryParts(iprev => {
        const nextIp = { ...iprev, [partId]: iprev[partId] - 1 };
        if (oldPart) nextIp[oldPart] = (nextIp[oldPart] || 0) + 1;
        return nextIp;
      });
      return { ...prev, sockets: newSockets };
    });
  };

  const detachPart = (socketIndex) => {
    setWeapon(prev => {
      const partId = prev.sockets[socketIndex];
      if (!partId) return prev;
      const newSockets = [...prev.sockets];
      newSockets[socketIndex] = null;
      
      setInventoryParts(iprev => ({ ...iprev, [partId]: (iprev[partId] || 0) + 1 }));
      return { ...prev, sockets: newSockets };
    });
  };

  const craftPrefix = () => {
    if (!materialWeaponId) return;
    const matWep = inventoryWeapons.find(w => w.id === materialWeaponId);
    if (!matWep) return;

    const partsToReturn = matWep.sockets.filter(p => p !== null);
    
    setWeapon(prev => ({ ...prev, prefix: matWep.prefix }));
    setInventoryParts(prev => {
      const nextIp = { ...prev };
      partsToReturn.forEach(p => { nextIp[p] = (nextIp[p] || 0) + 1; });
      return nextIp;
    });
    setInventoryWeapons(prev => prev.filter(w => w.id !== materialWeaponId));
    setMaterialWeaponId(null);
    addLog(`【合成成功】 ${PREFIXES[matWep.prefix].name} の力を引き継ぎました！`);
  };

  const trashWeapon = (wepId) => {
     const wep = inventoryWeapons.find(w => w.id === wepId);
     if(!wep) return;
     const partsToReturn = wep.sockets.filter(p => p !== null);
     setInventoryParts(prev => {
      const nextIp = { ...prev };
      partsToReturn.forEach(p => { nextIp[p] = (nextIp[p] || 0) + 1; });
      return nextIp;
    });
    setInventoryWeapons(prev => prev.filter(w => w.id !== wepId));
  }

  // --- 遷移処理 ---
  const startGame = () => {
    setGameState('transition');
    setTimeout(() => {
      setGameState('playing');
    }, 1500); // グリッチ時間
  };

  // --- UI ---
  if (gameState === 'title' || gameState === 'transition') {
    return (
      <div className="h-screen w-full bg-black text-gray-100 font-mono flex flex-col items-center justify-center relative overflow-hidden">
        {gameState === 'transition' && <div className="glitch-overlay"></div>}
        <div className="scanlines"></div>
        
        <div className="z-10 text-center flex flex-col items-center animate-fade-in-up">
          <div className="text-sm tracking-[0.5em] text-cyan-500 mb-4 font-bold">DEEP DIVE SYSTEM INITIALIZATION</div>
          <h1 className="text-7xl font-black text-white tracking-widest mb-2 title-text-glow">JUNK CODE: 0</h1>
          <div className="text-xl text-gray-500 mb-16 tracking-widest">v1.2.0</div>
          
          <button 
            onClick={startGame}
            disabled={gameState === 'transition'}
            className="group relative px-12 py-4 bg-transparent text-cyan-400 font-bold text-2xl tracking-[0.3em] overflow-hidden transition-all duration-300 hover:text-white"
          >
            <div className="absolute inset-0 w-full h-full border-2 border-cyan-500 group-hover:border-white transition-colors"></div>
            <div className="absolute inset-0 w-full h-full bg-cyan-500/20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></div>
            <span className="relative z-10 flex items-center gap-3">
              <Zap className={`transition-opacity ${gameState === 'transition' ? 'animate-bounce text-red-500' : ''}`} />
              {gameState === 'transition' ? 'BOOTING...' : 'START SYSTEM'}
            </span>
          </button>

          {gameState === 'transition' && (
            <div className="absolute bottom-10 left-10 text-red-500 font-mono text-sm opacity-80 text-left">
              <div>> WARN: UNSAFE MEMORY ACCESS DETECTED</div>
              <div>> OVERRIDING SECURITY PROTOCOLS...</div>
              <div>> SUCCESS. INITIALIZING EXPLORATION...</div>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="animate-fade-in h-screen w-full bg-gray-900 text-gray-100 font-mono flex overflow-hidden relative">
      
      {/* グローバルツールチップ */}
      {tooltip.visible && tooltip.partId && PARTS[tooltip.partId] && (
        <div 
          className="fixed transform -translate-x-1/2 w-max max-w-[200px] bg-gray-800 border border-cyan-700 text-white text-sm rounded-lg p-3 shadow-2xl z-[100] pointer-events-none animate-fade-in-up"
          style={{ 
            left: tooltip.x,
            ...(tooltip.align === 'bottom' ? { top: tooltip.y } : { bottom: window.innerHeight - tooltip.y })
          }}
        >
          <div className={`font-bold border-b pb-1 mb-1 flex items-center gap-2 ${RARITIES[PARTS[tooltip.partId].rarity].color} ${RARITIES[PARTS[tooltip.partId].rarity].border}`}>
            {PARTS[tooltip.partId].name}
            <span className="text-xs opacity-70">[{RARITIES[PARTS[tooltip.partId].rarity].name}]</span>
          </div>
          <div className="text-gray-300 text-left whitespace-normal">{PARTS[tooltip.partId].desc}</div>
        </div>
      )}

      {/* シナジー発動ポップアップ */}
      {synergyPopup && (
        <div className={`absolute top-10 left-1/2 transform -translate-x-1/2 z-50 pointer-events-none transition-all duration-500 ${isFadingOut ? 'opacity-0 -translate-y-4' : 'animate-fade-in-up opacity-100'}`}>
          <div className="bg-pink-900/90 border-2 border-pink-500 px-8 py-4 rounded-xl shadow-[0_0_30px_rgba(236,72,153,0.5)] flex flex-col items-center backdrop-blur-md">
            <div className="text-pink-300 font-bold text-lg mb-1 animate-pulse">✨ シナジー発動 ✨</div>
            {synergyPopup.syns.map((syn, i) => (
              <div key={i} className="text-center mb-2 last:mb-0">
                <div className="text-white text-xl font-bold tracking-widest">{syn.name} {syn.times > 1 ? <span className="text-yellow-400">x{syn.times}</span> : ''}</div>
                <div className="text-pink-200 text-sm">{syn.text}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 左側: サイドバー */}
      <div className="w-72 bg-gray-800 border-r border-gray-700 flex flex-col justify-between shrink-0 shadow-2xl z-20">
        <div className="p-6 border-b border-gray-700">
          <h1 className="text-2xl font-bold text-green-400 tracking-wider mb-1">JUNK CODE: 0</h1>
          <div className="text-sm text-gray-400 mb-6">FLOOR: {floor}</div>
          
          <div className="bg-gray-900 p-4 rounded-lg border border-gray-700 shadow-inner mb-4">
            <div className="flex justify-between items-end mb-1">
              <span className="text-gray-400 text-xs font-bold">HP</span>
              <span className="text-sm font-bold">
                <span className={player.hp <= stats.hpMax * 0.3 ? 'text-red-400' : 'text-white'}>
                  {Math.floor(player.hp)}
                </span> / {stats.hpMax}
              </span>
            </div>
            <div className="w-full bg-gray-700 h-2 rounded-full overflow-hidden mb-3">
              <div 
                className="bg-green-500 h-full transition-all duration-300" 
                style={{ width: `${Math.max(0, (player.hp / stats.hpMax) * 100)}%` }}
              />
            </div>
            
            {/* スクラップ表示エリア */}
            <div className="flex items-center justify-between bg-gray-800 p-2 rounded border border-gray-600 mb-3">
              <span className="text-gray-400 text-xs font-bold flex items-center gap-1">
                <Database size={14}/> スクラップ
              </span>
              <span className="font-bold text-yellow-400">{player.scrap || 0}</span>
            </div>

            <div className="grid grid-cols-2 gap-2 text-sm">
              <div className="bg-gray-800 p-2 rounded text-center border border-gray-600">
                <span className="text-gray-500 text-xs block">ATK</span>
                <span className="font-bold text-red-300">{stats.atk}</span>
              </div>
              <div className="bg-gray-800 p-2 rounded text-center border border-gray-600">
                <span className="text-gray-500 text-xs block">SPD</span>
                <span className="font-bold text-blue-300">{stats.spd.toFixed(1)}</span>
              </div>
            </div>
          </div>

          <div className="bg-gray-900 rounded p-4 text-sm border border-gray-700 relative group">
            <div className="text-gray-500 text-xs mb-2">現在の装備</div>
            <div className={`flex items-center gap-2 mb-3 text-lg ${weapon.rarity ? RARITIES[weapon.rarity].color : 'text-cyan-200'}`}>
              <Sword size={20} />
              <span className="font-bold truncate">{PREFIXES[weapon.prefix].name} {weapon.name}</span>
            </div>
            {/* 穴が多い武器に対応するため flex-wrap を使用 */}
            <div className="flex gap-2 flex-wrap">
              {weapon.sockets.map((sock, i) => (
                <div 
                  key={i} 
                  className={`w-10 h-10 rounded bg-gray-800 border flex items-center justify-center shadow-inner relative shrink-0 ${sock && PARTS[sock] ? RARITIES[PARTS[sock].rarity].border : 'border-gray-600'}`}
                  onMouseEnter={(e) => showTooltip(e, sock)}
                  onMouseLeave={hideTooltip}
                >
                  {sock && PARTS[sock] ? <span className={PARTS[sock].color}>{PARTS[sock].icon}</span> : null}
                </div>
              ))}
            </div>
            {stats.activeSynergies.length > 0 && (
              <div className="absolute top-4 right-4 flex flex-col gap-1 items-end pointer-events-none">
                {stats.activeSynergies.map((syn, i) => (
                  <div key={i} className="text-xs text-pink-400 animate-pulse font-bold bg-pink-900/30 px-2 py-1 rounded shadow">
                    {syn.name} {syn.times > 1 ? `x${syn.times}` : ''} 発動
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
        <div className="p-4 text-xs text-gray-600 font-bold">
          v1.2.0
        </div>
      </div>

      {/* 右側: メインコンテンツ */}
      <div className="flex-1 bg-gray-900 flex flex-col relative overflow-hidden">
        
        {/* タブナビゲーション */}
        <div className="flex justify-end items-center px-8 py-4 bg-gray-800/30 border-b border-gray-800 gap-4 shrink-0 z-10 backdrop-blur-sm">
          <button onClick={() => setActiveTab('battle')} className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-bold transition-all ${activeTab === 'battle' ? 'bg-green-900/50 text-green-400 border border-green-700/50 shadow-lg' : 'hover:bg-gray-800 text-gray-400 border border-transparent'}`}>
            <Sword size={18} /> BATTLE
          </button>
          <button onClick={() => setActiveTab('craft')} className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-bold transition-all relative ${activeTab === 'craft' ? 'bg-cyan-900/50 text-cyan-400 border border-cyan-700/50 shadow-lg' : 'hover:bg-gray-800 text-gray-400 border border-transparent'}`}>
            <Settings size={18} /> CRAFT
            {Object.keys(inventoryParts).length > 0 && <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>}
          </button>
          <button onClick={() => setActiveTab('database')} className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-bold transition-all ${activeTab === 'database' ? 'bg-purple-900/50 text-purple-400 border border-purple-700/50 shadow-lg' : 'hover:bg-gray-800 text-gray-400 border border-transparent'}`}>
            <BookOpen size={18} /> DATABASE
          </button>
          <button onClick={() => setActiveTab('system')} className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-bold transition-all ${activeTab === 'system' ? 'bg-blue-900/50 text-blue-400 border border-blue-700/50 shadow-lg' : 'hover:bg-gray-800 text-gray-400 border border-transparent'}`}>
            <Save size={18} /> SYSTEM
          </button>
        </div>

        {/* スクロールエリア */}
        <div className="flex-1 overflow-y-auto">

        {/* BATTLE タブ */}
        {activeTab === 'battle' && (
          <div className="h-full flex flex-col p-8 lg:p-12 gap-8 max-w-5xl mx-auto w-full">
            
            {/* 敵エリア */}
            <div className="w-full shrink-0">
              {enemy ? (
                <div className="w-full bg-gray-800 border border-red-900/50 p-8 rounded-2xl shadow-2xl relative overflow-hidden flex flex-col md:flex-row items-center gap-8 transform transition-all">
                  <div className="absolute top-0 left-0 w-full h-2 bg-gray-700">
                    <div className="bg-red-500 h-full transition-all" style={{width: `${(enemy.gauge / enemy.maxGauge)*100}%`}} />
                  </div>
                  
                  <div className="shrink-0 p-4 md:border-r border-gray-700 md:pr-8 flex justify-center w-full md:w-auto">
                    <Skull className="text-red-500 animate-bounce drop-shadow-[0_0_15px_rgba(239,68,68,0.5)]" size={80} />
                  </div>
                  
                  <div className="flex-1 w-full text-center md:text-left">
                    <div className="text-3xl font-bold text-red-400 mb-4">{enemy.name}</div>
                    <div className="text-xl mb-3 text-gray-300 flex items-end justify-center md:justify-start gap-2">
                      <span>HP:</span>
                      <span className="text-white font-bold text-2xl">{Math.max(0, enemy.hp)}</span> 
                      <span className="text-gray-500">/ {enemy.maxHp}</span>
                    </div>
                    <div className="w-full bg-gray-700 h-6 rounded-full mt-2 overflow-hidden shadow-inner">
                      <div className="bg-red-500 h-full transition-all duration-200" style={{ width: `${Math.max(0, (enemy.hp / enemy.maxHp) * 100)}%` }} />
                    </div>
                  </div>
                </div>
              ) : (
                <div className="w-full text-gray-500 animate-pulse flex flex-col md:flex-row items-center justify-center gap-6 py-16 bg-gray-800/30 rounded-2xl border border-dashed border-gray-700">
                  <Target size={60} className="opacity-30" />
                  <p className="text-2xl tracking-widest">ターゲット探索中...</p>
                </div>
              )}
            </div>

            {/* コントロール & ログ */}
            <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
              <div className="flex flex-col gap-4 w-full md:w-72 shrink-0">
                <button 
                  onClick={() => setIsBattling(!isBattling)}
                  className={`w-full py-5 rounded-xl font-bold text-lg shadow-lg transition-all ${isBattling ? 'bg-red-600 hover:bg-red-500 text-white shadow-red-900/50' : 'bg-green-600 hover:bg-green-500 text-white shadow-green-900/50'}`}
                >
                  {isBattling ? '探索停止 (RETREAT)' : '探索開始 (EXPLORE)'}
                </button>
                
                {/* 回復ボタン (スクラップ消費版) */}
                <button 
                  onClick={heal}
                  disabled={isBattling || player.hp >= stats.hpMax || (player.scrap || 0) < healCost}
                  className={`w-full py-4 rounded-xl font-bold transition-all flex flex-col items-center justify-center gap-1 ${
                    isBattling ? 'bg-gray-800 text-gray-600 cursor-not-allowed' :
                    player.hp >= stats.hpMax ? 'bg-gray-700 text-gray-500 cursor-not-allowed' :
                    (player.scrap || 0) < healCost ? 'bg-red-900/50 text-red-400 border border-red-700 cursor-not-allowed' :
                    'bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/50'
                  }`}
                >
                  <div className="flex items-center gap-2 text-lg"><Heart size={20} /> 拠点回復</div>
                  <div className="text-xs font-normal">コスト: {healCost} スクラップ</div>
                </button>
              </div>

              <div className="flex-1 bg-black/40 border border-gray-800 rounded-xl p-6 flex flex-col shadow-inner backdrop-blur-sm min-h-[200px]">
                <h3 className="text-sm font-bold text-gray-400 mb-4 border-b border-gray-700 pb-2 flex items-center gap-2 shrink-0">
                  <Target size={16} /> BATTLE LOG
                </h3>
                <div className="flex-1 overflow-y-auto flex flex-col justify-end text-sm text-gray-400 font-mono space-y-2 pr-2 custom-scrollbar">
                  {logs.map((log, i) => (
                    <div key={i} className="border-b border-gray-800/50 pb-2 leading-relaxed">{log}</div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* CRAFT タブ */}
        {activeTab === 'craft' && (
          <div className="p-10 lg:p-16 max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-10 text-cyan-400 flex items-center gap-3">
              <Settings size={28} /> 工房 - CRAFT
            </h2>
            
            <div className="bg-gray-800 p-8 rounded-xl mb-8 shadow-2xl border border-gray-700 relative">
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 to-blue-500 opacity-50 rounded-t-xl"></div>
              <div className="text-sm text-gray-400 mb-2">現在のチューニング対象</div>
              <div className={`text-3xl font-bold mb-8 ${weapon.rarity ? RARITIES[weapon.rarity].color : 'text-yellow-300'}`}>{PREFIXES[weapon.prefix].name} {weapon.name}</div>
              
              {/* 穴が複数あっても崩れないように flex-wrap 追加 */}
              <div className="flex flex-wrap justify-center gap-6 mb-4">
                {weapon.sockets.map((sock, i) => (
                  <div key={i} className="flex flex-col items-center shrink-0">
                    <div 
                      onClick={() => detachPart(i)}
                      onMouseEnter={(e) => showTooltip(e, sock)}
                      onMouseLeave={hideTooltip}
                      className="w-24 h-24 bg-gray-900 border-2 border-dashed border-gray-500 flex items-center justify-center rounded-lg cursor-pointer hover:border-red-400 transition-colors relative group shadow-inner"
                    >
                      {sock ? (
                        <>
                          <div className={`scale-150 ${PARTS[sock].color}`}>{PARTS[sock].icon}</div>
                          <div className="absolute inset-0 bg-red-500/20 hidden group-hover:flex items-center justify-center rounded-lg backdrop-blur-sm transition-all z-10">
                            <span className="text-sm font-bold text-red-200">外す</span>
                          </div>
                        </>
                      ) : (
                        <span className="text-gray-600 text-sm">空きスロット</span>
                      )}
                    </div>
                    
                    {!sock && (
                      <div className="mt-4 w-full grid grid-cols-1 gap-2 max-h-40 overflow-y-auto custom-scrollbar">
                        {Object.entries(inventoryParts).filter(([_, count]) => count > 0).map(([partId, count]) => (
                           <button 
                             key={partId} 
                             onClick={() => attachPart(partId, i)}
                             onMouseEnter={(e) => showTooltip(e, partId)}
                             onMouseLeave={hideTooltip}
                             className="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded border border-gray-600 flex justify-between items-center transition-colors shadow"
                           >
                             <div className="flex items-center gap-2">
                               <span className={PARTS[partId].color}>{PARTS[partId].icon}</span>
                               <span className={RARITIES[PARTS[partId].rarity].color}>{PARTS[partId].name}</span>
                             </div>
                             <span className="text-cyan-300 font-bold bg-gray-900 px-2 py-0.5 rounded">x{count}</span>
                           </button>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <div className="flex border-b border-gray-700 mb-6">
              <button 
                onClick={() => setCraftMode('socket')}
                className={`px-6 py-3 text-lg font-bold transition-colors ${craftMode === 'socket' ? 'text-cyan-400 border-b-2 border-cyan-400 bg-gray-800/50 rounded-t-lg' : 'text-gray-500 hover:text-gray-300'}`}
              >
                武器ストレージ
              </button>
              <button 
                onClick={() => setCraftMode('prefix')}
                className={`px-6 py-3 text-lg font-bold transition-colors ${craftMode === 'prefix' ? 'text-purple-400 border-b-2 border-purple-400 bg-gray-800/50 rounded-t-lg' : 'text-gray-500 hover:text-gray-300'}`}
              >
                二つ名継承
              </button>
            </div>

            {craftMode === 'socket' && (
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                {inventoryWeapons.length === 0 && <p className="text-gray-500 text-lg col-span-full text-center py-12 bg-gray-800/30 rounded border border-dashed border-gray-700">所持しているジャンク武器はありません</p>}
                {inventoryWeapons.map(w => (
                  <div key={w.id} className={`bg-gray-800 p-5 rounded-lg flex justify-between items-center border hover:border-gray-500 transition-colors shadow ${w.rarity ? RARITIES[w.rarity].border : 'border-gray-700'}`}>
                    <div>
                      <div className={`font-bold text-lg mb-1 ${w.rarity ? RARITIES[w.rarity].color : 'text-yellow-100'}`}>{PREFIXES[w.prefix].name} {w.name}</div>
                      <div className="text-sm text-gray-400 flex gap-4">
                        <span>基本ATK: <span className="text-gray-200">{w.baseAtk}</span></span>
                        <span>空き穴: <span className="text-gray-200">{w.sockets.length}</span></span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => equipWeapon(w.id)} className="bg-cyan-700 hover:bg-cyan-600 text-white px-4 py-2 rounded font-bold shadow transition-colors">
                        装備
                      </button>
                      <button onClick={() => trashWeapon(w.id)} className="bg-red-900/80 hover:bg-red-800 text-white px-4 py-2 rounded font-bold shadow transition-colors">
                        分解
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {craftMode === 'prefix' && (
              <div className="bg-gray-800 p-8 rounded-xl border border-purple-900 shadow-2xl relative overflow-hidden">
                <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl"></div>
                <p className="text-sm text-gray-300 mb-8 leading-relaxed">
                  素材となる武器を消費して、その「二つ名」を現在の装備に上書きします。<br/>
                  <span className="text-red-400 font-bold">※警告：素材の武器は消滅します。（装着済みのパーツはインベントリに返還されます）</span>
                </p>
                
                <div className="flex items-center justify-center gap-8 mb-8">
                  <div className="text-center w-64 p-4 bg-gray-900 rounded-lg border border-gray-700">
                    <div className="text-xs text-gray-500 mb-2">現在の装備</div>
                    <div className="text-xl font-bold text-yellow-300 truncate">{PREFIXES[weapon.prefix].name}</div>
                  </div>
                  <ArrowRight className="text-gray-500" size={32} />
                  <div className="text-center w-64 p-4 bg-gray-900 rounded-lg border border-gray-700">
                    <div className="text-xs text-gray-500 mb-2">上書きする素材</div>
                    {materialWeaponId ? (
                      <div className="text-xl font-bold text-purple-400 truncate">
                        {PREFIXES[inventoryWeapons.find(w=>w.id===materialWeaponId)?.prefix].name}
                      </div>
                    ) : (
                      <div className="text-lg text-gray-600 border border-dashed border-gray-600 rounded p-1">未選択</div>
                    )}
                  </div>
                </div>

                {materialWeaponId && (
                  <button 
                    onClick={craftPrefix}
                    className="w-full py-4 bg-purple-700 hover:bg-purple-600 text-white text-lg font-bold rounded-lg shadow-lg mb-6 transition-transform transform hover:-translate-y-1"
                  >
                    継承を実行する
                  </button>
                )}

                <div className="border-t border-gray-700 pt-6">
                  <div className="text-sm text-gray-400 mb-4">素材を選択してください:</div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto pr-2 custom-scrollbar">
                    {inventoryWeapons.map(w => (
                      <div 
                        key={w.id} 
                        onClick={() => setMaterialWeaponId(w.id)}
                        className={`p-4 rounded-lg cursor-pointer border transition-all ${materialWeaponId === w.id ? 'bg-purple-900/50 border-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.3)]' : 'bg-gray-900 border-gray-700 hover:border-gray-500'}`}
                      >
                        <span className="font-bold text-purple-300 text-lg">{PREFIXES[w.prefix].name}</span> <span className={w.rarity ? RARITIES[w.rarity].color : 'text-gray-300'}>{w.name}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* DATABASE タブ */}
        {activeTab === 'database' && (
          <div className="p-10 lg:p-16 max-w-5xl mx-auto space-y-16">
            <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 text-purple-400 flex items-center gap-3">
              <BookOpen size={28} /> データアーカイブ
            </h2>

            <section>
              <h3 className="text-xl font-bold text-yellow-400 mb-4 flex items-center gap-2">
                <Sword size={20} /> 二つ名効果 (Prefixes)
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {Object.values(PREFIXES).filter(p => p.id !== 'none').map(p => (
                  <div key={p.id} className="bg-gray-800 p-5 rounded-lg border border-gray-700 hover:border-yellow-500/50 transition-colors shadow">
                    <div className="font-bold text-yellow-300 text-xl mb-3">{p.name}</div>
                    <ul className="text-sm text-gray-400 space-y-1.5 font-mono">
                      <li className="flex justify-between"><span>ATK倍率:</span> <span className={`font-bold ${p.atkMult > 1 ? 'text-green-400' : p.atkMult < 1 ? 'text-red-400' : 'text-gray-300'}`}>x{p.atkMult.toFixed(1)}</span></li>
                      <li className="flex justify-between"><span>SPD倍率:</span> <span className={`font-bold ${p.spdMult > 1 ? 'text-blue-400' : p.spdMult < 1 ? 'text-red-400' : 'text-gray-300'}`}>x{p.spdMult.toFixed(1)}</span></li>
                      <li className="flex justify-between"><span>HP倍率:</span> <span className={`font-bold ${p.hpMult > 1 ? 'text-green-400' : p.hpMult < 1 ? 'text-red-400' : 'text-gray-300'}`}>x{p.hpMult.toFixed(1)}</span></li>
                    </ul>
                  </div>
                ))}
              </div>
            </section>

            <section>
              <h3 className="text-xl font-bold text-yellow-300 mb-4 flex items-center gap-2">
                <Sword size={20} /> ジャンク武器 (Weapons)
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {WEAPON_TYPES.map(w => {
                  const isDiscovered = discoveredWeapons.includes(w.id);
                  const r = RARITIES[w.rarity];
                  return (
                  <div key={w.id} className="bg-gray-800 p-5 rounded-lg border border-gray-700 flex items-start gap-4 hover:border-yellow-500/50 transition-colors shadow">
                    <div className={`p-3 bg-gray-900 rounded-lg shadow-inner ${isDiscovered ? r.color : 'text-gray-600'}`}>
                      {isDiscovered ? <Sword size={24} /> : <HelpCircle size={24} />}
                    </div>
                    <div>
                      <div className={`font-bold text-lg flex items-center gap-2 ${isDiscovered ? r.color : 'text-gray-600'}`}>
                        {isDiscovered ? w.name : '???'}
                      </div>
                      <div className="text-sm mt-1 text-gray-500">
                        {isDiscovered ? `Base ATK: ${w.baseAtk}` : '未知の武器。'}
                      </div>
                      <div className="text-sm text-gray-500">
                        {isDiscovered ? `Sockets: ${w.maxSockets}` : ''}
                      </div>
                      {isDiscovered && <div className="text-xs text-yellow-500 mt-2 font-bold">ドロップ: {w.minFloor}階層〜</div>}
                    </div>
                  </div>
                )})}
              </div>
            </section>

            <section>
              <h3 className="text-xl font-bold text-cyan-400 mb-4 flex items-center gap-2">
                <Settings size={20} /> ジャンクパーツ (Parts)
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {Object.values(PARTS).map(p => {
                  const isDiscovered = discoveredParts.includes(p.id);
                  const r = RARITIES[p.rarity];
                  return (
                  <div key={p.id} className="bg-gray-800 p-5 rounded-lg border border-gray-700 flex items-start gap-4 hover:border-cyan-500/50 transition-colors shadow">
                    <div className={`p-3 bg-gray-900 rounded-lg shadow-inner ${isDiscovered ? p.color : 'text-gray-600'}`}>
                      {isDiscovered ? p.icon : <HelpCircle size={24} />}
                    </div>
                    <div>
                      <div className={`font-bold text-lg flex items-center gap-2 ${isDiscovered ? r.color : 'text-gray-600'}`}>
                        {isDiscovered ? p.name : '???'}
                      </div>
                      <div className={`text-sm mt-1 leading-relaxed ${isDiscovered ? 'text-gray-400' : 'text-gray-700'}`}>
                        {isDiscovered ? p.desc : '未知のジャンクパーツ。探索で発見しよう。'}
                      </div>
                      {isDiscovered && <div className="text-xs text-yellow-500 mt-2 font-bold">ドロップ: {p.minFloor}階層〜</div>}
                    </div>
                  </div>
                )})}
              </div>
            </section>

            <section>
              <h3 className="text-xl font-bold text-pink-400 mb-4 flex items-center gap-2">
                <Zap size={20} /> 発見済みシナジー (Synergies)
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                {SYNERGIES.map((syn, idx) => {
                  const isDiscovered = discoveredSynergies.includes(syn.name);
                  return (
                  <div key={idx} className={`bg-gray-800 p-5 rounded-lg border ${isDiscovered ? 'border-pink-900/50 shadow-lg relative overflow-hidden' : 'border-gray-700 shadow relative overflow-hidden opacity-80'}`}>
                    {isDiscovered && <div className="absolute top-0 right-0 w-20 h-20 bg-pink-500/5 rounded-full blur-2xl"></div>}
                    
                    <div className={`font-bold text-xl mb-3 relative z-10 ${isDiscovered ? 'text-pink-400' : 'text-gray-600'}`}>
                      {isDiscovered ? syn.name : '??? シナジー'}
                    </div>
                    <div className="flex items-center gap-2 mb-3 relative z-10 flex-wrap">
                      {syn.req.map((partId, i) => {
                        const partDisc = discoveredParts.includes(partId);
                        return (
                        <React.Fragment key={i}>
                          <div className={`p-2 bg-gray-900 rounded-lg border border-gray-700 ${partDisc ? PARTS[partId].color : 'text-gray-600'}`} title={partDisc ? PARTS[partId].name : '???'}>
                            {partDisc ? PARTS[partId].icon : <HelpCircle size={16} />}
                          </div>
                          {i < syn.req.length - 1 && <span className="text-gray-600 font-bold">+</span>}
                        </React.Fragment>
                      )})}
                    </div>
                    <div className={`text-sm relative z-10 ${isDiscovered ? 'text-gray-300' : 'text-gray-600'}`}>
                      {isDiscovered ? syn.effectText : '特定の組み合わせで発動する隠された力。'}
                    </div>
                  </div>
                )})}
              </div>
            </section>
          </div>
        )}

        {/* SYSTEM タブ */}
        {activeTab === 'system' && (
          <div className="p-10 lg:p-16 max-w-2xl mx-auto">
             <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-8 text-gray-300 flex items-center gap-3">
               <Save size={28} /> システム・データ連携
             </h2>
             <p className="text-sm text-gray-400 mb-8 bg-gray-800/50 p-4 rounded-lg border border-gray-700">
               このゲームはサーバーにデータを保存しません。続きから遊ぶ場合はコードを発行し、メモ帳等に保存してください。
             </p>

             <div className="grid grid-cols-1 gap-8">
               <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-lg">
                  <h3 className="text-lg font-bold text-green-400 mb-4 flex items-center gap-2"><Download size={20}/> 現在の状態をコード化</h3>
                  <button 
                    onClick={generateSaveData}
                    className="w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-bold text-base mb-4 transition-colors"
                  >
                    コードを発行する
                  </button>
                  {saveCode && (
                    <div className="animate-fade-in-up">
                      <textarea 
                        readOnly 
                        value={saveCode} 
                        className="w-full h-32 bg-black/50 text-green-500 text-xs p-4 rounded-lg border border-gray-600 focus:outline-none font-mono break-all custom-scrollbar"
                        onClick={(e) => e.target.select()}
                      />
                      <div className="text-xs text-gray-400 mt-2 flex items-center gap-1">※ 全て選択してコピーしてください</div>
                    </div>
                  )}
               </div>

               <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-lg">
                  <h3 className="text-lg font-bold text-blue-400 mb-4 flex items-center gap-2"><Upload size={20}/> コードから復元</h3>
                  <textarea 
                    value={loadCode}
                    onChange={(e) => setLoadCode(e.target.value)}
                    placeholder="セーブコードを貼り付け..."
                    className="w-full h-32 bg-black/50 text-blue-300 text-xs p-4 rounded-lg border border-gray-600 focus:outline-none focus:border-blue-500 font-mono mb-4 custom-scrollbar"
                  />
                  <button 
                    onClick={loadSaveData}
                    disabled={!loadCode}
                    className="w-full py-3 bg-blue-700 hover:bg-blue-600 disabled:bg-gray-800 disabled:text-gray-600 text-white rounded-lg font-bold text-base transition-colors"
                  >
                    コードを読み込む
                  </button>
               </div>
             </div>

             <div className="mt-16 text-center border-t border-gray-800 pt-8">
               <button 
                 onClick={() => {
                   if(confirm("全データを削除して初期化しますか？(復元不可)")) {
                     localStorage.removeItem('junk_code_zero_save');
                     window.location.reload();
                   }
                 }}
                 className="text-sm text-red-500 hover:text-red-400 hover:underline transition-all"
               >
                 ローカルセーブデータを完全削除する
               </button>
             </div>
          </div>
        )}

        </div>

        {/* ドロップ通知トーストエリア */}
        <div className="absolute top-24 right-8 z-50 flex flex-col gap-3 pointer-events-none">
          {notifications.map(n => (
            <div key={n.id} className={`px-5 py-3 rounded-lg shadow-2xl border backdrop-blur-md transition-all ${
              n.type === 'weapon' ? 'bg-yellow-900/90 border-yellow-500 text-yellow-200' : 
              'bg-cyan-900/90 border-cyan-500 text-cyan-200'
            }`}>
              <div className="flex items-center gap-3">
                {n.type === 'weapon' ? <Sword size={20} className="text-yellow-400"/> : <Settings size={20} className="text-cyan-400"/>}
                <span className="font-bold tracking-wider text-sm">{n.msg}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);