/* style.css */
/* --- Global Styles --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f0f2f5;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

/* --- Header --- */
.header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.header-logo { font-size: 22px; }
.header-name { font-size: 18px; font-weight: 700; color: #1a1a2e; letter-spacing: 0.3px; }
.header-tag { font-size: 11px; background: #e8f0fe; color: #3b5bdb; padding: 2px 7px; border-radius: 20px; font-weight: 600; }

/* --- Main Card (Updated for less height) --- */
.card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 420px;
    padding: 16px 20px; /* Reduced vertical padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Tighter spacing between elements */
    text-align: center;
}
.card-icon { font-size: 32px; line-height: 1; margin-bottom: -5px; }
.card-title { font-size: 16px; font-weight: 700; color: #1a1a2e; }
.card-sub { font-size: 12px; color: #666; line-height: 1.3; max-width: 300px; }

/* --- Compact Timer & Progress --- */
.timer-wrap { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0; 
    margin: 5px 0; /* Minimal vertical footprint */
}
#countdown { 
    font-size: 28px; 
    font-weight: 800; 
    color: #3b5bdb; 
    line-height: 1; 
}
.timer-label { 
    font-size: 9px; 
    color: #aaa; 
    letter-spacing: 0.5px; 
}
.progress-track { width: 100%; height: 4px; background: #e9ecef; border-radius: 99px; overflow: hidden; margin-top: 5px; }
#progressBar { height: 100%; width: 100%; background: linear-gradient(90deg, #3b5bdb, #748ffc); border-radius: 99px; transition: width 1s linear; }

/* --- Buttons --- */
#watchBtn { display: none; width: 100%; padding: 15px; font-size: 17px; font-weight: 700; color: #fff; background: #2ecc71; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; text-align: center; box-shadow: 0 4px 14px rgba(46,204,113,0.35); }
.dirtify-wrap { width: 100%; background: #f0f2f5; padding: 10px 16px 6px; position: fixed; bottom: 28px; left: 0; right: 0; z-index: 999; display: flex; justify-content: center; }

/* --- Dirtify Button (The Glowing Pulse) --- */
#dirtifyBtn {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #e84393, #d63080);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    animation: smooth-pulse 3s infinite ease-in-out;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

#dirtifyBtn:hover {
    transform: scale(1.02);
    filter: brightness(1.15);
    box-shadow: 0 0 20px rgba(232, 67, 147, 0.8);
}

@keyframes smooth-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 67, 147, 0.7); }
    50% { box-shadow: 0 0 0 8px rgba(232, 67, 147, 0.3); }
}

/* --- Footer --- */
.footer { width: 100%; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; font-size: 11px; color: #bbb; text-align: center; padding: 4px 0 6px; background: #f0f2f5; }
.footer a { color: #bbb; text-decoration: none; }