MJ

Musician Jump — мини‑игра

:root{
/* Красно‑чёрная тема */
–bg1:#0b0b0d;–bg2:#1a0c0c;–acc:#ff4d5a;–ui:#ffffffcc;–shadow:#00000066;
–panel:#ffffff14;–border:#ffffff22;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 800px at 50% 15%,#14090a 0%, var(–bg2) 60%, #090909 100%);font-family:ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
.wrap{position:relative;max-width:480px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
canvas{width:100%;height:100%;border-radius:16px;box-shadow:0 10px 40px var(–shadow);background:linear-gradient(180deg,#0c0b0d 0%, #170a0a 60%, #0c0b0d 100%)}
.hud{position:absolute;inset:16px;pointer-events:none}
.row{display:flex;justify-content:space-between;align-items:center;color:var(–ui);font-weight:600;text-shadow:0 2px 6px #000}
.row .pill{backdrop-filter: blur(6px);background:var(–panel);border:1px solid var(–border);color:#fff;padding:6px 10px;border-radius:999px;margin-right:8px;pointer-events:auto}
.controls{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:16px;pointer-events:auto}
.btn{width:64px;height:64px;border-radius:50%;border:1px solid var(–border);background:var(–panel);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 6px 18px var(–shadow);}
.btn:active{transform:translateY(1px)}
.top-right{display:flex;gap:8px}
.select{appearance:none;padding:6px 10px;border-radius:999px;border:1px solid var(–border);background:var(–panel);color:#fff;backdrop-filter: blur(6px);pointer-events:auto}
.overlay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-align:center;padding:24px}
.card{background:#0b0b0bcc;border:1px solid var(–border);padding:20px 16px;border-radius:16px;max-width:520px;box-shadow:0 10px 40px var(–shadow)}
h1{font-size:24px;margin:0 0 8px}
p{margin:8px 0}
.xsmall{font-size:12px;opacity:.8}
.actions{display:flex;justify-content:center;gap:12px;margin-top:12px}
.cta{padding:10px 16px;border-radius:12px;border:0;background:linear-gradient(135deg,#ff8a9a,#ff4d5a);color:#1a0c0c;font-weight:800}
.ghost{padding:10px 16px;border-radius:12px;border:1px solid var(–border);background:var(–panel);color:#fff}
@media (min-width:640px){.wrap{max-width:520px}}