body, html {
    font-family: 'VT323', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: pixelated;
}
.font-press-start {
    font-family: 'Press Start 2P', cursive;
}
/* Pixelated edges effect */
.pixel-border {
    box-shadow: 
        -2px -2px 0px 0px #4a5568, /* top-left */
        2px -2px 0px 0px #4a5568,  /* top-right */
        -2px 2px 0px 0px #4a5568,  /* bottom-left */
        2px 2px 0px 0px #4a5568;   /* bottom-right */
}
.pixel-border-inset {
     box-shadow: 
        inset -2px -2px 0px 0px #1a1a2e,
        inset 2px 2px 0px 0px #1a1a2e;
}

/* Custom checkbox style */
.custom-checkbox {
    appearance: none;
    background-color: transparent;
    border: 2px solid #4a5568;
    width: 20px;
    height: 20px;
}
.custom-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: #3b82f6;
    border-color: #3b82f6;
    background-size: 100% 100%;
}
.task-item.completed span { text-decoration: line-through; color: #718096; }
.task-item.overdue span { color: #ef4444; } /* text-red-500 */
.task-item.overdue { border-left: 4px solid #ef4444; }

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
.fade-out { animation: fadeOut 0.3s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

#badge-unlock-modal { transition: opacity 0.3s ease-in-out; }
.badge-animation-container {
    transform-style: preserve-3d;
    animation: rotate-badge 3.5s ease-in-out forwards;
}
@keyframes rotate-badge {
    0% { transform: scale(0.3) rotateY(0deg); opacity: 0; }
    20% { transform: scale(1.1) rotateY(360deg); opacity: 1; }
    80% { transform: scale(1.1) rotateY(360deg); opacity: 1; }
    100% { transform: scale(0.3) rotateY(0deg); opacity: 0; }
}

::placeholder { color: #718096; opacity: 1; }
.page { display: none; }
.page.active { display: block; }
.nav-button.active { background-color: #4a5568; }
.goal-toggle.active { background-color: #4a5568; }