/* v59: parchment level-up sheet and rarity-colored horizontal upgrade cards. */
#level-up {
  align-items: flex-start !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  background: radial-gradient(circle at 50% 18%, rgba(255, 250, 224, .98), rgba(240, 221, 166, .97) 68%), #f0dda6 !important;
}

#level-up .choice-panel {
  position: relative !important;
  width: min(556px, 100%) !important;
  min-height: min(700px, calc(100dvh - 16px)) !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 32px 14px 15px !important;
  border: 3px solid #9c6b2d !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, rgba(140, 91, 34, .08), transparent 8%, transparent 92%, rgba(140, 91, 34, .08)), radial-gradient(circle at 50% 5%, rgba(255,255,255,.76), transparent 26%), #f6e9bf !important;
  box-shadow: inset 0 0 0 2px rgba(255, 248, 213, .9), inset 0 0 26px rgba(117, 72, 25, .16), 0 8px 28px rgba(29, 20, 8, .38) !important;
}

#level-up .choice-panel::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 34px;
  height: 34px;
  border: 2px solid #9a8563;
  border-radius: 50%;
  background: radial-gradient(circle, #75674f 0 3px, transparent 4px), repeating-conic-gradient(from 0deg, #75674f 0 8deg, transparent 8deg 30deg), #fff9e5;
  box-shadow: 0 2px 4px rgba(66, 43, 16, .25);
  opacity: .9;
}

#level-up .choice-panel > p {
  margin: 0 0 4px !important;
  color: #52694f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#level-up .choice-panel > h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 18px 25px !important;
  color: #1f211b !important;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

#level-up .choice-panel > h2::before,
#level-up .choice-panel > h2::after {
  content: "";
  flex: 1 1 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c09653);
}

#level-up .choice-panel > h2::after { transform: scaleX(-1); }

#level-up .level-up-timer {
  position: absolute !important;
  top: 15px !important;
  right: 16px !important;
  color: #7a5a2c !important;
  font-size: 12px !important;
}

#level-up .upgrade-grid,
#level-up .upgrade-grid.four-options,
#level-up .upgrade-grid.evolution-choice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  width: 100% !important;
}

#level-up .upgrade-option {
  --card-accent: #a9e56d;
  --card-surface: #092118;
  --card-tint: rgba(13, 89, 51, .22);
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 66px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 138px !important;
  height: clamp(138px, calc((100dvh - 158px) / 3), 176px) !important;
  max-height: 176px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  border: 2px solid color-mix(in srgb, var(--card-accent) 62%, #8d692f) !important;
  border-radius: 6px !important;
  background-color: var(--card-surface) !important;
  background-image:
    radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 38%),
    linear-gradient(var(--card-tint), var(--card-tint)) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 0 0 1px rgba(235, 205, 127, .18), inset 0 0 26px rgba(0,0,0,.4), 0 3px 0 #6f4b22, 0 6px 13px rgba(52, 31, 8, .22) !important;
  color: var(--card-accent) !important;
  text-align: left !important;
  transition: filter 140ms ease, transform 140ms ease !important;
}

#level-up .upgrade-option:hover { filter: brightness(1.13) !important; transform: translateY(-2px) !important; }
#level-up .upgrade-option:focus-visible { outline: 3px solid #fff1ad !important; outline-offset: 2px !important; }
#level-up .upgrade-option[data-quality="standard"] { --card-accent: #aee878; --card-surface: #082218; --card-tint: rgba(13, 89, 51, .22); }
#level-up .upgrade-option[data-quality="strong"] { --card-accent: #75caff; --card-surface: #071c31; --card-tint: rgba(16, 96, 180, .42); }
#level-up .upgrade-option[data-quality="premium"] { --card-accent: #d5a1ff; --card-surface: #171126; --card-tint: rgba(116, 37, 170, .52); }
#level-up .upgrade-option[data-quality="mythic"] { --card-accent: #ffd676; --card-surface: #2c1d0a; --card-tint: rgba(134, 82, 18, .42); }
#level-up .upgrade-option:not([data-kind="skill"]) { grid-template-columns: minmax(0, 1fr) !important; }

#level-up .upgrade-option .card-icon {
  position: relative !important;
  inset: auto !important;
  display: none !important;
  width: 98px !important;
  height: 98px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #020403 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 600% 500% !important;
  background-position: center, 0 0 !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--card-accent) 68%, transparent) !important;
  color: transparent !important;
  font-size: 0 !important;
}

#level-up .upgrade-option .card-icon-damage { background-position: 0 0 !important; }
#level-up .upgrade-option .card-icon-xpGain { background-position: 20% 0 !important; }
#level-up .upgrade-option .card-icon-speed { background-position: 40% 0 !important; }
#level-up .upgrade-option .card-icon-health { background-position: 60% 0 !important; }
#level-up .upgrade-option .card-icon-regen { background-position: 80% 0 !important; }
#level-up .upgrade-option .card-icon-pickup { background-position: 100% 0 !important; }
#level-up .upgrade-option .card-icon-armor { background-position: 0 25% !important; }
#level-up .upgrade-option .card-icon-luck { background-position: 20% 25% !important; }
#level-up .upgrade-option .card-icon-critDamage { background-position: 40% 25% !important; }
#level-up .upgrade-option .card-icon-haste { background-position: 60% 25% !important; }
#level-up .upgrade-option .card-icon-execute { background-position: 80% 25% !important; }
#level-up .upgrade-option .card-icon-reroll { background-position: 100% 25% !important; }
#level-up .upgrade-option .card-icon-range { background-position: 0 50% !important; }
#level-up .upgrade-option .card-icon-coinGain { background-position: 20% 50% !important; }
#level-up .upgrade-option .card-icon-healingAura { background-position: 40% 50% !important; }
#level-up .upgrade-option .card-icon-dodge { background-position: 60% 50% !important; }
#level-up .upgrade-option .card-icon-relic { background-position: 80% 50% !important; }
#level-up .upgrade-option .card-icon-claw { background-position: 100% 50% !important; }
#level-up .upgrade-option .card-icon-hiss { background-position: 0 75% !important; }
#level-up .upgrade-option .card-icon-gas { background-position: 20% 75% !important; }
#level-up .upgrade-option .card-icon-domain { background-position: 40% 75% !important; }
#level-up .upgrade-option .card-icon-truck { background-position: 60% 75% !important; }
#level-up .upgrade-option .card-icon-quake { background-position: 80% 75% !important; }
#level-up .upgrade-option .card-icon-laser { background-position: 100% 75% !important; }
#level-up .upgrade-option .card-icon-ember { background-position: 0 100% !important; }
#level-up .upgrade-option .card-icon-spark { background-position: 20% 100% !important; }
#level-up .upgrade-option .card-icon-tide { background-position: 40% 100% !important; }
#level-up .upgrade-option .card-icon-acid { background-position: 60% 100% !important; }
#level-up .upgrade-option .card-icon-dark { background-position: 80% 100% !important; }

#level-up .upgrade-option .card-copy { align-self: center !important; min-width: 0 !important; margin: 0 !important; padding: 0 18px !important; }
#level-up .upgrade-option .card-quality { display: block !important; margin: 0 0 7px !important; color: #fffbea !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; }
#level-up .upgrade-option strong { display: block !important; margin: 0 0 9px !important; overflow-wrap: anywhere !important; color: #fffbea !important; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif !important; font-size: 25px !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: 0 !important; }
#level-up .upgrade-option .card-divider { display: block !important; width: 100% !important; height: 1px !important; margin: 0 0 9px !important; background: color-mix(in srgb, var(--card-accent) 58%, transparent) !important; }
#level-up .upgrade-option .card-detail { display: block !important; margin: 0 !important; color: #fffbea !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; }
#level-up .upgrade-option .card-detail .card-number { color: var(--card-accent) !important; font-weight: 900 !important; }
#level-up .upgrade-option[data-quality] .card-quality,
#level-up .upgrade-option[data-quality] .card-detail { color: #fffbea !important; }
#level-up .upgrade-option[data-quality] .card-detail .card-number { color: var(--card-accent) !important; }
#level-up .upgrade-option .skill-star { position: relative !important; inset: auto !important; width: 58px !important; height: 58px !important; margin: 0 auto !important; }
#level-up .upgrade-reroll { display: block !important; min-width: 124px !important; margin: 13px auto 0 !important; border-color: #8b632c !important; background: #f0cc6a !important; color: #553416 !important; }
#level-up .upgrade-reroll.hidden { display: none !important; }

@media (max-width: 600px) {
  #level-up { padding: 0 !important; }
  #level-up .choice-panel { width: 100% !important; min-height: 100dvh !important; padding: 25px 8px 12px !important; border-width: 3px !important; border-radius: 0 !important; }
  #level-up .choice-panel::before { top: 9px; left: 9px; width: 30px; height: 30px; }
  #level-up .choice-panel > p { font-size: 11px !important; }
  #level-up .choice-panel > h2 { gap: 8px !important; margin: 0 34px 18px !important; font-size: 24px !important; }
  #level-up .upgrade-grid, #level-up .upgrade-grid.four-options, #level-up .upgrade-grid.evolution-choice { gap: 8px !important; }
  #level-up .upgrade-option { grid-template-columns: minmax(0, 1fr) 51px !important; min-height: 132px !important; height: clamp(132px, calc((100dvh - 129px) / 3), 168px) !important; max-height: 168px !important; padding: 10px 9px !important; }
  #level-up .upgrade-option:not([data-kind="skill"]) { grid-template-columns: minmax(0, 1fr) !important; }
  #level-up .upgrade-option .card-icon { width: 76px !important; height: 76px !important; }
  #level-up .upgrade-option .card-copy { padding: 0 14px !important; }
  #level-up .upgrade-option .card-quality { margin-bottom: 6px !important; font-size: 10px !important; }
  #level-up .upgrade-option strong { margin-bottom: 7px !important; font-size: 21px !important; }
  #level-up .upgrade-option .card-divider { margin-bottom: 7px !important; }
  #level-up .upgrade-option .card-detail { font-size: 11px !important; }
  #level-up .upgrade-option .skill-star { width: 46px !important; height: 46px !important; }
}

@media (max-width: 380px), (max-height: 610px) {
  #level-up .choice-panel > h2 { margin-bottom: 11px !important; font-size: 21px !important; }
  #level-up .upgrade-option { grid-template-columns: minmax(0, 1fr) 44px !important; min-height: 118px !important; height: 118px !important; padding: 7px !important; }
  #level-up .upgrade-option:not([data-kind="skill"]) { grid-template-columns: minmax(0, 1fr) !important; }
  #level-up .upgrade-option .card-icon { width: 66px !important; height: 66px !important; }
  #level-up .upgrade-option strong { font-size: 18px !important; }
  #level-up .upgrade-option .card-detail { font-size: 10px !important; }
}