/* =========================================================================
   Orang3 — 4. feladat: három sáv, potyogó válaszok

   A lap visszatér ÁLLÓBA. Fent a kérdés, középen a három sáv, alul a
   fogóvonal és a játékos.

   A cimkék `transform: translateY()`-nal esnek (5. szabály), és minden kör
   friss elemekkel indul: nincs félbehagyott átmenet, amit vissza kellene
   bontani.
   ========================================================================= */

.t4 {
  display: grid;
  place-items: center;
  padding: 9.6rem 2rem 1.5rem;   /* a fejléc-márkajel alja 8,95rem */
}

.sheet4 {
  width: min(38rem, 100%);
  min-width: 0;
  height: 100%;
  max-height: 50rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .9rem;
  padding: 1.4rem;
  border-radius: 1.75rem;
}

/* --- A kérdés ----------------------------------------------------------- */
.t4-head { text-align: center; min-height: 5.5rem; }

.t4-count {
  font-size: 1rem;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--ink-3);
}

.t4-q {
  margin-top: .35rem;
  font-size: 1.95rem;
  line-height: 1.15;
  color: var(--ink);
}

/* =========================================================================
   A pálya
   ========================================================================= */

.track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  --catch: 5.5rem;              /* a fogóvonal magassága az aljától */
}

.lane {
  position: relative;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  cursor: pointer;
  transition: background var(--t-fast) linear, box-shadow var(--t-fast) linear;
}

.lane:hover { background: rgba(255, 255, 255, .06); }

/* Ahol a játékos áll. Fehér vonal, nem fény: a zöld marad a megerősítésé. */
.lane.is-here {
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42);
}

/* A fogóvonal: eddig esnek a válaszok. */
.catchline {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--catch);
  height: 1px;
  background: rgba(255, 255, 255, .22);
  pointer-events: none;
}

/* --- A potyogó cimkék ---------------------------------------------------- *
   `.drop` és NEM `.tile`: a `.tile` az 1. feladat tábláját jelenti, és mivel
   ez a stíluslap később töltődik, ráült az arató robot mezőire és szétverte a
   pálya textúráját. Két feladat NEM oszthat osztálynevet. */
.drop {
  position: absolute;
  left: .4rem; right: .4rem;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .4rem;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transform: translateY(var(--from, -120px));
  pointer-events: none;
}

/* Az esés: EGYETLEN transform-átmenet. Se képkockánkénti számolás, se
   ütközésvizsgálat; a kör egyetlen pillanatban dől el. A két végpontot a
   JS méri ki, mert a sáv magassága a képernyőtől függ. */
.drop.is-falling {
  transform: translateY(var(--drop, 0px));
  transition: transform var(--t4-fall, 4000ms) linear;
}

.drop.is-landed { transition: transform 160ms var(--ease-out); }

/* A helyes válasz a kör végén megjelöli magát. ZÖLD TINTA: szöveg és 1px-es
   vonal, nem felület (7. szabály). */
.drop.is-correct {
  box-shadow: inset 0 0 0 1px var(--ok-line);
  color: var(--ok);
}

.drop__icon { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; }

.drop__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drop__label {
  font-size: 1.1875rem;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
}

/* --- A játékos: maga a narancs ------------------------------------------- */
.player {
  position: absolute;
  left: 0;
  bottom: .5rem;
  width: calc((100% - 1rem) / 3);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translateX(calc(var(--lane, 1) * (100% + .5rem)));
  transition: transform 160ms var(--ease-out);
}

.player img { width: 3.25rem; }

/* --- A kör eredménye ----------------------------------------------------- */
.t4-hint {
  min-height: 1.5em;
  text-align: center;
  font-size: 1.1875rem;
  color: var(--ink-2);
}

.t4.is-hit .t4-hint  { color: var(--ok); }
.t4.is-solved .t4-q  { color: var(--ok); }

.t4.is-entering .sheet4 { animation: rise 460ms var(--ease-out) both; }

/* =========================================================================
   A magyarázó
   ========================================================================= */

.t4-intro {
  padding: 0; border: 0; margin: auto;
  max-width: none; max-height: none;
  background: none; color: inherit; overflow: visible;
}

.t4-intro::backdrop {
  background: rgba(8, 8, 9, .40);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  animation: appear 260ms var(--ease-out) both;
}

.t4-intro__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2.2rem 2.4rem 1.6rem;
  width: min(94vw, 42rem);
  text-align: center;
}

.t4-intro__panel .t1-intro__body { text-align: left; }

/* =========================================================================
   Kisebb képernyők
   ========================================================================= */

@media (max-height: 780px) {
  .t4 { padding: 9.6rem 1.5rem 1.25rem; }
  .sheet4 { padding: 1rem; gap: .7rem; }
  .t4-head { min-height: 4.4rem; }
  .t4-q { font-size: 1.4rem; }
  .track { --catch: 4.4rem; }
  .player img { width: 2.6rem; }
  .drop__label { font-size: .9375rem; }
}

@media (max-width: 700px) {
  .t4 { padding: 5.5rem .75rem 1rem; }
  .sheet4 { max-height: none; }
  .t4-q { font-size: 1.25rem; }
  .drop__label { font-size: .875rem; }
}