/* Timeline: five cards sorted from oldest (top) to newest (bottom). Cards in the right slot lock in green. */

.board{display:flex;flex-direction:column;gap:12px}
.tl-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:30px}
.theme{margin:0;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.66rem}
.tries{display:flex;align-items:center;gap:10px;margin-left:auto}
.tries .hud{color:var(--muted)}
.try-pips{display:inline-flex;gap:5px}
.try-pip{width:20px;height:10px;border-radius:2px;border:1px solid var(--line);background:transparent}
.try-pip.used{background:var(--skip);border-color:var(--skip)}
.try-pip.current{
  border-color:var(--accent-deep);
  background:repeating-linear-gradient(-45deg,var(--accent) 0 4px,var(--accent-deep) 4px 8px);
  background-size:11px 11px;
  animation:pipstripes 1s linear infinite;
}
@keyframes pipstripes{to{background-position:11px 0}}

.axis{margin:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.66rem}
.axis::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Cards ---------- */
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.card{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;gap:6px 10px;align-items:center;
  min-height:62px;padding:8px 8px 8px 12px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .15s ease,background-color .15s ease;
}
.card-no{color:var(--muted);font-size:.8rem}
.pick,.card-title{font-weight:700;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.pick{
  min-height:44px;margin:0;padding:4px 0;border:0;background:none;color:var(--fg);
  text-align:left;cursor:pointer;
}
.pick:focus-visible{outline-offset:4px}
.card:not(.locked):hover{border-color:var(--muted)}
.card.selected{border-color:var(--accent);background:var(--accent-soft)}
.card.selected .card-no{color:var(--accent-text)}
.card.locked{border-color:var(--good);background:var(--good-soft)}
.card.locked .card-title{padding:4px 0}
.card.locked .card-no,.lock-tag{color:var(--good)}
.lock-tag{padding-right:6px;font-size:.64rem}
.card.hit{animation:lockin .5s ease-out}
@keyframes lockin{from{transform:scale(1.03);box-shadow:0 0 0 4px var(--good-soft)}to{transform:none;box-shadow:none}}

.moves{display:flex;gap:6px}
.mv{
  width:44px;height:44px;border-radius:8px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg);font-size:.85rem;line-height:1;
}
.mv:hover:not(:disabled){border-color:var(--accent-deep);color:var(--accent-text)}
.mv:disabled{opacity:.3;cursor:default}

.tl-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px}
.history{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.history .hud{color:var(--muted);font-size:.64rem}
.hrow{display:inline-flex;gap:3px}
.hsq{width:14px;height:14px;border-radius:3px;border:1px solid var(--line);background:var(--surface-2)}
.hsq.ok{background:var(--good);border-color:var(--good)}
.hsq.no{background:var(--skip);border-color:var(--skip)}

/* ---------- Result ---------- */
.order-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.order-list li{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:8px;background:var(--surface-2);border-left:3px solid var(--good);
}
.order-list li.missed{border-left-color:var(--bad)}
.ol-year{color:var(--accent-text);font-size:.85rem}
.ol-title{font-weight:700;overflow-wrap:anywhere}
.ol-mark{font-size:.6rem}
.order-list li.placed .ol-mark{color:var(--good)}
.order-list li.missed .ol-mark{color:var(--bad)}
.share-grid{display:inline-flex;flex-direction:column;gap:4px}
.share-grid .hrow{gap:4px}
.share-grid .hsq{width:20px;height:20px;border-radius:4px}
.legend .hsq{width:20px;height:20px;flex:none}

@media (max-width:420px){
  .card{grid-template-columns:1.1rem minmax(0,1fr) auto;gap:6px 8px;padding-left:10px}
  .tries{margin-left:0}
}