.level-up-modal {
  z-index: 90;
  padding: 14px;
  background: rgba(24, 42, 28, 0.6);
  backdrop-filter: blur(7px);
}

.level-up-dialog {
  width: min(580px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 8px solid #815626;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffe7a7 0%, #f5c96d 100%);
  padding: 18px;
  color: #4b2c16;
  text-align: center;
  box-shadow:
    0 0 0 5px #f8e5ae,
    0 20px 55px rgba(30, 17, 7, 0.46),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
  animation: level-dialog-enter 360ms cubic-bezier(0.2, 1.15, 0.4, 1) both;
}

.level-up-celebration {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  padding: 18px 16px 14px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 250, 168, 0.98) 0 16%, transparent 17%),
    repeating-conic-gradient(from -7deg at 50% 58%, #6cc8e8 0 9deg, #a7de87 9deg 18deg);
  box-shadow: inset 0 0 32px rgba(17, 105, 145, 0.22);
}

.level-up-celebration::before,
.level-up-celebration::after {
  position: absolute;
  z-index: -1;
  content: "✦";
  color: #fff8b5;
  font-size: 42px;
  filter: drop-shadow(0 2px 0 rgba(104, 78, 20, 0.26));
  animation: level-sparkle 1.15s ease-in-out infinite alternate;
}

.level-up-celebration::before { top: 72px; left: 19%; }
.level-up-celebration::after { right: 18%; bottom: 76px; animation-delay: 400ms; }

.level-up-kicker {
  display: block;
  color: #fffdf0;
  font: 1000 clamp(2rem, 7vw, 3.25rem)/1 Arial, sans-serif;
  letter-spacing: -0.04em;
  text-shadow: 0 3px 0 #5b4934, 0 5px 12px rgba(30, 61, 67, 0.36);
}

.level-up-dialog h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.level-up-celebration p {
  margin: 8px 0 8px;
  color: #184d73;
  font: 900 clamp(1rem, 3vw, 1.35rem)/1.2 Arial, sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.level-up-celebration p strong { color: #163d69; }

.level-up-medal {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 6px auto 0;
  border: 8px solid #d98616;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff6a8 0 9%, #ffd957 10% 37%, #f5a51d 70%, #c66d0f 100%);
  color: #85500e;
  box-shadow:
    0 0 0 5px #ffef93,
    0 9px 0 #985012,
    0 14px 24px rgba(67, 48, 11, 0.34),
    inset 0 4px 5px rgba(255, 255, 255, 0.62);
  animation: level-medal-enter 520ms 120ms cubic-bezier(0.2, 1.35, 0.4, 1) both;
}

.level-up-star {
  position: absolute;
  color: rgba(255, 243, 120, 0.62);
  font-size: 142px;
  line-height: 1;
  -webkit-text-stroke: 5px rgba(145, 83, 11, 0.72);
}

.level-up-medal strong {
  position: relative;
  z-index: 1;
  font: 1000 3.5rem/1 Arial, sans-serif;
  text-shadow: 0 2px 0 #ffef9a;
}

.level-up-summary {
  margin-top: 14px;
  border: 4px solid #765021;
  border-radius: 18px;
  background: rgba(255, 242, 195, 0.92);
  padding: 12px 14px;
  box-shadow: inset 0 2px 0 #fffbe1;
}

.level-up-summary h3 {
  margin: 0 0 9px;
  font: 1000 1rem/1 Arial, sans-serif;
  text-align: left;
}

.level-up-rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.level-reward {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 2px solid rgba(134, 85, 24, 0.34);
  border-radius: 999px;
  background: #fff9de;
  padding: 5px 11px;
  font: 900 0.9rem/1 Arial, sans-serif;
  box-shadow: inset 0 2px 0 #fff;
}

.level-reward-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f9b72d;
  color: #fff8c9;
  font-size: 0.9rem;
  box-shadow: inset 0 0 0 2px #bd7316;
}

.level-reward.credit .level-reward-icon { background: #d73957; box-shadow: inset 0 0 0 2px #8e1735; }
.level-reward.water .level-reward-icon { background: #36a8dc; box-shadow: inset 0 0 0 2px #18739d; }
.level-reward.energy .level-reward-icon { background: #6ebc3b; box-shadow: inset 0 0 0 2px #3d7f20; }

.level-up-unlocks {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  border-top: 1px solid rgba(118, 80, 33, 0.25);
  padding-top: 9px;
}

.level-up-unlocks span {
  color: #856537;
  font: 800 0.72rem/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.level-up-unlocks strong { color: #347328; }

.level-up-continue {
  min-width: 150px;
  min-height: 46px;
  margin-top: 14px;
  border: 3px solid #46781d;
  border-radius: 10px;
  background: linear-gradient(#91d84d, #55a72b);
  color: white;
  font: 1000 1rem/1 Arial, sans-serif;
  text-shadow: 0 2px 0 #376d1d;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #315f1b;
  cursor: pointer;
}

.level-up-continue:hover { filter: brightness(1.06); transform: translateY(-1px); }
.level-up-continue:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.44), 0 2px 0 #315f1b; }
.level-up-continue:focus-visible { outline: 4px solid rgba(36, 118, 172, 0.34); outline-offset: 3px; }

@keyframes level-dialog-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes level-medal-enter {
  from { opacity: 0; transform: rotate(-12deg) scale(0.45); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes level-sparkle {
  from { opacity: 0.42; transform: scale(0.72) rotate(-10deg); }
  to { opacity: 1; transform: scale(1.08) rotate(10deg); }
}

@media (max-width: 560px), (max-height: 720px) {
  .level-up-dialog { border-width: 5px; border-radius: 20px; padding: 10px; }
  .level-up-celebration { min-height: 250px; padding-top: 13px; }
  .level-up-medal { width: 138px; height: 138px; border-width: 6px; }
  .level-up-star { font-size: 102px; -webkit-text-stroke-width: 4px; }
  .level-up-medal strong { font-size: 2.7rem; }
  .level-up-kicker { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-dialog,
  .level-up-medal,
  .level-up-celebration::before,
  .level-up-celebration::after { animation: none; }
}