/* Időrend (timeline) — prefix tl- */
.tl-frame {
  width: 100%; max-width: 520px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  touch-action: manipulation;
}

/* --- Header -------------------------------------------------------------------------- */
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px; }
.tl-count { font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.tl-status { font-size: .85rem; font-weight: 550; color: var(--good); }

.tl-axis {
  margin: 0; padding-left: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 550; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.tl-axis::before { content: ""; width: 0; height: 0; border: 5px solid transparent; }
.tl-axis-early::before { border-bottom: 7px solid var(--accent); border-top-width: 0; }
.tl-axis-late::before { border-top: 7px solid color-mix(in srgb, var(--accent) 40%, transparent); border-bottom-width: 0; }

/* --- The list: cards strung on a time rail ------------------------------------------------ */
.tl-list {
  position: relative; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.tl-list::before { /* the rail behind the position badges */
  content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--game) 15%, transparent));
  transition: background .4s;
}

.tl-card {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 8px 8px 9px;
  background: #1c1c1e; color: #fff;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  cursor: grab; touch-action: none;
  transition: transform .3s var(--ease-out), scale .3s var(--ease-spring), border-color .2s, background-color .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.tl-card:hover:not(.tl-fixed) { border-color: color-mix(in srgb, var(--game) 60%, transparent); background: #232325; }
.tl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tl-pos {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: .88rem;
  color: #fff; background: color-mix(in srgb, var(--game) 35%, #1c1c1e);
  box-shadow: 0 0 0 3px #1c1c1e;
  transition: background-color .25s, color .25s;
}
.tl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-text { font-weight: 500; font-size: .95rem; line-height: 1.28; letter-spacing: -.005em; overflow-wrap: anywhere; }
.tl-year {
  font-weight: 650; font-size: 1.02rem; letter-spacing: -.02em; color: var(--good);
  animation: tl-pop .5s var(--ease-spring) both;
}
.tl-year:empty { display: none; }
@keyframes tl-pop { from { opacity: 0; transform: translateY(6px) scale(.8); } }

.tl-btns { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.tl-mv {
  width: 38px; height: 26px; padding: 0; border: 0; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: background-color .15s, opacity .15s, transform .3s var(--ease-spring);
}
.tl-mv:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.tl-mv:active:not(:disabled) { transform: scale(.88); transition-duration: .08s; }
.tl-mv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-mv:disabled { opacity: .25; cursor: default; }

/* Correct (locked) and wrong cards */
.tl-card.tl-ok { cursor: default; border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 12%, #1c1c1e); }
.tl-card.tl-ok .tl-pos { background: var(--good); color: #000; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 12%, #1c1c1e); }
.tl-card.tl-ok .tl-btns { visibility: hidden; }
.tl-card.tl-bad { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 9%, #1c1c1e); }
.tl-card.tl-bad .tl-pos { color: #fff; background: color-mix(in srgb, var(--danger) 55%, #1c1c1e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 9%, #1c1c1e); }
.tl-card.tl-shake { animation: tl-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes tl-shake { 15%, 85% { translate: -2px 0; } 30%, 70% { translate: 5px 0; } 45%, 55% { translate: -6px 0; } }
.tl-card.tl-wave { animation: tl-wave .7s var(--ease-spring) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes tl-wave { 40% { scale: 1.035; translate: 0 -3px; filter: brightness(1.25); } }
.tl-card.tl-drop { animation: tl-drop .35s var(--ease-spring); }
@keyframes tl-drop { 0% { scale: 1.03; } 100% { scale: 1; } }

/* While dragging */
.tl-card.tl-drag {
  z-index: 3; cursor: grabbing; scale: 1.03;
  border-color: color-mix(in srgb, var(--game) 80%, #fff); background: #2c2c2e;
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .8), 0 0 0 3px color-mix(in srgb, var(--game) 30%, transparent);
}
.tl-dragging, .tl-dragging * { cursor: grabbing; }

/* Finished: the years are in, the rail turns green */
.tl-years .tl-list::before { background: linear-gradient(var(--good), color-mix(in srgb, var(--good) 15%, transparent)); }
.tl-years .tl-btns { display: none; }
.tl-years .tl-card { min-height: 0; }

/* --- Submit, note and history ------------------------------------------------------------- */
.tl-submit { align-self: center; min-width: 200px; margin-top: 6px; font-weight: 600; }
.tl-submit[hidden], .tl-note[hidden] { display: none; }
.tl-note { margin: 0; text-align: center; font-size: .8rem; font-weight: 450; color: var(--muted); }
.tl-history { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 2px; }
.tl-history:empty { display: none; }
.tl-try { display: inline-flex; gap: 3px; }
.tl-try i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.tl-try i.ok { background: var(--good); }

@media (max-width: 380px) {
  .tl-card { gap: 9px; padding: 7px 6px 7px 7px; }
  .tl-list::before { left: 22px; }
  .tl-pos { width: 30px; height: 30px; font-size: .84rem; }
  .tl-text { font-size: .9rem; }
  .tl-mv { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-card, .tl-year, .tl-card.tl-shake, .tl-card.tl-wave { transition: none; animation: none; }
}
/* The shared shine stays put once it stops (repeating tile / tall boxes leave a grey band): fade it out. */
.tl-frame .tl-submit:disabled { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); box-shadow: none; opacity: 1; }

/* Tipp (server hint): a century/decade label on an event, and events put in place by a hint. */
.tl-hint-tag {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; color: #fff;
  background: color-mix(in srgb, var(--game) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--game) 65%, transparent);
}
.tl-hint-tag[hidden] { display: none; }
.tl-card.tl-hinted .tl-pos { background: color-mix(in srgb, var(--game) 70%, #fff); }