:root{--color-bg: #000000;--color-bg-card: rgba(0, 0, 0, .8);--color-text: #ffffff;--color-text-muted: #aaaaaa;--color-primary: #00ff00;--color-primary-glow: rgba(0, 255, 0, .4);--color-secondary: #ff00ff;--color-secondary-glow: rgba(255, 0, 255, .4);--color-accent: #00ffff;--color-accent-glow: rgba(0, 255, 255, .4);--color-warning: #ffff00;--color-warning-glow: rgba(255, 255, 0, .4);--color-red: #ff0000;--font-mono: "Press Start 2P", cursive;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-mono)}body{background-color:var(--color-bg);color:var(--color-text);overflow:hidden}#game-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;display:block}#ui-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10;display:flex;flex-direction:column}.nav-menu{display:flex;justify-content:center;gap:20px;padding:30px 20px;max-width:1000px;margin:0 auto;width:100%;flex-wrap:wrap;pointer-events:auto}.menu-item{font-size:14px;color:var(--color-primary);text-shadow:0 0 5px var(--color-primary-glow);padding:10px 15px;border:2px solid transparent;text-decoration:none;text-align:center;cursor:crosshair;transition:all .2s ease;user-select:none;position:relative}.menu-item:hover,.menu-item.active{color:var(--color-text);text-shadow:0 0 10px var(--color-accent-glow);border-color:var(--color-accent)}.menu-item.active{border-color:var(--color-secondary);background:#ff00ff1a}.menu-item.hit{animation:flash .3s ease}@keyframes flash{0%{background:var(--color-text);color:var(--color-bg);transform:scale(1.1)}to{background:transparent;color:var(--color-primary);transform:scale(1)}}#content-area{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;pointer-events:auto;overflow-y:auto}.content-card{max-width:800px;width:100%;background:var(--color-bg-card);border:2px solid var(--color-primary);box-shadow:0 0 15px var(--color-primary-glow);padding:40px;border-radius:var(--radius-md);animation:appear .5s ease-out forwards}.content-card h1,.content-card h2{color:var(--color-secondary);text-shadow:0 0 5px var(--color-secondary-glow);margin-bottom:20px;line-height:1.5;font-size:clamp(16px,4vw,24px)}.content-card h3{color:var(--color-accent);margin-bottom:12px;font-size:clamp(12px,2.5vw,16px)}.content-card p{font-size:12px;line-height:2;color:var(--color-text);margin-bottom:12px}.content-card a{color:var(--color-accent);text-decoration:none;font-size:10px;transition:all .2s ease}.content-card a:hover{text-shadow:0 0 10px var(--color-accent-glow)}.content-card ul{list-style:none;padding:0}.content-card li{margin-bottom:15px;padding-left:20px;position:relative;font-size:12px;line-height:2}.content-card li:before{content:"> ";position:absolute;left:0;color:var(--color-accent)}.hint{margin-top:30px;font-size:10px;color:var(--color-text-muted);line-height:1.8}@keyframes appear{0%{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.glitch{position:relative;display:inline-block}.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 var(--color-red);clip:rect(24px,550px,90px,0);animation:glitch-anim-2 3s infinite linear alternate-reverse}.glitch:after{left:-2px;text-shadow:-2px 0 var(--color-accent);clip:rect(85px,550px,140px,0);animation:glitch-anim 2.5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(32px,9999px,86px,0)}20%{clip:rect(59px,9999px,49px,0)}40%{clip:rect(98px,9999px,7px,0)}60%{clip:rect(10px,9999px,52px,0)}80%{clip:rect(48px,9999px,2px,0)}to{clip:rect(23px,9999px,98px,0)}}@keyframes glitch-anim-2{0%{clip:rect(25px,9999px,99px,0)}20%{clip:rect(87px,9999px,30px,0)}40%{clip:rect(9px,9999px,75px,0)}60%{clip:rect(78px,9999px,22px,0)}80%{clip:rect(15px,9999px,63px,0)}to{clip:rect(61px,9999px,12px,0)}}#score-display{position:fixed;bottom:20px;right:20px;font-size:16px;color:var(--color-warning);text-shadow:0 0 5px var(--color-warning-glow);pointer-events:none;z-index:10}.scanlines-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;text-align:left;width:100%}.blog-card{background:#00ff000d;border:2px solid var(--color-primary);padding:20px;border-radius:var(--radius-md);transition:all .3s ease;cursor:crosshair}.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px var(--color-primary-glow);border-color:var(--color-accent)}.blog-card .post-date{font-size:9px;color:var(--color-text-muted);margin-bottom:8px}.blog-card .post-title{font-size:13px;color:var(--color-accent);margin-bottom:8px;line-height:1.6}.blog-card .post-excerpt{font-size:10px;color:var(--color-text-muted);line-height:1.8;margin-bottom:12px}.blog-card .post-link{font-size:9px;color:var(--color-secondary);text-decoration:none;transition:text-shadow .2s}.blog-card .post-link:hover{text-shadow:0 0 8px var(--color-secondary-glow)}.post-content{text-align:left;line-height:2}.post-content h1,.post-content h2,.post-content h3{color:var(--color-secondary);text-shadow:0 0 5px var(--color-secondary-glow);margin-top:30px;margin-bottom:15px;line-height:1.5}.post-content h1{font-size:18px}.post-content h2{font-size:15px}.post-content h3{font-size:12px}.post-content p{font-size:11px;line-height:2.2;margin-bottom:15px}.post-content strong{color:var(--color-accent)}.post-content code{background:#00ff001a;padding:2px 6px;border-radius:var(--radius-sm);font-size:10px;color:var(--color-primary)}.post-content pre{background:#00ff000d;border:1px solid var(--color-primary);padding:15px;border-radius:var(--radius-md);overflow-x:auto;margin-bottom:15px}.post-content ul,.post-content ol{margin:10px 0 15px 20px}.post-content li{font-size:11px;line-height:2;margin-bottom:5px}.post-meta{font-size:9px;color:var(--color-text-muted);margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid rgba(0,255,0,.2)}.post-tag{display:inline-block;background:#00ffff1a;border:1px solid var(--color-accent);padding:2px 8px;border-radius:var(--radius-sm);font-size:8px;color:var(--color-accent);margin-right:5px}.project-card{background:#ff00ff0d;border:2px solid var(--color-secondary);padding:20px;border-radius:var(--radius-md);text-align:left;transition:all .3s ease;margin-bottom:15px}.project-card:hover{transform:translate(5px);box-shadow:0 5px 20px var(--color-secondary-glow)}.project-card h3{color:var(--color-secondary);font-size:13px;margin-bottom:8px}.project-card p{font-size:10px;color:var(--color-text-muted);line-height:1.8}.project-card a{font-size:9px;color:var(--color-accent);text-decoration:none}.arcade-trigger{position:fixed;bottom:20px;left:20px;font-size:8px;color:#ffffff0d;cursor:default;z-index:11;pointer-events:auto;text-decoration:none}.arcade-trigger:hover{color:#ffffff26}@media(max-width:768px){.menu-item{font-size:10px;padding:7px 10px}.nav-menu{gap:8px;padding:15px 10px}.content-card{padding:20px;margin:10px}.content-card h1,.content-card h2{font-size:14px}.content-card p,.content-card li{font-size:10px}#score-display{font-size:12px;bottom:10px;right:10px}.blog-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.glitch:before,.glitch:after{animation:none}.menu-item.hit,.content-card{animation:none}}