<!--
============================================================
  王者自定义房间 - 主页（房间创建页）
============================================================

  页面功能：
    王者荣耀自定义房间创建工具。用户可以选择地图模式、
    预设方案或高级自定义配置，创建带有特殊参数的王者房间，
    生成房间链接和二维码，邀请好友加入。

  页面结构：
    1. 顶部导航栏（标题、房间列表入口）
    2. 地图模式选择区（1V1、3V3、5V5、征召、火焰山等）
    3. 预设方案选择区（无CD、全图视野、无限金币等常用配置）
    4. 高级自定义区（英雄属性、兵线野怪、防御塔水晶等详细参数）
       - 英雄属性：等级、法术攻击、物理攻击、冷却缩减、金币、移速
       - 兵线属性：攻击力、血量、移速、刷新速度、出兵类型、出兵路线
       - 野怪属性：攻击力、血量
       - 防御塔属性：攻击力、攻击范围、血量
       - 水晶属性：攻击力、血量
       - 禁用英雄：选择本局禁用的英雄
    5. 操作按钮区（创建房间、复制链接、生成二维码）
    6. 房间列表区（显示已创建的房间，30分钟过期）

  依赖资源：
    - CSS：mdui.css（MDUI框架样式）+ 内联样式（深色主题）
    - JS：mdui.global.js（MDUI框架）+ qrcode.min.js（二维码生成）
    - JS模块：js/目录下的模块化代码（app/config/core/data/modules/services/ui/utils）
    - 图标：logo-200x200.png

  调用的后端接口：
    - room_api.php  房间管理API
      - GET?action=list     获取房间列表
      - POST?action=create  创建房间
      - GET?action=detail   获取房间详情
      - POST?action=join    加入房间（蓝方/红方）
      - POST?action=delete  删除房间

    - shorturl.php 短链接生成
      - GET?url=长链接  返回短链接JSON

  特殊功能：
    - 预设方案一键配置（点击预设自动填充所有参数）
    - 高级自定义详细参数（支持分阵营设置蓝方/红方属性）
    - 禁用英雄选择（支持按位置/阵营筛选英雄）
    - 房间二维码生成（扫码直接加入房间）
    - 房间列表展示（所有用户可见，30分钟自动过期）
    - 房间人数统计（加入蓝方/红方计数，满员显示"已满"标识）
    - PWA支持（manifest.json，可添加到主屏幕）
    - 禁止双击放大（viewport设置user-scalable=no）

  数据存储：
    - 房间数据：rooms_data.json（JSON文件，包含所有房间信息）
    - 短链数据：shorturl_data.json（JSON文件，短码与长链接映射）
    - 预设方案：js/data/mapData.js、js/utils/config/constants.js
    - 英雄数据：js/data/heroData.js

  房间数据结构（rooms_data.json）：
    {
      "roomId": "20260903abc12345",     // 房间唯一ID（日期+随机码）
      "createTime": 1756876800,          // 创建时间戳
      "expireTime": 1756878600,          // 过期时间戳（+30分钟）
      "mapMode": "5v5",                   // 地图模式
      "preset": "nocd",                   // 预设方案（null表示自定义）
      "config": { ... },                  // 完整配置参数
      "gameLink": "https://h5.nes.smoba.qq.com/...",  // 王者赛宝链接
      "shortLink": "https://wutong.xyz/wzzdy/go.php?c=xxx",  // 短链接
      "blueCount": 0,                     // 蓝方加入人数
      "redCount": 0,                      // 红方加入人数
      "maxPlayers": 10                    // 最大人数（根据地图模式）
    }

  王者赛宝链接原理：
    本工具通过构造特定参数的URL，调用王者荣耀官方"王者赛宝"
    （h5.nes.smoba.qq.com）的房间创建接口，直接跳过赛宝APP
    的配置界面，生成带有自定义参数的房间链接。参数包括：
    - childid: 房间ID
    - 各种游戏参数（英雄属性、兵线、防御塔等）

  后台管理：
    - 房间数据存储在JSON文件中，可通过FTP直接查看/修改
    - 过期房间自动清理（每次访问room_api.php时触发清理）
    - 房间列表公开可见，无需登录

  注意事项：
    - 房间有效期30分钟，过期后自动从列表中移除
    - 王者赛宝链接需要在微信/QQ中打开，或在已安装王者的设备上打开
    - 部分高级参数可能在某些地图模式下不生效
    - 禁用英雄功能需要征召模式支持
    - 页面使用MDUI框架，适配移动端和桌面端
    - 所有配置参数通过JS前端处理，不依赖后端计算
============================================================
-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>王者房间 · 自定义房间</title>

<!-- MDUI CSS -->
<link rel="stylesheet" href="./mdui.css?v=20260903v4">

<!-- 深色主题CSS -->
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#05060a;--bg2:#0a0c14;--bg3:#0f1220;
  --text:#e5e7eb;--muted:#9ca3af;--muted2:#6b7280;
  --accent:#22d3ee;--accent2:#a855f7;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.12);
  --grad:linear-gradient(135deg,#22d3ee,#a855f7);
  --radius:20px;--radius-sm:14px;--radius-xs:10px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* Apple Spring 动画缓动函数 */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* 细腻阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 24px rgba(34,211,238,0.25), 0 0 48px rgba(168,85,247,0.15);
}
*{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,sans-serif !important;box-sizing:border-box;max-width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{overflow-x:hidden !important;max-width:100vw}
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden !important;max-width:100vw;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(34,211,238,.06),transparent 50%),radial-gradient(circle at 70% 80%,rgba(168,85,247,.06),transparent 50%);z-index:-1;animation:bgFloat 20s ease-in-out infinite}
@keyframes bgFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,-2%)}}

/* 导航栏 */
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;position:sticky;top:0;z-index:100;background:rgba(5,6,10,.72);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:0.5px solid var(--border)}
.nav-back{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:15px;cursor:pointer;padding:8px 12px;border-radius:var(--radius-xs);transition:all 0.3s var(--spring-soft)}
.nav-back:hover{background:rgba(255,255,255,.06);color:var(--text);transform:scale(0.98)}
.nav-back:active{transform:scale(0.95)}
.nav-title{font-size:17px;font-weight:600;letter-spacing:-0.02em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-actions{display:flex;align-items:center;gap:8px}

/* 主内容 */
.container{max-width:600px;margin:0 auto;padding:20px 16px 100px}

/* Hero */
.hero{text-align:center;margin-bottom:32px;padding-top:8px}
.hero-icon{width:68px;height:68px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px;background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1px solid rgba(34,211,238,.25);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.1);animation:heroIconFloat 4s ease-in-out infinite}
@keyframes heroIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero h1{font-size:28px;font-weight:700;margin-bottom:10px;letter-spacing:-0.03em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:14px;color:var(--muted);line-height:1.6;max-width:320px;margin:0 auto}

/* 卡片 */
.glass-card{background:rgba(255,255,255,.035);border:0.5px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);transition:all 0.4s var(--spring-soft);position:relative;overflow:visible;box-shadow:var(--shadow-sm)}
.glass-card:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:0.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);border-radius:var(--radius) var(--radius) 0 0}
.card-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;cursor:pointer}
.card-title .icon{font-size:16px}
.toggle-icon{margin-left:auto;font-size:14px;color:var(--muted);transition:.3s}
.toggle-icon.open{transform:rotate(90deg)}

/* 游戏服务器选择 */
.server-group{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:var(--radius-sm);padding:4px;margin-bottom:16px;border:1px solid var(--border)}
.server-btn{flex:1;padding:10px;border-radius:10px;border:none;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:.25s}
.server-btn.active{background:var(--grad);color:#05060a;box-shadow:0 2px 12px rgba(34,211,238,.25)}

/* 下拉选择 */
.select-wrapper{position:relative}
.select-wrapper select{width:100%;padding:14px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:15px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:.25s}
.select-wrapper select:focus{outline:none;border-color:var(--accent);background:rgba(34,211,238,.05)}
.select-wrapper::after{content:'▾';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:12px}

/* 快捷房间 */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:0.5px solid var(--border);cursor:pointer;transition:all 0.35s var(--spring);text-align:center;position:relative;overflow:hidden}
.quick-btn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(168,85,247,.08));opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.quick-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(34,211,238,.3);transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-md)}
.quick-btn:hover::before{opacity:1}
.quick-btn:active{transform:translateY(0) scale(0.97);transition:all 0.1s ease}
.quick-btn.selected{background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1.5px solid rgba(34,211,238,.6);box-shadow:var(--shadow-glow),var(--shadow-md);transform:translateY(-3px) scale(1.02);position:relative}
.quick-btn.selected::after{content:'✓';position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#05060a;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(34,211,238,.4);animation:checkPop 0.4s var(--spring)}
@keyframes checkPop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.quick-icon{font-size:28px;transition:transform 0.3s var(--spring)}
.quick-btn:hover .quick-icon{transform:scale(1.1)}
.quick-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.quick-desc{font-size:10px;color:var(--muted2);line-height:1.3}

@media(max-width:380px){
  .quick-grid{grid-template-columns:repeat(2,1fr)}
}

/* 折叠内容 */
.collapsible-body{display:none;margin-top:12px}

/* ============ MDUI弹窗文字颜色修复 ============ */
mdui-dialog {
  --md-sys-color-on-surface: #ffffff !important;
  --md-sys-color-on-surface-variant: rgba(255,255,255,0.8) !important;
  --md-sys-color-outline: rgba(255,255,255,0.3) !important;
}
mdui-dialog .headline {
  color: #ffffff !important;
}
mdui-dialog .description {
  color: rgba(255,255,255,0.8) !important;
}
mdui-dialog mdui-button {
  color: #22d3ee !important;
}
mdui-dialog mdui-text-field {
  --md-sys-color-on-surface: #ffffff !important;
  --md-sys-color-on-surface-variant: rgba(255,255,255,0.7) !important;
}
mdui-dialog mdui-menu-item {
  --md-sys-color-on-surface: #ffffff !important;
}
/* 二维码弹窗 */
#qrcode-container {
  color: rgba(255,255,255,0.9) !important;
}
/* 确认弹窗按钮 */
mdui-dialog[open] mdui-button {
  color: #22d3ee !important;
  font-weight: 600 !important;
}
.collapsible-body.open{display:block}

/* 配置管理 */
.config-manage{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.config-select{flex:1;min-width:140px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:13px;appearance:none}
.config-btns{display:flex;gap:6px;flex-wrap:wrap}
.config-btn{padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.config-btn:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3);color:var(--text)}
.config-btn.btn-danger:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171}

/* 使用说明 */
.config-tip-box{padding:12px;border-radius:10px;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.15);margin-bottom:16px;font-size:12px;line-height:1.8;color:var(--muted)}
.config-tip-box strong{color:var(--accent)}

/* 标签页 */
.config-tabs{display:flex;gap:6px;margin-bottom:12px;background:rgba(255,255,255,.03);border-radius:10px;padding:4px}
.config-tab{flex:1;padding:8px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.2s;text-align:center}
.config-tab.active{background:rgba(34,211,238,.15);border:1px solid rgba(34,211,238,.4);color:var(--accent)}

/* 单选按钮 */
.radio-group{display:flex;gap:16px;margin-bottom:16px}
.radio-item{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--muted)}
.radio-item input[type="radio"]{accent-color:var(--accent);width:16px;height:16px}
.radio-item.active{color:var(--text)}

/* 配置项 */
.config-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.config-item:last-child{border-bottom:none}
.config-item-label{font-size:14px;color:var(--text)}
.config-item select{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:13px;appearance:none;cursor:pointer;min-width:120px}
.config-item select:focus{outline:none;border-color:var(--accent)}
.config-item input[type="number"]{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:13px;width:120px;text-align:center}
.config-item input[type="number"]:focus{outline:none;border-color:var(--accent)}

/* 英雄选择 */
.hero-search{width:100%;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:14px;margin-bottom:12px;transition:.25s}
.hero-search:focus{outline:none;border-color:var(--accent)}
.hero-search::placeholder{color:var(--muted2)}
.hero-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:280px;overflow-y:auto;padding:4px}
.hero-grid::-webkit-scrollbar{width:4px}
.hero-grid::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.hero-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid transparent;cursor:pointer;transition:.2s;text-align:center}
.hero-item:hover{background:rgba(255,255,255,.06)}
.hero-item.selected{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}
.hero-item .hero-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#05060a}
.hero-item .hero-name{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hero-item.selected .hero-name{color:#f87171}
.selected-count{font-size:12px;color:var(--muted);margin-top:8px;text-align:right}
.selected-count span{color:var(--accent);font-weight:600}

/* 按钮 */
.btn-primary{width:100%;padding:16px;border-radius:var(--radius-sm);background:var(--grad);color:#05060a;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:.25s;letter-spacing:1px;margin-bottom:10px;box-shadow:0 4px 20px rgba(34,211,238,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(34,211,238,.35)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{width:100%;padding:14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:.25s;margin-bottom:10px}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:var(--border2)}

/* 提示 */
.tip{font-size:12px;color:var(--muted2);text-align:center;margin-top:16px;line-height:1.6}

/* Toast */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:14px 24px;border-radius:12px;font-size:14px;z-index:9999;opacity:0;transition:.3s;pointer-events:none;backdrop-filter:blur(10px)}
.toast.show{opacity:1}

/* 滚动条 */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* MDUI 弹窗深色主题 */
mdui-dialog::part(panel){background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:20px !important;backdrop-filter:blur(20px) !important}
mdui-dialog{color:var(--text) !important}
mdui-menu{background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:12px !important}
mdui-menu-item{color:var(--text) !important}
mdui-menu-item:hover{background:rgba(255,255,255,.05) !important}
mdui-text-field::part(field){background:rgba(255,255,255,.04) !important;border-radius:var(--radius-sm) !important;border:1px solid var(--border) !important}
mdui-text-field::part(label){color:var(--muted) !important}
mdui-text-field::part(value){color:var(--text) !important}

/* 禁止双击缩放 */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{touch-action:manipulation;overflow-x:hidden}
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* 隐藏原始布局 */
.app-layout{display:none !important}

/* 第一版UI选择器样式 */
.custom-select{width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:.25s}
.custom-select:hover{background:rgba(34,211,238,.05);border-color:rgba(34,211,238,.3)}
.custom-select-value{font-size:15px;color:var(--text)}
.custom-select-value.placeholder{color:var(--muted2)}
.custom-select-arrow{font-size:20px;color:var(--muted);transform:rotate(90deg)}

/* 下拉菜单样式 */
.dropdown-wrapper{position:relative;width:100%;z-index:9999}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(20,22,30,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:12px;z-index:99999;display:none;overflow:visible;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.1)}
.dropdown-menu.open{display:block;animation:dropdownFadeIn .2s ease;z-index:99999}
.glass-card.has-dropdown-open{z-index:99999 !important;position:relative !important}
.glass-card.has-dropdown-open .dropdown-menu{z-index:99999 !important}
@keyframes dropdownFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.dropdown-search{padding:10px;border-bottom:1px solid var(--border)}
.dropdown-search-input{width:100%;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:14px}
.dropdown-search-input:focus{outline:none;border-color:var(--accent)}
.dropdown-search-input::placeholder{color:var(--muted2)}
.dropdown-list{max-height:300px;overflow-y:auto;padding:6px}
.dropdown-list::-webkit-scrollbar{width:4px}
.dropdown-list::-webkit-scrollbar-track{background:transparent}
.dropdown-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dropdown-item{padding:12px 14px;border-radius:8px;cursor:pointer;transition:.15s;margin-bottom:2px}
.dropdown-item:hover{background:rgba(255,255,255,.06)}
.dropdown-item.selected{background:rgba(34,211,238,.1)}
.dropdown-item .item-name{font-size:14px;color:var(--text);font-weight:500}
.dropdown-item .item-desc{font-size:11px;color:var(--muted);margin-top:3px}
.dropdown-item.selected .item-name{color:var(--accent)}
.dropdown-loading{padding:20px;text-align:center;color:var(--muted);font-size:13px}
.dropdown-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}
.custom-select-arrow{transition:transform .2s}
.custom-select.open .custom-select-arrow{transform:rotate(-90deg)}

/* 全屏选择器（地图/房间等） */
.custom-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:10000;display:none;flex-direction:column}
.custom-picker-overlay.open{display:flex}
.custom-picker-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(5,6,10,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.custom-picker-title{font-size:17px;font-weight:600;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.custom-picker-back{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:15px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:.2s}
.custom-picker-back:hover{background:rgba(255,255,255,.05);color:var(--text)}
.custom-picker-body{flex:1;overflow-y:auto;padding:16px}
.custom-picker-item{padding:16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid transparent;margin-bottom:8px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:space-between}
.custom-picker-item:hover{background:rgba(255,255,255,.06)}
.custom-picker-item.selected{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3)}
.custom-picker-item .item-name{font-size:15px;color:var(--text)}
.custom-picker-item .item-desc{font-size:12px;color:var(--muted);margin-top:4px}
.custom-picker-item .item-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center}
.custom-picker-item.selected .item-check{background:var(--grad);border-color:transparent}
.custom-picker-item.selected .item-check::after{content:'✓';font-size:12px;color:#05060a;font-weight:700}

/* 房间列表样式 */
.room-item{padding:16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);margin-bottom:10px}
.room-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.room-item-title{font-size:15px;font-weight:600;color:var(--text)}
.room-item-time{font-size:12px;color:var(--muted)}
.room-item-info{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.6}
.room-item-actions{display:flex;gap:8px}
.room-item-btn{flex:1;padding:10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;text-align:center}
.room-item-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.room-item-btn.primary{background:var(--grad);color:#05060a;border:none}
.room-item-btn.danger:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px;opacity:0.5}
.empty-state .empty-text{font-size:14px}

/* 英雄选择器全屏界面 */
.hero-selector-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:10000;display:none;flex-direction:column}
.hero-selector-overlay.open{display:flex}
.hero-selector-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(5,6,10,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.hero-selector-title{font-size:17px;font-weight:600;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-selector-back{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:15px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:.2s}
.hero-selector-back:hover{background:rgba(255,255,255,.05);color:var(--text)}
.hero-selector-save{padding:8px 16px;border-radius:10px;background:var(--grad);color:#05060a;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:.2s}
.hero-selector-save:active{transform:scale(0.95)}
.hero-selector-save:disabled{opacity:0.5;cursor:not-allowed}
.hero-selector-body{flex:1;overflow-y:auto;padding:16px}
.hero-selector-search{width:100%;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:14px;margin-bottom:12px;transition:.25s}
.hero-selector-search:focus{outline:none;border-color:var(--accent)}
.hero-selector-search::placeholder{color:var(--muted2)}
.hero-selector-count{font-size:13px;color:var(--muted);margin-bottom:12px;text-align:right}
.hero-selector-count span{color:var(--accent);font-weight:600}
.hero-selector-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:380px){.hero-selector-grid{grid-template-columns:repeat(4,1fr)}}
.hero-selector-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid transparent;cursor:pointer;transition:.2s;text-align:center}
.hero-selector-item:hover{background:rgba(255,255,255,.06)}
.hero-selector-item.selected{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4)}
.hero-selector-item .hero-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#05060a;overflow:hidden}
.hero-selector-item .hero-avatar img{width:100%;height:100%;object-fit:cover}
.hero-selector-item .hero-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hero-selector-item.selected .hero-name{color:#f87171;font-weight:600}
.hero-selector-actions{display:flex;gap:8px;padding:12px 16px;background:rgba(5,6,10,.9);border-top:1px solid var(--border)}
.hero-selector-action-btn{flex:1;padding:10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.hero-selector-action-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.hero-selector-action-btn.danger:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171}

/* MDUI 地图选择器美化 */
.map-dropdown{width:100%}
.map-dropdown mdui-text-field{width:100%}
.map-dropdown::part(field){background:rgba(255,255,255,.04) !important;border-radius:12px !important;border:1px solid var(--border) !important}
.map-dropdown::part(label){color:var(--muted) !important;font-size:13px !important}
.map-dropdown::part(value){color:var(--text) !important;font-size:15px !important}

/* 禁用英雄显示区域 */
.ban-hero-display{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:space-between}
.ban-hero-display:hover{background:rgba(34,211,238,.05);border-color:rgba(34,211,238,.3)}
.ban-hero-display .ban-label{font-size:14px;color:var(--text)}
.ban-hero-display .ban-count{font-size:13px;color:var(--accent);font-weight:600}
</style>
<script src="../version_check.js" defer></script>
</head>
<body>
<style>
/* 禁止双击放大 */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  touch-action: manipulation;
  overscroll-behavior: none;
  overflow-x: hidden;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
</style>
<script>
// 禁止双击放大
document.addEventListener('dblclick', function(e) {
  e.preventDefault();
}, { passive: false });
// 禁止双指缩放
document.addEventListener('gesturestart', function(e) {
  e.preventDefault();
});
// 修复滑动异常
document.addEventListener('touchmove', function(e) {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });
</script>

<!-- 导航栏 -->
<div class="nav-bar">
  <div class="nav-back" onclick="history.back()">
    <svg viewBox="0 0 12 20" fill="none" width="14" height="14"><path d="M10 2L2 10L10 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    返回
  </div>
  <div class="nav-title">王者房间</div>
</div>

<div class="container">
  <div class="hero">
    <div class="hero-icon">⚔️</div>
    <h1>自定义房间</h1>
    <p>选择地图模式和禁用英雄，一键启动王者荣耀自定义房间</p>
  </div>

  <!-- 游戏服务器（固定正式服） -->
  <div style="display:none">
    <div class="server-group">
      <button class="server-btn active" data-server="zsf" onclick="switchServer('zsf')">正式服</button>
    </div>
  </div>

  <!-- 地图模式 -->
  <div class="glass-card">
    <div class="card-title"><span class="icon">🗺️</span>地图模式</div>
    <div class="dropdown-wrapper">
      <div class="custom-select" onclick="toggleMapDropdown(event)">
        <span class="custom-select-value placeholder" id="mapSelectValue">请选择地图模式</span>
        <span class="custom-select-arrow" id="mapSelectArrow">›</span>
      </div>
      <div class="dropdown-menu" id="mapDropdownMenu">
        <div class="dropdown-search">
          <input type="text" class="dropdown-search-input" id="mapSearchInput" placeholder="搜索地图..." oninput="filterMapDropdown()">
        </div>
        <div class="dropdown-list" id="mapDropdownList">
          <div class="dropdown-loading">加载中...</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 快捷房间 -->
  <div class="glass-card">
    <div class="card-title"><span class="icon">⚡</span>快捷房间（预设方案）</div>
    <div class="quick-grid">
      <div class="quick-btn" onclick="startQuickRoom('no_ban')">
        <div class="quick-icon">🎮</div>
        <div class="quick-name">不禁英雄</div>
        <div class="quick-desc">无CD · 全英雄</div>
      </div>
      <div class="quick-btn" onclick="startQuickRoom('ban_invincible')">
        <div class="quick-icon">🛡️</div>
        <div class="quick-name">禁用无敌</div>
        <div class="quick-desc">无CD · 禁12英雄</div>
      </div>
      <div class="quick-btn" onclick="startQuickRoom('ban_map_cannon')">
        <div class="quick-icon">💥</div>
        <div class="quick-name">禁地图炮</div>
        <div class="quick-desc">无CD · 禁4英雄</div>
      </div>
      <div class="quick-btn" onclick="startQuickRoom('ban_op')">
        <div class="quick-icon">🚫</div>
        <div class="quick-name">禁用超标</div>
        <div class="quick-desc">无CD · 禁16英雄</div>
      </div>
      <div class="quick-btn" onclick="startQuickRoom('tank_battle')">
        <div class="quick-icon">🗡️</div>
        <div class="quick-name">坦克大战</div>
        <div class="quick-desc">80CD · 坦克专属</div>
      </div>
      <div class="quick-btn" onclick="startQuickRoom('heal_flow')">
        <div class="quick-icon">💚</div>
        <div class="quick-name">回血流</div>
        <div class="quick-desc">80CD · 中路出兵</div>
      </div>
    </div>
  </div>

  <!-- 禁用英雄 -->
  <div class="glass-card">
    <div class="card-title" onclick="openCustomHeroSelector()">
      <span class="icon">🚫</span>禁用英雄（选填）
      <span style="margin-left:auto;font-size:14px;color:var(--muted)">点击设置 ›</span>
    </div>
    <div class="ban-hero-display" onclick="openCustomHeroSelector()">
      <span class="ban-label" id="banHeroLabel">未选择禁用英雄</span>
      <span class="ban-count" id="banHeroCount">0 个英雄</span>
    </div>
  </div>

  <!-- 自定义配置 -->
  <div class="glass-card" id="customConfigCard">
    <div class="card-title" onclick="toggleSection('customConfig')">
      <span class="icon">⚙️</span>自定义配置（高级）
      <span class="toggle-icon" id="customConfigToggle">▸</span>
    </div>
    <div class="collapsible-body" id="customConfigBody">
      <div class="config-manage">
        <select id="configSelect" class="config-select" onchange="loadConfig()">
          <option value="">选择配置方案...</option>
        </select>
        <div class="config-btns">
          <button class="config-btn" onclick="newConfig()">新建</button>
          <button class="config-btn" onclick="saveConfig()">保存</button>
          <button class="config-btn btn-danger" onclick="deleteConfig()">删除</button>
          <button class="config-btn" onclick="openCustomConfigDialog()">高级设置</button>
        </div>
      </div>

      <style>
      .config-subtitle {
        font-size: 13px;
        font-weight: 600;
        color: var(--accent);
        margin: 16px 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
        letter-spacing: 0.02em;
      }
      .config-subtitle:first-child {
        margin-top: 0;
      }
      </style>
      <div class="config-tip-box">
        <strong>📖 使用说明：</strong><br>
        • <strong>英雄属性：</strong>选择全局统一/按阵营/按选手，调整初始等级、金币、攻击加成、CD缩减、移速<br>
        • <strong>兵线属性：</strong>调整兵线的攻击力、血量、移速、刷新速度、出生类型、出生路线<br>
        • <strong>野怪/防御塔/水晶：</strong>调整对应单位的属性加成<br>
        • 所有配置自动保存到本地，可导出分享给好友
      </div>

      <div class="config-tabs">
        <button class="config-tab active" onclick="switchConfigTab('hero')">英雄</button>
        <button class="config-tab" onclick="switchConfigTab('minion')">兵线/野怪</button>
        <button class="config-tab" onclick="switchConfigTab('tower')">防御塔/水晶</button>
      </div>

      <div id="configTabHero">
        <div class="radio-group">
          <label class="radio-item active"><input type="radio" name="heroScope" value="global" checked onchange="switchHeroScope('global')"> 全局统一</label>
          <label class="radio-item"><input type="radio" name="heroScope" value="camp" onchange="switchHeroScope('camp')"> 按阵营</label>
          <label class="radio-item"><input type="radio" name="heroScope" value="player" onchange="switchHeroScope('player')"> 按选手</label>
        </div>
        <div class="config-item">
          <span class="config-item-label">初始等级</span>
          <select id="heroLevel" onchange="updateConfig()">
            <option value="0">1级</option>
            <option value="1">4级</option>
            <option value="2">5级</option>
            <option value="3">8级</option>
            <option value="4">10级</option>
            <option value="5">12级</option>
            <option value="6">15级</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">初始金币</span>
          <select id="heroGold" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">1000</option>
            <option value="2">2000</option>
            <option value="3">5000</option>
            <option value="4">12000</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">法术攻击加成</span>
          <select id="heroMagicAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">物理攻击加成</span>
          <select id="heroPhysicAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">冷却缩减</span>
          <select id="heroCD" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">减25%</option>
            <option value="2">减40%</option>
            <option value="3">减80%</option>
            <option value="4">减99%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">移动速度</span>
          <select id="heroSpeed" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加20%</option>
            <option value="3">加30%</option>
          </select>
        </div>
      </div>

      <div id="configTabMinion" style="display:none">
        <div class="config-subtitle">兵线属性</div>
        <div class="config-item">
          <span class="config-item-label">攻击力</span>
          <select id="minionAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">生命值</span>
          <select id="minionHp" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">移动速度</span>
          <select id="minionSpeed" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
            <option value="3">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">刷新速度</span>
          <select id="minionRespawn" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加5%</option>
            <option value="2">加10%</option>
            <option value="3">加15%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">出兵类型</span>
          <select id="minionType" onchange="updateConfig()">
            <option value="0">普通兵线</option>
            <option value="1">超级兵</option>
            <option value="2">主宰先锋</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">出兵路线</span>
          <select id="minionRoute" onchange="updateConfig()">
            <option value="0">不出兵</option>
            <option value="1">对抗路</option>
            <option value="2">中路</option>
            <option value="3">对抗路 中路</option>
            <option value="4">发育路</option>
            <option value="5">对抗路 发育路</option>
            <option value="6">中路 发育路</option>
            <option value="7">对抗路 中路 发育路</option>
          </select>
        </div>
        <div class="config-subtitle">野怪属性</div>
        <div class="config-item">
          <span class="config-item-label">攻击力</span>
          <select id="monsterAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">生命值</span>
          <select id="monsterHp" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加10%</option>
            <option value="2">加25%</option>
            <option value="3">加50%</option>
            <option value="4">加75%</option>
            <option value="5">加100%</option>
          </select>
        </div>
      </div>

      <div id="configTabTower" style="display:none">
        <div class="config-subtitle">防御塔属性</div>
        <div class="config-item">
          <span class="config-item-label">攻击力</span>
          <select id="towerAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
            <option value="3">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">攻击范围</span>
          <select id="towerRange" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">生命值</span>
          <select id="towerHp" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
            <option value="3">加100%</option>
          </select>
        </div>
        <div class="config-subtitle">水晶属性</div>
        <div class="config-item">
          <span class="config-item-label">攻击力</span>
          <select id="crystalAtk" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
            <option value="3">加100%</option>
          </select>
        </div>
        <div class="config-item">
          <span class="config-item-label">生命值</span>
          <select id="crystalHp" onchange="updateConfig()">
            <option value="0">无加成</option>
            <option value="1">加25%</option>
            <option value="2">加50%</option>
            <option value="3">加100%</option>
          </select>
        </div>
        <div class="config-subtitle">胜利条件</div>
        <div class="config-item">
          <span class="config-item-label">胜利条件</span>
          <select id="victoryCondition" onchange="updateConfig()">
            <option value="0">摧毁水晶</option>
            <option value="1">摧毁任意一个一塔</option>
            <option value="2">摧毁任意一个二塔</option>
            <option value="3">摧毁任意一个三塔</option>
            <option value="4">3个总击败</option>
            <option value="5">20个总击败</option>
            <option value="6">30个总击败</option>
            <option value="7">40个总击败</option>
            <option value="8">1个助攻</option>
            <option value="9">5个助攻</option>
            <option value="10">10个助攻</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <button class="btn-primary" onclick="handleEnterRoom()">🚀 进入房间</button>
  <button class="btn-secondary" onclick="handleRoomList()">📋 房间列表</button>

  <p class="tip">点击启动房间后会自动调起王者荣耀APP<br>如没反应请检查是否安装王者荣耀，或复制链接在浏览器打开</p>
</div>

<!-- Toast -->
<div class="toast" id="toast"></div>

<!-- ============ 隐藏的MDUI布局（供JS初始化使用） ============ -->
<mdui-layout class="app-layout">
  <mdui-top-app-bar class="app-header" variant="small">
    <mdui-top-app-bar-title class="app-title">加载中</mdui-top-app-bar-title>
  </mdui-top-app-bar>
  <mdui-layout-main class="app-main">
    <mdui-card class="main-card" variant="outlined">
      <mdui-segmented-button-group class="game-server-group" full-width selects="single" value='zsf'>
        <mdui-segmented-button value="zsf" class="server-zsf">正式服</mdui-segmented-button>
      </mdui-segmented-button-group>
      <mdui-dropdown trigger="click" placement="auto">
        <mdui-text-field slot="trigger" label="地图模式" readonly variant="outlined" class="form-input map-input"></mdui-text-field>
        <mdui-menu class="form-menu map-menu" submenu-trigger="click hover"></mdui-menu>
      </mdui-dropdown>
      <mdui-dropdown trigger="click" placement="auto">
        <mdui-text-field slot="trigger" label="自定义禁用英雄配置" readonly variant="outlined" class="form-input hero-ban-input"></mdui-text-field>
        <mdui-menu class="form-menu hero-menu" submenu-trigger="click hover"></mdui-menu>
      </mdui-dropdown>
      <mdui-dropdown trigger="click" placement="auto">
        <mdui-text-field slot="trigger" label="自定义配置" readonly variant="outlined" class="form-input custom-input"></mdui-text-field>
        <mdui-menu class="form-menu custom-menu" submenu-trigger="click hover"></mdui-menu>
      </mdui-dropdown>
      <div class="button-group main-buttons">
        <mdui-button class="action-btn" icon="games" data-action="launch">启动</mdui-button>
        <mdui-button class="action-btn" icon="meeting_room" data-action="roomList" onclick="openRoomList();return false;">我的房间</mdui-button>
        <mdui-button class="action-btn" icon="book" data-action="tutorial">使用教程</mdui-button>
        <mdui-button class="action-btn" icon="auto_awesome" data-action="updateConfig">更新配置</mdui-button>
      </div>
    </mdui-card>
  </mdui-layout-main>
</mdui-layout>

<!-- ============ 复制规则弹窗 ============ -->
<mdui-dialog class="copy-rule-dialog" close-on-overlay-click headline="复制规则设置" description="长按复制链接按钮可打开此设置">
  <div class="copy-rule-dialog-content">
    <div class="copy-rule-tip">
      <strong>可用变量：</strong><br>
      <code>{url}</code> - 最终生成链接<br>
      <code>{map}</code> - 游戏地图名<br>
      <code>{banConfigName}</code> - 当前选中禁用配置名<br>
      <code>{banHeroNames}</code> - 实际禁用英雄名字列表<br>
      <code>{customConfigName}</code> - 当前选中自定义配置名<br>
      <code>{server}</code> - 游戏区服（正式服/体验服）
    </div>
    <textarea id="ruleTextarea" class="copy-rule-textarea" placeholder="输入复制规则，如：{url}"></textarea>
    <div class="copy-rule-preview-label">预览效果：</div>
    <div id="rulePreview" class="copy-rule-preview"></div>
    <div class="copy-rule-btn-group">
      <button id="presetLinkOnly" type="button" class="copy-rule-preset-btn">仅链接</button>
      <button id="presetLinkAndMap" type="button" class="copy-rule-preset-btn">链接+地图</button>
      <button id="presetFullInfo" type="button" class="copy-rule-preset-btn">完整信息</button>
    </div>
  </div>
  <mdui-button slot="action" variant="text" id="cancelRuleBtn">取消</mdui-button>
  <mdui-button slot="action" variant="text" id="saveRuleBtn">保存</mdui-button>
</mdui-dialog>

<!-- ============ 英雄选择器弹窗 ============ -->
<mdui-dialog class="hero-selector-dialog" close-on-overlay-click fullscreen>
  <mdui-top-app-bar slot="header" variant="small">
    <mdui-top-app-bar-title>禁用英雄配置</mdui-top-app-bar-title>
    <mdui-button variant="text" class="dialog-close-btn">关闭</mdui-button>
  </mdui-top-app-bar>
  <div class="button-group hero-buttons">
    <mdui-dropdown trigger="click" placement="auto" class="hero-scheme-dropdown">
      <mdui-button slot="trigger" variant="filled" class="hero-scheme-trigger">选择配置</mdui-button>
      <mdui-menu class="form-menu hero-scheme-menu" submenu-trigger="click hover"></mdui-menu>
    </mdui-dropdown>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="new">新建配置</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="copySelection">复制选中</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="importSelection">导入选中</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="rename">重命名配置</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="delete">删除配置</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="save">保存配置</mdui-button>
    <mdui-button variant="filled" class="hero-btn" data-hero-action="randomBan">随机禁用</mdui-button>
  </div>
  <mdui-button variant="text" slot="action" class="hero-btn" data-hero-action="selectAll">全选</mdui-button>
  <mdui-button variant="text" slot="action" class="hero-btn" data-hero-action="invertSelect">反选</mdui-button>
  <mdui-text-field variant="outlined" label="搜索英雄" clearable class="hero-search-input"></mdui-text-field>
  <p class="dialog-tip">如显示不全可向下滑动查看更多内容 点击选择方案选择保存的方案</p>
  <mdui-radio-group class="hero-type-filter"></mdui-radio-group>
  <div class="hero-grid-container"></div>
</mdui-dialog>

<!-- ============ 自定义配置弹窗 ============ -->
<mdui-dialog class="custom-config-dialog" close-on-overlay-click fullscreen>
  <mdui-top-app-bar slot="header" variant="small">
    <mdui-top-app-bar-title>自定义配置</mdui-top-app-bar-title>
    <mdui-button variant="text" class="dialog-close-btn">关闭</mdui-button>
  </mdui-top-app-bar>
  <div class="button-group custom-buttons">
    <mdui-dropdown trigger="click" placement="auto" class="custom-scheme-dropdown">
      <mdui-button slot="trigger" variant="filled" class="custom-scheme-trigger">选择配置</mdui-button>
      <mdui-menu class="form-menu custom-scheme-menu" submenu-trigger="click hover"></mdui-menu>
    </mdui-dropdown>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="new">新建配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="copy">复制配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="import">导入配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="rename">重命名配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="delete">删除配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="advanced">高级设置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="save">保存配置</mdui-button>
    <mdui-button variant="filled" class="custom-btn" data-custom-action="reset">还原</mdui-button>
  </div>
  <p class="dialog-tip">如显示不全可向下滑动查看更多内容 点击选择方案选择保存的方案</p>
  <mdui-tabs class="config-tabs" value="tab-hero">
    <mdui-tab value="tab-hero">英雄属性</mdui-tab>
    <mdui-tab value="tab-minionAndMonster">兵线与野怪</mdui-tab>
    <mdui-tab value="tab-towerAndCrystal">防御塔与水晶</mdui-tab>
    <mdui-tab-panel slot="panel" value="tab-hero" class="config-panel hero-config-panel"></mdui-tab-panel>
    <mdui-tab-panel slot="panel" value="tab-minionAndMonster" class="config-panel minion-config-panel"></mdui-tab-panel>
    <mdui-tab-panel slot="panel" value="tab-towerAndCrystal" class="config-panel tower-config-panel"></mdui-tab-panel>
  </mdui-tabs>
</mdui-dialog>

<!-- MDUI JS -->
<script src="./mdui.global.js?v=20260903v4"></script>

<!-- QRCode JS -->
<script src="./qrcode.min.js?v=20260903v4"></script>

<!-- 入口脚本 -->
<script type="module" src="./js/app/main.js?v=20260903v4"></script>

<!-- 自定义交互脚本 -->
<script>
// ============ 全局可靠复制函数 ============
window.safeCopyText = async function(text) {
  // 方法1: 现代Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch(e) {
      console.warn('Clipboard API失败，尝试fallback:', e);
    }
  }
  
  // 方法2: textarea + execCommand（更可靠）
  try {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.top = '0';
    textarea.style.left = '0';
    textarea.style.width = '2em';
    textarea.style.height = '2em';
    textarea.style.padding = '0';
    textarea.style.border = 'none';
    textarea.style.outline = 'none';
    textarea.style.boxShadow = 'none';
    textarea.style.background = 'transparent';
    textarea.style.opacity = '0';
    textarea.style.pointerEvents = 'none';
    textarea.setAttribute('readonly', '');
    
    document.body.appendChild(textarea);
    textarea.select();
    textarea.setSelectionRange(0, text.length);
    
    const success = document.execCommand('copy');
    document.body.removeChild(textarea);
    
    if (success) return true;
  } catch(e) {
    console.warn('execCommand失败:', e);
  }
  
  // 方法3: 显示手动复制弹窗
  showToast('复制失败，请手动复制');
  setTimeout(() => {
    const dialog = document.createElement('div');
    dialog.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1a2e;color:#fff;padding:20px;border-radius:12px;z-index:99999;max-width:90%;box-shadow:0 10px 40px rgba(0,0,0,0.5)';
    dialog.innerHTML = '<h3 style="margin:0 0 10px;color:#22d3ee">手动复制</h3><p style="margin:0 0 10px;font-size:12px;color:rgba(255,255,255,0.7)">请长按或选中下方文本复制：</p><textarea readonly style="width:100%;height:100px;background:#0d0d1a;color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px;font-size:11px;word-break:break-all">' + text + '</textarea><button onclick="this.parentElement.remove()" style="margin-top:10px;padding:8px 20px;background:#22d3ee;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:600">关闭</button>';
    document.body.appendChild(dialog);
  }, 500);
  
  return false;
};

// ============ 全局变量 ============
let currentServer = 'zsf';
let currentMap = '';
let currentPreset = null; // 当前选中的预设方案
let selectedHeroes = [];
let currentConfigTab = 'hero';
let currentHeroScope = 'global';

// ============ 工具函数 ============
function showToast(msg, duration = 2000) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), duration);
}

function toggleSection(id) {
  const body = document.getElementById(id + 'Body');
  const toggle = document.getElementById(id + 'Toggle');
  if (body.classList.contains('open')) {
    body.classList.remove('open');
    toggle.classList.remove('open');
  } else {
    body.classList.add('open');
    toggle.classList.add('open');
  }
}

function switchConfigTab(tab) {
  currentConfigTab = tab;
  document.querySelectorAll('.config-tab').forEach((t, i) => {
    const tabs = ['hero', 'minion', 'tower'];
    t.classList.toggle('active', tabs[i] === tab);
  });
  document.getElementById('configTabHero').style.display = tab === 'hero' ? 'block' : 'none';
  document.getElementById('configTabMinion').style.display = tab === 'minion' ? 'block' : 'none';
  document.getElementById('configTabTower').style.display = tab === 'tower' ? 'block' : 'none';
}

function switchHeroScope(scope) {
  currentHeroScope = scope;
  document.querySelectorAll('.radio-item').forEach(item => {
    item.classList.toggle('active', item.querySelector('input').value === scope);
  });
}

function switchServer(server) {
  currentServer = server;
  document.querySelectorAll('.server-btn').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.server === server);
  });
  // 同步到隐藏的MDUI组件
  const serverGroup = document.querySelector('.game-server-group');
  if (serverGroup) {
    serverGroup.value = server;
    serverGroup.dispatchEvent(new Event('change'));
  }
}

function onMapChange() {
  currentMap = document.getElementById('mapSelect').value;
  // 同步到隐藏的MDUI组件
  const mapInput = document.querySelector('.map-input');
  if (mapInput && currentMap) {
    mapInput.value = currentMap;
    mapInput.dispatchEvent(new Event('change'));
  }
}

function filterHeroes() {
  const keyword = document.getElementById('heroSearch').value.toLowerCase();
  document.querySelectorAll('.hero-item').forEach(item => {
    const name = item.querySelector('.hero-name').textContent.toLowerCase();
    item.style.display = name.includes(keyword) ? 'flex' : 'none';
  });
}

// ============ 完整配置常量（来自源码） ============
const CONFIG_CONSTANTS = {
  hero: {
    exp: { label: '初始等级', options: ['1级','4级','5级','8级','10级','12级','15级'], ids: { blue: [0,51,56,61,66], red: [28,71,76,81,86] }, totalCount: 10 },
    magic: { label: '法术攻击加成', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: [1,52,57,62,67], red: [29,72,77,82,87] }, totalCount: 10 },
    physical: { label: '物理攻击加成', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: [2,53,58,63,68], red: [30,73,78,83,88] }, totalCount: 10 },
    cd: { label: '冷却缩减', options: ['无加成','减25%','减40%','减80%','减99%'], ids: { blue: [3,54,59,64,69,21,91,92,93,94], red: [31,74,79,84,89,47,95,96,97,98] }, totalCount: 10 },
    gold: { label: '初始金币', options: ['无加成','1000','2000','5000','12000'], ids: { blue: [4,55,60,65,70], red: [32,75,80,85,90] }, totalCount: 10 },
    speed: { label: '移动速度', options: ['无加成','加10%','加20%','加30%'], ids: { blue: [106,107,108,109,110], red: [111,112,113,114,115] }, totalCount: 10 }
  },
  minion: {
    attack: { label: '攻击力', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: 5, red: 33 }, totalCount: 2 },
    hp: { label: '生命值', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: 6, red: 34 }, totalCount: 2 },
    speed: { label: '移动速度', options: ['无加成','加25%','加50%','加100%'], ids: { blue: 7, red: 35 }, totalCount: 2 },
    respawnSpeed: { label: '刷新速度', options: ['无加成','加5%','加10%','加15%'], ids: { blue: 8, red: 36 }, totalCount: 2 },
    type: { label: '出兵类型', options: ['普通兵线','超级兵','主宰先锋'], ids: { blue: 9, red: 37 }, totalCount: 2 },
    route: { label: '出兵路线', options: ['不出兵','对抗路','中路','对抗路 中路','发育路','对抗路 发育路','中路 发育路','对抗路 中路 发育路'], ids: { blue: 10, red: 38 }, totalCount: 2, defaultValue: 7 }
  },
  monster: {
    attack: { label: '攻击力', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: 11, red: 39 }, totalCount: 2 },
    hp: { label: '生命值', options: ['无加成','加10%','加25%','加50%','加75%','加100%'], ids: { blue: 12, red: 40 }, totalCount: 2 }
  },
  tower: {
    attack: { label: '攻击力', options: ['无加成','加25%','加50%','加100%'], ids: { blue: [13,22], red: [41,48] }, totalCount: 2 },
    range: { label: '攻击范围', options: ['无加成','加25%','加50%'], ids: { blue: [15,24], red: [43,50] }, totalCount: 2 },
    hp: { label: '生命值', options: ['无加成','加25%','加50%','加100%'], ids: { blue: [14,23], red: [42,49] }, totalCount: 2 }
  },
  crystal: {
    attack: { label: '攻击力', options: ['无加成','加25%','加50%','加100%'], ids: { blue: 16, red: 44 }, totalCount: 2 },
    hp: { label: '生命值', options: ['无加成','加25%','加50%','加100%'], ids: { blue: 17, red: 45 }, totalCount: 2 }
  }
};

const VICTORY_CONDITIONS = [
  { value: 0, label: '摧毁水晶', config: {} },
  { value: 1, label: '摧毁任意一个一塔', config: { 19: 1 } },
  { value: 2, label: '摧毁任意一个二塔', config: { 19: 1, 103: 1 } },
  { value: 3, label: '摧毁任意一个三塔', config: { 19: 1, 103: 2 } },
  { value: 4, label: '3个总击败', config: { 19: 2 } },
  { value: 5, label: '20个总击败', config: { 19: 2, 20: 1 } },
  { value: 6, label: '30个总击败', config: { 19: 2, 20: 2 } },
  { value: 7, label: '40个总击败', config: { 19: 2, 20: 3 } },
  { value: 8, label: '1个助攻', config: { 19: 2, 105: 1 } },
  { value: 9, label: '5个助攻', config: { 19: 2, 105: 1, 104: 1 } },
  { value: 10, label: '10个助攻', config: { 19: 2, 105: 1, 104: 2 } }
];

// ============ 配置收集函数 ============
function collectCustomConfig() {
  const config = {
    hero: { mode: 'all', data: {} },
    minionAndMonster: { mode: 'all', data: {} },
    towerAndCrystal: { mode: 'all', data: {} },
    victory: '0'
  };
  
  // 英雄属性
  const heroFields = [
    ['heroLevel', 'hero.exp'],
    ['heroMagicAtk', 'hero.magic'],
    ['heroPhysicAtk', 'hero.physical'],
    ['heroCD', 'hero.cd'],
    ['heroGold', 'hero.gold'],
    ['heroSpeed', 'hero.speed']
  ];
  heroFields.forEach(([fieldId, flatKey]) => {
    const el = document.getElementById(fieldId);
    if (el) config.hero.data[flatKey] = el.value;
  });
  
  // 兵线属性
  const minionFields = [
    ['minionAtk', 'minion.attack'],
    ['minionHp', 'minion.hp'],
    ['minionSpeed', 'minion.speed'],
    ['minionRespawn', 'minion.respawnSpeed'],
    ['minionType', 'minion.type'],
    ['minionRoute', 'minion.route']
  ];
  minionFields.forEach(([fieldId, flatKey]) => {
    const el = document.getElementById(fieldId);
    if (el) config.minionAndMonster.data[flatKey] = el.value;
  });
  
  // 野怪属性
  const monsterFields = [
    ['monsterAtk', 'monster.attack'],
    ['monsterHp', 'monster.hp']
  ];
  monsterFields.forEach(([fieldId, flatKey]) => {
    const el = document.getElementById(fieldId);
    if (el) config.minionAndMonster.data[flatKey] = el.value;
  });
  
  // 防御塔属性
  const towerFields = [
    ['towerAtk', 'tower.attack'],
    ['towerRange', 'tower.range'],
    ['towerHp', 'tower.hp']
  ];
  towerFields.forEach(([fieldId, flatKey]) => {
    const el = document.getElementById(fieldId);
    if (el) config.towerAndCrystal.data[flatKey] = el.value;
  });
  
  // 水晶属性
  const crystalFields = [
    ['crystalAtk', 'crystal.attack'],
    ['crystalHp', 'crystal.hp']
  ];
  crystalFields.forEach(([fieldId, flatKey]) => {
    const el = document.getElementById(fieldId);
    if (el) config.towerAndCrystal.data[flatKey] = el.value;
  });
  
  // 胜利条件
  const victoryEl = document.getElementById('victoryCondition');
  if (victoryEl) config.victory = victoryEl.value;
  
  return config;
}

// ============ 配置转换为customDefineItems ============
function configToCustomItems(config, playerCount) {
  let items = [];
  
  // 英雄属性
  if (config.hero?.data) {
    Object.entries(config.hero.data).forEach(([flatKey, value]) => {
      const [category, attrKey] = flatKey.split('.');
      const attr = CONFIG_CONSTANTS[category]?.[attrKey];
      if (!attr) return;
      const defaultValue = attr.defaultValue !== undefined ? attr.defaultValue : 0;
      if (parseInt(value) === defaultValue) return;
      
      ['blue', 'red'].forEach(side => {
        for (let pos = 0; pos < playerCount; pos++) {
          let gameIds;
          if (attrKey === 'cd') {
            gameIds = [attr.ids[side][pos], attr.ids[side][pos + 5]];
          } else if (attr.totalCount === 10) {
            gameIds = [attr.ids[side][pos]];
          } else {
            gameIds = [attr.ids[side]];
          }
          gameIds.forEach(id => items.push(id + ':' + value));
        }
      });
    });
  }
  
  // 兵线与野怪属性
  if (config.minionAndMonster?.data) {
    Object.entries(config.minionAndMonster.data).forEach(([flatKey, value]) => {
      const [category, attrKey] = flatKey.split('.');
      const attr = CONFIG_CONSTANTS[category]?.[attrKey];
      if (!attr) return;
      const defaultValue = attr.defaultValue !== undefined ? attr.defaultValue : 0;
      if (parseInt(value) === defaultValue) return;
      
      ['blue', 'red'].forEach(side => {
        const id = attr.ids[side];
        items.push(id + ':' + value);
      });
    });
  }
  
  // 防御塔与水晶属性
  if (config.towerAndCrystal?.data) {
    Object.entries(config.towerAndCrystal.data).forEach(([flatKey, value]) => {
      const [category, attrKey] = flatKey.split('.');
      const attr = CONFIG_CONSTANTS[category]?.[attrKey];
      if (!attr) return;
      const defaultValue = attr.defaultValue !== undefined ? attr.defaultValue : 0;
      if (parseInt(value) === defaultValue) return;
      
      ['blue', 'red'].forEach(side => {
        const ids = Array.isArray(attr.ids[side]) ? attr.ids[side] : [attr.ids[side]];
        ids.forEach(id => items.push(id + ':' + value));
      });
    });
  }
  
  // 胜利条件
  if (config.victory != null && parseInt(config.victory) !== 0) {
    const victoryCondition = VICTORY_CONDITIONS.find(c => c.value === parseInt(config.victory));
    if (victoryCondition?.config) {
      Object.entries(victoryCondition.config).forEach(([id, value]) => {
        items.push(id + ':' + value);
      });
    }
  }
  
  return items;
}

// ============ 获取配置描述（用于房间页面显示） ============
function getConfigDescription(config) {
  const parts = [];
  
  // 英雄属性
  if (config.hero?.data) {
    const level = config.hero.data['hero.exp'];
    const cd = config.hero.data['hero.cd'];
    const gold = config.hero.data['hero.gold'];
    
    if (level && level !== '0') parts.push(CONFIG_CONSTANTS.hero.exp.options[parseInt(level)]);
    if (cd && cd !== '0') parts.push('CD' + CONFIG_CONSTANTS.hero.cd.options[parseInt(cd)]);
    if (gold && gold !== '0') parts.push('金币' + CONFIG_CONSTANTS.hero.gold.options[parseInt(gold)]);
  }
  
  // 胜利条件
  if (config.victory && config.victory !== '0') {
    const vc = VICTORY_CONDITIONS.find(c => c.value === parseInt(config.victory));
    if (vc) parts.push(vc.label);
  }
  
  return parts.length > 0 ? parts.join(' · ') : '默认配置';
}

function updateConfig() {
  // 配置更新时可以在这里同步到隐藏的MDUI组件
  console.log('配置已更新', collectCustomConfig());
}

// ============ 快捷房间预设 ============
const quickRoomPresets = {
  no_ban: { name: "不禁英雄", banHeros: [], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","3:4","21:4","54:4","91:4","59:4","92:4","64:4","93:4","69:4","94:4","31:4","47:4","74:4","95:4","79:4","96:4","84:4","97:4","89:4","98:4","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4"] },
  ban_invincible: { name: "禁用无敌", banHeros: ["121","123","131","141","173","176","125","505","506","564","514","519"], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","3:4","21:4","54:4","91:4","59:4","92:4","64:4","93:4","69:4","94:4","31:4","47:4","74:4","95:4","79:4","96:4","84:4","97:4","89:4","98:4","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4"] },
  ban_map_cannon: { name: "禁地图炮", banHeros: ["112","136","169","179"], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","3:4","21:4","54:4","91:4","59:4","92:4","64:4","93:4","69:4","94:4","31:4","47:4","74:4","95:4","79:4","96:4","84:4","97:4","89:4","98:4","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4"] },
  ban_op: { name: "禁用超标", banHeros: ["121","123","131","141","173","176","125","505","506","564","514","519","112","136","169","179"], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","3:4","21:4","54:4","91:4","59:4","92:4","64:4","93:4","69:4","94:4","31:4","47:4","74:4","95:4","79:4","96:4","84:4","97:4","89:4","98:4","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4"] },
  tank_battle: { name: "坦克大战", banHeros: ["106","107","108","109","110","111","112","115","116","118","119","124","127","128","129","130","131","132","133","136","139","140","141","142","146","148","150","152","153","154","156","157","162","163","167","169","170","173","174","175","177","178","183","184","180","190","192","191","182","189","196","195","198","179","501","199","176","502","197","503","504","125","137","508","312","507","513","529","505","506","522","518","523","525","524","531","536","528","537","155","538","540","542","534","548","521","544","545","564","514","159","563","519","517"], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","1:5","52:5","57:5","62:5","67:5","29:5","72:5","77:5","82:5","87:5","2:5","53:5","58:5","63:5","68:5","30:5","73:5","78:5","83:5","88:5","3:3","21:3","54:3","91:3","59:3","92:3","64:3","93:3","69:3","94:3","31:3","47:3","74:3","95:3","79:3","96:3","84:3","97:3","89:3","98:3","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4","106:3","107:3","108:3","109:3","110:3","111:3","112:3","113:3","114:3","115:3","5:5","33:5","6:5","34:5","7:3","35:3","8:3","36:3","9:1","37:1","14:3","23:3","42:3","49:3","17:3","45:3"] },
  heal_flow: { name: "回血流", banHeros: ["105","106","108","109","110","111","112","114","116","117","121","123","124","127","130","131","132","133","134","136","140","141","142","146","148","149","150","152","153","154","156","157","162","166","167","168","169","170","171","173","174","175","177","183","180","190","192","191","182","189","193","196","195","194","198","179","501","199","176","502","197","504","125","510","137","509","508","312","507","513","515","511","529","505","506","522","518","523","525","524","531","527","533","528","537","155","538","540","542","548","521","544","545","564","514","563","519"], customDefine: ["0:6","51:6","56:6","61:6","66:6","28:6","71:6","76:6","81:6","86:6","3:3","21:3","54:3","91:3","59:3","92:3","64:3","93:3","69:3","94:3","31:3","47:3","74:3","95:3","79:3","96:3","84:3","97:3","89:3","98:3","4:4","55:4","60:4","65:4","70:4","32:4","75:4","80:4","85:4","90:4","106:3","107:3","108:3","109:3","110:3","111:3","112:3","113:3","114:3","115:3","5:5","33:5","6:5","34:5","7:3","35:3","8:3","36:3","9:1","37:1","14:3","23:3","42:3","49:3","17:3","45:3","10:2","38:2"] }
};

function startQuickRoom(presetKey) {
  const preset = quickRoomPresets[presetKey];
  if (!preset) {
    showToast('预设方案不存在');
    return;
  }
  // 兼容多个变量名（优先使用全局变量）
  const selectedMap = window.currentMap || currentMap || customSelectedMap || window.customSelectedMap;
  if (!selectedMap) {
    showToast('请先选择地图模式');
    return;
  }
  
  // 如果已经选中了同一个预设方案，则取消选中
  if (window.currentPreset === presetKey) {
    window.currentPreset = null;
    currentPreset = null;
    document.querySelectorAll('.quick-btn').forEach(btn => {
      btn.classList.remove('selected');
    });
    // 显示高级自定义配置
    document.getElementById('customConfigCard').style.display = '';
    showToast('已取消预设方案');
    return;
  }
  
  // 保存当前选中的预设方案
  window.currentPreset = presetKey;
  currentPreset = presetKey;
  
  // 更新UI：移除所有选中状态，然后给当前选中的添加
  document.querySelectorAll('.quick-btn').forEach(btn => {
    btn.classList.remove('selected');
  });
  const selectedBtn = document.querySelector(`.quick-btn[onclick*="${presetKey}"]`);
  if (selectedBtn) {
    selectedBtn.classList.add('selected');
  }
  
  // 自动应用预设配置（解决"未选择配置"问题）
  applyPresetConfig(presetKey, preset);
  
  // 隐藏高级自定义配置
  document.getElementById('customConfigCard').style.display = 'none';
  
  showToast(`已选择「${preset.name}」，点击进入房间`);
}

// 应用预设配置
function applyPresetConfig(presetKey, preset) {
  // 创建一个简单的默认配置（无CD等）
  const presetConfig = {
    name: preset.name,
    hero: {
      mode: 'all',
      data: {
        level: '15',
        magicAttack: presetKey === 'no_ban' ? '0' : '0',
        physicalAttack: '0',
        cooldownReduction: presetKey.includes('tank') || presetKey.includes('heal') ? '80' : '100',
        gold: '20000',
        moveSpeed: '0'
      }
    },
    minion: {
      mode: 'all',
      data: {
        attack: '0',
        hp: '0',
        moveSpeed: '0',
        spawnRate: '0',
        spawnType: '0',
        spawnRoute: presetKey === 'heal_flow' ? '1' : '0'
      }
    },
    jungle: {
      mode: 'all',
      data: {
        attack: '0',
        hp: '0'
      }
    },
    tower: {
      mode: 'all',
      data: {
        attack: '0',
        range: '0',
        hp: '0'
      }
    },
    crystal: {
      mode: 'all',
      data: {
        attack: '0',
        hp: '0'
      }
    },
    victory: '0',
    advanced: {}
  };
  
  // 保存到localStorage
  try {
    const configs = JSON.parse(localStorage.getItem('wzzdy_custom_configs') || '{}');
    configs[preset.name] = presetConfig;
    localStorage.setItem('wzzdy_custom_configs', JSON.stringify(configs));
    localStorage.setItem('wzzdy_current_custom_config_name', preset.name);
  } catch(e) {
    console.warn('保存预设配置失败:', e);
  }
  
  // 设置到隐藏的MDUI输入框
  const customInput = document.querySelector('.custom-input');
  if (customInput) {
    customInput.value = preset.name;
    customInput.dispatchEvent(new Event('change'));
    customInput.dispatchEvent(new Event('input'));
  }
  
  console.log('已应用预设配置:', preset.name);
}

// ============ 操作按钮（调用隐藏的MDUI按钮） ============
function handleEnterRoom() {
  // 验证地图是否已选择
  const mapInput = document.querySelector('.map-input');
  const mapName = mapInput?.value;
  if (!mapName) {
    showToast('请先选择地图模式');
    return;
  }
  console.log('进入房间 - 当前地图:', mapName);
  
  // 收集房间信息
  const roomInfo = collectRoomInfo(mapName);
  
  // 显示加载状态
  showToast('正在创建房间...');
  
  // 调用API创建房间
  fetch('room_api.php?action=create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(roomInfo)
  }).then(response => response.json()).then(data => {
    if (data.success && data.room) {
      localStorage.setItem('wzzdy_current_room', JSON.stringify(data.room));
      showToast('房间创建成功！');
      setTimeout(() => {
        window.location.href = 'room.html?id=' + data.room.id;
      }, 500);
    } else {
      throw new Error(data.error || '创建房间失败');
    }
  }).catch(e => {
    console.error('创建房间失败:', e);
    showToast('创建房间失败，使用本地模式');
    localStorage.setItem('wzzdy_current_room', JSON.stringify(roomInfo));
    setTimeout(() => {
      window.location.href = 'room.html';
    }, 1000);
  });
}

// 收集房间信息
function collectRoomInfo(mapName) {
  const presetKey = window.currentPreset || currentPreset;
  const preset = presetKey ? quickRoomPresets[presetKey] : null;
  
  // 生成随机房间ID
  const roomId = Math.round(Math.random() * 1000000000000000000);
  
  // 构建scheme（使用正确的王者荣耀正式服scheme格式）
  const mapId = window.currentMap || '20011';
  
  // 获取玩家数量（根据地图ID）
  let teamerNum = 10;
  if (mapId === '20001') teamerNum = 2; // 1V1
  else if (mapId === '20002') teamerNum = 6; // 3V3
  else if (mapId === '99988') teamerNum = 20; // 10V10
  const playerCount = teamerNum / 2;
  
  // 收集配置
  let customDefineItems = [];
  let banHeros = [];
  let configDescription = '';
  
  if (preset) {
    // 预设方案：使用预设的customDefine
    customDefineItems = preset.customDefine || [];
    banHeros = preset.banHeros || [];
    configDescription = getPresetDescription(presetKey, preset.name);
  } else {
    // 自定义配置：从表单收集并转换
    const customConfig = collectCustomConfig();
    customDefineItems = configToCustomItems(customConfig, playerCount);
    configDescription = getConfigDescription(customConfig);
    
    // 收集禁用英雄
    const banHeroLabel = document.getElementById('banHeroLabel')?.textContent;
    if (banHeroLabel && banHeroLabel !== '未选择禁用英雄') {
      // 从隐藏的MDUI组件获取禁用英雄ID
      const heroBanInput = document.querySelector('.hero-ban-input');
      if (heroBanInput?.value) {
        banHeros = heroBanInput.value.split(/\s+/).filter(Boolean);
      }
    }
  }
  
  const roomDataObj = {
    createType: '2',
    mapID: String(mapId),
    mapType: '1',
    teamerNum: String(teamerNum),
    ullRoomid: String(roomId),
    ullExternUid: String(roomId),
    roomName: '1',
    platType: '2',
    campid: '1',
    AddPos: '0',
    firstCountDownTime: '1800',
    secondCountDownTime: '17',
    AddType: '2',
    OfflineRelayEntityID: '',
    openAICommentator: '1',
    banHerosCamp1: banHeros,
    banHerosCamp2: banHeros,
    customDefineItems: customDefineItems
  };
  const scheme = 'tencentmsdk1104466820://?gamedata=SmobaLaunch_' + btoa(JSON.stringify(roomDataObj));
  
  // 生成分享链接
  const baseUrl = window.location.origin + window.location.pathname.replace(/[^/]+$/, '');
  const shareUrl = `${baseUrl}openGame.html?data=${btoa(scheme)}`;
  
  // 收集房间配置参数（用于房间页面显示）
  // 尝试获取英雄名字映射（英雄数据结构: { "英雄名字": "ID|类型" }）
  let heroNameMap = {};
  try {
    const cachedHeros = localStorage.getItem('wzzdy_all_heros');
    if (cachedHeros) {
      const heroData = JSON.parse(cachedHeros);
      if (heroData && typeof heroData === 'object') {
        Object.keys(heroData).forEach(heroName => {
          const info = heroData[heroName];
          if (typeof info === 'string' && info.includes('|')) {
            const id = info.split('|')[0];
            heroNameMap[id] = heroName;
          }
        });
      }
    }
  } catch(e) { console.log('读取英雄数据失败:', e); }
  
  // 转换禁用英雄名字
  const banHeroNames = banHeros.map(id => heroNameMap[id] || ('英雄' + id));
  
  // 解析 customDefineItems 获取详细配置（同时保存配置值名称）
  const configDetails = {};
  
  // 动态从CONFIG_CONSTANTS构建配置ID到配置名称和选项的映射
  const configIdNameMap = {};  // 配置ID -> 配置名称
  const configIdOptionsMap = {}; // 配置ID -> 选项数组
  
  // 英雄属性
  Object.entries(CONFIG_CONSTANTS.hero).forEach(([key, attr]) => {
    const label = attr.label;
    const blueIds = Array.isArray(attr.ids.blue) ? attr.ids.blue : [attr.ids.blue];
    const redIds = Array.isArray(attr.ids.red) ? attr.ids.red : [attr.ids.red];
    blueIds.forEach((id, i) => {
      configIdNameMap[String(id)] = i === 0 ? label : ('蓝方' + label);
      configIdOptionsMap[String(id)] = attr.options;
    });
    redIds.forEach((id, i) => {
      configIdNameMap[String(id)] = i === 0 ? ('红方' + label) : ('红方' + label);
      configIdOptionsMap[String(id)] = attr.options;
    });
  });
  
  // 兵线属性
  Object.entries(CONFIG_CONSTANTS.minion).forEach(([key, attr]) => {
    const label = attr.label;
    configIdNameMap[String(attr.ids.blue)] = label;
    configIdOptionsMap[String(attr.ids.blue)] = attr.options;
    configIdNameMap[String(attr.ids.red)] = '红方' + label;
    configIdOptionsMap[String(attr.ids.red)] = attr.options;
  });
  
  // 野怪属性
  Object.entries(CONFIG_CONSTANTS.monster).forEach(([key, attr]) => {
    const label = attr.label;
    configIdNameMap[String(attr.ids.blue)] = label;
    configIdOptionsMap[String(attr.ids.blue)] = attr.options;
    configIdNameMap[String(attr.ids.red)] = '红方' + label;
    configIdOptionsMap[String(attr.ids.red)] = attr.options;
  });
  
  // 防御塔属性
  Object.entries(CONFIG_CONSTANTS.tower).forEach(([key, attr]) => {
    const label = attr.label;
    const blueIds = Array.isArray(attr.ids.blue) ? attr.ids.blue : [attr.ids.blue];
    const redIds = Array.isArray(attr.ids.red) ? attr.ids.red : [attr.ids.red];
    blueIds.forEach((id, i) => {
      configIdNameMap[String(id)] = i === 0 ? label : ('蓝方' + label);
      configIdOptionsMap[String(id)] = attr.options;
    });
    redIds.forEach((id, i) => {
      configIdNameMap[String(id)] = '红方' + label;
      configIdOptionsMap[String(id)] = attr.options;
    });
  });
  
  // 水晶属性
  Object.entries(CONFIG_CONSTANTS.crystal).forEach(([key, attr]) => {
    const label = attr.label;
    configIdNameMap[String(attr.ids.blue)] = label;
    configIdOptionsMap[String(attr.ids.blue)] = attr.options;
    configIdNameMap[String(attr.ids.red)] = '红方' + label;
    configIdOptionsMap[String(attr.ids.red)] = attr.options;
  });
  
  // 胜利条件
  configIdNameMap['19'] = '胜利条件类型';
  configIdOptionsMap['19'] = ['摧毁水晶', '摧毁塔', '总击败'];
  configIdNameMap['20'] = '总击败数';
  configIdOptionsMap['20'] = ['3个', '20个', '30个', '40个'];
  configIdNameMap['103'] = '摧毁塔类型';
  configIdOptionsMap['103'] = ['一塔', '二塔', '三塔'];
  configIdNameMap['104'] = '助攻数';
  configIdOptionsMap['104'] = ['1个', '5个', '10个'];
  configIdNameMap['105'] = '助攻条件';
  configIdOptionsMap['105'] = ['需要助攻'];
  
    customDefineItems.forEach(item => {
    const parts = item.split(':');
    if (parts.length === 2) {
      const id = parts[0];
      const val = parseInt(parts[1]);
      const name = configIdNameMap[id] || ('配置' + id);
      // 同时保存配置值索引和配置值名称（安全处理越界）
      const options = configIdOptionsMap[id];
      const valueName = (options && val >= 0 && val < options.length) ? options[val] : ('值' + val);
      configDetails[name] = { index: val, name: valueName };
    }
  });
  
  // 从 customDefineItems 解析英雄属性配置
  let parsedLevel = '';
  let parsedCooldown = '';
  let parsedGold = '';
  let parsedMagic = '';
  let parsedPhysical = '';
  let parsedSpeed = '';
  
  // 配置ID映射（全体配置的ID）
  const heroConfigIdMap = {
    '0': { key: 'level', options: ['1级','4级','5级','8级','10级','12级','15级'] },
    '1': { key: 'magicAttack', options: ['无加成','加10%','加25%','加50%','加75%','加100%'] },
    '2': { key: 'physicalAttack', options: ['无加成','加10%','加25%','加50%','加75%','加100%'] },
    '3': { key: 'cooldownReduction', options: ['无加成','减25%','减40%','减80%','减99%'] },
    '4': { key: 'gold', options: ['无加成','1000','2000','5000','12000'] },
    '5': { key: 'moveSpeed', options: ['无加成','加10%','加20%','加30%','加50%'] }
  };
  
  customDefineItems.forEach(item => {
    const parts = item.split(':');
    if (parts.length === 2) {
      const id = parts[0];
      const val = parseInt(parts[1]);
      const config = heroConfigIdMap[id];
      if (config && config.options[val] !== undefined) {
        const value = config.options[val];
        // 只保存非默认值
        if (value !== '无加成' && value !== '1级') {
          if (config.key === 'level') parsedLevel = value;
          else if (config.key === 'cooldownReduction') parsedCooldown = value;
          else if (config.key === 'gold') parsedGold = value;
          else if (config.key === 'magicAttack') parsedMagic = value;
          else if (config.key === 'physicalAttack') parsedPhysical = value;
          else if (config.key === 'moveSpeed') parsedSpeed = value;
        }
      }
    }
  });
  
  const roomConfig = {
    type: preset ? 'preset' : 'custom',
    presetName: preset?.name || '自定义配置',
    banHeroCount: banHeros.length,
    banHeros: banHeros,
    banHeroNames: banHeroNames,
    level: parsedLevel,
    cooldownReduction: parsedCooldown,
    gold: parsedGold,
    magicAttack: parsedMagic,
    physicalAttack: parsedPhysical,
    moveSpeed: parsedSpeed,
    customDefineCount: customDefineItems.length,
    customDefineItems: customDefineItems,
    configDetails: configDetails,
    description: configDescription,
    teamerNum: teamerNum
  };
  
  return {
    roomId: roomId,
    mapName: document.getElementById('mapSelectValue')?.textContent || mapName,
    mapId: mapId,
    presetName: preset?.name || '自定义',
    presetKey: presetKey,
    scheme: scheme,
    shareUrl: shareUrl,
    createTime: Date.now(),
    roomConfig: roomConfig
  };
}

// 获取预设方案描述
function getPresetDescription(presetKey, presetName) {
  const descriptions = {
    'no_ban': '不禁用任何英雄，满CD满金币，适合欢乐对局',
    'ban_invincible': '禁用无敌英雄，满CD满金币',
    'ban_map_cannon': '禁用地图炮英雄，满CD满金币',
    'ban_op': '禁用超标英雄，满CD满金币',
    'tank_battle': '坦克大战模式，高CD高血量，禁用脆皮英雄',
    'heal_flow': '回血流模式，高CD高回复，禁用爆发英雄'
  };
  return descriptions[presetKey] || presetName;
}

// 保留原handleLaunch作为备用
function handleLaunch() {
  const btn = document.querySelector('[data-action="launch"]');
  if (btn) btn.click();
}

function handleCopyLink() {
  // 验证地图是否已选择
  const mapInput = document.querySelector('.map-input');
  const mapName = mapInput?.value;
  if (!mapName) {
    showToast('请先选择地图模式');
    return;
  }
  console.log('复制链接 - 当前地图:', mapName);
  
  const btn = document.querySelector('[data-action="copyLink"]');
  if (btn) btn.click();
}

function handleRoomList() {
  window.location.href = 'rooms.html';
}

function openCustomConfigDialog() {
  const dialog = document.querySelector('.custom-config-dialog');
  if (dialog) dialog.open = true;
}

// ============ 配置管理（简化版） ============
function newConfig() {
  const name = prompt('请输入新配置名称：');
  if (name) {
    const option = document.createElement('option');
    option.value = name;
    option.textContent = name;
    document.getElementById('configSelect').appendChild(option);
    document.getElementById('configSelect').value = name;
    showToast('新配置已创建');
  }
}

function saveConfig() {
  showToast('配置已保存到本地');
}

function deleteConfig() {
  const select = document.getElementById('configSelect');
  if (select.value && confirm('确认删除此配置？')) {
    select.remove(select.selectedIndex);
    showToast('配置已删除');
  }
}

function loadConfig() {
  showToast('配置已加载');
}

// ============ 打开英雄选择器 ============
function openHeroSelector() {
  const dialog = document.querySelector('.hero-selector-dialog');
  if (dialog) {
    dialog.open = true;
  }
}

// ============ 更新禁用英雄显示 ============
function updateBanHeroDisplay() {
  const banInput = document.querySelector('.hero-ban-input');
  const banLabel = document.getElementById('banHeroLabel');
  const banCount = document.getElementById('banHeroCount');
  if (banInput && banInput.value) {
    if (banLabel) banLabel.textContent = banInput.value;
    // 尝试获取禁用英雄数量
    try {
      const banData = JSON.parse(localStorage.getItem('wzzdy_ban_configs') || '{}');
      const currentConfig = banData[banInput.value];
      if (currentConfig && currentConfig.banHeros) {
        if (banCount) banCount.textContent = currentConfig.banHeros.length + ' 个英雄';
      }
    } catch(e) {}
  }
}

// ============ 初始化 ============
window.addEventListener('load', () => {
  // 确保正式服被选中
  setTimeout(() => {
    const serverGroup = document.querySelector('.game-server-group');
    if (serverGroup) {
      serverGroup.value = 'zsf';
      serverGroup.dispatchEvent(new Event('change'));
    }
  }, 500);

  // 监听禁用英雄配置变化
  setTimeout(() => {
    const banInput = document.querySelector('.hero-ban-input');
    if (banInput) {
      banInput.addEventListener('change', updateBanHeroDisplay);
      // 初始更新
      updateBanHeroDisplay();
    }
  }, 1000);

  // 监听英雄选择器关闭
  setTimeout(() => {
    const heroDialog = document.querySelector('.hero-selector-dialog');
    if (heroDialog) {
      heroDialog.addEventListener('closed', () => {
        setTimeout(updateBanHeroDisplay, 300);
      });
    }
  }, 1000);
});

// 禁止双击缩放
document.addEventListener('dblclick', function(e) {
  e.preventDefault();
}, { passive: false });

// 禁止双指缩放
document.addEventListener('gesturestart', function(e) {
  e.preventDefault();
});

// ============ 自定义英雄选择器 ============
let customHeroData = {};
let customSelectedHeroes = [];
let customCurrentConfigName = '';

// 加载英雄数据
async function loadCustomHeroData() {
  try {
    // 尝试从localStorage获取缓存的英雄数据
    const cached = localStorage.getItem('wzzdy_all_heros');
    if (cached) {
      customHeroData = JSON.parse(cached);
      return;
    }
    // 尝试从MDUI的英雄数据模块获取
    // 等待MDUI初始化完成
    await new Promise(resolve => setTimeout(resolve, 1500));
    // 从隐藏的MDUI英雄选择器中获取英雄列表
    const heroItems = document.querySelectorAll('.hero-grid-container .hero-card, .hero-grid-container mdui-card');
    if (heroItems.length > 0) {
      heroItems.forEach(item => {
        const name = item.querySelector('.hero-name')?.textContent || item.textContent?.trim();
        if (name && !customHeroData[name]) {
          customHeroData[name] = name;
        }
      });
    }
  } catch(e) {
    console.error('加载英雄数据失败:', e);
  }
}

// 打开自定义英雄选择器
async function openCustomHeroSelector() {
  const overlay = document.getElementById('heroSelectorOverlay');
  if (!overlay) return;
  
  // 加载英雄数据
  if (Object.keys(customHeroData).length === 0) {
    await loadCustomHeroData();
  }
  
  // 加载当前选中的配置
  loadCurrentBanConfig();
  
  // 渲染英雄列表
  renderCustomHeroGrid();
  
  // 显示选择器
  overlay.classList.add('open');
  document.body.style.overflow = 'hidden';
}

// 关闭自定义英雄选择器
function closeCustomHeroSelector() {
  const overlay = document.getElementById('heroSelectorOverlay');
  if (overlay) {
    overlay.classList.remove('open');
    document.body.style.overflow = '';
  }
}

// 渲染英雄网格
function renderCustomHeroGrid() {
  const grid = document.getElementById('heroSelectorGrid');
  const search = document.getElementById('heroSelectorSearch')?.value?.toLowerCase() || '';
  
  if (!grid) return;
  
  grid.innerHTML = '';
  
  const heroNames = Object.keys(customHeroData).filter(name => 
    !search || name.toLowerCase().includes(search)
  );
  
  heroNames.forEach(name => {
    const item = document.createElement('div');
    item.className = 'hero-selector-item' + (customSelectedHeroes.includes(name) ? ' selected' : '');
    item.onclick = () => toggleCustomHero(name);
    
    // 尝试获取英雄ID用于头像
    let heroId = '';
    const info = customHeroData[name];
    if (info && info.includes('|')) {
      heroId = info.split('|')[0];
    }
    
    const avatar = heroId 
      ? `<div class="hero-avatar"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${heroId}/${heroId}.jpg" alt="${name}" onerror="this.style.display='none';this.parentElement.textContent='${name.charAt(0)}'"></div>`
      : `<div class="hero-avatar">${name.charAt(0)}</div>`;
    
    item.innerHTML = `${avatar}<div class="hero-name">${name}</div>`;
    grid.appendChild(item);
  });
  
  updateCustomHeroCount();
}

// 切换英雄选择状态
function toggleCustomHero(name) {
  const index = customSelectedHeroes.indexOf(name);
  if (index > -1) {
    customSelectedHeroes.splice(index, 1);
  } else {
    customSelectedHeroes.push(name);
  }
  renderCustomHeroGrid();
}

// 筛选英雄
function filterCustomHeroes() {
  renderCustomHeroGrid();
}

// 全选
function selectAllCustomHeroes() {
  const search = document.getElementById('heroSelectorSearch')?.value?.toLowerCase() || '';
  const heroNames = Object.keys(customHeroData).filter(name => 
    !search || name.toLowerCase().includes(search)
  );
  heroNames.forEach(name => {
    if (!customSelectedHeroes.includes(name)) {
      customSelectedHeroes.push(name);
    }
  });
  renderCustomHeroGrid();
}

// 反选
function invertCustomHeroes() {
  const search = document.getElementById('heroSelectorSearch')?.value?.toLowerCase() || '';
  const heroNames = Object.keys(customHeroData).filter(name => 
    !search || name.toLowerCase().includes(search)
  );
  customSelectedHeroes = heroNames.filter(name => !customSelectedHeroes.includes(name));
  renderCustomHeroGrid();
}

// 清空
function clearCustomHeroes() {
  customSelectedHeroes = [];
  renderCustomHeroGrid();
}

// 更新选中数量
function updateCustomHeroCount() {
  const countEl = document.getElementById('heroSelectorCount');
  if (countEl) {
    countEl.textContent = customSelectedHeroes.length;
  }
}

// 加载当前禁用配置
function loadCurrentBanConfig() {
  try {
    // 从localStorage获取当前配置名
    customCurrentConfigName = localStorage.getItem('wzzdy_current_ban_config_name') || '';
    
    // 从隐藏的MDUI输入框获取当前配置名
    const banInput = document.querySelector('.hero-ban-input');
    if (banInput && banInput.value) {
      customCurrentConfigName = banInput.value;
    }
    
    // 从localStorage获取所有禁用配置
    const allConfigs = JSON.parse(localStorage.getItem('wzzdy_ban_configs') || '{}');
    
    // 加载当前配置的英雄列表
    if (customCurrentConfigName && allConfigs[customCurrentConfigName]) {
      const config = allConfigs[customCurrentConfigName];
      if (Array.isArray(config)) {
        customSelectedHeroes = [...config];
      } else if (typeof config === 'string') {
        customSelectedHeroes = config.split(/\s+/).filter(Boolean);
      }
    } else {
      customSelectedHeroes = [];
    }
  } catch(e) {
    console.error('加载禁用配置失败:', e);
    customSelectedHeroes = [];
  }
}

// 保存自定义英雄配置
function saveCustomHeroConfig() {
  try {
    // 如果没有配置名，自动生成一个
    if (!customCurrentConfigName) {
      customCurrentConfigName = `禁用${customSelectedHeroes.length}个英雄`;
    }
    
    // 从localStorage获取所有禁用配置
    const allConfigs = JSON.parse(localStorage.getItem('wzzdy_ban_configs') || '{}');
    
    // 保存当前配置（数组格式，和MDUI一致）
    allConfigs[customCurrentConfigName] = [...customSelectedHeroes];
    localStorage.setItem('wzzdy_ban_configs', JSON.stringify(allConfigs));
    
    // 保存当前配置名
    localStorage.setItem('wzzdy_current_ban_config_name', customCurrentConfigName);
    
    // 同步到隐藏的MDUI组件
    const banInput = document.querySelector('.hero-ban-input');
    if (banInput) {
      banInput.value = customCurrentConfigName;
      banInput.dispatchEvent(new Event('change'));
    }
    
    // 更新显示
    updateBanHeroDisplay();
    
    // 关闭选择器
    closeCustomHeroSelector();
    
    // 提示
    showToast(`已保存：${customCurrentConfigName}（${customSelectedHeroes.length}个英雄）`);
  } catch(e) {
    console.error('保存禁用配置失败:', e);
    showToast('保存失败，请重试');
  }
}

// 更新禁用英雄显示
function updateBanHeroDisplay() {
  const label = document.getElementById('banHeroLabel');
  const count = document.getElementById('banHeroCount');
  
  if (customCurrentConfigName) {
    if (label) label.textContent = customCurrentConfigName;
  } else {
    if (label) label.textContent = '未选择禁用英雄';
  }
  
  if (count) count.textContent = customSelectedHeroes.length + ' 个英雄';
}

// ============ 地图选择器（下拉菜单） ============
// 注意：currentMap已在上面的全局变量中声明，这里不重复声明
let customMapData = [];
let customSelectedMap = '';
let mapDropdownOpen = false;

// 硬编码地图数据（直接可用，不需要等待MDUI加载）
// mduiName: MDUI系统中使用的地图名称（必须与mapData.js中的键一致）
// displayName: 显示给用户看的名称
const HARDCODED_MAP_DATA = [
  { value: '20011', name: '5V5 王者峡谷', mduiName: '5v5', desc: '经典5v5对战地图' },
  { value: '20001', name: '1V1 墨家机关道', mduiName: '1v1', desc: '1v1单挑地图' },
  { value: '20002', name: '3V3 长平攻防战', mduiName: '3v3', desc: '3v3对战地图' },
  { value: '20111', name: '5V5 征召模式', mduiName: '5v5征召4ban位', desc: '5v5征召模式，可禁用英雄' },
  { value: '20009', name: '火焰山大战', mduiName: '火焰山[仅开房]', desc: '趣味模式，仅开房可用' },
  { value: '20012', name: '克隆大作战', mduiName: '克隆[仅开房]', desc: '趣味模式，仅开房可用' },
  { value: '99988', name: '众星峡谷', mduiName: '众星峡谷[仅开房]', desc: '10v10超大战场，仅开房可用' }
];

// 加载地图数据（优先使用硬编码数据，补充MDUI数据）
function loadCustomMapData(retryCount = 0) {
  return new Promise((resolve) => {
    try {
      // 先使用硬编码数据
      customMapData = [...HARDCODED_MAP_DATA];
      
      // 尝试从MDUI补充更多地图数据
      const mapMenu = document.querySelector('.map-menu');
      if (mapMenu) {
        const mapItems = mapMenu.querySelectorAll('mdui-menu-item');
        if (mapItems.length > 0) {
          const existingValues = new Set(customMapData.map(m => m.value));
          mapItems.forEach(item => {
            if (item.value && item.textContent.trim() && !existingValues.has(item.value)) {
              customMapData.push({
                value: item.value,
                name: item.textContent.trim(),
                desc: item.getAttribute('description') || ''
              });
            }
          });
        }
      }
      
      // 缓存到localStorage
      localStorage.setItem('wzzdy_map_data', JSON.stringify(customMapData));
      resolve(customMapData);
    } catch(e) {
      console.error('加载地图数据失败:', e);
      // 即使出错也返回硬编码数据
      customMapData = [...HARDCODED_MAP_DATA];
      resolve(customMapData);
    }
  });
}

// 切换地图下拉菜单
async function toggleMapDropdown(event) {
  event.stopPropagation();
  
  const menu = document.getElementById('mapDropdownMenu');
  const select = document.querySelector('.custom-select');
  const list = document.getElementById('mapDropdownList');
  const card = menu.closest('.glass-card');
  
  if (mapDropdownOpen) {
    closeMapDropdown();
    return;
  }
  
  // 打开下拉菜单
  mapDropdownOpen = true;
  menu.classList.add('open');
  select.classList.add('open');
  // 提升整个卡片的z-index，解决backdrop-filter层叠上下文问题
  if (card) card.classList.add('has-dropdown-open');
  
  // 加载地图数据
  if (customMapData.length === 0) {
    list.innerHTML = '<div class="dropdown-loading">加载中...</div>';
    await loadCustomMapData();
  }
  
  // 渲染地图列表
  renderMapDropdown();
}

// 关闭地图下拉菜单
function closeMapDropdown() {
  const menu = document.getElementById('mapDropdownMenu');
  const select = document.querySelector('.custom-select');
  const card = menu?.closest('.glass-card');
  
  mapDropdownOpen = false;
  if (menu) menu.classList.remove('open');
  if (select) select.classList.remove('open');
  // 恢复卡片的z-index
  if (card) card.classList.remove('has-dropdown-open');
}

// 渲染地图下拉列表
function renderMapDropdown() {
  const list = document.getElementById('mapDropdownList');
  const search = document.getElementById('mapSearchInput')?.value?.toLowerCase() || '';
  
  if (!list) return;
  
  if (customMapData.length === 0) {
    list.innerHTML = '<div class="dropdown-empty">暂无地图数据</div>';
    return;
  }
  
  const filteredMaps = customMapData.filter(map => 
    !search || map.name.toLowerCase().includes(search)
  );
  
  if (filteredMaps.length === 0) {
    list.innerHTML = '<div class="dropdown-empty">没有找到匹配的地图</div>';
    return;
  }
  
  list.innerHTML = '';
  filteredMaps.forEach(map => {
    const item = document.createElement('div');
    item.className = 'dropdown-item' + (customSelectedMap === map.value ? ' selected' : '');
    item.onclick = (e) => { e.stopPropagation(); selectMap(map); };
    
    const descHtml = map.desc ? `<div class="item-desc">${map.desc}</div>` : '';
    item.innerHTML = `
      <div class="item-name">${map.name}</div>
      ${descHtml}
    `;
    list.appendChild(item);
  });
}

// 筛选地图下拉列表
function filterMapDropdown() {
  renderMapDropdown();
}

// 选择地图
function selectMap(map) {
  customSelectedMap = map.value;
  window.currentMap = map.value; // 同步到全局变量，供预设方案使用
  window.currentMapName = map.name;
  window.currentMapMduiName = map.mduiName || map.name;
  
  // 同步到隐藏的MDUI组件（必须使用MDUI期望的地图名称）
  const mapInput = document.querySelector('.map-input');
  if (mapInput) {
    const mduiName = map.mduiName || map.name;
    mapInput.value = mduiName;
    mapInput.dispatchEvent(new Event('change'));
    mapInput.dispatchEvent(new Event('input'));
    console.log('地图已同步到MDUI:', mduiName, '(ID:', map.value, ')');
  }
  
  // 尝试同步到隐藏的MDUI菜单（如果有对应的菜单项）
  const mapMenu = document.querySelector('.map-menu');
  if (mapMenu) {
    const items = mapMenu.querySelectorAll('mdui-menu-item');
    items.forEach(item => {
      // 匹配地图名称或地图ID
      const itemValue = item.value || '';
      const itemText = item.textContent?.trim() || '';
      if (itemValue === map.value || itemText === (map.mduiName || map.name)) {
        item.click();
        console.log('已点击MDUI菜单项:', itemText);
      }
    });
  }
  
  // 更新显示
  const mapSelectValue = document.getElementById('mapSelectValue');
  if (mapSelectValue) {
    mapSelectValue.textContent = map.name;
    mapSelectValue.classList.remove('placeholder');
  }
  
  // 关闭下拉菜单
  closeMapDropdown();
  
  // 提示
  showToast(`已选择：${map.name}`);
}

// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', function(e) {
  if (mapDropdownOpen && !e.target.closest('.dropdown-wrapper')) {
    closeMapDropdown();
  }
});

// ============ 我的房间（第一版UI） ============
let customRoomList = [];

// 加载房间列表
function loadCustomRoomList() {
  try {
    // 从localStorage获取房间列表
    const rooms = JSON.parse(localStorage.getItem('wzzdy_rooms') || '[]');
    customRoomList = rooms.filter(room => {
      // 过滤过期的房间（30分钟）
      const createdTime = room.createdTime || room.timestamp || 0;
      const expireTime = 30 * 60 * 1000; // 30分钟
      return Date.now() - createdTime < expireTime;
    });
    // 保存过滤后的列表
    localStorage.setItem('wzzdy_rooms', JSON.stringify(customRoomList));
  } catch(e) {
    console.error('加载房间列表失败:', e);
    customRoomList = [];
  }
}

// 打开房间列表
function openRoomList() {
  const overlay = document.getElementById('roomListOverlay');
  if (!overlay) return;
  
  // 加载房间列表
  loadCustomRoomList();
  
  // 渲染房间列表
  renderRoomList();
  
  // 显示选择器
  overlay.classList.add('open');
  document.body.style.overflow = 'hidden';
}

// 关闭房间列表
function closeRoomList() {
  const overlay = document.getElementById('roomListOverlay');
  if (overlay) {
    overlay.classList.remove('open');
    document.body.style.overflow = '';
  }
}

// 渲染房间列表
function renderRoomList() {
  const body = document.getElementById('roomListBody');
  if (!body) return;
  
  if (customRoomList.length === 0) {
    body.innerHTML = '<div class="empty-state"><div class="empty-icon">🏠</div><div class="empty-text">暂无房间记录<br>创建房间后会显示在这里</div></div>';
    return;
  }
  
  body.innerHTML = '';
  customRoomList.forEach((room, index) => {
    const item = document.createElement('div');
    item.className = 'room-item';
    
    const createdTime = room.createdTime || room.timestamp || Date.now();
    const timeStr = new Date(createdTime).toLocaleString('zh-CN', {
      month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'
    });
    
    const mapName = room.mapName || room.map || '未知地图';
    const serverName = room.server === 'tyf' ? '体验服' : '正式服';
    
    item.innerHTML = `
      <div class="room-item-header">
        <div class="room-item-title">${mapName}</div>
        <div class="room-item-time">${timeStr}</div>
      </div>
      <div class="room-item-info">
        ${serverName} · ${room.banConfigName || '无禁用'} · ${room.customConfigName || '默认配置'}
      </div>
      <div class="room-item-actions">
        <div class="room-item-btn primary" onclick="joinRoom(${index})">加入房间</div>
        <div class="room-item-btn" onclick="copyRoomLink(${index})">复制链接</div>
        <div class="room-item-btn danger" onclick="deleteRoom(${index})">删除</div>
      </div>
    `;
    body.appendChild(item);
  });
}

// 加入房间
function joinRoom(index) {
  const room = customRoomList[index];
  if (!room || !room.url) {
    showToast('房间链接无效');
    return;
  }
  window.location.href = room.url;
}

// 复制房间链接
function copyRoomLink(index) {
  const room = customRoomList[index];
  if (!room || !room.url) {
    showToast('房间链接无效');
    return;
  }
  navigator.clipboard.writeText(room.url).then(() => {
    showToast('链接已复制');
  }).catch(() => {
    // 降级方案
    const textarea = document.createElement('textarea');
    textarea.value = room.url;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    showToast('链接已复制');
  });
}

// 删除房间
function deleteRoom(index) {
  customRoomList.splice(index, 1);
  localStorage.setItem('wzzdy_rooms', JSON.stringify(customRoomList));
  renderRoomList();
  showToast('房间已删除');
}

// ============ Toast提示 ============
function showToast(message) {
  // 检查是否已有toast
  let toast = document.getElementById('customToast');
  if (!toast) {
    toast = document.createElement('div');
    toast.id = 'customToast';
    toast.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:12px 24px;border-radius:12px;font-size:14px;z-index:99999;opacity:0;transition:opacity .3s;pointer-events:none;backdrop-filter:blur(10px)';
    document.body.appendChild(toast);
  }
  toast.textContent = message;
  toast.style.opacity = '1';
  setTimeout(() => {
    toast.style.opacity = '0';
  }, 2000);
}

// 页面加载完成后预加载数据
window.addEventListener('load', () => {
  // 立即初始化地图数据（使用硬编码数据，不需要等待）
  customMapData = [...HARDCODED_MAP_DATA];
  // 尝试从MDUI补充更多地图
  setTimeout(() => {
    loadCustomMapData();
  }, 1000);
  
  setTimeout(() => {
    loadCustomHeroData();
    // 初始化显示
    loadCurrentBanConfig();
    updateBanHeroDisplay();
  }, 500);
});
</script>


<!-- ============ 自定义英雄选择器（第一版风格） ============ -->
<div class="hero-selector-overlay" id="heroSelectorOverlay">
  <div class="hero-selector-header">
    <div class="hero-selector-back" onclick="closeCustomHeroSelector()">
      <svg viewBox="0 0 12 20" fill="none" width="14" height="14"><path d="M10 2L2 10L10 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      返回
    </div>
    <div class="hero-selector-title">选择禁用英雄</div>
    <button class="hero-selector-save" onclick="saveCustomHeroConfig()">保存</button>
  </div>
  <div class="hero-selector-body">
    <input type="text" class="hero-selector-search" id="heroSelectorSearch" placeholder="搜索英雄..." oninput="filterCustomHeroes()">
    <div class="hero-selector-count">已选择 <span id="heroSelectorCount">0</span> 个英雄</div>
    <div class="hero-selector-grid" id="heroSelectorGrid"></div>
  </div>
  <div class="hero-selector-actions">
    <button class="hero-selector-action-btn" onclick="selectAllCustomHeroes()">全选</button>
    <button class="hero-selector-action-btn" onclick="invertCustomHeroes()">反选</button>
    <button class="hero-selector-action-btn danger" onclick="clearCustomHeroes()">清空</button>
  </div>
</div>

<!-- ============ 我的房间（第一版UI） ============ -->
<div class="custom-picker-overlay" id="roomListOverlay">
  <div class="custom-picker-header">
    <div class="custom-picker-back" onclick="closeRoomList()">
      <svg viewBox="0 0 12 20" fill="none" width="14" height="14"><path d="M10 2L2 10L10 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      返回
    </div>
    <div class="custom-picker-title">我的房间</div>
    <div style="width:60px"></div>
  </div>
  <div class="custom-picker-body" id="roomListBody"></div>
</div>

</body>
</html>