.solver-color-tile { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--border-color, #747b88); border-radius: 5px; font: 700 1.1rem/1 system-ui; background: var(--surface, #fff); color: var(--text-color, #172130); cursor: pointer; }
.solver-color-tile[data-feedback="0"] { background: #596170; color: #fff; border-color: #596170; }
.solver-color-tile[data-feedback="1"] { background: #a76500; color: #fff; border-color: #a76500; }
.solver-color-tile[data-feedback="2"] { background: #247542; color: #fff; border-color: #247542; }
.solver-color-tile:focus-visible { outline: 3px solid var(--focus-color, #386ee7); outline-offset: 3px; }
.game-feedback-tile:has(.solver-color-tile) { background: transparent; border: 0; padding: 0; min-width: 0; }
.solver-shared-guesses { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.solver-shared-guesses label { display: grid; gap: 4px; width: 115px; }
.solver-shared-guesses input { width: 100%; text-transform: uppercase; letter-spacing: .08em; }
.solver-shared-feedback { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 16px; }
.solver-shared-feedback details { border: 1px solid var(--border-color, #747b88); border-radius: 8px; padding: 10px; }
.solver-shared-feedback summary { cursor: pointer; padding: 8px 0; }
.solver-feedback-line { display: flex; gap: 4px; margin: 7px 0; }
.solver-feedback-line .solver-color-tile { flex: 1 1 0; max-width: 44px; min-width: 0; }
.solver-grid-editor { display: grid; gap: 4px; grid-template-columns: repeat(var(--columns, 5), minmax(0, 44px)); margin: 12px 0; }
.solver-grid-editor input { width: 100%; min-width: 0; min-height: 44px; text-align: center; text-transform: uppercase; padding: 2px; font-weight: 700; }
.solver-grid-editor .solver-grid-hole { visibility: hidden; }
.solver-grid-dimensions { display: flex; gap: 12px; flex-wrap: wrap; }
.solver-grid-dimensions input { max-width: 70px; }
.helper-clue-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; padding: 10px; border: 1px solid var(--border-color, #747b88); }
.helper-clue-row label { display: grid; gap: 5px; flex: 1 1 130px; min-width: 0; }
.helper-clue-row input, .helper-clue-row select { width: 100%; min-width: 0; }
.helper-cell-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.helper-cell-pair label { min-width: 0; }
.helper-path-editor { min-width: 0; margin-block: 1rem; padding: .8rem; border: 1px solid var(--border-color, #747b88); border-radius: .6rem; }
.helper-path-board { display: grid; gap: .2rem; max-width: 28rem; margin-block: .75rem; }
.helper-path-board .solver-color-tile { width: 100%; min-width: 0; font-size: .8rem; }
.helper-path-board [aria-pressed="true"] { background: #247542; color: #fff; outline: 2px solid currentColor; }

.helper-clue-row .helper-cell-control { flex: 1 1 130px; min-width: 0; border: 0; padding: 0; margin: 0; }