feat: add hex trail puzzle, level editor, and visual design guide

design/components.css

@@ -0,0 +1,51 @@
+/* Semantic role bindings. Layout remains in style.css; colors come from tokens.css. */
+:root{color:var(--color-text-primary)}
+body,.game-shell{background:var(--color-background)!important;color:var(--color-text-primary)}
+button,input,select,dialog{color:var(--color-text-primary)}
+.level-ribbon,.moves-bubble strong,h1,h2,h3,.win-overlay h3,.hud-pill strong{color:var(--color-text-primary)}
+.moves-bubble>span,.level-heading h1,.board-instruction,.rotation-caption,.rotate-button,
+.board-tools>button,.field,.section-label,.metric-row,.muted,.eyebrow,.editor-footnote,
+.editor-footnote a,.editor-footnote a:visited,.selection-info,.editor-analysis p,.editor-analysis small,
+.editor-analysis>div>span,.editor-footnote,.dialog-note,.win-overlay p,dialog p,dialog li,
+.editor-panel .muted,.level-btn small,.tool-palette button,.directions button,.editor-rotation button,
+.editor-actions button,.editor-board-tools button,.text-button,.return-editor,.hud-pill small,
+.hud-pill>div>span{color:var(--color-text-secondary)}
+.board-instruction{font-size:12px;line-height:1.5;min-height:20px}
+.moves-bubble>span,.board-tools>button{font-size:12px}
+.win-overlay p,dialog p,dialog li{font-size:13px;line-height:1.75}
+.eyebrow{font-size:11px;letter-spacing:1px}
+.level-btn small{font-size:10px}
+[data-skin=secondary]{color:var(--color-text-primary)}
+button[data-skin=primary],[data-skin=primary],.primary,.level-btn.current,.level-btn.current small,
+.tool-palette button.active,.directions button.active{color:var(--color-on-primary)}
+button[data-skin=utility],[data-skin=utility]{color:var(--color-on-utility)}
+[data-skin=warning],.error{color:var(--color-warning)!important}
+.ui-plate{filter:none!important;box-shadow:none!important}
+.ui-icon img{filter:none!important;opacity:1!important}
+.game-icon{width:44px;height:44px;flex-shrink:0}
+.game-icon .ui-icon{width:28px;height:28px;margin:0;align-self:center}
+.game-icon.help-trigger .ui-icon{width:30px;height:30px}
+.tool-icon{width:56px;height:52px}
+.tool-icon .ui-icon{width:28px;height:28px}
+.rotate-button{color:var(--color-text-primary);min-width:92px;min-height:102px;gap:8px}
+.rotate-button>.ui-icon{width:62px;height:62px;filter:drop-shadow(0 1px 1px var(--color-utility))}
+.rotate-button b{font-size:13px}
+.rotate-button.hinted{filter:none;animation:hint-bounce .7s infinite alternate}
+.tool-icon small{color:var(--color-text-primary);font-size:9px;line-height:1.4;padding:3px 5px}
+.result-emblem .ui-icon{width:54px;height:54px;filter:drop-shadow(0 1px 1px var(--color-reward))}
+.level-btn .ui-icon{filter:drop-shadow(0 1px 1px var(--color-utility))}
+button:hover:enabled{filter:none}
+button:active:enabled{filter:brightness(.96);transform:scale(.94)}
+button:disabled{opacity:.55;cursor:default}
+button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
+.primary{min-height:48px;font-size:14px}
+.text-button{min-height:44px;font-size:12px}
+.level-btn{min-height:60px;font-size:18px}
+.dialog-close{width:36px;height:36px}
+.dialog-close .ui-icon{width:22px;height:22px}
+#sound-toggle{min-height:44px;padding:10px 14px;font-size:13px;margin-bottom:12px}
+.board-toast{font-size:12px;line-height:1.5}
+@media(min-width:700px){.editing .tool-palette{position:relative}}
+dialog::backdrop{background:var(--color-scrim);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
+@media(max-height:700px){.rotate-button>.ui-icon{width:52px;height:52px}.rotate-button{min-height:88px}.board-instruction{font-size:11px}}
+@media(prefers-reduced-motion:reduce){.rotate-button.hinted{animation:none}}