/* ═══════════════════════════════════════════════════════════════
   LEVEL CELEBRATION SYSTEM — Normie Editor
   12 visual intensities covering levels 1–60+
   ═══════════════════════════════════════════════════════════════ */

/* Hide the original inline level badge */
.level-badge{ display:none !important; }

/* ── Level Display (below the grid) ──────────────────────────── */
.lc-level-display{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-top:6px;
  user-select:none;
  -webkit-user-select:none;
}
.lc-level-display.is-visible{ display:flex; }

.lc-level-num{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(18px,4vw,26px);
  letter-spacing:3px;
  line-height:1;
  color:#6b6b6b;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  transition:color .4s ease, text-shadow .6s ease, filter .6s ease;
}
.lc-level-caption{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:9px;
  letter-spacing:4px;
  text-transform:uppercase;
  opacity:.55;
  transition:opacity .4s ease, color .4s ease;
}

/* ── 12 intensity levels for below-grid number ──────────────── */

/* 1: quiet grey (1–2) */
.lc-level-display[data-intensity="1"] .lc-level-num{ color:#7a7a7a; }

/* 2: warm hint (3–4) */
.lc-level-display[data-intensity="2"] .lc-level-num{
  color:#a08050; text-shadow:0 0 5px rgba(160,128,80,.15);
}
/* 3: amber (5–7) */
.lc-level-display[data-intensity="3"] .lc-level-num{
  color:#c89030; text-shadow:0 0 8px rgba(200,144,48,.2);
}
/* 4: gold (8–10) */
.lc-level-display[data-intensity="4"] .lc-level-num{
  color:#d4a020; text-shadow:0 0 10px rgba(212,160,32,.25);
}
/* 5: hot gold (11–14) */
.lc-level-display[data-intensity="5"] .lc-level-num{
  color:#e8b010; text-shadow:0 0 12px rgba(232,176,16,.3);
  animation:lcPulseA 3s ease-in-out infinite;
}
/* 6: electric teal (15–19) */
.lc-level-display[data-intensity="6"] .lc-level-num{
  color:#00c8d4; text-shadow:0 0 12px rgba(0,200,212,.3), 0 0 24px rgba(0,200,212,.1);
  animation:lcPulseA 2.8s ease-in-out infinite;
}
/* 7: bright cyan (20–24) */
.lc-level-display[data-intensity="7"] .lc-level-num{
  color:#00e0ff; text-shadow:0 0 14px rgba(0,224,255,.35), 0 0 30px rgba(0,224,255,.12);
  animation:lcPulseB 2.5s ease-in-out infinite;
}
/* 8: magenta-pink (25–29) */
.lc-level-display[data-intensity="8"] .lc-level-num{
  color:#e040a0; text-shadow:0 0 14px rgba(224,64,160,.35), 0 0 28px rgba(224,64,160,.12);
  animation:lcPulseB 2.3s ease-in-out infinite;
}
/* 9: hot red (30–34) */
.lc-level-display[data-intensity="9"] .lc-level-num{
  color:#ff3050; text-shadow:0 0 14px rgba(255,48,80,.35), 0 0 32px rgba(255,48,80,.15);
  animation:lcPulseC 2.1s ease-in-out infinite;
}
/* 10: fire orange-red (35–44) */
.lc-level-display[data-intensity="10"] .lc-level-num{
  color:#ff5020; text-shadow:0 0 16px rgba(255,80,32,.4), 0 0 36px rgba(255,200,40,.15);
  animation:lcPulseC 1.9s ease-in-out infinite;
}
/* 11: plasma purple (45–54) */
.lc-level-display[data-intensity="11"] .lc-level-num{
  color:#b040ff; text-shadow:0 0 16px rgba(176,64,255,.4), 0 0 40px rgba(176,64,255,.15), 0 0 60px rgba(100,40,255,.08);
  animation:lcPulseD 1.7s ease-in-out infinite;
}
/* 12: white-hot (55–60+) */
.lc-level-display[data-intensity="12"] .lc-level-num{
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.6), 0 0 24px rgba(180,140,255,.4), 0 0 48px rgba(255,80,120,.25), 0 0 72px rgba(255,200,60,.15);
  animation:lcPulseD 1.4s ease-in-out infinite;
}

@keyframes lcPulseA{
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.1)}
}
@keyframes lcPulseB{
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.15)}
}
@keyframes lcPulseC{
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.22)}
}
@keyframes lcPulseD{
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3)}
}

/* ── Frame outer glow per intensity ───────────────────────────── */
.frame{ transition:box-shadow .6s ease; }

.frame[data-intensity="1"]{ box-shadow:0 10px 30px rgba(0,0,0,.08); }

.frame[data-intensity="2"]{ box-shadow:0 0 12px rgba(160,128,80,.12), 0 10px 30px rgba(0,0,0,.08); }

.frame[data-intensity="3"]{ box-shadow:0 0 16px rgba(200,144,48,.15), 0 10px 30px rgba(0,0,0,.08); }

.frame[data-intensity="4"]{ box-shadow:0 0 20px rgba(212,160,32,.2), 0 10px 30px rgba(0,0,0,.06); }

.frame[data-intensity="5"]{ box-shadow:0 0 24px rgba(232,176,16,.22), 0 0 48px rgba(232,176,16,.08); }

.frame[data-intensity="6"]{ box-shadow:0 0 24px rgba(0,200,212,.22), 0 0 48px rgba(0,200,212,.08); }

.frame[data-intensity="7"]{ box-shadow:0 0 28px rgba(0,224,255,.25), 0 0 56px rgba(0,224,255,.1); }

.frame[data-intensity="8"]{ box-shadow:0 0 28px rgba(224,64,160,.25), 0 0 56px rgba(224,64,160,.1); }

.frame[data-intensity="9"]{ box-shadow:0 0 30px rgba(255,48,80,.28), 0 0 60px rgba(255,48,80,.12); }

.frame[data-intensity="10"]{ box-shadow:0 0 34px rgba(255,80,32,.3), 0 0 64px rgba(255,200,40,.12); }

.frame[data-intensity="11"]{ box-shadow:0 0 36px rgba(176,64,255,.3), 0 0 72px rgba(176,64,255,.12); }

.frame[data-intensity="12"]{ box-shadow:0 0 20px rgba(255,255,255,.35), 0 0 44px rgba(180,140,255,.25), 0 0 80px rgba(255,80,120,.15); }

/* ── Dark-mode overrides ─────────────────────────────────────── */
body.dark-ui .lc-level-num{ color:#888; text-shadow:none; animation:none; }
body.dark-ui .lc-level-caption{ color:var(--ink); }

body.dark-ui .lc-level-display[data-intensity="2"] .lc-level-num{
  color:#c4a060; text-shadow:0 0 6px rgba(196,160,96,.2);
}
body.dark-ui .lc-level-display[data-intensity="3"] .lc-level-num{
  color:#daa040; text-shadow:0 0 8px rgba(218,160,64,.22);
}
body.dark-ui .lc-level-display[data-intensity="4"] .lc-level-num{
  color:#f0c030; text-shadow:0 0 10px rgba(240,192,48,.25);
}
body.dark-ui .lc-level-display[data-intensity="5"] .lc-level-num{
  color:#ffd030; text-shadow:0 0 12px rgba(255,208,48,.3);
  animation:lcPulseA 3s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="6"] .lc-level-num{
  color:#40e8f0; text-shadow:0 0 14px rgba(64,232,240,.3);
  animation:lcPulseA 2.8s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="7"] .lc-level-num{
  color:#50f0ff; text-shadow:0 0 16px rgba(80,240,255,.35),0 0 30px rgba(80,240,255,.12);
  animation:lcPulseB 2.5s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="8"] .lc-level-num{
  color:#f060b8; text-shadow:0 0 14px rgba(240,96,184,.35);
  animation:lcPulseB 2.3s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="9"] .lc-level-num{
  color:#ff5070; text-shadow:0 0 14px rgba(255,80,112,.38);
  animation:lcPulseC 2.1s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="10"] .lc-level-num{
  color:#ff7040; text-shadow:0 0 16px rgba(255,112,64,.4),0 0 32px rgba(255,200,60,.15);
  animation:lcPulseC 1.9s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="11"] .lc-level-num{
  color:#c060ff; text-shadow:0 0 16px rgba(192,96,255,.4),0 0 40px rgba(140,60,255,.18);
  animation:lcPulseD 1.7s ease-in-out infinite;
}
body.dark-ui .lc-level-display[data-intensity="12"] .lc-level-num{
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.5),0 0 24px rgba(192,140,255,.4),0 0 48px rgba(255,80,120,.2);
  animation:lcPulseD 1.4s ease-in-out infinite;
}


/* ── Full-Screen Celebration Overlay ─────────────────────────── */
.lc-overlay{
  position:fixed; inset:0; z-index:99999;
  pointer-events:none; overflow:hidden;
}
.lc-overlay.is-active{ /* pointer-events stays none — never block scroll */ }

.lc-flash{
  position:absolute; inset:0; opacity:0;
}
.lc-overlay.is-active .lc-flash{
  animation:lcFlash .8s ease-out forwards;
}
@keyframes lcFlash{ 0%{opacity:.5} 100%{opacity:0} }

.lc-burst{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-family:"Press Start 2P",monospace;
  text-align:center; white-space:nowrap;
  opacity:0; pointer-events:none;
}
.lc-burst__level{
  display:block;
  font-size:clamp(32px,8vw,64px);
  letter-spacing:4px; line-height:1.2;
}
.lc-burst__sub{
  display:block;
  font-size:clamp(8px,2vw,12px);
  letter-spacing:6px; text-transform:uppercase;
  margin-top:6px; opacity:.7;
}
.lc-overlay.is-active .lc-burst{
  animation:lcBurstIn .7s cubic-bezier(.17,.89,.32,1.28) .1s forwards;
}
@keyframes lcBurstIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.lc-overlay.is-leaving .lc-burst{
  animation:lcBurstOut .45s ease-in forwards;
}
@keyframes lcBurstOut{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
}

.lc-pixframe{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0; pointer-events:none;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.lc-overlay.is-active .lc-pixframe{
  animation:lcFrameIn .75s cubic-bezier(.17,.89,.32,1.28) .04s forwards;
}
@keyframes lcFrameIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  65%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
}
.lc-overlay.is-leaving .lc-pixframe{
  animation:lcFrameOut .35s ease-in forwards;
}
@keyframes lcFrameOut{ to{opacity:0;transform:translate(-50%,-50%) scale(1.3)} }

.lc-particles{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}