:root {
    --bg-top: #080a16;
    --bg-bottom: #161f3f;
    --electric: #7df4ff;
    --electric-2: #b9a7ff;
    --spark: #ffe86b;
    --surface: rgba(9, 15, 34, 0.86);
    --line: rgba(125, 244, 255, 0.48);
    --text: #f1f7ff;
    --text-soft: #c7d7f0;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: "Exo 2", sans-serif;
    color: var(--text);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 16px;
    padding: 18px 12px 24px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 16%, rgba(125, 244, 255, 0.12), transparent 36%),
        radial-gradient(circle at 86% 10%, rgba(185, 167, 255, 0.16), transparent 36%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

.storm-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background:
        repeating-linear-gradient(120deg,
            transparent 0,
            transparent 70px,
            rgba(125, 244, 255, 0.24) 72px,
            transparent 74px,
            transparent 130px,
            rgba(255, 232, 107, 0.2) 132px,
            transparent 134px);
    animation: stormDrift 14s linear infinite;
}

@keyframes stormDrift {
    from {
        transform: translateX(-40px) translateY(0);
    }
    to {
        transform: translateX(40px) translateY(20px);
    }
}

.hero {
    width: min(1200px, 96vw);
    padding: 18px 18px 20px;
    text-align: center;
    border-radius: 18px;
    border: 2px solid var(--line);
    background:
        linear-gradient(160deg, rgba(8, 13, 28, 0.92), rgba(17, 29, 61, 0.84));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(0, 0, 0, 0.42);
    position: relative;
    z-index: 2;
}

.hero::before,
.hero::after {
    content: "⚡";
    position: absolute;
    top: 10px;
    font-size: 1.35rem;
    color: var(--spark);
    text-shadow: 0 0 10px rgba(255, 232, 107, 0.8);
}

.hero::before {
    left: 16px;
}

.hero::after {
    right: 16px;
}

.badge {
    margin: 0;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 244, 255, 0.55);
    background: rgba(125, 244, 255, 0.16);
    color: #dbfaff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 700;
}

h1 {
    margin: 10px 0 8px;
    font-family: "Black Ops One", system-ui;
    font-size: clamp(1.8rem, 5vw, 3rem);
    letter-spacing: 0.03em;
    text-shadow:
        0 0 10px rgba(125, 244, 255, 0.7),
        0 0 20px rgba(185, 167, 255, 0.45);
}

.hero p {
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}

.arena {
    width: min(1200px, 96vw);
    padding: 12px;
    border-radius: 16px;
    border: 2px solid rgba(185, 167, 255, 0.5);
    background:
        linear-gradient(180deg, rgba(11, 18, 38, 0.94), rgba(14, 23, 48, 0.88));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(0, 0, 0, 0.44);
    position: relative;
    z-index: 2;
}

.arena::before {
    content: "⚡ ⚡ ⚡";
    position: absolute;
    top: -14px;
    right: 14px;
    font-size: 1rem;
    letter-spacing: 0.3em;
    color: var(--spark);
    text-shadow: 0 0 12px rgba(255, 232, 107, 0.75);
}

canvas {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    border: 2px solid rgba(125, 244, 255, 0.45);
    background: #0f1f3f;
}

@media (max-width: 700px) {
    body {
        gap: 10px;
        padding: 10px 8px 16px;
    }

    .hero,
    .arena {
        border-radius: 12px;
        padding: 10px;
    }
}