body {
    background-image: url('fall_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #121212; /* Fallback color */
    color: #ffffff;
    font-family: 'Noto Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
    overflow: hidden;
}

#countdown-container {
    padding: 2rem 3rem;
    background-color: rgba(30, 30, 30, 0.85);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; z-index: 1;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 1px;
}

#timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* New styles for additional target timers */
.targets {
    margin-top: 1.5rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.target {
    background: rgba(20,20,20,0.6);
    padding: 0.8rem 1rem;
    border-radius: 10px;
    min-width: 260px;
}
.target h2 {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
    font-weight: 400;
    color: #ddd;
}
.timer-row {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.time-unit span {
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 1;
    font-family: 'Space Mono','Courier New', monospace;
    color: #ff9900;
}

.time-unit label {
    font-size: 1rem;
    text-transform: uppercase;
    color: #aaaaaa;
    margin-top: 0.5rem;
    letter-spacing: 2px;
}

.versions { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; }
.version-item { background: rgba(20,20,20,0.6); padding: 0.8rem 1rem; border-radius: 10px; min-width: 220px; }
.version-item .label { font-size: 0.9rem; color: #ddd; margin-bottom: 0.4rem; }
.version-item .value { font-family: 'Roboto Mono','Courier New', monospace; font-size: 1.4rem; color: #ff9900; }

.change-info { font-size: 0.85rem; color: #cfcfcf; margin-top: 0.35rem; font-family: 'Roboto', sans-serif; }
.change-info strong { color: #ffb74d; font-family: 'Roboto Mono', monospace; }

#add-game-widget { margin-top: 1rem; display:flex; gap:0.6rem; justify-content:center; align-items:center; flex-wrap:wrap; }
#add-game-widget input{min-width:260px;padding:0.45rem 0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:#fff}
#add-game-widget button{padding:0.45rem 0.8rem;border-radius:8px;border:none;background:#ff9900;color:#111;cursor:pointer}
#custom-result .value{color:#ff9900}

#antlion-container {
    position: fixed;
    bottom: -400px; /* Start off-screen */
    right: 5vw;
    transition: bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
    filter: drop-shadow(0px -5px 15px rgba(0,0,0,0.5));
    pointer-events: none; /* Make it non-interactive */
}

#antlion-container.show {
    bottom: -80px; /* Emerge from bottom */
}

#antlion-img {
    width: 300px;
    height: auto;
    display: block;
    transform: rotate(5deg);
}

body::after {
    content: "";
    position: fixed;
    right: 2vw; bottom: 0;
    width: min(28vw, 340px); height: min(70vh, 900px);
    background: url('gman.png') bottom right / contain no-repeat;
    opacity: 0.22; filter: saturate(0) contrast(1.05);
    pointer-events: none; z-index: 0;
}

#dvd-trigger{position:fixed;left:2vw;bottom:2vh;z-index:11;display:flex;flex-direction:column;align-items:center;cursor:pointer}
#dvd-trigger img{width:min(14vw,100px);filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
#dvd-label{ 
    margin-top:.3rem;font-family:'Noto Sans', Arial, sans-serif; color:#ffd54f;
    text-shadow:0 2px 6px rgba(0,0,0,.5)
}

#music-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:20}
#music-modal.show{display:flex}
#music-modal .modal-content{background:#fff;border-radius:12px;max-width:560px;width:90%;padding:1rem 1.2rem;position:relative;color:#111}
#music-modal .modal-content h3 { margin: 0 0 .25rem 0; }
#music-modal .modal-content a{color:#0645ad}
#music-modal .gman-comic{width:96px;float:right;margin:0 0 .5rem .5rem;filter:contrast(1.2)saturate(1.2)brightness(1.05);cursor:pointer}
#music-modal .close-btn{position:absolute;top:.4rem;right:.6rem;background:#000;color:#fff;border:none;border-radius:999px;width:28px;height:28px;cursor:pointer}
#music-modal .controls{margin-top:.6rem;display:flex;gap:1rem;align-items:center}
#now-playing{font-size:0.95rem;color:#333;margin-top:0.25rem}
#now-playing #track-name{font-family:'Roboto Mono','Courier New',monospace;color:#ff9900;margin-left:0.25rem}
#music-modal .modal-content pre{
    background:#f5f5f7; padding:.6rem .8rem; border-radius:8px;
    font-family:'Space Mono','Roboto Mono','Courier New',monospace; font-size:.9rem; color:#111;
    overflow:auto; max-height:220px; margin-top:.3rem;
}

#code-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:30}
#code-modal.show{display:flex}
#code-modal .modal-content{background:#fff;border-radius:12px;max-width:720px;width:92%;padding:1rem 1.2rem;position:relative;color:#111}
#code-modal .close-btn{position:absolute;top:.4rem;right:.6rem;background:#000;color:#fff;border:none;border-radius:999px;width:28px;height:28px;cursor:pointer}
#code-modal pre{background:#f5f5f7;padding:.6rem .8rem;border-radius:8px;font-family:'Space Mono','Roboto Mono','Courier New',monospace;font-size:.9rem;color:#111;overflow:auto;max-height:50vh}
#code-modal .controls{margin-top:.6rem;display:flex;gap:.6rem}
#new-code-btn{padding:.45rem .8rem;border-radius:8px;border:1px solid #111;background:#fff;color:#111;cursor:pointer}

@media (max-width: 600px) {
    #countdown-container { padding: 1rem; border-radius: 12px; width: calc(100% - 2rem); }
    .time-unit span { font-size: 2.2rem; min-width: unset; }
    .targets { flex-direction: column; gap: 0.8rem; align-items: center; }
    .target { min-width: unset; width: 100%; padding: 0.6rem; }
    .versions { flex-direction: column; gap: 0.8rem; align-items: center; }
    .version-item { width: 100%; min-width: unset; padding: 0.6rem; }
    #antlion-img { width: 160px; transform: rotate(3deg); }
    #antlion-container.show { bottom: -60px; right: 3vw; }
    body { height: auto; min-height: 100dvh; overflow-y: auto; padding: 1rem 0; }
    #timer { gap: 0.6rem; }
    .time-unit { min-width: 72px; }
    body::after { width: 45vw; right: -4vw; opacity: 0.18; }
    #dvd-trigger img{width:90px}
    #code-modal .modal-content{width:94%}
}

@media (max-width: 380px) {
    .time-unit span { font-size: 1.8rem; }
    .target { padding: 0.5rem; }
}