.timeline-game .game-hero { background: linear-gradient(135deg, #2a0f4a, #6b2fb3 55%, #ff9f1c); }
.tl-side { background: radial-gradient(circle at top, #43207a, #170b2b); color: #fff; text-align: center; }
.tl-side .buddy p { color: #12124a; }
.tl-machine { display: grid; justify-items: center; gap: 4px; padding: 16px; border: 4px solid #ffd23f; border-radius: 22px; background: linear-gradient(160deg, #241040, #3b1b66); box-shadow: 0 0 24px rgba(255, 210, 63, .35), inset 0 0 18px rgba(0,0,0,.5); }
.tl-machine span { font-size: 2.8rem; line-height: 1; }
.tl-machine strong { min-width: 6ch; padding: 4px 12px; border-radius: 8px; background: #0b0518; color: #ffd23f; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 1.6rem; letter-spacing: .12em; text-shadow: 0 0 8px rgba(255, 210, 63, .8); }
.tl-machine em { color: #d8c6ff; font-size: .75rem; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tl-status { font-weight: 700; }
.tl-track { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 16px; background: #f4efff; overflow-x: auto; }
.tl-end { flex: none; color: #6b2fb3; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.tl-stops { position: relative; display: flex; flex: 1; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl-stops::before { content: ''; position: absolute; top: 9px; right: 4px; left: 4px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #6b2fb3, #ff9f1c); }
.tl-stop { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 88px; padding: 0 0 4px; border: 0; background: none; color: #12124a; text-align: center; }
.tl-pin { z-index: 1; width: 22px; height: 22px; border: 4px solid #6b2fb3; border-radius: 50%; background: #fff; }
.tl-label { min-height: 2.6em; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(43, 15, 74, .12); font-size: .85rem; font-weight: 700; }
.tl-stop.empty .tl-label { border: 2px dashed #c6b3e8; background: transparent; box-shadow: none; color: #8a74b3; font-size: .7rem; text-transform: uppercase; }
.tl-stop.empty .tl-pin { border-color: #c6b3e8; }
button.tl-decade { cursor: pointer; transition: transform .12s; }
button.tl-decade:hover .tl-label, button.tl-decade:focus-visible .tl-label { outline: 3px solid #ff9f1c; }
button.tl-decade:hover { transform: translateY(-2px); }
.tl-decade .tl-label { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 1rem; }
.tl-decade.picked .tl-pin { border-color: #ff9f1c; background: #ffd23f; box-shadow: 0 0 0 5px rgba(255, 159, 28, .3); }
.tl-decade.picked .tl-label { background: #6b2fb3; color: #fff; }
.tl-drop { font-size: 1.6rem; animation: tl-drop .35s ease-out; }
@keyframes tl-drop { from { transform: translateY(-18px); opacity: 0; } }
.tl-event { margin-bottom: 12px; padding: 14px 18px; border: 3px solid #6b2fb3; border-radius: 16px; background: linear-gradient(135deg, #fff, #f4efff); color: #2a0f4a; font-size: 1.15rem; font-weight: 800; text-align: center; box-shadow: 0 6px 0 #d8c6ff; }
.tl-step { margin: 12px 0 6px; font-weight: 800; }
.tl-card { font-weight: 700; }
.mission-feedback .tl-track { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tl-drop { animation: none; } button.tl-decade { transition: none; } }