/*
 * 暗影征途 UI 统一窗口规格 V1.0
 * 设计坐标：1600×900，所有显示端只做等比缩放和居中留白。
 */
:root {
    --ui-design-width: 1600px;
    --ui-design-height: 900px;
    --ui-scale: 1;
    --ui-safe-hud-x: 32px;
    --ui-safe-hud-y: 24px;
    --ui-safe-hud-width: 1536px;
    --ui-safe-hud-height: 852px;
    --ui-safe-modal-x: 80px;
    --ui-safe-modal-y: 60px;
    --ui-safe-modal-width: 1440px;
    --ui-safe-modal-height: 780px;
    --ui-safe-content-x: 160px;
    --ui-safe-content-y: 80px;
    --ui-safe-content-width: 1280px;
    --ui-safe-content-height: 740px;

    /* 公共可见主窗口基准：暂以成就面板的可见面板规格为统一标准。 */
    --common-visible-window-width: 1160px;
    --common-visible-window-height: 720px;
    --common-visible-content-width: 1110px;
    --common-visible-content-height: 670px;
    --common-visible-body-height: 598px;
    --common-visible-padding: 24px;

    /* P1-MAIN-UI-002：仓库窗口专用布局令牌。 */
    --warehouse-outer-width: var(--common-visible-window-width);
    --warehouse-outer-height: var(--common-visible-window-height);
    --warehouse-inner-width: var(--common-visible-content-width);
    --warehouse-inner-height: var(--common-visible-content-height);
    --warehouse-header-height: 60px;
    --warehouse-body-height: 548px;
    --warehouse-footer-height: 40px;
    --warehouse-column-width: 500px;
    --warehouse-column-gap: 16px;
    --warehouse-grid-height: 504px;
    --warehouse-item-size: 88px;
    --warehouse-column-item-gap: 15px;
    --warehouse-row-item-gap: 12px;

    /* P1-MAIN-UI-003：设置窗口固定规格与内部网格。 */
    --settings-outer-width: var(--common-visible-window-width);
    --settings-outer-height: var(--common-visible-window-height);
    --settings-padding: var(--common-visible-padding);
    --settings-inner-width: var(--common-visible-content-width);
    --settings-inner-height: var(--common-visible-content-height);
    --settings-header-height: 56px;
    --settings-content-height: 540px;
    --settings-footer-height: 52px;
    --settings-sidebar-width: 160px;
    --settings-column-gap: 16px;
    --settings-panel-width: 934px;
    --settings-scrollbar-width: 8px;

    /* P1-MAIN-UI-004：技能训练窗口三栏固定规格。 */
    --skill-trainer-outer-width: 1160px;
    --skill-trainer-outer-height: 720px;
    --skill-trainer-padding: 24px;
    --skill-trainer-inner-width: 1112px;
    --skill-trainer-inner-height: 672px;
    --skill-trainer-header-height: 64px;
    --skill-trainer-body-height: 532px;
    --skill-trainer-footer-height: 52px;
    --skill-trainer-loadout-width: 272px;
    --skill-trainer-list-width: 400px;
    --skill-trainer-detail-width: 400px;
    --skill-trainer-column-gap: 20px;
    --skill-trainer-row-gap: 12px;
    --skill-trainer-panel-padding: 16px;
    --skill-trainer-panel-header-height: 36px;
    --skill-trainer-panel-content-height: 452px;
    --skill-slot-size: 68px;
    --skill-slot-gap: 18px;
    --skill-list-tabs-height: 40px;
    --skill-list-viewport-height: 400px;
    --skill-card-width: 368px;
    --skill-card-height: 92px;
    --skill-card-gap: 10px;
    --skill-detail-hero-height: 96px;
    --skill-detail-viewport-height: 280px;
    --skill-detail-action-height: 52px;

    /* P1-MAIN-UI-005：商城窗口固定规格与商品卡布局。 */
    --shop-outer-width: var(--common-visible-window-width);
    --shop-outer-height: var(--common-visible-window-height);
    --shop-padding: 24px;
    --shop-inner-width: var(--common-visible-content-width);
    --shop-inner-height: var(--common-visible-content-height);
    --shop-header-height: 64px;
    --shop-tabs-height: 44px;
    --shop-body-height: 476px;
    --shop-footer-height: 52px;
    --shop-section-gap: 12px;
    --shop-columns: 4;
    --shop-card-width: 206px;
    --shop-card-height: 180px;
    --shop-column-gap: 16px;
    --shop-row-gap: 16px;
    --shop-card-padding: 12px;
    --shop-card-hero-height: 58px;
    --shop-card-info-height: 42px;
    --shop-card-action-height: 40px;
    --shop-card-inner-width: 182px;
    --shop-card-inner-height: 156px;

    /* P1-MAIN-UI-006：附魔窗口双栏固定规格。 */
    --enchant-outer-width: var(--common-visible-window-width);
    --enchant-outer-height: var(--common-visible-window-height);
    --enchant-padding: 24px;
    --enchant-inner-width: var(--common-visible-content-width);
    --enchant-inner-height: var(--common-visible-content-height);
    --enchant-header-height: 64px;
    --enchant-body-height: 532px;
    --enchant-footer-height: 52px;
    --enchant-section-gap: 12px;
    --enchant-equipment-panel-width: 344px;
    --enchant-operation-panel-width: 548px;
    --enchant-column-gap: 20px;
    --enchant-panel-padding: 16px;
    --enchant-panel-header-height: 36px;
    --enchant-panel-content-height: 452px;
    --enchant-current-selection-height: 88px;
    --enchant-equipment-viewport-height: 352px;
    --enchant-equipment-card-height: 62px;
    --enchant-equipment-gap: 8px;
    --enchant-element-grid-height: 160px;
    --enchant-element-button-width: 160px;
    --enchant-element-button-height: 72px;
    --enchant-element-column-gap: 18px;
    --enchant-element-row-gap: 16px;
    --enchant-preview-height: 200px;
    --enchant-preview-header-height: 56px;
    --enchant-effect-viewport-height: 96px;
    --enchant-cost-row-height: 32px;

    /* P1-MAIN-UI-008：角色属性窗口固定规格与内部区域。 */
    --stats-outer-width: var(--common-visible-window-width);
    --stats-outer-height: var(--common-visible-window-height);
    --stats-padding: 24px;
    --stats-inner-width: var(--common-visible-content-width);
    --stats-inner-height: var(--common-visible-content-height);
    --stats-header-height: 56px;
    --stats-content-height: var(--common-visible-body-height);
    --stats-section-gap: 16px;
    --stats-column-gap: 16px;
    --stats-section-padding: 12px;
    --stats-row-height: 22px;

    /* P1-MAIN-UI-009：成就、称号、排行榜统一固定规格与内部区域。 */
    --honor-achievement-outer-width: var(--common-visible-window-width);
    --honor-achievement-outer-height: var(--common-visible-window-height);
    --honor-achievement-padding: 24px;
    --honor-achievement-inner-width: 1110px;
    --honor-achievement-inner-height: 670px;
    --honor-achievement-header-height: 56px;
    --honor-achievement-summary-height: 32px;
    --honor-achievement-filters-height: 40px;
    --honor-achievement-body-height: 518px;
    --honor-achievement-list-width: 652px;
    --honor-achievement-detail-width: 442px;
    --honor-achievement-column-gap: 16px;
    --honor-achievement-row-gap: 8px;
    --honor-title-outer-width: var(--common-visible-window-width);
    --honor-title-outer-height: var(--common-visible-window-height);
    --honor-title-padding: 24px;
    --honor-title-header-height: 56px;
    --honor-title-current-height: 52px;
    --honor-title-list-height: var(--common-visible-body-height);
    --honor-leaderboard-outer-width: var(--common-visible-window-width);
    --honor-leaderboard-outer-height: var(--common-visible-window-height);
    --honor-leaderboard-padding: 24px;
    --honor-leaderboard-inner-width: var(--common-visible-content-width);
    --honor-leaderboard-inner-height: var(--common-visible-content-height);
    --honor-leaderboard-header-height: 44px;
    --honor-leaderboard-status-height: 32px;
    --honor-leaderboard-note-height: 32px;
    --honor-leaderboard-tabs-height: 36px;
    --honor-leaderboard-content-height: 478px;
    --honor-leaderboard-footer-height: 18px;
    --honor-leaderboard-row-gap: 6px;

    --z-world: 0;
    --z-world-fx: 50;
    --z-hud: 100;
    --z-hud-menu: 120;
    --z-modal-mask: 1000;
    --z-modal: 1020;
    --z-secondary: 1200;
    --z-system-mask: 2000;
    --z-system: 2020;
    --z-toast: 3000;
    --z-cutscene: 5000;
    --z-loading: 9000;
    --z-debug: 9900;
}

html, body { overscroll-behavior: none; }

/* 主游戏只保留一个逻辑画布；移动端 class 仍由 mobile-shell 接管。 */
html:not(.mobile-mode) #game-container {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
html:not(.mobile-mode) #game-frame {
    width: var(--ui-design-width) !important;
    height: var(--ui-design-height) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    transform: scale(var(--ui-scale)) !important;
    transform-origin: center center !important;
}

/* 语义层根：暂不强行搬移既有 DOM，避免改变业务模块的事件和定位上下文。 */
#ui-layer-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-world);
    pointer-events: none;
    overflow: visible;
}
#ui-layer-root > [data-ui-layer] { position: absolute; inset: 0; pointer-events: none; }
#ui-modal-layer { z-index: var(--z-modal); }
#ui-secondary-layer { z-index: var(--z-secondary); }
#ui-system-layer { z-index: var(--z-system); }
#ui-toast-layer { z-index: var(--z-toast); }
#ui-cutscene-layer { z-index: var(--z-cutscene); }
#ui-loading-layer { z-index: var(--z-loading); }

/* 统一层级令牌，覆盖旧模块中的散落数值。 */
#player-overhead-layer { z-index: var(--z-world-fx) !important; }
#battle-hud { z-index: var(--z-hud) !important; }
.common-menu-bar { z-index: var(--z-hud-menu) !important; }
.ui-overlay,
.level-select-modal,
.modal,
.sell-confirm-modal,
.inventory-full-modal { z-index: var(--z-modal-mask) !important; }
.ui-window,
.modal-container,
.level-select-content,
#skill-trainer-modal .stx-shell { z-index: var(--z-modal) !important; }
.story-npc-mask,
.encyclopedia-details { z-index: var(--z-secondary) !important; }
.settings-modal-overlay,
.help-tutorial-overlay,
.help-panel-overlay,
.help-push-overlay { z-index: var(--z-system-mask) !important; }
#cloud-slot-name-overlay,
#leaderboard-window { z-index: var(--z-system-mask) !important; }
.notification,
.toast,
[data-ui-layer="toast"] { z-index: var(--z-toast) !important; }
.chapter-intro-overlay { z-index: var(--z-cutscene) !important; }
#__level_loading_mask__ { z-index: var(--z-loading) !important; }
#runtime-resume-overlay { z-index: var(--z-debug) !important; }
#title-modal-layer { z-index: var(--z-modal); }
#title-orientation-gate { z-index: var(--z-cutscene) !important; }

/* 主城固定窗口：目标尺寸见统一规格文档。 */
#stats-window > .stats-inner { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; }
#shop-window > .shop-inner { width: var(--shop-outer-width) !important; height: var(--shop-outer-height) !important; }
#warehouse-window > .warehouse-inner { width: var(--warehouse-outer-width) !important; height: var(--warehouse-outer-height) !important; }
#enchant-window > .enchant-inner { width: var(--enchant-outer-width) !important; height: var(--enchant-outer-height) !important; }
#shop-window.common-shop-window .common-shop-panel { width: var(--shop-outer-width) !important; height: var(--shop-outer-height) !important; max-width: none !important; max-height: none !important; }
#stats-window.common-stats-window { width: var(--ui-design-width) !important; height: var(--ui-design-height) !important; transform: translate(-50%, -50%) scale(var(--ui-scale)) !important; }
#stats-window.common-stats-window > .stats-inner { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; }
/* 装备/背包是“全视口根 + 居中逻辑画布”的双层窗口。
 * 1240×600 是内部内容规格，不能覆盖外层根节点，否则会把 fixed 画布
 * 的参照系改成左上角并造成裁切。 */
#inventory-window.merged-inventory-window {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
}
#inventory-window.merged-inventory-window > .merge-inventory-inner {
    position: fixed !important;
    left: 50vw !important;
    top: 50vh !important;
    width: 1838px !important;
    height: 1037px !important;
    margin: 0 !important;
    transform: translate3d(-50%, -50%, 0) scale(var(--ui-scale, 1)) !important;
    transform-origin: center center !important;
}

/* 通用/章节窗口预设：窗口本身按 1600×900 设计坐标，再由适配器等比缩放。 */
#settings-modal .settings-modal,
#settings-window.ui-window--settings {
    width: var(--settings-outer-width) !important;
    height: var(--settings-outer-height) !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}
#settings-modal .settings-modal { transform: scale(var(--ui-scale)); transform-origin: center center; }
#leaderboard-window > .encyclopedia-honor-shell,
#leaderboard-window > .leaderboard-content-shell { width: var(--honor-leaderboard-outer-width) !important; height: var(--honor-leaderboard-outer-height) !important; max-width: none !important; max-height: none !important; }
.common-honor-shell { width: var(--honor-achievement-outer-width) !important; height: var(--honor-achievement-outer-height) !important; max-width: none !important; max-height: none !important; transform: scale(var(--ui-scale)); transform-origin: center center; }
.common-honor-shell.title-shell { width: var(--honor-title-outer-width) !important; height: var(--honor-title-outer-height) !important; }
html:not(.mobile-mode) .common-honor-shell.title-shell .title-list { max-height: none !important; }
/* 未单独定稿的主窗口采用成就面板的可见尺寸；二级确认/教程弹窗保留各自语义尺寸。 */
html:not(.mobile-mode) .story-npc-window { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; max-width: none !important; max-height: none !important; padding: var(--common-visible-padding) !important; transform: scale(var(--ui-scale)); transform-origin: center center; box-sizing: border-box !important; }
html:not(.mobile-mode) .story-npc-window .story-npc-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
html:not(.mobile-mode) .ui-window--shrine { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; min-height: 0 !important; max-width: none !important; max-height: none !important; padding: var(--common-visible-padding) !important; transform: scale(var(--ui-scale)); transform-origin: center center; box-sizing: border-box !important; }
.ui-window--shrine-lore { width: 720px !important; height: 520px !important; }
html:not(.mobile-mode) .help-tutorial-modal { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; max-width: none !important; max-height: none !important; padding: 0 !important; box-sizing: border-box !important; transform: scale(var(--ui-scale)); transform-origin: center center; }
html:not(.mobile-mode) .help-panel { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; max-width: none !important; max-height: none !important; padding: var(--common-visible-padding) !important; transform: scale(var(--ui-scale)); transform-origin: center center; box-sizing: border-box !important; }
.help-push-modal { width: 460px !important; height: 320px !important; max-width: none !important; transform: scale(var(--ui-scale)); transform-origin: center center; }
html:not(.mobile-mode) #level-select-modal .level-select-content { width: var(--common-visible-window-width) !important; height: var(--common-visible-window-height) !important; max-width: none !important; max-height: none !important; padding: var(--common-visible-padding) !important; transform: scale(var(--ui-scale)); transform-origin: center center; box-sizing: border-box !important; }
#endless-select-modal .level-select-content { width: 460px !important; height: 360px !important; max-width: none !important; max-height: none !important; }
.modal-container-item { width: 460px !important; max-width: none !important; max-height: 600px !important; }
.modal-container-simple { width: 420px !important; max-width: none !important; }
.sell-confirm-content { width: 440px !important; height: 300px !important; max-width: none !important; }
.inventory-full-content { width: 440px !important; height: 300px !important; max-width: none !important; }
.modal-container-enchant { width: 520px !important; height: 420px !important; max-width: none !important; }
#skill-trainer-modal .stx-shell { width: var(--skill-trainer-outer-width) !important; height: var(--skill-trainer-outer-height) !important; max-width: none !important; max-height: none !important; box-sizing: border-box !important; }
.modal-container-item,
.modal-container-simple,
.modal-container-enchant,
.sell-confirm-content,
.inventory-full-content,
#skill-trainer-modal .stx-shell { transform: scale(var(--ui-scale)); transform-origin: center center; }

/* 核心 HUD、安全区与交互命中区。 */
#battle-hud { left: var(--ui-safe-hud-x) !important; top: 28px !important; width: 520px !important; }
.common-menu-bar { right: 32px !important; top: 28px !important; width: 152px !important; }
.common-menu-item { width: 128px !important; min-height: 48px !important; }
#progress-bar-container { top: 24px !important; width: 680px !important; max-width: none !important; }
#boss-health-bar-container { top: 64px !important; width: 840px !important; max-width: none !important; }
.ui-window-header,
.level-select-header { min-height: 56px; }
.ui-window-close,
.close-modal-btn,
.close-settings-btn,
.story-npc-close { min-width: 40px; min-height: 40px; }
.modal-actions button,
.settings-modal-footer button,
.story-npc-actions button { min-height: 44px; }

/* 电脑端核心栅格显式列数，避免 auto-fit 随视口变形。 */
.common-honor-shell .honor-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.merge-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* 预览/调试时可用 data-ui-debug 显示所有层根，不影响正式游戏。 */
html[data-ui-debug="1"] #ui-layer-root > [data-ui-layer] { outline: 1px dashed rgba(80, 210, 220, .28); }

/* 移动端保持原有触控壳的视口布局；公共令牌只共享语义，不强制桌面像素尺寸。 */
html.mobile-mode #stats-window.common-stats-window,
html.mobile-mode #inventory-window.merged-inventory-window {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
}
html.mobile-mode #stats-window.common-stats-window > .stats-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(780px, 92vw) !important;
    height: auto !important;
    max-height: 88vh !important;
    transform: none !important;
}
html.mobile-mode .common-honor-shell,
html.mobile-mode .common-honor-shell.title-shell {
    width: min(var(--honor-achievement-outer-width), calc(100vw - 24px)) !important;
    height: min(var(--honor-achievement-outer-height), calc(100vh - 24px)) !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
}
html.mobile-mode .ui-window--shrine,
html.mobile-mode .ui-window--shrine-lore,
html.mobile-mode .story-npc-window,
html.mobile-mode .help-tutorial-modal,
html.mobile-mode .help-panel,
html.mobile-mode .help-push-modal,
html.mobile-mode .modal-container-item,
html.mobile-mode .modal-container-simple,
html.mobile-mode .modal-container-enchant,
html.mobile-mode .sell-confirm-content,
html.mobile-mode .inventory-full-content,
html.mobile-mode #skill-trainer-modal .stx-shell,
html.mobile-mode #level-select-modal .level-select-content,
html.mobile-mode #endless-select-modal .level-select-content {
    width: auto !important;
    height: auto !important;
    max-width: min(92vw, 920px) !important;
    max-height: 88vh !important;
    transform: none !important;
}
html.mobile-mode #progress-bar-container { top: 20px !important; width: 80% !important; max-width: 600px !important; }
html.mobile-mode #boss-health-bar-container { top: 60px !important; width: 80% !important; max-width: 800px !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}