/* ============ Steam 桌面版 16:9 布局 — 仅在 html.steam-desktop 时生效 ============ */
/* 由 steam-desktop.js 在 IS_STEAM && innerWidth>=1100 时挂 class;窗口缩小自动摘除回退原布局 */
/* ---------- 标题页: 左侧主菜单 / 中央油画主视觉 / 右侧快捷面板 ---------- */
/* 标题+军衔小组件移到顶部中央, 让出画面中心的拿破仑主体 */
html.steam-desktop #screen-title { justify-content: flex-start; padding-top: 5vh; }
/* 未激活桌面布局时, 两个容器隐藏 (它们只在激活时装按钮) */
#sd-left, #sd-right { display: none; }
/* 左侧主菜单列: 竖排、左对齐、不贴边 */
html.steam-desktop #sd-left {
position: absolute; z-index: 4;
left: clamp(48px, 7vw, 150px); top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; gap: 16px; align-items: stretch;
}
html.steam-desktop #sd-left .btn-main {
margin: 0; width: clamp(240px, 20vw, 300px);
text-align: left; padding-left: 24px;
}
html.steam-desktop #sd-left .btn-main:hover { transform: translateX(6px); }
html.steam-desktop #sd-left .btn-main:active { transform: translateX(6px) scale(.97); }
/* 右侧快捷面板: 提上二级菜单入口 */
html.steam-desktop #sd-right {
position: absolute; z-index: 4;
right: clamp(40px, 5vw, 120px); top: 50%; transform: translateY(-50%);
width: clamp(230px, 19vw, 300px);
background: linear-gradient(180deg, rgba(26,20,9,.82), rgba(14,10,5,.9));
border: 1px solid rgba(216,167,42,.5); border-radius: 14px;
padding: 14px 14px 14px;
box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,225,150,.14);
display: flex; flex-direction: column; gap: 9px;
}
html.steam-desktop #sd-right-head {
color: #f0d48a; font-weight: 800; letter-spacing: 2px; font-size: 14px;
text-align: center; padding-bottom: 9px; margin-bottom: 1px;
border-bottom: 1px solid rgba(216,167,42,.35); text-shadow: 0 1px 4px #000;
}
html.steam-desktop #sd-right .btn-ghost {
width: 100%; margin: 0; text-align: left; padding: 10px 14px; font-size: 13.5px;
}
/* 成就进度徽标: 面板内改内联右浮, 不再悬出按钮角 */
html.steam-desktop #sd-right .btn-ghost .menu-badge {
position: static; float: right; margin-top: 1px; margin-left: 8px;
}
html.steam-desktop #sd-right .btn-ghost:hover:not(:active) { transform: translateX(-4px) scale(1.012); }
/* 桌面端把标题块的动画元素保持原样; 版本号/主标题不动 */
/* ---------- 战役选关页: 两栏 grid, 悬停加亮 ---------- */
html.steam-desktop #scn-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px; row-gap: 0;
width: 100%; max-width: 1120px; margin: 0 auto;
padding: 0 34px 26px;
align-content: start;
}
html.steam-desktop #scn-list .scn-chapter { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; }
html.steam-desktop #scn-list .scn-item { max-width: none; width: auto; margin: 11px 0; cursor: pointer; transition: filter .15s, transform .13s; }
html.steam-desktop #scn-list .scn-item:hover {
filter: brightness(1.2) saturate(1.06);
transform: translateY(-2px);
}
/* ============ 战斗界面 16:9 三栏 ============ */
/* 方形地图在宽屏下受高度限制, 两侧本是空白 —— 收窄容器不缩小地图, 空间改放常驻信息 */
html.steam-desktop #sd-bat-wrap {
display: flex; flex: 1; min-height: 0; gap: 0;
}
html.steam-desktop #sd-bat-wrap > #canvas-box { flex: 1; min-width: 0; }
html.steam-desktop #sd-bat-left,
html.steam-desktop #sd-bat-right {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 9px; overflow-y: auto; overflow-x: hidden;
background: linear-gradient(180deg, rgba(30,25,14,.96), rgba(20,17,10,.96));
border-color: #4a3f26; border-style: solid; border-width: 0;
scrollbar-width: thin; scrollbar-color: #6b5a34 transparent;
}
html.steam-desktop #sd-bat-left { width: clamp(240px, 19vw, 360px); border-right-width: 1px; }
html.steam-desktop #sd-bat-right { width: clamp(264px, 24vw, 470px); border-left-width: 1px; }
/* 部队列表: 手机上是横向滚动条, 桌面改竖排 */
html.steam-desktop #sd-bat-left #action-bar {
display: flex !important; flex-direction: column; gap: 5px;
overflow-x: hidden; overflow-y: visible; flex: none;
}
html.steam-desktop #sd-bat-left #action-bar > * { width: 100%; flex: none; }
html.steam-desktop #sd-bat-left #hud-sort-bar {
display: flex !important; gap: 5px; justify-content: center; flex: none;
}
/* 选中单位详情: 原本是浮在画布上的绝对定位卡片, 桌面改为侧栏常驻 */
html.steam-desktop #sd-bat-right #unit-card {
position: static !important; inset: auto !important;
display: block !important; pointer-events: auto;
width: 100%; font-size: 12.5px; line-height: 1.55;
}
html.steam-desktop #sd-bat-right #unit-card:not(.show) { opacity: .45; }
/* 辅助按钮在侧栏里排成整齐一列 */
html.steam-desktop #sd-bat-right > button {
display: block !important; width: 100%; margin: 0;
padding: 9px 10px; font-size: 13px; text-align: left;
}
html.steam-desktop #sd-bat-right #btn-terrain-legend,
html.steam-desktop #sd-bat-right #btn-counter-chart { font-size: 15px; text-align: center; }
/* 底部栏瘦身: 部队列表和辅助按钮已移走, 只留技能条 + 招募 + 结束回合 */
html.steam-desktop #bottom-bar { padding: 8px 14px; }
/* ---- 部队列表: 手机上是 40px 小方块, 桌面改成整行卡片 ---- */
html.steam-desktop #sd-bat-left #action-bar .ab-chip {
width: 100% !important; flex-direction: row !important; align-items: center;
justify-content: flex-start; gap: 11px; padding: 9px 13px; border-radius: 8px;
}
html.steam-desktop #sd-bat-left .ab-sym { font-size: 23px; flex: none; }
html.steam-desktop #sd-bat-left .ab-hp { flex: 1; min-width: 0; height: 9px; }
html.steam-desktop #sd-bat-left .ab-star { position: static; margin-left: auto; font-size: 13px; }
html.steam-desktop #sd-bat-left .ab-chip:hover:not(:active):not(.ab-sel) { transform: translateX(3px); }
/* ---- 未选中单位时不要留一个空卡片占位 ---- */
html.steam-desktop #sd-bat-right #unit-card:not(.show) { display: none !important; }
/* ---- 地形/克制两个图标按钮并排一行, 不占两整行 ---- */
html.steam-desktop #sd-bat-right #btn-terrain-legend,
html.steam-desktop #sd-bat-right #btn-counter-chart {
display: inline-block !important; width: calc(50% - 4px); font-size: 17px; text-align: center;
}
html.steam-desktop #sd-bat-right #btn-terrain-legend { margin-right: 6px; }
/* 侧栏标题感: 顶部一条金线, 和标题页面板呼应 */
html.steam-desktop #sd-bat-left,
html.steam-desktop #sd-bat-right { box-shadow: inset 0 3px 0 -1px rgba(201,162,60,.35); }
/* ---- 战报常驻右栏(手机上是浮层弹窗) ---- */
html.steam-desktop #sd-bat-right #log-panel {
position: static !important; display: flex !important; flex-direction: column;
width: 100% !important; max-height: none !important; flex: 1; min-height: 140px;
margin-top: 4px; overflow: hidden;
}
html.steam-desktop #sd-bat-right #log-list { flex: 1; overflow-y: auto; min-height: 0; }
html.steam-desktop #sd-bat-right #btn-log-close { display: none; } /* 常驻, 关闭按钮无意义 */
html.steam-desktop #sd-bat-right #log-filters { flex: none; }
/* ---- 任务目标 + 天气: 从拥挤的顶栏移到左栏顶部, 做成信息卡 ---- */
html.steam-desktop #sd-bat-left #hud-obj,
html.steam-desktop #sd-bat-left #hud-weather {
display: block !important; width: 100%; flex: none;
padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
background: rgba(58,48,26,.55); border: 1px solid #5a4f33; color: #e8dcbb;
}
html.steam-desktop #sd-bat-left #hud-obj:empty,
html.steam-desktop #sd-bat-left #hud-weather:empty { display: none !important; }
html.steam-desktop #sd-bat-left #hud-weather { text-align: center; }
/* 部队图标再大一点, 血条别喧宾夺主 */
html.steam-desktop #sd-bat-left .ab-sym { font-size: 26px; min-width: 30px; text-align: center; }
html.steam-desktop #sd-bat-left .ab-hp { max-width: 62%; }