.yarn-layout{max-width:880px;margin:auto;display:flex;gap:24px;align-items:flex-start;justify-content:center}.yarn-stage{width:min(100%,430px);aspect-ratio:9/16;background:#f7efdf;border:1px solid #ded0b7;border-radius:25px;position:relative;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;color:#5a4b40;box-shadow:0 15px 40px #81613b14}.yarn-art{height:57%;position:relative;flex-shrink:0;padding:16px 16px 5px;display:flex;flex-direction:column;background:radial-gradient(ellipse,#fffaf0,#eee2ce)}.yarn-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}.yarn-top strong{font-size:17px}.yarn-picture{min-height:0;flex:1;width:100%;object-fit:contain}.yarn-progress{height:5px;background:#ddcfb8;border-radius:8px;overflow:hidden}.yarn-progress i{height:100%;display:block;background:#8caa78;transition:width .2s}.yarn-phase{font-size:11px;margin:7px 0;min-height:18px;text-align:center}.yarn-tray{padding:9px 14px;background:#e9dbc6}.yarn-tray-head{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.yarn-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.yarn-slot{height:50px;border:1px dashed #baa588;border-radius:12px;background:#d7c6ad66;display:grid;place-items:center;color:#a89176}.yarn-bank{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:start;overscroll-behavior:contain}.yarn-spool{--thread:#d98caa;position:relative;border:0;background:transparent;padding:4px 0;min-height:50px;cursor:pointer;touch-action:manipulation;color:#fff;border-radius:10px}.yarn-spool::before{content:'';position:absolute;inset:9px 10px;background:repeating-linear-gradient(0deg,#ffffff18 0 2px,#0000000b 2px 4px),var(--thread);border-radius:7px;box-shadow:inset -5px 0 0 #00000014}.yarn-spool::after{content:'';position:absolute;inset:4px 5px;border-top:7px solid var(--thread);border-bottom:7px solid var(--thread);border-radius:8px;filter:brightness(1.12)}.yarn-spool b{position:relative;z-index:1;font-size:13px;text-shadow:0 1px 3px #000,0 0 2px #000}.yarn-spool[data-match=true]{background:#fffaf0;outline:2px solid #9cae83}.yarn-spool:disabled{cursor:default}.yarn-spool[data-location=used]{opacity:.18}.yarn-spool[data-location=slot]{visibility:hidden}.yarn-spool[data-location=active]{outline:2px solid #d7ae55;background:#fff6ce}.yarn-slot .yarn-spool{width:100%;height:100%;min-height:0}.yarn-bottom{padding:6px 12px 10px;display:flex;gap:8px;justify-content:center}.yarn-bottom button,.yarn-tools button,.yarn-cover button{border:1px solid #cfc1ae;border-radius:12px;background:#fffaf0;color:#65523f;padding:9px 13px;cursor:pointer;font:inherit;font-size:12px;touch-action:manipulation}.yarn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.yarn-cover{position:absolute;inset:0;background:#f8efdedb;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;z-index:3}.yarn-cover[hidden]{display:none}.yarn-cover h3{font-size:29px;margin:12px}.yarn-cover p{font-size:13px;line-height:1.8;max-width:280px}.yarn-cover button{background:#667e58;color:white;font-size:15px;padding:12px 26px}.yarn-note{font-size:11px;text-align:center;min-height:16px;padding:0 8px;color:#7c634b}.yarn-tools{max-width:300px;min-width:0;font-size:13px;line-height:1.7}.yarn-tools h3{margin-top:4px}.yarn-tools label{display:block;margin:12px 0}.yarn-tools input[type=file]{width:100%;font-size:12px}.yarn-tools select{padding:6px;border:1px solid #d9ccbc;border-radius:8px}.yarn-tools canvas{width:100%;max-height:220px;object-fit:contain;image-rendering:pixelated;background:#eee6dc;border-radius:12px}.yarn-tools summary{cursor:pointer;font-weight:bold}.yarn-shake{animation:yarnShake .22s ease-out}@keyframes yarnShake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@media(max-width:760px){.yarn-layout{flex-direction:column;align-items:center;gap:18px}.yarn-tools{max-width:430px;width:100%}.yarn-stage{width:100%}.yarn-top strong{font-size:15px}.yarn-slot{height:44px}.yarn-bank{gap:5px;padding:8px}.yarn-spool{min-height:44px}.yarn-bottom button{padding:7px 10px}}@media(prefers-reduced-motion:reduce){.yarn-shake{animation:none}.yarn-progress i{transition:none}}
.yarn-stage[data-status=won] .yarn-cover{inset:auto 0 0;height:40%;background:#f8efdeed}.yarn-stage[data-status=won] .yarn-cover h3{font-size:23px}.yarn-spool.has-art::before,.yarn-spool.has-art::after{display:none}.yarn-spool.has-art{background-image:var(--spool-art);background-size:contain;background-repeat:no-repeat;background-position:center}

/* Unwind version: bright textile and readable numbers. */
.yarn-stage{background:#e9f7b9;border:3px solid #ffd578;color:#534b54}.yarn-art{height:55%;background:#fff9ed;border-bottom:7px solid #ffd578}.yarn-tray{background:#f7e8ad}.yarn-bank{background:#daf0a1}.yarn-phase{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yarn-combo{font-weight:900;color:#e54991;display:inline-block}.yarn-cover{inset:auto 0 0;height:42%;background:#fff7e8f5;backdrop-filter:blur(3px);padding:15px;gap:8px}.yarn-cover h3{font-size:23px;margin:3px}.yarn-cover p{margin:3px}.yarn-cover button{background:#ef729d}.yarn-stage[data-status=won] .yarn-cover{height:44%;background:#fff7e8f5}.yarn-spool[data-hidden=true]{background:#d0d5db;outline:none}.yarn-bounce{animation:yarnBounce .16s ease-out}@keyframes yarnBounce{50%{transform:translateY(-3px) scale(1.06)}}@media(prefers-reduced-motion:reduce){.yarn-bounce{animation:none}}
.yarn-bank{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;overflow:hidden;padding:8px 12px;align-content:stretch}.yarn-column{min-width:0;overflow:hidden;height:100%}.yarn-column-content{display:flex;flex-direction:column;gap:8px;will-change:transform}.yarn-column .yarn-spool{width:100%;flex:0 0 48px;min-height:48px;margin:0}.yarn-column .yarn-spool[data-row="0"]{background:#fff8da;outline:2px solid #e7bf65;outline-offset:-2px}.yarn-column .yarn-spool:not([data-row="0"]){filter:brightness(.82)}.yarn-column .yarn-spool[data-row="0"]:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 3px 8px #95773533}.yarn-column .yarn-spool[data-row="0"]:not(:disabled):active{transform:scale(.94)}.yarn-spool[data-location=slot]{visibility:visible}.yarn-slot[data-state=active]{box-shadow:0 0 10px #fff2b0;animation:yarnWork 1.1s ease-in-out infinite}.yarn-slot[data-state=waiting]{filter:brightness(.85)}.yarn-slot[data-state=finished]{box-shadow:0 0 15px #fff}.yarn-slot[data-state=moving]{background:#fff5cc}.yarn-slot .yarn-spool{outline:none;background:transparent}.yarn-spool.has-art[data-hidden=true]{background-image:none}.yarn-spool.has-art[data-hidden=true]::before,.yarn-spool.has-art[data-hidden=true]::after{display:block}@keyframes yarnWork{50%{box-shadow:0 0 16px #ffd666}}@media(max-width:760px){.yarn-bank{padding:8px;gap:5px}.yarn-column .yarn-spool{flex-basis:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.yarn-slot[data-state=active]{animation:none}}