:root{--neon-cyan: #22d3ee;--neon-purple: #a855f7;--deep-space: #020617;--glass: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .1)}body{margin:0;background-color:var(--deep-space);color:#f8fafc;font-family:Space Grotesk,Inter,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative;background:radial-gradient(circle at 50% 50%,#1e1b4b,#020617)}.scanline{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 50%,rgba(34,211,238,.03) 50%);background-size:100% 4px;z-index:1000;pointer-events:none}.nebula-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:url(https://www.transparenttextures.com/patterns/stardust.png);opacity:.3;pointer-events:none}.hud-header{height:70px;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;background:#0006;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-bottom:1px solid var(--glass-border);z-index:100}.hud-left{display:flex;flex-direction:column;gap:4px}.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:2px;color:var(--neon-cyan)}.cloud-status{display:flex;align-items:center;gap:6px;font-size:10px;opacity:.6}.cloud-status .dot{width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 8px #4ade80}.hud-center{display:flex;gap:1rem}.stat-pill{background:#ffffff0d;padding:.5rem 1rem;border-radius:20px;border:1px solid var(--glass-border);display:flex;align-items:center;gap:8px;font-family:monospace;font-size:14px}.hud-right{display:flex;gap:.5rem}.hud-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--glass-border);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.hud-btn:hover{background:var(--neon-cyan);color:#000}.main-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}.hero-panel{text-align:center;max-width:500px;background:var(--glass);padding:3rem;border-radius:2rem;border:1px solid var(--glass-border);box-shadow:0 25px 50px -12px #00000080}.blueprint-frame{width:120px;height:120px;margin:0 auto 2rem;position:relative;padding:10px}.blueprint-img{width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:.8}.frame-corner{position:absolute;width:15px;height:15px;border:2px solid var(--neon-cyan)}.tl{top:0;left:0;border-right:0;border-bottom:0}.tr{top:0;right:0;border-left:0;border-bottom:0}.bl{bottom:0;left:0;border-right:0;border-top:0}.br{bottom:0;right:0;border-left:0;border-top:0}.glitch-text{font-size:3rem;font-weight:900;margin:0;text-transform:uppercase;background:linear-gradient(to bottom,#fff 30%,var(--neon-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.diff-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}.diff-card{background:#ffffff08;border:1px solid var(--glass-border);padding:1rem;border-radius:1rem;cursor:pointer;transition:all .3s;color:#fff}.diff-card.active{border-color:var(--neon-cyan);background:#22d3ee1a}.diff-card .label{display:block;font-weight:700;font-size:14px}.diff-card .sub{font-size:10px;opacity:.5}.action-btn{padding:1rem 2.5rem;border-radius:12px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s;border:none}.action-btn.primary{background:var(--neon-cyan);color:#000;box-shadow:0 0 20px #22d3ee66}.action-btn.secondary{background:transparent;border:1px solid var(--neon-cyan);color:var(--neon-cyan)}.grid-container{width:100%;max-width:800px}.grid-layout{display:grid;gap:1rem;perspective:1000px}.memory-card{aspect-ratio:1;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.memory-card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:1rem;border:1px solid var(--glass-border)}.front{background:#1e293b;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(var(--neon-cyan) 1px,transparent 1px);background-size:10px 10px;opacity:.1}.back{background:linear-gradient(135deg,#0f172a,#1e1b4b);transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}.emoji-display{font-size:2.5rem}.match-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:#22d3ee33;display:flex;align-items:center;justify-content:center;color:var(--neon-cyan);border-radius:1rem}.side-guide{position:fixed;right:0;top:0;bottom:0;width:320px;background:#020617e6;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-left:1px solid var(--glass-border);z-index:200;padding:2rem}.guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;color:var(--neon-cyan)}.guide-header button{background:none;border:none;color:#fff;cursor:pointer}.guide-body h4{color:var(--neon-cyan);font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem}.guide-body ul{padding-left:1.2rem;font-size:14px;opacity:.8;line-height:1.8}.sys-info{margin-top:3rem;background:#ffffff08;padding:1rem;border-radius:10px}.log-line{font-family:monospace;font-size:11px;display:flex;justify-content:space-between;margin-bottom:4px}.result-panel{background:var(--glass);padding:3rem;border-radius:2rem;border:1px solid var(--neon-cyan);text-align:center}.pilot-id{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;text-align:left;background:#ffffff0d;padding:1rem;border-radius:15px}.pilot-avatar{width:60px;height:60px;border-radius:50%;border:2px solid var(--neon-cyan)}.score-display{display:flex;gap:2rem;justify-content:center;margin-bottom:2rem}.score-item{display:flex;flex-direction:column}.score-item .tag{font-size:10px;opacity:.5}.score-item .val{font-size:2rem;font-weight:900}.score-item .highlight{color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan)}.hud-decoration{position:absolute;pointer-events:none;opacity:.5}.hud-decoration.bl{bottom:20px;left:20px}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.pulse-icon{animation:pulse 2s infinite}
