@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Rajdhani:wght@500;700;900&display=swap');

body { margin: 0; overflow: hidden; background-color: #050505; font-family: 'Rajdhani', sans-serif; touch-action: none; user-select: none; }
#game-container { position: relative; width: 100vw; height: 100vh; background-color: #000; }
canvas { display: block; image-rendering: pixelated; }

.ui-layer { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; }
.interactive-ui { pointer-events: auto; }
.creep-font { font-family: 'Creepster', cursive; text-shadow: 4px 4px 0px #000; }

/* Joystick */
#joystick-zone {
    position: absolute; bottom: 50px; left: 50px; width: 120px; height: 120px;
    background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%; display: none; pointer-events: auto;
}
#joystick-knob {
    position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
    background: rgba(255, 230, 0, 0.5); border-radius: 50%; transform: translate(-50%, -50%);
}

/* XP Bar */
.xp-container { position: fixed; top: 0; left: 0; width: 100%; height: 15px; background: #111; z-index: 100; border-bottom: 2px solid #333; }
.xp-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #9333ea); width: 0%; transition: width 0.2s; box-shadow: 0 0 15px #9333ea; }

/* Cards */
.skill-card {
    background: rgba(15, 23, 42, 0.98);
    border: 2px solid #334155;
    transition: all 0.15s ease-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.skill-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--card-color, #64748b);
    box-shadow: 0 0 30px var(--card-color-glow, rgba(100,116,139,0.3));
}
.skill-card:active { transform: scale(0.98); }

@keyframes glow { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
.glow-anim { animation: glow 2s infinite; }

/* Scrollbar personalizado para o ranking */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #777; }