/* 1. LAYER RESET & INTERSTELLAR CANVAS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: monospace;
}

body {
    background-color: #101014;
    background-image: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExazBkc21ld3ZmbHprY203M3prZmNnd3VuNzF4YXBhZTQyenVwazBxaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/UyYcK4GZKyBHA44JXW/giphy.gif'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 2. OVERLAY LAYER MACHINE */
.screen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* 3. TERMINAL NAVIGATION UTILITIES */
.back-escape-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    text-decoration: none;
    color: #a3ff00;
    background: rgba(0, 0, 0, 0.9);
    border: 1px dashed #a3ff00;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    pointer-events: auto;
    z-index: 100;
    transition: all 0.2s;
}

.back-escape-btn:hover {
    background: #a3ff00;
    color: #000;
    box-shadow: 0 0 15px #a3ff00;
}

/* 4. RETRO INTERACTION CONTAINER */
.win98-alert-box {
    background: #1c1c24; 
    border: 2px solid #333344;
    box-shadow: 8px 8px 0px #000;
    width: 90%;
    max-width: 420px;
    position: relative;
    z-index: 50; /* Floats proudly above sticker background cloud */
}

.win98-title-bar {
    background: #ff00ff;
    color: #000; 
    font-size: 11px; 
    font-weight: bold;
    padding: 6px 10px; 
    display: flex; 
    justify-content: space-between; 
    letter-spacing: 1px;
}

.win98-close {
    cursor: pointer;
    background: #000;
    color: #ff00ff;
    padding: 0 5px;
    border: 1px solid #ff00ff;
}

.win98-content { 
    padding: 16px; 
    display: flex; 
    gap: 14px; 
    align-items: center; 
}

.warning-icon { 
    font-size: 28px; 
    color: #a3ff00; 
    animation: alert-flash 0.8s infinite alternate steps(2); 
}

.win98-content p { 
    font-size: 11px; 
    line-height: 1.5; 
    color: #aaa; 
    text-transform: uppercase;
}

/* 5. HEAVY STREET ART SLAP ENGINE */
.cyber-sticker {
    position: absolute;
    height: auto;
    filter: drop-shadow(5px 5px 0px #000);
}

/* Hard Corner Anchors */
.st-tl {
    top: 0%;
    left: 0%;
    width: 140px;
    transform: rotate(0deg);
}

.st-tr {
    top: 0%;
    right: 0%;
    width: 130px;
    transform: rotate(0deg);
}

.st-bl {
    bottom: 0%;
    left: 0%;
    width: 300px;
    transform: rotate(0deg);
}

.st-br {
    bottom: 0%;
    right: 0%;
    width: 155px;
    transform: rotate(0deg);
}

/* Intentionally Chaotic Filler Scatter Layer */
.st-brazil {
    top: 38%;
    left: 5%;
    width: 100px;
    transform: rotate(25deg);
}

.st-headbang {
    bottom: 35%;
    right: 4%;
    width: 120px;
    transform: rotate(-18deg);
}

.st-lucky {
    top: 1%;
    left: 1%;
    width: 200px;
    height: 300px;
    transform: rotate(0deg);
}

.st-midbot {
    bottom: 0%;
    right: 0%;
    width: 290px;
    transform: rotate(1deg);
}

.st-osaka {
    top: 8%;
    right: 28%;
    width: 110px;
    transform: rotate(14deg);
}

.st-rem {
    top: 10%;
    left: 25%;
    width: 130px;
    transform: rotate(0deg);
}

.st-soul {
    top: 15.5%;
    right: 32%;
    width: 115px;
    transform: rotate(0deg);
}

/* 6. CRUCIAL KEYFRAME MODULES */
@keyframes alert-flash {
    0% {
        color: #a3ff00;
        text-shadow: 0 0 10px rgba(163, 255, 0, 0.8);
    }
    100% {
        color: #ff00ff;
        text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
    }
}

/* Mobile responsive constraints to protect visibility */
@media (max-width: 768px) {
    .cyber-sticker {
        width: 65px !important;
    }
    /* Grouping them tightly so they don't block the alert window text */
    .st-tl { top: 2%; left: 2%; }
    .st-tr { top: 2%; right: 2%; }
    .st-bl { bottom: 2%; left: 2%; }
    .st-br { bottom: 2%; right: 2%; }
    
    /* Hide intense center-fill clutter on tiny mobile viewports */
    .st-brazil, .st-midbot, .st-rem, .st-soul, .st-lucky, .st-osaka {
        display: none;
    }
}