* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0716; color: #fff; font-family: "Trebuchet MS", system-ui, sans-serif; overflow: hidden; }
main { display: flex; height: 100%; }
#stage { position: relative; flex: 1; min-width: 0; }
canvas { width: 100%; height: 100%; display: block; }
#hud { position: absolute; top: 14px; left: 0; right: 0; text-align: center; pointer-events: none; text-shadow: 0 2px 12px #000; }
#coins { font-size: clamp(26px, 5vw, 46px); font-weight: 900; color: #ffd84a; transition: transform .08s; }
#coins.bump { transform: scale(1.12); }
#rate { font-size: 16px; color: #9fe8ff; }
#mute { position: absolute; top: 10px; right: 10px; font-size: 22px; background: #0008; border: 0; border-radius: 12px; padding: 6px 10px; cursor: pointer; }
#panel { width: 340px; overflow-y: auto; padding: 10px; background: #150f2b; border-left: 3px solid #3b2a7a; }
#panel h2 { margin: 12px 4px 6px; font-size: 15px; color: #b9a6ff; text-transform: uppercase; letter-spacing: 1px; }
.card { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 7px; padding: 8px 10px; border: 2px solid #3b2a7a; border-radius: 14px; background: #20174a; color: #fff; text-align: left; font: inherit; cursor: pointer; position: relative; overflow: hidden; }
.card.can { border-color: #ffd84a; background: #3a2d6e; animation: glow 1.2s infinite alternate; }
.card.can:active { transform: scale(.97); }
.card.max { opacity: .6; cursor: default; border-color: #4caf50; }
@keyframes glow { to { box-shadow: 0 0 14px #ffd84a88; } }
.card .ic { font-size: 28px; width: 36px; text-align: center; }
.card .tx { flex: 1; min-width: 0; }
.card .nm { font-weight: 800; font-size: 15px; }
.card .ds { font-size: 12px; color: #c9bff0; }
.card .pr { font-weight: 900; color: #ffd84a; white-space: nowrap; font-size: 14px; }
.card:not(.can):not(.max) .pr { color: #8a7fb5; }
.card .lv { font-size: 11px; color: #9fe8ff; }
.card .cdbar { position: absolute; left: 0; bottom: 0; height: 4px; background: #6cf; width: 0; }
@media (max-width: 760px) {
  main { flex-direction: column; }
  #panel { width: 100%; height: 48%; border-left: 0; border-top: 3px solid #3b2a7a; }
}
#magnetName { font-size: 14px; color: #ffd0ff; margin-top: 2px; }
.card.rebirth { border-color: #a855f7; }
.card.rebirth.can { border-color: #ffd84a; }