/* css/tasks/eslestir.css — the matching test (js/tasks/eslestir.js)
   Two floating columns with a wide channel between them, and lines of light
   struck across it. No meter in this room, on purpose: nothing here reacts
   until the verdict.

   Every chip is three elements deep, and each one owns exactly one transform,
   because CSS animations do not compose:

     .es-item    the lean toward a partner   (transition)
     .es-float   the idle drift              (infinite animation)
     .es-chip    the tap                     (one-shot animation)

   Colour discipline: the Turkish is gold because it is Turkish, and that is
   the only gold on the board until the answers turn. */

.eslestir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4em;
  /* The beat is already a narrow centred column and it is the authority on
     width. Asking for a width of our own here pushed the bank clean off the
     right edge of the screen. Fill what we are given, cap it, never exceed. */
  width: 100%;
  max-width: 920px;
  /* Room between Evren's line and the board (Ahmet, 2026-08-14). The beat is
     centred as a whole, so pushing the game down also lifts the sentence: one
     margin buys both halves of what he asked for. */
  margin: 2.4em auto 0;
}

.es-board {
  position: relative; /* the lines are measured against this box */
  display: flex;
  /* The channel the lines cross. Wide enough that a line reads as a journey
     between two places rather than as a hyphen (Ahmet, 2026-08-14). */
  gap: clamp(3em, 18vw, 11em);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.es-col {
  display: flex;
  flex-direction: column;
  /* Chips are as wide as their own words and no wider: an even column of
     boxes padded out to the longest one is a table, and this is a board. */
  gap: 0.55em;
  flex: 0 1 auto;
  min-width: 0;
}
/* The two columns face each other across the channel, so every line starts and
   ends near the same two verticals however long the words are. */
.es-col-tr { align-items: flex-end; }
.es-col-en { align-items: flex-start; }

.es-item {
  /* The lean. Set by the JS as a class, resolved here per column so a word
     always leans right and a meaning always leans left. */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.es-col-tr .es-item.lean { transform: translateX(9px); }
.es-col-en .es-item.lean { transform: translateX(-9px); }

/* The idle drift: a slow, small wander so the board is alive without ever
   being busy. Each chip is given its own duration and delay in the JS. */
.es-float {
  animation-name: es-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes es-drift {
  from { transform: translate(0, -2.5px); }
  to   { transform: translate(0, 2.5px); }
}

.es-chip {
  /* Both halves are set at ONE size (Ahmet, 2026-08-14). The two sides of a
     pair are worth the same, and a meaning printed smaller than its word reads
     as a footnote to it. Only the face changes: serif for the Turkish, sans
     for the English, exactly as everywhere else in the universe.
     THE BOX IS THE SAME ON BOTH SIDES TOO: one padding, one min-height in rem
     (never em, which would follow the font and drift again), and the label
     centred inside it. The two faces have different metrics, so a box left to
     be sized by its own text comes out taller on the sans side every time. */
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.25;
  color: var(--cream);
  background: rgba(11, 10, 31, 0.35);
  border: 1px solid rgba(243, 234, 216, 0.26);
  border-radius: 0.6em;
  padding: 0.3em 0.9em;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* The Turkish half is Turkish, so it is gold and it is serif.
   The 1.06 is an OPTICAL correction, not a size change: Playfair carries a
   smaller x-height than DM Sans, so the two set at identical pixels do not
   read as identical, and the English looked the bigger of the two. This is the
   nudge that makes them look equal. Drop it back to 1 to see the difference. */
.es-col-tr .es-chip {
  font-family: var(--serif);
  font-size: calc(clamp(0.95rem, 2.4vw, 1.1rem) * 1.06);
  color: var(--gold);
}

.es-chip:hover { border-color: rgba(243, 234, 216, 0.7); }
.es-item.sel .es-chip {
  border-color: rgba(116, 176, 255, 0.85);
  background: rgba(116, 176, 255, 0.1);
}
.es-item.joined .es-chip {
  border-color: rgba(232, 193, 106, 0.6);
  box-shadow: 0 0 16px rgba(232, 193, 106, 0.16);
}

/* The tap. A short, small bounce: the chip acknowledges the finger and gets
   back to work. */
.es-chip.bump { animation: es-bump 0.34s ease; }
@keyframes es-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.13); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* The lines. Two passes: a wide soft one for the glow, a thin bright one over
   it. Both are invisible until a join turns them on. */
.es-lines {
  position: absolute;
  inset: 0;
  pointer-events: none; /* a line must never swallow a tap meant for a chip */
  overflow: visible;
}
.es-line-glow, .es-line-core {
  opacity: 0;
  transition: opacity 0.3s ease, stroke 0.4s ease;
}
.es-line-glow {
  stroke: rgba(232, 193, 106, 0.28);
  stroke-width: 7;
  stroke-linecap: round;
}
.es-line-core {
  stroke: rgba(232, 193, 106, 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.es-line-glow.on { opacity: 1; animation: es-pulse 2.6s ease-in-out infinite; }
.es-line-core.on { opacity: 1; }
@keyframes es-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* The verdict. */
.eslestir.done .es-chip { cursor: default; pointer-events: none; }
.es-line-glow.right { stroke: rgba(168, 201, 140, 0.3); animation: none; opacity: 1; }
.es-line-core.right { stroke: rgba(168, 201, 140, 0.95); }
.es-line-glow.wrong { stroke: rgba(214, 122, 122, 0.3); animation: none; opacity: 1; }
.es-line-core.wrong { stroke: rgba(214, 122, 122, 0.95); }

.es-item.right .es-chip {
  border-color: rgba(168, 201, 140, 0.7);
  box-shadow: none;
}
.es-item.wrong .es-chip {
  border-color: rgba(214, 122, 122, 0.7);
  box-shadow: none;
}
/* Where a wrong line SHOULD have gone. Dashed, quiet, lavender: a correction,
   not a second accusation. It is drawn rather than written, so nothing has to
   be read to be understood. */
.es-line-truth {
  stroke: rgba(154, 147, 184, 0.85);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  animation: es-crawl 1.4s linear infinite;
}
@keyframes es-crawl { to { stroke-dashoffset: -20; } }
.es-item.truth .es-chip { border-color: rgba(154, 147, 184, 0.7); }

.es-gate {
  display: flex;
  justify-content: center;
  min-height: 3em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.es-gate.open { opacity: 1; pointer-events: auto; }

@media (max-width: 640px) {
  /* The channel narrows on a phone, but the two columns stay two columns: the
     line between them IS the answer, and a stacked board has nothing to cross. */
  .es-board { gap: clamp(1.2em, 8vw, 2.5em); }
  .es-chip { padding: 0.4em 0.7em; }
}

@media (prefers-reduced-motion: reduce) {
  .es-float { animation: none; }
  .es-line-glow.on { animation: none; opacity: 1; }
  .es-line-truth { animation: none; }
  .es-chip.bump { animation: none; }
}