/* Gece Turu — Lokasyon's inventory night (js/tasks/tur.js).
   The lokanta's cellar at three depths: the back wall (orada) small and
   blurred at the top, the middle shelves (şurada) between, the near crates
   (burada) big and close at the bottom. Depth is the lesson, so depth is the
   styling, exactly as in kayıp's closet, but nothing drifts: food sits on
   shelves being looked at. The only light falls from the hatch above, warm
   over the planet's indigo, because upstairs the kitchen is finally alive. */

.tr-court {
  /* Same law as kayıp's closet: the width lives in a custom property, and it
     must never exceed #beat's own min(36em, 88vw), or the auto margins
     collapse and the court leans off-centre. */
  --tr-w: min(36em, 84vw);
  position: relative;
  width: var(--tr-w);
  height: min(52vh, 30em);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(232, 193, 106, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(26, 18, 48, 0.45), rgba(11, 10, 31, 0.6));
  border: 1px solid rgba(154, 147, 184, 0.16);
}

/* A slip flinches the street where the mistake happened, not just a meter
   off to the side (kayıp's rule). */
.tr-court.missed { animation: tr-miss 0.55s ease; }
@keyframes tr-miss {
  0%, 100% { border-color: rgba(154, 147, 184, 0.16); box-shadow: none; }
  25% {
    border-color: rgba(232, 119, 106, 0.75);
    box-shadow: inset 0 0 26px rgba(232, 119, 106, 0.22);
  }
}

/* A right answer lights the whole street for a breath: the win of this
   planet, in miniature, every time. */
.tr-court.lit { animation: tr-lit 0.9s ease; }
@keyframes tr-lit {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: inset 0 0 40px rgba(232, 193, 106, 0.18); }
}

/* The borders between the distances: the map gets drawn, because the map IS
   the lesson. */
.tr-court::before,
.tr-court::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(232, 193, 106, 0.32) 0 10px, transparent 10px 20px);
  pointer-events: none;
  z-index: 1;
}
.tr-court::before { top: 38%; }
.tr-court::after  { top: 66%; }

@media (max-width: 480px) {
  .tr-court { --tr-w: 78vw; }
}

/* Nerede's ask, over the street, with his patience draining under it. */
.tr-ask {
  position: absolute;
  top: 3%;
  left: 0; right: 0;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.tr-ask-line {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--cream);
}
.tr-patience {
  width: 7em;
  height: 2px;
  margin: 0.45em auto 0;
  background: rgba(154, 147, 184, 0.2);
  border-radius: 1px;
  overflow: hidden;
}
.tr-patience-fill {
  height: 100%;
  width: 100%;
  background: rgba(232, 193, 106, 0.6);
}
@keyframes tr-drain { from { width: 100%; } to { width: 0%; } }

.tr-lane {
  position: absolute;
  left: 0; right: 0;
}
/* Fog thickens with distance. The top lane starts under the ask. */
.tr-lane.far  { top: 14%; height: 24%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.055), transparent); }
.tr-lane.mid  { top: 40%; height: 26%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.035), transparent); }
.tr-lane.near { top: 68%; height: 26%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.02), transparent); }

/* Each lane wears its own word until the training wheels come off
   (js/tasks/tur.js, after `guideFor` answers). */
.tr-lane-word {
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 1s ease;
}
.tr-court.no-guides .tr-lane-word { opacity: 0; }
.tr-lane.far  .tr-lane-word { font-size: 0.85rem; }
.tr-lane.mid  .tr-lane-word { font-size: 1.05rem; }
.tr-lane.near .tr-lane-word { font-size: 1.3rem; }

/* The items: food emojis sitting in the shelf-fog at their depths. */
.tr-sign {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  opacity: 0;
  animation: tr-sign-in 0.6s ease forwards;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes tr-sign-in { to { opacity: 1; } }
.tr-lane.far  .tr-sign { font-size: 1.4rem; filter: blur(2px) saturate(0.7); animation-name: tr-sign-in-far; }
.tr-lane.mid  .tr-sign { font-size: 2rem; filter: blur(1px) saturate(0.85); animation-name: tr-sign-in-mid; }
.tr-lane.near .tr-sign { font-size: 2.7rem; filter: blur(0.3px); }
/* The fog owns the far shelves even at full entrance. */
@keyframes tr-sign-in-far { to { opacity: 0.75; } }
@keyframes tr-sign-in-mid { to { opacity: 0.88; } }

/* Found: the emoji pops off... */
.tr-sign.popped { animation: tr-pop 0.55s ease-out forwards; filter: none; }
@keyframes tr-pop {
  0%   { transform: translateY(-50%) scale(1); opacity: 1; }
  45%  { transform: translateY(-58%) scale(1.35); opacity: 1; }
  100% { transform: translateY(-70%) scale(0.2); opacity: 0; }
}

/* ...and its Turkish word takes its place and falls to the stocked pile. */
.tr-word {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.2rem;
  text-shadow: 0 0 16px rgba(232, 193, 106, 0.5);
  pointer-events: none;
  animation: tr-fall 1.1s cubic-bezier(0.3, 0, 0.7, 1) forwards;
  z-index: 3;
}
@keyframes tr-fall {
  0%   { translate: 0 0; opacity: 0; scale: 0.7; }
  18%  { opacity: 1; scale: 1.15; }
  35%  { translate: 0 0; scale: 1; }
  100% { translate: 0 var(--fall, 120px); scale: 0.9; opacity: 1; }
}

/* The ground: the pile of stocked things. */
.tr-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  min-height: 1.8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.2em 0.8em;
  padding: 0.2em 0.8em;
  border-top: 1px solid rgba(232, 193, 106, 0.18);
  background: linear-gradient(180deg, transparent, rgba(232, 193, 106, 0.05));
  z-index: 2;
}
.tr-seen {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0;
  animation: tr-seen-in 0.5s ease forwards;
}
@keyframes tr-seen-in { to { opacity: 0.85; } }

/* The reminder keeps its reserved seat whether or not anybody sits in it
   (kayıp's rule: the board must hold still under a mistake). */
.tr-note {
  min-height: 2.9em;
  margin-top: 0.5em;
}

/* The meter stands beside the street, not out at the screen's edge. */
.tr-court ~ .love {
  right: max(4vw, calc(50vw - min(18em, 42vw) - 2.5em));
}
.tr-court ~ .love .love-bar { height: 24vh; }

/* The three answers: one row, near to far. */
.tr-pills {
  display: flex;
  justify-content: center;
  gap: 0.55em;
  margin-top: 1em;
}
.tr-pill { opacity: 1; transform: none; animation: none; }
/* An answer used right once is an answer you own now. */
.tr-pill.owned { border-color: rgba(232, 193, 106, 0.7); }

/* The break: shards of the emoji fly apart (kayıp's seams). */
.tr-shard {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font-size: clamp(1.4rem, 4.5vw, 2.4rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: tr-shard-fly 0.8s ease-out forwards;
}
@keyframes tr-shard-fly {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 70px))) rotate(var(--sr, 40deg)) scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-court.lit, .tr-court.missed { animation: none; }
  .tr-sign { animation-duration: 0.2s; }
}