.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scramble-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.scramble-item{display:grid;grid-template-columns:2.2em minmax(7em,1fr) minmax(8em,1.3fr) auto 1.4em;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.scramble-number{color:var(--muted);font-weight:600}
.scramble-letters{font-family:ui-monospace,Consolas,"Courier New",monospace;font-weight:700;font-size:1.35rem;letter-spacing:.18em;color:var(--ink);overflow-wrap:anywhere}
.scramble-input{font:inherit;font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);min-width:0;width:100%}
.scramble-input:focus{outline:3px solid var(--purple);outline-offset:1px}
.scramble-mark{font-weight:700;color:var(--purple-dark);text-align:center}
.scramble-item.is-solved{background:#eef3e8;border-color:#b8c8ab}
.scramble-item.is-revealed{background:#f4f1ea}
.scramble-item.is-revealed .scramble-input{color:var(--muted)}
.scramble-reveal:disabled{opacity:.35;cursor:default}
@media (max-width:640px){
 .scramble-item{grid-template-columns:2em 1fr auto;grid-template-areas:"num letters mark" "input input show";row-gap:8px}
 .scramble-number{grid-area:num}.scramble-letters{grid-area:letters}.scramble-mark{grid-area:mark}.scramble-input{grid-area:input}.scramble-reveal{grid-area:show}
}