body {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 40%, #24243e 100%) fixed;
    font-family: 'Orbitron', Arial, sans-serif;
    color: #00fff7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

h1 {
    margin-top: 25px;
    margin-bottom: 14px;
    letter-spacing: 3px;
    text-shadow: 0 0 12px #00fff7, 0 0 24px #00fff7;
}

.hud-title {
    color: #fff;
    background: linear-gradient(90deg, #00fff7 0%, #8d41ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 8px #00fff7b9);
}

.hud-panel {
    font-size: 2.2rem;
    margin-bottom: 10px;
    letter-spacing: 4px;
    user-select: none;
}

.hud-label {
    color: #00fff7;
    text-shadow: 0 0 8px #00fff7, 0 0 4px #fff;
    font-weight: bold;
}

.hud-sep {
    color: #fff;
    text-shadow: 0 0 8px #8d41ff, 0 0 2px #fff;
}

#pongCanvas {
    display: block;
    margin: 18px auto 0 auto;
    background: transparent;
    border: 2.5px solid #00fff7;
    border-radius: 18px;
    box-shadow: 0 0 48px #00fff7a8, 0 0 8px #fff3;
}

canvas {
    background: transparent;
}