.thread-play {
  background:
    linear-gradient(135deg, rgba(102,184,197,.18) 0 25%, transparent 25% 50%, rgba(102,184,197,.18) 50% 75%, transparent 75%) 0 0 / 28px 28px,
    #f7fbf8;
}
.thread-stage { width: min(100%, 630px); margin: 0 auto; }
.thread-board {
  --size: 6;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(23,35,31,.035) 0 1px, transparent 1px 100%) 0 0 / 16px 100%,
    linear-gradient(rgba(23,35,31,.035) 0 1px, transparent 1px 100%) 0 0 / 100% 16px,
    var(--paper);
  box-shadow: 0 16px 30px rgba(23,34,31,.12), 5px 5px 0 var(--ink);
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.thread-board svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.thread-board polyline { fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(1px 2px 0 rgba(23,35,31,.75)); }
.thread-cell { position: relative; z-index: 1; padding: 0; border: 0; border-right: 1px solid rgba(23,35,31,.13); border-bottom: 1px solid rgba(23,35,31,.13); background: transparent; cursor: crosshair; }
.thread-cell:nth-child(var(--size)n) { border-right: 0; }
.thread-cell.visited { background: rgba(254,85,66,.12); }
.thread-cell.blocked { cursor: not-allowed; background: repeating-linear-gradient(135deg, #cfc5b7 0 5px, #eee6d8 5px 10px); box-shadow: inset 0 0 0 4px rgba(23,35,31,.09); }
.thread-cell.blocked::before { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(23,35,31,.42); font: 900 clamp(1rem,3vw,1.7rem)/1 ui-monospace, monospace; }
.thread-cell::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--coral); opacity: 0; transform: translate(-50%,-50%) scale(0); transition: .12s ease; }
.thread-cell.visited::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.thread-cell .knot { position: absolute; z-index: 4; left: 50%; top: 50%; width: clamp(29px, 8vw, 47px); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; font: 950 clamp(.82rem, 2vw, 1.1rem)/1 ui-monospace, monospace; transform: translate(-50%,-50%); }
.thread-cell .stitch-rule { position: absolute; z-index: 4; left: 50%; top: 50%; width: clamp(27px, 7vw, 42px); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 8px; background: var(--lime); box-shadow: 2px 3px 0 var(--ink); display: grid; place-items: center; font: 950 clamp(.8rem,2vw,1.05rem)/1 ui-monospace, monospace; transform: translate(-50%,-50%) rotate(4deg); }
.thread-cell .stitch-rule.straight { background: var(--blue); transform: translate(-50%,-50%) rotate(-3deg); }
.thread-cell .stitch-rule.arrow { background: var(--coral-dark); color: var(--paper); transform: translate(-50%,-50%) rotate(2deg); }
.thread-cell .stitch-rule.entry { background: var(--orange, #f6a04d); color: var(--ink); border-radius: 50% 50% 50% 9px; transform: translate(-50%,-50%) rotate(-6deg); }
.thread-cell.visited .stitch-rule { color: var(--paper); background: var(--coral); }
.thread-cell.visited .knot { background: var(--coral); color: var(--paper); }
.thread-cell.next-hint { animation: hint-cell .8s ease-in-out infinite alternate; }
.thread-cell.next-hint::after {
  z-index: 7;
  width: clamp(30px, 58%, 58px);
  border: 4px solid var(--yellow);
  background: rgba(245,212,109,.26);
  box-shadow: 0 0 0 5px rgba(245,212,109,.24), 2px 3px 0 rgba(23,35,31,.55);
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  animation: hint-ring .62s ease-in-out infinite alternate;
}
.thread-cell.next-hint .knot,
.thread-cell.next-hint .stitch-rule {
  z-index: 8;
  animation: hint-token .62s ease-in-out infinite alternate;
}
.thread-cell.bad { animation: bad-cell .28s ease; }
.thread-board.complete { animation: board-win .48s ease; }
.thread-caption { margin: 19px 4px 0; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .72rem; font-weight: 850; }
.thread-caption strong { color: var(--ink); }
.progress-rail { height: 10px; margin-top: 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); overflow: hidden; }
.progress-rail span { display: block; height: 100%; width: 4%; background: var(--coral); border-radius: inherit; transition: width .14s ease; }
.thread-legend { display: grid; grid-template-columns: auto 1fr; gap: 9px 11px; align-items: center; }
.thread-legend i { width: 22px; aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); display: grid; place-items: center; color: var(--ink); font: 950 .72rem/1 ui-monospace, monospace; }
.thread-legend i.legend-patch { background: repeating-linear-gradient(135deg, #c9c2b4 0 4px, #ddd6c8 4px 8px); }
.thread-legend i.legend-turn { background: var(--lime); }
.thread-legend i.legend-straight { background: var(--blue); }
.thread-legend i.legend-arrow { background: var(--coral-dark); color: var(--paper); }
.thread-legend i.legend-entry { background: var(--orange, #f6a04d); border-radius: 50% 50% 50% 6px; }
.thread-legend span { color: var(--muted); font-size: .72rem; font-weight: 700; }
@keyframes hint-cell { to { background: rgba(245,212,109,.65); box-shadow: inset 0 0 0 4px var(--yellow); } }
@keyframes hint-ring { to { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 8px rgba(245,212,109,.3), 3px 4px 0 rgba(23,35,31,.55); } }
@keyframes hint-token { to { filter: brightness(1.08) drop-shadow(0 0 8px rgba(245,212,109,.95)); } }
@keyframes bad-cell { 25%,75% { background: rgba(216,74,58,.32); } 50% { transform: translateX(3px); } }
@keyframes board-win { 50% { transform: rotate(.5deg) scale(1.015); box-shadow: 8px 9px 0 var(--coral); } }
@media (max-width: 600px) { .thread-board { border-radius: 15px; } .thread-board polyline { stroke-width: 6; } }