/* 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}}