* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a1f; color:#00f0ff; font-family:monospace; overflow:hidden; }

header {
    position:fixed; top:0; left:0; right:0; height:60px;
    background:#001122; border-bottom:2px solid #00f0ff;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 20px; z-index:1000;
}
.logo img { height:40px; }
.hamburger { font-size:28px; cursor:pointer; }
.wallet-info { font-size:14px; background:#112233; padding:6px 12px; border-radius:9999px; }

#canvas {
    position:absolute; top:60px; bottom:60px; left:0; right:0;
    background:radial-gradient(circle at center, #112233 0%, #0a0a1f 100%);
    overflow:hidden;
}
.robot {
    position:absolute; width:120px; height:120px; transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
    filter:drop-shadow(0 0 20px #00f0ff);
}
.robot.teal svg circle:first-child { fill:#00f0ff; }

.xp-bar {
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    width:320px; height:24px; background:#112233; border:2px solid #00f0ff; border-radius:9999px; overflow:hidden;
}
.xp-fill { height:100%; background:linear-gradient(90deg,#00f0ff,#00aaff); transition:width 1s; }
.xp-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; white-space:nowrap; }

.state-feed {
    position:absolute; bottom:20px; left:20px; right:20px; height:48px;
    background:#001122; border:1px solid #00f0ff; border-radius:8px;
    display:flex; align-items:center; padding:0 15px; font-size:13px; overflow:hidden;
}
.state-feed::before { content:''; display:inline-block; width:8px; height:8px; background:#00f0ff; border-radius:50%; margin-right:8px; animation:pulse 1.5s infinite; }

.speed-toggle { position:absolute; top:20px; right:20px; display:flex; gap:8px; align-items:center; background:#112233; padding:6px 12px; border-radius:9999px; }

.floating-card {
    background:#112233; border:3px solid #00f0ff; border-radius:16px;
    padding:20px; margin:15px; width:300px; box-shadow:0 0 30px #00f0ff;
    cursor:grab; user-select:none; transition:transform 0.3s;
}
.floating-card:active { transform:scale(1.05); }

.lander {
    position:fixed; inset:0; background:rgba(10,10,31,0.95); display:flex;
    align-items:center; justify-content:center; z-index:9999;
}
.card-stack { display:flex; flex-direction:column; gap:12px; }

.gallery-panel {
    position:fixed; inset:0; background:#0a0a1f; padding:80px 20px 60px; display:none; flex-direction:column;
    z-index:9998;
}
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px; flex:1; }

/* Hamburger slide menu */
.slide-menu {
    position:fixed; top:60px; left:-300px; width:260px; height:calc(100vh-60px);
    background:#001122; border-right:3px solid #00f0ff; transition:left 0.4s ease;
    padding:20px 0; display:flex; flex-direction:column;
}
.slide-menu a { padding:15px 25px; color:#00f0ff; text-decoration:none; font-size:18px; }
.slide-menu.open { left:0; }

@media (max-width:640px) {
    .floating-card { width:260px; }
    .xp-bar { width:280px; }
}