:root {
    --chassis-base: #a8724d; 
    --chassis-dark: #8b5a39;
    --chassis-light: #c28e6b;
    --gear-color: #5c5c5c;
    --gear-dark: #2a2a2a;
    --brass: #b5954a;
    --brass-dark: #7a632d;
    --task-bg: #202020;
    --task-dark: #151515;
    --chalk: #f4f4f4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Kalam', cursive;
    background: radial-gradient(circle at center 40%, #ffefd5, #d2b48c, #8b5a2b);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.desk {
    display: flex;
    align-items: center;
    gap: 5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
}

/* --- The Realistic Notebook --- */
.notebook {
    position: relative;
    background-color: #fdfbf7;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 39px,
        #e8e8e8 39px,
        #e8e8e8 40px
    );
    background-position: 0 45px;
    width: 380px; /* WIDENED BOOK */
    padding: 2.5rem 2rem 2rem 2.5rem;
    border-radius: 4px 15px 15px 4px;
    box-shadow: 
        15px 15px 25px rgba(0,0,0,0.15),
        inset 20px 0 20px -15px rgba(0,0,0,0.06);
    z-index: 5;
    transform: none; 
}

.notebook::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 3px;
    bottom: -3px;
    width: 12px;
    background: repeating-linear-gradient(
        to right,
        #e0dfda,
        #e0dfda 1px,
        #f5f4ef 1px,
        #f5f4ef 2px
    );
    border-radius: 8px 0 0 8px;
    box-shadow: inset 4px 0 8px rgba(0,0,0,0.05);
    transform: perspective(500px) rotateY(-25deg);
    transform-origin: right;
}

.notebook::after {
    content: '';
    position: absolute;
    left: -16px;
    top: -2px;
    bottom: -6px;
    width: 16px;
    background: #a8a9ab; 
    z-index: -1;
    border-radius: 4px 0 0 4px;
    box-shadow: -4px 6px 12px rgba(0,0,0,0.2);
}

.notebook-date {
    font-family: 'Caveat', cursive;
    font-size: 1.8rem;
    color: #666;
    text-align: center;
    margin-bottom: 1.5rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #aaa;
    letter-spacing: 2px;
}

#todo-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

#todo-input {
    font-family: 'Caveat', cursive;
    font-size: 1.8rem;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    color: #3b4252;
    width: 100%;
}

#todo-input::placeholder {
    color: #a0a0a0;
}

.add-btn {
    background: transparent;
    color: #5c728a;
    border: 2px solid #5c728a;
    padding: 0.5rem;
    font-size: 1.2rem;
    font-family: 'Kalam', cursive;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.1s;
    font-weight: bold;
}

.add-btn:hover {
    background: #5c728a;
    color: #fff;
}

.notebook-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spin-btn {
    width: 100%;
    background: linear-gradient(135deg, #fceeb5, #b5954a);
    color: #333;
    border: 2px solid #7a632d;
    padding: 0.8rem;
    font-size: 1.2rem;
    font-family: 'Kalam', cursive;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 0 #7a632d, 0 5px 10px rgba(0,0,0,0.1);
    transition: all 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spin-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #7a632d, 0 2px 5px rgba(0,0,0,0.1);
}

.spin-btn:hover {
    filter: brightness(1.1);
}

.spin-btn:disabled {
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 0 #7a632d;
}

.clear-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed #aaa;
    color: #777;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: 'Kalam', cursive;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-btn:hover {
    border-color: #888;
    color: #444;
    background: rgba(0,0,0,0.02);
}

/* --- 3D Scene --- */
.scene {
    perspective: 1500px;
    width: 440px; /* WIDENED SCENE */
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chassis {
    position: relative;
    width: 380px; /* WIDENED MACHINE */
    height: 600px;
    background-color: var(--chassis-base); 
    border-radius: 12px 25px 25px 12px;
    transform: rotateY(-8deg) rotateX(2deg); 
    transform-style: preserve-3d;
    
    box-shadow: 
        -15px 25px 30px rgba(0,0,0,0.4), 
        inset 0 3px 3px rgba(255,255,255,0.2), 
        inset 5px 5px 15px rgba(255,255,255,0.1),
        inset -5px -5px 15px rgba(0,0,0,0.3);
    border-left: 12px solid var(--chassis-dark);
}

.chassis::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 32px;
    height: 100%;
    background: var(--chassis-dark);
    transform-origin: right;
    transform: rotateY(-90deg);
}

.screw {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ddd, #777);
    border-radius: 50%;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.4);
    z-index: 10;
}
.screw::after {
    content: '';
    position: absolute;
    top: 50%; left: 10%; right: 10%; height: 1.5px;
    background: #444;
    transform: translateY(-50%) rotate(45deg);
}
.top-left { top: 12px; left: 12px; }
.top-right { top: 12px; right: 12px; }
.bottom-left { bottom: 12px; left: 12px; }
.bottom-right { bottom: 12px; right: 12px; }

.gear {
    position: absolute;
    left: -40px;
    top: 250px;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--gear-color), var(--gear-dark));
    border-radius: 50%;
    transform: translateZ(-20px) rotateY(-5deg);
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.8),
        -5px 5px 15px rgba(0,0,0,0.5),
        0 0 5px rgba(255,255,255,0.2);
    z-index: -1;
    will-change: transform;
}

.gear::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 8deg,
        var(--gear-dark) 8deg 16deg
    );
    -webkit-mask-image: radial-gradient(transparent 58%, black 59%);
    mask-image: radial-gradient(transparent 58%, black 59%);
}

.small-gear { display: none; }

.rod {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 8px;
    background: linear-gradient(to right, #666, #ccc 30%, #fff 50%, #ccc 70%, #555);
    border-radius: 4px;
    box-shadow: 3px 0 8px rgba(0,0,0,0.6);
    z-index: 2;
}

.rod-left { left: 30px; }
.rod-right { left: 100px; }

/* Chassis Bracket */
.chassis-bracket {
    position: absolute;
    top: 25px; 
    left: 0;
    width: 125px; 
    height: 28px;
    background-color: var(--chassis-base);
    transform: translateY(var(--y-pos)) translateZ(30px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    will-change: transform;
    border-radius: 14px 0 0 14px; 
    box-shadow: 0 8px 12px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.2);
    z-index: 10;
    pointer-events: none; /* FIX: Prevents bracket from blocking clicks on tasks underneath */
}

.bracket-pointer {
    position: absolute;
    right: -14px; 
    top: 0;
    width: 0; 
    height: 0; 
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid var(--chassis-base);
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));
}

.chassis-bracket::before, .chassis-bracket::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ddd, #777);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.4);
}
.chassis-bracket::before { left: 29px; }
.chassis-bracket::after { left: 99px; }

/* Tasks container */
.tasks-wrapper {
    position: absolute;
    left: 110px;
    top: 25px;
    width: 250px; /* Narrowed slightly to add padding between tasks and right edge */
    height: 550px; 
    z-index: 1;
    perspective: 1000px;
    overflow: hidden; 
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 25px, black calc(100% - 25px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, black 25px, black calc(100% - 25px), transparent 100%);
}

/* Individual Task & Divider Block */
.task-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 38px; 
    z-index: 10;
    background-color: var(--task-bg);
    border-radius: 0 10px 10px 0;
    
    color: var(--chalk);
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    
    /* Truncation & Block settings */
    display: block; 
    line-height: 38px; 
    padding: 0 25px 0 15px; /* Added text padding on right */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    
    cursor: pointer;
    box-shadow: 
        3px 6px 10px rgba(0,0,0,0.6), /* Elevated shadow */
        inset 0 1.5px 1px rgba(255,255,255,0.1);
        
    transform-origin: left center;
    transform: translateY(var(--y-pos)); 
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.4s ease, 
                filter 0.4s ease;
    will-change: transform;
    
    user-select: none;
    letter-spacing: 1px;
}

.task-block:hover {
    transform: translateY(var(--y-pos));
    filter: brightness(1.15);
    z-index: 20;
}

.task-block.finished-item {
    filter: brightness(0.6) grayscale(0.5);
    color: #999;
    transform: translateY(var(--y-pos));
    box-shadow: 
        1px 3px 5px rgba(0,0,0,0.5),
        inset 0 1.5px 1px rgba(255,255,255,0.05);
}

.task-block.finished-item:hover {
    transform: translateY(var(--y-pos));
    filter: brightness(0.8) grayscale(0.5);
}

.task-block.jenga-sliding-in {
    transform: translateY(var(--y-pos)) translateX(260px) !important;
    opacity: 0 !important;
}

.divider {
    background-color: var(--chassis-light);
    color: var(--chassis-dark);
    font-family: 'Kalam', cursive;
    /* Flex overrides block for the divider to center text */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
    box-shadow: 3px 6px 10px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,255,255,0.3);
    cursor: default;
    z-index: 10;
    height: 42px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 0 8px 8px 0;
    transform: translateY(var(--y-pos)); 
}

.divider:hover {
    transform: translateY(var(--y-pos));
    filter: none;
}

/* Custom Tooltip */
.custom-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-family: 'Caveat', cursive;
    white-space: nowrap;
    opacity: 0;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    transform: translate(-50%, -100%);
    transition: opacity 0.15s ease;
}