/* Strands: embroidered letters on a woven board, words sewn in yarn. Tokens, pieces and keyframes come from
   base.css (see docs/GAMES-THEME.md). */

.strands-main {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

/* ---- side panel ---- */

.strands-panel {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
}

.theme-card {
  --stitch-color: var(--thread-indigo);
  padding: 14px 14px 16px;
  text-align: center;
}

.theme-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--thread-indigo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.theme-label::before,
.theme-label::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--thread-red) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--thread-red) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.theme-text {
  margin-top: 6px;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--fg);
}

.strands-progress {
  margin: 0;
  text-align: center;
  color: var(--fg);
}

.strands-progress strong {
  font-family: var(--font-yarn);
  font-weight: 800;
}

.hint-btn {
  position: relative;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
  align-self: center;
  padding: 8px 20px 10px;
}

.hint-btn:disabled {
  cursor: default;
  opacity: 0.75;
}

/* A hint is ready: the button's stitch turns indigo, the colour of the basting it will show. */
.hint-btn.ready {
  border-color: var(--thread-indigo);
  outline-color: var(--thread-indigo);
  background: color-mix(in srgb, var(--thread-indigo) 10%, var(--card-bg));
}

.hint-btn.ready:hover {
  background: color-mix(in srgb, var(--thread-indigo) 16%, var(--card-bg));
}

.hint-btn.ready:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.hint-btn.hint-nudge {
  animation: strands-nudge 260ms var(--ease-settle) both;
}

@keyframes strands-nudge {
  0%   { scale: 1; }
  45%  { scale: 1.06; }
  100% { scale: 1; }
}

/* The hint bar is a short running stitch; each word toward a hint sews one more stitch in olive. */
.hint-bar {
  display: flex;
  gap: 4px;
  width: 90px;
}

.hint-bar span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--stitch-color) 40%, transparent);
}

.hint-bar span.filled {
  background: var(--thread-olive);
}

.results-btn {
  align-self: center;
}

/* ---- play area ---- */

.strands-play {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100%, 380px, calc((100dvh - 200px) * 0.75));
  min-width: 270px;
}

.word-label {
  min-height: 2rem;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--fg);
}

.word-label.bad { color: var(--muted); }
.word-label.muted { color: var(--muted); }
.word-label.ok { color: var(--muted); }
.word-label.theme { color: var(--fg); text-decoration: underline 3px dashed var(--thread-olive); text-underline-offset: 7px; }
.word-label.spangram { color: var(--fg); text-decoration: underline 3px dashed var(--thread-gold); text-underline-offset: 7px; }

/* The board is a patch of woven cloth with a running stitch round it (gold once the puzzle is solved). */
.board-wrap {
  --fabric: var(--card-bg);
  width: 100%;
  padding: clamp(6px, 2.5%, 12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--border), 0 3px 10px rgba(42, 33, 24, .06);
}

.is-complete .board-wrap {
  --stitch-color: var(--thread-gold);
}

.board-wrap.shake {
  animation: st-shake 0.3s;
}

@keyframes st-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  grid-template-rows: repeat(var(--rows, 8), 1fr);
  width: 100%;
  aspect-ratio: var(--cols, 6) / var(--rows, 8);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.board-lines,
.board-needle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.board-lines { z-index: 0; }
.board-needle { z-index: 2; }

/* ---- yarn: under-stroke, colour stroke (.line) and a thin highlight core ---- */

.board-lines polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-lines .line-under { stroke-width: 0.27; stroke: var(--yarn-under); }
.board-lines .line { stroke-width: 0.19; stroke: var(--yarn-color); }
.board-lines .line-core { stroke-width: 0.05; stroke: var(--yarn-core); }

.yarn-theme {
  --yarn-color: var(--thread-olive);
  --yarn-under: color-mix(in srgb, var(--thread-olive), #000 35%);
  --yarn-core: color-mix(in srgb, var(--thread-olive), #fff 35%);
}

/* The spangram is gold thread over a red core. */
.yarn-spangram {
  --yarn-color: var(--thread-gold);
  --yarn-under: var(--thread-red);
  --yarn-core: var(--thread-red);
}

.yarn-select {
  --yarn-color: var(--thread-terra);
  --yarn-under: color-mix(in srgb, var(--thread-terra), #000 30%);
  --yarn-core: color-mix(in srgb, var(--thread-terra), #fff 35%);
}

/* A rejected path: the thread wobbles loose and falls away. Its resting state is gone. */
.board-lines .loose.loose-wiggle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    loose-wiggle var(--wiggle-dur, 240ms) ease-in-out both,
    strands-loosen 280ms ease-in both;
}

@keyframes strands-loosen {
  0%   { opacity: .9; }
  100% { opacity: 0; }
}

/* ---- the needle that sews a found word (exists only while it moves) ---- */

.needle {
  opacity: 0;
  animation: strands-needle var(--needle-dur, 400ms) linear both;
}

@keyframes strands-needle {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

.needle-shaft {
  fill: #D3D8DF;
  stroke: #474D57;
  stroke-width: 0.02;
  stroke-linejoin: round;
}

.needle-eye {
  fill: none;
  stroke: #2E333B;
  stroke-width: 0.024;
  stroke-linecap: round;
}

.needle-tail {
  fill: none;
  stroke: var(--thread-olive);
  stroke-width: 0.06;
  stroke-linecap: round;
}

.needle-spangram .needle-tail { stroke: var(--thread-gold); }

/* ---- cells: embroidered letters; found letters sit on discs of their thread ---- */

.cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.cell-letter {
  --disc-ring: 0 0 0 0 transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: clamp(1.1rem, 5.2vw, 1.6rem);
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: var(--disc-ring);
}

.cell.selected .cell-letter {
  background: var(--thread-terra);
  color: var(--on-thread-terra);
}

.cell.found-theme .cell-letter {
  --disc-ring: inset 0 0 0 2px color-mix(in srgb, var(--thread-olive), #000 30%);
  background: var(--thread-olive);
  color: var(--on-thread-olive);
  outline: 1.5px dashed color-mix(in srgb, var(--on-thread-olive) 45%, transparent);
  outline-offset: -5px;
}

.cell.found-spangram .cell-letter {
  --disc-ring: inset 0 0 0 2px var(--thread-red);
  background: var(--thread-gold);
  color: var(--on-thread-gold);
  outline: 1.5px dashed var(--thread-red);
  outline-offset: -5px;
}

.cell.found-theme,
.cell.found-spangram {
  cursor: default;
}

/* A hint bastes the target word's letters with a loose dashed indigo stitch. */
.cell.hinted .cell-letter {
  outline: 2px dashed var(--thread-indigo);
  outline-offset: 1px;
}

/* Each letter pulls tight as the needle passes through it. */
.cell.pulled .cell-letter {
  animation: strands-pull 200ms var(--ease-thread) var(--pull-delay, 0ms) both;
}

@keyframes strands-pull {
  0%   { scale: 1; }
  45%  { scale: 1.14; }
  75%  { scale: .97; }
  100% { scale: 1; }
}

.cell-order {
  position: absolute;
  top: 1px;
  right: 2px;
  min-width: 1.1em;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--card-bg);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
  pointer-events: none;
}

.cell-order:empty {
  display: none;
}

.cell:focus {
  outline: none;
}

.cell:focus-visible .cell-letter {
  box-shadow: 0 0 0 3px var(--focus), var(--disc-ring);
}

.strands-help {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.strands-error {
  text-align: center;
  color: var(--muted);
}

/* ---- results modal ---- */

.strands-result-theme {
  font-family: var(--font-yarn);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.strands-result-emoji {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  max-width: 11em;
  word-break: break-all;
}

.strands-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.strands-stats .stat {
  flex: 1 1 88px;
  display: flex;
  flex-direction: column;
  padding: 10px 6px 8px;
  border-radius: var(--radius);
  background: var(--sand);
  outline: 1.5px dashed var(--stitch-color);
  outline-offset: -5px;
  font-size: 0.85rem;
  color: var(--muted);
}

.strands-stats .stat strong {
  font-family: var(--font-yarn);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fg);
}

.strands-stats .muted {
  color: var(--muted);
}

/* ---- narrow screens: theme card above the grid ---- */

@media (max-width: 700px) {
  .strands-main {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 24px;
  }

  .strands-panel {
    flex: none;
    width: 100%;
    max-width: 380px;
    padding-top: 0;
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "theme theme"
      "progress hint";
    align-items: center;
  }

  .theme-card { grid-area: theme; padding: 10px 12px 12px; }
  .theme-text { font-size: 1.1rem; margin-top: 2px; }
  .strands-progress { grid-area: progress; text-align: left; font-size: 0.9rem; }
  .hint-btn, .results-btn { grid-area: hint; min-width: 110px; }

  .strands-play {
    width: min(100%, 380px);
    min-width: 0;
  }

  .strands-help { display: none; }
}

.strands-panel [hidden] {
  display: none;
}