*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Fira Code',monospace;color:#f1f5f9;min-height:100vh;overflow-x:hidden;}

#background-container{position:fixed;inset:0;width:100%;height:100%;z-index:-2;transition:transform 0.2s;}
.overlay{position:fixed;inset:0;background:rgba(15,5,5,0.35);z-index:-1;animation: overlayPulse 5s infinite alternate;}

@keyframes overlayPulse {0%{background:rgba(15,5,5,0.3);}100%{background:rgba(30,5,5,0.45);}}

canvas#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;}

/* Container */
.container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;}

/* Name */
.lag-text{font-size:3em;color:#f87171;position:relative;animation: neonPulse 1.5s infinite alternate;text-shadow:0 0 8px #f87171,0 0 16px #ef4444;}
@keyframes neonPulse{0%,100%{text-shadow:0 0 8px #f87171,0 0 16px #ef4444;}50%{text-shadow:0 0 16px #f87171,0 0 32px #ef4444;}}

.subtitle{font-size:1.3em;color:#fca5a5;margin-bottom:25px;}
.avatar{width:160px;height:160px;border-radius:14px;object-fit:cover;border:2px solid #f87171;margin-bottom:25px;transition: transform 0.5s ease, box-shadow 0.3s ease;}
.avatar:hover{transform: scale(1.1) rotate(-3deg);box-shadow: 0 0 20px #f87171, 0 0 40px #ef4444;}

.bio{background:rgba(23,5,5,0.9);padding:20px 24px;max-width:700px;font-size:1em;line-height:1.7em;margin-bottom:30px;white-space: pre-wrap;border-left:4px solid #f87171;}

/* Skills */
.skills{max-width:700px;width:100%;margin-bottom:30px;}
.skill{margin-bottom:8px;transition: all 0.3s ease;}
.skill span{display:block;font-size:0.9em;margin-bottom:3px;transition: color 0.3s;}
.skill:hover span{color: #f87171;}
.skill .bar{background:#222;border-radius:3px;height:10px;overflow:hidden;}
.skill .bar div{height:10px;background:#f87171;width:0;transition: all 0.5s ease-in-out;}
.skill:hover .bar div{height:14px;box-shadow: 0 0 12px #f87171,0 0 20px #ef4444;}

/* Technologies */
.technologies{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:30px;}
.tech-icon{font-size:40px;color:#ef4444;transition:0.3s;text-shadow:0 0 6px #ef4444;}
.tech-icon:hover{color:#f87171;transform:scale(1.3) rotate(-10deg);text-shadow:0 0 12px #f87171,0 0 20px #ef4444;cursor:pointer;}

/* Socials */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:700px;width:100%;margin-bottom:30px;}
.socials a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;color:#f1f5f9;text-decoration:none;border:1px solid rgba(248,113,113,0.3);background: rgba(25,5,5,0.4);transition:0.2s;}
.socials a:hover{background: rgba(248,113,113,0.2);border-color:#f87171;box-shadow:0 0 20px #f87171,0 0 40px #ef4444;}
.socials i{font-size:1.3em;}

/* Terminal */
.terminal{
    background:rgba(25,5,5,0.85);
    border-left:4px solid #ef4444;
    padding:15px;
    margin-bottom:30px;
    max-width:700px;
    width:100%;
    border-radius:6px;
    box-shadow:0 0 15px rgba(255,50,50,0.2);
}
.term-text{
    font-family:'Fira Code',monospace;
    font-size:0.95em;
    color:#f87171;
    white-space:pre-wrap;
    line-height:1.5em;
    text-shadow:0 0 4px #ef4444;
}
.term-text::after{content:'|';animation:blink 1s step-start infinite;}
@keyframes blink{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}

/* Player */
.player{display:flex;align-items:center;gap:12px;max-width:700px;width:100%;padding:10px;background:rgba(25,5,5,0.45);border:1px solid #f87171;border-radius:6px;}
.player button{background:none;border:none;color:#f87171;font-size:1.5em;cursor:pointer;}
#progress{-webkit-appearance:none;flex:1;height:6px;border-radius:3px;background:#555;}
#progress::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#f87171;border-radius:50%;}
#progress::-moz-range-thumb{width:14px;height:14px;background:#f87171;border-radius:50%;}

/* Volume */
.volume-container{
    width:30px;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}
#volume{
    -webkit-appearance:none;
    width:8px;
    height:100%;
    background:#555;
    border-radius:4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
#volume::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    background:#f87171;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 6px #f87171;
}
#volume::-moz-range-thumb{
    width:16px;
    height:16px;
    background:#f87171;
    border-radius:50%;
    cursor:pointer;
}
#volume::-moz-range-track{
    background:#555;
    border-radius:4px;
}
/* Cyber attacks map/*
/* Окно живой карты атак слева */
.attack-map {
    position: fixed;
    top: 40px;
    left: 20px;
    width: 500px;  /* можно поменять */
    height: 720px; /* можно поменять */
    border: 2px solid #f87171;
    box-shadow: 0 0 15px rgba(248,113,113,0.4);
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    z-index: 10;
}

.attack-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* OSINT GOD PANEL */
.osint-panel{
    position:fixed;
    top:40px;
    right:20px;
    width:320px;
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:10;
    font-size:0.85em;
}

.osint-box{
    background:rgba(20,5,5,0.85);
    border-left:3px solid #f87171;
    padding:12px;
    box-shadow:0 0 12px rgba(248,113,113,0.25);
}

.osint-box h3{
    color:#f87171;
    font-size:0.9em;
    margin-bottom:6px;
    letter-spacing:1px;
}

.osint-box pre{
    color:#fca5a5;
    white-space:pre-wrap;
    line-height:1.4em;
    text-shadow:0 0 4px #ef4444;
}

/* mobile */
@media(max-width:1200px){
    .osint-panel{display:none;}
}