@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@700;900&display=swap');

:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
}

* {
    box-sizing: border-box;
    font-family: 'Noto Sans SC', sans-serif;
}

body {
    color: #ffffff;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.safe-top {
    padding-top: var(--sat);
}

.safe-bottom {
    padding-bottom: var(--sab);
}

/* Hard Edges & High Contrast */
.btn-hard {
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 900;
    transition: all 0.1s;
}

.btn-hard:active {
    transform: scale(0.98);
}

/* Glitch Effect for SOS */
@keyframes glitch {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

.shake {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* Blood Red Pulse */
@keyframes blood-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.pulse-red {
    animation: blood-pulse 2s infinite;
}