/* --- 80s Neon Frame --- */
.frame.crt {
    position: relative;
    padding: 14px;
    border-radius: 22px;
    border: 2px solid transparent;
    background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    conic-gradient(from 180deg, #09F, #0FF, #F0F, #FF0, #09F) border-box;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.35),
    0 0 22px rgba(255, 0, 214, 0.25),
    0 0 36px rgba(0, 153, 255, 0.20);
}

.frame.crt > canvas#game {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 18px rgba(0, 255, 255, 0.22),
    0 0 28px rgba(255, 0, 214, 0.18);
}

:root {
    --bg-1: #000000;
    --bg-2: #040112;
    --neon-cyan: #00fff0;
    --neon-magenta: #ff00e6;
    --neon-yellow: #ffee00;
    --neon-purple: #a855f7;
    --panel: #120024;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1200px at 50% 20%, var(--bg-2), var(--bg-1) 70%);
    display: grid;
    place-items: center;
    color: white;
    overflow: hidden;
}

.frame {
    position: relative;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04) inset,
    0 0 24px rgba(255, 0, 214, 0.12),
    0 0 44px rgba(0, 255, 247, 0.10);
}

canvas {
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: block;
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
    background: radial-gradient(600px at 50% 30%, rgba(255, 0, 214, 0.08), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(0, 255, 255, 0.05), rgba(0, 0, 0, 0) 30%),
    #000;
    border-radius: 14px;
    image-rendering: pixelated;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 30px rgba(0, 255, 255, 0.18),
    0 0 60px rgba(255, 0, 214, 0.16);
}

/* Subtle CRT scanlines overlay */
.crt::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    background: repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0) 3px
    );
    mix-blend-mode: overlay;
    opacity: 0.25;
    animation: flicker 3s infinite linear;
}

@keyframes flicker {
    0%, 100% {
        opacity: .22
    }
    50% {
        opacity: .3
    }
}

/* Touch controls */
.touch {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: none;
    gap: 16px;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
}

.touch.show {
    display: flex;
}

.btn {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    border: 2px solid rgba(0, 255, 255, 0.6);
    background: radial-gradient(120px at 30% 30%, rgba(0, 255, 255, 0.15), rgba(255, 0, 214, 0.1));
    color: white;
    font-weight: 700;
    font-size: 22px;
    display: grid;
    place-items: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.btn:active {
    box-shadow: 0 0 18px rgba(255, 0, 214, 0.6) inset;
}

.credit {
    position: fixed;
    bottom: 8px;
    opacity: .35;
    font-size: 12px;
}

.glow {
    text-shadow: 0 0 8px var(--neon-cyan), 0 0 18px var(--neon-magenta);
}