:root {
  --bg0:#0b0f14;
  --grad: radial-gradient(1200px 600px at 20% 10%, #321e5e66, transparent),
          radial-gradient(900px 500px at 80% 80%, #0ea5e966, transparent),
          radial-gradient(600px 400px at 50% 50%, #14f19533, transparent);
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text:#e6f1ff;
  --muted:#94a3b8;
  --accent:#a855f7;
  --accent-glow: 0 0 24px #a855f7aa, 0 0 48px #7c3aed66;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Segoe UI Symbol";
  color:var(--text);
  background: var(--bg0);
  background-image: var(--grad);
  min-height:100dvh;
  text-align:center;
}

.degen-nav{
  display:flex;justify-content:center;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(18,20,26,.8), rgba(18,20,26,.5));
}
.degen-nav .actions{
  margin-left:auto; display:flex; gap:8px;
}
.btn.outline{
  background:transparent;
}
.btn.ghost{background:rgba(255,255,255,0.02)}
.btn.danger{border-color:#ef444433;color:#ff8a8a}
.brand{font-weight:800;letter-spacing:.5px}
.brand .tag{margin-left:10px;color:var(--muted);font-weight:600;font-size:.9rem}
.spark{color:#14f195;margin-right:6px}

.toolbar{
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin:16px auto; padding:8px 10px; width:min(980px, 96%);
}
.glass{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
   backdrop-filter: blur(8px);
 }
.hud{margin-left:10px;color:var(--muted);font-weight:600;display:flex;gap:10px;align-items:center}
.hud-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981}

.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn.tiny{padding:4px 8px;border-radius:8px;font-size:.85rem}
.btn:hover{
  transform:translateY(-1px);
  border-color:#ffffff33;
}
.btn.neon{
  border-color:#a855f744;
  box-shadow:var(--accent-glow);
}
.btn.danger:hover{box-shadow:0 0 18px #ef444455}

.stage{position:relative; width:min(1500px, 96%); margin:0 auto}
canvas{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--border);
  border-radius:16px;
  background:#111;
  cursor:grab;
  box-shadow:0 10px 40px #0006;
}
.fx{position:absolute; inset:0; pointer-events:none; border-radius:16px}
.pump-glow{box-shadow:0 0 80px 18px #14f19555 inset, 0 0 120px 18px #14f19544}
.rekt-glow{box-shadow:0 0 80px 18px #ef444455 inset, 0 0 120px 18px #ef444444}

#audioToggleBtn {
  margin-left: 8px;
}

/* ===== Recorder (dev) ===== */
.rec{
  display:flex; gap:6px; align-items:center; margin-left:8px; padding:6px 8px;
}
.rec-switch{display:flex; gap:6px; align-items:center; font-weight:700}
.rec-name{
  width:180px; max-width:28vw;
  padding:6px 8px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,0.04); color:var(--text);
}
.rec .btn.tiny{white-space:nowrap}

/* glitch hover для .brand */
.brand:hover{
  text-shadow: 2px 0 #14f195, -2px 0 #a855f7;
  filter: saturate(140%);
}

/* ===== Leaderboard ===== */
.lb{
  position:absolute; right:12px; top:12px; width:min(320px, 86%);
  text-align:left; padding:10px; border-radius:14px;
}
.lb-head{display:flex; align-items:center; justify-content:space-between; font-weight:800; letter-spacing:.2px}
.lb-you{
  margin:8px 0 6px; padding:8px 10px; border:1px dashed var(--border);
  border-radius:10px; color:var(--muted); font-size:.95rem;
}
.lb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:rank;}
.lb-list li{
  counter-increment:rank;
  display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border);
  background:rgba(255,255,255,0.03); border-radius:10px;
}
.lb-badge{width:24px; text-align:center; font-weight:900}
.lb-name{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-count{font-variant-numeric:tabular-nums; font-weight:700}
.lb-medal-1{filter:drop-shadow(0 0 10px #ffd70066)}
.lb-medal-2{filter:drop-shadow(0 0 10px #c0c0c066)}
.lb-medal-3{filter:drop-shadow(0 0 10px #cd7f3266)}

@media (max-width: 720px){
  .degen-nav{justify-content:space-between}
  .brand .tag{display:none}
  .toolbar{flex-wrap:wrap}
  .hud-cta{width:100%;justify-content:center}
  .rec{width:100%; justify-content:center; flex-wrap:wrap}
  .lb{right:6px; left:6px; width:auto}
}

/* ===== Improve leaderboard readability with dark text ===== */
/* Make leaderboard text dark and high-contrast */
.lb {
  color: #0b1220; /* dark, easily readable */
  background: rgba(255, 255, 255, 0.9);
  border-color: #e5e7eb;
}
.lb * { color: inherit; }
.lb-head { color: #0b1220; }
.lb-you {
  color: #0b1220;
  border-color: #e5e7eb;
  background: rgba(255, 255, 255, 0.85);
}
.lb-list li {
  color: #0b1220;
  background: rgba(255, 255, 255, 0.98);
  border-color: #e5e7eb;
}
.lb-badge, .lb-count, .lb-name { color: #0b1220; }

/* ===== Pack toast (уведомление о новом рисунке) ===== */
.toast{
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) translateY(-10px);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  background: rgba(255,255,255,0.96);
  color:#0b1220;
  border:1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.toast-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-hide{
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}