/* Pixel Decoder: what this page adds to Shift One and games.css. */
.px-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.px-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 100%; max-width: 340px; aspect-ratio: 1; touch-action: none; user-select: none; }
.px { border-radius: 4px; border: 1px solid var(--separator-firm); background: var(--bg-inset); cursor: pointer; }
.px:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.px.wrong { outline: 3px solid var(--danger); outline-offset: -3px; }
.px-grid.locked .px { cursor: default; }
.px-grid.locked .px:hover { outline: none; }
.rows { font: 600 15px/1.9 var(--font-mono); letter-spacing: 0.06em; }
.rows div { display: flex; gap: 10px; align-items: center; padding: 0 8px; border-radius: var(--r-sm); }
.rows div.hl { background: var(--warning-wash); box-shadow: inset 3px 0 0 var(--warning); }
.rows .rn { color: var(--label-4); font-size: 12px; width: 18px; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.swatch-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); border: 1px solid var(--separator-firm); background: var(--bg-elevated-2); font: 600 13px var(--font-mono); color: var(--label); }
.swatch-btn span.chip { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--separator-firm); }
.swatch-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
@media (max-width: 760px) { .px-layout { grid-template-columns: minmax(0, 1fr); } }