/* Irtibat: cloth patches on fabric, sewn into groups. Tokens, pieces and keyframes come from base.css
   (see docs/GAMES-THEME.md). */

:root {
  --cx-tile: var(--muted-bg);                                     /* --fg on it: 11.65 */
  --cx-tile-hover: color-mix(in srgb, var(--cx-tile) 92%, var(--fg));
  --cx-sel: var(--fg);                                            /* selected patch */
  --cx-sel-fg: var(--bg);                                         /* 14.56 on --cx-sel */
  --cx-knot: #E0626A;   /* red thread in the shade that reads on the ink selected patch: 4.61:1 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cx-tile: color-mix(in srgb, var(--muted-bg) 30%, var(--card-bg));
    --cx-knot: #8C1C24;   /* red thread, deep enough to read on the cream selected patch: 7.76:1 */
  }
}
:root[data-theme="dark"] {
  --cx-tile: color-mix(in srgb, var(--muted-bg) 30%, var(--card-bg));
  --cx-knot: #8C1C24;
}

/* Level threads: yellow gold, green olive, blue indigo, purple terra. */
.level-0, .sewn-0 { --lvl: var(--c-yellow); --lvl-fg: var(--c-yellow-fg); }
.level-1, .sewn-1 { --lvl: var(--c-green);  --lvl-fg: var(--c-green-fg); }
.level-2, .sewn-2 { --lvl: var(--c-blue);   --lvl-fg: var(--c-blue-fg); }
.level-3, .sewn-3 { --lvl: var(--c-purple); --lvl-fg: var(--c-purple-fg); }

.irtibat-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 8px 32px;
  max-width: 560px;
  margin: 0 auto;
}

.instructions {
  margin: 0;
  font-family: var(--font-yarn);
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
}

.mistakes-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* Mistake dots are cross-stitch knots; a used one unravels (base.css .unravel) and stays faded. */
.mistake-dots {
  display: flex;
  gap: 8px;
}

.mistake-dot {
  --knot-size: clamp(12px, 3.4vw, 15px);
  --knot-color: var(--thread-red);
}

.mistake-dot.used {
  opacity: .25;
  scale: .6;
  rotate: 90deg;
}

/* ---------- board ---------- */
.board {
  --cx-gap: clamp(6px, 1.8vw, 10px);
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cx-gap);
  width: 100%;
}

/* A tile is a cloth patch with a running stitch inside its edge. --lift raises a selected patch; the shake
   keyframes read it too, so a wrong guess shakes the patch where it sits. */
.tile {
  --lift: 0px;
  position: relative;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4% 5%;
  border: none;
  border-radius: clamp(6px, 1.8vw, 10px);
  background: var(--cx-tile);
  color: var(--fg);
  box-shadow: 0 1px 0 var(--border);
  outline: 1.5px dashed var(--stitch-color);
  outline-offset: calc(-1 * clamp(4px, 1.1vw, 6px));
  font-family: var(--font-yarn);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 1px 1px 0 color-mix(in srgb, currentColor 22%, transparent);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* --word-em is the width of the tile's longest word in em (measured by irtibat.js). The patch's inner width
     (a quarter of the board less the gaps, less 5% padding each side, less 2px for the text shadow) divided by it
     keeps that word on one line. */
  --fit-w: calc((100cqi - 3 * var(--cx-gap)) / 4 * .9 - 2px);
  font-size: clamp(0.6rem, min(3.4cqi, var(--fit-w) / var(--word-em, 4.5)), 1rem);
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  transform: translateY(var(--lift));
  transition: transform 120ms var(--ease-thread), scale 90ms ease;
}

@media (hover: hover) {
  .tile:hover {
    background: var(--cx-tile-hover);
  }
}

.tile:active {
  scale: .97;
}

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

.tile.selected {
  --lift: -2px;
  background: var(--cx-sel);
  color: var(--cx-sel-fg);
  outline-color: color-mix(in srgb, var(--cx-sel-fg) 45%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cx-sel) 35%, transparent), 0 6px 12px rgba(17, 12, 6, .16);
}

.tile.selected:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The knot tied in the corner of a selected patch (knot-pop when it is selected, removed on deselect). */
.tile-knot {
  position: absolute;
  inset-block-start: 9%;
  inset-inline-end: 6%;
  --knot-size: clamp(7px, 2.2vw, 10px);
  --knot-color: var(--cx-knot);
  --knot-dur: 150ms;
  pointer-events: none;
}

/* The four patches of a correct group take the level's thread while the seam is sewn across them. */
.tile.sewn {
  background: var(--lvl);
  color: var(--lvl-fg);
  outline-color: color-mix(in srgb, var(--lvl-fg) 40%, var(--lvl));
}
.tile.sewn .tile-knot {
  --knot-color: var(--lvl-fg);
}

/* Wrong guess: the shake and loose-wiggle (base.css) run together. */
.tile.shake {
  animation: irtibat-shake 300ms ease-in-out;
}
.tile.shake.loose-wiggle {
  animation: irtibat-shake 300ms ease-in-out, loose-wiggle var(--wiggle-dur, 240ms) ease-in-out both;
}

@keyframes irtibat-shake {
  10%, 90% { transform: translate(-2px, var(--lift)); }
  20%, 80% { transform: translate(4px, var(--lift)); }
  30%, 50%, 70% { transform: translate(-8px, var(--lift)); }
  40%, 60% { transform: translate(8px, var(--lift)); }
}

/* The seam: one running stitch along the lower part of a correct group's patches, drawn by a thread-draw mask. */
.sew-seam {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.sew-seam .sew-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  --thread-dur: 260ms;
}
.sew-seam .sew-stitch {
  fill: none;
  stroke: var(--lvl-fg);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
}

/* ---------- solved bars ---------- */
.solved-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2% 3%;
  border-radius: clamp(6px, 1.8vw, 10px);
  background: var(--lvl, var(--c-yellow));
  color: var(--lvl-fg, var(--c-yellow-fg));
  outline: var(--stitch-w) dashed color-mix(in srgb, var(--lvl, var(--c-yellow)) 45%, var(--lvl-fg, var(--c-yellow-fg)));
  outline-offset: calc(-1 * clamp(5px, 1.3vw, 7px));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--lvl, var(--c-yellow)) 60%, #000);
  text-align: center;
  min-block-size: calc((100cqi - 3 * var(--cx-gap)) / 4 * 3 / 5);   /* one tile row (tiles are 5:3) */
}

/* A freshly solved bar settles onto the cloth; a restored one does not. */
.solved-bar.sewn-in {
  animation: patch-in 200ms var(--ease-settle) both;
}

.solved-bar-name {
  font-family: var(--font-yarn);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 3vw, 1rem);
}

.solved-bar-words {
  font-weight: 600;
  font-size: clamp(0.65rem, 2.6vw, 0.9rem);
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#btn-see-results[hidden] {
  display: none;
}

.emoji-grid {
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1.3;
  white-space: pre;
  text-align: center;
  margin: 8px 0 0;
}