.socks-page{max-width:900px;padding-top:24px}
.socks-page .page-heading{text-align:center;margin-bottom:16px}
.socks-page h1{font-size:clamp(30px,4vw,42px);margin-bottom:12px}
.socks-page .lead{max-width:760px;margin:0 auto;font-size:var(--reading);line-height:1.6}
.sock-rounds{display:flex;justify-content:center;gap:10px;margin:20px 0}
.sock-rounds span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d4cfdf;border-radius:50%;background:#fffdf6;color:#685e7b;font-weight:700}
.sock-rounds .now,.sock-rounds .done{background:#6d5d95;color:white;border-color:#6d5d95}
.sock-card{padding:18px 20px 24px;border:2px solid #d8cee4;border-radius:28px;background:#fffdf9;box-shadow:0 6px 0 #e6dfee}
.sock-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:var(--reading);color:#685e7b;font-weight:700}
.sock-reset{background:#f5f0fa;border:1px solid #d8cee4;border-radius:12px;min-height:44px;padding:6px 12px;font-size:16px;color:#685e7b}
.sock-reset:disabled{opacity:.45}
.socks-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sock-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0 8px;padding:8px 4px;background:transparent;border:2px solid transparent;border-radius:20px;min-width:0;color:#273b50;touch-action:manipulation}
.socks-bottom .sock-tile{flex-direction:column-reverse}
.sock-art{display:block;width:100%;max-width:110px;filter:drop-shadow(0 4px 2px #3c335215)}
.sock-art img{display:block;width:100%;height:auto;aspect-ratio:100/112;object-fit:contain;user-select:none}
.sock-syllable{display:grid;place-items:center;min-height:44px;width:100%;max-width:120px;border-radius:30px;background:#f2edf6;border:1px solid #d8cee4;font-size:calc(var(--reading) + 10px);font-weight:700;line-height:1.3;padding:3px 0}
.sock-tile[aria-pressed=true]{border-color:#8062a5;background:#f3edf9;box-shadow:0 0 0 2px #e7d9f4}
.sock-tile.matched{opacity:1}
.sock-tile.matched .sock-syllable{background:#e6f3e7;border-color:#8cb79c;color:#276b56}
.sock-check{position:absolute;top:8px;right:6px;font-size:20px;font-weight:700;color:#276b56}
.socks-bottom .sock-check{top:auto;bottom:8px}
.sock-links{height:90px}
.sock-links svg{display:block;width:100%;height:100%;overflow:visible}
.sock-links path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sock-line-edge{stroke:#fffdf9;stroke-width:10px}
.sock-line{stroke:#5c9275;stroke-width:3px}
.sock-feedback{min-height:56px;margin:22px auto 12px;text-align:center;max-width:760px;font-size:var(--reading);line-height:1.5;color:#41655d}
.sock-words h2{font-size:var(--reading);font-weight:700;text-align:center;color:#685e7b;margin:0 0 14px}
.sock-words>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sock-word{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:88px;margin:0;padding:10px 4px;border:1px dashed #d8cee4;border-radius:18px;background:#fbf8fd;text-align:center}
.sock-word.ready{border:1px solid #b5ceba;background:#f3faf0}
.sock-word-parts{font-size:var(--reading);color:#60766a}
.sock-word b{font-size:calc(var(--reading) + 5px);color:#276b56}
.sock-word-wait{font-size:var(--reading);color:#877e94}
@media(max-width:650px){.socks-page{padding:18px 12px 28px}.sock-card{padding:12px 6px 16px;border-radius:22px}.sock-tile{margin:0 2px;padding:6px 2px;border-radius:15px}.sock-links{height:70px}.sock-syllable{font-size:calc(var(--reading) + 6px)}.sock-words>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sock-reset{font-size:14px;padding:6px 8px}.sock-card header{padding:0 6px;font-size:18px}.sock-check{font-size:16px;right:0;top:1px}.socks-bottom .sock-check{bottom:1px}}