{"id":26244,"date":"2025-12-25T16:24:58","date_gmt":"2025-12-25T07:24:58","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26244"},"modified":"2025-12-25T16:25:00","modified_gmt":"2025-12-25T07:25:00","slug":"aran-red-fantasy-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26244","title":{"rendered":"Aran Red Fantasy.html"},"content":{"rendered":"\n
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Aran Red Fantasy - Ultimate<\/title>\n\n  <style>\n    \/* ===============================\n       \u57fa\u672cCSS\u30b9\u30bf\u30a4\u30eb\n    =============================== *\/\n    body {\n      font-family: Arial, sans-serif;\n      background-color: #f0f0f0;\n      margin: 0;\n      padding: 0;\n    }\n    header, footer, nav {\n      background-color: #005ce6;\n      color: #fff;\n      text-align: center;\n      padding: 10px;\n    }\n    header h1, footer .container { margin: 0; }\n\n    nav a {\n      color: #fff;\n      text-decoration: none;\n      margin: 0 8px;\n      padding: 5px 8px;\n      display: inline-block;\n    }\n    nav a:hover { background-color: #004bb5; border-radius: 4px; }\n    nav a.active { background-color: #003a8c; border-radius: 4px; }\n\n    main { padding: 20px; }\n    .container { max-width: 1400px; margin: 0 auto; }\n\n    .button {\n      background-color: #4CAF50;\n      border: none;\n      color: white;\n      padding: 8px 16px;\n      text-align: center;\n      text-decoration: none;\n      font-size: 14px;\n      margin: 4px 2px;\n      cursor: pointer;\n      border-radius: 5px;\n    }\n    .button:hover { background-color: #45a049; }\n    .disabled { opacity: 0.6; cursor: default; }\n\n    .muted { color:#667; font-size: 13px; }\n\n    \/* \u30ab\u30fc\u30c9\u98a8 *\/\n    .card {\n      background-color: #fff;\n      border: 1px solid #ddd;\n      border-radius: 5px;\n      padding: 16px;\n      margin-bottom: 20px;\n      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n    }\n    .card h3 { margin-top: 0; }\n\n    \/* \u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc *\/\n    .progress-bar {\n      background-color: #ddd;\n      border-radius: 5px;\n      height: 20px;\n      width: 100%;\n      margin-bottom: 10px;\n    }\n    .progress {\n      background-color: #4CAF50;\n      height: 100%;\n      border-radius: 5px;\n      width: 0%;\n    }\n\n    \/* \u30a4\u30f3\u30d9\u30f3\u30c8\u30ea\u30a2\u30a4\u30c6\u30e0\u8868\u793a *\/\n    .inventory-item {\n      background-color: #fff;\n      border: 1px solid #ddd;\n      border-radius: 5px;\n      display: inline-block;\n      margin: 5px;\n      padding: 10px;\n      min-width: 120px;\n      text-align: center;\n      cursor: pointer;\n      transition: background-color 0.2s;\n      user-select: none;\n    }\n    .inventory-item:hover { background-color: #eef; }\n\n    \/* \u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a *\/\n    .message {\n      background-color: #fff8dd;\n      border: 1px solid #f5c666;\n      padding: 10px;\n      margin-bottom: 10px;\n      border-radius: 5px;\n      white-space: pre-wrap;\n    }\n\n    \/* \u30e2\u30fc\u30c0\u30eb *\/\n    .modal-bg {\n      position: fixed;\n      top: 0; left: 0;\n      width:100%; height:100%;\n      background: rgba(0,0,0,.5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      z-index: 999;\n    }\n    .modal {\n      background: #fff;\n      padding: 20px;\n      border-radius: 5px;\n      text-align: center;\n      max-width: 520px;\n      width: 92%;\n    }\n    .modal h2 { margin-top: 0; }\n    .modal img { max-width: 100%; height: auto; border-radius: 6px; }\n\n    \/* \u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u8868\u793a *\/\n    #character-image {\n      max-width: 420px;\n      width: 100%;\n      height: auto;\n      margin: 20px auto;\n      display: block;\n      border-radius: 8px;\n      border: 1px solid #ddd;\n      background: #fff;\n    }\n\n    \/* \u30d0\u30c8\u30eb\u7528\u30b9\u30bf\u30a4\u30eb *\/\n    .battle-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 20px;\n    }\n    .enemy-card {\n      background-color: #fff;\n      border: 1px solid #ddd;\n      border-radius: 5px;\n      width: 250px;\n      padding: 16px;\n      text-align: center;\n    }\n\n    \/* \u30e1\u30c3\u30bb\u30fc\u30b8\u30ed\u30b0 *\/\n    .log {\n      background-color: #eef;\n      border: 1px solid #bbe;\n      border-radius: 5px;\n      padding: 10px;\n      max-height: 300px;\n      overflow-y: auto;\n      margin: 10px 0;\n      white-space: pre-wrap;\n    }\n\n    \/* \u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3 *\/\n    #location-buttons button { margin-right: 10px; }\n\n    \/* \u30b9\u30ad\u30eb\u4e00\u89a7 *\/\n    .skill-list { list-style: none; padding: 0; }\n    .skill-list li { margin: 5px 0; }\n\n    \/* \u30af\u30a8\u30b9\u30c8\u30ed\u30b0 *\/\n    #quest-log-list { list-style: none; padding: 0; }\n    #quest-log-list li { margin: 4px 0; }\n\n    \/* \u5b9f\u7e3e\u4e00\u89a7 *\/\n    #achievement-list { list-style: none; padding: 0; }\n    #achievement-list li { margin: 5px 0; }\n\n    \/* ===============================\n       \u30a2\u30fc\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\n    =============================== *\/\n    .gallery-grid{\n      display:grid;\n      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n      gap: 14px;\n    }\n    .gallery-item{\n      background:#fff;\n      border:1px solid #ddd;\n      border-radius:8px;\n      overflow:hidden;\n      box-shadow: 0px 2px 4px rgba(0,0,0,0.08);\n      display:flex;\n      flex-direction:column;\n    }\n    .gallery-item img{\n      width:100%;\n      height:auto;\n      display:block;\n      background:#fff;\n    }\n    .gallery-meta{\n      padding:10px;\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap:8px;\n      flex-wrap:wrap;\n    }\n    .badge{\n      display:inline-block;\n      padding:4px 8px;\n      border-radius:999px;\n      font-size:12px;\n      background:#eef;\n      border:1px solid #bbe;\n      color:#223;\n    }\n    .badge.owned{\n      background:#e9ffe9;\n      border-color:#9fd49f;\n      color:#1c5a1c;\n    }\n    .badge.rarity-ur{\n      background:#fff2cc;\n      border-color:#f3d27a;\n      color:#6b4b00;\n    }\n    .badge.rarity-ssr{\n      background:#e8f0ff;\n      border-color:#9fb7ff;\n      color:#133a7a;\n    }\n    .gallery-actions{\n      display:flex;\n      gap:8px;\n      flex-wrap:wrap;\n      padding: 0 10px 12px;\n    }\n\n    \/* \u30ac\u30c1\u30e3UI *\/\n    .gacha-row{\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap:10px;\n      flex-wrap:wrap;\n    }\n    .gacha-result{\n      margin-top:10px;\n      display:flex;\n      gap:10px;\n      flex-wrap:wrap;\n      align-items:flex-start;\n    }\n    .gacha-card{\n      width: 220px;\n      background:#fff;\n      border:1px solid #ddd;\n      border-radius:10px;\n      overflow:hidden;\n      box-shadow: 0px 2px 4px rgba(0,0,0,0.08);\n    }\n    .gacha-card img{ width:100%; display:block; }\n    .gacha-card .p{ padding:10px; }\n  <\/style>\n<\/head>\n\n<body>\n  <!-- ===============================\n       \u30d8\u30c3\u30c0\u30fc\n  =============================== -->\n  <header>\n    <h1>Aran Red Fantasy - Ultimate<\/h1>\n  <\/header>\n\n  <!-- ===============================\n       \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\n  =============================== -->\n  <nav>\n    <div class=\"container\">\n      <a href=\"#\" id=\"home-link\" onclick=\"showPage('home')\">Home<\/a>\n      <a href=\"#\" id=\"quests-link\" onclick=\"showPage('quests')\">Quests<\/a>\n      <a href=\"#\" id=\"items-link\" onclick=\"showPage('items')\">Items<\/a>\n      <a href=\"#\" id=\"friends-link\" onclick=\"showPage('friends')\">Companions<\/a>\n      <a href=\"#\" id=\"character-link\" onclick=\"showPage('character')\">Character<\/a>\n      <a href=\"#\" id=\"art-link\" onclick=\"showPage('art')\">Art Gallery<\/a>\n      <a href=\"#\" id=\"battle-link\" onclick=\"showPage('battle')\">Battle<\/a>\n      <a href=\"#\" id=\"store-link\" onclick=\"showPage('store')\">Store<\/a>\n      <a href=\"#\" id=\"craft-link\" onclick=\"showPage('craft')\">Craft<\/a>\n      <a href=\"#\" id=\"skills-link\" onclick=\"showPage('skills')\">Skills<\/a>\n      <a href=\"#\" id=\"questlog-link\" onclick=\"showPage('questlog')\">QuestLog<\/a>\n      <a href=\"#\" id=\"achievements-link\" onclick=\"showPage('achievements')\">Achievements<\/a>\n    <\/div>\n  <\/nav>\n\n  <!-- ===============================\n       \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\n  =============================== -->\n  <main>\n    <div class=\"container\" id=\"content\">\n\n      <!-- ===============================\n           Home\n      =============================== -->\n      <div id=\"home\">\n        <h2>Welcome to Aran Red Fantasy!<\/h2>\n        <p>Explore the world, complete quests, craft items, recruit companions, and unlock achievements!<\/p>\n\n        <div id=\"home-message\"><\/div>\n\n        <button class=\"button\" onclick=\"showLoginModal()\">Log In \/ Change User<\/button>\n        <button class=\"button\" onclick=\"logout()\">Logout (Reset All Data)<\/button>\n        <br\/><br\/>\n\n        <!-- BGM\uff08\u7d99\u7d9a\u518d\u751f\u5bfe\u5fdc\uff1aaudio\u306f\u30da\u30fc\u30b8\u5916\u306b\u7f6e\u304f\uff09 -->\n        <div class=\"card\">\n          <h3>BGM<\/h3>\n          <p class=\"muted\">\u203b \u6700\u521d\u306e1\u56de\u3060\u3051\u300cEnable BGM\u300d\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u30d6\u30e9\u30a6\u30b6\u306e\u81ea\u52d5\u518d\u751f\u30d6\u30ed\u30c3\u30af\u5bfe\u7b56\uff09\u3002\u4ee5\u5f8c\u306f\u30da\u30fc\u30b8\u5207\u66ff\u3057\u3066\u3082\u7d99\u7d9a\u3057\u307e\u3059\u3002<\/p>\n          <button class=\"button\" id=\"bgm-enable-btn\" onclick=\"enableBGM()\">Enable BGM (First Click)<\/button>\n          <button class=\"button\" onclick=\"toggleMusic()\">Toggle Music<\/button>\n          <div class=\"muted\" id=\"bgm-status\">Status: Off<\/div>\n        <\/div>\n\n        <!-- \u2605\u30ac\u30c1\u30e3\uff08SSR\/UR\u8ffd\u52a0\uff09 -->\n        <div class=\"card\">\n          <h3>Art Gacha<\/h3>\n          <div class=\"gacha-row\">\n            <div class=\"muted\">\n              Cost: <strong>10 Gold<\/strong> \/ pull<br\/>\n              SSR\/UR\u304c\u51fa\u307e\u3059\u3002\u5f15\u3044\u305f\u30a2\u30fc\u30c8\u306f\u81ea\u52d5\u3067\u6240\u6301\u306b\u306a\u308a\u3001\u30a2\u30fc\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002\n            <\/div>\n            <div>\n              <button class=\"button\" onclick=\"pullArtGacha(1)\">Pull x1<\/button>\n              <button class=\"button\" onclick=\"pullArtGacha(10)\">Pull x10<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"muted\" id=\"gacha-status\">\u2014<\/div>\n          <div class=\"gacha-result\" id=\"gacha-result\"><\/div>\n        <\/div>\n\n        <!-- \u30e9\u30f3\u30c0\u30e0\u30a4\u30d9\u30f3\u30c8\/\u5929\u5019\u8868\u793a -->\n        <div id=\"weather-display\"><\/div>\n        <button class=\"button\" onclick=\"triggerRandomEvent()\">Check Random Event<\/button>\n\n        <!-- \u663c\u591c\u30b5\u30a4\u30af\u30eb -->\n        <div id=\"day-night-display\"><\/div>\n        <button class=\"button\" onclick=\"advanceTime()\">Pass Time (+6h)<\/button>\n\n        <!-- \u5bbf\u5c4b\u3067\u4f11\u606f -->\n        <h3>Inn<\/h3>\n        <button class=\"button\" onclick=\"restAtInn()\">Rest at Inn (10 Gold)<\/button>\n\n        <!-- \u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u79fb\u52d5 -->\n        <div id=\"location-section\" class=\"card\">\n          <h3>Locations<\/h3>\n          <div id=\"location-buttons\">\n            <button class=\"button\" onclick=\"moveLocation('Town')\">Move to Town<\/button>\n            <button class=\"button\" onclick=\"moveLocation('Forest')\">Move to Forest<\/button>\n            <button class=\"button\" onclick=\"moveLocation('Dungeon')\">Move to Dungeon<\/button>\n            <button class=\"button\" onclick=\"moveLocation('Mountain')\">Move to Mountain<\/button>\n          <\/div>\n          <p>Current Location: <span id=\"current-location\">Town<\/span><\/p>\n          <div class=\"log\" id=\"location-log\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ===============================\n           Quests\n      =============================== -->\n      <div id=\"quests\" style=\"display: none;\">\n        <h2>Quests<\/h2>\n\n        <h3>Main Quests<\/h3>\n        <div class=\"card\" id=\"dragon-quest\">\n          <h4>Defeat the Dragon<\/h4>\n          <p>A fierce dragon has appeared near the village! Defeat it to save the locals.<\/p>\n          <div class=\"progress-bar\">\n            <div class=\"progress\" id=\"dragon-progress\"><\/div>\n          <\/div>\n          <p>Reward: 100 Gold, 100 XP, Dragon Scale<\/p>\n          <button class=\"button\" onclick=\"startQuest('dragon')\">Start Quest<\/button>\n        <\/div>\n\n        <div class=\"card\" id=\"final-quest\" style=\"display: none;\">\n          <h4>The Ancient Evil (Final)<\/h4>\n          <p>The final threat emerges after you've proven your strength! Vanquish it!<\/p>\n          <div class=\"progress-bar\">\n            <div class=\"progress\" id=\"final-progress\"><\/div>\n          <\/div>\n          <p>Reward: 200 Gold, 200 XP, Legendary Relic<\/p>\n          <button class=\"button\" onclick=\"startQuest('final')\">Start Quest<\/button>\n        <\/div>\n\n        <h3>Side Quests<\/h3>\n        <div class=\"card\" id=\"crystal-quest\">\n          <h4>Collect Magic Crystals<\/h4>\n          <p>Gather magical crystals scattered around the forest. Watch out for monsters!<\/p>\n          <div class=\"progress-bar\">\n            <div class=\"progress\" id=\"crystal-progress\"><\/div>\n          <\/div>\n          <p>Reward: 50 Gold, 50 XP, Magic Crystal<\/p>\n          <button class=\"button\" onclick=\"startQuest('crystal')\">Start Quest<\/button>\n        <\/div>\n\n        <div class=\"card\" id=\"orc-quest\">\n          <h4>Eliminate the Orc Bandits<\/h4>\n          <p>A group of orc bandits is attacking travelers. Defeat them to restore peace!<\/p>\n          <div class=\"progress-bar\">\n            <div class=\"progress\" id=\"orc-progress\"><\/div>\n          <\/div>\n          <p>Reward: 80 Gold, 70 XP, Orc Tusk<\/p>\n          <button class=\"button\" onclick=\"startQuest('orc')\">Start Quest<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- ===============================\n           Items\n      =============================== -->\n      <div id=\"items\" style=\"display: none;\">\n        <h2>Inventory<\/h2>\n        <p>Click an item to use\/equip\/sell it (if applicable).<\/p>\n        <div id=\"inventory\"><\/div>\n      <\/div>\n\n      <!-- ===============================\n           Companions\n      =============================== -->\n      <div id=\"friends\" style=\"display: none;\">\n        <h2>Companions<\/h2>\n        <p>Hire companions who fight alongside you!<\/p>\n        <input type=\"text\" id=\"friendName\" placeholder=\"Companion name\" \/>\n        <button class=\"button\" onclick=\"hireCompanion()\">Hire Companion<\/button>\n\n        <h3>Your Companions<\/h3>\n        <ul id=\"companion-list\"><\/ul>\n        <p class=\"muted\">* Each companion has its own level, HP, and Attack. They also gain XP when you do.<\/p>\n      <\/div>\n\n      <!-- ===============================\n           Character\n      =============================== -->\n      <div id=\"character\" style=\"display: none;\">\n        <h2>Character<\/h2>\n        <img src=\"a.png\" alt=\"Character\" id=\"character-image\"\/>\n        <p>Name: <span id=\"character-name\"><\/span><\/p>\n        <p>Level: <span id=\"character-level\"><\/span><\/p>\n        <p>HP: <span id=\"character-hp\"><\/span> \/ <span id=\"character-maxhp\"><\/span><\/p>\n        <p>XP: <span id=\"character-xp\"><\/span> \/ <span id=\"character-nextLevelXp\"><\/span><\/p>\n        <p>Gold: <span id=\"character-gold\"><\/span><\/p>\n        <p>Attack: <span id=\"character-attack\"><\/span><\/p>\n        <p>Defense: <span id=\"character-defense\"><\/span><\/p>\n        <p>Skill Points: <span id=\"character-skillpoints\"><\/span><\/p>\n        <p>Active Buffs\/Debuffs: <span id=\"character-buffs\">None<\/span><\/p>\n        <p>Special Items: <span id=\"character-items\">None<\/span><\/p>\n        <p class=\"muted\">Portrait changes when you buy or pull an art (Store \/ Gacha).<\/p>\n      <\/div>\n\n      <!-- ===============================\n           Art Gallery\n      =============================== -->\n      <div id=\"art\" style=\"display: none;\">\n        <h2>\u30a2\u30fc\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc<\/h2>\n        <p class=\"muted\">\u6240\u6301\u6e08\u307f\u306e\u30a2\u30fc\u30c8\u306f\u300cSet as Character Art\u300d\u3067\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u753b\u50cf\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30ac\u30c1\u30e3\u3067\u3082\u5165\u624b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n        <div class=\"card\">\n          <h3>Your Art Collection<\/h3>\n          <div id=\"art-collection-summary\" class=\"muted\"><\/div>\n        <\/div>\n\n        <div class=\"gallery-grid\" id=\"art-gallery-grid\"><\/div>\n      <\/div>\n\n      <!-- ===============================\n           Battle\n      =============================== -->\n      <div id=\"battle\" style=\"display: none;\">\n        <h2>Battle Arena<\/h2>\n        <p>Choose an enemy to fight or wait for random encounters in the wild!<\/p>\n\n        <div class=\"battle-container\">\n          <div class=\"enemy-card\">\n            <h3>Slime<\/h3>\n            <p>HP: 30<\/p>\n            <p>Attack: 1-3<\/p>\n            <p>Reward: 10 Gold, 10 XP<\/p>\n            <button class=\"button\" onclick=\"startBattle('slime')\">Fight Slime<\/button>\n          <\/div>\n\n          <div class=\"enemy-card\">\n            <h3>Goblin<\/h3>\n            <p>HP: 50<\/p>\n            <p>Attack: 2-5<\/p>\n            <p>Reward: 20 Gold, 20 XP<\/p>\n            <button class=\"button\" onclick=\"startBattle('goblin')\">Fight Goblin<\/button>\n          <\/div>\n\n          <div class=\"enemy-card\">\n            <h3>Orc Warrior<\/h3>\n            <p>HP: 80<\/p>\n            <p>Attack: 5-8<\/p>\n            <p>Reward: 40 Gold, 40 XP<\/p>\n            <button class=\"button\" onclick=\"startBattle('orcEnemy')\">Fight Orc<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"log\" id=\"battle-log\"><\/div>\n      <\/div>\n\n      <!-- ===============================\n           Store\n      =============================== -->\n      <div id=\"store\" style=\"display: none;\">\n        <h2>Store<\/h2>\n        <p>Use your gold to purchase or sell items!<\/p>\n\n        <div class=\"card\">\n          <h3>Buy Items<\/h3>\n          <div>\n            <h4>Minor Health Potion (20 Gold)<\/h4>\n            <button class=\"button\" onclick=\"buyItem('Minor Health Potion')\">Buy<\/button>\n          <\/div>\n          <div>\n            <h4>Major Health Potion (50 Gold)<\/h4>\n            <button class=\"button\" onclick=\"buyItem('Major Health Potion')\">Buy<\/button>\n          <\/div>\n          <div>\n            <h4>Iron Sword (80 Gold)<\/h4>\n            <button class=\"button\" onclick=\"buyItem('Iron Sword')\">Buy<\/button>\n          <\/div>\n          <div>\n            <h4>Steel Armor (100 Gold)<\/h4>\n            <button class=\"button\" onclick=\"buyItem('Steel Armor')\">Buy<\/button>\n          <\/div>\n          <div>\n            <h4>Lucky Ring (120 Gold)<\/h4>\n            <button class=\"button\" onclick=\"buyItem('Lucky Ring')\">Buy<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- \u30a2\u30fc\u30c8\u8cfc\u5165\uff1a\u8cfc\u5165\u3059\u308b\u3068\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u7d75\u304c\u5909\u308f\u308b -->\n        <div class=\"card\">\n          <h3>Art Shop\uff08\u8cfc\u5165\u3067\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u753b\u50cf\u304c\u5909\u308f\u308b\uff09<\/h3>\n          <p class=\"muted\">Buy an art \u2192 it becomes \u201cOwned\u201d and you can set it anytime. (Gacha also adds Owned.)<\/p>\n          <div id=\"art-shop-list\"><\/div>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Sell Items<\/h3>\n          <p>Click an item in your inventory to sell it, if possible.<\/p>\n          <p class=\"muted\">(You can't sell special quest items or currently equipped gear.)<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- ===============================\n           Craft\n      =============================== -->\n      <div id=\"craft\" style=\"display: none;\">\n        <h2>Item Crafting<\/h2>\n        <p>Combine items to create something new!<\/p>\n        <div class=\"card\">\n          <h3>Example Recipes<\/h3>\n          <ul>\n            <li>Dragon Scale + Orc Tusk => Dragon Tusk Lance (Weapon)<\/li>\n            <li>Magic Crystal + Magic Crystal => Greater Crystal (Special)<\/li>\n          <\/ul>\n          <p>Select any two items from your inventory to craft (if a valid recipe exists).<\/p>\n        <\/div>\n        <p>Currently Selected: <span id=\"craft-selection\">None<\/span><\/p>\n        <button class=\"button\" id=\"craft-button\" onclick=\"attemptCraft()\" disabled>Craft<\/button>\n      <\/div>\n\n      <!-- ===============================\n           Skills\n      =============================== -->\n      <div id=\"skills\" style=\"display: none;\">\n        <h2>Skills<\/h2>\n        <p>Use skill points to learn or upgrade skills!<\/p>\n        <p>You have <span id=\"skill-point-display\"><\/span> skill points.<\/p>\n        <ul class=\"skill-list\" id=\"skill-list\"><\/ul>\n      <\/div>\n\n      <!-- ===============================\n           QuestLog\n      =============================== -->\n      <div id=\"questlog\" style=\"display: none;\">\n        <h2>Quest Log<\/h2>\n        <ul id=\"quest-log-list\"><\/ul>\n      <\/div>\n\n      <!-- ===============================\n           Achievements\n      =============================== -->\n      <div id=\"achievements\" style=\"display: none;\">\n        <h2>Achievements<\/h2>\n        <ul id=\"achievement-list\"><\/ul>\n      <\/div>\n\n    <\/div>\n  <\/main>\n\n  <!-- ===============================\n       \u30d5\u30c3\u30bf\u30fc\n  =============================== -->\n  <footer>\n    <div class=\"container\">\n      &copy; 2025 Aran Red Fantasy\n    <\/div>\n  <\/footer>\n\n  <!-- ===============================\n       \u30ed\u30b0\u30a4\u30f3\u30e2\u30fc\u30c0\u30eb\n  =============================== -->\n  <div class=\"modal-bg\" id=\"login-modal-bg\" style=\"display: none;\">\n    <div class=\"modal\">\n      <h2>Enter Your Name<\/h2>\n      <input type=\"text\" id=\"loginName\" placeholder=\"Your name\" \/>\n      <br\/><br\/>\n      <button class=\"button\" onclick=\"confirmLogin()\">Login<\/button>\n      <button class=\"button\" onclick=\"closeLoginModal()\">Cancel<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- ===============================\n       \u30a2\u30a4\u30c6\u30e0\u4f7f\u7528\u30e2\u30fc\u30c0\u30eb\n  =============================== -->\n  <div class=\"modal-bg\" id=\"item-modal-bg\" style=\"display: none;\">\n    <div class=\"modal\">\n      <h2 id=\"item-modal-title\">Use\/Equip Item<\/h2>\n      <p id=\"item-modal-description\"><\/p>\n      <button class=\"button\" onclick=\"confirmItemUse()\">Use\/Equip<\/button>\n      <button class=\"button\" onclick=\"closeItemModal()\">Cancel<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- ===============================\n       \u30a2\u30fc\u30c8\u30d7\u30ec\u30d3\u30e5\u30fc\u30e2\u30fc\u30c0\u30eb\n  =============================== -->\n  <div class=\"modal-bg\" id=\"art-modal-bg\" style=\"display: none;\">\n    <div class=\"modal\">\n      <h2 id=\"art-modal-title\">Art Preview<\/h2>\n      <img id=\"art-modal-img\" alt=\"Art Preview\" \/>\n      <p class=\"muted\" id=\"art-modal-desc\"><\/p>\n      <div style=\"margin-top:10px;\">\n        <button class=\"button\" id=\"art-modal-set-btn\" onclick=\"confirmSetPortrait()\">Set as Character Art<\/button>\n        <button class=\"button\" onclick=\"closeArtModal()\">Close<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ===============================\n       BGM\u672c\u4f53\uff08\u7d99\u7d9a\u518d\u751f\u306e\u305f\u3081\u30da\u30fc\u30b8\u5207\u66ff\u306e\u5916\u306b\u7f6e\u304f\uff09\n  =============================== -->\n  <audio id=\"bgm\" loop preload=\"auto\" playsinline>\n    <source src=\"http:\/\/tyosuke20xx.com\/fjordnosundakaze.mp3\" type=\"audio\/mpeg\">\n  <\/audio>\n\n  <!-- ===============================\n       JavaScript\n  =============================== -->\n  <script>\n    \/\/ -------------------------------------------\n    \/\/ \u30da\u30fc\u30b8\u5207\u308a\u66ff\u3048\n    \/\/ -------------------------------------------\n    function showPage(page) {\n      const pages = [\n        \"home\", \"quests\", \"items\", \"friends\", \"character\",\n        \"art\",\n        \"battle\", \"store\", \"craft\", \"skills\", \"questlog\", \"achievements\"\n      ];\n      pages.forEach(p => {\n        const pageElement = document.getElementById(p);\n        const linkElement = document.getElementById(p + '-link');\n        if (!pageElement) return;\n\n        if (p === page) {\n          pageElement.style.display = \"block\";\n          if (linkElement) linkElement.classList.add(\"active\");\n        } else {\n          pageElement.style.display = \"none\";\n          if (linkElement) linkElement.classList.remove(\"active\");\n        }\n      });\n\n      if (page === \"skills\") refreshSkillList();\n      if (page === \"questlog\") updateQuestLog();\n      if (page === \"achievements\") updateAchievementList();\n      if (page === \"art\") renderArtGallery();\n      if (page === \"store\") renderArtShop();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u30ad\u30fc\n    \/\/ -------------------------------------------\n    const LS_KEY_USER        = \"ARF_Username_Ultimate\";\n    const LS_KEY_CHARACTER   = \"ARF_Character_Ultimate\";\n    const LS_KEY_INVENTORY   = \"ARF_Inventory_Ultimate\";\n    const LS_KEY_COMPANIONS  = \"ARF_Companions_Ultimate\";\n    const LS_KEY_QUESTS      = \"ARF_Quests_Ultimate\";\n    const LS_KEY_SKILLS      = \"ARF_Skills_Ultimate\";\n    const LS_KEY_DAYTIME     = \"ARF_Daytime_Ultimate\";\n    const LS_KEY_WEATHER     = \"ARF_Weather_Ultimate\";\n    const LS_KEY_ACHIEVEMENT = \"ARF_Achievement_Ultimate\";\n\n    \/\/ BGM\u72b6\u614b\n    const LS_KEY_BGM = \"ARF_BGM_STATE_Ultimate\";\n\n    \/\/ -------------------------------------------\n    \/\/ \u2605\u30a2\u30fc\u30c8\u5b9a\u7fa9\uff08SSR1\u301cSSR3 + UR1\u301cUR10\uff09\n    \/\/ -------------------------------------------\n    const ART_LIST = [\n      \/\/ SSR\uff08\u8ffd\u52a0\uff09\n      { key:\"SSR1\", name:\"SSR Art 1\", url:\"http:\/\/tyosuke20xx.com\/SSR1.png\", cost: 20, rarity:\"SSR\" },\n      { key:\"SSR2\", name:\"SSR Art 2\", url:\"http:\/\/tyosuke20xx.com\/SSR2.png\", cost: 20, rarity:\"SSR\" },\n      { key:\"SSR3\", name:\"SSR Art 3\", url:\"http:\/\/tyosuke20xx.com\/SSR3.png\", cost: 20, rarity:\"SSR\" },\n\n      \/\/ UR\n      { key:\"UR1\",  name:\"UR Art 1\",  url:\"http:\/\/tyosuke20xx.com\/UR1.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR2\",  name:\"UR Art 2\",  url:\"http:\/\/tyosuke20xx.com\/UR2.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR3\",  name:\"UR Art 3\",  url:\"http:\/\/tyosuke20xx.com\/UR3.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR4\",  name:\"UR Art 4\",  url:\"http:\/\/tyosuke20xx.com\/UR4.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR5\",  name:\"UR Art 5\",  url:\"http:\/\/tyosuke20xx.com\/UR5.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR6\",  name:\"UR Art 6\",  url:\"http:\/\/tyosuke20xx.com\/UR6.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR7\",  name:\"UR Art 7\",  url:\"http:\/\/tyosuke20xx.com\/UR7.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR8\",  name:\"UR Art 8\",  url:\"http:\/\/tyosuke20xx.com\/UR8.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR9\",  name:\"UR Art 9\",  url:\"http:\/\/tyosuke20xx.com\/UR9.png\",  cost: 30, rarity:\"UR\" },\n      { key:\"UR10\", name:\"UR Art 10\", url:\"http:\/\/tyosuke20xx.com\/UR10.png\", cost: 30, rarity:\"UR\" }\n    ];\n\n    \/\/ -------------------------------------------\n    \/\/ \u2605\u30ac\u30c1\u30e3\u8a2d\u5b9a\uff08SSR\/UR\u62bd\u9078\uff09\n    \/\/ -------------------------------------------\n    const GACHA_COST = 10;         \/\/ 1\u56de10G\n    const GACHA_RATE_UR = 10;      \/\/ UR 10%\n    const GACHA_RATE_SSR = 90;     \/\/ SSR 90%\uff08\u6b8b\u308a\uff09\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u60c5\u5831\n    \/\/ -------------------------------------------\n    let character = {\n      name: \"Adventurer\",\n      level: 1,\n      hp: 50,\n      maxHp: 50,\n      xp: 0,\n      nextLevelXp: 100,\n      gold: 0,\n      attack: 5,\n      defense: 2,\n      skillPoints: 0,\n      location: \"Town\",\n      specialItems: [],\n      buffs: [],\n\n      ownedArtKeys: [],\n      portraitUrl: \"a.png\"\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ \u30af\u30a8\u30b9\u30c8\u60c5\u5831\n    \/\/ -------------------------------------------\n    let mainQuests = {\n      dragon: {\n        name: \"Defeat the Dragon\",\n        progress: 0,\n        reward: { gold: 100, xp: 100, items: [\"Dragon Scale\"] },\n        isRunning: false,\n        isCompleted: false,\n        unlockNext: \"final\",\n        locked: false\n      },\n      final: {\n        name: \"The Ancient Evil\",\n        progress: 0,\n        reward: { gold: 200, xp: 200, items: [\"Legendary Relic\"] },\n        isRunning: false,\n        isCompleted: false,\n        unlockNext: null,\n        locked: true\n      }\n    };\n    let sideQuests = {\n      crystal: {\n        name: \"Collect Magic Crystals\",\n        progress: 0,\n        reward: { gold: 50, xp: 50, items: [\"Magic Crystal\"] },\n        isRunning: false,\n        isCompleted: false,\n        unlockNext: null,\n        locked: false\n      },\n      orc: {\n        name: \"Eliminate the Orc Bandits\",\n        progress: 0,\n        reward: { gold: 80, xp: 70, items: [\"Orc Tusk\"] },\n        isRunning: false,\n        isCompleted: false,\n        unlockNext: null,\n        locked: false\n      }\n    };\n\n    function getAllQuests() {\n      return { ...mainQuests, ...sideQuests };\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30a4\u30f3\u30d9\u30f3\u30c8\u30ea\n    \/\/ -------------------------------------------\n    let inventory = [];\n\n    \/\/ -------------------------------------------\n    \/\/ \u4ef2\u9593\n    \/\/ -------------------------------------------\n    let companions = [];\n\n    \/\/ -------------------------------------------\n    \/\/ \u30b9\u30ad\u30eb\n    \/\/ -------------------------------------------\n    let skills = {\n      Fireball: {\n        name: \"Fireball\",\n        level: 0,\n        maxLevel: 3,\n        cost: 1,\n        description: \"Deal extra magic damage in battle\"\n      },\n      Heal: {\n        name: \"Heal\",\n        level: 0,\n        maxLevel: 3,\n        cost: 1,\n        description: \"Restores some HP at the start of battle\"\n      }\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ \u30d0\u30c8\u30eb\u7528\u30a8\u30cd\u30df\u30fc\n    \/\/ -------------------------------------------\n    const enemies = {\n      slime: {\n        name: \"Slime\",\n        hp: 30,\n        attackMin: 1,\n        attackMax: 3,\n        rewardGold: 10,\n        rewardXp: 10\n      },\n      goblin: {\n        name: \"Goblin\",\n        hp: 50,\n        attackMin: 2,\n        attackMax: 5,\n        rewardGold: 20,\n        rewardXp: 20\n      },\n      orcEnemy: {\n        name: \"Orc Warrior\",\n        hp: 80,\n        attackMin: 5,\n        attackMax: 8,\n        rewardGold: 40,\n        rewardXp: 40\n      }\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ \u30b9\u30c8\u30a2\u30a2\u30a4\u30c6\u30e0\n    \/\/ -------------------------------------------\n    const storeItems = {\n      \"Minor Health Potion\": { name: \"Minor Health Potion\", type: \"potion\", heal: 20, cost: 20 },\n      \"Major Health Potion\": { name: \"Major Health Potion\", type: \"potion\", heal: 50, cost: 50 },\n      \"Iron Sword\": { name: \"Iron Sword\", type: \"weapon\", attack: 5, cost: 80, equipped: false },\n      \"Steel Armor\": { name: \"Steel Armor\", type: \"armor\", defense: 5, cost: 100, equipped: false },\n      \"Lucky Ring\": { name: \"Lucky Ring\", type: \"accessory\", attack: 1, defense: 1, cost: 120, equipped: false }\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ \u30af\u30e9\u30d5\u30c8\u7528\u30ec\u30b7\u30d4\n    \/\/ -------------------------------------------\n    const craftRecipes = [\n      {\n        components: [\"Dragon Scale\", \"Orc Tusk\"].sort(),\n        result: { name: \"Dragon Tusk Lance\", type: \"weapon\", attack: 10, equipped: false }\n      },\n      {\n        components: [\"Magic Crystal\", \"Magic Crystal\"].sort(),\n        result: { name: \"Greater Crystal\", type: \"special\" }\n      }\n    ];\n\n    \/\/ -------------------------------------------\n    \/\/ \u663c\u591c & \u5929\u5019\n    \/\/ -------------------------------------------\n    let currentHour = 12;\n    let currentWeather = \"Sunny\";\n    const possibleWeathers = [\"Sunny\",\"Rainy\",\"Storm\",\"Cloudy\"];\n\n    \/\/ -------------------------------------------\n    \/\/ \u5b9f\u7e3e\n    \/\/ -------------------------------------------\n    let achievements = {\n      firstKill: { name: \"First Blood\", description: \"Defeat your first enemy.\", isUnlocked: false },\n      level5:    { name: \"Rising Hero\", description: \"Reach Level 5.\", isUnlocked: false },\n      quest3:    { name: \"Quest Hunter\", description: \"Complete 3 Quests.\", isUnlocked: false }\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ onload\n    \/\/ -------------------------------------------\n    window.onload = function() {\n      loadLocalData();\n\n      \/\/ BGM\uff08\u7d99\u7d9a\u518d\u751f & \u72b6\u614b\u4fdd\u5b58\uff09\n      loadBgmState();\n      wireBgmAutoSave();\n      updateEnableBtn();\n      setBgmStatus(isMusicPlaying ? \"On (will resume)\" : \"Off\");\n      resumeBgmOnNextUserActionIfNeeded();\n\n      updateCharacterInfo();\n      updateQuestVisibility();\n      updateInventoryDisplay();\n      updateCompanionList();\n      updateDayNightDisplay();\n      updateWeatherDisplay();\n      updateAchievementList();\n      renderArtShop();\n      renderArtGallery();\n\n      showPage('home');\n      document.getElementById(\"current-location\").textContent = character.location;\n    };\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8: \u8aad\u8fbc\/\u4fdd\u5b58\/\u30ea\u30bb\u30c3\u30c8\n    \/\/ -------------------------------------------\n    function loadLocalData() {\n      let storedName = localStorage.getItem(LS_KEY_USER);\n      if (storedName) character.name = storedName;\n\n      let storedChar = localStorage.getItem(LS_KEY_CHARACTER);\n      if (storedChar) {\n        try {\n          const parsed = JSON.parse(storedChar);\n          character = { ...character, ...parsed };\n        } catch(e) {}\n      }\n\n      if (!Array.isArray(character.ownedArtKeys)) character.ownedArtKeys = [];\n      if (!character.portraitUrl) character.portraitUrl = \"a.png\";\n\n      let storedInv = localStorage.getItem(LS_KEY_INVENTORY);\n      if (storedInv) { try { inventory = JSON.parse(storedInv); } catch(e) {} }\n\n      let storedComp = localStorage.getItem(LS_KEY_COMPANIONS);\n      if (storedComp) { try { companions = JSON.parse(storedComp); } catch(e) {} }\n\n      let storedMQ = localStorage.getItem(LS_KEY_QUESTS+\"_main\");\n      if (storedMQ) { try { mainQuests = JSON.parse(storedMQ); } catch(e) {} }\n\n      let storedSQ = localStorage.getItem(LS_KEY_QUESTS+\"_side\");\n      if (storedSQ) { try { sideQuests = JSON.parse(storedSQ); } catch(e) {} }\n\n      let storedSkills = localStorage.getItem(LS_KEY_SKILLS);\n      if (storedSkills) { try { skills = JSON.parse(storedSkills); } catch(e) {} }\n\n      let storedHour = localStorage.getItem(LS_KEY_DAYTIME+\"_hour\");\n      if (storedHour) currentHour = parseInt(storedHour, 10);\n\n      let storedWeather = localStorage.getItem(LS_KEY_WEATHER);\n      if (storedWeather) currentWeather = storedWeather;\n\n      let storedAchv = localStorage.getItem(LS_KEY_ACHIEVEMENT);\n      if (storedAchv) { try { achievements = JSON.parse(storedAchv); } catch(e) {} }\n    }\n\n    function saveLocalData() {\n      localStorage.setItem(LS_KEY_USER, character.name);\n      localStorage.setItem(LS_KEY_CHARACTER, JSON.stringify(character));\n      localStorage.setItem(LS_KEY_INVENTORY, JSON.stringify(inventory));\n      localStorage.setItem(LS_KEY_COMPANIONS, JSON.stringify(companions));\n      localStorage.setItem(LS_KEY_QUESTS+\"_main\", JSON.stringify(mainQuests));\n      localStorage.setItem(LS_KEY_QUESTS+\"_side\", JSON.stringify(sideQuests));\n      localStorage.setItem(LS_KEY_SKILLS, JSON.stringify(skills));\n      localStorage.setItem(LS_KEY_DAYTIME+\"_hour\", currentHour.toString());\n      localStorage.setItem(LS_KEY_WEATHER, currentWeather);\n      localStorage.setItem(LS_KEY_ACHIEVEMENT, JSON.stringify(achievements));\n    }\n\n    function logout() {\n      if (!confirm(\"All data will be cleared. Are you sure?\")) return;\n      localStorage.clear();\n      location.reload();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ed\u30b0\u30a4\u30f3\u30e2\u30fc\u30c0\u30eb\n    \/\/ -------------------------------------------\n    function showLoginModal() {\n      document.getElementById(\"login-modal-bg\").style.display = \"flex\";\n    }\n    function closeLoginModal() {\n      document.getElementById(\"login-modal-bg\").style.display = \"none\";\n    }\n    function confirmLogin() {\n      const inputName = document.getElementById(\"loginName\").value.trim();\n      if (inputName) {\n        character.name = inputName;\n        saveLocalData();\n        updateCharacterInfo();\n      }\n      closeLoginModal();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u60c5\u5831\u8868\u793a\u66f4\u65b0\n    \/\/ -------------------------------------------\n    function updateCharacterInfo() {\n      document.getElementById(\"character-name\").textContent = character.name;\n      document.getElementById(\"character-level\").textContent = character.level;\n      document.getElementById(\"character-hp\").textContent = character.hp;\n      document.getElementById(\"character-maxhp\").textContent = character.maxHp;\n      document.getElementById(\"character-xp\").textContent = character.xp;\n      document.getElementById(\"character-nextLevelXp\").textContent = character.nextLevelXp;\n      document.getElementById(\"character-gold\").textContent = character.gold;\n      document.getElementById(\"character-attack\").textContent = character.attack;\n      document.getElementById(\"character-defense\").textContent = character.defense;\n      document.getElementById(\"character-skillpoints\").textContent = character.skillPoints;\n\n      const img = document.getElementById(\"character-image\");\n      if (img) img.src = character.portraitUrl || \"a.png\";\n\n      if (character.specialItems.length > 0) {\n        document.getElementById(\"character-items\").textContent = character.specialItems.join(\", \");\n      } else {\n        document.getElementById(\"character-items\").textContent = \"None\";\n      }\n\n      if (character.buffs.length > 0) {\n        document.getElementById(\"character-buffs\").textContent = character.buffs.map(b => b.name).join(\", \");\n      } else {\n        document.getElementById(\"character-buffs\").textContent = \"None\";\n      }\n\n      saveLocalData();\n      checkAchievements();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\n    \/\/ -------------------------------------------\n    function addXp(amount) {\n      character.xp += amount;\n      while (character.xp >= character.nextLevelXp) {\n        character.level++;\n        character.xp -= character.nextLevelXp;\n        character.nextLevelXp = character.level * 100;\n        character.maxHp += 20;\n        character.hp = character.maxHp;\n        character.attack += 1;\n        character.defense += 1;\n        character.skillPoints += 1;\n        showHomeMessage(`Level up! Now Level ${character.level} (+1 Skill Point).`);\n\n        for (let c of companions) {\n          c.level++;\n          c.hp = c.maxHp;\n          c.attack++;\n        }\n      }\n      updateCharacterInfo();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30d0\u30d5\/\u30c7\u30d0\u30d5\n    \/\/ -------------------------------------------\n    function addBuff(buffObj) {\n      character.buffs.push(buffObj);\n      updateCharacterInfo();\n    }\n\n    function processBuffsEachTurn(logElm) {\n      for (let i = character.buffs.length - 1; i >= 0; i--) {\n        const b = character.buffs[i];\n        if (b.effectType === \"dot\") {\n          character.hp -= b.effectValue;\n          if (character.hp < 0) character.hp = 0;\n          logMessage(logElm, `[${b.name}] You take ${b.effectValue} damage! (HP: ${character.hp})`);\n        }\n        b.turns--;\n        if (b.turns <= 0) {\n          logMessage(logElm, `[${b.name}] effect ended.`);\n          character.buffs.splice(i, 1);\n        }\n      }\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30db\u30fc\u30e0\u30e1\u30c3\u30bb\u30fc\u30b8\n    \/\/ -------------------------------------------\n    function showHomeMessage(msg) {\n      const homeMessage = document.getElementById('home-message');\n      homeMessage.innerHTML = `<div class=\"message\">${msg}<\/div>`;\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u663c\u591c\n    \/\/ -------------------------------------------\n    function updateDayNightDisplay() {\n      let dnElm = document.getElementById(\"day-night-display\");\n      let hourStr = (currentHour < 10) ? \"0\"+currentHour : currentHour;\n      let isNight = (currentHour >= 18 || currentHour < 6);\n      let dayNight = isNight ? \"Night\" : \"Day\";\n      dnElm.innerHTML = `<p>Time: ${hourStr}:00 (${dayNight})<\/p>`;\n    }\n    function advanceTime() {\n      currentHour += 6;\n      if (currentHour >= 24) currentHour -= 24;\n      saveLocalData();\n      updateDayNightDisplay();\n      showHomeMessage(\"Time passes by...\");\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u5929\u5019\n    \/\/ -------------------------------------------\n    function updateWeatherDisplay() {\n      const wElm = document.getElementById(\"weather-display\");\n      wElm.innerHTML = `<p>Weather: ${currentWeather}<\/p>`;\n    }\n    function changeWeatherRandom() {\n      currentWeather = possibleWeathers[Math.floor(Math.random() * possibleWeathers.length)];\n      updateWeatherDisplay();\n      saveLocalData();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30e9\u30f3\u30c0\u30e0\u30a4\u30d9\u30f3\u30c8\n    \/\/ -------------------------------------------\n    function triggerRandomEvent() {\n      const randomRoll = Math.random();\n      let msg = \"\";\n      if (randomRoll < 0.2) {\n        msg = \"A traveling merchant appears, offering rare goods (not yet implemented).\";\n      } else if (randomRoll < 0.4) {\n        changeWeatherRandom();\n        msg = `The weather suddenly changes to ${currentWeather}!`;\n      } else if (randomRoll < 0.6) {\n        addBuff({ name: 'Poison', turns: 3, effectType: 'dot', effectValue: 3 });\n        msg = \"You stepped on a poisonous trap! You are now poisoned.\";\n      } else {\n        msg = \"Nothing special happens.\";\n      }\n      showHomeMessage(msg);\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u5bbf\u5c4b\n    \/\/ -------------------------------------------\n    function restAtInn() {\n      if (character.gold < 10) {\n        showHomeMessage(\"Not enough gold to rest at the inn!\");\n        return;\n      }\n      character.gold -= 10;\n      character.hp = character.maxHp;\n      for (let c of companions) c.hp = c.maxHp;\n      showHomeMessage(\"You and your companions rest at the inn and recover full HP.\");\n      updateCharacterInfo();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u79fb\u52d5 + \u30e9\u30f3\u30c0\u30e0\u30a8\u30f3\u30ab\u30a6\u30f3\u30c8\n    \/\/ -------------------------------------------\n    function moveLocation(newLocation) {\n      character.location = newLocation;\n      document.getElementById(\"current-location\").textContent = newLocation;\n      saveLocalData();\n\n      const logElm = document.getElementById('location-log');\n      logElm.textContent = `You moved to ${newLocation}.`;\n\n      let encounterChance = 0;\n      if (newLocation === \"Town\") encounterChance = 0;\n      else if (newLocation === \"Forest\") encounterChance = 40;\n      else if (newLocation === \"Dungeon\") encounterChance = 70;\n      else if (newLocation === \"Mountain\") encounterChance = 50;\n\n      const roll = Math.random() * 100;\n      if (roll < encounterChance) {\n        const enemyKeys = Object.keys(enemies);\n        const randEnemyKey = enemyKeys[Math.floor(Math.random() * enemyKeys.length)];\n        logElm.textContent += `\\nA wild ${enemies[randEnemyKey].name} appears!`;\n        startBattle(randEnemyKey);\n      }\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u4ef2\u9593\u306e\u96c7\u7528\n    \/\/ -------------------------------------------\n    function hireCompanion() {\n      const input = document.getElementById('friendName');\n      let name = input.value.trim();\n      if (!name) return;\n\n      let newCompanion = { name, level: 1, hp: 30, maxHp: 30, attack: 2 };\n      companions.push(newCompanion);\n\n      input.value = \"\";\n      updateCompanionList();\n      saveLocalData();\n      showHomeMessage(`${name} joined your party!`);\n    }\n\n    function updateCompanionList() {\n      const listElm = document.getElementById('companion-list');\n      listElm.innerHTML = \"\";\n      companions.forEach(c => {\n        const li = document.createElement(\"li\");\n        li.textContent = `${c.name} (Lv ${c.level}, HP ${c.hp}\/${c.maxHp}, ATK ${c.attack})`;\n        listElm.appendChild(li);\n      });\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30a4\u30f3\u30d9\u30f3\u30c8\u30ea\u8868\u793a\n    \/\/ -------------------------------------------\n    let selectedItemIndex = null;\n    let selectedForCraft = [];\n\n    function updateInventoryDisplay() {\n      const invElm = document.getElementById('inventory');\n      invElm.innerHTML = \"\";\n\n      if (inventory.length === 0) {\n        invElm.innerHTML = \"<p>Your inventory is empty.<\/p>\";\n        return;\n      }\n\n      inventory.forEach((item, index) => {\n        const div = document.createElement(\"div\");\n        div.className = \"inventory-item\";\n        div.textContent = item.name;\n\n        if (item.equipped) div.style.border = \"2px solid #4CAF50\";\n\n        div.onclick = () => onInventoryItemClick(index);\n        invElm.appendChild(div);\n      });\n    }\n\n    function onInventoryItemClick(index) {\n      if (document.getElementById(\"craft\").style.display === \"block\") {\n        toggleCraftSelection(index);\n        return;\n      }\n\n      selectedItemIndex = index;\n      const item = inventory[index];\n      const modalTitle = document.getElementById(\"item-modal-title\");\n      const modalDesc = document.getElementById(\"item-modal-description\");\n\n      if (item.type === \"potion\") {\n        modalTitle.textContent = `Use ${item.name}?`;\n        modalDesc.textContent = `This potion restores ${item.heal} HP.`;\n      } else if (item.type === \"weapon\") {\n        modalTitle.textContent = `Equip ${item.name}?`;\n        modalDesc.textContent = `Weapon (+${item.attack} Attack).`;\n      } else if (item.type === \"armor\") {\n        modalTitle.textContent = `Equip ${item.name}?`;\n        modalDesc.textContent = `Armor (+${item.defense} Defense).`;\n      } else if (item.type === \"accessory\") {\n        modalTitle.textContent = `Equip ${item.name}?`;\n        modalDesc.textContent = `Accessory (+${item.attack} ATK, +${item.defense} DEF).`;\n      } else {\n        modalTitle.textContent = item.name;\n        modalDesc.textContent = \"A special item. No direct use\/equip.\";\n      }\n\n      if (canSellItem(item)) {\n        modalDesc.textContent += `\\n(Sell price: ${sellPrice(item)} Gold)`;\n      }\n\n      document.getElementById(\"item-modal-bg\").style.display = \"flex\";\n    }\n\n    function closeItemModal() {\n      document.getElementById(\"item-modal-bg\").style.display = \"none\";\n      selectedItemIndex = null;\n    }\n\n    function confirmItemUse() {\n      if (selectedItemIndex === null) return;\n      const item = inventory[selectedItemIndex];\n\n      if (item.type === \"potion\") {\n        character.hp += item.heal;\n        if (character.hp > character.maxHp) character.hp = character.maxHp;\n        inventory.splice(selectedItemIndex, 1);\n        showHomeMessage(`${item.name} used! You recovered ${item.heal} HP.`);\n      }\n      else if (item.type === \"weapon\") {\n        unequipItem(\"weapon\");\n        item.equipped = true;\n        character.attack += item.attack;\n        showHomeMessage(`${item.name} equipped. (+${item.attack} Attack)`);\n      }\n      else if (item.type === \"armor\") {\n        unequipItem(\"armor\");\n        item.equipped = true;\n        character.defense += item.defense;\n        showHomeMessage(`${item.name} equipped. (+${item.defense} Defense)`);\n      }\n      else if (item.type === \"accessory\") {\n        unequipItem(\"accessory\");\n        item.equipped = true;\n        character.attack += item.attack;\n        character.defense += item.defense;\n        showHomeMessage(`${item.name} equipped. (+${item.attack} ATK, +${item.defense} DEF)`);\n      }\n      else {\n        if (canSellItem(item)) {\n          let price = sellPrice(item);\n          character.gold += price;\n          inventory.splice(selectedItemIndex, 1);\n          showHomeMessage(`You sold ${item.name} for ${price} Gold.`);\n        } else {\n          showHomeMessage(`You can't use ${item.name} right now.`);\n        }\n      }\n\n      updateCharacterInfo();\n      updateInventoryDisplay();\n      closeItemModal();\n    }\n\n    function unequipItem(type) {\n      for (let i = 0; i < inventory.length; i++) {\n        let it = inventory[i];\n        if (it.type === type && it.equipped) {\n          it.equipped = false;\n          if (type === \"weapon\") character.attack -= it.attack;\n          else if (type === \"armor\") character.defense -= it.defense;\n          else if (type === \"accessory\") { character.attack -= it.attack; character.defense -= it.defense; }\n        }\n      }\n    }\n\n    function canSellItem(item) {\n      if (item.equipped) return false;\n      if (item.type === \"special\") return false;\n      return ![\"weapon\",\"armor\",\"accessory\",\"potion\"].includes(item.type) ? true : false;\n    }\n    function sellPrice(item) { return 30; }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30af\u30a8\u30b9\u30c8UI\n    \/\/ -------------------------------------------\n    function updateQuestVisibility() {\n      const finalQuestCard = document.getElementById(\"final-quest\");\n      finalQuestCard.style.display = (!mainQuests.final.locked) ? \"block\" : \"none\";\n    }\n\n    function startQuest(questKey) {\n      let q = mainQuests[questKey] || sideQuests[questKey];\n      if (!q) return;\n      if (q.isRunning || q.isCompleted) return;\n      if (q.locked) {\n        showHomeMessage(\"This quest is locked. Complete the previous quest first!\");\n        return;\n      }\n\n      q.isRunning = true;\n      q.progress = 0;\n      updateProgressBar(questKey);\n\n      let progressInterval = setInterval(() => {\n        q.progress += 5;\n        if (q.progress > 100) q.progress = 100;\n        updateProgressBar(questKey);\n\n        if (q.progress === 100) {\n          clearInterval(progressInterval);\n          completeQuest(questKey);\n        }\n      }, 400);\n    }\n\n    function completeQuest(questKey) {\n      let q = mainQuests[questKey] || sideQuests[questKey];\n      q.isRunning = false;\n      q.isCompleted = true;\n\n      character.gold += q.reward.gold;\n      addXp(q.reward.xp);\n      q.reward.items.forEach(it => character.specialItems.push(it));\n\n      showHomeMessage(`${q.name} completed! You got ${q.reward.gold} Gold, ${q.reward.xp} XP, and ${q.reward.items.join(\", \")}.`);\n\n      if (q.unlockNext) {\n        if (mainQuests[q.unlockNext]) mainQuests[q.unlockNext].locked = false;\n        else if (sideQuests[q.unlockNext]) sideQuests[q.unlockNext].locked = false;\n      }\n\n      updateQuestVisibility();\n      updateCharacterInfo();\n      saveLocalData();\n    }\n\n    function updateProgressBar(questKey) {\n      const bar = document.getElementById(questKey + '-progress');\n      let q = mainQuests[questKey] || sideQuests[questKey];\n      if (bar) bar.style.width = q.progress + '%';\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30d0\u30c8\u30eb\n    \/\/ -------------------------------------------\n    function startBattle(enemyKey) {\n      const enemyDef = enemies[enemyKey];\n      if (!enemyDef) return;\n      const logElm = document.getElementById('battle-log');\n      logElm.innerHTML = `A wild ${enemyDef.name} appears! (HP: ${enemyDef.hp})`;\n\n      if (skills.Heal.level > 0) {\n        const healAmount = skills.Heal.level * 10;\n        character.hp += healAmount;\n        if (character.hp > character.maxHp) character.hp = character.maxHp;\n        logMessage(logElm, `[Skill: Heal Lv${skills.Heal.level}] You healed ${healAmount} HP!`);\n        updateCharacterInfo();\n      }\n\n      let enemyHp = enemyDef.hp;\n\n      let battleInterval = setInterval(() => {\n        processBuffsEachTurn(logElm);\n\n        if (character.hp <= 0) {\n          clearInterval(battleInterval);\n          logMessage(logElm, \"You have been defeated...\");\n          saveLocalData();\n          return;\n        }\n\n        let baseDamage = getRandomInt(character.attack - 2, character.attack + 2);\n        if (baseDamage < 1) baseDamage = 1;\n\n        if (skills.Fireball.level > 0) {\n          let extra = skills.Fireball.level * 2;\n          baseDamage += extra;\n          logMessage(logElm, `[Fireball Lv${skills.Fireball.level}] Extra ${extra} magic damage!`);\n        }\n\n        let totalCompanionDamage = 0;\n        companions.forEach(c => { if (c.hp > 0) totalCompanionDamage += c.attack; });\n\n        let totalDamage = baseDamage + totalCompanionDamage;\n        enemyHp -= totalDamage;\n\n        logMessage(logElm, `You (and companions) deal ${totalDamage} damage! (Enemy HP: ${Math.max(enemyHp, 0)})`);\n\n        if (enemyHp <= 0) {\n          clearInterval(battleInterval);\n          logMessage(logElm, `You defeated the ${enemyDef.name}!`);\n          character.gold += enemyDef.rewardGold;\n          addXp(enemyDef.rewardXp);\n          updateCompanionXP(enemyDef.rewardXp);\n          updateCharacterInfo();\n          saveLocalData();\n\n          achievements.firstKill.isUnlocked = true;\n          updateAchievementList();\n          return;\n        }\n\n        let eAtk = getRandomInt(enemyDef.attackMin, enemyDef.attackMax);\n        let dmgToPlayer = eAtk - character.defense;\n        if (dmgToPlayer < 1) dmgToPlayer = 1;\n\n        character.hp -= dmgToPlayer;\n        if (character.hp < 0) character.hp = 0;\n\n        logMessage(logElm, `The ${enemyDef.name} hits you for ${dmgToPlayer}. (Your HP: ${character.hp})`);\n        updateCharacterInfo();\n\n        if (character.hp <= 0) {\n          clearInterval(battleInterval);\n          logMessage(logElm, \"You have been defeated...\");\n          saveLocalData();\n          return;\n        }\n      }, 800);\n    }\n\n    function logMessage(logElm, msg) {\n      const p = document.createElement(\"p\");\n      p.textContent = msg;\n      logElm.appendChild(p);\n      logElm.scrollTop = logElm.scrollHeight;\n    }\n\n    function updateCompanionXP(amount) {\n      for (let c of companions) {\n        c.level += Math.floor(amount\/50);\n        c.maxHp += 5;\n        c.hp = c.maxHp;\n        c.attack += 1;\n      }\n      updateCompanionList();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30b9\u30c8\u30a2\u8cfc\u5165\n    \/\/ -------------------------------------------\n    function buyItem(itemKey) {\n      const itemDef = storeItems[itemKey];\n      if (!itemDef) return;\n      if (character.gold < itemDef.cost) {\n        showHomeMessage(`You don't have enough gold to buy ${itemDef.name}.`);\n        return;\n      }\n      character.gold -= itemDef.cost;\n\n      let newItem = JSON.parse(JSON.stringify(itemDef));\n      if ([\"weapon\",\"armor\",\"accessory\"].includes(newItem.type)) newItem.equipped = false;\n\n      inventory.push(newItem);\n\n      showHomeMessage(`You bought ${newItem.name}!`);\n      updateCharacterInfo();\n      updateInventoryDisplay();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30a2\u30fc\u30c8\u6240\u6301\/\u8cfc\u5165\/\u8a2d\u5b9a\n    \/\/ -------------------------------------------\n    function isArtOwned(artKey) {\n      return character.ownedArtKeys.includes(artKey);\n    }\n\n    function grantArt(artKey, setAsPortrait=false) {\n      const art = ART_LIST.find(a => a.key === artKey);\n      if (!art) return false;\n\n      if (!isArtOwned(art.key)) {\n        character.ownedArtKeys.push(art.key);\n      }\n      if (setAsPortrait) {\n        character.portraitUrl = art.url;\n      }\n      saveLocalData();\n      updateCharacterInfo();\n      renderArtShop();\n      renderArtGallery();\n      return true;\n    }\n\n    function buyArt(artKey) {\n      const art = ART_LIST.find(a => a.key === artKey);\n      if (!art) return;\n\n      if (isArtOwned(art.key)) {\n        showHomeMessage(`You already own ${art.name}.`);\n        return;\n      }\n      if (character.gold < art.cost) {\n        showHomeMessage(`Not enough gold to buy ${art.name}. Need ${art.cost} Gold.`);\n        return;\n      }\n\n      character.gold -= art.cost;\n\n      \/\/ \u8cfc\u5165\u3057\u305f\u3089\u5373\u30ad\u30e3\u30e9\u7d75\u5909\u66f4\n      grantArt(art.key, true);\n\n      showHomeMessage(`Purchased ${art.name}! Character portrait changed.`);\n    }\n\n    function setPortraitFromArt(artKey) {\n      const art = ART_LIST.find(a => a.key === artKey);\n      if (!art) return;\n\n      if (!isArtOwned(art.key)) {\n        showHomeMessage(\"You don't own this art yet. Buy it in Store or pull it from Gacha.\");\n        return;\n      }\n\n      character.portraitUrl = art.url;\n      saveLocalData();\n      updateCharacterInfo();\n      showHomeMessage(`Character portrait set to ${art.name}.`);\n    }\n\n    \/\/ Store\u306e\u30a2\u30fc\u30c8\u4e00\u89a7\u63cf\u753b\n    function renderArtShop() {\n      const wrap = document.getElementById(\"art-shop-list\");\n      if (!wrap) return;\n\n      wrap.innerHTML = \"\";\n      ART_LIST.forEach(a => {\n        const owned = isArtOwned(a.key);\n\n        const rarityBadge = a.rarity === \"UR\"\n          ? `<span class=\"badge rarity-ur\">UR<\/span>`\n          : `<span class=\"badge rarity-ssr\">SSR<\/span>`;\n\n        const row = document.createElement(\"div\");\n        row.style.marginBottom = \"10px\";\n        row.innerHTML = `\n          <div style=\"display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;\">\n            <div>\n              <strong>${a.name}<\/strong>\n              ${rarityBadge}\n              <span class=\"muted\">(${a.cost} Gold)<\/span>\n              ${owned ? `<span class=\"badge owned\">Owned<\/span>` : `<span class=\"badge\">Not Owned<\/span>`}\n            <\/div>\n            <div>\n              <button class=\"button\" onclick=\"buyArt('${a.key}')\" ${owned ? 'disabled class=\"button disabled\"' : ''} ${owned ? 'disabled' : ''}>Buy<\/button>\n              <button class=\"button\" onclick=\"openArtModal('${a.key}')\">Preview<\/button>\n            <\/div>\n          <\/div>\n        `;\n        wrap.appendChild(row);\n      });\n    }\n\n    \/\/ \u30ae\u30e3\u30e9\u30ea\u30fc\u63cf\u753b\n    function renderArtGallery() {\n      const grid = document.getElementById(\"art-gallery-grid\");\n      const sum = document.getElementById(\"art-collection-summary\");\n      if (!grid || !sum) return;\n\n      const ownedCount = character.ownedArtKeys.length;\n      sum.textContent = `Owned: ${ownedCount} \/ ${ART_LIST.length}`;\n\n      grid.innerHTML = \"\";\n      ART_LIST.forEach(a => {\n        const owned = isArtOwned(a.key);\n\n        const item = document.createElement(\"div\");\n        item.className = \"gallery-item\";\n\n        const img = document.createElement(\"img\");\n        img.src = a.url;\n        img.alt = a.name;\n        img.loading = \"lazy\";\n        img.style.cursor = \"pointer\";\n        img.onclick = () => openArtModal(a.key);\n\n        const meta = document.createElement(\"div\");\n        meta.className = \"gallery-meta\";\n        meta.innerHTML = `\n          <div>\n            <strong>${a.name}<\/strong><br\/>\n            <span class=\"muted\">${a.cost} Gold<\/span>\n          <\/div>\n          <div style=\"display:flex; gap:6px; align-items:center;\">\n            ${a.rarity === \"UR\"\n              ? `<span class=\"badge rarity-ur\">UR<\/span>`\n              : `<span class=\"badge rarity-ssr\">SSR<\/span>`\n            }\n            ${owned ? `<span class=\"badge owned\">Owned<\/span>` : `<span class=\"badge\">Not Owned<\/span>`}\n          <\/div>\n        `;\n\n        const actions = document.createElement(\"div\");\n        actions.className = \"gallery-actions\";\n\n        const btnPreview = document.createElement(\"button\");\n        btnPreview.className = \"button\";\n        btnPreview.textContent = \"Preview\";\n        btnPreview.onclick = () => openArtModal(a.key);\n\n        const btnSet = document.createElement(\"button\");\n        btnSet.className = \"button\";\n        btnSet.textContent = \"Set as Character Art\";\n        btnSet.disabled = !owned;\n        if (!owned) btnSet.classList.add(\"disabled\");\n        btnSet.onclick = () => setPortraitFromArt(a.key);\n\n        actions.appendChild(btnPreview);\n        actions.appendChild(btnSet);\n\n        item.appendChild(img);\n        item.appendChild(meta);\n        item.appendChild(actions);\n        grid.appendChild(item);\n      });\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u2605\u30ac\u30c1\u30e3\uff08SSR1\u301cSSR3\/UR1\u301cUR10\u304b\u3089\u62bd\u9078\uff09\n    \/\/ - \u5f15\u3044\u305f\u30a2\u30fc\u30c8\u306fOwned\u306b\u8ffd\u52a0\n    \/\/ - 1\u679a\u76ee\u3060\u3051\u306f\u6f14\u51fa\u7684\u306b\u30ad\u30e3\u30e9\u7d75\u3082\u5373\u5909\u66f4\uff08setAsPortrait=true\uff09\n    \/\/ -------------------------------------------\n    function pullArtGacha(times) {\n      const totalCost = GACHA_COST * times;\n      const status = document.getElementById(\"gacha-status\");\n      const resultWrap = document.getElementById(\"gacha-result\");\n      resultWrap.innerHTML = \"\";\n\n      if (character.gold < totalCost) {\n        status.textContent = `Not enough gold. Need ${totalCost} Gold.`;\n        showHomeMessage(`Not enough gold for gacha. Need ${totalCost} Gold.`);\n        return;\n      }\n\n      character.gold -= totalCost;\n\n      let pulled = [];\n      for (let i=0; i<times; i++) {\n        const art = rollOneArt();\n        pulled.push(art);\n        \/\/ 1\u679a\u76ee\u3060\u3051\u5373\u30dd\u30fc\u30c8\u30ec\u30fc\u30c8\u5909\u66f4\uff08\u7d99\u7d9a\u4ed5\u69d8\uff09\n        grantArt(art.key, i === 0);\n      }\n\n      updateCharacterInfo();\n\n      status.textContent = `Pulled ${times} time(s). Cost ${totalCost} Gold.`;\n\n      \/\/ \u8868\u793a\n      pulled.forEach((a, idx) => {\n        const card = document.createElement(\"div\");\n        card.className = \"gacha-card\";\n        card.innerHTML = `\n          <img src=\"${a.url}\" alt=\"${a.name}\">\n          <div class=\"p\">\n            <strong>${a.name}<\/strong><br\/>\n            <span class=\"muted\">${a.rarity}<\/span>\n            ${isArtOwned(a.key) ? `<span class=\"badge owned\" style=\"margin-left:6px;\">Owned<\/span>` : ``}\n          <\/div>\n        `;\n        card.onclick = () => openArtModal(a.key);\n        resultWrap.appendChild(card);\n      });\n\n      showHomeMessage(`Gacha result: ${pulled.map(a => a.rarity + \" \" + a.key).join(\", \")}`);\n\n      saveLocalData();\n      renderArtShop();\n      renderArtGallery();\n    }\n\n    function rollOneArt() {\n      const r = Math.random() * 100;\n      let rarity = (r < GACHA_RATE_UR) ? \"UR\" : \"SSR\";\n\n      const pool = ART_LIST.filter(a => a.rarity === rarity);\n      \/\/ \u5ff5\u306e\u305f\u3081\n      if (pool.length === 0) return ART_LIST[Math.floor(Math.random() * ART_LIST.length)];\n\n      return pool[Math.floor(Math.random() * pool.length)];\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30a2\u30fc\u30c8\u30d7\u30ec\u30d3\u30e5\u30fc\u30fb\u30e2\u30fc\u30c0\u30eb\n    \/\/ -------------------------------------------\n    let pendingArtKey = null;\n\n    function openArtModal(artKey) {\n      const art = ART_LIST.find(a => a.key === artKey);\n      if (!art) return;\n\n      pendingArtKey = artKey;\n\n      document.getElementById(\"art-modal-title\").textContent = `${art.name} (${art.rarity})`;\n      document.getElementById(\"art-modal-img\").src = art.url;\n\n      const owned = isArtOwned(art.key);\n      document.getElementById(\"art-modal-desc\").textContent =\n        owned ? \"Owned: You can set this as your character art.\" : \"Not owned: Buy it in Store or pull it from Gacha.\";\n\n      const setBtn = document.getElementById(\"art-modal-set-btn\");\n      setBtn.disabled = !owned;\n      if (!owned) setBtn.classList.add(\"disabled\");\n      else setBtn.classList.remove(\"disabled\");\n\n      document.getElementById(\"art-modal-bg\").style.display = \"flex\";\n    }\n\n    function closeArtModal() {\n      document.getElementById(\"art-modal-bg\").style.display = \"none\";\n      pendingArtKey = null;\n    }\n\n    function confirmSetPortrait() {\n      if (!pendingArtKey) return;\n      setPortraitFromArt(pendingArtKey);\n      closeArtModal();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30af\u30e9\u30d5\u30c8\u95a2\u9023\n    \/\/ -------------------------------------------\n    function toggleCraftSelection(invIndex) {\n      const item = inventory[invIndex];\n      if (selectedForCraft.includes(invIndex)) {\n        selectedForCraft = selectedForCraft.filter(i => i !== invIndex);\n      } else {\n        if (selectedForCraft.length >= 2) {\n          showHomeMessage(\"You can only select up to 2 items for crafting.\");\n          return;\n        }\n        selectedForCraft.push(invIndex);\n      }\n      updateCraftSelectionDisplay();\n    }\n\n    function updateCraftSelectionDisplay() {\n      let names = selectedForCraft.map(i => inventory[i].name);\n      if (names.length === 0) names.push(\"None\");\n      document.getElementById(\"craft-selection\").textContent = names.join(\" & \");\n      document.getElementById(\"craft-button\").disabled = (selectedForCraft.length < 2);\n    }\n\n    function attemptCraft() {\n      if (selectedForCraft.length < 2) return;\n\n      let itemA = inventory[selectedForCraft[0]];\n      let itemB = inventory[selectedForCraft[1]];\n      let combo = [itemA.name, itemB.name].sort();\n\n      let craftedItem = null;\n      for (let r of craftRecipes) {\n        if (r.components[0] === combo[0] && r.components[1] === combo[1]) {\n          craftedItem = r.result;\n          break;\n        }\n      }\n\n      if (!craftedItem) {\n        showHomeMessage(\"No valid recipe found for these items.\");\n        selectedForCraft = [];\n        updateCraftSelectionDisplay();\n        return;\n      }\n\n      let idxA = Math.max(selectedForCraft[0], selectedForCraft[1]);\n      let idxB = Math.min(selectedForCraft[0], selectedForCraft[1]);\n      inventory.splice(idxA, 1);\n      inventory.splice(idxB, 1);\n      inventory.push(craftedItem);\n\n      showHomeMessage(`You crafted: ${craftedItem.name}!`);\n      selectedForCraft = [];\n      updateCraftSelectionDisplay();\n      updateInventoryDisplay();\n      saveLocalData();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30b9\u30ad\u30eb\n    \/\/ -------------------------------------------\n    function refreshSkillList() {\n      document.getElementById(\"skill-point-display\").textContent = character.skillPoints;\n      const listElm = document.getElementById(\"skill-list\");\n      listElm.innerHTML = \"\";\n\n      for (let sKey in skills) {\n        let sk = skills[sKey];\n        let li = document.createElement(\"li\");\n        li.innerHTML = `\n          <strong>${sk.name} (Lv${sk.level}\/${sk.maxLevel})<\/strong>\n          - ${sk.description}\n          ${\n            sk.level < sk.maxLevel\n              ? `(<button onclick=\"learnSkill('${sKey}')\">Upgrade (cost ${sk.cost})<\/button>)`\n              : ''\n          }\n        `;\n        listElm.appendChild(li);\n      }\n    }\n\n    function learnSkill(skillKey) {\n      let skill = skills[skillKey];\n      if (!skill) return;\n\n      if (skill.level >= skill.maxLevel) {\n        showHomeMessage(`${skill.name} is already at max level.`);\n        return;\n      }\n      if (character.skillPoints < skill.cost) {\n        showHomeMessage(`Not enough skill points to upgrade ${skill.name}.`);\n        return;\n      }\n\n      character.skillPoints -= skill.cost;\n      skill.level++;\n      showHomeMessage(`You upgraded ${skill.name} to level ${skill.level}.`);\n      updateCharacterInfo();\n      refreshSkillList();\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u30af\u30a8\u30b9\u30c8\u30ed\u30b0\n    \/\/ -------------------------------------------\n    function updateQuestLog() {\n      const logElm = document.getElementById(\"quest-log-list\");\n      logElm.innerHTML = \"\";\n\n      let allQ = getAllQuests();\n      for (let key in allQ) {\n        let q = allQ[key];\n        let status = q.isCompleted ? \"Completed\" : (q.isRunning ? \"In Progress\" : \"Not Started\");\n        let li = document.createElement(\"li\");\n        li.textContent = `${q.name}: ${status}`;\n        logElm.appendChild(li);\n      }\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u5b9f\u7e3e\n    \/\/ -------------------------------------------\n    function checkAchievements() {\n      if (character.level >= 5) achievements.level5.isUnlocked = true;\n\n      let completedCount = 0;\n      let allQ = getAllQuests();\n      for (let key in allQ) if (allQ[key].isCompleted) completedCount++;\n\n      if (completedCount >= 3) achievements.quest3.isUnlocked = true;\n\n      saveLocalData();\n      updateAchievementList();\n    }\n\n    function updateAchievementList() {\n      const listElm = document.getElementById(\"achievement-list\");\n      listElm.innerHTML = \"\";\n\n      for (let aKey in achievements) {\n        let a = achievements[aKey];\n        let status = a.isUnlocked ? \"Unlocked\" : \"Locked\";\n        let li = document.createElement(\"li\");\n        li.textContent = `${a.name} - ${a.description} [${status}]`;\n        listElm.appendChild(li);\n      }\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ BGM\uff08\u7d99\u7d9a\u518d\u751f & \u72b6\u614b\u4fdd\u5b58 & \u5fa9\u5e30\uff09\n    \/\/ -------------------------------------------\n    let isMusicPlaying = false;\n    let bgmUnlocked = false;\n    let wantAutoResume = false;\n\n    function setBgmStatus(text) {\n      const s = document.getElementById(\"bgm-status\");\n      if (s) s.textContent = \"Status: \" + text;\n    }\n\n    function saveBgmState() {\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      const state = {\n        unlocked: bgmUnlocked,\n        playing: isMusicPlaying,\n        volume: audio.volume,\n        time: audio.currentTime\n      };\n      localStorage.setItem(LS_KEY_BGM, JSON.stringify(state));\n    }\n\n    function loadBgmState() {\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      const raw = localStorage.getItem(LS_KEY_BGM);\n      if (!raw) return;\n\n      try {\n        const st = JSON.parse(raw);\n        bgmUnlocked = !!st.unlocked;\n        isMusicPlaying = !!st.playing;\n        wantAutoResume = isMusicPlaying;\n\n        if (typeof st.volume === \"number\") audio.volume = st.volume;\n\n        if (typeof st.time === \"number\") {\n          audio.addEventListener(\"loadedmetadata\", () => {\n            try { audio.currentTime = Math.max(0, st.time); } catch(e) {}\n          }, { once: true });\n        }\n      } catch(e) {}\n    }\n\n    function wireBgmAutoSave() {\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      audio.addEventListener(\"play\", () => { isMusicPlaying = true; saveBgmState(); });\n      audio.addEventListener(\"pause\", () => { isMusicPlaying = false; saveBgmState(); });\n      audio.addEventListener(\"volumechange\", saveBgmState);\n\n      let lastSave = 0;\n      audio.addEventListener(\"timeupdate\", () => {\n        const now = Date.now();\n        if (now - lastSave > 4000) {\n          lastSave = now;\n          saveBgmState();\n        }\n      });\n    }\n\n    function updateEnableBtn() {\n      const btn = document.getElementById(\"bgm-enable-btn\");\n      if (!btn) return;\n\n      if (bgmUnlocked) {\n        btn.textContent = \"BGM Enabled\";\n        btn.classList.add(\"disabled\");\n        btn.disabled = true;\n      } else {\n        btn.textContent = \"Enable BGM (First Click)\";\n        btn.classList.remove(\"disabled\");\n        btn.disabled = false;\n      }\n    }\n\n    function resumeBgmOnNextUserActionIfNeeded() {\n      if (!bgmUnlocked || !wantAutoResume) return;\n\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      const resumeOnce = () => {\n        audio.play().then(() => {\n          isMusicPlaying = true;\n          wantAutoResume = false;\n          setBgmStatus(\"On (Resumed)\");\n          saveBgmState();\n        }).catch(() => {\n          setBgmStatus(\"Blocked (Enable again)\");\n        });\n      };\n\n      document.addEventListener(\"pointerdown\", resumeOnce, { once: true });\n      document.addEventListener(\"keydown\", resumeOnce, { once: true });\n    }\n\n    function enableBGM() {\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      audio.volume = 0.6;\n\n      audio.play().then(() => {\n        bgmUnlocked = true;\n        isMusicPlaying = true;\n        wantAutoResume = false;\n\n        updateEnableBtn();\n        setBgmStatus(\"On\");\n        showHomeMessage(\"BGM Enabled & Playing\");\n        saveBgmState();\n      }).catch(() => {\n        setBgmStatus(\"Blocked (Click again)\");\n        showHomeMessage(\"BGM blocked by browser. Click Enable BGM again.\");\n      });\n    }\n\n    function toggleMusic() {\n      const audio = document.getElementById(\"bgm\");\n      if (!audio) return;\n\n      if (!bgmUnlocked) {\n        showHomeMessage(\"First, click 'Enable BGM (First Click)'.\");\n        setBgmStatus(\"Locked\");\n        return;\n      }\n\n      if (!isMusicPlaying) {\n        audio.play().then(() => {\n          isMusicPlaying = true;\n          setBgmStatus(\"On\");\n          showHomeMessage(\"Music On\");\n          saveBgmState();\n        }).catch(() => {\n          setBgmStatus(\"Blocked\");\n          showHomeMessage(\"Music could not be played (browser block).\");\n        });\n      } else {\n        audio.pause();\n        isMusicPlaying = false;\n        setBgmStatus(\"Off\");\n        showHomeMessage(\"Music Off\");\n        saveBgmState();\n      }\n    }\n\n    \/\/ -------------------------------------------\n    \/\/ \u6c4e\u7528\u30e9\u30f3\u30c0\u30e0\u6574\u6570\n    \/\/ -------------------------------------------\n    function getRandomInt(min, max) {\n      return Math.floor(Math.random() * (max - min + 1) + min);\n    }\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[44],"tags":[3],"class_list":["post-26244","post","type-post","status-publish","format-standard","hentry","category-44","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26244"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26244\/revisions"}],"predecessor-version":[{"id":26245,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26244\/revisions\/26245"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26244"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}