.letters { font:800 clamp(2rem, 9vw, 3.6rem)/1.2 ui-monospace, Menlo, monospace; letter-spacing:.1em; background:#17223a; border:2px solid var(--line); border-radius:16px; padding:18px 24px; min-width:min(520px, 94vw); text-align:center; color:#fbbf24; }
.hintline { min-height:1.4em; font:700 1.2rem ui-monospace, Menlo, monospace; color:var(--muted); letter-spacing:.2em; }
#in { width:min(260px, 60vw); font:700 1.3rem system-ui; color:var(--text); background:#0b1220; border:2px solid var(--line); border-radius:10px; padding:8px 12px; }

/* Separate letter pieces make the scramble legible like its cover art. */
.letters { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; width:min(520px, 94vw); min-width:0; min-height:82px; padding:12px; background:linear-gradient(145deg,#e7cda7,#bf9363); border-color:#9d7048; }
.letters .letter { display:grid; place-items:center; width:clamp(31px, 8vw, 48px); aspect-ratio:1; border:1px solid #dec69d; border-bottom:3px solid #a66e3d; border-radius:8px; background:linear-gradient(145deg,#fff3d8,#e9c58f); color:#694022; font:800 clamp(1.15rem, 4.8vw, 1.9rem)/1 ui-monospace,Menlo,monospace; box-shadow:0 3px 7px rgba(70,39,16,.18), inset 0 2px 0 rgba(255,255,255,.65); }