@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@keyframes shake-horizontal { 0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); } }

@keyframes fade-in-up { from { opacity: 0;
    transform: translateY(20px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes scale-in { from { opacity: 0;
    transform: scale(0.5); }
  to { opacity: 1;
    transform: scale(1); } }

@keyframes card-appear { from { opacity: 0;
    transform: translateY(20px) scale(0.98); }
  to { opacity: 1;
    transform: translateY(0) scale(1); } }

@keyframes error-appear { from { opacity: 0;
    transform: translateY(-4px); }
  to { opacity: 1;
    transform: translateY(0); } }

:root { --wordle-grey: #787c7e; --wordle-yellow: #d4a62c; --wordle-green: #50b852; }

.history-page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.history-header { margin-bottom: 1.5rem; text-align: center; animation: fade-in-up 0.5s ease; }

.back-link { display: block; margin-top: 2rem; color: #888; text-align: center; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }

.back-link:hover { color: #50b852; }

.history-title { margin: 0 0 0.3rem; color: #1a1a2e; font-family: "Lora", serif; font-size: 1.6rem; font-weight: 700; }

.history-subtitle { margin: 0; color: #888; letter-spacing: 0.08em; font-size: 0.8rem; }

.history-timeline { position: relative; }

.history-timeline::before { position: absolute; top: 0; left: 17px; bottom: 0; width: 2px; background: linear-gradient(to bottom, #50b852 0%, rgba(221, 221, 221, 0.2) 100%); content: ""; }

.history-entry { display: flex; position: relative; align-items: flex-start; gap: 1rem; padding: 0.6rem 0; animation: fade-in-up 0.4s ease both; }

.history-entry:nth-child(1) { animation-delay: 0.04s; }

.history-entry:nth-child(2) { animation-delay: 0.08s; }

.history-entry:nth-child(3) { animation-delay: 0.12s; }

.history-entry:nth-child(4) { animation-delay: 0.16s; }

.history-entry:nth-child(5) { animation-delay: 0.2s; }

.history-entry:nth-child(6) { animation-delay: 0.24s; }

.history-entry:nth-child(7) { animation-delay: 0.28s; }

.history-entry:nth-child(8) { animation-delay: 0.32s; }

.history-entry:nth-child(9) { animation-delay: 0.36s; }

.history-entry:nth-child(10) { animation-delay: 0.4s; }

.history-entry:nth-child(11) { animation-delay: 0.44s; }

.history-entry:nth-child(12) { animation-delay: 0.48s; }

.history-entry:nth-child(13) { animation-delay: 0.52s; }

.history-entry:nth-child(14) { animation-delay: 0.56s; }

.history-entry:nth-child(15) { animation-delay: 0.6s; }

.history-entry:nth-child(16) { animation-delay: 0.64s; }

.history-entry:nth-child(17) { animation-delay: 0.68s; }

.history-entry:nth-child(18) { animation-delay: 0.72s; }

.history-entry:nth-child(19) { animation-delay: 0.76s; }

.history-entry:nth-child(20) { animation-delay: 0.8s; }

.history-entry .entry-version { display: flex; z-index: 1; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 36px; color: white; background: #555; font-family: "Lora", serif; font-size: 0.8rem; font-weight: 700; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.history-entry .entry-body { flex: 1; padding-top: 0.1rem; }

.history-entry .entry-score { display: inline-block; margin-bottom: 0.25rem; padding: 0.1rem 0.6rem; color: #3d983f; background: rgba(80, 184, 82, 0.1); font-family: "Consolas", "Monaco", monospace; font-size: 0.75rem; font-weight: 600; border-radius: 20px; }

.history-entry .entry-description { margin: 0; color: #555; line-height: 1.5; font-size: 0.8rem; }

.history-entry.history-entry-latest .entry-version { background: linear-gradient(135deg, #50b852, #3d983f); box-shadow: 0 3px 12px rgba(80, 184, 82, 0.25); }

.history-entry.history-entry-latest .entry-score { background: rgba(80, 184, 82, 0.15); font-weight: 700; }

.history-entry.history-entry-latest .entry-description { color: #1a1a2e; }

@media (max-width: 576px) { .history-page { padding: 1rem 1rem 3rem; } .history-timeline::before { left: 14px; } .history-entry { gap: 0.75rem; } .history-entry .entry-version { width: 30px; min-width: 30px; height: 30px; font-size: 0.7rem; border-radius: 8px; } .history-entry .entry-description { font-size: 0.75rem; } }