@font-face { font-family:'Noto Serif SC'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/games/klotski/fonts/ys-serif-local.woff2?v=96322799fa') format('woff2'); } @font-face { font-family:'Noto Sans SC'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/games/klotski/fonts/ys-sans-local.woff2?v=59a2c88e25') format('woff2'); } /* ============ 有数 · 华容道 适配层（「纸上棋局」三层版） ============ 载入顺序：app.css（方寸原样式，颜色已由 build.mjs 映射成有数色板）→ shell/series.css（系列色板 + ysg- 套件）→ 本文件。 · 首页 / 选择模式 / 关卡地图 / 循环华容道：直接用套件 ysg- 类名写的静态页面，这里只补几处。 · 三国 / 经典 / 数字 的对局仍由方寸打包件渲染：把它的深色大卡片拆成「纸底 + 左棋盘右工具」（手机上下排）， 闯关之路、目标说明、模式卡、页头页脚等次要面板隐藏（入口挪到选择页、关卡地图和弹层）。 · 棋盘、木块、人物画、红块等玩法内部配色不动。 */ html, body { background: var(--ys-paper); } body { margin: 0; color: var(--ys-ink); font-family: var(--ys-sans); } [hidden] { display: none !important; } .ys-loading { color: var(--ys-faint); font: 400 13px/1.6 var(--ys-sans); padding: 64px 0; text-align: center; margin: 0; } /* ---- 屏幕切换： 决定显示哪一屏（首屏由 里的小脚本先定，不闪） ---- */ #scr-home, #scr-select, #scr-levels, #scr-loopset, #scr-play { display: none; } html[data-ys-screen='home'] #scr-home, html[data-ys-screen='select'] #scr-select, html[data-ys-screen='levels'] #scr-levels, html[data-ys-screen='loopset'] #scr-loopset, html[data-ys-screen='play'] #scr-play { display: flex; } html[data-ys-track='loop'] #game, html:not([data-ys-track='loop']) #loop { display: none; } /* ---- 打包件的全局样式漏到套件上的几处 ---- */ .ysg-home-title { display: block; } /* 方寸给所有 h1 设了 flex */ :is(.ysg-home, .ysg-screen, .ysg-play, .ysg-sheet) :is(button, a):focus-visible { outline: 2px solid var(--ys-cinnabar); outline-offset: 2px; } .ysg-choice-thumb > svg, .ysg-tile > svg { display: block; } /* ---- 首页 ---- */ .ysg-home-note { margin-top: 18px; } /* ---- 选择页：模式卡缩略图 ---- */ .ysg-choice-thumb .number-track-icon.kl-mini { width: 30px; height: 30px; gap: 2px; color: var(--ys-ink2); } .ysg-choice-thumb .number-track-icon.kl-mini i { border-radius: 1px; } .kl-loop-icon i:last-child { opacity: 0.75; } .number-track-icon i.lp-me-cell { background: var(--ys-cinnabar); opacity: 1; } .kl-note { margin: 12px 2px 0; font: 400 12.5px/1.8 var(--ys-sans); color: var(--ys-faint); } #scr-loopset .ysg-section { margin-top: 28px; } #scr-loopset .ysg-section:first-child { margin-top: 0; } /* ---- 关卡地图：十阶各三关，手机两列、宽屏三到四列 ---- */ .kl-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .kl-stages .ysg-section { margin: 0; } .kl-stages .ysg-section-h { flex-wrap: wrap; row-gap: 2px; margin-bottom: 10px; } .kl-stages .ysg-section-h h2 { font-size: 15px; white-space: nowrap; } .kl-stages .ysg-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kl-stages .ysg-level { font-size: 17px; } .kl-stages .ysg-level-stars { bottom: 5px; } .kl-star { position: relative; display: inline-flex; color: var(--ys-line); } .kl-star.lit { color: var(--ys-cinnabar); } .kl-star-h { position: absolute; inset: 0; width: 50%; overflow: hidden; display: inline-flex; color: var(--ys-cinnabar); } @media (min-width: 720px) { .kl-stages { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 34px; } .kl-stages .ysg-level { font-size: 19px; } } /* ============ 对局屏：顶栏 ============ */ .kl-play-main { flex: 1; width: 100%; box-sizing: border-box; } .ysg-top-sub { overflow: hidden; text-overflow: ellipsis; } /* 窄屏副标题别压到右侧计时上 */ @media (max-width: 560px) { .kl-t-game { display: none; } } @media (max-width: 350px) { .kl-rules-btn { display: none; } } /* ============ 对局屏：方寸打包件（三国 / 经典 / 数字） ============ */ #game .main-wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; } /* 次要面板：闯关之路 → 关卡地图；目标与规则 → ?；画风 → ⚙；模式卡、九宫格/十六宫格 → 选择页；指南 → ⚙ 与首页 */ #game :is(.site-header, .mode-switch, .intro-row, .number-track-picker, .page-footer, .game-topbar, .art-style-row, .campaign-card, .objective-card, .replay-guide, .board-caption, .control-card > .section-kicker, .control-note, .pause-button, .stats-row > .stat:nth-child(3), .selected-info > small) { display: none !important; } /* 深色大卡片拆掉：卡片本身不出框，里面的块直接排进 .workspace 的网格 */ #game :is(.game-card, .game-inner, .side-panel, .control-card) { display: contents; } /* 手机 / 平板：一列——棋盘、当前提示、步数、工具、方向键 */ #game .workspace { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0; align-items: start; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 14px 32px; box-sizing: border-box; animation: ysg-in 0.35s var(--ysg-ease) both; } #game .board-frame { grid-column: 1 / -1; grid-row: 1; width: 100%; justify-self: center; box-sizing: border-box; } #game .classic-mode .board-frame { width: calc(100% - 22px); margin-right: 22px; } /* 右侧出口伸出 20px */ #game .live-notice { grid-column: 1 / -1; grid-row: 2; } #game .stats-row { grid-column: 1 / -1; grid-row: 3; } #game .action-row { grid-column: 1 / -1; grid-row: 4; } #game .next-stage-inline { grid-column: 1 / -1; grid-row: 5; } #game .selected-info { grid-column: 1; grid-row: 6; } #game .direction-pad { grid-column: 2; grid-row: 6; } #game .hint-feedback { grid-column: 1 / -1; grid-row: 7; } /* 提示详情放方向键后面：棋盘下的当前提示里已有一句 */ #game .board-meta { grid-column: 1 / -1; grid-row: 8; } /* 桌面：左棋盘（按屏高算大小）+ 右 320px 工具栏，当前提示在棋盘下 */ @media (min-width: 1024px) { #game .workspace { max-width: 1180px; grid-template-columns: auto 320px; grid-template-rows: repeat(6, auto) 1fr auto; column-gap: 48px; justify-content: center; padding: 28px 32px 40px; } #game .board-frame { grid-column: 1; grid-row: 1 / 8; width: var(--kl-board-w); } #game .classic-mode .board-frame { width: var(--kl-board-w); margin-right: 0; } #game .live-notice { grid-column: 1; grid-row: 8; } #game .stats-row { grid-column: 2; grid-row: 1; margin-top: 0; } #game .action-row { grid-column: 2; grid-row: 2; } #game .hint-feedback { grid-column: 2; grid-row: 3; } #game .next-stage-inline { grid-column: 2; grid-row: 4; } #game .selected-info { grid-column: 2; grid-row: 5; justify-self: start; } #game .direction-pad { grid-column: 2; grid-row: 5; justify-self: end; } #game .board-meta { grid-column: 2; grid-row: 6; } #game .three-mode { --kl-board-w: min(500px, calc((100svh - 230px) * 0.8)); } #game .classic-mode { --kl-board-w: min(560px, calc(100svh - 200px)); } #game .numbers-mode { --kl-board-w: min(560px, calc(100svh - 190px)); } } /* 当前提示（方寸的逐步播报）放在棋盘下 */ #game .live-notice { margin: 14px 0 0; padding: 0; border: 0; min-height: 22px; text-align: center; color: var(--ys-sub); font: 400 13px/1.7 var(--ys-sans); letter-spacing: 0.02em; } #game .three-mode .live-notice { margin-top: 42px; } /* 「曹操由此脱困」出口条压在棋盘框下沿外 */ /* 步数 · 最佳步数：两格计分板 */ #game .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 16px 0 0; border: 1px solid var(--ys-line); border-radius: var(--ysg-r); background: var(--ys-card); } #game .stats-row .stat { padding: 10px 6px; text-align: center; } #game .stats-row .stat + .stat { border-left: 1px solid var(--ys-line2); } #game .stats-row .stat > span { justify-content: center; margin: 0 0 5px; color: var(--ys-faint); font: 400 12px/1.2 var(--ys-sans); letter-spacing: 0.08em; } #game .stats-row .stat > span svg { display: none; } #game .stats-row .stat strong { color: var(--ys-ink); font: 700 21px/1.1 var(--ys-serif); letter-spacing: 0.02em; } #game .stats-row .best-moves strong { color: var(--ys-cinnabar); } #game .stats-row .stat small { color: var(--ys-faint); font: 400 12px/1 var(--ys-sans); margin-left: 3px; } /* 手机 / 平板：计分收成一行小字，棋盘按屏高封顶，工具和方向键尽量留在第一屏 */ @media (max-width: 1023px) { #game .stats-row { display: flex; justify-content: center; gap: 26px; margin-top: 6px; border: 0; background: none; } #game .stats-row .stat { display: flex; align-items: baseline; gap: 7px; padding: 0; } #game .stats-row .stat + .stat { border-left: 0; } #game .stats-row .stat > span { margin: 0; } #game .stats-row .stat strong { font-size: 18px; } #game .three-mode .board-frame { width: min(100%, max(260px, calc((100svh - 390px) * 0.8))); } #game .numbers-mode .board-frame { width: min(100%, max(260px, calc(100svh - 370px))); } #game .classic-mode .board-frame { width: min(calc(100% - 22px), max(260px, calc(100svh - 370px))); } } /* 撤回 / 重来 / 提示：套件的圆形工具按钮 */ #game .action-row { display: flex; justify-content: space-around; gap: 6px; margin-top: 18px; } #game .action-row > button { flex: 1 1 0; min-width: 0; min-height: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; color: var(--ys-ink2); font: 400 12.5px/1.3 var(--ys-sans); letter-spacing: 0.04em; white-space: nowrap; } #game .action-row > button > svg { width: 52px; height: 52px; padding: 15px; box-sizing: border-box; border: 1px solid var(--ys-line); border-radius: 50%; background: var(--ys-card); transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s; } #game .action-row > button:hover:enabled > svg { border-color: var(--ys-ink2); color: var(--ys-ink); } #game .action-row > button:active:enabled > svg { transform: scale(0.96); } #game .action-row > .primary-button { color: var(--ys-cinnabar); } #game .action-row > .primary-button > svg { border-color: rgba(166, 58, 43, 0.45); background: rgba(166, 58, 43, 0.05); } #game .action-row > button:disabled { opacity: 0.4; } /* 提示结果、通关后的「查看评价」、底部小字 */ #game .hint-feedback { margin-top: 16px; padding: 12px 14px; background: var(--ys-card); border: 1px solid var(--ys-line); border-radius: var(--ysg-r); color: var(--ys-ink2); } #game .hint-feedback .hint-instruction svg { color: var(--ys-cinnabar); } #game .hint-feedback p { color: var(--ys-sub); margin: 6px 0 8px; } #game .hint-distance { color: var(--ys-faint); } #game .hint-distance strong { color: var(--ys-cinnabar); } #game .next-stage-inline { margin-top: 14px; min-height: 44px; border: 1px solid var(--ys-cinnabar); border-radius: var(--ysg-r); background: rgba(166, 58, 43, 0.05); color: var(--ys-cinnabar); font: 500 14px/1.3 var(--ys-sans); letter-spacing: 0.04em; } #game .board-meta { margin-top: 16px; color: var(--ys-faint); font: 400 12px/1.6 var(--ys-sans); } /* 选中的棋子 + 方向键（对局与循环华容道共用） */ :is(#game, #loop) .selected-info { margin: 18px 0 0; align-self: center; gap: 10px; } :is(#game, #loop) .selected-info > span:nth-child(2) { color: var(--ys-faint); font: 400 12px/1.4 var(--ys-sans); } :is(#game, #loop) .selected-info strong { color: var(--ys-ink); font: 600 16px/1.3 var(--ys-serif); letter-spacing: 0.04em; } :is(#game, #loop) .direction-pad { margin-top: 18px; grid-template-rows: repeat(2, 44px); grid-template-columns: repeat(3, 46px); gap: 6px; } :is(#game, #loop) .direction-button { background: var(--ys-card); border: 1px solid var(--ys-line); border-radius: var(--ysg-r); color: var(--ys-ink2); } :is(#game, #loop) .direction-button:hover:enabled { border-color: var(--ys-ink2); background: var(--ys-card); color: var(--ys-ink); } :is(#game, #loop) .direction-button:disabled { background: transparent; opacity: 0.45; } :is(#game, #loop) .pad-center { color: var(--ys-mute); } /* ============ 方寸的对话框（规则 / 通关 / 新手指南）：外观同套件 Sheet ============ */ [data-slot='dialog-overlay'] { background: rgba(42, 37, 33, 0.38) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .game-dialog { background: var(--ys-paper) !important; color: var(--ys-ink); border: 1px solid var(--ys-line); border-radius: 12px !important; box-shadow: 0 30px 70px -30px rgba(42, 37, 33, 0.55) !important; font-family: var(--ys-sans); padding: 26px 24px 22px; } .game-dialog [data-slot='dialog-title'] { font: 700 19px/1.4 var(--ys-serif); letter-spacing: 0.08em; color: var(--ys-ink); } .game-dialog [data-slot='dialog-description'] { font: 400 14px/1.8 var(--ys-sans); color: var(--ys-sub); } .game-dialog .dialog-eyebrow { font: 500 12px/1.4 var(--ys-sans); letter-spacing: 0.14em; color: var(--ys-cinnabar); } .game-dialog .dialog-close { top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--ys-faint); } .game-dialog .dialog-close:hover { background: var(--ys-card); color: var(--ys-ink); } .game-dialog .dialog-rules p { font: 400 14px/1.8 var(--ys-sans); color: var(--ys-sub); } .game-dialog .dialog-rules strong { color: var(--ys-ink); font-weight: 600; } .game-dialog .primary-button { min-height: 48px; border-radius: var(--ysg-r); background: var(--ys-cinnabar); border: 1px solid var(--ys-cinnabar); color: #fbf8f1; font: 700 16px/1.2 var(--ys-serif); letter-spacing: 0.1em; box-shadow: 0 12px 22px -16px rgba(140, 47, 34, 0.85); } .game-dialog .primary-button:hover:enabled { background: var(--ys-cinnabar-dark); border-color: var(--ys-cinnabar-dark); } /* 通关：照套件 ResultPanel —— 星、标题、评语、三格成绩、主按钮在上 */ .win-dialog { width: min(100% - 32px, 400px); max-width: none; gap: 10px; padding: 30px 24px 22px; } .win-dialog .rating-stars { gap: 8px; padding: 2px 0 0; } .win-dialog .rating-star, .win-dialog .rating-star svg { width: 40px; height: 40px; } .win-dialog .star-outline { color: var(--ys-line); fill: #efe8d8; } .win-dialog .star-fill svg { color: var(--ys-cinnabar-dark); fill: var(--ys-cinnabar); } .win-dialog .review-distinction { background: rgba(166, 58, 43, 0.06); border-color: rgba(166, 58, 43, 0.3); color: var(--ys-cinnabar); font: 500 13px/1.4 var(--ys-sans); } .win-dialog .independent-reward { color: var(--ys-green); font: 600 13.5px/1.5 var(--ys-sans); } .win-dialog [data-slot='dialog-title'] { font: 900 24px/1.3 var(--ys-serif); letter-spacing: 0.12em; } .win-dialog [data-slot='dialog-description'] { font: 400 16px/1.7 var(--ys-kai); color: var(--ys-ink2); letter-spacing: 0.06em; } .win-dialog .win-stats { margin: 4px 0; padding: 0; border: 1px solid var(--ys-line); border-radius: var(--ysg-r); background: var(--ys-card); } .win-dialog .win-stats > div { display: flex; flex-direction: column-reverse; align-items: center; padding: 12px 6px; } .win-dialog .win-stats > div + div { border-left-color: var(--ys-line2); } .win-dialog .win-stats strong { font: 700 20px/1.1 var(--ys-serif); color: var(--ys-ink); } .win-dialog .win-stats span { margin: 0 0 6px; font: 400 12px/1.2 var(--ys-sans); color: var(--ys-faint); letter-spacing: 0.08em; } .win-dialog .performance-review { background: var(--ys-card); border-color: var(--ys-line); border-radius: var(--ysg-r); } .win-dialog .performance-review > p, .win-dialog .review-encouragement p { color: var(--ys-ink2); font-size: 13.5px; } .win-dialog .review-encouragement svg { color: var(--ys-cinnabar); } .win-dialog :is(.next-stage-description, .review-reading-note, .hint-review-note) { font-family: var(--ys-sans); color: var(--ys-faint); } .win-dialog .completion-actions { display: flex; flex-direction: column-reverse; gap: 8px; } .win-dialog .completion-actions .primary-button { width: 100%; } .win-dialog .replay-stage-button { min-height: 42px; border: 1px solid var(--ys-line); border-radius: var(--ysg-r); background: var(--ys-card); color: var(--ys-ink2); font: 400 14px/1 var(--ys-sans); letter-spacing: 0.04em; } .win-dialog .replay-stage-button:hover { border-color: var(--ys-ink2); color: var(--ys-ink); background: var(--ys-card); } /* 新手指南 */ .tutorial-dialog { width: min(100% - 28px, 520px); max-width: none; } .tutorial-dialog [data-slot='dialog-title'] { font-size: 20px; } .tutorial-dialog .tutorial-stage { background: var(--ys-band); border-radius: var(--ysg-r); } .tutorial-dialog .primary-button { min-height: 42px; font-size: 14.5px; letter-spacing: 0.06em; } .tutorial-dialog .tutorial-progress li.current > span { background: var(--ys-ink); border-color: var(--ys-ink); } /* 暂停时棋盘上的遮罩（方寸自带，套件的暂停弹层盖在它上面） */ #game .board-overlay h2 { font-size: 24px; } /* ============ 弹层里的几样小东西 ============ */ .kl-set-p { margin: 0; font: 400 13.5px/1.8 var(--ys-sans); color: var(--ys-sub); } .kl-art-p { margin-bottom: 12px; } .kl-set-btns { display: flex; flex-wrap: wrap; gap: 8px; } .kl-set-btns .ysg-secondary { flex: 1 1 auto; } .kl-rules h3 { margin: 16px 0 4px; font: 700 15px/1.5 var(--ys-serif); letter-spacing: 0.06em; color: var(--ys-ink); } .kl-rules h3:first-child { margin-top: 2px; } .kl-rules p { margin: 0 0 8px; font: 400 14px/1.8 var(--ys-sans); color: var(--ys-sub); } .kl-rules strong { color: var(--ys-ink); font-weight: 600; } .kl-goal { display: flex; align-items: flex-start; gap: 14px; margin: 2px 0 12px; padding: 12px; border: 1px solid var(--ys-line); border-radius: var(--ysg-r); background: var(--ys-card); } .kl-goal .number-goal { width: 92px; flex: none; } .kl-goal p { margin: 0; font-size: 13.5px; } /* ============ 循环华容道 ============ */ .kl-loop { width: 100%; } .kl-loop .ysg-board { display: flex; justify-content: center; } .kl-loop .loop-frame { display: inline-block; padding: 10px; } .kl-loop .ysg-status { min-height: 22px; } .kl-scores { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--ys-line); border-radius: var(--ysg-r); background: var(--ys-card); } .kl-scores > div { padding: 10px 6px; text-align: center; } .kl-scores > div + div { border-left: 1px solid var(--ys-line2); } .kl-scores dt { font: 400 12px/1.2 var(--ys-sans); color: var(--ys-faint); letter-spacing: 0.08em; } .kl-scores dd { margin: 5px 0 0; font: 700 21px/1.1 var(--ys-serif); font-variant-numeric: tabular-nums; color: var(--ys-ink); } .kl-pad { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kl-pad .selected-info, .kl-pad .direction-pad { margin-top: 0; } .kl-pad .selected-info { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; } .kl-pad .selected-info > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; } .kl-pad .selected-info small { flex-basis: 100%; margin: 0; font: 400 11.5px/1.4 var(--ys-sans); color: var(--ys-faint); } .kl-pad .number-indicator { flex: none; width: 44px; height: 44px; font-size: 22px; } @media (max-width: 1023px) { .kl-scores { display: flex; justify-content: center; gap: 22px; border: 0; background: none; } .kl-scores > div { display: flex; align-items: baseline; gap: 7px; padding: 0; } .kl-scores > div + div { border-left: 0; } .kl-scores dd { margin: 0; font-size: 18px; } } .kl-loop .ysg-aside p { margin: 0 0 4px; } .kl-rot-up { transform: rotate(-90deg); } .kl-rot-down { transform: rotate(90deg); } .kl-rot-left { transform: rotate(180deg); } .kl-loop .direction-button svg { display: block; } .lp-board { position: relative; margin: 0 auto; background: var(--board-surface); border: 1px solid #a98c62; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 10px #00000080; } .lp-frame { position: absolute; border: 2px solid #f1d8aa; pointer-events: none; z-index: 2; border-radius: 3px; box-shadow: 0 0 0 1px #00000066, 0 0 18px #00000066; } .lp-tile { position: absolute; width: var(--cell); height: var(--cell); z-index: 3; display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', var(--ys-serif); font-weight: 700; font-size: calc(var(--cell) * 0.42); color: #624523; cursor: grab; will-change: transform; line-height: 1; } .lp-tile::before { content: ''; position: absolute; inset: 3px; border-radius: 4px; background-color: var(--bg, #ecd3a8); background-image: linear-gradient(130deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%); border: 1px solid #fff4d8; box-shadow: 0 3px #9b774d, 0 5px 6px #35241540, inset 0 0 0 2px #bd9b6740; } .lp-tile span { position: relative; z-index: 1; } .lp-tile.h0 { --bg: #eccdbf; } .lp-tile.h1 { --bg: #f0dfb2; } .lp-tile.h2 { --bg: #cfdac6; } .lp-tile.h3 { --bg: #cdd6df; } .lp-tile.h4 { --bg: #ded0dd; } .lp-tile.h5 { --bg: #e7dcc8; } /* 外圈影子：从另一边"探头"的数字，只画虚线框和淡金数字，不铺木色，免得像一圈暗块 */ .lp-tile.lp-ghost { opacity: 0.55; z-index: 1; cursor: pointer; color: #ddc499; } .lp-tile.lp-ghost::before { background: none; border: 1px dashed rgba(241, 216, 170, 0.45); box-shadow: none; } .lp-tile.lp-ghost:hover { opacity: 0.95; } .lp-tile.lp-ghost:hover::before { border-style: solid; background: rgba(241, 216, 170, 0.08); } .lp-tile.lp-moving { transition: transform 0.15s ease, opacity 0.15s ease; } .lp-tile.lp-sel::before { outline: 3px solid #daa850; outline-offset: -3px; filter: brightness(1.04); } .lp-tile.lp-placed span::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ys-green); margin: 3px auto 0; } .lp-tile.lp-pulse::before { animation: lp-pulse 0.55s ease 2; } @keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(252, 239, 177, 0.9); } 100% { box-shadow: 0 0 0 12px rgba(252, 239, 177, 0); } } .lp-tile.lp-me { color: #fff3ea; } .lp-tile.lp-me::before { background-color: #b52e2c; background-image: linear-gradient(110deg, #d95b47, #b52e2c 65%, #d64d3c); border-color: #ffc2a2; box-shadow: 0 3px #7f2923, 0 5px 6px #24150f66, inset 0 0 0 2px #942b2655; } .lp-tile.lp-me::after { content: '你'; position: absolute; right: 7px; top: 5px; z-index: 1; font-family: var(--ys-sans); font-weight: 400; font-size: calc(var(--cell) * 0.2); color: rgba(255, 243, 234, 0.85); line-height: 1; } .lp-tile.lp-me.lp-placed span::after { background: #fff3ea; } .lp-tile.lp-lane.lp-real::before { box-shadow: 0 3px #9b774d, 0 5px 6px #35241540, inset 0 0 0 2px #a63a2b99; } .lp-tile.lp-ghost.lp-off { opacity: 0.16; cursor: default; } .lp-tile.lp-ghost.lp-off:hover { opacity: 0.16; } .lp-tile.lp-ghost.lp-off:hover::before { border-style: dashed; background: none; }