body, html { 
    margin: 0; padding: 0; 
    background-color: #050505;
    background-image: 
        linear-gradient(rgba(0, 255, 70, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 70, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow: hidden; 
    /* Default to Shader Thin */
    font-family: "shader", sans-serif;
    font-weight: 200; 
}

canvas { position: absolute; top: 0; left: 0; z-index: 1; }

#header { position: fixed; top: 20px; width: 100%; text-align: center; z-index: 10; pointer-events: none; }

h1 { 
    color: #00f2ff; 
    margin: 0; 
    text-shadow: 0 0 15px #00f2ff; 
    font-size: 2.5rem; 
    letter-spacing: 2px;
    /* Shader Black */
    font-family: "shader", sans-serif;
    font-weight: 900; 
    text-transform: uppercase;
}

#result-text {
    /* The Win/Loss message also gets the heavy Shader Black treatment */
    font-family: "shader", sans-serif;
    font-weight: 900;
}

p { color: #00c3ff; margin: 5px 0 0; font-size: 1rem; opacity: 0.8; font-weight: 200; }

#instructions {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; text-align: center; color: #00f2ff; font-size: 1rem;
    z-index: 50; pointer-events: none; text-shadow: 0 0 10px #00f2ff;
    font-family: "shader", sans-serif;
    font-weight: 200;
}

/* Glitch Logic */
.glitch { position: relative; animation: glitch-skew 1s infinite linear alternate-reverse; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -2px 0 #ff003c; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00f2ff; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim2 5s infinite linear alternate-reverse; }

@keyframes glitch-anim { 0% { clip: rect(31px, 9999px, 94px, 0); } 20% { clip: rect(62px, 9999px, 42px, 0); } 100% { clip: rect(84px, 9999px, 45px, 0); } }
@keyframes glitch-anim2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 20% { clip: rect(12px, 9999px, 58px, 0); } 100% { clip: rect(54px, 9999px, 7px, 0); } }

#modal { 
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    background: rgba(5, 5, 5, 0.95); border: 1px solid #00f2ff; padding: 40px; text-align: center;
    box-shadow: 0 0 50px rgba(0, 242, 255, 0.3); z-index: 100; color: white; width: 85%; max-width: 400px;
    backdrop-filter: blur(10px);
}

.legal-notice { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 15px; line-height: 1.4; font-weight: 200; }

input { padding: 12px; width: 100%; box-sizing: border-box; background: transparent; border: 1px solid #00f2ff; color: #00f2ff; margin-bottom: 15px; font-family: "shader", sans-serif; font-weight: 200; }
button { background: #00f2ff; border: none; padding: 12px 25px; color: #000; font-weight: 900; cursor: pointer; text-transform: uppercase; font-family: "shader", sans-serif; }

/* Geometric Buttons */
#controls { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: none; grid-template-columns: repeat(3, 65px); gap: 10px; z-index: 30; }
.btn { width: 65px; height: 65px; background: rgba(0, 242, 255, 0.05); border: 1px solid rgba(0, 242, 255, 0.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.arrow { width: 0; height: 0; border-style: solid; }
.up { border-width: 0 10px 15px 10px; border-color: transparent transparent #00f2ff transparent; }
.down { border-width: 15px 10px 0 10px; border-color: #00f2ff transparent transparent transparent; }
.left { border-width: 10px 15px 10px 0; border-color: transparent #00f2ff transparent transparent; }
.right { border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #00f2ff; }

@media (max-width: 768px) { #controls { display: grid; } #instructions { font-size: 0.8rem; bottom: 260px; top: auto; transform: translateX(-50%); } }