* { margin:0; padding:0; box-sizing:border-box; }
body { background:#1a1626; display:flex; justify-content:center; align-items:center; min-height:100vh; font-family:sans-serif; }
#wrap { position:relative; }
canvas { background:#2b2440; border-radius:8px; display:block; }
#levelup { position:absolute; inset:0; background:rgba(0,0,0,.7); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; border-radius:8px; }
#levelup.hidden { display:none; }
#levelup h2 { color:#ffd54a; text-shadow:0 2px 8px #000; }
#cards { display:flex; gap:12px; }
.card { width:130px; padding:16px 10px; background:#3a3155; border:2px solid #7c6ee0; border-radius:10px; color:#fff; cursor:pointer; text-align:center; transition:transform .1s; }
.card:hover { transform:scale(1.07); background:#4c4173; }
.card .key { color:#ffd54a; font-size:12px; }
.card .name { font-weight:bold; margin:6px 0; }
.card .desc { font-size:12px; color:#cfc8ee; }