@@ -132,7 +132,7 @@
132132.workboard-game {
133133display: grid;
134134gap: 14px;
135-width: min(420px, calc(100vw - 44px));
135+width: min(620px, calc(100vw - 44px));
136136padding: 16px;
137137border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
138138border-radius: 10px;
258258line-height: 1;
259259}
260260261-.workboard-game__grid {
261+.workboard-game__scene {
262+position: relative;
263+display: block;
264+width: 100%;
265+min-height: min(58vh, 430px);
266+overflow: hidden;
267+border-radius: 8px;
268+background:
269+radial-gradient(
270+ circle at 24% 20%,
271+color-mix(in srgb, var(--accent) 24%, transparent),
272+ transparent 30%
273+ ),
274+linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #10171d), var(--bg));
275+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, transparent);
276+}
277+278+.workboard-game__canvas {
279+position: absolute;
280+inset: 0;
281+width: 100%;
282+height: 100%;
283+display: block;
284+}
285+286+.workboard-game__fallback {
287+position: absolute;
288+inset: 12%;
262289display: grid;
263290grid-template-columns: repeat(5, minmax(0, 1fr));
264-gap: 6px;
265-aspect-ratio: 1;
266-min-width: 0;
291+gap: 8px;
292+transform: perspective(720px) rotateX(58deg) rotateZ(-35deg);
293+transform-origin: center;
267294}
268295269-.workboard-game__cell {
270-display: grid;
271-place-items: center;
296+.workboard-game__scene--ready .workboard-game__fallback {
297+opacity: 0;
298+}
299+300+.workboard-game__accessible-grid {
301+position: absolute;
302+width: 1px;
303+height: 1px;
304+margin: -1px;
305+overflow: hidden;
306+clip: rect(0 0 0 0);
307+clip-path: inset(50%);
308+white-space: nowrap;
309+}
310+311+.workboard-game__fallback-tile {
272312min-width: 0;
273313border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
274314border-radius: 7px;
275315background: color-mix(in srgb, var(--bg) 84%, var(--panel) 16%);
276-color: var(--muted);
277-font-size: 0.84rem;
278-font-weight: 750;
279-line-height: 1;
316+box-shadow:
317+0 10px 0 color-mix(in srgb, #000 28%, transparent),
318+ inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
280319}
281320282-.workboard-game__cell--player {
321+.workboard-game__fallback-tile--player {
283322border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
284-background: color-mix(in srgb, var(--accent) 18%, var(--bg));
285-color: var(--accent);
323+background: color-mix(in srgb, var(--accent) 30%, var(--bg));
286324}
287325288-.workboard-game__cell--goal {
326+.workboard-game__fallback-tile--goal {
289327border-color: color-mix(in srgb, var(--ok) 48%, var(--border));
290-background: color-mix(in srgb, var(--ok) 14%, var(--bg));
291-color: var(--ok);
328+background: color-mix(in srgb, var(--ok) 24%, var(--bg));
292329}
293330294-.workboard-game__cell--blocker {
295-background:
296-linear-gradient(
297-135deg,
298- transparent 0 45%,
299-color-mix(in srgb, var(--danger) 46%, transparent) 45% 55%,
300- transparent 55% 100%
301- ),
302-color-mix(in srgb, var(--danger) 10%, var(--bg));
331+.workboard-game__fallback-tile--blocker {
332+background: color-mix(in srgb, var(--danger) 32%, var(--bg));
303333}
304334305335.workboard-game__controls {
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。