/* 场景测试 (Scene Test, 原场景行走测试)
   ★★ 视觉语言与「场景图鉴 / 怪物图鉴 / 物件图鉴」统一 (用户 2026-09-30 报"UI风格也没改"):
      浅色页面框架 (白面板 12px 圆角 + 0 2px 10px 软阴影 / 主色 #2f6fa8 / 边框 #d8dee5)，
      3D 视口仍为暗色 (与场景图鉴的舞台同款径向渐变 —— 暗底才看得清地图)。
      布局占满页面宽度 (与场景图鉴一致)。
   2026-09-30 二轮:
      · 场景选择改成"搜索 + 分组列表"(原来是一个 400 项的下拉, 混进了 c/r/t 数据文件);
      · 手机端: 面板收成抽屉 (☰ 设置), 3D 视图占满首屏 + 左下虚拟摇杆。 */

.swalk-wrapper {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 14px 40px;
}
.swalk-title {
    font-size: 24px; font-weight: bold; letter-spacing: 6px; color: #2c3e50;
    text-align: center; margin-bottom: 4px;
}
.swalk-subtitle {
    font-size: 12px; color: #97a3b0; letter-spacing: 1px; line-height: 1.8;
    text-align: center; margin-bottom: 16px;
}
.swalk-subtitle a { color: #2f6fa8; text-decoration: none; }
.swalk-subtitle a:hover { text-decoration: underline; }

.swalk-layout {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: calc(100vh - 190px);
    min-height: 520px;
}

/* ---------- 左侧面板 ---------- */
.swalk-side {
    width: 248px;
    flex: 0 0 248px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}
.swalk-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 12px 14px;
}
.swalk-panel-grow { flex: none; }
.swalk-panel-h {
    font-size: 11px; color: #93a1ad; letter-spacing: 1px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.swalk-count { margin-left: auto; color: #b3bfc9; letter-spacing: 0; }

.swalk-input, .swalk-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8dee5;
    border-radius: 8px;
    color: #34495e;
    background: #fff;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    font-family: inherit;
}
.swalk-input:focus, .swalk-select:focus { border-color: #7fb3d5; box-shadow: 0 0 0 3px rgba(127,179,213,.18); }

/* 场景列表 (搜索 + 分组, 与场景图鉴的侧栏同款) */
.swalk-maplist { margin-top: 8px; overflow-y: auto; height: 258px; margin-right: -6px; padding-right: 4px; }
.swalk-group-h { font-size: 11px; color: #93a1ad; padding: 6px 6px 2px; letter-spacing: 1px; }
.swalk-mapitem {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 5px 8px; border-radius: 8px; color: #40505f; font-size: 12.5px;
    cursor: pointer; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swalk-mapitem:hover { background: #f2f7fd; color: #2c3e50; }
.swalk-mapitem.active { background: #2f6fa8; color: #fff; }
.swalk-mapitem.noCol { opacity: .55; }
.swalk-media-note { font-size: 11px; color: #b3bfc9; padding: 8px 6px; }

.swalk-grid2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px;
    font-size: 11px; color: #7b8894;
}
.swalk-grid2 label { display: flex; flex-direction: column; gap: 3px; }
.swalk-hint { font-size: 11px; color: #97a3b0; margin-top: 7px; line-height: 1.6; }

/* 动作条 (2026-09-30): 胶囊按钮; 招式类用虚线边与循环类区分; 选中 = 主色实心 */
.swalk-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.swalk-chip {
    border: 1px solid #d8dee5; background: #f7f9fb; color: #40505f;
    border-radius: 999px; font-size: 12px; padding: 5px 10px; cursor: pointer;
    font-family: inherit; line-height: 1.25; white-space: nowrap;
}
.swalk-chip:hover { border-color: #7fb3d5; background: #fff; color: #2c3e50; }
.swalk-chip.on { background: #2f6fa8; border-color: #2f6fa8; color: #fff; }
.swalk-chip-act { border-style: dashed; }
.swalk-chip-auto { font-weight: bold; }
/* PSOBB 动作面板 (2026-09-30 实机键位·三轮): 十字槽 (Enter/Tab/BS) 最重, hotbar (数字 1-9/0) 方角槽,
   空槽半透明 (实机面板未配置内容的槽按键无事发生) */
.swalk-chip-pal { background: #eaf2f9; border-color: #2f6fa8; color: #1f4d75; font-weight: bold; }
.swalk-chip-pal.on { background: #2f6fa8; color: #fff; }
.swalk-chip-hot { border-radius: 6px; background: #f2f6fa; }
.swalk-chip-empty { opacity: .5; border-style: dashed; cursor: default; }
.swalk-chip-empty:hover { border-color: #d8dee5; background: #f2f6fa; color: #40505f; }
/* 快捷栏副行 (Ctrl 按住显示, 实机行为) */
.swalk-subrow { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; margin-top: 3px; padding-top: 5px; border-top: 1px dashed #c4d4e2; }
.swalk-chip .k {
    display: inline-block; margin-left: 6px; padding: 0 5px;
    border-radius: 4px; background: #dde7f0; color: #3d5b76;
    font-size: 10px; font-style: normal; font-family: Consolas, monospace;
    border: 1px solid #c4d4e2; vertical-align: 1px;
}
.swalk-chip.on .k { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }

.swalk-check {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: 12px; color: #7b8894; cursor: pointer; line-height: 1.5;
}
.swalk-check input { accent-color: #2f6fa8; flex: 0 0 auto; }

.swalk-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #7b8894; margin-top: 8px;
}
.swalk-row input[type="range"] { flex: 1; min-width: 0; accent-color: #2f6fa8; }
.swalk-num { color: #40505f; font-size: 12px; min-width: 24px; text-align: right; font-family: Consolas, monospace; }

.swalk-btnrow { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.swalk-btn {
    background: #f7f9fb;
    border: 1px solid #d8dee5;
    color: #40505f;
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
}
.swalk-btn:hover { border-color: #7fb3d5; color: #2c3e50; background: #fff; }
.swalk-btn-main {
    width: 100%; margin-top: 9px; padding: 8px; font-size: 13px;
    background: #2f6fa8; border-color: #2f6fa8; color: #fff;
}
.swalk-btn-main:hover { background: #28608f; border-color: #28608f; color: #fff; }
.swalk-btn:disabled { opacity: .55; cursor: default; }

.swalk-help { font-size: 12px; color: #7b8894; }
.swalk-help-row { display: flex; gap: 8px; padding: 2px 0; line-height: 1.7; }
.swalk-help-row b {
    flex: 0 0 92px; color: #40505f; font-weight: normal;
    font-family: Consolas, monospace; font-size: 11px;
}
.swalk-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eef1f5; color: #b3bfc9; font-size: 11px; line-height: 1.7; }
.swalk-note-warn:empty { display: none; }
.swalk-note-warn { color: #a9702a; border-top-color: #f6ead8; }
.swalk-only-mobile { display: none; }
.swalk-only-touch { display: none; }

/* ---------- 右侧 3D ---------- */
.swalk-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
}
.swalk-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
}
.swalk-cur { color: #22303c; font-weight: bold; letter-spacing: 1px; }
.swalk-stats { color: #97a3b0; font-size: 12px; }
.swalk-stage {
    position: relative; flex: 1; min-height: 0;
    /* 3D 视口: 与场景图鉴同款暗色径向渐变 (地图自带天空/雾会覆盖它, 只在加载瞬间露出) */
    background: radial-gradient(120% 90% at 50% 15%, #3b4650 0%, #232a31 60%, #1a1f24 100%);
}
#swalk-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.swalk-loading, .scodex-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9fb0bf; font-size: 14px;
    background: rgba(26, 31, 36, .5);
    pointer-events: none;
}

/* ---------- 触屏摇杆 (手机) ---------- */
.swalk-stick {
    position: absolute;
    left: 16px;
    /* 避开 iPhone 的 home 指示条 */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 108px; height: 108px; border-radius: 50%;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.3);
    display: none;
    touch-action: none;
}
.swalk-stick i {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; background: rgba(255,255,255,.45);
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.swalk-stick.on i { background: rgba(127,179,213,.85); }

/* ---------- 手机: 视口右下角视角键 (拉近/拉远/俯视) ---------- */
.swalk-zoom {
    position: absolute;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: none;
    flex-direction: column;
    gap: 8px;
}
.swalk-zbtn {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.16);
    color: #fff; font-family: inherit; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: none; padding: 0;
}
.swalk-zbtn:active { background: rgba(127,179,213,.9); border-color: rgba(127,179,213,.9); }

/* ---------- 手机 / 窄屏 ---------- */
@media (max-width: 900px) {
    .swalk-wrapper { padding: 10px 10px 26px; }
    .swalk-title { font-size: 20px; letter-spacing: 3px; }
    .swalk-subtitle { margin-bottom: 10px; }
    /* 3D 视图优先: 侧栏收成抽屉, 默认收起 ⇒ 首屏就是可走的场景 */
    .swalk-layout { flex-direction: column-reverse; height: auto; min-height: 0; gap: 8px; }
    /* ★ 必须写 flex:none —— 基类的 flex:1 会把 height 顶掉 (flex-basis:0 优先), 舞台会被压到 min-height。
     *   高度用 60vh 与场景图鉴的手机版一致 (站点手机端页头很高, 用 100vh-xxx 会把舞台推到屏幕外)。 */
    .swalk-main { order: 1; flex: none; height: 60vh; min-height: 300px; }
    .swalk-side {
        order: 2; width: auto; flex: none;
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        max-height: 82vh; z-index: 60;
        background: #fff; padding: 12px 12px 22px;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 24px rgba(0,0,0,.22);
        transform: translateY(102%);
        transition: transform .22s ease;
        overflow-y: auto;
        gap: 8px;
    }
    .swalk-side.open { transform: translateY(0); }
    .swalk-only-mobile { display: inline-block; margin-left: auto; }
    .swalk-only-touch { display: flex; }
    .swalk-stick { display: block; }
    .swalk-zoom { display: flex; }
    .swalk-maplist { height: auto; max-height: 32vh; }
    /* 触屏: 加大点击目标 (44px 级) —— 手机上按钮/列表项按原来的尺寸太小 */
    .swalk-btn, .swalk-btn-main { padding: 11px 12px; }
    .swalk-chip { padding: 11px 14px; font-size: 13px; }
    .swalk-check { padding: 6px 0; }
    .swalk-mapitem { padding: 10px 8px; font-size: 13px; }
    .swalk-input, .swalk-select { padding: 10px; }
    .swalk-row { padding: 4px 0; }
    .swalk-row input[type="range"] { height: 28px; }
    .swalk-backdrop {
        position: fixed; inset: 0; background: rgba(20,26,36,.45); z-index: 55; display: none;
    }
    .swalk-backdrop.on { display: block; }
}
@media (max-width: 560px) {
    .swalk-help-row b { flex: 0 0 78px; }
    .swalk-stats { display: none; }
    .swalk-stats.swalk-keep { display: inline; }
}

/* ============================================================
 * 客户端 HUD 叠加层 + 界面素材画廊 (2026-09-30)
 * 素材 = 客户端 data.gsl 的原始 UI 贴图 (服务端 PRS→XVM→PNG)
 * ============================================================ */
.swalk-hud { position: absolute; inset: 0; pointer-events: none; display: none; }
.swalk-hud.on { display: block; }

/* 左下: 雷达 (radermapframe 素材 + 朝向指针) */
.swalk-hud-radar { position: absolute; left: 14px; bottom: 14px; width: 96px; height: 96px; opacity: .92; }
.swalk-hud-radar img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(150,110,255,.55)); }
.swalk-hud-radar i { position: absolute; left: 50%; top: 50%; width: 2px; height: 34px;
    margin-left: -1px; margin-top: -34px; transform-origin: 50% 100%;
    background: linear-gradient(to bottom, rgba(120,255,160,.95), rgba(120,255,160,.05)); }
.swalk-hud-radar-map { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
    font-size: 10px; color: #b9c8ff; text-shadow: 0 0 4px #000, 0 0 8px rgba(90,120,255,.6); white-space: nowrap; }

/* 右下: 动作面板 (PSO 三槽: 中/左/右 六边形; 图标用客户端 technic 素材) */
.swalk-hud-pal { position: absolute; right: 18px; bottom: 16px; width: 150px; height: 110px; }
.swalk-hud-hex { position: absolute; width: 56px; height: 56px;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: rgba(10, 14, 30, .72); border: 0; display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 4px rgba(120,160,255,.5)); }
.swalk-hud-hex img { width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; }
.swalk-hud-hex-c { left: 47px; top: 0; background: rgba(30, 46, 92, .8); }
.swalk-hud-hex-l { left: 0; top: 46px; }
.swalk-hud-hex-r { left: 94px; top: 46px; }
.swalk-hud-pal.alt .swalk-hud-hex-l, .swalk-hud-pal.alt .swalk-hud-hex-r { background: rgba(24, 60, 44, .82); }

/* 顶部: 加载提示 (nowloading) */
.swalk-hud-loading { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
    width: 220px; opacity: 0; transition: opacity .35s; }
.swalk-hud-loading img { width: 100%; image-rendering: pixelated; }
.swalk-hud-loading.on { opacity: .95; }

/* 侧栏: 界面素材画廊 */
.swalk-uigallery { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 270px; overflow: auto; }
.swalk-uiitem { width: 52px; height: 52px; border: 1px solid #d8dee5; border-radius: 6px; background: #101423;
    display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; padding: 2px; }
.swalk-uiitem:hover { border-color: #7fb3d5; box-shadow: 0 0 0 2px rgba(127,179,213,.25); }
.swalk-uiitem img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.swalk-uigroup-h { width: 100%; font-size: 11px; color: #7b8894; margin: 6px 0 0; }

/* 放大弹层 */
.swalk-ui-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.swalk-ui-modal.on { display: block; }
.swalk-ui-modal-bd { position: absolute; inset: 0; background: rgba(8, 10, 18, .72); }
.swalk-ui-modal-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: min(560px, 92vw); max-height: 88vh; overflow: auto;
    background: #101423; border: 1px solid #2a3752; border-radius: 10px; padding: 12px 14px 14px; color: #cfd8e6; }
.swalk-ui-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.swalk-ui-modal-x { border: 1px solid #2a3752; background: #182034; color: #cfd8e6; border-radius: 6px; cursor: pointer;
    font-size: 12px; padding: 2px 8px; font-family: inherit; }
.swalk-ui-modal-x:hover { border-color: #7fb3d5; }
.swalk-ui-modal-box img { display: block; margin: 0 auto; max-width: 100%; image-rendering: pixelated;
    background: repeating-conic-gradient(#171b28 0% 25%, #12151f 0% 50%) 50% / 16px 16px; }
.swalk-ui-modal-note { margin-top: 8px; font-size: 12px; color: #8b98a8; line-height: 1.5; }