/* Solve-online word scramble (/word-scramble/<set>/, public/scramble.js). Uses the tokens in style.css. */
.scr { margin: var(--section) 0 0; }
.scr-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
@media (min-width: 900px) { .scr-list { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.scr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 8px 10px; border-radius: 12px; background: var(--blue-soft); }
.scr-n { font-weight: 700; min-width: 2.4ch; }
.scr-pic { width: 48px; height: 48px; flex: none; }
.scr-mix { font-weight: 800; letter-spacing: .18em; font-size: var(--t-lg); min-width: 8ch; overflow-wrap: anywhere; }
@media (min-width: 900px) { .scr-mix { width: 9.5em; flex: none; } }
.scr-in { flex: 1 1 10rem; min-width: 0; }
.scr-in input { width: 100%; min-height: 44px; font: 700 var(--t-lg) / 1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.scr-in input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.scr-mark { min-width: 1.5ch; font-weight: 800; font-size: var(--t-lg); }
.scr-ok { background: #e3f6e3; }
.scr-ok .scr-mark { color: #1b6e2a; }
.scr-bad { background: #ffe1db; }
.scr-bad .scr-mark { color: #b3261e; }
.scr-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.scr-status { min-height: 1.6em; margin: var(--s2) 0 0; }
@media print { .scr { display: none; } }