@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --glitch-color: #22d3ee;     
    --accent: #3b82f6;           
    --accent-light: #67e8f9;
}

body {
    font-family: 'Press Start 2P', system-ui;
    background: #000;
    color: white;
}
.server-ip {
    display: inline-block;
    max-width: 90vw; /* never bigger than screen */
    padding: 20px 25px;
    border-radius: 20px;
    border: 2px solid #39d5ff;
    text-align: center;
    font-family: monospace;

    font-size: clamp(10px, 3vw, 36px); /* responsive text */
    word-break: break-word; /* allows long IP to wrap */
    overflow-wrap: break-word;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover only on desktop */
@media (hover: hover) and (pointer: fine) {
    .server-ip:hover {
        transform: scale(1.03);
        box-shadow: 0 0 25px var(--glitch-color);
    }
}
.glitch {
    position: relative;
    color: white;
    font-size: 4.5rem;
    letter-spacing: 0.1em;
    animation: glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.glitch::before {
    animation: glitch-anim 2s infinite linear alternate-reverse;
    color: var(--glitch-color);
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(0, 900px, 0, 0);
}
.glitch::after {
    animation: glitch-anim2 1.5s infinite linear alternate-reverse;
    color: var(--glitch-color);
    left: -2px;
    text-shadow: 2px 0 #00ffff;
    clip: rect(0, 900px, 0, 0);
}
@keyframes glitch-anim { 0%{clip:rect(20px,9999px,40px,0)} 5%{clip:rect(70px,9999px,90px,0)} 10%{clip:rect(30px,9999px,60px,0)} 15%{clip:rect(80px,9999px,100px,0)} 20%{clip:rect(10px,9999px,50px,0)} }
@keyframes glitch-anim2 { 0%{clip:rect(60px,9999px,80px,0)} 5%{clip:rect(30px,9999px,50px,0)} 10%{clip:rect(90px,9999px,110px,0)} 15%{clip:rect(40px,9999px,70px,0)} 20%{clip:rect(20px,9999px,40px,0)} }
@keyframes glitch-skew { 0%{transform:skew(0deg)} 10%{transform:skew(5deg)} 20%{transform:skew(-5deg)} 30%{transform:skew(3deg)} }

.minecraft-card:hover {
    transform: translateY(-8px) rotate(1deg);
    box-shadow: 0 0 30px var(--accent);
}
.server-ip:hover {
    transform: scale(0.83);
    box-shadow: 0 0 25px var(--glitch-color);
}
.step-number {
    background: linear-gradient(45deg, var(--accent), #1e40af);
    box-shadow: 0 0 20px var(--glitch-color);
}

.accent-cyan { color: var(--glitch-color); }
.accent-blue { color: var(--accent); }
.border-blue { border-color: var(--accent); }
.bg-blue { background-color: var(--accent); }
.hero-bg { filter: blur(6px); }

.footer-card {
    background: linear-gradient(135deg, #0a2540, #051c2e);
}