/* ============================================================================= * 秦弈 · 程序化 3D 中国象棋 —— 秦式深色 UI 皮肤 * art-director (林绘澄) · styles/main.css * * 设计与实现约束： * - 颜色严格对齐 src/core/constants.js 的 PALETTE.CSS（3D 与 UI 同源）。 * - 全部 DOM 钩子名对齐已实现 index.html / hud.js / controls.js / * scene.js / effects.js 中实际 querySelector 的 id 与 class。 * - index.html 已在 内联防线兜底样式，本文件在其后加载， * 负责"美化覆盖"——布局定位（position/top/left/z-index）与 index 内联 * 兜底保持一致，仅叠加秦式视觉（底色 / 描边 / 阴影 / 字体 / 过渡）。 * - 零外部资源：仅系统字体栈，无任何 .ttf/.woff/图片。 * * 已实现 DOM 结构（index.html）— 浮动面板，非网格： * #canvas-container > canvas.game-canvas * #loading-screen > .loading-inner > .loading-title / .loading-bar>.loading-fill * / .loading-text / .loading-error * #hud (左上浮动) > .turn-indicator(.turn-swatch/.turn-label/.turn-meta) * / .hud-timer / .captured-row(.captured-label + .captured-red/.captured-black) * .check-banner (顶部居中) * #move-log (右上浮动) > .panel-header / .move-log-scroll>.move-log-list / .move-log-empty * #controls (底部居中) > .control-field>select#select-difficulty / #btn-* (.btn) * #game-over > .game-over-panel(.game-over-close/.game-over-title/.game-over-detail * /.game-over-stats>.stat-row>.stat-k+.stat-v / #btn-again) * .help-toggle (右下) / .help-panel(右抽屉) > .help-content * #toast-container > .toast.toast-* * (#check-flash 由 effects.js 动态注入 body) * ========================================================================== */ /* --------------------------------------------------------------------------- * 0. 设计令牌（Design Tokens）—— 与 PALETTE.CSS 完全一致 * ------------------------------------------------------------------------- */ :root { --bg: #0a0b0e; --xuan-hei: #14161a; --xuan-hei-light:#272b33; --chi-hong: #b0281f; --chi-hong-light:#d8483a; --qing-tong: #6f7d63; --qing-tong-dark:#3f4a3a; --liu-jin: #c9a227; --liu-jin-light: #e8cf72; --parchment: #e6dcc3; --ink: #0f1013; --side-red: #d8483a; --side-black: #c9ccd4; --check: #ff2b1d; --ok: #6fd6a8; --panel-bg: rgba(16, 17, 21, 0.86); --panel-bg-solid:#101115; --panel-border: rgba(201, 162, 39, 0.42); --panel-border-soft: rgba(201, 162, 39, 0.18); --hairline: rgba(201, 162, 39, 0.14); --text: #e8e3d6; --text-dim: #9a958a; --text-faint: #6b6760; --shadow-1: 0 2px 8px rgba(0,0,0,0.45); --shadow-2: 0 8px 28px rgba(0,0,0,0.55); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --font-num: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); } /* --------------------------------------------------------------------------- * 1. 基础重置 * ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; } button { font-family: inherit; color: inherit; cursor: pointer; } kbd { font-family: var(--font-num); font-size: 11px; background: rgba(201,162,39,0.18); border: 1px solid rgba(201,162,39,0.4); border-radius: 5px; padding: 1px 7px; color: var(--liu-jin-light); } /* =========================================================================== * 2. 3D 视口（#canvas-container） * ========================================================================= */ #canvas-container { position: fixed; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 18%, #15171d 0%, #0a0b0e 60%, #050608 100%); } canvas.game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; /* 触控旋转/缩放手势不触发页面滚动 */ } /* =========================================================================== * 3. 左上 HUD 浮动卡（#hud） * ========================================================================= */ #hud { position: fixed; top: 14px; left: 14px; z-index: 20; display: flex; flex-direction: column; gap: 8px; pointer-events: none; /* 卡片不挡点击，子元素各自开启 */ width: 232px; } #hud > * { pointer-events: auto; } .hud-timer { align-self: flex-start; font-family: var(--font-num); font-size: 12px; color: var(--text-dim); letter-spacing: .5px; padding: 2px 0; } /* —— 当前行棋方指示 —— */ .turn-indicator { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--panel-bg); border: 1px solid var(--panel-border-soft); box-shadow: var(--shadow-1); transition: border-color .3s var(--ease); } .turn-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--side-red); transition: background .3s var(--ease), box-shadow .3s var(--ease); } .turn-label { font-weight: 600; letter-spacing: .06em; } .turn-meta { font-size: 12px; color: var(--text-dim); } .turn-indicator.turn-flip { animation: turnFlip .42s var(--ease); } @keyframes turnFlip { 0% { transform: translateY(-3px); opacity: .4; } 60% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .turn-indicator.is-red { border-color: rgba(216,72,58,0.6); } .turn-indicator.is-black { border-color: rgba(201,204,212,0.5); } /* —— 被吃子陈列 —— */ .captured-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-md); background: var(--panel-bg); border: 1px solid var(--panel-border-soft); box-shadow: var(--shadow-1); } .captured-label { font-size: 11px; letter-spacing: 2px; color: var(--text-faint); } .captured-red, .captured-black { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; } .captured-none { color: var(--text-faint); font-size: 13px; } .captured-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 4px; font-size: 12px; font-weight: 700; border: 1px solid transparent; } .captured-chip.is-red { color: #ffd9d0; background: rgba(176,40,31,0.32); border-color: rgba(255,90,78,0.4); } .captured-chip.is-black { color: #d8d2c2; background: rgba(28,31,38,0.6); border-color: rgba(201,204,212,0.3); } /* =========================================================================== * 4. 将军横幅（.check-banner，顶部居中固定） * ========================================================================= */ .check-banner { position: fixed; top: 8%; left: 50%; transform: translateX(-50%); z-index: 60; font-weight: 800; letter-spacing: .4em; font-size: 30px; color: #fff; background: linear-gradient(90deg, #ff3b2e, #b0281f); border: 1px solid #ff7a5c; border-radius: 999px; padding: 6px 22px; box-shadow: 0 0 18px rgba(255,43,29,0.55); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .check-banner.is-visible { opacity: 1; animation: checkPulse 1.1s ease-in-out infinite; } @keyframes checkPulse { 0%,100% { box-shadow: 0 0 14px rgba(255,43,29,0.45); } 50% { box-shadow: 0 0 28px rgba(255,43,29,0.85); } } /* =========================================================================== * 5. 右侧走子记录（#move-log，右上浮动） * ========================================================================= */ #move-log { position: fixed; top: 14px; right: 14px; z-index: 20; width: 240px; max-height: 72vh; display: flex; flex-direction: column; background: var(--panel-bg); border: 1px solid var(--panel-border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden; backdrop-filter: blur(4px); } .panel-header { padding: 8px 12px; font-weight: 700; letter-spacing: 2px; color: var(--liu-jin-light); border-bottom: 1px solid var(--hairline); } .move-log-scroll { overflow-y: auto; padding: 6px 8px; scrollbar-width: thin; scrollbar-color: var(--qing-tong-dark) transparent; } .move-log-scroll::-webkit-scrollbar { width: 8px; } .move-log-scroll::-webkit-scrollbar-thumb { background: var(--qing-tong-dark); border-radius: 4px; } .move-log-list { list-style: none; margin: 0; padding: 0; } .move-row { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: center; gap: 6px; padding: 3px 4px; font-size: 13px; font-variant-numeric: tabular-nums; } .move-no { color: var(--text-faint); text-align: right; } .move-cell { padding: 2px 6px; border-radius: 4px; cursor: pointer; transition: background .15s var(--ease); } .move-cell:hover { background: rgba(201,162,39,0.12); } .move-cell.is-empty { color: var(--text-faint); cursor: default; } .move-cell.is-active { background: rgba(216,72,58,0.22); box-shadow: inset 0 0 0 1px rgba(216,72,58,0.5); } .move-red { color: var(--side-red); } .move-black { color: var(--side-black); } .move-log-empty { padding: 12px; color: var(--text-faint); font-size: 12px; text-align: center; } /* =========================================================================== * 6. 底部控制栏（#controls）+ 按钮 * 钩子：#btn-restart #btn-undo #btn-reset-view #btn-flip * #btn-top #btn-sound #btn-ai #btn-resign · #select-difficulty * .btn .btn-primary .btn-danger · .btn-label · .control-field * 状态：.is-armed .is-disabled .is-off .is-on .is-busy * ========================================================================= */ #controls { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 8px 10px; max-width: 94vw; background: var(--panel-bg); border: 1px solid var(--panel-border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-2); backdrop-filter: blur(4px); } .btn, #btn-restart, #btn-undo, #btn-reset-view, #btn-flip, #btn-top, #btn-sound, #btn-ai, #btn-resign { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid rgba(201,162,39,0.45); background: rgba(201,162,39,0.14); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); } .btn:hover, #btn-restart:hover, #btn-undo:hover, #btn-reset-view:hover, #btn-flip:hover, #btn-top:hover, #btn-sound:hover, #btn-ai:hover, #btn-resign:hover { border-color: var(--liu-jin); background: rgba(201,162,39,0.28); box-shadow: 0 0 10px rgba(201,162,39,0.18); } .btn:active, #btn-restart:active, #btn-undo:active, #btn-reset-view:active, #btn-flip:active, #btn-top:active, #btn-sound:active, #btn-ai:active, #btn-resign:active { transform: translateY(1px); } .btn-primary { background: rgba(201,162,39,0.32); border-color: var(--liu-jin); } .btn-danger { background: rgba(176,40,31,0.3); border-color: rgba(255,90,78,0.6); } .btn .btn-label, .btn-label { font-weight: 600; } /* 状态变体 */ .is-armed { border-color: var(--check) !important; background: rgba(255,43,29,0.85) !important; color: #fff !important; box-shadow: 0 0 14px rgba(255,43,29,0.5) !important; } .is-disabled, .btn:disabled, .is-disabled:hover, .btn:disabled:hover { opacity: .42; cursor: not-allowed; border-color: var(--hairline); box-shadow: none; } .is-off { opacity: .7; } .is-on { border-color: var(--qing-tong); color: var(--liu-jin-light); background: linear-gradient(180deg, #20271e, #161b14); } .is-busy { position: relative; overflow: hidden; } .is-busy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(201,162,39,0.12) 0 6px, transparent 6px 12px); animation: busyMove 1s linear infinite; pointer-events: none; } @keyframes busyMove { to { background-position: 17px 0; } } /* 难度选择 */ .control-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .control-field.is-disabled { opacity: .42; pointer-events: none; } #select-difficulty { height: 34px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid rgba(201,162,39,0.45); background: #181a1f; color: var(--text); font-size: 13px; } #select-difficulty:focus-visible { outline: 2px solid var(--liu-jin); } /* =========================================================================== * 7. 帮助（.help-toggle 右下固定 / .help-panel 右抽屉） * ========================================================================= */ .help-toggle { position: fixed; bottom: 14px; right: 14px; z-index: 30; /* .btn 基础样式已提供外观；此处固定定位 */ } .help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(360px, 90vw); background: rgba(16,17,21,0.97); border-left: 1px solid var(--panel-border); box-shadow: -10px 0 40px rgba(0,0,0,0.5); padding: 22px 20px; overflow-y: auto; transform: translateX(100%); transition: transform .28s var(--ease); } .help-panel.is-open { transform: translateX(0); } .help-content { font-size: 13px; } .help-section { padding: 8px 0; border-top: 1px solid var(--hairline); } .help-section:first-child { border-top: 0; } .help-title { color: var(--liu-jin-light); letter-spacing: .1em; margin: 4px 0 8px; font-size: 15px; } .help-rule { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.5; border-bottom: 1px dashed rgba(201,162,39,0.15); } .help-piece { flex: 0 0 64px; color: #ffd9d0; font-weight: 700; text-align: right; } .help-desc { color: var(--text-dim); } .help-desc b { color: var(--parchment); } .help-key-row { display: flex; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; color: var(--text-dim); } .help-key-row kbd { flex: 0 0 auto; } /* =========================================================================== * 8. Toast 浮层（#toast-container，z=90，不挡点击） * ========================================================================= */ #toast-container { position: fixed; left: 50%; bottom: 25%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { pointer-events: none; max-width: 80vw; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(16,17,21,0.94); border: 1px solid var(--panel-border); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .26s var(--ease), transform .26s var(--ease); text-align: center; } .toast.is-in { opacity: 1; transform: translateY(0) scale(1); } .toast.is-out { opacity: 0; transform: translateY(-8px) scale(.97); } .toast-info { border-color: rgba(201,162,39,0.5); } .toast-success { border-color: rgba(111,214,168,0.55); color: var(--ok); } .toast-warn { border-color: rgba(232,207,114,0.7); color: var(--liu-jin-light); } .toast-error { border-color: var(--check); color: #ff9a8f; } .toast-check { border-color: var(--check); color: #fff; background: linear-gradient(90deg, #b0281f, #ff3b2e); box-shadow: 0 0 22px rgba(255,43,29,0.5); } /* =========================================================================== * 9. 结算浮层（#game-over，z=80，模态） * ========================================================================= */ #game-over { position: fixed; inset: 0; z-index: 80; display: none; /* 由 .is-visible 切换为 flex（对齐 hud.js） */ align-items: center; justify-content: center; background: rgba(5,6,8,0.66); backdrop-filter: blur(3px); } #game-over.is-visible { display: flex; } .game-over-panel { position: relative; width: min(440px, 88vw); padding: 26px 28px; border-radius: var(--r-lg); background: rgba(16,17,21,0.96); border: 1px solid var(--panel-border); box-shadow: var(--shadow-2); text-align: center; transform: translateY(12px) scale(.97); transition: transform .3s var(--ease); } #game-over.is-visible .game-over-panel { transform: translateY(0) scale(1); } .game-over-title { margin: 4px 0 10px; font-size: 28px; font-weight: 800; letter-spacing: .2em; color: var(--liu-jin-light); text-shadow: 0 0 16px rgba(201,162,39,0.3); } #game-over.tone-win .game-over-title, .game-over-panel.tone-win .game-over-title { color: var(--ok); text-shadow: 0 0 16px rgba(111,214,168,0.4); } #game-over.tone-lose .game-over-title, .game-over-panel.tone-lose .game-over-title { color: #ff9a8f; text-shadow: 0 0 16px rgba(255,43,29,0.4); } .game-over-detail { color: var(--text-dim); margin: 0 0 14px; } .game-over-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; padding: 14px 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--hairline); border-radius: var(--r-md); } .stat-row { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px dashed rgba(201,162,39,0.2); padding-bottom: 4px; } .stat-k { color: var(--text-faint); } .stat-v { color: var(--text); font-weight: 600; } .game-over-close { position: absolute; top: 10px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; } .game-over-close:hover { color: var(--text); border-color: var(--liu-jin); } /* =========================================================================== * 10. 加载遮罩（#loading-screen，z=100） * ========================================================================= */ #loading-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(120% 100% at 50% 40%, #15171d 0%, #0a0b0e 65%, #050608 100%); transition: opacity .7s var(--ease); } #loading-screen.is-hidden { opacity: 0; pointer-events: none; } .loading-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; } .loading-title { font-size: 26px; font-weight: 800; letter-spacing: .3em; color: var(--liu-jin-light); text-shadow: 0 0 24px rgba(201,162,39,0.4); } .loading-bar { width: min(320px, 60vw); height: 8px; border-radius: 999px; background: rgba(201,162,39,0.18); overflow: hidden; border: 1px solid rgba(201,162,39,0.35); } .loading-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--liu-jin), var(--liu-jin-light)); box-shadow: 0 0 12px rgba(201,162,39,0.6); transition: width .25s var(--ease); } .loading-text { font-size: 14px; letter-spacing: 2px; color: var(--text-dim); min-height: 1.2em; } .loading-error { display: none; /* showFatalError 会 display:block */ max-width: min(680px, 86vw); max-height: 40vh; overflow: auto; white-space: pre-wrap; font-family: var(--font-num); font-size: 12px; line-height: 1.5; color: #ff8a7a; background: rgba(40,12,10,0.6); border: 1px solid rgba(255,43,29,0.4); border-radius: 8px; padding: 10px 12px; } #loading-screen.has-error .loading-title { color: #ff9a8f; text-shadow: none; } /* =========================================================================== * 11. 将军全屏红脉冲（#check-flash，z=40，effects.js 兜底 inline 样式） * ========================================================================= */ #check-flash, .check-flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,40,25,0) 38%, rgba(255,40,25,0.85) 100%); } #check-flash.is-firing { animation: flashPulse .85s ease-out; } @keyframes flashPulse { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } /* =========================================================================== * 12. 小窗提示条（<640px / 高<480px，建议更大窗口） * ========================================================================= */ .size-warning { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 95; padding: 8px 14px; border-radius: 999px; background: rgba(16,17,21,0.92); border: 1px solid var(--panel-border-soft); color: var(--liu-jin-light); font-size: 12px; pointer-events: none; } /* =========================================================================== * 13. 无障碍：焦点可见 + 尊重减弱动效 * ========================================================================= */ :focus-visible { outline: 2px solid var(--liu-jin); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* =========================================================================== * 14. 响应式 * 对齐 ux-spec §1.4：实际 DOM 按钮为纯文字（无图标字体），故"图标化" * 不可行——降级策略改为收窄面板 / 缩小按钮内边距 / 允许控制栏换行。 * ========================================================================= */ @media (max-width: 1199px) { #move-log { width: 200px; } #hud { width: 216px; } .btn, #btn-restart, #btn-undo, #btn-reset-view, #btn-flip, #btn-top, #btn-sound, #btn-ai, #btn-resign { padding: 0 9px; font-size: 12px; } #controls { gap: 6px; padding: 6px 8px; } } @media (max-width: 900px) { #move-log { width: 184px; max-height: 60vh; } #hud { width: 200px; } .check-banner { font-size: 24px; letter-spacing: .25em; padding: 5px 16px; } .help-panel { width: min(320px, 92vw); } #controls { max-width: 96vw; } } @media (max-width: 639px), (max-height: 479px) { /* 不阻断游戏，仅提示；视觉仍可玩 */ #hud { top: 8px; left: 8px; width: 180px; } #move-log { top: 8px; right: 8px; width: 160px; } #controls { bottom: 8px; gap: 5px; padding: 5px 6px; } .btn, #btn-restart, #btn-undo, #btn-reset-view, #btn-flip, #btn-top, #btn-sound, #btn-ai, #btn-resign { height: 30px; padding: 0 7px; font-size: 11px; } .size-warning { display: block; } }