:root{--neon-blue: #00f2ff;--neon-pink: #ff007a;--neon-purple: #bc13fe;--bg-dark: #05050a;--grid-line: rgba(0, 242, 255, .1)}body{margin:0;background:var(--bg-dark);color:#fff;font-family:JetBrains Mono,monospace;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative;transition:background 1s}.app-container.dungeon-mode{background:radial-gradient(circle,#1a0000,#05050a);--grid-line: rgba(255, 0, 122, .2)}.hud-top{padding:20px 40px;display:flex;justify-content:space-between;align-items:center;z-index:100;background:linear-gradient(to bottom,rgba(0,242,255,.1),transparent)}.stat-box{display:flex;flex-direction:column}.stat-box.center{align-items:center}.stat-box.right{align-items:flex-end;gap:5px}.label{font-size:10px;color:var(--neon-blue);letter-spacing:2px}.value{font-size:28px;font-weight:700;text-shadow:0 0 15px var(--neon-blue)}.cloud-tag{font-size:9px;padding:2px 8px;border:1px solid var(--neon-blue);border-radius:10px;color:var(--neon-blue)}.resource{display:flex;align-items:center;gap:5px;color:var(--neon-purple);font-size:14px}.viewport-3d{flex:1;perspective:1000px;display:flex;align-items:center;justify-content:center}.matrix-grid{width:600px;height:600px;background:#00f2ff08;border:2px solid var(--grid-line);position:relative;transform:rotateX(45deg) rotate(-15deg);transform-style:preserve-3d;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:5% 5%}.dungeon-mode .matrix-grid{border-color:var(--neon-pink);box-shadow:0 0 50px #ff007a33}.snake-part{position:absolute;width:5%;height:5%;background:var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);border-radius:2px;transform:translateZ(10px)}.snake-part.head{background:#fff;box-shadow:0 0 25px #fff,0 0 40px var(--neon-blue);z-index:10}.snake-part.phasing{opacity:.4;background:var(--neon-purple);box-shadow:0 0 20px var(--neon-purple)}.eye-glow{position:absolute;top:20%;left:20%;width:60%;height:20%;background:var(--neon-pink);box-shadow:0 0 10px var(--neon-pink)}.food{position:absolute;width:5%;height:5%;background:#fff;box-shadow:0 0 20px #fff;z-index:5}.portal-entity{position:absolute;width:15%;height:15%;transform:translate(-50%,-50%) translateZ(20px);cursor:pointer;z-index:20}.portal-entity img{width:100%;height:100%;filter:drop-shadow(0 0 20px var(--neon-purple))}.portal-label{position:absolute;bottom:-20px;width:200px;left:50%;transform:translate(-50%);font-size:10px;color:var(--neon-purple);text-align:center}.glitch-block{position:absolute;width:5%;height:5%;z-index:5;animation:glitch-anim .2s infinite}@keyframes glitch-anim{0%{transform:translate(0)}50%{transform:translate(2px,-2px);filter:hue-rotate(90deg)}to{transform:translate(0)}}.skill-bar{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;gap:20px;z-index:100}.skill-slot{width:60px;height:60px;border:1px solid rgba(255,255,255,.2);background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:.3s}.skill-slot.active{border-color:var(--neon-blue);box-shadow:0 0 20px var(--neon-blue)}.skill-slot.on-cd{opacity:.5;cursor:not-allowed}.skill-slot img{width:30px;height:30px}.key-hint{position:absolute;top:-10px;right:-10px;background:var(--neon-blue);color:#000;font-size:10px;padding:2px 5px;font-weight:700}.cd-overlay{position:absolute;bottom:0;width:100%;background:#fff3;transition:height 1s linear}.skill-name{font-size:8px;margin-top:4px;color:#ffffff80}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{text-align:center}.glitch-text{font-size:72px;font-weight:700;letter-spacing:10px;position:relative;text-shadow:2px 2px var(--neon-pink),-2px -2px var(--neon-blue)}.start-btn{background:transparent;border:1px solid var(--neon-blue);color:var(--neon-blue);padding:15px 40px;font-size:18px;cursor:pointer;display:flex;align-items:center;gap:10px;margin:40px auto;transition:.3s}.start-btn:hover{background:var(--neon-blue);color:#000;box-shadow:0 0 30px var(--neon-blue)}.controls-guide{display:flex;gap:20px;font-size:12px;color:#fff6}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.1) 50%);background-size:100% 4px;pointer-events:none}
