:root {
    --bg: #090014;
    --pink: #ff007f;
    --green: #00ff66;
    --font-pixel: 'Press Start 2P', monospace;
    --font-head: 'Teko', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: #fff; font-family: var(--font-head); overflow: hidden; height: 100vh; }

.grid-floor {
    position: fixed; bottom: -50%; left: -50%; width: 200%; height: 200%;
    background-image: linear-gradient(var(--pink) 1px, transparent 1px), linear-gradient(90deg, var(--pink) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    opacity: 0.25; animation: gridMove 2s linear infinite;
}
@keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } }

.header { padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; }
.glitch-logo { font-family: var(--font-pixel); font-size: 1.2rem; color: var(--green); text-shadow: 2px 2px var(--pink); }
.score { font-family: var(--font-pixel); font-size: 0.8rem; color: var(--pink); }

.stage { height: 80vh; display: flex; align-items: center; justify-content: space-around; padding: 0 5rem; position: relative; z-index: 5; }

.cube-container { perspective: 1000px; width: 200px; height: 200px; cursor: pointer; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s ease; transform: rotateX(-20deg) rotateY(30deg); }
.face { position: absolute; width: 200px; height: 200px; border: 2px solid var(--green); background: rgba(0, 255, 102, 0.05); display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 0.8rem; color: var(--green); box-shadow: inset 0 0 15px rgba(0,255,102,0.2); }
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

.info h1 { font-size: 4rem; line-height: 1; letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px var(--pink); }
.info p { font-size: 1.8rem; color: var(--green); margin-bottom: 2rem; }
.arcade-btn { background: var(--pink); color: #fff; border: none; padding: 1rem 2rem; font-family: var(--font-pixel); font-size: 0.9rem; cursor: pointer; transition: 0.2s; box-shadow: 4px 4px 0 #000; }
.arcade-btn:hover { background: var(--green); color: #000; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pink); }